/* ==========================================================================
   Snowboard Travel Guide — cinematic.css
   Premium adventure-brand layer: parallax, motion design, depth, atmospheric
   dividers, sticky compare rail, frequently-bought-together, animated reveals.
   Loaded after components.css.
   ========================================================================== */

/* -------- Depth tokens (override defaults for richer feel) -------- */
:root {
	--stg-shadow-1:  0 1px 2px rgba(11, 31, 58, .06), 0 6px 16px rgba(11, 31, 58, .08);
	--stg-shadow-2:  0 14px 36px rgba(11, 31, 58, .14), 0 4px 12px rgba(11, 31, 58, .08);
	--stg-shadow-3:  0 32px 80px rgba(11, 31, 58, .35), 0 8px 24px rgba(11, 31, 58, .18);
	--stg-shadow-glow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(31,111,235,.25);
}

/* -------- Reveal-on-scroll system -------- */
.stg-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--stg-easing), transform .8s var(--stg-easing); will-change: opacity, transform; }
.stg-reveal.is-in { opacity: 1; transform: none; }
.stg-reveal--up    { transform: translateY(40px); }
.stg-reveal--right { transform: translateX(-32px); }
.stg-reveal--left  { transform: translateX(32px); }
.stg-reveal--zoom  { transform: scale(.96); }
.stg-reveal--zoom.is-in { transform: scale(1); }

/* Stagger children */
.stg-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--stg-easing), transform .6s var(--stg-easing); }
.stg-stagger.is-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.stg-stagger.is-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .12s; }
.stg-stagger.is-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .19s; }
.stg-stagger.is-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .26s; }
.stg-stagger.is-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .33s; }
.stg-stagger.is-in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .40s; }
.stg-stagger.is-in > *:nth-child(n+7) { opacity: 1; transform: none; transition-delay: .47s; }

@media (prefers-reduced-motion: reduce) {
	.stg-reveal, .stg-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -------- HERO — cinematic upgrade -------- */
.stg-hero { min-height: clamp(680px, 96vh, 980px); }
.stg-hero__inner { padding-top: 110px; padding-bottom: 64px; }

/* Multi-layer parallax background */
.stg-hero__bg-stack { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.stg-hero__bg-stack .stg-hero__layer { position: absolute; left: -4%; right: -4%; bottom: 0; will-change: transform; transition: transform .15s linear; }
.stg-hero__bg-stack .stg-hero__layer svg { width: 108%; height: auto; display: block; }
.stg-hero__layer--sky    { top: 0; bottom: auto; height: 100%; }
.stg-hero__layer--sky svg { width: 100%; height: 100%; }
.stg-hero__layer--sun    { top: 8%; right: 8%; left: auto; width: clamp(120px, 16vw, 220px); }
.stg-hero__layer--ridge3 { bottom: 32%; }
.stg-hero__layer--ridge2 { bottom: 18%; }
.stg-hero__layer--ridge1 { bottom: 0; }
.stg-hero__layer--rider  { right: 8%; left: auto; bottom: 22%; width: clamp(80px, 11vw, 160px); transform: rotate(-6deg); }
.stg-hero__layer--snowfg { bottom: 0; }

.stg-hero::before {
	background: radial-gradient(ellipse at 30% 70%, rgba(31,111,235,.45) 0%, transparent 55%),
	            linear-gradient(180deg, rgba(11,31,58,.35) 0%, rgba(11,31,58,.55) 50%, rgba(6,18,42,.92) 100%);
}

/* Headline reveal: split character animation */
.stg-hero__title { overflow: hidden; }
.stg-hero__title .stg-word { display: inline-block; overflow: hidden; vertical-align: top; }
.stg-hero__title .stg-word > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.22,.8,.18,1); }
.stg-hero.is-revealed .stg-hero__title .stg-word > span { transform: translateY(0); }
.stg-hero__title .stg-word:nth-child(1) > span  { transition-delay: .05s; }
.stg-hero__title .stg-word:nth-child(2) > span  { transition-delay: .15s; }
.stg-hero__title .stg-word:nth-child(3) > span  { transition-delay: .25s; }
.stg-hero__title .stg-word:nth-child(4) > span  { transition-delay: .35s; }
.stg-hero__title .stg-word:nth-child(5) > span  { transition-delay: .45s; }
.stg-hero__title .stg-word:nth-child(6) > span  { transition-delay: .55s; }
.stg-hero__title .stg-word:nth-child(7) > span  { transition-delay: .65s; }
.stg-hero__title .stg-word:nth-child(8) > span  { transition-delay: .75s; }
.stg-hero__title .stg-word:nth-child(n+9) > span{ transition-delay: .85s; }

/* Live-snow ticker under hero */
.stg-hero__ticker {
	margin-top: 28px; display: flex; align-items: center; gap: 14px;
	padding: 10px 16px; border-radius: 999px;
	background: rgba(11,31,58,.45);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(14px);
	color: #fff; font-size: .85rem;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.stg-hero__ticker-label { display: inline-flex; align-items: center; gap: 6px; color: var(--stg-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; flex: 0 0 auto; }
.stg-hero__ticker-track { display: inline-flex; gap: 28px; animation: stg-ticker 32s linear infinite; flex: 1 1 auto; }
.stg-hero__ticker-track > span { display: inline-flex; align-items: center; gap: 6px; }
.stg-hero__ticker-track .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stg-secondary); }
@keyframes stg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .stg-hero__ticker-track { animation: none; } }

/* -------- Atmospheric section dividers -------- */
.stg-section--peaks { position: relative; }
.stg-section--peaks::before {
	content: ''; display: block; height: clamp(40px, 6vw, 80px);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><polygon points='0,80 120,30 240,60 360,20 480,55 600,15 720,50 840,25 960,55 1080,30 1200,60 1200,80' fill='%23ffffff'/></svg>");
	background-repeat: no-repeat; background-size: 100% 100%;
	margin-top: calc(var(--stg-section-y) * -1);
	pointer-events: none;
}
.stg-section--peaks-dark::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><polygon points='0,80 120,30 240,60 360,20 480,55 600,15 720,50 840,25 960,55 1080,30 1200,60 1200,80' fill='%23061229'/></svg>"); }

.stg-section--wave { position: relative; }
.stg-section--wave::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px, 6vw, 80px);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 C150,80 350,0 600,40 C850,80 1050,0 1200,40 L1200,80 L0,80 Z' fill='%23f3f8fd'/></svg>");
	background-size: 100% 100%; pointer-events: none;
}

/* -------- Section premium upgrades -------- */
.stg-section { background-clip: padding-box; }
.stg-section--soft  { background: linear-gradient(180deg, var(--stg-bg) 0%, var(--stg-bg-soft) 30%, var(--stg-bg-soft) 70%, var(--stg-bg) 100%); }
.stg-section--dark  { background: linear-gradient(180deg, #0b1f3a 0%, #06122a 50%, #04091a 100%); position: relative; isolation: isolate; }
.stg-section--dark::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background:
		radial-gradient(800px 400px at 10% 20%, rgba(31,111,235,.25), transparent 60%),
		radial-gradient(700px 350px at 90% 80%, rgba(92,209,201,.18), transparent 60%);
}

/* Premium cards: lift + image-zoom */
.stg-resort-card, .stg-edit-card, .stg-card-tile, .stg-pcard, .stg-tools-card {
	transition: transform .4s var(--stg-easing), box-shadow .4s var(--stg-easing), border-color .3s var(--stg-easing);
}
.stg-resort-card:hover, .stg-edit-card:hover, .stg-card-tile:hover, .stg-pcard:hover { transform: translateY(-6px); box-shadow: var(--stg-shadow-2); }
.stg-resort-card__media, .stg-edit-card__media, .stg-card-tile__media, .stg-pcard__media { overflow: hidden; }
.stg-resort-card__media svg, .stg-resort-card__media img,
.stg-edit-card__media svg, .stg-edit-card__media img,
.stg-card-tile__media svg, .stg-card-tile__media img,
.stg-pcard__media svg { transition: transform .8s var(--stg-easing); }
.stg-resort-card:hover .stg-resort-card__media svg,
.stg-resort-card:hover .stg-resort-card__media img,
.stg-edit-card:hover .stg-edit-card__media svg,
.stg-edit-card:hover .stg-edit-card__media img,
.stg-card-tile:hover .stg-card-tile__media svg,
.stg-card-tile:hover .stg-card-tile__media img,
.stg-pcard:hover .stg-pcard__media svg { transform: scale(1.06); }

/* Resort card extras: airport row */
.stg-resort-card__air {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; margin-top: 8px;
	border-radius: 12px; background: rgba(31,111,235,.08); color: var(--stg-text-2);
	font-size: .82rem;
}
.stg-resort-card__air svg { color: var(--stg-primary); flex: 0 0 auto; }
.stg-resort-card__air b { color: var(--stg-text); }
.stg-resort-card__tagline { color: var(--stg-text-mute); font-size: .85rem; margin: -2px 0 6px; font-style: italic; }

/* CTA glow pulse on primary buttons (subtle) */
.stg-btn--primary { position: relative; isolation: isolate; }
.stg-btn--primary::before {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; opacity: 0;
	background: linear-gradient(135deg, var(--stg-primary), var(--stg-secondary));
	filter: blur(14px);
	transition: opacity .25s var(--stg-easing);
}
.stg-btn--primary:hover::before { opacity: .55; }

/* -------- Animated counter (calculator) -------- */
.stg-calc__amount { font-variant-numeric: tabular-nums; }
.stg-calc__amount.is-bumping { animation: stg-bump .4s var(--stg-easing); }
@keyframes stg-bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); color: var(--stg-secondary); } 100% { transform: scale(1); } }

/* -------- Quiz step transitions -------- */
.stg-quiz__view { transition: opacity .25s var(--stg-easing), transform .35s var(--stg-easing); }
.stg-quiz__view.is-leaving { opacity: 0; transform: translateX(-12px); }
.stg-quiz__view.is-entering{ opacity: 0; transform: translateX(12px); }

/* Quiz answer focus ring */
.stg-quiz__answer:focus-visible { outline: 2px solid var(--stg-primary); outline-offset: 3px; }

/* -------- Visualizer pin pop -------- */
.stg-vis-pin { animation: stg-pin-pop .35s var(--stg-easing); }
@keyframes stg-pin-pop { from { transform: translate(-50%, -120%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* -------- Snow tracker — animated bar fill -------- */
.stg-snow__powder-bar span { transition: width 1.2s var(--stg-easing); }
.stg-snow__card { position: relative; overflow: hidden; }
.stg-snow__card::after {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
	background: radial-gradient(400px 200px at 80% -10%, rgba(255,255,255,.15), transparent 60%);
}

/* -------- Frequently bought together / Kit card -------- */
.stg-kit {
	background: linear-gradient(135deg, #fff, var(--stg-bg-soft));
	border: 1px solid var(--stg-line);
	border-radius: var(--stg-radius-lg);
	padding: 28px;
	box-shadow: var(--stg-shadow-1);
	margin: 32px 0;
	position: relative;
	overflow: hidden;
}
.stg-kit::before {
	content: ''; position: absolute; top: 0; right: 0; width: 240px; height: 240px;
	background: radial-gradient(circle, rgba(92,209,201,.15), transparent 70%);
	pointer-events: none;
}
.stg-kit__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; position: relative; }
.stg-kit__title { font-size: 1.4rem; margin: 4px 0 6px; }
.stg-kit__summary { color: var(--stg-text-2); margin: 0; max-width: 60ch; }
.stg-kit__badge { background: var(--stg-dark); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; flex: 0 0 auto; }

.stg-kit__chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: stretch; position: relative; }
.stg-kit__item {
	display: flex; flex-direction: column; gap: 8px;
	padding: 16px; border-radius: var(--stg-radius);
	background: #fff; border: 1px solid var(--stg-line);
	text-align: center;
	position: relative; transition: transform .2s var(--stg-easing), border-color .2s var(--stg-easing);
}
.stg-kit__item:hover { transform: translateY(-2px); border-color: var(--stg-primary); }
.stg-kit__item-art { aspect-ratio: 1/1; border-radius: 12px; background: linear-gradient(135deg, var(--stg-powder), #fff); display: grid; place-items: center; color: var(--stg-primary); }
.stg-kit__item-art svg { width: 36px; height: 36px; }
.stg-kit__item-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--stg-text-mute); font-weight: 700; }
.stg-kit__item-label { font-weight: 600; color: var(--stg-text); font-size: .92rem; line-height: 1.3; }
.stg-kit__item-link { font-size: .82rem; color: var(--stg-primary); font-weight: 600; margin-top: auto; }
.stg-kit__item-link:hover { text-decoration: underline; }

.stg-kit__plus {
	display: none; /* show via JS or media query if you want connectors */
}
.stg-kit__foot { margin-top: 22px; display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
.stg-kit__pricing { display: flex; align-items: center; gap: 14px; color: var(--stg-text-2); font-size: .92rem; }
.stg-kit__pricing strong { color: var(--stg-text); }
.stg-kit__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* -------- Sticky compare rail (desktop right side) -------- */
.stg-compare-rail {
	position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
	display: none;
	flex-direction: column; gap: 8px;
	background: #fff; border-radius: 999px; padding: 8px;
	box-shadow: var(--stg-shadow-2); border: 1px solid var(--stg-line);
	z-index: 70;
}
@media (min-width: 1280px) { .stg-compare-rail.is-active { display: flex; } }
.stg-compare-rail__pill { width: 44px; height: 44px; border-radius: 50%; background: var(--stg-bg-soft); border: 0; display: grid; place-items: center; cursor: pointer; transition: background .15s var(--stg-easing); position: relative; }
.stg-compare-rail__pill:hover { background: var(--stg-powder); }
.stg-compare-rail__pill .num { position: absolute; top: -4px; right: -4px; background: var(--stg-primary); color: #fff; font-size: .65rem; padding: 2px 6px; border-radius: 999px; }
.stg-compare-rail__action { background: linear-gradient(135deg, var(--stg-primary), var(--stg-dark)); color: #fff !important; }

/* -------- Map planner — centerpiece variant -------- */
.stg-section--map-center { padding-top: 0; }
.stg-map-center {
	position: relative;
	min-height: 540px;
	border-radius: var(--stg-radius-lg);
	overflow: hidden;
	background: linear-gradient(180deg, #0b1f3a, #1b4f87);
	box-shadow: var(--stg-shadow-3);
	color: #fff;
}
.stg-map-center__sky { position: absolute; inset: 0; z-index: 0; }
.stg-map-center__sky svg { width: 100%; height: 100%; }
.stg-map-center__body { position: relative; z-index: 1; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 360px; gap: 28px; }
@media (max-width: 980px) { .stg-map-center__body { grid-template-columns: 1fr; } }

.stg-map-center__head { max-width: 600px; }
.stg-map-center__head h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 8px 0 12px; }
.stg-map-center__head p  { color: #cfe7f7; margin: 0; }

.stg-map-center__stage { position: relative; aspect-ratio: 16/9; min-height: 320px; border-radius: var(--stg-radius); overflow: hidden; margin-top: 24px; background: linear-gradient(180deg, #cfe7f7, #79c2e3); }
.stg-map-center__stage svg.bg { width: 100%; height: 100%; display: block; }
.stg-map-center__pins { position: absolute; inset: 0; }
.stg-map-pin {
	position: absolute; transform: translate(-50%, -50%);
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--stg-primary); border: 3px solid #fff;
	color: #fff; display: grid; place-items: center;
	font-size: .65rem; font-weight: 700; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
	transition: transform .2s var(--stg-easing);
	animation: stg-pin-pop .4s var(--stg-easing) both;
}
.stg-map-pin:hover, .stg-map-pin.is-active { transform: translate(-50%, -50%) scale(1.18); background: var(--stg-accent); }
.stg-map-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; }

.stg-map-center__legend { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.stg-map-center__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #cfe7f7; }
.stg-map-center__legend i { width: 12px; height: 12px; border-radius: 50%; }

.stg-map-center__panel {
	background: rgba(11,31,58,.55); backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,.14); border-radius: var(--stg-radius);
	padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.stg-map-center__panel h3 { color: #fff; margin: 0; font-size: 1.1rem; }
.stg-map-center__panel p  { color: #cfe7f7; font-size: .9rem; margin: 0; }
.stg-map-center__pinned { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 220px; overflow-y: auto; }
.stg-map-center__pinned li { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stg-map-center__pinned strong { color: #fff; font-size: .9rem; }
.stg-map-center__pinned small { color: #9fb3cc; font-size: .75rem; display: block; }
.stg-map-center__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.stg-map-center__filters .stg-pill { background: rgba(255,255,255,.08); color: #cfe7f7; border-color: rgba(255,255,255,.14); }
.stg-map-center__filters .stg-pill--active { background: var(--stg-secondary); color: var(--stg-dark); border-color: var(--stg-secondary); }

/* -------- Floating quick-tools dock (mobile, scrolled state) -------- */
.stg-dock {
	position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 55;
	display: none; gap: 8px; overflow-x: auto; padding: 8px;
	background: rgba(11,31,58,.85); backdrop-filter: blur(14px);
	border-radius: 999px; box-shadow: var(--stg-shadow-2);
	scrollbar-width: none;
}
.stg-dock::-webkit-scrollbar { display: none; }
.stg-dock a { flex: 0 0 auto; padding: 8px 14px; color: #fff; font-size: .82rem; font-weight: 600; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; }
.stg-dock a:hover { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 720px) { .stg-dock.is-on { display: flex; } }

/* -------- Internal-link callout (auto-injected) -------- */
.stg-il-callout {
	margin: 28px 0; padding: 16px 18px;
	background: linear-gradient(135deg, rgba(31,111,235,.06), rgba(92,209,201,.04));
	border: 1px solid var(--stg-line); border-left: 4px solid var(--stg-primary);
	border-radius: var(--stg-radius);
	display: flex; gap: 14px; align-items: flex-start;
	font-size: .95rem;
}
.stg-il-callout svg { color: var(--stg-primary); margin-top: 2px; flex: 0 0 auto; }
.stg-il-callout strong { color: var(--stg-text); }
.stg-il-callout a { font-weight: 600; }

/* -------- Safety / methodology callout -------- */
.stg-safety {
	margin: 28px 0; padding: 18px 22px;
	background: linear-gradient(135deg, #fff5e6, #fef0d8);
	border: 1px solid #f0c780; border-radius: var(--stg-radius);
	color: #6b4500;
}
.stg-safety h3 { color: #6b4500; margin: 0 0 6px; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
.stg-safety p { color: #6b4500; margin: 0; font-size: .92rem; line-height: 1.55; }
.stg-safety strong { color: #4d3000; }

/* -------- Methodology grid -------- */
.stg-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 32px 0; }
.stg-method__card { background: #fff; border: 1px solid var(--stg-line); border-radius: var(--stg-radius); padding: 22px; }
.stg-method__card h3 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.stg-method__card svg { color: var(--stg-primary); }

/* -------- Confetti on packing 100% -------- */
.stg-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.stg-confetti span {
	position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px;
	animation: stg-fall 2.2s linear forwards;
}
@keyframes stg-fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .stg-confetti { display: none; } }

/* -------- Tag chips (region) -------- */
.stg-tag--asia        { background: #fde2f3; color: #9b1f70; }
.stg-tag--europe      { background: #e0eaff; color: #1b3a8a; }
.stg-tag--north-america { background: #e0fff0; color: #0d6e57; }

/* -------- Polish bits -------- */
.stg-section__head .stg-eyebrow svg { color: var(--stg-secondary); }
.stg-resort-card { background: #fff; border: 1px solid var(--stg-line); border-radius: var(--stg-radius); }
.stg-resort-card__media { aspect-ratio: 16/10; }
.stg-resort-card--feature .stg-resort-card__media { aspect-ratio: 4/5; }

/* Decorative section eyebrow underline */
.stg-section__head .stg-eyebrow { position: relative; padding-bottom: 6px; }
.stg-section__head .stg-eyebrow::after { content: ''; display: block; width: 28px; height: 2px; background: linear-gradient(90deg, var(--stg-primary), var(--stg-secondary)); margin: 8px auto 0; border-radius: 2px; }
.stg-section__head--row .stg-eyebrow::after { margin-left: 0; margin-right: auto; }

/* Scroll-driven section depth on dark backdrops */
.stg-section--dark .stg-section__title { text-shadow: 0 2px 30px rgba(31,111,235,.3); }