@font-face {
				font-family: "Helvetica Neue";
				src:
					url("fonts/helvetica-neue-Bd.woff2") format("woff2"),
					url("fonts/helvetica-neue-Bd.woff") format("woff"),
					url("fonts/helvetica-neue-Bd.otf") format("opentype");
				font-style: normal;
				font-weight: 700;
				font-display: swap;
			}

			@font-face {
				font-family: "Helvetica Neue";
				src:
					url("fonts/helvetica-neue-Blk.woff2") format("woff2"),
					url("fonts/helvetica-neue-Blk.woff") format("woff"),
					url("fonts/helvetica-neue-Blk.otf") format("opentype");
				font-style: normal;
				font-weight: 900;
				font-display: swap;
			}

			@font-face {
				font-family: "Helvetica Neue";
				src:
					url("fonts/helvetica-neue-Roman.woff2") format("woff2"),
					url("fonts/helvetica-neue-Roman.woff") format("woff"),
					url("fonts/helvetica-neue-Roman.otf") format("opentype");
				font-style: normal;
				font-weight: 400;
				font-display: swap;
			}

			@font-face {
				font-family: "Helvetica Neue";
				src:
					url("fonts/helvetica-neue-Lt.woff2") format("woff2"),
					url("fonts/helvetica-neue-Lt.woff") format("woff"),
					url("fonts/helvetica-neue-Lt.otf") format("opentype");
				font-style: normal;
				font-weight: 300;
				font-display: swap;
			}

			@font-face {
				font-family: "Helvetica Extended";
				src:
					url("fonts/helvetica-extended-bold.woff2") format("woff2"),
					url("fonts/helvetica-extended-bold.eot") format("embedded-opentype"),
					url("fonts/helvetica-extended-bold.svg#HelveticaExtendedBold") format("svg");
				font-style: normal;
				font-weight: 700;
				font-display: swap;
			}

			:root {
				color-scheme: light;
				--color-white: #FFFFFF;
				--color-hero-highlight: #F2FB37;
				--max-copy-width: 615px;
				--color-final-service: #F27A83;
				--color-sector: #E22950;
				--color-equipment: #F55D2B;
				--color-device: #FE9C07;
				--color-final-energy: #2FD7A4;
				--color-fuel: #A8DFE6;
				--color-emissions: #1475ff;
				--color-dark: #000;
				--color-nav-hero: #E87178;
				--color-nav-emissions: #F59324;
				--color-nav-portfolio: #ECFC44;
				--color-nav-climate: #3DCF9A;
				--color-nav-ack: #3364F9;
			}

			* {
				box-sizing: border-box;
			}

			html,
			body {
				margin: 0;
				min-height: 100%;
			}

			html {
				scroll-behavior: smooth;
			}

			@media (prefers-reduced-motion: reduce) {
				html {
					scroll-behavior: auto;
				}
			}

			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				line-height: 1.4;
				letter-spacing: -0.02em;
				background: var(--color-dark);
				overflow-x: hidden;
				position: relative;
				--site-bg-shift: 0px;
				text-wrap: pretty;
			}

			#site-bg {
				position: fixed;
				inset: -12vh 0 0;
				overflow: hidden;
				pointer-events: none;
				z-index: -1;
			}

			#night-sky-bg-frame {
				border: 0;
				height: 124vh;
				left: 0;
				position: absolute;
				top: 0;
				transform: translate3d(0, var(--site-bg-shift), 0) scale(1.05);
				transform-origin: center top;
				width: 100vw;
				will-change: transform;
			}

			#hero-intro {
				background:
					linear-gradient(180deg, var(--color-dark) 0%, rgb(0 0 0 / 0) 70%);
				color: var(--color-white);
				font-size: 20px;
				position: relative;
			}

			.hero-stage {
				height: 100vh;
				overflow: hidden;
				position: relative;
			}

			/* Framing per the V3 mock-up: the disc is wider than the frame is tall,
			   so it reads as a horizon -- top arc just inside the top edge, cropped
			   off the bottom. Anchored by its TOP edge, not its center: the disc's
			   height relative to the viewport changes with the aspect ratio, so a
			   percentage center would slide that arc up and down between screens.

			   earth-softfade.webp is a 1750px square whose painted disc fills only
			   73.7% of that width and starts 12.57% down (the rest is the soft fade
			   to transparent), so the box has to be sized well past 100vw for the
			   disc itself to fill the frame: 130vw box -> ~96vw of visible earth.
			   Re-measure those two fractions if the asset is ever re-exported.

			   height:auto is required -- the img's height attribute (there to give
			   the box an aspect ratio before the webp decodes) is otherwise applied
			   as a presentational hint and squashes the globe to 1750px tall. */
			.hero-globe {
				height: auto;
				left: 50%;
				max-width: none;
				opacity: 0;
				position: absolute;
				/* --globe-arc-top is where the disc's own top arc lands (negative =
				   cropped above the frame). The subtraction cancels the asset's
				   transparent header so that stays true at any aspect ratio:
				   0.1257 x 130vw = 16.34vw. Tune the arc, not the raw top. */
				--globe-arc-top: 10vh;
				top: calc(var(--globe-arc-top) - 16.34vw);
				transform: translateX(-50%);
				transform-origin: 50% 50%;
				width: 98vw;
				will-change: transform, opacity;
				z-index: 1;
			}

			.hero-logo {
				left: 50%;
				opacity: 0;
				position: absolute;
				top: 24vh;
				transform: translateX(-50%);
				width: 200px;
				will-change: transform, opacity;
				z-index: 4;
			}

			.hero-logo svg {
				height: auto;
				display: block;
				width: 100%;
			}

			.hero-copy {
				display: grid;
				gap: clamp(0.8rem, 2.2vh, 1.6rem);
				left: 50%;
				max-width: min(1240px, 95vw);
				place-items: center;
				position: absolute;
				top: 52%;
				transform: translate(-50%, -50%);
				width: 100%;
				z-index: 5;
			}

			.hero-headline {
				color: var(--color-white);
				font-family: "Helvetica Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;
				/* "Climate Impact" -- the widest of the three hard-broken lines --
				   measures 11.33x the font size in Helvetica Extended, so anything
				   above ~7.8vw wraps it to a fourth line. This keeps the mock-up's
				   three lines at ~88% of the frame width all the way up to 2250px. */
				font-size: clamp(2.2rem, 7.8vw, 11rem);
				font-weight: 700;
				left: 0;
				letter-spacing: -0.02em;
				line-height: 0.88;
				margin: 0;
				opacity: 0;
				position: absolute;
				right: 0;
				text-align: center;
				text-transform: uppercase;
				text-wrap: balance;
				top: 35vh;
				will-change: transform, opacity;
				z-index: 5;

				span {
					letter-spacing: -10%;
				}
			}

			.hero-subtitle {
				color: inherit;
				font-size: clamp(1.05rem, 2.3vw, 1.6rem);
				font-weight: 500;
				line-height: 1.25;
				margin: 0;
				max-width: var(--max-copy-width);
				opacity: 0;
				text-align: center;
				text-wrap: balance;
				transform: translateY(28px);
				will-change: transform, opacity;
			}

			.hero-copy-2,
			.hero-copy-3 {
				display: grid;
				grid-area: 1 / 1;
				opacity: 0;
				place-items: center;
				pointer-events: none;
				text-transform: none;
			}

			.hero-copy-2 > p,
			.hero-copy-3 > p {
				color: #fff;
				letter-spacing: inherit;
				margin: 0;
				max-width: var(--max-copy-width);
				text-align: left;
				width: min(100%, var(--max-copy-width));
			}

			.hero-copy-2 > p {
				font-size: 35px;
				font-weight: 400;
				line-height: 1.2;
			}

			.hero-copy-3 {
				gap: 1.25rem;
			}

			.hero-copy-3 > p {
				font-size: clamp(1rem, 1.55vw, 1.2rem);
				font-weight: 400;
				line-height: 1.55;
			}

			/* Third crossfading panel in .hero-copy-intro__stack, sequenced between
			   .hero-copy-2 and .hero-copy-3 -- see HCI_NAV_* in main.js. */
			.hero-copy-nav {
				display: grid;
				gap: clamp(1.5rem, 3vh, 2.5rem);
				grid-area: 1 / 1;
				justify-items: center;
				text-transform: none;
			}

			.hero-copy-nav__intro {
				color: #fff;
				font-size: 35px;
				font-weight: 400;
				line-height: 1.2;
				margin: 0;
				max-width: var(--max-copy-width);
				opacity: 0;
				text-align: left;
				width: min(100%, var(--max-copy-width));
			}

			.hero-copy-nav__grid {
				display: grid;
				gap: 10px;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				max-width: 800px;
				width: 100%;
			}

			.hero-copy-nav__card {
				opacity: 0;
			}

			.hero-copy-nav__card > a {
				color: var(--color-dark);
				display: block;
				font-weight: 700;
				padding: 12px 16px 6px;
				text-decoration: none;
				font-size: 16px;
			}

			.hero-copy-nav__card[data-nav-group="global-emissions"] > a {
				background: var(--color-final-service);
			}

			.hero-copy-nav__card[data-nav-group="portfolio"] > a {
				background: var(--color-device);
			}

			.hero-copy-nav__card[data-nav-group="technology-impacts"] > a {
				background: var(--color-final-energy);
			}

			.hero-copy-nav__card > p {
				color: #fff;
				font-size: 14px;
				line-height: 1.4;
				margin: 0;
				padding: 10px;
			}

			.hero-copy-nav__note {
				color: #fff;
				font-size: 13px;
				font-style: italic;
				line-height: 1.4;
				margin: 0;
				max-width: var(--max-copy-width);
				opacity: 0;
				text-align: left;
				width: min(100%, var(--max-copy-width));
			}

			.hero-copy-nav__note a {
				color: inherit;
			}

			/* --- Hero copy intro (three crossfading panels, locked in place once
			   .hero-stage has scrolled off) --- */
			/* 524vh = 444vh scrubbed fade sequence + 80vh pinned viewport. Same
			   in/hold/out beat lengths as the timeline/impacts/portfolio intros
			   (48/40/40/48/60/80) repeated for the extra chapter-nav panel, minus
			   the usual 96vh bg-fade-in lead-in, since this block has no __bg
			   layer. See HCI_* constants in main.js. */
			.hero-copy-intro {
				min-height: 524vh;
			}

			.hero-copy-intro__pin {
				display: grid;
				height: 100vh;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				padding: clamp(4rem, 8vh, 7rem) 6vw;
				position: sticky;
				top: 0;
			}

			.hero-copy-intro__stack {
				display: grid;
				position: relative;
			}

			#intro-anchor {
				height: 0;
				overflow: hidden;
			}

			#emissions-landscape {
				background: radial-gradient(120% 90% at 55% 52%, rgba(255, 172, 34, 0.14), transparent 54%), var(--color-dark);
				color: #fff;
				overflow: clip;
				padding: 0;
			}

			.landscape-layout {
				min-height: 320vh;
				position: relative;
			}

			.landscape-copy {
				display: grid;
				gap: 8vh;
				margin-top: -100vh;
				padding: 14vh 6vw 22vh;
				place-items: center;
				position: relative;
				z-index: 2;
			}

			.landscape-snippet {
				color: #e5ee35;
				display: flex;
				font-size: clamp(1.9rem, 5vw, 3rem);
				font-weight: 850;
				letter-spacing: -0.02em;
				line-height: 0.96;
				margin: 0;
				max-width: 1200px;
				min-height: 88vh;
				opacity: 0.92;
				text-align: center;
				text-shadow: 0 0 16px rgba(211, 220, 47, 0.2), 0 0 48px rgba(211, 220, 47, 0.09);
				text-wrap: balance;
				z-index: 2;
			}

			.landscape-snippet + .landscape-snippet {
				margin-top: 4vh;
			}

			[data-animation="word-reveal"] {
				contain: paint;
			}

			.reveal-word {
				display: inline-block;
				opacity: 0.12;
				transform: translate3d(0, 0.55em, 0) scale(0.95);
				filter: blur(7px);
				will-change: opacity, transform, filter;
			}

			.landscape-visual {
				display: grid;
				isolation: isolate;
				place-items: center;
				position: sticky;
				top: 0;
				height: 100vh;
				z-index: 1;
			}

			.bars-canvas {
				height: min(74vh, 620px);
				filter: brightness(0.9) saturate(1.15);
				position: relative;
				width: min(96vw, 1240px);
			}

			.vector-bar {
				background: var(--color-final-service);
				height: clamp(240px, 58vh, 520px);
				left: 50%;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
				width: clamp(22px, 2.1vw, 34px);
			}

			.vector-bar[data-bar="0"] {
				background: var(--color-final-service);
			}

			.vector-bar[data-bar="1"] {
				background: var(--color-sector);
			}

			.vector-bar[data-bar="2"] {
				background: var(--color-equipment);
			}

			.vector-bar[data-bar="3"] {
				background: var(--color-device);
			}

			.vector-bar[data-bar="4"] {
				background: var(--color-final-energy);
			}

			.vector-bar[data-bar="5"] {
				background: var(--color-fuel);
			}

			.vector-bar[data-bar="6"] {
				background: var(--color-emissions);
			}

			#sankey-narrative {
				--sankey-snippet-count: 11;
				color: #e8f4ff;
				min-height: var(--sankey-scroll-distance, calc(var(--sankey-snippet-count) * 100vh));
				padding: 0 0 10vh;
			}

			.sankey-layout {
				display: grid;
				gap: 5%;
				grid-template-columns: minmax(260px, 30%) minmax(0, 65%);
				height: 100vh;
				justify-content: center;
				padding: 0 4vw;
				position: sticky;
				top: 0;
			}

			.sankey-copy {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				height: 100%;
				padding: 0;
				place-items: center;
				position: relative;
				width: 100%;
			}

			.sankey-snippet {
				color: #fff;
				display: block;
				font-size: 24px;
				font-weight: 400;
				grid-area: 1 / 1;
				line-height: 1.3;
				margin: 0;
				max-width: 100%;
				min-height: auto;
				text-wrap: balance;
			}

			.sankey-snippet strong {
				font-weight: 700;
			}

			/* beat-11 ("select any node") must never appear before the chart has
			   actually gone interactive -- gated on the class main.js toggles in
			   setSankeyInteraction, not just on scroll percentage. */
			#sankey-narrative:not(.chart-interactive) #beat-11 {
				opacity: 0 !important;
				visibility: hidden !important;
			}

			/* --- Timeline intro (bg fade + crossfading headline, locked in place) -- */
			/* 468vh = 388vh scrubbed fade sequence + 80vh pinned viewport. */
			#timeline-intro {
				min-height: 468vh;
			}

			.timeline-intro__pin {
				display: grid;
				height: 100vh;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				padding: clamp(4rem, 8vh, 7rem) 6vw;
				position: sticky;
				top: 0;
			}

			.timeline-intro__bg {
				position: absolute;
				inset: 0;
				background: var(--color-final-service);
				/* Entry/exit fade lives on .timeline-intro__pin's own opacity now
				   (see drawTimelineIntro in main.js) -- this stays fully opaque
				   whenever its ancestor pin is visible at all. */
				opacity: 1;
				z-index: 0;
			}

			.timeline-intro__stack {
				display: grid;
				position: relative;
				z-index: 1;
				align-items: center;
			}

			.timeline-intro__line {
				color: var(--color-dark);
				grid-area: 1 / 1;
				margin: 0;
				opacity: 0;
				text-wrap: balance;
			}

			.timeline-intro__line--1 {
				font-size: clamp(2rem, 3.4vw, 3.4rem);
				font-weight: 700;
				letter-spacing: -0.02em;
				line-height: 1.05;
				max-width: var(--max-copy-width);
			}

			/* Shared secondary intro line, used by the timeline, portfolio and
			   impacts scrubbed intros. */
			.timeline-intro__line--2,
			.portfolio-intro__line--2,
			.impacts-intro__line--2 {
				font-size: clamp(1.7rem, 2.5vw, 2.5rem);
				font-weight: 400;
				line-height: 1.15;
				max-width: var(--max-copy-width);
				text-wrap: pretty;
			}

			/* --- Timeline section (2025 -> 2040 scroll morph) ------------------ */
			#timeline {
				color: #e8f4ff;
				/* 384vh drives the morph; +60vh is a locked static hold after
				   .timeline-closing appears; final +32vh scrubs #timeline's own
				   fade-out, before the section unpins into the portfolio section. */
				min-height: 476vh;
				padding: 0;
			}

			.timeline-layout {
				display: grid;
				gap: 5%;
				grid-template-columns: minmax(260px, 30%) minmax(0, 65%);
				height: 100vh;
				justify-content: center;
				opacity: 0;
				padding: 0 4vw;
				position: sticky;
				top: 0;
			}

			.timeline-copy {
				display: grid;
				grid-template-columns: minmax(0, 1fr);
				height: 100%;
				place-items: center start;
				position: relative;
				width: 100%;
			}

			.timeline-panel {
				align-self: center;
				display: grid;
				grid-template-columns: auto;
				grid-template-rows: 1fr 3fr 2fr 3fr 1fr ;
				max-width: 100%;
				width: 100%;
			}

			.timeline-yearstrip {
				grid-column: 1 / 2;
				grid-row: 2 / 5;
				--tl-year-h: 70px;
				height: calc(var(--tl-year-h) * 5);
				-webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
				mask-image: linear-gradient(180deg, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
				overflow: hidden;
				position: relative;
				width: 100%;
			}

			.timeline-yearbox {
				border: 1.5px solid #fff;
				border-radius: 0;
				height: 40px;
				left: calc(50% - 40px);
				pointer-events: none;
				position: absolute;
				top: calc(50% - 23px);
				width: 80px;
				z-index: 2;
			}

			.timeline-years {
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				will-change: transform;
			}

			.timeline-year {
				align-items: center;
				/* color: rgba(229, 241, 255, 0.28); */
				display: flex;
				font-size: 1.125rem;
				font-weight: 700;
				height: var(--tl-year-h, 3.4rem);
				justify-content: center;
				letter-spacing: -0.01em;
				position: relative;
				transition: color 0.2s ease, opacity 0.2s ease;
			}

			.timeline-year::after {
				position: absolute;
				content: "";
				width: 1px;
				height: 32px;
				background-color: #fff;
				bottom: -13px;
				left: calc(50% - 1px);
			}
			.timeline-year:last-child:after {
				display: none;
			}

			.timeline-year.is-current {
				color: #fff;
			}

			.timeline-opening {
				color: #fff;
				font-size: 15px;
				font-weight: 400;
				grid-column: 1 / 2;
				grid-row: 1 / 2;
				line-height: 1.5;
				margin: 0;
				opacity: 0;
			}

			.timeline-closing {
				color: #fff;
				font-size: 15px;
				font-weight: 400;
				grid-column: 1 / 2;
				grid-row: 4 / 6;
				line-height: 1.5;
				margin: 0;
				opacity: 0;
			}

			.timeline-closing strong {
				font-weight: 700;
			}

			.timeline-visual {
				display: grid;
				height: 100vh;
				place-items: center;
				position: sticky;
				top: 0;
			}

			#timeline-sankey-chart {
				display: block;
				height: 74vh;
				min-height: 640px;
				width: 100%;
			}

			#timeline-sankey-chart .sankey-links .sankey-link {
				opacity: 0.35;
			}

			/* Left GT reference axis: a static "54 Gt" tick at the start-state top,
			   plus a growing line + live counting label tracking the chart's rising
			   top edge up to "57 Gt". Modeled on .scenario-axis__* below. */
			#timeline-sankey-chart .timeline-axis__line {
				stroke: var(--color-emissions);
				stroke-width: 1;
			}

			#timeline-sankey-chart .timeline-axis__tick-dash {
				stroke: var(--color-emissions);
				stroke-width: 1;
			}

			#timeline-sankey-chart .timeline-axis__tick-label {
				fill: var(--color-emissions);
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 11px;
				font-weight: 500;
				letter-spacing: 0.02em;
			}

			#timeline-sankey-chart .timeline-axis__marker-label {
				fill: var(--color-emissions);
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 0.02em;
			}

			.sankey-node-panel {
				align-self: center;
				display: flex;
				flex-direction: column;
				gap: 1.1rem;
				grid-area: 1 / 1;
				max-width: 100%;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.35s ease;
				visibility: hidden;
				width: 100%;
			}

			.sankey-node-panel.is-visible {
				opacity: 1;
				visibility: visible;
			}

			.node-panel__title {
				font-size: clamp(1.6rem, 2.3vw, 2.3rem);
				font-weight: 300;
				line-height: 1.15;
				margin: 0;
			}

			.node-panel__name {
				font-weight: 700;
			}

			.node-panel__desc {
				color: #fff;
				font-size: clamp(1rem, 1.25vw, 1.2rem);
				font-weight: 400;
				line-height: 1.45;
				margin: 0;
			}

			.node-panel__callout {
				align-items: center;
				column-gap: 0.9rem;
				display: flex;
				flex-wrap: wrap;
				row-gap: 0.35rem;
			}

			.node-panel__throughput {
				color: var(--color-emissions);
				font-size: 18px;
				font-weight: 600;
				letter-spacing: -0.02em;
				line-height: 1;
				border: 1px solid var(--color-emissions);
				padding: 0.75rem 1rem 0.5rem;
				width: fit-content;
				margin-bottom: 0.25rem;
			}

			.node-panel__share {
				color: var(--color-emissions);
				font-size: clamp(0.85rem, 1vw, 1rem);
				font-weight: 400;
			}

			.sankey-copy.node-selected .sankey-snippet {
				opacity: 0 !important;
				pointer-events: none;
			}

			#full-sankey {
				display: grid;
				height: 100vh;
				place-items: center;
				position: sticky;
				top: 0;
			}

			.sankey-shell {
				overflow: hidden;
				width: 100%;
			}

			.sankey-meta {
				display:none;
				align-items: center;
				backdrop-filter: blur(8px);
				background: rgba(2, 14, 29, 0.92);
				border-bottom: 1px solid rgba(115, 170, 220, 0.22);
				gap: 0.9rem;
				justify-content: space-between;
				padding: 0.85rem 1rem;
			}

			.sankey-title {
				font-size: 0.95rem;
				font-weight: 650;
				letter-spacing: -0.02em;
				margin: 0;
			}

			#sankey-status {
				color: rgba(229, 241, 255, 0.85);
				font-size: 0.8rem;
				letter-spacing: -0.02em;
				text-transform: uppercase;
			}

			#sankey-chart {
				display: block;
				height: 74vh;
				min-height: 640px;
				width: 100%;
			}

			.sankey-snippet--headline {
				display: block;
				font-size: clamp(1.8rem, 2.7vw, 2.7rem);
				font-weight: 700;
				line-height: 1.12;
			}

			.sankey-snippet--headline .headline-accent {
				color: var(--color-hero-highlight);
			}

			.sankey-snippet--headline .headline-plain {
				color: #fff;
			}

			.sankey-snippet .kw {
				font-weight: 700;
			}

			.sankey-snippet .kw-final-service {
				color: var(--color-final-service);
			}

			.sankey-snippet .kw-sector {
				color: var(--color-sector);
			}

			.sankey-snippet .kw-equipment {
				color: var(--color-equipment);
			}

			.sankey-snippet .kw-device {
				color: var(--color-device);
			}

			.sankey-snippet .kw-final-energy {
				color: var(--color-final-energy);
			}

			.sankey-snippet .kw-fuel {
				color: var(--color-fuel);
			}

			.sankey-snippet .kw-emissions {
				color: var(--color-emissions);
			}

			.stage-header {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 1rem;
				font-style: italic;
				font-weight: 400;
				letter-spacing: 0.01em;
				pointer-events: none;
			}

			.sankey-stage-headers .stage-header {
				font-style: normal;
			}

			.section-anchor {
				height: 0;
				overflow: hidden;
			}

			/* Full-viewport frame used to punctuate interactive moments (first:
			   the sankey chart going click-to-explore). Reused for later
			   interactivity beats -- toggle .is-active from JS, don't retheme it
			   per-section. */
			.viewport-frame {
				position: fixed;
				inset: -25px;
				border: 3px solid #fff;
				pointer-events: none;
				z-index: 9999;
				box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.80), inset 0 0 12px rgba(255, 255, 255, 0.35), inset 0 0 30px rgba(255, 255, 255, 0.12);
				transition: all 0.3s ease;
			}

			.viewport-frame.is-active {
				inset: 0;
			}

			.sankey-scan-line,
			.impacts-scan-line {
				position: absolute;
				top: 0;
				left: 0;
				width: 2px;
				height: 0;
				background: #fff;
				box-shadow: 0 0 4px rgba(255, 255, 255, 0.80), 0 0 12px rgba(255, 255, 255, 0.35), 0 0 30px rgba(255, 255, 255, 0.12);
				opacity: 0;
				pointer-events: none;
				z-index: 10000;
			}

			/* Dev scrub mode (?p=…): hide the hero so #sankey-narrative sits at the
			   top of the document for precise visual QA. */
			.dev-scrub #hero-intro {
				display: none;
			}

			#tif-tgif-portfolio {
				padding: 0;
			}

			/* 468vh = 388vh scrubbed fade sequence + 80vh pinned viewport. */
			.portfolio-intro {
				min-height: 468vh;
			}

			.portfolio-intro__pin {
				display: grid;
				height: 100vh;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				padding: clamp(4rem, 8vh, 7rem) 6vw;
				position: sticky;
				top: 0;
			}

			.portfolio-intro__bg {
				position: absolute;
				inset: 0;
				background: var(--color-device);
				/* Entry/exit fade lives on .portfolio-intro__pin's own opacity now
				   (see drawPortfolioIntro in main.js). */
				opacity: 1;
				z-index: 0;
			}

			.portfolio-intro__stack {
				display: grid;
				position: relative;
				z-index: 1;
				align-items: center;
			}

			.portfolio-intro__line {
				color: var(--color-dark);
				grid-area: 1 / 1;
				margin: 0;
				opacity: 0;
			}

			.portfolio-intro__line--1 {
				font-size: clamp(2rem, 3.4vw, 3.4rem);
				font-weight: 700;
				line-height: 1.05;
				letter-spacing: -0.02em;
				max-width: 22ch;
			}

			.portfolio-layout {
				--portfolio-hold: 208vh; /* length of the pinned company "hold" scroll (desktop) */
				display: grid;
				gap: 4vw;
				grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
				align-items: start;
				padding: 12vh 5vw 16vh;
			}

			.portfolio-layout__copy {
				display: grid;
				padding: 8vh 0 12vh;
			}

			.portfolio-layout__lead {
				color: #fff;
				font-size: clamp(1.15rem, 1.8vw, 1.6rem);
				font-weight: 600;
				line-height: 1.25;
				margin: 0;
				max-width: 25ch;
				text-wrap: balance;
			}

			/* Leads pinned in one centered cell, crossfading on scroll — no x/y movement. */
			.portfolio-layout__lead-stage {
				position: relative;
			}

			.portfolio-layout__lead-stage.is-pinned {
				height: 176vh;
			}

			.portfolio-layout__lead-stage.is-pinned .portfolio-layout__lead-pin {
				display: grid;
				height: 100vh;
				place-items: center;
				position: sticky;
				top: 0;
			}

			.portfolio-layout__lead-stage.is-pinned .portfolio-layout__lead {
				grid-area: 1 / 1;
			}

			.portfolio-businesses {
				margin-top: 8vh;
			}

			/* Long "hold": pin the company list in view for an extended scroll so the
			   user can click/focus companies before the columns unstick. Desktop only —
			   .is-held is added by setupLeadFades in the same matchMedia branch as the
			   lead-stage pin. */
			.portfolio-businesses.is-held {
				height: var(--portfolio-hold, 208vh);
				margin-top: 0;
			}

			.portfolio-businesses.is-held .portfolio-businesses__pin {
				align-content: center;
				display: grid;
				min-height: 100vh;
				position: sticky;
				top: 0;
			}

			/* Selected-company detail block — dark treatment on the section's dark bg. */
			.portfolio-businesses__detail {
				min-height: 9rem;
			}

			.portfolio-businesses__panel:not([hidden]) {
				animation: panel-fade-in 240ms ease;
			}

			@keyframes panel-fade-in {
				from { opacity: 0; }
				to   { opacity: 1; }
			}

			.portfolio-businesses__logo {
				display: block;
				height: auto;
				margin-bottom: 1.1rem;
				max-height: 2.2rem;
				max-width: 60%;
				width: auto;
			}

			.portfolio-businesses__heading {
				color: #fff;
				font-size: clamp(1.35rem, 2vw, 2rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.15;
				margin: 0;
				max-width: 30ch;
				text-wrap: balance;
			}

			.portfolio-businesses__accent {
				color: var(--color-hero-highlight);
			}

			.portfolio-businesses__desc {
				color: rgba(255, 255, 255, 0.82);
				font-size: clamp(1rem, 1.15vw, 1.25rem);
				font-weight: 500;
				line-height: 1.35;
				margin: 1.1rem 0 0;
				max-width: 42ch;
			}

			.portfolio-businesses__divider {
				background: var(--color-hero-highlight);
				border: 0;
				height: 2px;
				margin: 1.8rem 0;
				width: 100%;
			}

			.portfolio-businesses__list {
				display: grid;
				gap: 0.55rem 2.5rem;
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.portfolio-businesses__company {
				appearance: none;
				background: transparent;
				border: 0;
				color: rgba(255, 255, 255, 0.85);
				cursor: pointer;
				font-family: inherit;
				font-size: clamp(1rem, 1.1vw, 1.25rem);
				font-weight: 600;
				letter-spacing: -0.01em;
				padding: 0.35rem 0;
				text-align: left;
				transition: color 160ms ease;
				width: 100%;
			}

			.portfolio-businesses__company:hover:not(:disabled) {
				color: #fff;
			}

			.portfolio-businesses__company[aria-selected="true"] {
				color: var(--color-hero-highlight);
			}

			.portfolio-businesses__company:disabled,
			.portfolio-businesses__company[aria-disabled="true"] {
				color: rgba(255, 255, 255, 0.3);
				cursor: default;
				pointer-events: none;
			}

			.portfolio-layout__visual {
				background: transparent;
				border: 0;
				display: grid;
				place-items: center;
				height: 100vh;
				min-height: 100vh;
				overflow: hidden;
				position: sticky;
				top: 0;
			}

			#portfolio-sankey-chart {
				display: block;
				height: 100%;
				max-height: 74vh;
				pointer-events: none;
				width: 100%;
			}

			/* Resting state (no company selected): the full chart is illuminated. */
			#portfolio-sankey-chart .sankey-link {
				opacity: 0.9;
				transition: opacity 180ms ease, stroke-width 180ms ease;
			}

			#portfolio-sankey-chart .sankey-node {
				opacity: 1;
				transition: opacity 180ms ease;
			}

			#portfolio-sankey-chart .sankey-link.portfolio-is-highlight {
				opacity: 0.9;
			}

			#portfolio-sankey-chart .sankey-node.portfolio-is-highlight {
				opacity: 1;
			}

			#portfolio-sankey-chart .sankey-link.portfolio-is-muted,
			#portfolio-sankey-chart .sankey-node.portfolio-is-muted {
				opacity: 0.08;
			}

			/* --- Portfolio Themes section --- */
			#portfolio-themes {
				position: relative;
				/* 80vh sticky + 624vh themes + 48vh lead fade + 192vh finale + 80vh hold */
				min-height: 1024vh;
			}

			.themes-layout {
				align-items: center;
				display: grid;
				gap: 5%;
				grid-template-columns: minmax(300px, 34%) minmax(0, 62%);
				height: 100vh;
				justify-content: center;
				padding: 0 4vw;
				position: sticky;
				top: 0;
			}

			.themes-copy {
				display: flex;
				flex-direction: column;
				gap: 1.3rem;
				height: 100%;
				justify-content: center;
				padding: 6vh 0;
			}

			.themes-caption {
				display: none;
			}

			.themes-lead-stack {
				display: grid;
			}

			.themes-lead,
			.themes-finale-lead {
				color: #fff;
				font-size: 16px;
				font-weight: 700;
				grid-area: 1 / 1;
				line-height: 1.25;
				margin: 0;
			}

			.themes-finale-lead {
				opacity: 0;
			}

			.themes-info {
				display: grid;
			}

			.themes-info__block {
				grid-area: 1 / 1;
				margin: 0;
				transition: opacity 320ms ease;
			}

			.themes-info__body {
				color: #fff;
				font-size: 16px;
				line-height: 1.45;
				margin: 0;
				max-width: 46ch;
			}

			.themes-info__body strong {
				font-weight: 600;
			}

			.themes-info__block[data-theme="Electrification"] .themes-info__body strong {
				color: #00dba0;
			}

			.themes-info__block[data-theme="Energy"] .themes-info__body strong {
				color: #98e1e6;
			}

			.themes-info__block[data-theme="Materials"] .themes-info__body strong {
				color: #f7004d;
			}

			.themes-roster,
			.impacts-roster {
				border-top: 1px solid #FFF;
				display: grid;
				gap: 1rem;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				padding-top: 1.2rem;
			}

			.themes-col__title {
				color: rgba(255, 255, 255, 0.5);
				font-size: 0.72rem;
				font-weight: 700;
				letter-spacing: 0.02em;
				margin: 0 0 0.6rem;
				text-transform: lowercase;
				transition: color 220ms ease;
			}

			.themes-col.is-active .themes-col__title {
				color: #fff;
			}

			.themes-col__list {
				display: flex;
				flex-direction: column;
				gap: 0.3rem;
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.themes-col .themes-col__list {
				border-top-style: solid;
				border-top-width: 1px;
				padding-top: 0.75rem;
			}

			.themes-col[data-theme="Materials"] .themes-col__list {
				border-top-color: hsl(341.3deg 100% 48.43% / 25%);
			}

			.themes-col[data-theme="Materials"].is-active .themes-col__list {
				border-top-color: hsl(341.3deg 100% 48.43%);
			}

			.themes-col[data-theme="Energy"] .themes-col__list {
				border-top-color: hsl(183.85deg 60.94% 74.9% / 25%);
			}

			.themes-col[data-theme="Energy"].is-active .themes-col__list {
				border-top-color: hsl(183.85deg 60.94% 74.9%);
			}

			.themes-col[data-theme="Electrification"] .themes-col__list {
				border-top-color: hsl(163.84deg 100% 42.94% / 25%);
			}

			.themes-col[data-theme="Electrification"].is-active .themes-col__list {
				border-top-color: hsl(163.84deg 100% 42.94%);
			}

			.themes-company {
				color: rgba(255, 255, 255, 0.28);
				font-size: clamp(0.72rem, 0.85vw, 0.9rem);
				line-height: 1.5;
				transition: color 220ms ease;
			}

			.themes-company.is-lit {
				color: #fff;
				font-weight: 400;
			}

			.themes-visual {
				display: grid;
				height: 100vh;
				place-items: center;
			}

			#themes-sankey-chart {
				display: block;
				height: 100%;
				max-height: 74vh;
				pointer-events: none;
				width: 100%;
			}

			#themes-sankey-chart .sankey-link {
				opacity: 0;
			}

			#themes-sankey-chart .sankey-node {
				opacity: 0.05;
			}

			#themes-sankey-chart .sankey-node text {
				fill: #fff;
				opacity: 0.54;
			}
			#themes-sankey-chart .sankey-node.is-selected text {
				fill: #fff;
				opacity: 1;
			}

			.section-placeholder {
				min-height: 24vh;
			}

			.system-themes-intro {
				background: var(--color-sector);
				color: #fff;
				min-height: 100vh;
				display: grid;
				padding: 12vh 6vw;
				place-content: center;
				place-items: center;
			}

			.system-themes-intro__body {
				font-size: clamp(1.45rem, 2.8vw, 2.3rem);
				font-weight: 750;
				letter-spacing: -0.02em;
				line-height: 1.2;
				margin: 0 auto;
				max-width: var(--max-copy-width);
				text-wrap: balance;
				width: min(100%, var(--max-copy-width));
			}

			.system-themes-visual {
				display: grid;
				padding: 10vh 5vw 16vh;
				place-items: center;
			}

			.system-themes-visual__image {
				display: block;
				height: auto;
				max-width: 1100px;
				object-fit: contain;
				width: 100%;
			}

			/* Night-sky transition: hands off the persistent #site-bg starfield to a
			   section-local canvas that brightens toward the video's real opening
			   frame, with 4 headline lines crossfading over the top, then hard-cuts
			   into the closing video within the same pin. 1016vh = phase 1 (608vh,
			   through the frame crossfade) + phase 2 (360vh, video scrub) + a 48vh
			   tail during which .acknowledgements-intro's fuel panel crossfades in
			   over the held last frame; the pin then hard-cuts to hidden underneath
			   that cover rather than fading to the starfield -- keep in
			   sync with CT_PHASE1_VH/CT_VIDEO_VH/CT_EXIT_VH in main.js. Mobile
			   override below drops this back to 720vh (phase 1 only, no video, no
			   tail -- mobile keeps this pin sticky rather than fixed). */
			.closing-transition {
				min-height: 1016vh;
				position: relative;
			}

			.closing-transition__pin {
				display: grid;
				height: 100vh;
				overflow: hidden;
				place-items: center;
				pointer-events: none;
				position: sticky;
				top: 0;
			}

			.closing-transition__sky,
			.closing-transition__frame {
				height: 100%;
				inset: 0;
				object-fit: cover;
				pointer-events: none;
				position: absolute;
				width: 100%;
			}

			.closing-transition__sky {
				z-index: 0;
			}

			.closing-transition__frame {
				opacity: 0;
				z-index: 1;
			}

			.closing-transition__video {
				background: var(--color-dark);
				height: 100%;
				inset: 0;
				object-fit: cover;
				opacity: 0;
				pointer-events: none;
				position: absolute;
				visibility: hidden;
				width: 100%;
				z-index: 3;
			}

			/* Hard cut, no crossfade: toggled once by main.js at the exact scroll
			   position where the frame image reaches full opacity (matches the
			   video's real frame 0). */
			.closing-transition__pin.is-video-phase .closing-transition__sky,
			.closing-transition__pin.is-video-phase .closing-transition__frame,
			.closing-transition__pin.is-video-phase .closing-transition__stack {
				opacity: 0;
				visibility: hidden;
			}

			.closing-transition__pin.is-video-phase .closing-transition__video {
				opacity: 1;
				visibility: inherit;
			}

			.closing-transition__stack {
				align-items: center;
				display: grid;
				padding: 0 6vw;
				position: relative;
				z-index: 2;
			}

			.closing-transition__line {
				color: #fff;
				grid-area: 1 / 1;
				margin: 0;
				opacity: 0;
				text-align: left;
				text-wrap: pretty;
			}

			.closing-transition__line--1 {
				font-size: clamp(1.6rem, 3.2vw, 2.6rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.25;
				max-width: var(--max-copy-width);
			}

			.closing-transition__line--2,
			.closing-transition__line--3,
			.closing-transition__line--4 {
				font-size: clamp(1.7rem, 2.5vw, 2.5rem);
				font-weight: 400;
				line-height: 1.15;
				max-width: var(--max-copy-width);
			}

			#conclusion {
				position: relative;
				z-index: 10;
			}

			/* 320vh = 220vh scrubbed beat + 100vh pinned viewport. The block itself
			   stays transparent until the fuel panel inside the pin has finished
			   crossfading over the closing video -- otherwise this box slides up
			   over the still-playing video from the bottom (#conclusion sits above
			   .closing-transition__pin). main.js adds .is-fuel at that point, which
			   is what holds the color field after the pin hides and before
			   .methodology-layout (also --color-fuel) covers the viewport. */
			.acknowledgements-intro {
				color: var(--color-dark);
				min-height: 320vh;
				position: relative;
			}

			.acknowledgements-intro.is-fuel {
				background: var(--color-fuel);
			}

			.acknowledgements-intro__pin {
				align-items: center;
				display: grid;
				height: 100vh;
				justify-content: center;
				overflow: hidden;
				padding: 12vh 6vw;
				pointer-events: none;
				position: sticky;
				top: 0;
			}

			.acknowledgements-intro__bg {
				background: var(--color-fuel);
				inset: 0;
				/* Driven by drawAcknowledgementsIntro in main.js. */
				opacity: 0;
				position: absolute;
				z-index: 0;
			}

			.acknowledgements-intro__stack {
				align-items: center;
				display: grid;
				position: relative;
				z-index: 1;
			}

			.acknowledgements-intro__body {
				opacity: 0;
				font-size: clamp(1.9rem, 4.2vw, 3.4rem);
				font-weight: 760;
				letter-spacing: -0.03em;
				line-height: 0.98;
				margin: 0;
				max-width: 20ch;
				text-align: left;
				width: min(100%, var(--max-copy-width));
			}

			.acknowledgements-layout {
				display: grid;
				padding: 12vh 5vw 16vh;
				place-items: center;
			}

			.acknowledgements-layout__copy {
				color: #fff;
				display: grid;
				gap: 0.85rem;
				max-width: 58ch;
				width: min(100%, var(--max-copy-width));
			}

			.acknowledgements-layout__lead {
				color: var(--color-dark);
				font-size: clamp(1.15rem, 1.8vw, 1.55rem);
				font-weight: 600;
				line-height: 1.32;
				margin: 0;
			}

			.acknowledgements-layout__meta {
				color: rgba(0, 0, 0, 0.7);
				font-size: clamp(0.98rem, 1.2vw, 1.14rem);
				font-weight: 500;
				line-height: 1.35;
				margin: 0;
			}

			.acknowledgements-layout__meta + .acknowledgements-layout__meta {
				margin-top: -0.8rem;
			}

			.acknowledgements-layout__subhead {
				color: var(--color-dark);
				font-size: clamp(1.1rem, 1.45vw, 1.35rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.2;
				margin: 0.6rem 0 -0.4rem;
			}

			.acknowledgements-layout__partners {
				display: grid;
				gap: 0.7rem;
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.acknowledgements-layout__partners li {
				align-items: baseline;
				display: flex;
				flex-wrap: wrap;
				gap: 0.45rem 0.8rem;
			}

			.acknowledgements-layout__partners span {
				color: rgba(0, 0, 0, 0.7);
				font-size: clamp(0.95rem, 1.1vw, 1.08rem);
				font-weight: 500;
			}

			.acknowledgements-layout__partners strong {
				color: var(--color-dark);
				font-size: clamp(1rem, 1.2vw, 1.16rem);
				font-weight: 700;
			}

			.methodology-layout {
				background: var(--color-fuel);
				color: var(--color-dark);
				display: grid;
				gap: 4vw;
				grid-template-columns: 30% 1fr;
				padding: 10vh 6vw 14vh;
			}

			.methodology-layout__toc {
				align-self: start;
				position: sticky;
				top: 3rem;
			}

			.methodology-layout__toc ul {
				display: grid;
				gap: 0.85rem;
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.methodology-layout__toc a {
				color: var(--color-dark);
				display: inline-block;
				font-size: clamp(0.95rem, 1.05vw, 1.08rem);
				font-weight: 500;
				line-height: 1.3;
				opacity: 0.55;
				text-decoration: none;
				transition: opacity 0.2s ease, font-weight 0.2s ease;
			}

			.methodology-layout__toc a.is-active {
				font-weight: 700;
				opacity: 1;
			}

			.methodology-layout__toc a:hover {
				opacity: 0.85;
			}

			.methodology-layout__content {
				display: grid;
				gap: 8vh;
				max-width: 44rem;
			}

			.methodology-content {
				display: grid;
				gap: 1.3rem;
			}

			.methodology-content h3 {
				font-size: clamp(1.4rem, 2vw, 1.9rem);
				font-weight: 760;
				letter-spacing: -0.02em;
				line-height: 1.1;
				margin: 0;
			}

			.methodology-content h4 {
				font-size: clamp(1.05rem, 1.3vw, 1.2rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.2;
				margin: 0.6rem 0 -0.4rem;
			}

			.methodology-content p {
				font-size: clamp(0.98rem, 1.15vw, 1.08rem);
				line-height: 1.55;
				margin: 0;
			}

			.methodology-content a {
				color: var(--color-dark);
				text-decoration-color: rgba(0, 0, 0, 0.4);
				text-underline-offset: 2px;
			}

			.methodology-content a:hover {
				text-decoration-color: currentColor;
			}

			.methodology-content__references {
				display: grid;
				gap: 0.9rem;
				list-style: none;
				margin: 0;
				padding: 0;
				counter-reset: reference;
			}

			.methodology-content__references li {
				font-size: 0.92rem;
				line-height: 1.5;
			}

			.methodology-content__references li::before {
				content: counter(reference) ".";
				counter-increment: reference;
				font-weight: 700;
			}

			.methodology-content--legal {
				gap: 0.9rem;
			}

			.methodology-content--legal h4 {
				font-size: 0.98rem;
			}

			.methodology-content--legal p {
				color: rgba(0, 0, 0, 0.7);
				font-size: 0.82rem;
				line-height: 1.5;
			}

			.scenarios-intro {
				background: var(--color-final-energy);
				color: var(--color-dark);
				min-height: 100vh;
				display: grid;
				gap: 1.25rem;
				padding: 12vh 6vw;
				place-content: center;
				place-items: center;
			}

			.scenarios-intro__body {
				font-size: clamp(1.25rem, 2.4vw, 1.9rem);
				font-weight: 700;
				letter-spacing: inherit;
				line-height: 1.35;
				margin: 0 auto;
				max-width: var(--max-copy-width);
				width: min(100%, var(--max-copy-width));
			}

			.scenarios-intro__body span {
				font-family: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-weight: 800;
			}

			.scenarios-intro > p {
				font-size: clamp(1rem, 1.55vw, 1.2rem);
				font-weight: 400;
				letter-spacing: inherit;
				line-height: 1.55;
				margin: 0 auto;
				max-width: var(--max-copy-width);
				width: min(100%, var(--max-copy-width));
			}

			.scenario-layout {
				--scenario-hold: 192vh;
				display: grid;
				gap: 4vw;
				grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
				align-items: start;
				padding: 12vh 5vw 16vh;
			}

			.scenario-layout__copy {
				display: grid;
				padding: 8vh 0 12vh;
			}

			.scenario-layout__lead-stage {
				position: relative;
			}

			.scenario-layout__lead-stage.is-pinned {
				height: 192vh;
			}

			.scenario-layout__lead-stage.is-pinned .scenario-layout__lead-pin {
				display: grid;
				height: 100vh;
				place-items: center;
				position: sticky;
				top: 0;
			}

			.scenario-layout__lead-stage.is-pinned .scenario-layout__lead {
				grid-area: 1 / 1;
			}

			.scenario-layout__lead {
				color: #fff;
				font-size: clamp(1.12rem, 1.75vw, 1.55rem);
				font-weight: 600;
				line-height: 1.26;
				margin: 0;
				max-width: 26ch;
				text-wrap: balance;
			}

			.scenario-selector {
				margin-top: 8vh;
			}

			.scenario-selector.is-held {
				height: var(--scenario-hold, 192vh);
				margin-top: 0;
			}

			.scenario-selector.is-held .scenario-selector__pin {
				align-content: center;
				display: grid;
				min-height: 100vh;
				position: sticky;
				top: 0;
			}

			.scenario-selector__detail {
				min-height: 9rem;
			}

			.scenario-selector__panel:not([hidden]) {
				animation: panel-fade-in 240ms ease;
			}

			.scenario-selector__heading {
				color: #fff;
				font-size: clamp(1.35rem, 2vw, 2rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.15;
				margin: 0;
				max-width: 30ch;
				text-wrap: balance;
			}

			.scenario-selector__accent {
				color: var(--color-hero-highlight);
			}

			.scenario-selector__desc {
				color: rgba(255, 255, 255, 0.82);
				font-size: clamp(1rem, 1.15vw, 1.25rem);
				font-weight: 500;
				line-height: 1.35;
				margin: 1.1rem 0 0;
				max-width: 42ch;
			}

			.scenario-selector__divider {
				background: var(--color-hero-highlight);
				border: 0;
				height: 2px;
				margin: 1.8rem 0;
				width: 100%;
			}

			.scenario-selector__list {
				display: grid;
				gap: 0.55rem;
				grid-template-columns: 1fr;
			}

			.scenario-selector__tab {
				appearance: none;
				background: transparent;
				border: 0;
				color: rgba(255, 255, 255, 0.85);
				cursor: pointer;
				font-family: inherit;
				font-size: clamp(1rem, 1.1vw, 1.25rem);
				font-weight: 600;
				letter-spacing: -0.01em;
				padding: 0.35rem 0;
				text-align: left;
				transition: color 160ms ease;
				width: 100%;
			}

			.scenario-selector__tab:hover:not(:disabled) {
				color: #fff;
			}

			.scenario-selector__tab[aria-selected="true"] {
				color: var(--color-hero-highlight);
			}

			.scenario-layout__visual {
				background: transparent;
				border: 0;
				display: grid;
				place-items: center;
				height: 100vh;
				min-height: 100vh;
				overflow: hidden;
				position: sticky;
				top: 0;
			}

			#scenario-sankey-chart {
				display: block;
				height: 100%;
				max-height: 74vh;
				pointer-events: none;
				width: 100%;
			}

			#scenario-sankey-chart .sankey-link {
				opacity: 0.9;
				transition: opacity 180ms ease, stroke-width 180ms ease;
			}

			#scenario-sankey-chart .sankey-node {
				opacity: 1;
				transition: opacity 180ms ease;
			}

			#scenario-sankey-chart .sankey-link.scenario-is-highlight {
				opacity: 0.9;
			}

			#scenario-sankey-chart .sankey-node.scenario-is-highlight {
				opacity: 1;
			}

			#scenario-sankey-chart .sankey-link.scenario-is-muted,
			#scenario-sankey-chart .sankey-node.scenario-is-muted {
				opacity: 0.08;
			}

			/* Left GT reference axis + the horizontal marker that slides to the
			   active scenario's total. Together they show that a lower-GT scenario
			   physically occupies less of the chart height. */
			#scenario-sankey-chart .scenario-axis__line {
				stroke: rgba(238, 245, 255, 0.35);
				stroke-width: 1;
			}

			#scenario-sankey-chart .scenario-axis__tick-dash {
				stroke: rgba(238, 245, 255, 0.45);
				stroke-width: 1;
			}

			#scenario-sankey-chart .scenario-axis__tick-label {
				fill: rgba(238, 245, 255, 0.6);
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 11px;
				font-weight: 500;
				letter-spacing: 0.02em;
				transition: fill 220ms ease;
			}

			#scenario-sankey-chart .scenario-axis__tick.is-active .scenario-axis__tick-dash {
				stroke: var(--color-hero-highlight);
				stroke-width: 1.5;
			}

			#scenario-sankey-chart .scenario-axis__tick.is-active .scenario-axis__tick-label {
				fill: var(--color-hero-highlight);
				font-weight: 700;
			}

			#scenario-sankey-chart .scenario-marker__line {
				stroke: var(--color-hero-highlight);
				stroke-dasharray: 3 5;
				stroke-opacity: 0.55;
				stroke-width: 1;
			}

			/* 468vh = 388vh scrubbed fade sequence + 80vh pinned viewport. */
			.impacts-intro {
				min-height: 468vh;
			}

			.impacts-intro__pin {
				display: grid;
				height: 100vh;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				padding: clamp(4rem, 8vh, 7rem) 6vw;
				position: sticky;
				top: 0;
			}

			.impacts-intro__bg {
				position: absolute;
				inset: 0;
				background: var(--color-final-energy);
				/* Entry/exit fade lives on .impacts-intro__pin's own opacity now
				   (see drawImpactsIntro in main.js). */
				opacity: 1;
				z-index: 0;
			}

			.impacts-intro__stack {
				display: grid;
				position: relative;
				z-index: 1;
				align-items: center;
			}

			.impacts-intro__line {
				color: var(--color-dark);
				grid-area: 1 / 1;
				margin: 0;
				opacity: 0;
				text-align: left;
			}

			.impacts-intro__line--1 {
				font-size: clamp(1.6rem, 3.2vw, 2.6rem);
				font-weight: 700;
				letter-spacing: -0.01em;
				line-height: 1.25;
				max-width: var(--max-copy-width);
			}

			/* Scroll walkthrough. .impacts-walk is the scroll runway — its height is
			   the summed beat budget from main.js — and .impacts-layout is the
			   sticky stage held inside it. */
			.impacts-walk {
				min-height: calc(var(--impacts-walk-vh, 1670) * 1vh);
				position: relative;
			}

			.impacts-walk__stage {
				display: grid;
				min-height: 0;
				position: relative;
				align-items: end;
			}

			.impacts-walk__script,
			.impacts-walk__stage > .impacts-company-card {
				grid-area: 1 / 1;
				min-height: 0;
				height: 100%;
			}

			.impacts-walk__script {
				align-content: start;
				display: grid;
				gap: 2rem;
				grid-template-rows: 1fr auto;
				/* Narration only — it is grid-stacked over the card, so even at
				   opacity 0 it would swallow clicks on the tabs/roster. */
				pointer-events: none;
			}

			.impacts-walk__copy-stack {
				align-items: end;
				display: grid;
				will-change: transform;
			}

			.impacts-walk__copy {
				color: #fff;
				font-size: 24px;
				font-weight: 400;
				grid-area: 1 / 1;
				line-height: 1.3;
				margin: 0;
				opacity: 0;
				text-wrap: balance;
			}

			.impacts-walk__copy strong {
				color: #fff;
			}

			.impacts-walk__node {
				align-self: center;
				opacity: 0;
			}

			.impacts-walk__node .impacts-node-visual__bar {
				height: 116px;
				max-height: 116px;
				width: 38px;
			}

			.impacts-walk__node .impacts-node-visual__name {
				font-size: 16px;
				font-weight: 400;
			}

			.impacts-walk__stage > .impacts-company-card {
				opacity: 0;
				pointer-events: none;
			}

			.impacts-walk__stage > .impacts-company-card.is-live {
				pointer-events: auto;
			}

			.impacts-tabs__panels {
				display: grid;
				min-height: 0;
			}

			.impacts-tabs__panel {
				grid-area: 1 / 1;
			}

			.impacts-tabs__panel[data-impacts-panel="avoided"] {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 1rem;
			}

			.impacts-tabs__panel[hidden] {
				display: none;
			}

			.impacts-tabs__panel:not([data-impacts-panel="avoided"]):not([hidden]) {
				display: flex;
				flex-direction: column;
				gap: 1rem;
			}

			.impacts-tabs__learn-more {
				color: rgba(244, 250, 255, 0.75);
				font-size: 0.8rem;
				letter-spacing: 0.02em;
				text-decoration: underline;
				text-underline-offset: 3px;
				transition: color 200ms ease;
				width: fit-content;
			}

			.impacts-tabs__learn-more:hover,
			.impacts-tabs__learn-more:focus-visible {
				color: #fff;
			}

			.impacts-tabs__learn-more[hidden] {
				display: none;
			}

			.impacts-tabs {
				display: flex;
				/* flex-wrap: wrap; */
				gap: 0.5rem;
			}

			.impacts-tabs__tab {
				appearance: none;
				background: transparent;
				border: 1px solid rgba(255, 255, 255, 0.28);
				color: rgba(255, 255, 255, 0.5);
				cursor: pointer;
				font-family: inherit;
				font-size: 0.78rem;
				font-weight: 400;
				letter-spacing: 0;
				padding: 0.65rem 0.75rem 0.5rem;
				transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
			}

			.impacts-tabs__tab:hover,
			.impacts-tabs__tab:focus-visible {
				color: rgba(255, 255, 255, 0.85);
			}

			.impacts-tabs__tab.is-active {
				background: #fff;
				border-color: #fff;
				color: var(--color-dark);
				font-weight: 400;
			}

			.impacts-tabs__bullets {
				color: rgba(244, 250, 255, 0.9);
				display: grid;
				font-size: 14px;
				gap: 0.85rem;
				line-height: 1.45;
				margin: 0;
				padding-left: 1.1rem;
			}

			.impacts-tabs__prose {
				color: rgba(244, 250, 255, 0.9);
				display: grid;
				font-size: 0.95rem;
				gap: 0.85rem;
				line-height: 1.45;
			}

			.impacts-tabs__prose p {
				margin: 0;
			}

			.impacts-tabs__prose strong {
				color: #fff;
				font-weight: 700;
			}

			.impacts-layout {
				display: grid;
				gap: 4vw;
				grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
				align-items: stretch;
				height: 100vh;
				min-height: 100vh;
				padding: 0 5vw;
				position: sticky;
				top: 0;
			}

			.impacts-layout__copy {
				align-content: stretch;
				display: grid;
				height: 100%;
				padding: 6vh 0 10vh;
				position: relative;
				row-gap: 3vh;
				grid-template-rows: 1fr auto;
			}

			.impacts-lead-block {
				padding: 10vh 5vw 4vh;
			}

			.impacts-layout__lead-stage {
				position: relative;
			}

			.impacts-layout__lead-stage.is-pinned {
				height: auto;
			}

			.impacts-layout__lead-stage.is-pinned .impacts-layout__lead-pin {
				display: grid;
				height: auto;
				place-items: start;
				position: static;
			}

			.impacts-layout__lead-stage.is-pinned .impacts-layout__lead {
				grid-area: auto;
			}

			.impacts-layout__lead {
				color: #fff;
				font-size: clamp(1.12rem, 1.75vw, 1.55rem);
				font-weight: 600;
				line-height: 1.26;
				margin: 0;
				max-width: 26ch;
				text-wrap: balance;
			}

			.impacts-layout__lead strong {
				color: var(--color-device);
			}

			.impacts-company-card {
				background: none;
				border: 0;
				border-radius: 0;
				margin-top: 0;
				padding: 0;
			}

			.impacts-company-card__sentence {
				color: #fff;
				font-size: 16px;
				line-height: 1.3;
				letter-spacing: -0.01em;
				margin: 0;
			}

			.impacts-company-card__prompt {
				color: rgba(244, 250, 255, 0.9);
				font-size: 0.95rem;
				line-height: 1.42;
				margin: 0;
			}

			.impacts-company-card__sentence strong {
				font-weight: 700;
			}

			.impacts-company-card__sentence-accent {
				color: #0b72df;
			}

			.impacts-company-card__content {
				display: grid;
				gap: 1.5rem;
				grid-template-rows: minmax(0, 1fr) auto;
				height: 100%;
			}

			.impacts-company-card__body {
				align-content: start;
				display: grid;
				gap: 1.5rem;
				min-height: 0;
				grid-template-rows: auto 1fr;
			}

			.impacts-company-card__brand-header {
				display: grid;
				gap: 0.75rem;
			}

			.impacts-company-card__content[hidden] {
				display: none;
			}

			.impacts-company-card__logo {
				display: block;
				height: auto;
				max-height: 60px;
				max-width: 125px;
				margin: 0;
			}

			.impacts-node-visual {
				align-items: end;
				display: grid;
				gap: 1.5rem;
				grid-template-columns: auto 1fr;
				margin-left: 8%;
			}

			.impacts-node-visual__bar {
				--impacts-node-color: var(--color-final-energy);
				display: flex;
				flex-direction: column;
				height: 100px;
				max-height: 100px;
				width: 32px;
				padding-bottom: 8px;
			}

			.impacts-node-visual__bar .impacts-node-avoided {
				background: #fff;
				opacity: 1;
				height: var(--impacts-node-avoided-height, 0%);
				min-height: 0;
				width: 100%;
			}

			.impacts-node-visual__bar .impacts-node-remaining {
				background: var(--impacts-node-color);
				height: var(--impacts-node-remaining-height, 100%);
				min-height: 0;
				width: 100%;
			}

			.impacts-node-visual__meta {
				display: grid;
				gap: 0.6rem;
			}

			.impacts-node-visual__name {
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				line-height: 1.2;
				margin: 0;
			}

			.impacts-node-visual__savings {
				color: #fff;
				font-size: 26px;
				font-weight: 700;
				line-height: 1;
				margin: 0;
			}

			.impacts-layout__visual {
				background: transparent;
				border: 0;
				display: grid;
				place-items: center;
				height: 100%;
				min-height: 100%;
				overflow: hidden;
				position: relative;
			}

			.impacts-layout__visual-shell {
				display: grid;
				gap: 1.5rem;
				height: 100%;
				justify-items: stretch;
				min-height: 0;
				width: min(100%, 1100px);
				align-items: center;
			}

			#impacts-sankey-chart {
				display: block;
				height: 100%;
				max-height: 74vh;
				pointer-events: none;
				width: 100%;
			}

			.impacts-businesses {
				margin-top: 0;
				min-height: 0;
				position: relative;
			}

			.impacts-businesses__pin {
				display: flex;
				flex-direction: column;
				gap: 0.35rem;
				height: 100%;
				min-height: 0;
			}

			.impacts-businesses.is-held {
				height: auto;
				margin-top: 0;
				min-height: 0;
			}

			.impacts-businesses.is-held .impacts-businesses__pin {
				align-content: start;
				display: flex;
				gap: 0.35rem;
				min-height: 0;
				position: static;
			}

			.impacts-businesses__company {
				appearance: none;
				background: transparent;
				border: 0;
				color: rgba(255, 255, 255, 0.28);
				cursor: pointer;
				font-family: inherit;
				font-size: clamp(0.72rem, 0.85vw, 0.9rem);
				font-weight: 400;
				line-height: 1.25;
				padding: 0.12rem 0;
				text-align: left;
				transition: color 220ms ease;
				width: 100%;
			}

			.impacts-roster__title {
				color: rgba(255, 255, 255, 0.5);
				font-size: 0.72rem;
				font-weight: 700;
				letter-spacing: 0.02em;
				margin: 0 0 0.4rem;
				text-transform: capitalize;
			}

			.impacts-roster__list {
				border-top-style: solid;
				border-top-width: 1px;
				display: flex;
				flex-direction: column;
				gap: 0.3rem;
				list-style: none;
				margin: 0;
				padding: 0;
				padding-top: 0.75rem;
			}

			.impacts-roster__col[data-theme="Materials"] .impacts-roster__list,
			.impacts-roster__col:nth-child(1) .impacts-roster__list {
				border-top-color: hsl(341.3deg 100% 48.43%);
			}

			.impacts-roster__col[data-theme="Energy"] .impacts-roster__list,
			.impacts-roster__col:nth-child(2) .impacts-roster__list {
				border-top-color: hsl(183.85deg 60.94% 74.9%);
			}

			.impacts-roster__col[data-theme="Electrification"] .impacts-roster__list,
			.impacts-roster__col:nth-child(3) .impacts-roster__list {
				border-top-color: hsl(163.84deg 100% 42.94%);
			}

			.impacts-businesses__company:hover,
			.impacts-businesses__company:focus-visible {
				color: rgba(255, 255, 255, 0.28);
			}

			.impacts-businesses__company.is-active {
				color: #fff;
				font-weight: 400;
			}

			/* Carved "empty" avoided regions: no fill, 1px border. Remaining regions
			   keep the normal stage fill (nodes) or gradient fill (ribbons). */
			#impacts-sankey-chart .impacts-node-avoided {
				fill: #fff;
				stroke: none;
				stroke-width: 0;
			}

			#impacts-sankey-chart .impacts-link-remaining {
				stroke: none;
			}

			#impacts-sankey-chart .impacts-link-avoided {
				fill: none;
				stroke: rgba(238, 245, 255, 0.85);
				stroke-width: 1;
			}

			/* Intervention node: full-height outline marking the company's
			   placement, mirroring a click-selected node in the main chart. */
			#impacts-sankey-chart .impacts-node-intervention {
				fill: none;
				stroke: #d4ecff;
				stroke-width: 1.6;
			}

			#impacts-sankey-chart .impacts-link {
				opacity: 0.9;
			}

			#impacts-sankey-chart .sankey-link {
				opacity: 0.9;
			}

			#impacts-sankey-chart .sankey-node {
				opacity: 1;
			}

			#impacts-sankey-chart .sankey-link.impacts-is-highlight {
				opacity: 0.95;
			}

			#impacts-sankey-chart .sankey-node.impacts-is-highlight {
				opacity: 1;
			}

			#impacts-sankey-chart .sankey-link.impacts-is-muted {
				opacity: 0.12;
			}

			#impacts-sankey-chart .sankey-node.impacts-is-muted {
				opacity: 0.28;
			}

			#sankey-chart .sankey-stage-label {
				display: none;
			}

			.sankey-node rect {
				fill: rgba(154, 173, 194, 0.85);
				rx: 0;
				ry: 0;
			}

			.sankey-node.stage-1 rect {
				fill: var(--color-final-service);
			}

			.sankey-node.stage-2 rect {
				fill: var(--color-sector);
			}

			.sankey-node.stage-3 rect {
				fill: var(--color-equipment);
			}

			.sankey-node.stage-4 rect {
				fill: var(--color-device);
			}

			.sankey-node.stage-5 rect {
				fill: var(--color-final-energy);
			}

			.sankey-node.stage-6 rect {
				fill: var(--color-fuel);
			}

			.sankey-node.stage-7 rect {
				fill: var(--color-emissions);
			}

			.sankey-node text {
				fill: #eef5ff;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 11px;
				pointer-events: none;
			}

			/* Scene 9 ("...sum to global emissions"): a "54 Gt" reference caliper
			   sitting 180px right of the isolated stage-1 column. */
			#sankey-chart .lens-focus-axis {
				pointer-events: none;
			}

			#sankey-chart .lens-focus-axis__line,
			#sankey-chart .lens-focus-axis__tick {
				stroke: var(--color-emissions);
				stroke-width: 1;
			}

			#sankey-chart .lens-focus-axis__label {
				fill: var(--color-emissions);
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 16px;
			}

			.sankey-link {
				fill: none;
				mix-blend-mode: screen;
				stroke: rgba(208, 222, 235, 0.38);
				transition: opacity 220ms ease, stroke 220ms ease;
			}

			/* During the scroll morph, link/node opacity is driven per-frame from
			   JS; transitions would lag the scrub. Once the chart unlocks
			   (.is-interactive), inline opacities are cleared and these rules take
			   over so the click-to-isolate classes can animate. */
			#sankey-chart:not(.is-interactive) .sankey-link {
				transition: none;
			}

			#sankey-chart.is-interactive .sankey-link {
				opacity: 0.8;
			}

			#sankey-chart.is-interactive .sankey-link.is-active {
				opacity: 0.95;
			}

			#sankey-chart.is-interactive .sankey-link.is-faded {
				opacity: 0.03;
			}

			.sankey-link.is-active {
				stroke: rgba(110, 188, 255, 0.95);
			}

			.sankey-link.is-faded,
			.sankey-node.is-faded {
				opacity: 0.08;
			}

			.sankey-node.is-selected rect {
				stroke: #d4ecff;
				stroke-width: 1.6;
			}

			/* Themes chart: nodes read at 60%, the finale-selected main nodes pop to
			   full opacity with no border. */
			#themes-sankey-chart .sankey-node rect {
				opacity: 0.6;
			}

			#themes-sankey-chart .sankey-node.is-selected rect {
				stroke: none;
				opacity: 1;
			}

			/* Full-chain isolation overlay: the selected node's chain drawn as its
			   own ribbons at attributed widths (see applySelection in main.js). */
			.sankey-chain {
				pointer-events: none;
			}

			#sankey-chart .sankey-chain-link {
				fill: none;
				opacity: 0.95;
			}

			/* --- Bottom sticky nav ------------------------------------------- */
			.bottom-sticky-nav {
				bottom: 0;
				display: flex;
				left: 0;
				position: fixed;
				transform: translateY(100%);
				transition: transform 0.5s ease-in-out;
				width: 100%;
				will-change: transform;
				z-index: 500;
			}

			.bottom-sticky-nav.is-visible {
				transform: translateY(0);
			}

			/* Lightbulb disclosure button, visible only while scrolled through
			   #technology-impacts (see initTechImpactsTooltip in main.js). Fixed
			   bottom-left, offset enough to clear .bottom-sticky-nav below it. */
			.tech_impacts_tooltip {
				position: fixed;
				left: 20px;
				bottom: 56px;
				z-index: 500;
				opacity: 0;
				pointer-events: none;
				transform: translateY(8px);
				transition: opacity 0.4s ease, transform 0.4s ease;
			}

			.tech_impacts_tooltip.is-visible {
				opacity: 1;
				pointer-events: auto;
				transform: none;
			}

			.tech_impacts_tooltip > button {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				background: none;
				border: 2px solid #fff;
				border-radius: 50%;
				color: #fff;
				cursor: pointer;
			}

			.tech_impacts_tooltip svg {
				width: 16px;
				height: 16px;
				fill: currentColor;
			}

			.tech_impacts_tooltip__content {
				display: none;
				position: absolute;
				left: 0;
				bottom: calc(100% + 10px);
				padding: 16px 14px 12px;
				backdrop-filter: blur(8px);
				border: 1px solid rgba(115, 170, 220, 0.22);
				color: #fff;
				font-size: 13px;
				line-height: 1.4;
				width: 360px;
			}

			.tech_impacts_tooltip.is-open .tech_impacts_tooltip__content {
				display: block;
			}

			.bottom-sticky-nav__list {
				display: flex;
				list-style: none;
				margin: 0;
				padding: 0;
				position: relative;
				width: 100%;
			}

			/* width/left set by JS as each nav section's own scroll progress advances */
			.bottom-sticky-nav__list::after {
				background-color: rgb(0 0 0 / 0.075);
				content: "";
				height: 100%;
				left: var(--nav-progress-left, 0px);
				pointer-events: none;
				position: absolute;
				top: 0;
				width: var(--nav-progress-width, 0px);
			}

			.bottom-sticky-nav__list > li {
				display: flex;
				flex: 1 1 0%;
			}

			.bottom-sticky-nav__list > li.bottom-sticky-nav__item--label {
				flex: 0 0 auto;
				font-family: "Helvetica Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-transform: uppercase;
				font-size: 12px;
			}

			.bottom-sticky-nav__item {
				align-items: center;
				color: var(--color-dark);
				display: flex;
				font-size: 14px;
				font-weight: 400;
				justify-content: flex-start;
				line-height: 1.2;
				padding: 10px 18px 5px;
				text-decoration: none;
				white-space: nowrap;
				text-shadow: none;
				transition: all 0.3s ease-in-out;
			}

			/* only links need to stretch to fill their li; the label li sizes to its own content */
			.bottom-sticky-nav__list > li > a.bottom-sticky-nav__item {
				flex: 1 1 auto;
			}

			.bottom-sticky-nav__item.is-active {
				/* font-weight: 700; */
				text-shadow: 0px 0px 1px black;
			}

			.bottom-sticky-nav__item--label {
				background: #fff;
			}

			.bottom-sticky-nav__item[data-nav-group="global-emissions"] {
				background: var(--color-final-service);
			}

			.bottom-sticky-nav__item[data-nav-group="portfolio"] {
				background: var(--color-device);
			}

			.bottom-sticky-nav__item[data-nav-group="technology-impacts"] {
				background: var(--color-final-energy);
			}

			.bottom-sticky-nav__item[data-nav-group="conclusion"] {
				background: var(--color-emissions);
			}

			/* Fixed pins (desktop only; gated by the "pins-fixed" class main.js adds
			   once it's confirmed GSAP/ScrollTrigger are available and the user
			   hasn't requested reduced motion -- see PINS_FIXED in main.js). Each of
			   these pinned panels used to be its own position:sticky box in normal
			   document flow, so the browser had to physically slide it up into its
			   locked position and back out again at every section boundary. Fixed
			   removes that motion entirely: every panel is mounted at the same
			   on-screen rect for the whole page and only its opacity/visibility
			   changes (driven by main.js via setPinOpacity). Left/right (not
			   width:100vw, which would include the scrollbar gutter and shift
			   every centered layout) replace the width a sticky box would have
			   gotten for free from being a normal block-level flow child. */
			@media (min-width: 901px) {
				.pins-fixed .sankey-layout,
				.pins-fixed .timeline-intro__pin,
				.pins-fixed .timeline-layout,
				.pins-fixed .portfolio-intro__pin,
				.pins-fixed .themes-layout,
				.pins-fixed .impacts-intro__pin,
				.pins-fixed .impacts-layout,
				.pins-fixed .closing-transition__pin,
				.pins-fixed .acknowledgements-intro__pin {
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					opacity: 0;
					visibility: hidden;
				}

				/* Sticky-inside-sticky nests: both were already exactly the size of
				   their 100vh sticky parent, so the nested sticky was a no-op. With a
				   fixed parent it would otherwise be resolving against a box that
				   never scrolls -- make them ordinary flow children instead. */
				.pins-fixed #full-sankey,
				.pins-fixed .timeline-visual {
					position: relative;
					top: auto;
				}
			}

			@media (max-width: 900px) {
				#tif-tgif-portfolio {
					padding-top: 5.2rem;
				}

				/* Static fallback: no scrub on mobile, show the end-state look. */
				.portfolio-intro {
					min-height: auto;
				}

				.portfolio-intro__pin {
					display: block;
					height: auto;
					overflow: visible;
					padding: 3.5rem 1rem;
					position: static;
				}

				.portfolio-intro__bg {
					opacity: 1;
				}

				.portfolio-intro__stack {
					display: flex;
					flex-direction: column;
					gap: 1.5rem;
					align-items: center;
				}

				.portfolio-intro__line {
					grid-area: auto;
					opacity: 1;
					position: static;
				}

				.portfolio-intro__line--1 {
					font-size: clamp(1.5rem, 8vw, 2.5rem);
					max-width: var(--max-copy-width);
				}

				.scenarios-intro {
					padding: 3.5rem 1rem;
				}

				.system-themes-intro {
					min-height: 52vh;
					padding: 3.5rem 1rem;
				}

				.system-themes-intro__body {
					font-size: clamp(1.3rem, 7.2vw, 2.1rem);
				}

				.system-themes-visual {
					padding: 3.5rem 1rem 5rem;
				}

				#portfolio-themes {
					min-height: 0;
				}

				.themes-layout {
					gap: 1.5rem;
					grid-template-columns: 1fr;
					height: auto;
					padding: 3.8rem 1rem 5rem;
					position: static;
				}

				.themes-copy {
					height: auto;
					padding: 0;
				}

				.themes-roster {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}

				.themes-visual {
					height: auto;
				}

				.portfolio-layout {
					gap: 1rem;
					grid-template-columns: 1fr;
					padding: 3.8rem 1rem 5rem;
				}

				.scenario-layout {
					gap: 1rem;
					grid-template-columns: 1fr;
					padding: 3.8rem 1rem 5rem;
				}

				/* Static fallback: no scrub on mobile, show the end-state look. */
				.impacts-intro {
					min-height: auto;
				}

				.impacts-intro__pin {
					display: block;
					height: auto;
					overflow: visible;
					padding: 3.5rem 1rem;
					position: static;
				}

				.impacts-intro__bg {
					opacity: 1;
				}

				.impacts-intro__stack {
					display: flex;
					flex-direction: column;
					gap: 1.5rem;
					align-items: center;
				}

				.impacts-intro__line {
					grid-area: auto;
					opacity: 1;
					position: static;
				}

				.closing-transition {
					min-height: 720vh;
				}

				.closing-transition__video {
					display: none;
				}

				/* Static fallback: no scrub on mobile, show the end-state look. The
				   fuel background is unconditional here rather than waiting on the
				   .is-fuel toggle, since there's no crossfade to hand off from. */
				.acknowledgements-intro {
					background: var(--color-fuel);
					min-height: 52vh;
					padding: 0;
				}

				.acknowledgements-intro__pin {
					display: block;
					height: auto;
					overflow: visible;
					padding: 3.5rem 1rem;
					position: static;
				}

				.acknowledgements-intro__bg {
					opacity: 1;
				}

				.acknowledgements-intro__stack {
					display: block;
				}

				.acknowledgements-intro__body {
					font-size: clamp(1.5rem, 8vw, 2.5rem);
					max-width: var(--max-copy-width);
					opacity: 1;
				}

				.acknowledgements-layout {
					padding: 3.8rem 1rem 5rem;
				}

				.acknowledgements-layout__copy {
					max-width: var(--max-copy-width);
				}

				.acknowledgements-layout__partners li {
					align-items: flex-start;
					flex-direction: column;
					gap: 0.25rem;
				}

				.impacts-walk {
					min-height: auto;
				}

				.impacts-layout {
					gap: 1rem;
					grid-template-columns: 1fr;
					height: auto;
					min-height: auto;
					padding: 3.8rem 1rem 5rem;
					position: static;
				}

				/* Mobile has no scroll clock, so the walkthrough collapses to its
				   end state: script layer hidden, card and roster shown. */
				.impacts-walk__script {
					display: none;
				}

				.impacts-walk__stage > .impacts-company-card {
					opacity: 1;
					pointer-events: auto;
				}

				.impacts-lead-block {
					padding: 3.8rem 1rem 2rem;
				}

				.portfolio-layout__copy {
					padding: 0;
				}

				.scenario-layout__copy {
					padding: 0;
				}

				.impacts-layout__copy {
					gap: 1rem;
					grid-template-rows: none;
					height: auto;
					padding: 0;
					position: relative;
					top: auto;
				}

				.portfolio-layout__lead {
					max-width: none;
				}

				.scenario-layout__lead {
					max-width: none;
				}

				.impacts-layout__lead {
					max-width: none;
				}

				.portfolio-layout__lead + .portfolio-layout__lead {
					margin-top: 1.4rem;
				}

				.scenario-layout__lead + .scenario-layout__lead {
					margin-top: 1.4rem;
				}

				.portfolio-businesses {
					margin-top: 2.4rem;
				}

				.scenario-selector {
					margin-top: 2.4rem;
				}

				.portfolio-businesses__list {
					gap: 0.5rem 1.25rem;
				}

				.portfolio-businesses__heading,
				.portfolio-businesses__desc {
					max-width: var(--max-copy-width);
				}

				.scenario-selector__heading,
				.scenario-selector__desc {
					max-width: var(--max-copy-width);
				}

				.portfolio-layout__visual {
					height: auto;
					min-height: 58vh;
					position: relative;
				}

				.scenario-layout__visual {
					height: auto;
					min-height: 58vh;
					position: relative;
				}

				.impacts-layout__visual {
					height: auto;
					min-height: 58vh;
					position: relative;
				}

				.impacts-businesses {
					min-height: auto;
				}

				.impacts-businesses__pin {
					height: auto;
				}

				#portfolio-sankey-chart {
					max-height: 65vh;
				}

				#scenario-sankey-chart {
					max-height: 65vh;
				}

				#impacts-sankey-chart {
					max-height: 65vh;
				}

				.impacts-roster {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}

				.impacts-node-visual {
					gap: 1rem;
					grid-template-columns: 1fr;
				}
				/* Same top-edge anchoring as desktop (GSAP owns the transform, so the
				   vertical centering can't live there): 0.1257 x 150vw = 18.86vw. */
				.hero-globe {
					max-width: none;
					top: calc(23vh - 18.86vw);
					width: 150vw;
				}

				.hero-copy {
					top: 53%;
					width: min(94vw, 42rem);
				}

				.hero-headline {
					font-size: clamp(2.1rem, 13.6vw, 4.7rem);
					line-height: 0.9;
					padding-left: 2rem;
					padding-right: 2rem;
				}

				.hero-subtitle {
					font-size: clamp(0.95rem, 4.4vw, 1.2rem);
					max-width: 32ch;
				}

				/* Static fallback: no scrub on mobile, show the end-state look. */
				.hero-copy-intro {
					min-height: auto;
				}

				.hero-copy-intro__pin {
					display: block;
					height: auto;
					overflow: visible;
					padding: 3rem 1rem;
					position: static;
				}

				.hero-copy-intro__stack {
					display: flex;
					flex-direction: column;
					gap: 1.5rem;
				}

				.hero-copy-2,
				.hero-copy-3,
				.hero-copy-nav {
					grid-area: auto;
				}

				.hero-copy-2,
				.hero-copy-3,
				.hero-copy-nav__intro,
				.hero-copy-nav__card,
				.hero-copy-nav__note {
					opacity: 1;
				}

				.hero-copy-nav__grid {
					grid-template-columns: 1fr;
				}

				.landscape-layout {
					min-height: 270vh;
				}

				.landscape-visual {
					height: 100vh;
					position: sticky;
					top: 0;
				}

				.landscape-copy {
					margin-top: -100vh;
					padding: 12vh 8vw 16vh;
				}

				.landscape-snippet {
					font-size: clamp(1.45rem, 8.8vw, 2.6rem);
					max-width: 15ch;
					min-height: 74vh;
				}

				.bars-canvas {
					height: min(62vh, 460px);
					width: 120vw;
				}

				.sankey-layout {
					gap: 1.5rem;
					grid-template-columns: 1fr;
					height: auto;
					padding: 0 1rem 2.5rem;
					position: static;
					top: auto;
				}

				#sankey-narrative {
					min-height: auto;
				}

				.sankey-copy {
					height: auto;
					padding: 3rem 0 1rem;
					place-items: normal;
					position: static;
				}

				.sankey-snippet {
					font-size: clamp(1.2rem, 5vw, 1.6rem);
					grid-area: auto;
					min-height: 72vh;
				}

				#full-sankey {
					height: auto;
					place-items: stretch;
					position: relative;
				}

				#sankey-chart {
					height: 65vh;
					min-height: 520px;
				}

				.sankey-meta {
					align-items: flex-start;
					flex-direction: column;
				}

				/* Static fallback: no scrub on mobile, show the end-state look. */
				#timeline-intro {
					min-height: auto;
				}

				.timeline-intro__pin {
					display: block;
					height: auto;
					overflow: visible;
					padding: 3rem 1rem;
					position: static;
				}

				.timeline-intro__bg {
					opacity: 1;
				}

				.timeline-intro__stack {
					display: flex;
					flex-direction: column;
					gap: 1rem;
				}

				.timeline-intro__line {
					grid-area: auto;
					opacity: 1;
					position: static;
				}

				#timeline {
					min-height: auto;
				}

				.timeline-layout {
					gap: 1.5rem;
					grid-template-columns: 1fr;
					height: auto;
					opacity: 1;
					padding: 0 1rem 2.5rem;
					position: static;
					top: auto;
				}

				.timeline-copy {
					height: auto;
					padding: 3rem 0 1rem;
					place-items: normal;
					position: static;
				}

				.timeline-panel {
					grid-area: auto;
				}

				.timeline-panel {
					opacity: 1;
				}

				.timeline-opening {
					opacity: 1;
				}

				.timeline-closing {
					opacity: 1;
				}

				.timeline-visual {
					height: auto;
					place-items: stretch;
					position: relative;
				}

				#timeline-sankey-chart {
					height: 65vh;
					min-height: 520px;
				}
			}

			@media (prefers-reduced-motion: reduce) {
				.hero-globe,
				.hero-logo,
				.hero-headline,
				.hero-subtitle {
					transform: none !important;
					will-change: auto;
				}

				.reveal-word {
					filter: none !important;
					opacity: 1 !important;
					transform: none !important;
					will-change: auto;
				}

				.bottom-sticky-nav {
					transition: none !important;
				}
			}