/* ==========================================================================
   Buzz Solutions — Story Home
   Light editorial canvas. Each dark act is an inset rounded "window" frame
   on the static canvas: the frame pins while its scene scrubs inside, with
   frosted-glass content cards over the media. Scene over → frame releases.
   Brand constants: Buzz Sans + Roboto; all-cap max-weight Buzz Sans subheads.
   ========================================================================== */

/* Hello Elementor ships html { scroll-behavior: smooth }, which turns the
   scroll restoration ScrollTrigger performs inside refresh() into an
   animation — measurements read mid-flight positions and every pin start
   drifts by -scrollY after a resize. This sheet only loads on the story
   template; explicit behavior:'smooth' JS calls still animate. */
html { scroll-behavior: auto !important; }

.buzz-story {
	--story-canvas: #f0efe9;
	--story-ink: #0a1b3d;
	--story-ink-soft: #44516e;
	--story-night: #0a1b3d;
	--story-night-ink: #f4f3ee;
	--story-violet: #5C50EE;
	--story-green: #19D874;
	--story-cyan: #00C6FF;
	--story-gold: #FFB600;
	--story-shell: min(1180px, calc(100% - 2rem)); /* matches site header width */
	--story-frame-inset: clamp(10px, 1.8vw, 28px);
	--story-frame-radius: clamp(18px, 2.6vw, 36px);

	background: var(--story-canvas);
	color: var(--story-ink);
	font-family: "Roboto", sans-serif;
	overflow-x: clip;
}

.buzz-story .story-shell {
	width: var(--story-shell);
	margin-inline: auto;
}


/* ── Type system ─────────────────────────────────────────────────────────── */

/* Required brand rule: subheadings are all-cap, strongest-weight Buzz Sans */
.buzz-story .story-kicker {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 1rem;
	color: var(--story-ink);
	margin: 0 0 1.6rem;
}

.buzz-story .story-kicker--light { color: var(--story-night-ink); }
.buzz-story .story-kicker--accent { color: var(--accent, var(--story-ink)); margin-bottom: 1rem; }

.buzz-story h1,
.buzz-story h2,
.buzz-story h3 {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-weight: 560;
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0;
	color: inherit;
}

.buzz-story p { margin: 0; }

/* ── Reveal fallback (no GSAP / reduced motion path) ─────────────────────── */

.buzz-story .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-story .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* When the scrubbed scroll-story engages, GSAP owns all motion */
.buzz-story.has-scrollstory .reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ── Media windows (swappable slots) ─────────────────────────────────────── */

.buzz-story .story-window,
.buzz-story .story-stage-media {
	position: relative;
	margin: 0;
	background: var(--story-night);
	overflow: hidden;
}

.buzz-story .story-window > canvas,
.buzz-story .story-window > video,
.buzz-story .story-window > img,
.buzz-story .story-stage-media > canvas,
.buzz-story .story-stage-media > video,
.buzz-story .story-stage-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* tint over video media so the light text inside the frame stays legible —
   weighted toward the left, where the beat copy sits */
.buzz-story .story-media-tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(11, 12, 18, 0.66) 28%, rgba(11, 12, 18, 0.36) 80%);
	pointer-events: none;
	z-index: 1;
}

.buzz-story .story-window-caption {
	position: absolute;
	left: 1.4rem;
	bottom: 1.2rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(244, 243, 238, 0.62);
	z-index: 2;
}

/* ── The framed scene system ─────────────────────────────────────────────── */

.buzz-story .story-deep { background: var(--story-canvas); }

.buzz-story .story-stage {
	position: relative;
	height: 100vh;
	height: 100svh;
}

.buzz-story .story-frame {
	position: absolute;
	inset: var(--story-frame-inset);
	border-radius: var(--story-frame-radius);
	background: var(--story-night);
	color: var(--story-night-ink);
	overflow: hidden;
	will-change: transform;
}

.buzz-story .story-frame .story-stage-media {
	position: absolute;
	inset: 0;
	background: transparent;
}

/* fallback (no scroll-story): stages flow naturally, frames keep height */
.buzz-story:not(.has-scrollstory) .story-stage { height: auto; min-height: 100svh; }
.buzz-story:not(.has-scrollstory) .story-frame {
	position: relative;
	inset: auto;
	margin: var(--story-frame-inset);
	min-height: calc(100svh - 2 * var(--story-frame-inset));
	display: grid;
	align-items: center;
}

/* ── Frosted glass card (the mockup's floating panel) ────────────────────── */

.buzz-story .story-glass {
	background: rgba(240, 239, 233, 0.09);
	/* lighter blur: Chromium repaints backdrop-filter on every frame the
	   canvas behind it changes — keep the sample radius cheap */
	-webkit-backdrop-filter: blur(13px) saturate(1.25);
	backdrop-filter: blur(13px) saturate(1.25);
	border: 1px solid rgba(244, 243, 238, 0.16);
	border-radius: clamp(18px, 2vw, 28px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	transform: translateZ(0);
}

@supports not (backdrop-filter: blur(1px)) {
	.buzz-story .story-glass { background: rgba(16, 17, 26, 0.82); }
}

/* ── Act 0 + I · Hero → Challenge (one stage, growing aperture) ──────────── */

.buzz-story .story-hero { position: relative; }

/* hero copy floats on the light canvas above the (initially clipped) frame */
.buzz-story .story-hero-copy {
	position: relative;
	z-index: 3;
	padding-top: clamp(4rem, 9vh, 6.5rem);
}

.buzz-story.has-scrollstory .story-hero-copy {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: var(--story-shell);
	will-change: transform, opacity;
}

.buzz-story .story-hero-title {
	font-size: clamp(2.2rem, 5.6vw, 4.6rem);
	max-width: 18ch;
}

.buzz-story .story-hero-lede {
	margin-top: 1.4rem;
	max-width: 46ch;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--story-ink-soft);
}

/* the growing frame: outer crops to the card shape (non-uniform scale),
   inner counter-scales so content stays true size — both transforms live on
   the compositor, no per-frame paint in any engine */
.buzz-story .story-frame--grow {
	will-change: transform;
	transform-origin: 50% 0;
}

.buzz-story .story-frame-grow-inner { position: relative; }

.buzz-story.has-scrollstory .story-frame-grow-inner {
	position: absolute;
	inset: 0;
	transform-origin: 50% 0;
	will-change: transform;
}

/* desktop split: the frame is the left block of a 1:1 pair at full window
   height; the copy is the right block, vertically centered. Scroll expands
   the frame eastward, pushing the copy off (JS drives both transforms). */
@media (min-width: 901px) {
	.buzz-story.has-scrollstory .story-hero-copy {
		top: var(--story-frame-inset);
		bottom: var(--story-frame-inset);
		left: 50%;
		right: var(--story-frame-inset);
		width: auto;
		margin-inline: 0;
		padding: 0 clamp(2rem, 4.5vw, 4.5rem);
		display: grid;
		align-content: center;
		justify-items: start;
	}

	.buzz-story.has-scrollstory .story-hero-title {
		font-size: clamp(2rem, 3.3vw, 3.4rem);
	}
}

/* stroked circle icon-button: carat points east on desktop (the frame
   expands that way), rotates to point down on mobile */
.buzz-story .story-scroll-cue {
	margin: 2rem 0 0;
	width: 52px;
	height: 52px;
	padding: 0;
	display: grid;
	place-items: center;
	background: none;
	border: 1.5px solid var(--story-ink-soft);
	border-radius: 50%;
	color: var(--story-ink-soft);
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.buzz-story .story-scroll-cue:hover,
.buzz-story .story-scroll-cue:focus-visible {
	color: var(--story-ink);
	border-color: var(--story-ink);
	transform: translateX(4px);
}

@media (max-width: 900px) {
	/* clear the floating site header on phones */
	.buzz-story .story-hero-copy { padding-top: clamp(6rem, 13vh, 8rem); }

	.buzz-story .story-scroll-cue svg { transform: rotate(90deg); }

	.buzz-story .story-scroll-cue:hover,
	.buzz-story .story-scroll-cue:focus-visible {
		transform: translateY(4px);
	}
}

/* ── Act I · Challenge (framed scene) ────────────────────────────────────── */

.buzz-story .story-beats { position: relative; z-index: 2; height: 100%; }

.buzz-story .story-beat {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 1.6rem;
	padding: clamp(2rem, 6vw, 6rem);
	color: var(--story-night-ink);
}

/* scrub mode: beats stack in the frame, GSAP crossfades them */
.buzz-story.has-scrollstory .story-beat {
	position: absolute;
	inset: 0;
	will-change: transform, opacity;
}

.buzz-story:not(.has-scrollstory) .story-beat { min-height: 70vh; }

.buzz-story .story-beat-dots {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.buzz-story .story-beat-dots span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(244, 243, 238, 0.28);
	transition: background 0.3s ease, width 0.3s ease;
}

.buzz-story .story-beat-dots span.is-on {
	width: 24px;
	background: var(--story-gold);
}

.buzz-story .story-beat-figure {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	font-size: clamp(3.6rem, 11vw, 9.5rem);
	line-height: 0.94;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--story-night-ink);
}

.buzz-story .story-beat-unit {
	display: block;
	font-size: clamp(1rem, 1.8vw, 1.35rem);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	margin-top: 0.7rem;
	color: rgba(244, 243, 238, 0.6);
}

.buzz-story .story-beat-copy {
	font-size: clamp(1rem, 1.45vw, 1.2rem);
	line-height: 1.65;
	color: rgba(244, 243, 238, 0.78);
	max-width: 44ch;
}

.buzz-story .story-beat-copy strong { color: var(--story-night-ink); }

/* ghost beat: the preserved hero title + lede, materialized char by char */
.buzz-story .story-beat--ghost { gap: 1.4rem; }

.buzz-story .story-ghost-title {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-weight: 560;
	font-size: clamp(2rem, 4.6vw, 4.2rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 20ch;
	margin: 0;
	color: var(--story-night-ink);
}

.buzz-story .story-ghost-body {
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	line-height: 1.6;
	max-width: 50ch;
	margin: 0;
	color: rgba(244, 243, 238, 0.78);
}

.buzz-story .story-gw { display: inline-block; }
.buzz-story .story-gc { display: inline-block; }

.buzz-story .story-beat--turn { justify-items: center; text-align: center; }

.buzz-story .story-turn {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-size: clamp(2.2rem, 5.6vw, 4.8rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--story-night-ink);
}

/* ── Act II · Reveal (framed scene, glass card) ──────────────────────────── */

/* scrim lives on the canvas background: it layers above the photo but below
   the scan graphics the canvas draws */
.buzz-story .story-reveal canvas[data-scene="scan"] {
	background: linear-gradient(100deg, rgba(11, 12, 18, 0.3) 30%, rgba(11, 12, 18, 0.62) 78%);
}

/* Vertical centering uses top/bottom + margin auto, NOT translateY —
   GSAP animates this element's transform and would wipe a CSS translate */
.buzz-story .story-reveal .story-stage-content {
	position: absolute;
	z-index: 2;
	right: clamp(1.2rem, 4vw, 4rem);
	top: 0;
	bottom: 0;
	margin-block: auto;
	height: fit-content;
	max-height: calc(100% - 2rem);
	overflow-y: auto;
	width: min(540px, calc(100% - 2.4rem));
	padding: clamp(1.6rem, 2.6vw, 2.6rem);
	will-change: transform, opacity;
}

.buzz-story:not(.has-scrollstory) .story-reveal .story-stage-content {
	position: relative;
	right: auto;
	top: auto;
	bottom: auto;
	height: auto;
	max-height: none;
	margin: clamp(2rem, 6vw, 6rem) clamp(1.2rem, 4vw, 4rem) clamp(2rem, 6vw, 6rem) auto;
}

.buzz-story .story-flip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1rem;
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-size: clamp(1.05rem, 1.8vw, 1.4rem);
	margin-bottom: 1.8rem;
}

.buzz-story .story-flip-before {
	color: rgba(244, 243, 238, 0.55);
	position: relative;
}

.buzz-story .story-flip-before::after {
	content: "";
	position: absolute;
	left: 0;
	top: 54%;
	height: 2px;
	width: 0;
	background: var(--story-gold);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-story .story-flip.is-flipped .story-flip-before::after { width: 100%; }

.buzz-story .story-flip-arrow { color: rgba(244, 243, 238, 0.4); }

.buzz-story .story-flip-after {
	font-variation-settings: "wght" 900;
	font-weight: 900;
	color: var(--story-gold);
	font-size: 1.35em;
	opacity: 0;
	transform: translateY(0.35em);
	transition: opacity 0.45s ease 0.25s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.buzz-story .story-flip.is-flipped .story-flip-after {
	opacity: 1;
	transform: none;
}

.buzz-story .story-reveal-title {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	color: var(--story-night-ink);
}

.buzz-story .story-reveal-copy {
	margin-top: 1.2rem;
	font-size: clamp(0.95rem, 1.25vw, 1.05rem);
	line-height: 1.65;
	color: rgba(244, 243, 238, 0.78);
}

.buzz-story .story-proof-row {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.buzz-story .story-proof-row li {
	display: grid;
	gap: 0.3rem;
	padding-top: 0.7rem;
	border-top: 2px solid rgba(244, 243, 238, 0.25);
}

.buzz-story .story-proof-row strong {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	color: var(--story-night-ink);
}

.buzz-story .story-proof-row span {
	font-size: 0.78rem;
	line-height: 1.4;
	color: rgba(244, 243, 238, 0.62);
}

/* ── Act III · Anthem (framed scene) ─────────────────────────────────────── */

.buzz-story .story-anthem-content {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: center;
	height: 100%;
	padding: clamp(2rem, 6vw, 6rem);
}

.buzz-story:not(.has-scrollstory) .story-anthem-content { min-height: 70vh; }

.buzz-story .story-anthem-line {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(2rem, 6vw, 5.4rem);
	line-height: 1.08;
	letter-spacing: 0.01em;
	color: rgba(244, 243, 238, 0.85);
}

.buzz-story .story-anthem-line--two { color: var(--story-night-ink); }

.buzz-story .story-w {
	display: inline-block;
	will-change: transform, opacity;
}

/* AMPLIFY fills with gold as the scroll scrubs */
.buzz-story .story-w--amp {
	background-image: linear-gradient(90deg, var(--story-gold) 50%, rgba(244, 243, 238, 0.92) 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.buzz-story:not(.has-scrollstory) .story-w--amp { background-position: 0 0; }

/* ── The people (second movement inside the anthem frame) ────────────────── */

/* NO will-change / transform here: an opacity/transform layer on this
   wrapper becomes a backdrop root, and the panels' backdrop-filter would
   sample it (empty) instead of the canvas behind — killing the blur */
.buzz-story .story-buzz-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	align-content: center;
	padding: clamp(1.4rem, 3.5vw, 3.5rem) clamp(1.4rem, 4.5vw, 5rem);
	color: var(--story-night-ink);
}

.buzz-story:not(.has-scrollstory) .story-buzz-content {
	position: relative;
	inset: auto;
}

.buzz-story .story-buzz-head .story-kicker { margin-bottom: 0.9rem; }

.buzz-story .story-buzz-title {
	font-size: clamp(1.4rem, 2.4vw, 2.2rem);
	max-width: 30ch;
	color: var(--story-night-ink);
}

.buzz-story .story-buzz-lede {
	margin-top: 0.8rem;
	max-width: 60ch;
	font-size: clamp(0.92rem, 1.2vw, 1.02rem);
	line-height: 1.55;
	color: rgba(244, 243, 238, 0.72);
}

.buzz-story .story-buzz-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.8rem);
	margin-top: clamp(1.4rem, 3vh, 2.4rem);
}

/* cloud-gray cards on the navy frame (swapped from glass) */
.buzz-story .story-buzz-panel {
	--bp-y: clamp(1.2rem, 2.2vw, 2rem);
	--bp-x: clamp(1.2rem, 2.2vw, 2rem);
	padding: var(--bp-y) var(--bp-x);
	display: flex;
	flex-direction: column;
	background: var(--story-canvas);
	color: var(--story-ink);
	border-radius: clamp(18px, 2vw, 28px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

.buzz-story .story-buzz-panel .story-kicker { margin-bottom: 0.8rem; }

.buzz-story .story-buzz-panel-lede {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--story-ink-soft);
	margin-bottom: 1.1rem;
}

/* featured press: copy in the left column, wp featured image as a rounded
   square spanning the card's full content height on the right, inset
   within the card padding */
.buzz-story .story-buzz-panel--featured {
	position: relative;
	padding-right: calc(42% + 2 * var(--bp-x));
}

.buzz-story .story-buzz-featured {
	flex: 1;
	display: block;
	border-top: 1px solid rgba(10, 27, 61, 0.14);
	padding-top: 1rem;
	text-decoration: none;
	color: var(--story-ink);
}

.buzz-story .story-buzz-featured-copy {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.buzz-story .story-buzz-featured-title {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-weight: 560;
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 0.25s ease;
}

.buzz-story .story-buzz-featured:hover .story-buzz-featured-title,
.buzz-story .story-buzz-featured:focus-visible .story-buzz-featured-title {
	color: var(--story-violet);
}

.buzz-story .story-buzz-featured-media {
	position: absolute;
	top: var(--bp-y);
	right: var(--bp-x);
	bottom: var(--bp-y);
	width: 42%;
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.buzz-story .story-buzz-featured-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.buzz-story .story-buzz-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.buzz-story .story-buzz-list li { border-top: 1px solid rgba(10, 27, 61, 0.14); }

.buzz-story .story-buzz-list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 0.75rem 0;
	text-decoration: none;
	color: var(--story-ink);
	transition: color 0.25s ease;
}

.buzz-story .story-buzz-list a:hover .story-buzz-item-title,
.buzz-story .story-buzz-list a:focus-visible .story-buzz-item-title {
	color: var(--story-violet);
}

.buzz-story .story-buzz-item-title {
	font-size: 1.02rem;
	line-height: 1.45;
	transition: color 0.25s ease;
}

.buzz-story .story-buzz-item-meta {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(10, 27, 61, 0.55);
	white-space: nowrap;
}

/* short viewports: drop the descriptor lines so both panels stay inside the frame */
@media (max-height: 720px) {
	.buzz-story .story-buzz-lede,
	.buzz-story .story-buzz-panel-lede { display: none; }
}


.buzz-story .story-buzz-more {
	margin-top: 1.1rem;
	align-self: start;
	display: inline-block;
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--story-ink);
	border: 1.5px solid rgba(10, 27, 61, 0.35);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.buzz-story .story-buzz-more:hover,
.buzz-story .story-buzz-more:focus-visible {
	background: var(--story-ink);
	border-color: var(--story-ink);
	color: var(--story-canvas);
}

/* ── Act IV · Assets (tabbed, Flock-style) ───────────────────────────────── */

.buzz-story .story-assets {
	background: var(--story-canvas);
	padding: clamp(5rem, 12vh, 8rem) 0 0;
}

.buzz-story .story-assets-head { padding-bottom: clamp(2rem, 5vh, 3.2rem); }

.buzz-story .story-assets-title {
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	max-width: 22ch;
}

.buzz-story .story-assets-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.buzz-story .story-asset-media-stack { display: grid; }

/* media card: a swappable slot per asset (drop a <video>/<img> in later).
   All four occupy the same grid cell and cross-fade — the outgoing card is
   still visible while the incoming one fades over it, so no background
   "flash" between states. */
.buzz-story .story-asset-media {
	grid-area: 1 / 1;
	position: relative;
	margin: 0;
	aspect-ratio: 10 / 11;
	border-radius: 28px;
	overflow: hidden;
	background:
		radial-gradient(120% 130% at 80% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
		var(--story-night);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.buzz-story .story-asset-media.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease;
}

.buzz-story .story-asset-media > canvas,
.buzz-story .story-asset-media > video,
.buzz-story .story-asset-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.buzz-story .story-asset-media-icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.buzz-story .story-asset-media-icon svg {
	width: clamp(110px, 13vw, 180px);
	height: auto;
	filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--accent) 40%, transparent));
}

/* icon-circle tabs: active = brand color, inactive = charcoal */
.buzz-story .story-asset-tabs {
	display: flex;
	gap: 0.9rem;
	margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}

.buzz-story .story-asset-tab {
	appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	border-radius: 999px;
	transition: transform 0.2s ease;
}

.buzz-story .story-asset-tab svg {
	display: block;
	width: clamp(46px, 4.6vw, 62px);
	height: auto;
}

.buzz-story .story-asset-tab svg circle { transition: fill 0.3s ease; }

.buzz-story .story-asset-tab:not(.is-active) svg circle { fill: #25324f; }

.buzz-story .story-asset-tab:not(.is-active):hover { transform: translateY(-2px); }

.buzz-story .story-asset-tab:not(.is-active):hover svg circle { fill: #3d3d49; }

.buzz-story .story-asset-tab:focus-visible {
	outline: 2px solid var(--story-ink);
	outline-offset: 3px;
}

/* swapped copy: same overlap cross-fade as the media cards */
.buzz-story .story-asset-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
}

.buzz-story .story-asset-copy {
	grid-column: 1;
	grid-row: 2;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.buzz-story .story-asset-copy.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease;
}

.buzz-story .story-asset-copy h3 { font-size: clamp(2rem, 3.6vw, 3rem); }

.buzz-story .story-asset-body {
	margin-top: 1.2rem;
	font-size: clamp(0.98rem, 1.3vw, 1.1rem);
	line-height: 1.65;
	color: var(--story-ink-soft);
}

.buzz-story .story-asset-stats {
	list-style: none;
	margin: clamp(1.8rem, 4vh, 2.6rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem 2rem;
}

.buzz-story .story-asset-stats strong {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--story-ink);
}

.buzz-story .story-asset-stats span {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.95rem;
	color: var(--story-ink-soft);
}

.buzz-story .story-asset-link {
	display: inline-block;
	margin-top: clamp(1.8rem, 4vh, 2.4rem);
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	color: var(--story-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 0.3rem;
	transition: color 0.25s ease;
}

.buzz-story .story-asset-link:hover { color: color-mix(in srgb, var(--accent) 70%, var(--story-ink)); }

.buzz-story .story-handoff {
	width: var(--story-shell);
	margin: 0 auto;
	padding: clamp(3.5rem, 9vh, 6rem) 0;
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 560;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	letter-spacing: -0.01em;
	text-align: center;
}

/* ── Act V · Map + case panel (framed window) ────────────────────────────── */

.buzz-story .story-map-section {
	background: var(--story-canvas);
	padding: var(--story-frame-inset);
}

.buzz-story .story-map-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	min-height: calc(100vh - 2 * var(--story-frame-inset));
	min-height: calc(100svh - 2 * var(--story-frame-inset));
	background: #ffffff;
	color: var(--story-ink);
	border-radius: var(--story-frame-radius);
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(10, 27, 61, 0.08);
	will-change: transform;
}

.buzz-story .story-case-panel {
	padding: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3vw, 3rem);
	display: flex;
	flex-direction: column;
	border-right: 1px solid rgba(10, 27, 61, 0.1);
	overflow-y: auto;
}

.buzz-story .story-case-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.2rem;
}

.buzz-story .story-case-tabs button {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1.5px solid rgba(10, 27, 61, 0.25);
	border-radius: 999px;
	color: var(--story-ink-soft);
	font-family: "Roboto", sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.42rem 0.95rem;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.buzz-story .story-case-tabs button:hover { border-color: rgba(10, 27, 61, 0.55); color: var(--story-ink); }

.buzz-story .story-case-tabs button.is-active {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 13%, #ffffff);
	color: var(--story-ink);
}

.buzz-story .story-case {
	display: none;
	animation: story-case-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-story .story-case.is-active { display: block; }

@keyframes story-case-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.buzz-story .story-case-tag {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	color: var(--accent);
	margin-bottom: 0.9rem;
}

.buzz-story .story-case h3 {
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	color: var(--story-ink);
}

.buzz-story .story-case-body {
	margin-top: 1.1rem;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--story-ink-soft);
}

.buzz-story .story-case-stats {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
	display: grid;
	/* each track must hold a 2rem "88,000+" — when the panel is too narrow
	   for three, the stats reflow to two-up instead of colliding */
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
}

.buzz-story .story-case-stats li {
	border-top: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
	padding-top: 0.6rem;
	display: grid;
	gap: 0.25rem;
}

.buzz-story .story-case-stats strong {
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	font-size: 2rem;
}

.buzz-story .story-case-stats span {
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--story-ink-soft);
}

.buzz-story .story-case blockquote {
	margin: 2rem 0 0;
	padding-left: 1.1rem;
	border-left: 2px solid var(--accent);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--story-ink);
	font-style: italic;
}

.buzz-story .story-case blockquote cite {
	display: block;
	margin-top: 0.7rem;
	font-style: normal;
	font-size: 0.82rem;
	color: var(--story-ink-soft);
}

.buzz-story .story-case-note {
	margin-top: 2rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--accent);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--story-ink-soft);
}

.buzz-story .story-map-frame { position: relative; }

.buzz-story #story-map {
	position: absolute;
	inset: 0;
	background: #e9e8e2;
}

.buzz-story .leaflet-container {
	background: #e9e8e2;
	font-family: "Roboto", sans-serif;
}

.buzz-story .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.75);
	color: rgba(10, 27, 61, 0.55);
}

.buzz-story .leaflet-control-attribution a { color: rgba(10, 27, 61, 0.75); }

.buzz-story .story-pin {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	box-shadow: 0 0 18px color-mix(in srgb, var(--pin, #fff) 70%, transparent), 0 2px 10px rgba(10, 27, 61, 0.25);
}

.buzz-story .story-pin svg {
	display: block;
	width: 100%;
	height: 100%;
}

.buzz-story .story-pin.is-active {
	box-shadow: 0 0 0 3px #ffffff, 0 0 22px color-mix(in srgb, var(--pin, #fff) 85%, transparent), 0 4px 14px rgba(10, 27, 61, 0.3);
}

/* staggered pin drop when the map window enters */
.buzz-story .story-pin {
	opacity: 0;
	transform: translateY(-14px) scale(0.6);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-story.story-map-on .story-pin {
	opacity: 1;
	transform: none;
}

/* ── Act VI · Close (kept) ───────────────────────────────────────────────── */

.buzz-story .story-close {
	padding: clamp(6rem, 16vh, 10rem) 0 clamp(6rem, 14vh, 9rem);
	text-align: center;
}

.buzz-story .story-close .story-kicker { margin-bottom: 1.4rem; }

.buzz-story .story-close-title {
	font-size: clamp(2.3rem, 5.4vw, 4.4rem);
	max-width: 18ch;
	margin-inline: auto;
}

.buzz-story .story-close-copy {
	margin: 1.6rem auto 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.65;
	color: var(--story-ink-soft);
}

.buzz-story .story-close-cta {
	margin-top: 2.8rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.buzz-story .story-btn {
	display: inline-block;
	border-radius: 999px;
	padding: 0.85rem 1.9rem;
	font-family: "Buzz Sans", sans-serif;
	font-variation-settings: "wght" 900;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.buzz-story .story-btn:hover { transform: translateY(-2px); }

.buzz-story .story-btn--solid {
	background: var(--story-ink);
	color: var(--story-canvas);
}

.buzz-story .story-btn--solid:hover { background: #061229; color: #fff; }

.buzz-story .story-btn--ghost {
	border: 1.5px solid rgba(10, 27, 61, 0.35);
	color: var(--story-ink);
}

.buzz-story .story-btn--ghost:hover { border-color: var(--story-ink); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.buzz-story .story-assets-grid { grid-template-columns: 1fr; gap: 1.6rem; }
	/* the panels phase shares a viewport-height frame: compact the stack so
	   both panels stay inside it on phones */
	.buzz-story .story-buzz-panels { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 1rem; }
	.buzz-story .story-buzz-content { padding: 1rem 1.2rem; }
	.buzz-story .story-buzz-title { font-size: 1.15rem; }
	.buzz-story .story-buzz-lede,
	.buzz-story .story-buzz-panel-lede { display: none; }
	.buzz-story .story-buzz-head .story-kicker { margin-bottom: 0.5rem; }
	.buzz-story .story-buzz-panel { --bp-y: 0.9rem; --bp-x: 1rem; padding: var(--bp-y) var(--bp-x); }
	.buzz-story .story-buzz-panel--featured { padding-right: calc(42% + 2 * var(--bp-x)); }
	.buzz-story .story-buzz-panel .story-kicker { font-size: 0.85rem; margin-bottom: 0.5rem; }
	.buzz-story .story-buzz-item-title { font-size: 0.95rem; }
	.buzz-story .story-buzz-list a { padding: 0.5rem 0; gap: 0.8rem; }
	.buzz-story .story-buzz-more { margin-top: 0.7rem; font-size: 0.7rem; padding: 0.45rem 1rem; }
	.buzz-story .story-asset-media { aspect-ratio: 4 / 3; border-radius: 20px; }
	.buzz-story .story-map-grid { grid-template-columns: 1fr; min-height: 0; }
	.buzz-story .story-map-frame { order: 1; min-height: 62vh; }
	.buzz-story .story-case-panel {
		order: 2;
		border-right: none;
		border-top: 1px solid rgba(10, 27, 61, 0.1);
	}
	.buzz-story .story-reveal .story-stage-content {
		right: 0;
		left: 0;
		margin-inline: auto;
		width: calc(100% - 1.6rem);
	}
	.buzz-story:not(.has-scrollstory) .story-reveal .story-stage-content {
		right: auto;
		left: auto;
		margin-inline: auto;
	}
}

/* very short phones: two list items per panel is the honest fit */
@media (max-width: 900px) and (max-height: 700px) {
	.buzz-story .story-buzz-list li:nth-child(3) { display: none; }
	.buzz-story .story-buzz-content { padding: 0.6rem 1.2rem; }
	.buzz-story .story-buzz-panel { --bp-y: 0.75rem; --bp-x: 1rem; padding: var(--bp-y) var(--bp-x); }
	.buzz-story .story-buzz-panel--featured { padding-right: calc(42% + 2 * var(--bp-x)); }
}

@media (max-width: 600px) {
	.buzz-story .story-proof-row { grid-template-columns: 1fr; }
	/* phones: the panel kickers carry the section; dropping the head keeps
	   the panels centered clear of the floating site header */
	.buzz-story .story-buzz-head { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.buzz-story .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.buzz-story .story-scroll-cue { animation: none; }
	.buzz-story .story-pin { opacity: 1; transform: none; transition: none; }
	.buzz-story .story-flip-before::after { transition: none; }
	.buzz-story .story-flip-after { opacity: 1; transform: none; transition: none; }
	.buzz-story .story-case { animation: none; }
	.buzz-story .story-asset-media,
	.buzz-story .story-asset-copy { transition: none; }
	.buzz-story .story-w--amp { background-position: 0 0; }
}