/* ==========================================================================
   Think About WTE — theme CSS
   Single stylesheet, no build step. Cascade layers, tokens measured from the
   prototype oracle (rendered DOM at 1440/900/390 — see scripts/measure.mjs).
   ========================================================================== */

@layer reset, design-system, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   design-system: tokens measured from the oracle. Values are exact computed
   styles from the prototype; do not "improve" them (§5.3: permitted visual
   changes = none).
   -------------------------------------------------------------------------- */
@layer design-system {
	:root {
		/* palette (Framer token census, 18 tokens) */
		--color-ink: #191919; /* body text / dark frame */
		--color-near-ink: #1b1b1b;
		--color-navy: #16263e; /* stats band, dark panels */
		--color-slate: #263a52; /* slate-blue headings */
		--color-white: #fff;
		--color-paper: #f8f8f8; /* light page background */
		--color-mist: #e8ebf1; /* light blue-gray text on dark */
		--color-gray: #e8e8e8;
		--color-mid: #999;
		--color-blue: #3e8dfd;
		--color-sky: #a2c7f3;
		--color-orange: #ff8b4f;
		--color-flame: #fc4100;
		--color-lime: #d3f290;
		--white-a06: #ffffff0d;
		--white-a25: #ffffff40;
		--white-a60: #fff9;

		/* families (fonts.css). Switzer intentionally has NO @font-face: the
		   oracle ships it undeclared and paints the fallback; we match. */
		--font-inter: "Inter", "Inter Placeholder", sans-serif;
		--font-satoshi: "Satoshi", "Satoshi Placeholder", sans-serif;
		--font-zodiak: "Zodiak", "Zodiak Placeholder", serif;
		--font-switzer: "Switzer", "Switzer Placeholder", sans-serif;

		/* ---- type roles ------------------------------------------------------
		   Framer's text presets (export class framer-styles-preset-<id>), one
		   responsive token each: elements use
		     font: var(--type-<role>);  letter-spacing: var(--type-<role>-ls);
		   and never restate sizes per breakpoint. Each role steps at its
		   preset's own breakpoints (media blocks below :root). Values here =
		   the 1200–1599 desktop band. */
		--type-display: 800 128px/0.9em var(--font-inter); /* 158ersv  page titles, home headline, link-band titles */
		--type-display-ls: -0.03em;
		--type-heading: 700 56px/110% var(--font-inter); /* 3nqyhf   section headings ("What Is…", "WTE By The Numbers", step bands) */
		--type-heading-ls: -1px;
		--type-card-title: 800 65px/67px var(--font-inter); /* mf7uts  case-study card titles */
		--type-card-title-ls: -0.02em;
		--type-quote: 800 36px/1.1em var(--font-inter); /* 95bpww   pull quotes, feature-card titles, glow CTA */
		--type-quote-ls: -0.4px;
		--type-title: 800 32px/120% var(--font-inter); /* 12lj5ox   row / card titles */
		--type-title-ls: -0.3px;
		--type-subheading: 800 28px/130% var(--font-inter); /* 14cdnnh  card headings, CTA lines, step titles */
		--type-heading-sm: 700 22px/120% var(--font-inter); /* 9d1pfe  questions, glossary terms, rich-text h5 */
		--type-kicker: 800 20px/130% var(--font-inter); /* 1x09rnd  case-study hero kicker, step pills */
		--type-lead: 300 24px/150% var(--font-inter); /* 5e10ov    light lead copy, step numbers */
		--type-intro: 400 22px/160% var(--font-satoshi); /* fottxr  intro paragraphs */
		--type-subtitle: 400 22px/130% var(--font-satoshi); /* 171o9fj  hero subtitles, band copy */
		--type-eyebrow: 500 18px/140% var(--font-inter); /* 1cqwskc  small uppercase labels */
		--type-eyebrow-ls: 1px;
		--type-text: 400 18px/160% var(--font-inter); /* 21ogod    definitions, stat copy */
		--type-body: 400 16px/150% var(--font-inter); /* 76w99r    body copy */
		--type-body-tight: 400 16px/1.4em var(--font-inter); /* 1d9au7n  feature-card rich text */
		--type-label: 500 18px/130% var(--font-inter); /* 1tde6wz   blue card ledes, facts-card titles */
		--type-numeral: 500 96px/100% var(--font-satoshi); /* 1xl1zor  404 "Error" */
		--type-numeral-serif: 400 96px/100% var(--font-zodiak); /* u07s72  404 "404" */
		--type-footer: 400 18px/130% var(--font-satoshi); /* 7t5tvx  footer links */
		--type-nav: 400 16px/120% var(--font-satoshi); /* 1wle1yq   nav pills */
		--type-button: 500 15px/120% var(--font-satoshi); /* swuwne  pill buttons */
		--type-button-ls: 1px;
		--type-button-lg: 500 20px/120% var(--font-satoshi); /* yuunza  "Learn More" arrow link */
		--type-button-lg-ls: 0;

		/* page frame: site sits inset on a dark body w/ rounded corners
		   (oracle: 16/60 @1440, 12/48 @900, 10/32-top-only @390) */
		--frame-inset: 16px;
		--frame-radius: 60px;

		/* containers (oracle: home 1152, inner 1216/1248, quote 1000) */
		--container: 1152px;
		--container-wide: 1248px;
		--container-quote: 1000px;
	}
	/* type-role steps — Framer preset breakpoints */
	@media (min-width: 1600px) {
		:root {
			--type-lead: 300 28px/150% var(--font-inter);
		}
	}
	@media (min-width: 1800px) {
		:root {
			--type-heading: 700 64px/110% var(--font-inter);
			--type-subtitle: 400 26px/160% var(--font-satoshi);
			--type-kicker: 800 24px/130% var(--font-inter);
			--type-numeral: 500 128px/100% var(--font-satoshi);
			--type-numeral-serif: 400 128px/100% var(--font-zodiak);
		}
	}
	@media (max-width: 1279.98px) {
		:root {
			--type-card-title: 800 50px/56px var(--font-inter);
			--type-text: 400 16px/160% var(--font-inter);
		}
	}
	@media (max-width: 1199.98px) {
		:root {
			--type-heading: 700 48px/110% var(--font-inter);
			--type-heading-ls: -0.5px;
			--type-heading-sm: 700 20px/120% var(--font-inter);
			--type-lead: 300 20px/150% var(--font-inter);
			--type-intro: 400 20px/160% var(--font-satoshi);
			--type-subtitle: 400 20px/160% var(--font-satoshi);
			--type-eyebrow: 500 14px/140% var(--font-inter);
			--type-numeral: 500 80px/100% var(--font-satoshi);
			--type-numeral-serif: 400 80px/100% var(--font-zodiak);
		}
	}
	@media (max-width: 1025.98px) {
		:root {
			--type-display: 800 80px/0.9em var(--font-inter);
			--type-quote: 800 30px/1.1em var(--font-inter);
			--type-title: 800 26px/120% var(--font-inter);
			--type-title-ls: normal;
			--type-subheading: 800 24px/130% var(--font-inter);
		}
	}
	@media (max-width: 809.98px) {
		:root {
			--type-display: 800 40px/0.9em var(--font-inter);
			--type-heading: 700 32px/110% var(--font-inter);
			--type-heading-ls: 0;
			--type-heading-sm: 700 18px/120% var(--font-inter);
			--type-lead: 300 18px/150% var(--font-inter);
			--type-subtitle: 400 18px/28px var(--font-satoshi);
			--type-eyebrow: 500 13px/140% var(--font-inter);
			--type-eyebrow-ls: 0.5px;
			--type-quote: 800 22px/1.1em var(--font-inter);
			--type-title: 800 24px/120% var(--font-inter);
			--type-title-ls: -0.3px;
			--type-subheading: 800 21px/130% var(--font-inter);
			--type-card-title: 800 32px/36px var(--font-inter);
			--type-numeral: 500 48px/100% var(--font-satoshi);
			--type-numeral-serif: 400 48px/100% var(--font-zodiak);
		}
	}
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	ul,
	ol {
		margin: 0;
	}
	img,
	video {
		max-width: 100%;
		height: auto;
		display: block;
	}
	a {
		color: inherit;
	}
	button {
		font: inherit;
	}
}

@layer base {
	/* oracle :root renders text with -webkit-font-smoothing: antialiased (Framer
	   default); 'auto' on macOS gives subpixel AA and visibly heavier glyphs —
	   measured 2026-09-17: Inter 300 subtitle rows 5–21 near-white px in the
	   oracle vs 40–103 in the build. Biggest single text-diff contributor. */
	html {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		font: var(--type-body);
		color: var(--color-ink);
		background: var(--color-ink); /* dark frame; page surface is .site-frame */
		padding-bottom: var(--frame-inset); /* oracle: the ink frame continues below the footer (doc = 16 + main + footer + 16 @1440) */
	}
}

@layer layout {
	/* ------------------------------------------------------------------
	   Chrome mechanics, measured from the oracle (1440):
	   - main: rounded (60) ink card, z3, inset 16px, scrolls normally
	   - footer: sticky-bottom dock, z1 — main scrolls up to reveal it
	   - viewport frame: fixed 16px ink border w/ rounded inner corners,
	     persists on scroll (Framer used 4 fixed corner masks; one fixed
	     bordered overlay reproduces it)
	   - header bar (logo/social): absolute z9, scrolls away with the page
	   - nav pills: fixed z10, hide on scroll down (translateY), JS-toggled
	   ------------------------------------------------------------------ */

	/* Hole-punch frame: the element is the transparent rounded "hole"; the
	   spread shadow fills everything outside it (square viewport corners
	   included). A bordered element with outer border-radius leaves
	   transparent notches at the corners once content scrolls beneath. */
	.viewport-frame {
		position: fixed;
		inset: 0;
		z-index: 40;
		pointer-events: none;
		overflow: hidden; /* oracle frame = fixed 100vh overflow:hidden container; its ink never extends past the viewport (the unclipped spread shadow painted 76px below it → a 60px band in every full-page capture) */
	}
	.viewport-frame::before {
		content: "";
		position: absolute;
		inset: var(--frame-inset);
		border-radius: var(--frame-radius);
		box-shadow: 0 0 0 calc(var(--frame-inset) + 60px) var(--color-ink);
	}

	.site-main {
		position: relative;
		z-index: 3;
		margin: var(--frame-inset) var(--frame-inset) 0;
		border-radius: var(--frame-radius);
		background: var(--color-ink);
		overflow: clip;
	}

	/* White sheet cap on hero-inner pages: the oracle paints a white div with top
	   radius OVER the hero's bottom edge (1408x80 r60 @1440/1200, 876x48 r60 @900,
	   370x32 r32 @390 — measured on imagine/discover/think/resources 2026-09-17).
	   Content y is unchanged (main-inner still starts at the hero bottom) → pure
	   overlay. Case-study pages get the same via .fast-facts' negative margin. */
	.hero-inner + .main-inner {
		position: relative;
	}
	.hero-inner + .main-inner::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -80px;
		height: 80px;
		background: var(--color-white);
		border-radius: 60px 60px 0 0;
		z-index: 1;
		pointer-events: none;
	}
	@media (max-width: 1025.98px) {
		.hero-inner + .main-inner::before {
			top: -48px;
			height: 48px;
		}
	}
	@media (max-width: 809.98px) {
		.hero-inner + .main-inner::before {
			top: -32px;
			height: 32px;
			border-radius: 32px 32px 0 0;
		}
	}

	/* Home load intro ("Leave" curtain, measured 2026-09-17): fixed full-viewport
	   gradient above all chrome; wordmark 625x117 in a 625x130 overflow-hidden
	   slot centred at (720,450) @1440 (250x47 in 250x50 @390); JS drives the
	   sequence (rise into slot .75–1.37s, curtain lifts 1.7–2.4s). Only with JS,
	   never under reduced motion (the rig captures with reduced motion). */
	.intro-curtain {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 60;
		overflow: hidden;
		pointer-events: none;
	}
	.js:not(.reduced-motion) .intro-curtain {
		display: block;
	}
	.intro-curtain__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.intro-curtain__mask {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 625px;
		height: 130px;
		margin: -65px 0 0 -312px;
		overflow: hidden;
	}
	.intro-curtain__logo {
		position: absolute;
		left: 0;
		top: 5px;
		width: 625px;
		height: 117px;
		color: var(--color-mist);
		transform: translateY(140px);
	}
	.intro-curtain__logo svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	@media (max-width: 809.98px) {
		.intro-curtain__mask {
			width: 250px;
			height: 50px;
			margin: -25px 0 0 -125px;
		}
		.intro-curtain__logo {
			top: 1px;
			width: 250px;
			height: 47px;
			transform: translateY(59px);
		}
	}

	.site-header__bar {
		position: absolute;
		top: var(--frame-inset);
		left: var(--frame-inset);
		right: var(--frame-inset);
		height: 96px;
		padding: 56px 96px 0;
		z-index: 9;
		display: flex;
		justify-content: space-between;
		align-items: center; /* oracle: logo centered on the social/burger button (logo y 75 @1440, 52.5 @900, 38.5 @390) */
	}
	.site-header__logo img {
		display: block;
		width: 167px;
		height: 34px;
	}
	.site-header__social {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border-radius: 500px;
		background: var(--color-white);
		color: var(--color-ink);
	}
	.site-header__social svg {
		width: 18px;
		height: 18px;
	}

	/* hamburger (tablet/phone) */
	.site-header__burger {
		display: none;
		width: 41px;
		height: 41px;
		border-radius: 500px;
		background: var(--color-ink);
		border: 0;
		cursor: pointer;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px; /* oracle: 16x1 lines at +15/+20/+25 (5px pitch) */
	}
	.site-header__burger span {
		width: 16px;
		height: 1px;
		background: var(--color-white);
	}

	/* Pill nav (desktop): dark rounded dock, centered, hides on scroll down */
	.site-nav {
		position: fixed;
		top: 60px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		display: flex;
		gap: 4px;
		padding: 10px;
		border-radius: 500px;
		background: var(--color-ink);
		transition: transform 0.3s ease;
	}
	.site-nav.is-hidden {
		transform: translateX(-50%) translateY(-130px);
	}
	.site-nav .nav-link {
		font: var(--type-nav);
		display: block;
		padding: 14px 16px;
		border-radius: 100px;
		color: var(--color-mist);
		text-decoration: none;
		transition: background-color 0.3s ease;
	}
	.site-nav .nav-link:hover {
		background: var(--color-orange);
	}

	/* text-swap hover anatomy (nav + buttons): clip box, two stacked labels */
	.nav-link__swap {
		display: block;
		position: relative;
		overflow: hidden;
	}
	.nav-link__swap .nav-link__text {
		display: block;
		transition: transform 0.3s ease;
	}
	.nav-link__swap .nav-link__text[aria-hidden] {
		position: absolute;
		inset: 0;
		transform: translateY(100%);
		color: var(--color-white);
	}
	.nav-link:hover .nav-link__text {
		transform: translateY(-100%);
	}
	.nav-link:hover .nav-link__text[aria-hidden] {
		transform: translateY(0);
	}

	/* Mobile menu panel (tablet/phone, toggled by hamburger).
	   Oracle open state (measured 2026-09-17): panel spans logo-left → burger-right
	   (x 30–360 @390, 36–865 @900), top = burger bottom + 24 (99 @390, 113 @900),
	   ink bg, radius 32, padding 24; items = full-width 51px pills, bg white 5%,
	   radius 500, padding 16px 20px, centered white Satoshi 16/19.2, 8px gap. */
	.site-menu {
		display: none;
		position: fixed;
		top: calc(var(--frame-inset) + 36px + 41px + 24px);
		left: calc(var(--frame-inset) + 24px);
		right: calc(var(--frame-inset) + 23px);
		z-index: 11;
		flex-direction: column;
		gap: 8px;
		background: var(--color-ink);
		border-radius: 32px;
		padding: 24px;
	}
	.site-menu.is-open {
		display: flex;
	}
	.site-menu .nav-link {
		font: var(--type-nav);
		display: block;
		padding: 16px 20px;
		color: var(--color-white);
		text-align: center;
		text-decoration: none;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 500px;
	}
	/* oracle mobile-menu pills have NO hover effect (bg/text unchanged) — suppress the text roll here */
	.site-menu .nav-link:hover .nav-link__text {
		transform: none;
	}
	.site-menu .nav-link:hover .nav-link__text[aria-hidden] {
		transform: translateY(100%);
	}
	/* burger open state (oracle "Open" variant): outer lines meet at the centre
	   (a single 16x1 rule), middle line gone */
	.site-header__burger[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(5px);
	}
	.site-header__burger[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.site-header__burger[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-5px);
	}
	.site-header__burger span {
		transition:
			transform 0.3s ease,
			opacity 0.3s ease;
	}

	/* Footer: sticky reveal dock (behind main z3) */
	.site-footer {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin: 0 var(--frame-inset);
		background: var(--color-ink);
		color: var(--color-white);
		padding: 128px 64px 48px;
	}
	.site-footer__grid {
		display: flex;
		justify-content: space-between;
		gap: 64px;
	}
	.site-footer__brand {
		display: flex;
		flex-direction: column;
	} /* oracle: column stretches to the menu's height; Powered-by docks at the bottom */
	.site-footer__brand img {
		display: block;
	}
	.site-footer__brand > a > img {
		width: 250px;
		height: 51px;
	}
	.site-footer__powered {
		font: var(--type-footer);
		color: var(--white-a60);
		margin-top: auto;
		padding-top: 24px;
	}
	.site-footer__lcswma {
		margin-top: 16px;
		opacity: 0.7;
	} /* oracle: 16px below "Powered by" */
	.site-footer__label {
		font: var(--type-eyebrow);
		letter-spacing: var(--type-eyebrow-ls);
		text-transform: uppercase;
		text-align: right;
	}
	.site-footer__menu nav {
		display: flex;
		flex-direction: column;
		gap: 24.6px; /* oracle pitch = 48px exactly with 23.4 line boxes */
		align-items: flex-end;
		margin-top: 32px;
	}
	.site-footer__menu .nav-link {
		font: var(--type-footer);
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
	}
	.site-footer__menu .nav-link:hover {
		color: var(--color-white);
	}
	.site-footer__bottom {
		height: 24px;
		margin-top: 80px;
	} /* oracle: 80px gap after grid (footer inner 473 @1440) */

	/* ---- tablet band (810–1025.98) ---- */
	@media (max-width: 1025.98px) {
		:root {
			--frame-inset: 12px;
			--frame-radius: 48px;
		}
		.site-header__bar {
			height: 77px;
			padding: 36px 23px 0 24px;
		} /* oracle @900: burger y=48 x=824, logo x=36 */
		.site-header__logo img {
			width: 157px;
			height: 32px;
		}
		.site-header__social {
			display: none;
		}
		.site-header__burger {
			display: flex;
		}
		.site-nav {
			display: none;
		}
		.site-footer {
			position: relative;
			padding: 64px 48px 32px;
		} /* oracle: in-flow footer at tablet/phone (no reveal dock) */ /* oracle @900: "Pages" 50x20 */
	}

	/* ---- phone band (≤809.98) ---- */
	@media (max-width: 809.98px) {
		:root {
			--frame-inset: 10px;
			--frame-radius: 32px;
		}
		/* oracle @390: --border-bottom-width: 0 — no bottom bar at phone; push the hole's bottom edge out of the viewport, square bottom corners */
		.viewport-frame::before {
			bottom: calc(-1 * var(--frame-radius));
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
		.site-header__bar {
			height: 65px;
			padding: 24px 20px 0;
		} /* oracle @390: burger y=34 x=319, logo x=30 */
		.site-menu {
			top: calc(var(--frame-inset) + 24px + 41px + 24px);
			left: calc(var(--frame-inset) + 20px);
			right: calc(var(--frame-inset) + 20px);
		}
		.site-footer {
			padding: 64px 24px 32px;
		}
		.site-footer__powered {
			padding-top: 56px;
		} /* oracle @390: 56px under the logo */
		.site-footer__lcswma {
			opacity: 1;
		} /* oracle @390: full opacity (0.7 is desktop/tablet) */
		.site-footer__bottom {
			margin-top: 65px;
		} /* oracle @390: footer 776 tall — 121 below the last link */
		.site-footer__grid {
			flex-direction: column;
			align-items: center;
			gap: 64px;
		}
		.site-footer__brand {
			text-align: center;
		}
		.site-footer__brand img {
			margin-inline: auto;
		}
		.site-footer__label {
			text-align: center;
		}
		.site-footer__menu nav {
			align-items: center;
		}
		.site-footer__menu {
			text-align: center;
		}
	}
}

@layer components {
	/*  ===================== eyebrow =====================  */
	/* ------------------------------------------------------------------
	   eyebrow — shared label role (Inter 500 18/25.2 uppercase ls1)
	   ------------------------------------------------------------------ */
	.eyebrow {
		font: var(--type-eyebrow);
		letter-spacing: var(--type-eyebrow-ls);
		text-transform: uppercase;
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle @1100: every kicker/label is Inter 500 14/19.6 ls 1 ("Three Ways…" 436 wide,
		   stat labels, "Helpful links", "Powered by") — 18/25.2 from 1200 up (census @1100:
		   8 oracle texts at 14px vs the build's 18px) */
	}
	@media (max-width: 1025.98px) {
		/* oracle eyebrow text style scales per band on every page (type census 2026-09-17) */
	}

	/*  ===================== btn =====================  */
	/* ------------------------------------------------------------------
	   buttons — text-swap anatomy shared w/ nav (spec: 18px roll,
	   secondary = lime pill 54h, incoming label navy)
	   ------------------------------------------------------------------ */
	.btn {
		font: var(--type-button);
		letter-spacing: var(--type-button-ls);
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		text-transform: uppercase;
	}
	.btn--secondary {
		background: var(--color-lime);
		color: var(--color-navy);
		border-radius: 500px;
		padding: 18px 30px;
	}
	.btn--primary-inverse {
		background: var(--color-white);
		color: var(--color-ink);
		border-radius: 500px;
		padding: 18px 30px;
	}
	.btn__swap {
		display: block;
		position: relative;
		height: 18px;
		overflow: hidden;
	}
	.btn__swap .btn__text {
		display: block;
		transition: transform 0.3s ease;
	}
	.btn__swap .btn__text[aria-hidden] {
		position: absolute;
		inset: 0;
		transform: translateY(100%);
	}
	.btn--secondary .btn__text[aria-hidden] {
		color: var(--color-navy);
	}
	.btn:hover .btn__text {
		transform: translateY(-100%);
	}
	.btn:hover .btn__text[aria-hidden] {
		transform: translateY(0);
	}
	/* oracle: btn at 1760 */
	/* Learn More = "inverse" text link w/ round icon (not a pill) */
	.btn--inverse {
		font: var(--type-button-lg);
		letter-spacing: var(--type-button-lg-ls);
		background: none;
		color: var(--color-white);
		text-transform: none;
	}
	.btn--inverse .btn__swap {
		height: 24px;
	}
	.btn--inverse .btn__text[aria-hidden] {
		color: var(--color-blue);
	}
	/* arrow-in-circle icon: grows 48→54, arrow rotates −45° + scales, recolors blue */
	.btn__icon {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		border-radius: 500px;
		transition:
			width 0.3s ease,
			height 0.3s ease;
	}
	.btn__icon svg {
		width: 20px;
		height: 20px;
		transition:
			transform 0.3s ease,
			color 0.3s ease;
	}
	.btn--inverse:hover .btn__icon {
		width: 54px;
		height: 54px;
		border-color: var(--color-blue);
	}
	.btn--inverse:hover .btn__icon svg {
		color: var(--color-blue);
		transform: rotate(-45deg);
	}
	/* "Learn More" arrow-circle button (home What-Is panel — the only arrow
	   button on the site). Oracle hover, sampled live 2026-09-25: the ring
	   (Framer ::after 1px border) turns rgb(62,141,253) with the text; the
	   arrow only ROTATES −45° (stays 20px — the build also scaled it 1.4);
	   circle 48→54, text slides 24px; all over ~0.6s easeOutCubic (ring
	   colour progress .30/.59/.76/.87/.95 at 94/170/245/321/434ms). */
	.btn--inverse .btn__text,
	.btn--inverse .btn__icon,
	.btn--inverse .btn__icon svg {
		transition-duration: 0.6s;
		transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	.btn--inverse .btn__icon {
		transition-property: width, height, right, border-color;
	}

	/*  ===================== hero-home =====================  */
	/* ------------------------------------------------------------------
	   hero-home — video panel (100vh; 85vh @390) + What-is-WTE panel
	   sharing one bg stack (video + gradient png op .9 + shade overlays)
	   ------------------------------------------------------------------ */
	.hero-home {
		position: relative;
		overflow: clip;
		background: var(--color-ink);
	}
	.hero-home__bg {
		position: absolute;
		inset: 0;
	}
	/* Home hero bg stack = oracle "BG" (1696x1945 @1728): the video is a
	   full-VIEWPORT box, position sticky top 0, inside the tall bg layer — it
	   stays pinned behind the What-Is panel for (bg height − 100vh) px of
	   scroll (982 @1728x963, 928 @1440x900, 713 @390x844). The build's
	   absolute 100vh video ended at the fold → the "hard line" on scroll. */
	.hero-home__video {
		width: 100%;
		object-fit: cover;
		position: sticky;
		top: 0;
		left: auto;
		display: block;
		height: 100vh;
	}
	/* ---------------- home (scratch/overrides/home.css) ---------------- */
	/* --------------------------------------------------------------------------
	   hero-home — bg stack (main.css @layer components, "hero-home — video panel")
	   -------------------------------------------------------------------------- */
	/* oracle gradient png: object-position "23.7% 55%" at every band (probe imgs
	   @1440/1200/900/390); the build's 50% 50% crops a different (bluer) slice of
	   the 1440x778 png stretched to cover 1408x1828 */
	/* oracle gradient layer: op .9 AND mask linear-gradient(rgba(0,0,0,.8) 16%,
	   #000 100%) at every band — without the mask the build's overlay was
	   ~25% heavier at the top (video read darker/muddier) */
	.hero-home__overlay img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.9;
		object-position: 23.7% 55%;
		-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.8) 16%, #000 100%);
		mask-image: linear-gradient(rgba(0, 0, 0, 0.8) 16%, #000 100%);
	}
	.hero-home__shade {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: linear-gradient(rgba(0, 0, 0, 0.4), #000);
		opacity: 0.3;
	}
	/* --------------------------------------------------------------------------
	   hero-home — headline block ("Top")
	   -------------------------------------------------------------------------- */
	/* oracle "Top" @1440/1200: 900 tall, padding 64 0 0, justify center; the three
	   lines stack with gap 5 (text y 320.2 / 440.4 / 560.6 → pitch 120.2 = 115.2+5).
	   Build had margin-top 142 + gap 40 + padding-bottom 192 → line 1 at 228 */
	.hero-home__top {
		position: relative;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 64px 0 0;
	}
	/* oracle bolt img 300x493.75 at y 251.1 @900vh = hero top 16 + 235.1, i.e. its
	   centre sits at 64 + (100vh − 64)/2 = 50% + 32px of the Top box (the capture
	   rig runs a 960 viewport, so keep it vh-relative rather than a fixed px top) */
	.hero-home__bolt {
		position: absolute;
		left: 50%;
		width: 300px;
		opacity: 0.2;
		top: calc(50% + 32px);
		transform: translate(-50%, -50%);
	}
	/* bolt: inline svg left a 6px baseline gap (box 500 vs 494) → the centred
	   bolt sat 3px high at every viewport; oracle img is a block */
	.hero-home__bolt svg {
		width: 100%;
		height: auto;
		display: block;
	}
	.hero-home__headline {
		font: var(--type-display);
		letter-spacing: var(--type-display-ls);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: var(--color-white);
		white-space: nowrap;
		gap: 5px;
		margin-top: 0;
	}
	/* --------------------------------------------------------------------------
	   hero-home — What-Is panel ("Content")
	   -------------------------------------------------------------------------- */
	/* oracle "Content" @1440: padding 80 128 160 (heading box y 996, panel 928 tall);
	   build had 100 top (heading at 1016) */
	.hero-home__panel {
		position: relative;
		display: flex;
		gap: 200px; /* oracle: body top 1076, btn block closes 96 above panel end */
		padding: 80px 128px 160px;
	}
	.hero-home__panel-left {
		position: relative;
		flex: none;
	}
	.hero-home__panel-heading {
		font: var(--type-heading);
		letter-spacing: var(--type-heading-ls);
		color: var(--color-white);
	}
	/* oracle scribble png renders 258x182 (natural 258x181) at (124, 1056.75) @1440 —
	   heading box (144, 996) → left −20 / top 61 (theme already has the offsets);
	   build served the 300x212 'medium' size */
	.hero-home__scribble {
		position: absolute;
		top: 61px;
		left: -20px;
		opacity: 0.25;
		pointer-events: none;
		width: 258px;
		height: 182px;
	}
	.hero-home__panel-body p {
		font: var(--type-lead);
		color: var(--color-white);
	}
	.hero-home__panel-body p + p {
		margin-top: 20px;
	}
	/* oracle "Overlay Bottom": flat rgb(25,25,25) op .2 over the 100vh video area
	   @1440/1200 (leaf-dump y16 1408x900); absent @900/390 */
	.hero-home__bg::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #191919;
		opacity: 0.2;
		pointer-events: none;
	}
	/* oracle panel "Overlay": y 916 (=100vh), 1080 tall, linear-gradient(#000 0%,
	   rgba(0,0,0,.4) 100%), op .4 @1440/1200 (.5 @900, .8 @390 from y 775 = 85vh) —
	   the build had no darkening over the What-Is panel at all */
	.hero-home__top::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 1080px;
		background: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
		opacity: 0.4;
		pointer-events: none;
	}
	/* "Learn More" inverse link — oracle anatomy: <a> 172.6x24 (text 102.6 + 70 right
	   pad), icon wrapper 48x48 absolutely at right:0 / translateY(-50%), 1px white
	   border, radius 500; the link sits 48 under the copy (right Grid gap 48:
	   copy ends 1612, link y 1660 @1440). Build: 48-tall inline-flex + 68 margin */
	.hero-home__panel-right .btn--inverse {
		position: relative;
		display: flex; /* block-level: as inline-flex the line-box strut made the panel 929 (oracle 928) */
		width: max-content;
		height: 24px;
		padding-right: 70px;
		gap: 0;
		margin-top: 48px;
	}
	.hero-home__panel-right .btn__icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.hero-home__video--phone {
		display: none;
	}
	/* oracle ring grows 2px left / 4px right (1088.6–1136.6 → 1086.6–1140.6
	   @1728); the build's right:0 anchor grew it 6px left */
	.hero-home__panel-right .btn--inverse:hover .btn__icon {
		right: -4px;
	}
	@media (min-width: 1026px) {
		/* home, whole desktop band (width sweep 1280…1920):
	   - What-Is panel is content-height everywhere ≥1026 (892 @1512, 982
	     @1728); the 928 stand-in made the hero 36px tall at 1512
	   - outro "Powered by" container (mw 1000) is centred — the build
	     left-aligned it whenever the content box was 1000–1152 wide (39px off
	     @1366); the ≥1440 rule above already centred it */
		.hero-home__panel {
			min-height: 0;
		}
	}
	@media (min-width: 1440px) {
		/* body copy: oracle p is 1286 wide with text-wrap: balance at 1680/1920
		   (widest line 1134 @1680 / 1081 @1920 inside the 1286 box); the theme only
		   balances it in the 1100 sub-band */
		/* ---- hero-home panel (@layer components "hero-home", + exceptions
		   "hero-home — bg stack") — oracle Bottom mw=1600 gap 200, two equal
		   columns: 476|476 @1440 (144+1152), 596|596 @1680 (144+1392), 700|700
		   @1920 (160+1600, i.e. centred inside the 1632 box) */
		/* scribble is anchored to the heading's BOTTOM: img bottom − heading box
		   bottom = 58.8 at every width (1440: 1238.8−1180 [3 lines]; 1680:
		   1177.2−1118.4 [2 lines, "Waste-to-Energy?" fits the 596 column]; 1920:
		   1194.8−1136 [2 × 70.4]). The theme's top:61 only equals the 3-line case;
		   let the left column hug its heading and pin the img to its bottom */
		.hero-home__panel {
			justify-content: center;
			align-items: flex-start;
		}
		.hero-home__panel-left,
		.hero-home__panel-right {
			width: calc(50% - 100px);
			max-width: 700px;
		}
		.hero-home__scribble {
			top: auto;
			bottom: -59px;
		}
	}
	@media (min-width: 1600px) {
		/* ---- ≥1600: Inter 300 body preset (export preset-5e10ov: "max-width:1599px
	   → 24px/150%", base 28px/150%). Confirmed by text-style @1680: oracle trio
	   "01" 28/42 (build 24/36), discover "01" 28/42, lancaster hero "Learn about"
	   28/42, 404 copy 28/42. */
	}
	@media (min-width: 1800px) {
		/* h1 preset-3nqyhf: 56/110% −1 → 64/110% −1 — "What Is" 243x77 @1920,
		   "WTE By" 252x77, lancaster "Step 1:" 64/70.4 (build 56/61.6) */
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* oracle @1100/1200/1300/1400: Content pad 80 80 160 (a step, not fluid — 128 only
		   at ≥1440) and the two columns simply share the row: (W − 32 − 160 − 200)/2 →
		   354 @1100, 404 @1200, 476 @1440. The theme's 13.33vw−64 pads (96 @1200) and
		   fixed 30vw+44 columns squeezed the right column (372 @1200) and overflowed @1100 */
		.hero-home__panel {
			padding-left: 80px;
			padding-right: 80px;
		}
		/* oracle panel is content-height: 892 @1100, 832 @1160, 1036 @1200 */
		.hero-home__panel-left,
		.hero-home__panel-right {
			width: auto;
			flex: 1 1 0;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle 1026–1199.98 (probed 1100/1120/1160/1199): the What-Is panel drops to the
		   tablet type — heading Inter 700 48/52.8 ls −0.5, copy Inter 300 20/30 — and the
		   scribble sits at (76, 1030.4) vs heading box (96, 992) → top 38.4. 56/24 from 1200 up */
		.hero-home__scribble {
			top: 38.4px;
		}
	}
	@media (min-width: 810px) and (max-width: 1025.98px) {
		/* home hero panel @tablet: oracle content x=60 (12 frame + 48 pad) — the desktop 128 was leaking through (leaf-dump @900 2026-09-17) */
		.hero-home__panel {
			padding-left: 48px;
			padding-right: 48px;
		}
	}
	@media (max-width: 1025.98px) {
		.hero-home__bolt {
			width: 240px;
			top: 50%;
		}
		.hero-home__panel {
			min-height: 774px;
			flex-direction: column;
			gap: 16px;
		}
		.hero-home__panel-left {
			width: 780px;
			max-width: 100%;
		}
		.hero-home__panel-right {
			width: 600px;
			max-width: 100%;
		}
		.hero-home__bg::after {
			display: none;
		}
		.hero-home__top::after {
			opacity: 0.5;
		}
		/* oracle @900: Overlay y912 h1080 op .5 */
		.hero-home__shade {
			opacity: 0.5;
		}
		/* oracle @900: Top pad 0, headline 80/72 gap 5 → block 226 tall centred in
		   100vh → line 1 at y 349; bolt 240x395 at y 264.5 = centred (12 + (900−395)/2) */
		.hero-home__top {
			padding: 0 64px;
		}
		/* oracle @900: scribble at (40, 973.6) vs heading box (60, 992) → top −18.4 */
		.hero-home__scribble {
			top: -18.4px;
		}
	}
	@media (max-width: 809.98px) {
		.hero-home__video,
		.hero-home__shade {
			height: 85vh;
		}
		/* oracle @390: Top is a 90vh box starting 40 below the hero (y 50..860 @900vh)
		   with the 40/36 lines (gap 10 → 128 tall) centred in it → line 1 at y 391,
		   bolt 115x189.3 centred at the same point (y 360.4 = 10 + 40 + 45vh − 94.65).
		   The build's Top stays 85vh (10..775): pad-top 5vh+80 (=125 @900vh) puts the
		   flex centre at 40 + 45vh → line 1 at 10 + 125 + (640−128)/2 = 391 */
		.hero-home__top {
			min-height: 85vh;
			padding: calc(5vh + 80px) 40px 0;
		}
		.hero-home__headline {
			gap: 10px;
		}
		.hero-home__bolt {
			width: 115px;
			top: calc(45vh + 40px);
		}
		/* oracle @390: Content pad 40 24 120, Bottom column gap 20 (heading 815..885.4,
		   body at 905.4); build had gap 40 / pad-bottom 56 */
		.hero-home__panel {
			min-height: 848px; /* oracle: heading→body 40 @390 */
			gap: 20px;
			padding: 40px 24px 120px;
		}
		.hero-home__top::after {
			opacity: 0.8;
		}
		/* oracle @390: scribble 130x91.7 at (179, 826.7) — sits right of "What Is";
		   heading box (34, 815) → left 145 / top 11.7 */
		.hero-home__scribble {
			width: 130px;
			height: 91.7px;
			top: 11.7px;
			left: 145px;
		}
		.hero-home__video--wide {
			display: none;
		}
		.hero-home__video--phone {
			display: block;
		}
		/* oracle @390: video container 370x844 = 100vh (only the Top/shade is 85vh) */
		.hero-home__video {
			height: 100vh;
		}
		/* oracle @390 top overlay (ckm12z) op .8 — the exceptions' tablet rule
		   (≤1025.98 → .5) leaked to phone: upper hero lighter than the .8 panel
		   overlay below → a hard seam at 85vh */
		.hero-home__shade {
			opacity: 0.8;
		}
	}

	/*  ===================== video-panel =====================  */
	/* ------------------------------------------------------------------
	   video-panel — optional label + intro copy + responsive 16:9 Vimeo
	   (the oracle's fixed 1600px iframe is an export artifact). Three
	   styles (editor option "Style" → .video-panel--<style>):
	     opening  video only, right under the home hero: tight top, white
	              rounded cap over the hero's bottom edge, 1600 container
	     section  label + intro paragraph + video, first block under a page
	              hero (Discover): 40 gaps, 1400 container
	     feature  small Switzer label over a large video, roomy top
	              (Harrisburg): 128 above, 48 gap, 1400 container
	   The unmodified rules below are the opening geometry; the other two
	   styles override them.
	   ------------------------------------------------------------------ */
	.video-panel {
		position: relative;
		background: var(--color-white);
		padding: 32px 128px 0;
	}
	.video-panel--opening::before {
		content: "";
		position: absolute;
		top: -80px;
		left: 0;
		right: 0;
		height: 80px;
		border-radius: var(--frame-radius) var(--frame-radius) 0 0;
		background: var(--color-white);
	}
	.video-panel__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}
	.video-panel .eyebrow {
		text-align: center;
	}
	.video-panel__body {
		font: var(--type-intro);
		color: var(--color-ink);
		text-align: center;
	}
	.video-panel__frame {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 20px;
		overflow: clip;
		/* no bg: the oracle's iframe area paints nothing behind the embed */
	}
	.video-panel__frame iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
	/* section style: intro paragraph balanced in an 800 column */
	.video-panel--section .video-panel__body {
		max-width: 800px;
		text-wrap: balance;
	}
	/* feature style: full-width 1248×702 embed under a Switzer label (oracle
	   pad 128/80/32, gap 48). Switzer has no @font-face in the oracle either —
	   it paints the fallback sans, as live does. */
	.video-panel.video-panel--feature {
		padding: 128px 80px 32px;
	}
	.video-panel--feature .video-panel__container {
		gap: 48px;
	}
	.video-panel--feature .eyebrow {
		font: 500 16px/16px var(--font-switzer);
		letter-spacing: 1px;
		color: var(--color-ink);
	}
	/* section style: label is ink (oracle rgb(25,25,25) at every band) */
	.video-panel--section .eyebrow {
		color: var(--color-ink);
	}
	@media (min-width: 1026px) {
		.video-panel.video-panel--section {
			padding: 40px 96px 0;
		}
		.video-panel--section .video-panel__container {
			gap: 40px;
		}
	}
	@media (min-width: 1440px) {
		/* containers: section/feature cap at 1400 (iframe 1400x787 @1920),
		   opening at 1600 (iframe 1600x900 @1920) */
		.video-panel--section .video-panel__container,
		.video-panel--feature .video-panel__container {
			max-width: 1400px;
			margin: 0 auto;
		}
		.video-panel--opening .video-panel__container {
			max-width: 1600px;
			margin: 0 auto;
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* oracle @1200: Section Services pad 32 80 192 → 1008-wide frame, iframe 567 tall;
		   theme's 13.33vw−64 (=96) gave 976/549 */
		.video-panel {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* oracle Services Container: x 96 w 1008 @1200, x 96 w 1087 @1279,
		   x 112 w 1056 @1280 → side pad steps 80 → 96 at 1280 (build 96 all
		   the way). Fixes the 16:9 iframe: 1008×567 (build 976×549 → −18). */
		.video-panel.video-panel--section {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (max-width: 1025.98px) {
		.video-panel {
			padding: 24px 48px 0;
		}
		.video-panel--opening::before {
			top: -48px;
			height: 48px;
		}
		.video-panel__container {
			gap: 24px;
		}
		.video-panel.video-panel--section {
			padding: 96px 64px 0;
		}
		.video-panel.video-panel--feature {
			padding: 128px 48px 32px;
		}
		/* section style @900/@390: label→intro 40, intro→iframe 40 */
		.video-panel--section .video-panel__container {
			gap: 40px;
		}
	}
	@media (max-width: 809.98px) {
		.video-panel {
			padding: 16px 24px 0;
		}
		.video-panel--opening::before {
			top: -32px;
			height: 32px;
		}
		.video-panel.video-panel--section {
			padding: 64px 30px 0;
		}
		.video-panel--section .video-panel__frame {
			border-radius: 10px;
		}
		.video-panel.video-panel--feature {
			padding: 128px 24px 32px;
		}
		.video-panel--feature .eyebrow {
			font-size: 10px;
			line-height: 10px;
			letter-spacing: 0.63px;
		}
	}

	/*  ===================== intro-trio =====================  */
	/* ------------------------------------------------------------------
	   intro-trio — kicker + 3 numbered rows w/ hairline rules
	   ------------------------------------------------------------------ */
	.intro-trio {
		background: var(--color-white);
		padding: 96px 128px 192px;
	}
	.intro-trio__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 128px;
	}
	.intro-trio .eyebrow {
		color: var(--color-navy);
		text-align: center;
	}
	.intro-trio__rows {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 64px;
		counter-reset: trio;
	}
	.intro-trio__row {
		display: flex;
		padding-top: 64px;
		border-top: 1px solid var(--color-gray);
	}
	.intro-trio__row:first-child {
		border-top: 0;
		padding-top: 0;
	}
	.intro-trio__row::before {
		font: var(--type-lead);
		content: "0" counter(trio);
		counter-increment: trio;
		width: 80px;
		flex: none;
		color: var(--color-orange);
	}
	.intro-trio__title {
		font: var(--type-title);
		letter-spacing: var(--type-title-ls);
		flex: none;
		text-transform: uppercase;
		color: var(--color-slate);
	}
	.intro-trio__body p {
		font: var(--type-intro);
		color: var(--color-ink);
	}
	@media (min-width: 1026px) {
		/* oracle: Services Container gap 128 between the Vimeo frame and the kicker
		   (iframe bottom 2524 → "Three Ways" 2652 @1440; 2551 → 2679 @1200); theme 96 */
		.intro-trio {
			padding-top: 128px;
		}
	}
	@media (min-width: 1440px) {
		/* oracle @1440 row: number 80 + gap 64 + [title 500 | gap 8 | copy 500] = 1152 →
		   copy at x 796 (build 852: 64 between title and copy → an extra wrapped line).
		   Same anatomy the theme already applies in the 1026–1439.98 sub-band */
		.intro-trio__row {
			gap: 8px;
		}
		.intro-trio__row::before {
			margin-right: 56px;
		}
		/* ---- intro-trio (@layer components "intro-trio" + exceptions
		   "intro-trio — desktop") — oracle Services Container mw=1600 (160+1600
		   @1920); row = number 80 + 64 | title | 8 | copy: title/copy 500 @1440,
		   724 @1920 (304+724 / 1036+724) → (W − 152) / 2 */
		.intro-trio__container {
			max-width: 1600px;
			margin: 0 auto;
		}
		.intro-trio__title,
		.intro-trio__body {
			width: calc(50% - 76px);
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* home fluid desktop sub-band (oracle @1200: panel cols 404/gap 200/
	   pads 96, trio cols 428 w/ 8px title→body gap, pads 80) */
		.intro-trio__row {
			gap: 8px;
		}
		.intro-trio__row::before {
			margin-right: 56px;
		}
		/* oracle @1100/1200: Section Services pad 80 → trio row 908/1008 wide: number 80 +
		   gap 64 + [title | 8 | copy] with the two columns sharing the rest (378 @1100,
		   428 @1200). Theme's 20vw−160 pad (60 @1100) and 30vw+68 columns overflowed */
		.intro-trio {
			padding-left: 80px;
			padding-right: 80px;
		}
		.intro-trio__title,
		.intro-trio__body {
			width: auto;
			flex: 1 1 0;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle @1100 trio row: number Inter 300 20/30, copy Satoshi 20/32 (22/35.2 @1200+) */
	}
	@media (min-width: 810px) and (max-width: 1025.98px) {
		/* oracle @900: number column is Inter 300 20/30 in an 80 box, row gap 48 → copy at
		   x 188 (60+80+48); title→copy 16. Build's 24/36 number stretched the flex line
		   to 36 (copy +5 per row → section +15) and margin-left 140 put the copy at x 200 */
		.intro-trio__body {
			margin-left: 128px;
		}
	}
	@media (max-width: 1025.98px) {
		.intro-trio {
			padding: 96px 48px 96px;
		}
		.intro-trio__container {
			gap: 96px;
		}
		.intro-trio__row {
			gap: 16px 48px;
			flex-wrap: wrap;
		}
		/* oracle @900: h3→copy 16 */
		.intro-trio__title {
			width: 652px;
		}
		.intro-trio__body {
			width: 652px;
		}
	}
	@media (max-width: 809.98px) {
		.intro-trio {
			padding: 64px 24px;
		}
		.intro-trio__container {
			gap: 64px;
		}
		.intro-trio .eyebrow {
			text-wrap: balance;
		}
		.intro-trio__rows {
			gap: 48px;
		}
		.intro-trio__row {
			flex-direction: column;
			gap: 12px;
			padding-top: 48px;
		}
		/* oracle @390: rule sits 48/48 */
		.intro-trio__title {
			width: 100%;
		}
		.intro-trio__body {
			width: 100%;
			margin-left: 0;
		}
		/* oracle phone: What-is panel is 848 (40/56 pads, 32px heading,
		   18/27 body); the Vimeo panel is ABSENT — trio carries the white
		   sheet cap and a 262 head (page-scoped in exceptions) */
		.intro-trio__row::before {
			margin-bottom: 36px;
		}
	}

	/*  ===================== link-bands =====================  */
	/* ------------------------------------------------------------------
	   link-bands — stacked full-bleed rounded link cards (100vh desktop)
	   ------------------------------------------------------------------ */
	.link-bands {
		background: var(--color-white);
	}
	.link-bands__band {
		position: relative;
		display: block;
		height: 100vh;
		border-radius: var(--frame-radius);
		overflow: clip;
		text-decoration: none;
		color: var(--color-white);
	}
	.link-bands__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.link-bands__image {
		position: absolute;
		inset: 0;
	}
	.link-bands__overlay {
		position: absolute;
		inset: 0;
		background: var(--color-ink);
		opacity: 0.6;
	}
	.link-bands__content {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 112px 112px 96px;
	}
	/* --------------------------------------------------------------------------
	   link-bands (main.css "link-bands — stacked full-bleed rounded link cards")
	   -------------------------------------------------------------------------- */
	/* oracle @1440 case-study cards: eyebrow (6595.2, 38.4) and title share a gap-0
	   "Grid" (title box starts 6633.6); only the body sits 16 below (Top gap 16).
	   Build had 16 between all three → title/body 16 low on the two case-study cards */
	.link-bands__top {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.link-bands__eyebrow {
		font: var(--type-title);
		letter-spacing: var(--type-title-ls);
		text-transform: uppercase;
	}
	.link-bands__title {
		font: var(--type-display);
		letter-spacing: var(--type-display-ls);
	}
	.link-bands__body {
		font: var(--type-subtitle);
		margin-top: 16px;
	}
	.link-bands__bottom {
		height: 34px;
	}
	.link-bands__cta {
		display: none; /* oracle Bottom row is an empty spacer */
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* oracle @1200: card Content pad 112 80 96 (copy x=96); build 112 */
		.link-bands__content {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle @1100: link-band card copy Satoshi 400 20/32 (22/28.6 @1200+) */
	}
	@media (max-width: 1025.98px) {
		.link-bands__band {
			height: 721px;
		}
		.link-bands__content {
			padding: 80px 80px 64px;
		}
	}
	@media (max-width: 809.98px) {
		.link-bands__band {
			height: 360px;
		}
		.link-bands__content {
			padding: 48px 30px 40px;
		}
		.link-bands__body {
			display: none; /* oracle drops descriptions at phone */
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		/* link-bands scroll-pin (the card-deck effect, decoded from live oracle):
	   each band scrolls until its top hits VIEWPORT 0, pins there while the
	   next slides over it, and the whole stack releases together at the
	   section end = position:sticky top:0 scoped to the section. Verified at
	   1440 AND 390 in the oracle (pins at all widths). Lives in exceptions so
	   it outranks the base position:relative regardless of source order.
	   Motion-preference gated: the capture rig emulates reduced motion, where
	   the oracle's JS pin is also inert — keeps captures comparable. */
		.link-bands__band {
			position: sticky;
			top: 0;
		}
	}

	/*  ===================== hero-inner =====================  */
	/* ------------------------------------------------------------------
	   hero-inner — page title + subtitle over a background image. Desktop
	   height is content-driven (220 + title/16/subtitle + 200: 580 for one
	   line of each, 608 when the subtitle wraps); tablet 540 and phone 500,
	   content centred. Title and subtitle are balanced (Framer presets).
	   The image fills the hero anchored top-centre; art direction per band
	   comes from the tablet/phone crop fields (<picture> in the template).
	   Scroll: the whole hero moves down 600px over the page's progress (JS
	   data-scroll-y), so it sits at z −1 inside .site-main's stacking
	   context (z 3) and the white body slides up over it.
	   ------------------------------------------------------------------ */
	.hero-inner {
		position: relative;
		border-radius: var(--frame-radius) var(--frame-radius) 0 0;
		overflow: clip;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 220px 128px 0;
		z-index: -1;
	}
	.hero-inner__bg {
		position: absolute;
		inset: 0;
	}
	.hero-inner__bg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
	/* "Image focus" option: which side survives when a narrow screen crops
	   the image (Discover: left — keeps the orange glow at tablet width) */
	.hero-inner--focus-left .hero-inner__bg img {
		object-position: 0 0;
	}
	.hero-inner--focus-right .hero-inner__bg img {
		object-position: 100% 0;
	}
	.hero-inner__container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		max-width: 1152px;
		margin: 0 auto;
		padding-bottom: 200px;
	}
	.hero-inner__title {
		font: var(--type-display);
		letter-spacing: var(--type-display-ls);
		color: var(--color-white);
		text-align: center;
		text-wrap: balance;
	}
	.hero-inner__subtitle {
		font: var(--type-subtitle);
		color: var(--color-white);
		text-align: center;
		text-wrap: balance;
	}
	@media (min-width: 1440px) {
		/* oracle hero Container mw=1600: 144+1152 @1440, 144+1392 @1680, 160+1600 @1920 */
		.hero-inner__container {
			max-width: 1600px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* fluid desktop sub-band (oracle @1200: side pads 100) */
		.hero-inner {
			padding-left: calc(11.6667vw - 40px);
			padding-right: calc(11.6667vw - 40px);
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle @1100: side pads step to 100 (Container x116 w868), not the
		   11.6667vw−40 interpolation (88.3) */
		.hero-inner {
			padding-left: 100px;
			padding-right: 100px;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle centres the container in the full 540px box (y214 @900) */
		.hero-inner {
			height: 540px;
			justify-content: center;
			padding: 0 64px;
		}
		.hero-inner__container {
			max-width: 748px;
			gap: 8px;
			padding-bottom: 0;
		}
	}
	@media (max-width: 809.98px) {
		/* centred at phone too (container y214 @390 in a 500px box) */
		.hero-inner {
			height: 500px;
			justify-content: center;
			padding: 0 24px;
		}
		.hero-inner__container {
			max-width: 322px;
			padding-bottom: 0;
		}
	}

	/*  ===================== feature-cards =====================  */
	/* ------------------------------------------------------------------
	   feature-cards — alternating 5:6 image / rich-text cards. Every card
	   has the same anatomy and rhythm (odd cards put the image on the
	   right); formatting inside a card (indents, a centred line) is the
	   editor's, from the toolbar.
	   ------------------------------------------------------------------ */
	.feature-cards {
		background: var(--color-white);
		padding: 40px 96px 0;
	}
	.feature-cards__container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 96px;
	}
	.feature-cards .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	/* gaps @≥1280 — oracle: Column gap 40 (card pitch 640 = 600+40 @1440),
	   image↔text 80 */
	.feature-cards__grid {
		width: 100%;
		max-width: 1216px;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	/* --------------------------------------------------------------------------
	   FEATURE CARDS (main.css: "feature-cards — alternating 5:6 image / rich text")
	   Oracle anatomy (identical at every width, only numbers change):
	     Column (gap G_col) > Card (flex, align-items:center, gap G_card, no padding)
	       > TextBlock (padding 30/0/30; gap G_txt)
	           > [title, lede] (gap 10)  > h5 / p-groups (p margin-top 14)
	       > Image (500x600 ≥1280; 400x480 1026–1279.98; 100% x 5:6 ≤1025.98)
	   -------------------------------------------------------------------------- */
	/* card shell — oracle: card padding 0, ai=center at 1440/1200/900/390
	   (card 1 image y785.6 = column top @1440; text block centred: card-1 text
	   530.1 tall → top 820.6 = 785.6 + (600-530.1)/2) */
	.feature-cards__card {
		display: flex;
		padding: 0;
		align-items: center;
		gap: 80px;
	}
	.feature-cards__card:nth-child(odd) {
		flex-direction: row-reverse;
	}
	.feature-cards__image {
		position: relative;
		width: 500px;
		flex: none;
		aspect-ratio: 5 / 6;
		border-radius: 48px;
		overflow: clip;
		margin-top: 0;
	}
	/* absolute-fill so the photo's intrinsic ratio can't distort the 5:6 tile */
	.feature-cards__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* oracle text order is title → lede → body; template emits the lede
	   first, so content is a column with explicit order */
	/* replaces theme's 14px nudge @1200 (oracle centres the tile) */
	/* text block padding 30/0/30 (oracle framer-4jip1p) */
	.feature-cards__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 30px 0;
	}
	.feature-cards__title {
		font: var(--type-quote);
		letter-spacing: var(--type-quote-ls);
		order: 1;
		text-transform: uppercase;
		color: var(--color-ink);
		text-wrap: balance;
	}
	/* text rhythm @≥1026 — oracle: title→lede 10 (framer-12p2g8o gap=10);
	   text-block gap 24 (lede→h5 24, h5→p 24 on cards 1/5/7; lede→p 24 on 2/3/6);
	   p→p 14. Build had 12 / 24+24 / 14. */
	.feature-cards__eyebrow {
		font: var(--type-label);
		order: 2; /* h6 lede */
		color: var(--color-blue);
		margin-top: 10px;
	}
	.feature-cards__body {
		order: 3;
		margin-top: 24px;
	}
	.feature-cards__body h5 {
		font: var(--type-heading-sm);
		color: var(--color-slate);
	}
	.feature-cards__body p {
		font: var(--type-body-tight);
		color: var(--color-slate);
		margin-top: 14px;
	}
	.feature-cards__body a {
		color: #0099ff;
		text-decoration: none;
	}
	
	.feature-cards__body h5 + p {
		margin-top: 24px;
	}
	.feature-cards__body > :first-child {
		margin-top: 0;
	}
	/* Editor indents (Formats → Indented / Indented more): oracle 40px; the
	   second level adds five pre-wrap spaces (22.5px at 16px = 1.40625em). */
	.feature-cards__body .is-indent {
		padding-left: 40px;
	}
	.feature-cards__body .is-indent-2 {
		padding-left: calc(40px + 1.40625em);
	}
	
	@media (min-width: 1440px) {
		/* ---- feature-cards (@layer components "feature-cards") ----------------
		   oracle Section Services Container mw=1400: 112+1216 @1440, 140+1400
		   @1680, 260+1400 @1920 (build grid capped 1216). Card = content (flex 1)
		   + 80 gap + 500 image: content 820 @1920 (oracle 260+820 / img 1160+500) */
		.feature-cards__grid {
			max-width: 1400px;
		}
	}
	@media (min-width: 1280px) and (max-width: 1439.98px) {
		/* fluid desktop, ≥1280 half — oracle @1300/@1400: tile 500x600, Column gap 40 */
		.feature-cards__image {
			width: 500px;
		}
		.feature-cards {
			padding-left: 96px;
			padding-right: 96px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* fluid desktop, <1280 half — oracle @1200/@1279: tile 400x480 (fixed, not
	   fluid), Column gap 60 (card1 785.6+552.5 → card2 1398.1), card gap 60 on
	   EVERY card incl. card 1; text col 548 @1200 = 1008-60-400 */
		.feature-cards__grid {
			gap: 60px;
		}
		.feature-cards__card {
			gap: 60px;
		}
		.feature-cards__image {
			width: 400px;
		}
		/* Fluid→stepped: the July pass interpolated section pads linearly between
	   its 1200 and 1440 samples (e.g. feature-cards 6.6667vw); Framer uses
	   FIXED pads that step at variant breakpoints. imagine feature grid:
	   80 @1026–1279.98, 96 ≥1280 (oracle 82gf0v; build was 82.7→93.3, i.e.
	   up to 11px off anywhere in 1200–1439 — width sweep 1240…1439). */
		.feature-cards {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (max-width: 1025.98px) {
		.feature-cards {
			padding: 96px 48px 0;
		}
		.feature-cards__container {
			gap: 48px;
		}
		.feature-cards__card,
		.feature-cards__card:nth-child(odd) {
			flex-direction: column;
		}
		
		/* text above image on every card regardless of DOM alternation */
		.feature-cards__content {
			order: 1;
		}
		.feature-cards__image {
			order: 2;
			width: 100%;
		}
		/* oracle titles hold 2 lines via manual breaks the build content
		   lacks (content defect — report); box height kept for rhythm */
		.feature-cards__title {
			min-height: 66px;
		}
		/* tablet — oracle @900: Column gap 48, text→image 110 (30 pad + 80),
	   text-block gap 16, title→lede 10 */
		.feature-cards__card {
			align-items: stretch;
			gap: 80px;
		}
		.feature-cards__grid {
			gap: 48px;
		}
		.feature-cards__body,
		.feature-cards__body h5,
		.feature-cards__body h5 + p {
			margin-top: 16px;
		}
		.feature-cards__body > :first-child {
			margin-top: 0;
		}
	}
	@media (max-width: 809.98px) {
		.feature-cards {
			padding: 64px 24px 0;
		}
		/* oracle @390 (global phone eyebrow scale) */
		.feature-cards__image {
			border-radius: 32px;
		}
		.feature-cards__title {
			min-height: 48px;
		}
		/* 2 lines — oracle titles carry manual breaks */
		/* phone — oracle @390: Column gap 100 (image bottom 1713.7 → card-2 text
	   block 1813.7; cards 6→7: 7783.8 → 7883.8), card gap 20 on every card
	   (text block bottom 1307.1 → image 1327.3; card 7: 8614.6 → 8634.8);
	   text-block gap 8 (lede→h5 892.2→900.2; h5→p 921.8→929.8); title→lede 10 */
		.feature-cards__grid {
			gap: 100px;
		}
		.feature-cards__card {
			gap: 20px;
		}
		.feature-cards__body,
		.feature-cards__body h5,
		.feature-cards__body h5 + p {
			margin-top: 8px;
		}
		.feature-cards__body > :first-child {
			margin-top: 0;
		}
	}

	/*  ===================== process-steps =====================  */
	/* ------------------------------------------------------------------
	   process-steps — 2-col numbered step grid (discover-it)
	   ------------------------------------------------------------------ */
	.process-steps {
		background: var(--color-white);
		padding: 40px 96px 0;
	}
	/* oracle: 40 below the video */
	.process-steps__grid {
		max-width: 1216px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 33px 40px; /* oracle: 33 row / 40 column */
		counter-reset: pstep;
	}
	.process-steps__step {
		display: flex;
		flex-direction: column;
	}
	.process-steps__number {
		font: var(--type-lead);
		color: var(--color-orange);
	}
	.process-steps__title {
		font: var(--type-subheading);
		text-transform: uppercase;
		color: var(--color-slate);
		margin-top: 24px;
	}
	.process-steps__body {
		font: var(--type-intro);
		color: var(--color-ink);
		margin-top: 16px;
	}
	@media (min-width: 1026px) {
		/* oracle @1440/@1200: step row pitch 01→03 = 214.8 = step 182.8 + 32
		   (build 215.8 → row gap 33). Column gap 40 unchanged. */
		.process-steps__grid {
			row-gap: 32px;
		}
	}
	@media (min-width: 1440px) {
		/* ---- process-steps (@layer components "process-steps") ----------------
		   oracle Services grid 260+1400 @1920, cols 680 = (1400-40)/2 (build 1216) */
		.process-steps__grid {
			max-width: 1400px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		.process-steps {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900 & @390: iframe bottom → step "01" box = 40 (Services
		   container flex gap 40); theme zeroes the top pad below 1026. */
		.process-steps {
			padding: 0 64px;
			padding-top: 40px;
		}
		/* oracle @900: col 2 at x 470 = 76 + 354 + 40 → column gap 40; row
		   pitch 229.2 = step 197.2 + 32 → row gap 32 (theme has 40/32 swapped). */
		.process-steps__grid {
			gap: 32px 40px;
		}
	}
	@media (max-width: 809.98px) {
		/* phone keeps the tablet 40px top (it used to inherit it via a page-scoped tablet rule) */
		.process-steps {
			padding: 40px 30px 0;
		}
		/* theme phone grid gap 24 is right (oracle 24); restore it over the
		   tablet rule above. */
		.process-steps__grid {
			grid-template-columns: 1fr;
			gap: 24px;
		}
		/* oracle @390: title box 1257.6 + 27.3 → body box 1296.9 = 12 (build 16). */
		.process-steps__body {
			margin-top: 12px;
		}
	}

	/*  ===================== cs-cards =====================  */
	/* ------------------------------------------------------------------
	   cs-cards — small Switzer label, then one row per case study: kicker /
	   display title / body / lime pill beside a 512px photo (photo below
	   the text on phones). Every card has the same anatomy; consecutive
	   cards sit 140 apart (134 on phones). Photo column starts at the
	   viewport centre on desktop (text = 50% of the card box − 40 gap).
	   ------------------------------------------------------------------ */
	.cs-cards {
		background: var(--color-white);
		padding: 40px 0 0;
	}
	.cs-cards__container {
		display: flex;
		flex-direction: column;
	}
	.cs-cards__eyebrow {
		font: 500 16px/16px var(--font-switzer);
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--color-ink);
		text-align: center;
		padding: 112px 0 0;
	}
	.cs-cards__grid {
		display: flex;
		flex-direction: column;
	}
	.cs-cards__card {
		display: flex;
		gap: 40px;
		align-items: center;
		padding: 35px 96px 0;
	}
	.cs-cards__card + .cs-cards__card {
		padding-top: 140px;
	}
	.cs-cards__content {
		flex: none;
	}
	.cs-cards__label {
		font: var(--type-intro);
		color: var(--color-blue);
	}
	.cs-cards__title {
		font: var(--type-card-title);
		letter-spacing: var(--type-card-title-ls);
		text-transform: uppercase;
		color: var(--color-ink);
	}
	.cs-cards__body {
		font: var(--type-intro);
		color: var(--color-ink);
	}
	.cs-cards__image {
		flex: 1;
		border-radius: 20px;
		overflow: clip;
	}
	.cs-cards__image img {
		width: 100%;
		height: 512px;
		object-fit: cover;
	}
	@media (min-width: 1026px) {
		/* oracle @1440/@1200: kicker →24→ title →16→ body →40→ pill */
		.cs-cards__title {
			margin-top: 24px;
		}
		.cs-cards__body {
			margin-top: 16px;
		}
		.cs-cards__card .btn {
			margin-top: 40px;
		}
	}
	@media (min-width: 1440px) {
		/* photo column starts at the viewport centre: 112+568 | 720+608 @1440,
		   112+808 | 960+848 @1920 */
		.cs-cards__content {
			width: calc(50% - 40px);
		}
	}
	@media (min-width: 1280px) and (max-width: 1439.98px) {
		/* text column 488 @1280 → 568 @1440 (pad 96) */
		.cs-cards__content {
			width: calc(50vw - 152px);
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* side pad steps to 80 below 1280; text column 464 @1200 */
		.cs-cards__card {
			padding-left: 80px;
			padding-right: 80px;
		}
		.cs-cards__content {
			width: calc(50vw - 136px);
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: kicker →28→ title →12→ body →40→ pill; label →35→ card */
		.cs-cards__content {
			width: 334px;
		}
		.cs-cards__card {
			padding: 35px 64px 0;
		}
		.cs-cards__title {
			margin-top: 28px;
		}
		.cs-cards__body {
			margin-top: 12px;
		}
		.cs-cards__card .btn {
			margin-top: 40px;
		}
	}
	@media (max-width: 809.98px) {
		/* oracle @390: label rides the section pad; text above the photo,
		   kicker →18→ title →6→ body →12→ pill (content width) →40→ photo */
		.cs-cards__eyebrow {
			padding-top: 0;
		}
		.cs-cards__card {
			flex-direction: column;
			padding: 33px 24px 0;
		}
		.cs-cards__card + .cs-cards__card {
			padding-top: 134px;
		}
		.cs-cards__content {
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		.cs-cards__title {
			margin-top: 18px;
		}
		.cs-cards__image {
			width: 100%;
		}
		.cs-cards__body {
			margin-top: 6px;
		}
		.cs-cards__card .btn {
			margin-top: 12px;
			align-self: flex-start;
		}
	}

	/*  ===================== facts-card =====================  */
	/* ------------------------------------------------------------------
	   facts-card — side column (eyebrow / photo / intro) + grey facts card
	   with tangerine bolt bullets. Layout option:
	     image-left  side column | facts card, side by side from 1026px. The
	                 side column is a stack whose photo GROWS to fill the
	                 card's height, capped at 450px (Framer's stack: 439 @1440,
	                 450 + a gap under the intro @1100–1300, flush @1366; a
	                 short card gives a short photo). Stacked below 1026.
	     card        eyebrow centred over a full-width facts card. When the
	                 next block is an Image Band, the card pins (sticky) while
	                 the photo scrolls up beneath it.
	   ------------------------------------------------------------------ */
	.facts-card {
		background: var(--color-white);
		padding: 32px 80px 0;
	}
	.facts-card__container {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.facts-card__side {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	.facts-card .eyebrow {
		color: var(--color-ink);
	}
	.facts-card__image {
		position: relative;
		flex: none;
		border-radius: 20px;
		overflow: clip;
	}
	/* absolute-fill: the photo's intrinsic size never sets the column height */
	.facts-card__image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.facts-card__list {
		flex: none;
		background: var(--color-paper);
		border-radius: 16px;
		padding: 40px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.facts-card__list-title {
		font: var(--type-subheading);
		text-transform: uppercase;
		color: var(--color-ink);
		padding-bottom: 32px;
		border-bottom: 1px solid var(--color-sky);
		text-wrap: balance;
	}
	.facts-card__facts ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.facts-card__facts li {
		font: var(--type-body);
		position: relative;
		padding-left: 24px;
		color: var(--color-ink);
	}
	/* Bolt bullets (think facts, case-study fast facts, lancaster step
	   videos): oracle + live use the chunky rounded bolt, viewBox 0 0 13.503
	   15.985 drawn 14x16 (87 instances, one path). The build masked the tall
	   hero bolt (48x79) into the same box → ~10px wide and skinny. */
	.facts-card__facts li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 4px;
		width: 14px;
		height: 16px;
		background: var(--bullet-color, var(--color-orange));
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 79"><path d="M 46.595 34.078 L 27.969 34.078 L 27.969 0.62 C 27.969 -0.002 27.152 -0.235 26.821 0.292 L 0.215 42.783 C -0.368 43.715 0.304 44.923 1.405 44.923 L 20.031 44.923 L 20.031 78.38 C 20.031 79.002 20.848 79.236 21.178 78.708 L 47.785 36.216 C 48.368 35.285 47.696 34.077 46.595 34.077 Z"/></svg>')
			center / contain no-repeat;
		-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
		mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
	}
	.facts-card__facts a {
		color: var(--color-blue);
		text-decoration: none;
	}
	/* oracle: the intro/closing copy sits in an opacity .7 wrapper at every band */
	.facts-card__intro {
		max-width: 600px;
		opacity: 0.7;
	}
	.facts-card__intro p {
		font: var(--type-intro);
		color: var(--color-ink);
	}
	/* ---- card layout: section starts 144 down (all bands) ---- */
	.facts-card.facts-card--card {
		padding-top: 144px;
	}
	.facts-card--card .eyebrow {
		text-align: center;
	}
	.facts-card--card .facts-card__list {
		margin-top: 32px;
	}
	/* pin over a following Image Band (oracle 1psirzp): the card holds at
	   top 80 while the photo scrolls up beneath it; travel = the band's
	   height (525 desktop/tablet, 282 phone). CSS-only: the container is
	   lengthened by the band's height and the band pulled up by the same, so
	   document flow is unchanged. */
	.facts-card--card:has(+ .image-band) {
		--pin-h: 525px;
	}
	.facts-card--card:has(+ .image-band) .facts-card__list {
		position: sticky;
		top: 80px;
		z-index: 1;
	}
	.facts-card--card:has(+ .image-band) .facts-card__container::after {
		content: "";
		display: block;
		height: var(--pin-h);
	}
	.facts-card--card + .image-band {
		margin-top: -525px;
		position: relative;
	}
	@media (min-width: 1026px) {
		/* image-left: two columns, the facts card aligned to the eyebrow's top;
		   the side column stretches to the row and its photo fills it */
		.facts-card--image-left .facts-card__container {
			flex-direction: row;
			justify-content: center;
			align-items: stretch;
			gap: 48px;
		}
		.facts-card--image-left .facts-card__list {
			align-self: flex-start;
		}
		.facts-card--image-left .facts-card__image {
			flex: 1 1 0;
			min-height: 200px;
			max-height: 450px;
		}
	}
	@media (min-width: 1440px) {
		/* columns: 600 | 48 | 600 @1440, 720 @1680, 840 @1920 (oracle 96+840 |
		   984+840); intro paragraph max 750 inside the column */
		.facts-card--image-left .facts-card__side,
		.facts-card--image-left .facts-card__list {
			width: calc(50% - 24px);
		}
		.facts-card--image-left .facts-card__intro {
			max-width: 750px;
		}
		/* card layout: oracle Container mw=1600 */
		.facts-card--card .facts-card__container {
			max-width: 1600px;
			margin: 0 auto;
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* fluid desktop: columns track 50vw−120 (480 @1200 → 600 @1440) */
		.facts-card--image-left .facts-card__side,
		.facts-card--image-left .facts-card__list {
			width: calc(50vw - 120px);
		}
	}
	@media (max-width: 1025.98px) {
		/* stacked: eyebrow → photo → intro →48→ card (think's tablet grid is
		   offset 46 left / 64 right, oracle) */
		.facts-card {
			padding: 32px 64px 0 46px;
		}
		.facts-card--image-left .facts-card__container {
			gap: 48px;
		}
		.facts-card .eyebrow {
			text-align: center;
		}
		.facts-card__image {
			height: 350px;
		}
		.facts-card__intro {
			max-width: 750px;
			align-self: center;
		}
	}
	@media (max-width: 809.98px) {
		.facts-card {
			padding: 32px 24px 0;
		}
		.facts-card__image {
			height: 300px;
		}
		.facts-card__list {
			padding: 24px;
		}
		.facts-card--card:has(+ .image-band) {
			--pin-h: 282px;
		}
		.facts-card--card + .image-band {
			margin-top: -282px;
		}
	}

	/*  ===================== image-band =====================  */
	/* ------------------------------------------------------------------
	   image-band — container-width rounded image (think aerial, 1248×493)
	   ------------------------------------------------------------------ */
	/* ----------------------------------------------------------------------
	   image-band  (main.css: "image-band — container-width rounded image")
	   oracle @1440: stats card bottom 2119.8 → aerial top 2151.8 = 32 (build
	   33 → everything below runs +1 through the CTA, globe and quote band);
	   same 32 @1200 (2355 → 2387).
	   ---------------------------------------------------------------------- */
	.image-band {
		background: var(--color-white);
		padding: 33px 80px 0;
		padding-top: 32px;
	}
	.image-band__container {
		height: 493px;
		border-radius: 20px;
		overflow: clip;
	}
	.image-band img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	@media (min-width: 1440px) {
		/* ---- image-band (@layer components "image-band") ----------------------
		   oracle aerial img 160+1600 x 493 @1920 (r20), i.e. capped 1600 (build
		   spans the 80-padded 1728; 1248 = box @1440) */
		.image-band__container {
			max-width: 1600px;
			margin: 0 auto;
		}
	}
	@media (max-width: 1025.98px) {
		.image-band {
			padding: 32px 64px 0 46px;
		}
	}
	@media (max-width: 809.98px) {
		.image-band {
			padding: 32px 24px 0;
		}
		.image-band__container {
			height: 250px;
		}
	}

	/*  ===================== hierarchy =====================  */
	/* ------------------------------------------------------------------
	   hierarchy — lime stepped bars + gradient preference rail
	   ------------------------------------------------------------------ */
	.hierarchy {
		background: var(--color-white);
		padding: 144px 80px 0;
	}
	/* oracle: 144 gap after aerial; content 1248 */
	.hierarchy__container {
		max-width: 1248px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}
	.hierarchy .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	.hierarchy__intro {
		font: var(--type-intro);
		max-width: 750px;
		color: var(--color-ink);
		text-align: center;
	}
	.hierarchy__diagram {
		width: 100%;
		display: flex;
		gap: 64px;
		align-items: stretch;
	}
	/* Think About It — oracle stickies (all bands):
	   hierarchy bars: each tier sticky top 120 in the 506 tiers column → the
	   bars ride up and stack onto each other, then release together. */
	/* ----------------------------------------------------------------------
	   hierarchy  (main.css: "hierarchy — lime stepped bars + gradient rail")
	   ---------------------------------------------------------------------- */
	/* oracle tiers column = container − rail − 64 gap; tier widths are % of
	   THAT column (build's 87.7/74.5/61.4/48.2 are % of the 1248 container
	   applied to the 1094 column → every bar too narrow):
	   @1440 1094.7 / 930.5 / 766.3 / 602   = 100 / 85 / 70 / 55
	   @900   620.8 / 527.7 / 434.5 / 341.4 = 100 / 85 / 70 / 55
	   @390   232.9 / 218.9 / 205   / 186.3 = 100 / 94 / 88 / 80 */
	.hierarchy__tiers {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 40px;
		align-self: flex-start;
		min-width: 0;
	}
	.hierarchy__tier {
		background: var(--color-lime);
		border-radius: 12px;
		padding: 30px;
		position: sticky;
		top: 120px;
		z-index: 1;
	}
	/* oracle tier h4s: word-break/overflow-wrap: break-word (computed) — also
	   what lets the tiers column shrink to 232.9 @390 instead of being held
	   open by the unbreakable "RECYCLING/COMPOSTING" (318 → rail pushed to
	   x368, off the container) */
	.hierarchy__tier h4 {
		font: var(--type-subheading);
		text-transform: uppercase;
		color: var(--color-ink);
		overflow-wrap: anywhere;
	}
	/* oracle rail = flex column, padding 20/0 (14/0 @390), gap 20:
	   label / gradient bar (fills) / label. Bar inset from the tiers' top and
	   bottom = pad + label + 20: 97.2 @1440 (20+57.2+20; bar 3151.2–3462.5 in
	   tiers 3054–3559.7), 104 @900 (20+64+20), 90 @390 (14+56+20). Build's
	   absolute bar at 60/60 is 37px long at each end @1440. Rail width is the
	   label's MIN-content ("Preferred"): 89.3 @1440, 81.2 @900, 73.1 @390
	   (build 90/90/74; plain auto lets "Most Preferred" open to one line). */
	.hierarchy__rail {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: min-content;
		padding: 20px 0;
		gap: 20px;
	}
	.hierarchy__rail::before {
		content: "";
		width: 5px;
		border-radius: 40px;
		background: linear-gradient(#3e8dfd 0%, #a2c7f3 62.17%, #ff8b4f 100%);
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		flex: 1;
	}
	.hierarchy__rail span {
		font: var(--type-subtitle);
		color: var(--color-ink);
		text-align: center;
	}
	.hierarchy__closing {
		max-width: 750px;
	}
	.hierarchy__closing p {
		font: var(--type-body);
		color: var(--color-ink);
		text-align: center;
	}
	.hierarchy__intro,
	.hierarchy__rail span {
		text-wrap: balance;
	}
	.hierarchy__intro,
	.hierarchy__closing {
		opacity: 0.7;
	}
	.hierarchy__tier--1 {
		width: 100%;
	}
	.hierarchy__tier--2 {
		width: 85%;
	}
	.hierarchy__tier--3 {
		width: 70%;
	}
	.hierarchy__tier--4 {
		width: 55%;
	}
	.hierarchy__rail-top {
		order: -1;
	}
	@media (min-width: 1440px) {
		/* ---- hierarchy (@layer components "hierarchy") ------------------------
		   oracle Container mw=1600: 96+1248 @1440, 96+1488 @1680, 160+1600 @1920
		   (tiers 1095 / 1335 / 1430 = container − 64 gap − rail) */
		.hierarchy__container {
			max-width: 1600px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* oracle 1026–1279.98 only: tier 4 is content-fit — 409.7 = "TREATMENT &
	   DISPOSAL" 349.7 + 60 pad (55% would be 470); tiers 1–3 keep 100/85/70.
	   From 1280 it is 55% again (514 @1280, 561 @1366 — width sweep
	   2026-09-25; this rule used to run to 1439.98 → up to 192px narrow) */
		.hierarchy__tier--4 {
			width: fit-content;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* hierarchy — @layer components "hierarchy — lime stepped bars + gradient
		   preference rail". oracle @1100: intro "The EPA waste management
		   hierarchy…" Satoshi 400 20/32 in the 750 box, balanced → 687.6x121
		   (4 lines, box 128, 3205.8–3333.8); build 22/35.2 → 5 lines 176 → tiers
		   and everything below +41.2. Rail labels "Most/Least Preferred" Satoshi
		   400 20/32, 81.2x64 (rail = min-content of "Preferred" @20px = 81.2 →
		   tiers column 908 − 81.2 − 64 = 762.8: tiers 762.8 / 648.4 / 533.9 /
		   409.7 = 100 / 85 / 70 / fit); build 22/28.6 → rail 89.3, tiers 754.7 /
		   641.5 / 528.3. Both are 22px from 1200 up. */
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: hierarchy container x58 w766 = 46 left / 64 right (the
		   same asymmetric tablet pads as facts-card/image-band); build 55/55
		   shifts the whole diagram +9 */
		.hierarchy {
			padding: 144px 64px 0 46px;
		}
	}
	@media (max-width: 809.98px) {
		.hierarchy__diagram {
			gap: 16px;
		}
		.hierarchy__tier {
			padding: 20px;
		}
		.hierarchy__tier--2 {
			width: 94%;
		}
		/* oracle @390: 218.9 / 232.9 */
		.hierarchy__tier--3 {
			width: 88%;
		}
		/* oracle @390: 205 / 232.9 */
		.hierarchy__tier--4 {
			width: 80%;
		}
		/* oracle @390: 186.3 / 232.9 */
		.hierarchy__rail {
			padding: 14px 0;
		}
		/* oracle @390: rail pad 14 (label box 4154.5 in tiers from 4140.5) */
		.hierarchy {
			padding: 144px 24px 0;
		}
	}

	/*  ===================== cta-center =====================  */
	/* ------------------------------------------------------------------
	   cta-center — two-line h4 CTA (second line blue) + pill; optional blob
	   ------------------------------------------------------------------ */
	.cta-center {
		position: relative;
		background: var(--color-white);
		padding: 96px 80px;
		overflow: clip;
	}
	/* the heading + button sit on a white card inset 20px (oracle "Hero" card) */
	.cta-center__container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 20px;
	}
	.cta-center__line {
		font: var(--type-subheading);
		text-transform: uppercase;
		color: var(--color-ink);
		text-align: center;
	}
	.cta-center__line--accent {
		color: var(--color-blue);
	}
	/* ---- "glow" style (editor option): larger quote-size heading, all ink,
	   in a 1000 column over a gradient glow; roomier section. Oracle probe
	   @1440: glow 400x400, blur 40, rotate 75deg, centre = section top + 240,
	   effective opacity .5 (blob op 1 in an op .5 anchor); 300 @900, 250 @390. */
	.cta-center--blob {
		padding: 160px 128px 120px;
	}
	.cta-center--blob .cta-center__container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0;
	}
	.cta-center--blob .cta-center__line {
		font: var(--type-quote);
		letter-spacing: var(--type-quote-ls);
		text-wrap: balance;
	}
	.cta-center--blob .cta-center__line--accent {
		color: var(--color-ink);
	}
	.cta-center__blob {
		position: absolute;
		width: 400px;
		height: 400px;
		top: 240px;
		left: 50%;
		border-radius: 50%;
		background: radial-gradient(circle at 30% 30%, #0a70ff, #d3f290, #3e8dfd);
		filter: blur(40px);
		transform: translate(-50%, -50%) rotate(75deg);
		opacity: 0.5;
		pointer-events: none;
	}
	@media (max-width: 1025.98px) {
		/* plain style: think's tablet grid is offset (46 left / 64 right, oracle) */
		.cta-center {
			padding: 96px 64px 96px 46px;
		}
		/* glow style @900: outer 0 48 96 + inner 160 64 96 → 652 column */
		.cta-center.cta-center--blob {
			padding: 160px 112px 192px;
		}
		.cta-center__blob {
			width: 300px;
			height: 300px;
		}
	}
	@media (max-width: 809.98px) {
		.cta-center {
			padding: 64px 24px;
		}
		.cta-center__container {
			gap: 20px;
		}
		/* glow style @390: inner 160 0 64 in an outer 0 24 64; heading→button 32 */
		.cta-center.cta-center--blob {
			padding: 160px 24px 128px;
		}
		.cta-center--blob .cta-center__container {
			gap: 32px;
		}
		.cta-center__blob {
			width: 250px;
			height: 250px;
		}
	}

	/*  ===================== faq =====================  */
	/* ------------------------------------------------------------------
	   faq — STATIC open Q/A list (oracle has no accordion);
	   Q. blue / A. tangerine markers
	   ------------------------------------------------------------------ */
	.faq {
		background: var(--color-white);
		padding: 32px 80px 0;
	}
	.faq__container {
		max-width: 1248px;
		margin: 0 auto;
	}
	.faq .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	/* ==================================================================
	   PARITY PASS 2 (2026-09-17) — per-page overrides merged from
	   scratch/overrides/{resources,cs-harrisburg,imagine-it,discover-it,think-about-it,cs-lancaster,home}.css (agent-measured; each rule carries its
	   oracle measurement). Kept in the exceptions layer so they outrank the
	   component rules exactly as the injected override sheet did.
	   ================================================================== */
	/* ---------------------------------------------------------------- faq
	   (main.css "faq — STATIC open Q/A list") */
	/* oracle: a white CAP (Framer "Desktop" div, 1408x80, radius 60 60 0 0) sits at
	   y515.8 OVER the hero image (img 16..595.8) — the first white section starts
	   80 above the hero's bottom edge; Main Inner (FAQ content) still starts at
	   595.8 so the label stays at 629.8. Cap = 876x48 r60 @900 (y504.5), 370x32
	   r32 @390 (y478). Same device as main.css .fast-facts (cs hero cap). */
	/* (faq white cap → global .hero-inner + .main-inner::before rule in @layer layout) */
	/* oracle @1440/1200: FAQ section is a column with gap 48 — label line box
	   ends y652.9, first Q line box starts y700.8 (build 725.8 with 73) */
	.faq__items {
		display: flex;
		flex-direction: column;
		gap: 64px;
		margin-top: 48px;
	}
	.faq__item {
		max-width: 900px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	/* oracle: Q./A. row gap 10 — "Q." 96..119.5, question text x129.5 (build 130.5);
	   "A." 136..159.8, answer x169.8 (build 170.8) */
	.faq__question,
	.faq__answer {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}
	.faq__marker {
		font: var(--type-heading-sm);
		color: var(--color-blue);
		text-wrap: balance;
	}
	.faq__marker--a {
		color: var(--color-orange);
	}
	/* oracle h5 preset has text-wrap: balance — Q6 "What risks are associated…"
	   wraps 522.8 / 459.8 @1440 (build 808.5 / 173.4) */
	.faq__question-text {
		font: var(--type-heading-sm);
		color: var(--color-ink);
		text-wrap: balance;
	}
	.faq__answer {
		padding-left: 40px;
	}
	.faq__answer-text p {
		font: var(--type-body);
		color: var(--color-ink);
		max-width: 826px;
	}
	/* oracle answer 5 is ONE paragraph containing a blank line ("…Agency priority \n\n
	   Conventional…") = one empty 24px line: 188px tall @1440 vs build 164 (two <p>
	   with no spacing). Paragraph spacing = 1 line. */
	.faq__answer-text p + p {
		margin-top: 24px;
	}
	@media (min-width: 1440px) {
		/* ---- resources containers (@layer components faq / references-list /
		   article-rows / glossary) — oracle Container mw=1600 on all four:
		   160+1600 @1920, 144+1392 (128-pad) / 96+1488 (80-pad) @1680; faq items
		   stay 900 left-aligned (160+900), glossary cols 790|20|790, article rows
		   title 1297 = 1600 − 128 gap − pill (build 849 in 1152) */
		.faq__container {
			max-width: 1600px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* ------------------------- oracle text-preset sub-band 1026–1199.98
	   Oracle presets use `(max-width:1199px) and (min-width:810px)` for tablet
	   type (probe @1026: eyebrow 14/19.6, faq Q 20/24, glossary term 20/24;
	   @1200: 18/25.2 and 22/26.4). Page-scoped; the global .eyebrow rule in
	   main.css uses 1025.98 — lead to decide whether to move it site-wide. */
		/* oracle @1100: band copy paragraphs are text-wrap: balance (probe on
		   "Private haulers…": p tw=balance, 722 wide in the 794 column; step 3
		   662.2, step 4 670.6 — same line counts as the build's greedy 773.3 /
		   788.3 / 790.3 wraps, so only the break points differ). */
		/* ------------------------------------------------------------- resources
		   faq — @layer components "faq" (.faq__answer-text p max-width 826).
		   oracle @1100: answer paragraph is a plain flex child with no max-width:
		   x 167.6, w 828.4 = item 900 − pad 40 − "A." 21.6 − gap 10 (probe on
		   "If MSW combustor ash…"); the theme's 826 cap re-wraps the long answers
		   ("…under a worst-case mismanagement" moves to the next line, rows 4–6
		   of the FAQ light up in the diff). The same arithmetic holds @1440
		   (item max-width 900) — likely a global cap to drop; measured here @1100. */
		.faq__answer-text p {
			max-width: none;
		}
	}
	@media (max-width: 1025.98px) {
		.faq {
			padding: 32px 48px 0;
		}
		/* oracle @900: white cap 48 tall r60 at y504.5 over the hero (img ends 552.5) */
		/* oracle @900: FAQ section gap 64 (label box bottom 603.8 → Q 668) */
		.faq__items {
			margin-top: 64px;
		}
	}
	@media (max-width: 809.98px) {
		.faq {
			padding: 32px 24px 0;
		}
		.faq__answer {
			padding-left: 0;
		}
		/* oracle @390: white cap 32 tall r32 at y478 over the hero (img ends 510) */
		/* oracle @390: FAQ gap 32 (label box bottom 560.1 → Q box 591.9); build 73 */
		.faq__items {
			margin-top: 32px;
		}
	}

	/*  ===================== references-list =====================  */
	/* ------------------------------------------------------------------
	   references-list — centered label + citation rows
	   ------------------------------------------------------------------ */
	/* oracle: Container gap 48 → card top = label box bottom (2406.9) + 48 = 2455;
	   card pad 40, radius 16, bg rgb(248,248,248); bottom pad of section 144
	   (card bottom 4059.3 → section end 4203) — the theme's 270 was a shim */
	.references-list {
		background: var(--color-white);
		padding: 144px 80px 270px;
		padding-bottom: 144px;
	}
	.references-list__container {
		max-width: 1248px;
		margin: 0 auto;
	}
	.references-list .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	/* oracle: centered 750px citation column, 22px row gap, 88 below label */
	.references-list__items {
		display: flex;
		flex-direction: column;
		margin-top: 48px;
		max-width: 830px;
		margin-left: auto;
		margin-right: auto;
		padding: 40px;
		background: #f8f8f8;
		border-radius: 16px;
		gap: 22px; /* oracle inner column gap 22 (line-box pitch 86.4+22) */
	}
	/* oracle citation <p>: padding-left 36 with a hanging first line (text x345 =
	   p.x, continuation lines start 381 → text-indent -36); word-break: break-word
	   so long URLs break inside the column (390: card col 274, URLs broken).
	   The hanging indent is what makes "North M." (line 2 = 720.5 > 714) and both
	   EPA entries wrap to 3 lines @1440 — not font density. */
	.references-list__citation {
		font: 400 18px/28.8px var(--font-inter);
		color: var(--color-ink);
		width: 100%;
		max-width: none;
		margin: 0;
		padding-left: 36px;
		text-indent: -36px;
		overflow-wrap: anywhere;
	}
	@media (min-width: 1280px) {
		/* ------------------------------------------------- references-list
	   (main.css "references-list — centered label + citation rows")
	   The oracle wraps the citations in a CARD: bg #f8f8f8, radius 16, padding 40,
	   830 wide (750 text col + 80) at x305 @1440, y2455..4059 (leaf-dump 2400-4300).
	   Build has no card element → style .references-list__items as the card. */
		/* oracle @1440/1280: Links section pad 144 128 (probe @1280/1439); 80 below 1280 */
		.references-list {
			padding-left: 128px;
			padding-right: 128px;
		}
	}
	@media (min-width: 1440px) {
		.references-list__container {
			max-width: 1600px;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: Links pad 96 48 96 48; Container gap 64 (label box bottom
		   2399.3 → card 2463.6); card 780 wide at x60, pad 40 */
		.references-list {
			padding: 96px 48px;
		}
		.references-list__items {
			margin-top: 64px;
			max-width: 780px;
		}
	}
	@media (max-width: 809.98px) {
		/* oracle @390: Links pad 64 24 64 24 (FAQ last answer box end 3734.5 → label
		   box 3798.4); Container gap 32 (label box bottom 3816.6 → card 3848.7);
		   card 322 wide (full column), pad 24 → 274 text col; 3789.6 tall */
		.references-list {
			padding: 64px 24px;
		}
		.references-list__items {
			margin-top: 32px;
			max-width: none;
			padding: 24px;
		}
	}

	/*  ===================== article-rows =====================  */
	/* ------------------------------------------------------------------
	   article-rows — title + lime pill rows with hairline rules
	   ------------------------------------------------------------------ */
	.article-rows {
		background: var(--color-white);
		padding: 0 128px 144px;
	}
	/* oracle: label flush under references, 144 tail */
	.article-rows__container {
		max-width: 1152px;
		margin: 0 auto;
	}
	.article-rows .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	/* oracle @1440: label box bottom 4228.4 → Grid top 4276.5 (48); Grid gap 24 */
	.article-rows__rows {
		display: flex;
		flex-direction: column;
		margin-top: 48px;
		gap: 24px;
	}
	/* row = content only; hairline = 24 below content, then 24 gap to next row.
	   Inner gap 128 → h3 width 848.8 @1440 (1152-175.2-128), which is what makes
	   "Lifecycle Assessment…" (878.5 wide) wrap to 2 balanced lines 447.6/424.2 */
	.article-rows__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 24px;
		gap: 128px;
		border-bottom: 1px solid var(--color-gray);
	}
	/* a hairline under every row (oracle row 1 lacked it — a Framer slip) */
	/* oracle h3 preset text-wrap: balance (probe @1440) */
	.article-rows__title {
		font: var(--type-title);
		letter-spacing: var(--type-title-ls);
		text-transform: uppercase;
		color: var(--color-ink);
		text-wrap: balance;
	}
	
	/* oracle pill is 175.2x54 at every width incl. 1200 (build shrank it to
	   151.3 and wrapped the label at 1200 — flex item squeezed by the title) */
	.article-rows__row .btn {
		flex: none;
		white-space: nowrap;
	}
	@media (min-width: 1440px) {
		.article-rows__container {
			max-width: 1600px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* ------------------------------------------------------- article-rows
	   (main.css "article-rows — title + lime pill rows with hairline rules")
	   Oracle "References" section: pad 0 128 144 @>=1280, 0 80 144 @1026–1279.98;
	   Grid column gap 24; each row = Inner (h3 + pill, row, gap 128, align center)
	   with NO padding; hairlines are separate 1px rows between Grid children with
	   24 gap either side. Every row has its hairline. */
		.article-rows {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900 */
		/* oracle @900: rows stack title→pill (gap 16), 48/1/48 rules */
		.article-rows__row {
			flex-direction: column;
			align-items: flex-start;
			padding: 0 0 48px;
			gap: 16px;
		}
		/* oracle @900: References section pad 96 48 96 48 (label box 4346 → glossary
		   label box 5253.4 = last hairline 5125.7 + 96 + 32) */
		.article-rows {
			padding: 96px 48px;
		}
		/* oracle @900: label box bottom 4365.6 → title 4429.9 (64); Grid gap 48;
		   row = title / 16 / pill, column; hairline 48 below pill, 48 above next */
		.article-rows__rows {
			margin-top: 64px;
			gap: 48px;
		}
		
	}
	@media (max-width: 809.98px) {
		.article-rows__row {
			flex-direction: column;
			padding: 0;
			gap: 16px;
			align-items: center;
			border-bottom: 0;
		}
		/* oracle @390: titles centered (x46.5 w297.1 in a 322 col; pill x107.4 =
		   (322-175.2)/2+34); preset 12lj5ox <=809: 24px, ls -0.3px */
		.article-rows__title {
			text-align: center;
		}
		/* oracle @390: References pad 64 24 64 24 (card bottom 7638.3 → label box
		   7766.2 = 64+64; last pill bottom 8470.9 → glossary label box 8566.8 = 64+32) */
		.article-rows {
			padding: 64px 24px;
		}
		/* oracle @390: label box bottom 7784.4 → title 7815.5 (32); Grid gap 48;
		   NO hairlines at phone (row2 = row1 pill bottom + 48, same for 3/4) */
		.article-rows__rows {
			margin-top: 32px;
			gap: 48px;
		}
		
	}

	/*  ===================== glossary =====================  */
	/* ------------------------------------------------------------------
	   glossary — static 2-col term/definition rows
	   ------------------------------------------------------------------ */
	.glossary {
		background: var(--color-white);
		padding: 32px 80px 144px;
	}
	.glossary__container {
		max-width: 1248px;
		margin: 0 auto;
	}
	.glossary .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	/* ------------------------------------------------------------ glossary
	   (main.css "glossary — static 2-col term/definition rows") */
	/* oracle @1440: label box bottom 4863.4 → term box 4911.3 (48); build 74 */
	.glossary__terms {
		display: flex;
		flex-direction: column;
		gap: 48px;
		margin-top: 48px;
	}
	/* Glossary rows (John: rules missing): oracle row ::after draws a 1px
	   bottom rule in sky rgb(162,199,243) as an overlay (no added height) and
	   each definition sits at opacity .7 — every band. */
	.glossary__row {
		display: flex;
		gap: 20px;
		padding-bottom: 40px;
		box-shadow: inset 0 -1px 0 var(--color-sky);
	}
	/* oracle term/definition are EQUAL columns: 614/614 @1440 (1248-20)/2,
	   494/494 @1200 (1008-20)/2, 380/380 @900 — build fixes the term at 614 which
	   squeezes the definition to 374 @1200 (136px tall vs oracle 71) */
	.glossary__term {
		font: var(--type-heading-sm);
		color: var(--color-ink);
		width: auto;
		flex: 1 1 0;
		text-wrap: balance;
	}
	.glossary__definition {
		font: var(--type-text);
		color: var(--color-ink);
		flex: 1 1 0;
		opacity: 0.7;
	}
	@media (min-width: 1440px) {
		.glossary__container {
			max-width: 1600px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* oracle body-18 preset (21ogod) drops to 16/25.6 below 1280 (probe: 18/28.8 @1280, 16/25.6 @1279) */
	}
	@media (max-width: 1025.98px) {
		.glossary {
			padding: 32px 48px 144px;
		}
		/* oracle @900: Glossery gap 64 (label box bottom 5273 → term 5337.3) */
		.glossary__terms {
			margin-top: 64px;
		}
	}
	@media (max-width: 809.98px) {
		.glossary {
			padding: 32px 24px 144px;
		}
		.glossary__row {
			flex-direction: column;
			padding-bottom: 40px;
		}
		/* oracle @390: Glossery gap 32 (label box bottom 8585 → term box 8616.8) */
		.glossary__terms {
			margin-top: 32px;
		}
		.glossary__term,
		.glossary__definition {
			flex: none;
			width: 100%;
		}
	}

	/*  ===================== stats-band =====================  */
	/* ------------------------------------------------------------------
	   stats-band — sticky left title + 5 gradient counter cards on white
	   ------------------------------------------------------------------ */
	.stats-band {
		background: var(--color-white);
		padding: 144px 128px 0;
	}
	.stats-band__container {
		display: flex;
		gap: 96px;
	}
	.stats-band__left {
		flex: none;
		position: sticky;
		top: 144px;
		align-self: flex-start;
	}
	.stats-band__heading {
		font: var(--type-heading);
		letter-spacing: var(--type-heading-ls);
		position: relative;
		color: var(--color-ink);
	}
	/* oracle scribble png underlines the word "Numbers": 244.5x18.3 at (260.6, 8548.1)
	   @1440; heading box (144, 8429.7..8552.9) → left 116.6, 1.5 above the heading's
	   bottom edge. Build served the 300x23 'medium' size at left 0 / −20 */
	.stats-band__scribble {
		position: absolute;
		pointer-events: none;
		width: 244.5px;
		height: 18.3px;
		margin-top: -1.5px;
		margin-left: 116.6px;
	}
	.stats-band__subline {
		font: var(--type-intro);
		color: var(--color-ink);
		margin-top: 16px;
	}
	.stats-band__grid {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
	}
	/* oracle card @1440: value box 8466.9..8524.5, label box 8528.7 → 4px gap, while
	   label→copy stays 16 (label 8530.8 → copy box 8569.1). The same 12px excess shows
	   @900 (value→label 54 vs 66) and @390 (44.4 vs 56.4) */
	.stats-band__stat {
		width: calc(50% - 16px);
		height: 250px;
		border-radius: 16px;
		padding: 40px;
		display: flex;
		flex-direction: column;
		background: linear-gradient(198deg, #16263e 3.91%, #2461b5 100%);
		gap: 4px;
	}
	.stats-band__stat:last-child:nth-child(odd) {
		width: 100%;
	}
	.stats-band__value {
		font: 700 48px/57.6px var(--font-inter);
		color: var(--color-mist);
	}
	.stats-band__label {
		font: var(--type-eyebrow);
		letter-spacing: var(--type-eyebrow-ls);
		text-transform: uppercase;
		color: var(--color-lime);
		text-wrap: balance;
	}
	.stats-band__desc,
	.stats-band__footnote {
		color: var(--color-sky);
	}
	.stats-band__footnote{
		font: var(--type-text);
	}
	.stats-band__desc{
		font: var(--type-text);
	}
	.stats-band__label + .stats-band__desc,
	.stats-band__label + .stats-band__footnote {
		margin-top: 12px;
	}
	@media (min-width: 1440px) {
		/* ---- stats-band (@layer components "stats-band") ----------------------
		   oracle Container mw=1600 gap 96: Left|Right = 435|621 @1440 (1152),
		   534|762 @1680 (1392), 619|885 @1920 (1600) → Left = 7/17 of (W − 96)
		   (434.8 / 533.6 / 619.3); stat cells 426 = (885−32)/2 follow from flex 1 */
		.stats-band__container {
			max-width: 1600px;
			margin: 0 auto;
		}
		.stats-band__left {
			width: calc((100% - 96px) * 7 / 17);
		}
	}
	@media (min-width: 1800px) {
		/* ≥1800 the "Numbers" scribble grows with the 64px heading: oracle
	   280x21 at heading-left +132, 3px higher (build kept 244.5x18.3 +116.6) */
		.stats-band__scribble {
			width: 280px;
			height: 21px;
			margin-left: 132px;
			margin-top: -4.5px;
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* oracle @1200/1300/1400: Section Stats pad 144 80 0, Container gap 48,
		   Left flex .7 0 0 / Right flex 1 0 0 (Right = (W−48)/1.7: 564.7 @1200,
		   623.5 @1300, 682.4 @1400 → 2 cols of 266/296/325). Build: 435 + 96 fixed */
		.stats-band {
			padding-left: 80px;
			padding-right: 80px;
		}
		.stats-band__container {
			gap: 48px;
		}
		.stats-band__left {
			width: auto;
			flex: 0.7 0 0;
			position: static;
		}
		.stats-band__grid {
			flex: 1 0 0;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* oracle @1200: card copy is Inter 400 16/25.6 (18/28.8 from 1280 up — type census) */
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* oracle @1100: stats heading drops to Inter 700 48/52.8 ls −0.5 (census: "WTE By"
		   48px ×3 incl. the What-Is heading; build 56px ×2) → scribble as @900:
		   212.1x15.9 under "Numbers" (left 103, +1 below the heading box) */
		.stats-band__scribble {
			width: 212.1px;
			height: 15.9px;
			margin-top: 1px;
			margin-left: 103px;
		}
		/* ------------------------------------------------------------------ home
		   stats-band — home block "stats-band" (next to the 1026–1199.98
		   .stats-band__heading 48/52.8 rule). oracle @1100: subline "Some quick
		   facts about waste-to-energy" Satoshi 400 20/32, 294x57 (2 lines) at
		   (96, 8356.9); build 22/35.2 323.5x62.2 — the one home text the merged
		   block missed (census: "Satoshi 400 22px/35.2px" build-only). */
	}
	@media (min-width: 810px) and (max-width: 1025.98px) {
		/* oracle @900: scribble 212.1x15.9 at (163, 6980.3); heading box (60, 6890.4..6996)
		   → left 103, +1 below the bottom edge */
		.stats-band__scribble {
			width: 212.1px;
			height: 15.9px;
			margin-top: 1px;
			margin-left: 103px;
		}
		/* oracle @900: card grid gap 24 both axes (cols 378+24+378 = 780, row pitch 274) */
		.stats-band__grid {
			gap: 24px;
		}
		.stats-band__stat {
			width: calc(50% - 12px);
		}
		.stats-band__stat:last-child:nth-child(odd) {
			width: 100%;
		}
	}
	@media (max-width: 1025.98px) {
		.stats-band {
			padding: 96px 48px 0;
		}
		.stats-band__container {
			flex-direction: column;
			gap: 64px;
		}
		.stats-band__left {
			width: 100%;
			position: static;
		}
		.stats-band__value {
			font: 500 40px/48px var(--font-satoshi);
		}
	}
	@media (max-width: 809.98px) {
		.stats-band {
			padding: 64px 24px 0;
		}
		.stats-band__container {
			gap: 48px;
		}
		/* oracle @390: cards 322x250 with pad 32 (value box at card+32, copy x 66 = 34+32),
		   stacked with gap 16 (pitch 266); build had pad 24 / gap 32 (+64 on the section) */
		.stats-band__grid {
			flex-direction: column;
			gap: 16px;
		}
		/* oracle @390: card 234, pitch 266 */
		.stats-band__value {
			font: 500 32px/38.4px var(--font-satoshi);
		}
		/* oracle @390: scribble 143.7x10.8 at (108.3, 5131.9); heading box (34, 5062.2..5132.6)
		   → left 74.3, 0.6 above the bottom edge */
		.stats-band__scribble {
			width: 143.7px;
			height: 10.8px;
			margin-top: -0.6px;
			margin-left: 74.3px;
		}
		.stats-band__stat,
		.stats-band__stat:last-child:nth-child(odd) {
			width: 100%;
			padding: 32px;
		}
	}

	/*  ===================== link-rows =====================  */
	/* ------------------------------------------------------------------
	   link-rows (HELPFUL LINKS) — centered kicker + thumb/title/pill rows
	   ------------------------------------------------------------------ */
	.link-rows {
		background: var(--color-white);
		padding: 192px 128px 144px;
	}
	.link-rows__container {
		display: flex;
		flex-direction: column;
		gap: 80px;
	}
	.link-rows .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	.link-rows__grid {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.link-rows__row {
		display: flex;
		gap: 64px;
		align-items: center;
		border-bottom: 1px solid var(--color-gray);
	}
	.link-rows__row:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	.link-rows__thumb {
		width: 160px;
		height: 160px;
		flex: none;
		border-radius: 24px;
		overflow: clip;
		background: #ccc;
	}
	.link-rows__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.link-rows__inner {
		flex: 1;
		display: flex;
		gap: 128px;
		align-items: center;
		justify-content: space-between;
	}
	/* --------------------------------------------------------------------------
	   text-wrap: balance — the oracle balances these blocks (computed text-wrap
	   "balance" @900 and @1440); the build wraps greedily, so line breaks differ
	   (e.g. link-rows @900: "Scientific Truth About / Waste-to-Energy" vs the build's
	   "…About Waste-to- / Energy"; outro copy @1440 wraps at ~623 of its 800 box)
	   -------------------------------------------------------------------------- */
	.link-rows__title {
		font: var(--type-title);
		letter-spacing: var(--type-title-ls);
		max-width: 660px;
		text-transform: uppercase;
		color: var(--color-ink);
		text-wrap: balance;
	}
	/* oracle link-rows Inner: title wrapper flex 1 0 0, pill flex 0 0 auto (pill 140 wide,
	   label on one line at every width; the build's pill shrank to 103 and wrapped "READ /
	   PDF" @1100/1200) */
	.link-rows .btn--secondary {
		flex: none;
		white-space: nowrap;
	}
	@media (min-width: 1026px) {
		/* oracle @1440: hairline 24 under the thumb (thumb 9538.5..9698.5, Border 9722.4) then
		   24 to the next row; theme's 25 pad added 1px per row (row 4 title +3.1) */
		.link-rows__row {
			padding-bottom: 24px;
		}
		.link-rows__row:last-child {
			padding-bottom: 0;
		}
	}
	@media (min-width: 1440px) {
		/* ---- link-rows (@layer components "link-rows") ------------------------
		   oracle Team Container mw=1600 (160+1600 @1920, rows Inner 384+1376 =
		   160 + 224 thumb+gap; build 368+1408 in the uncapped 1632) */
		.link-rows__container {
			max-width: 1600px;
			margin: 0 auto;
		}
		/* title fills the row: oracle 384+1108 @1920 ("Scientific truth about
		   waste-to-energy" one line; framer-5v8ghf widths 1108/1092/1120/1083),
		   i.e. Inner 1376 − 128 gap − pill; 660 is just that leftover at 1440 */
		.link-rows__title {
			max-width: none;
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* oracle @1100: Team section pad 80 (rows x 96, 908 wide); build 128 */
		.link-rows {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (min-width: 810px) and (max-width: 1025.98px) {
		/* oracle @900: hairline 48 under the thumb (thumb 8069.8..8229.8, rule 8277.8), next
		   row 48 below the rule → row pitch 258.8; theme's 25 pad gave 235.8 (−23 × 3 rows) */
		.link-rows__row {
			padding-bottom: 48px;
		}
		.link-rows__row:last-child {
			padding-bottom: 0;
		}
	}
	@media (max-width: 1025.98px) {
		.link-rows {
			padding: 96px 48px;
		}
		.link-rows__container {
			gap: 64px;
		}
		.link-rows__grid {
			gap: 48px;
		}
		.link-rows__row {
			gap: 48px;
		}
		.link-rows__inner {
			flex-direction: column;
			gap: 16px;
			align-items: flex-start;
		}
		.link-rows__title {
			max-width: 572px;
		}
	}
	@media (max-width: 809.98px) {
		.link-rows {
			padding: 64px 24px;
		}
		.link-rows__container {
			gap: 32px;
		}
		/* oracle @390: rows are left-aligned (title and pill at x=34, the thumb's x) and the
		   24/28.8 titles keep letter-spacing −0.3 (build centred them, ls normal) */
		.link-rows__row {
			flex-direction: column;
			gap: 24px;
			border-bottom: 0;
			padding-bottom: 0;
			align-items: flex-start;
		}
		.link-rows__thumb {
			width: 100%;
			height: auto;
			aspect-ratio: 1;
		}
		.link-rows__inner {
			align-items: flex-start;
			text-align: left;
		}
	}

	/*  ===================== quote-band =====================  */
	/* ------------------------------------------------------------------
	   quote-band — quote mark + uppercase display quote + attribution over
	   a soft gradient glow. Editor options (template → modifier classes):
	     Spacing  standalone (default): 160 above; 120 / 96 / 64 below
	              joined (home): continues the section above — 0 above;
	              160 / 96 / 64 below
	     Glow     lime (default): orange → blue → lime, rotated 65°
	              navy (home): orange → blue → navy, unrotated
	     Source on its own line: the source/citation drops under the name
	   Derived from content: the attribution is 70% ink when it's a single
	   line of text, full ink when a separate source is filled in (oracle,
	   all five placements).
	   Glow geometry (oracle, every page and band): 400 / 300 / 250 circle,
	   blur 40, centre 170px below the top of the quote column, effective
	   opacity .5.
	   ------------------------------------------------------------------ */
	.quote-band {
		--blob-rotate: 65deg;
		--blob-mid: rgb(62, 141, 253);
		--blob-edge: rgb(211, 242, 144);
		position: relative;
		background: var(--color-white);
		padding: 160px 128px 120px;
	}
	.quote-band--joined {
		padding-top: 0;
		padding-bottom: 160px;
	}
	.quote-band--glow-navy {
		--blob-rotate: 0deg;
		--blob-edge: rgb(38, 58, 82);
	}
	.quote-band__container {
		position: relative;
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		z-index: 0;
	}
	.quote-band__blob {
		position: absolute;
		z-index: -1;
		left: 50%;
		top: 170px;
		width: 400px;
		height: 400px;
		border-radius: 50%;
		background: radial-gradient(circle at 30% 30%, rgb(255, 104, 28), var(--blob-mid), var(--blob-edge));
		filter: blur(40px);
		transform: translate(-50%, -50%) rotate(var(--blob-rotate));
		opacity: 0.5;
		pointer-events: none;
	}
	/* the svg sits flush at the icon box top (oracle; inline it dropped 3px
	   onto the 64px-font baseline) */
	.quote-band__icon {
		width: 40px;
		height: 40px;
		font: 800 64px/40px var(--font-inter);
		color: var(--color-navy);
	}
	.quote-band__icon svg {
		display: block;
	}
	.quote-band__quote {
		font: var(--type-quote);
		letter-spacing: var(--type-quote-ls);
		text-transform: uppercase;
		color: var(--color-ink);
		text-align: center;
		text-wrap: balance;
	}
	.quote-band__author {
		font: var(--type-body);
		max-width: 600px;
		color: var(--color-ink);
		text-align: center;
		opacity: 0.7;
	}
	.quote-band__author--sourced {
		opacity: 1;
	}
	.quote-band--source-below .quote-band__role {
		display: block;
		margin-top: 20px;
	}
	@media (max-width: 1025.98px) {
		.quote-band {
			padding: 160px 64px 96px;
		}
		.quote-band--joined {
			padding-top: 0;
		}
		.quote-band__container {
			max-width: 748px;
		}
		.quote-band__blob {
			width: 300px;
			height: 300px;
		}
	}
	@media (max-width: 809.98px) {
		.quote-band {
			padding: 160px 24px 64px;
		}
		.quote-band--joined {
			padding-top: 0;
		}
		.quote-band__container {
			gap: 24px;
		}
		.quote-band__blob {
			width: 250px;
			height: 250px;
		}
	}

	/*  ===================== outro-band =====================  */
	/* oracle stacks citation under the author name */
	/* ------------------------------------------------------------------
	   outro-band — POWERED BY + LCSWMA logo + muted mission line; closes
	   the white sheet w/ bottom radius before the footer reveal
	   ------------------------------------------------------------------ */
	/* --------------------------------------------------------------------------
	   outro-band (main.css "outro-band — POWERED BY + LCSWMA logo")
	   -------------------------------------------------------------------------- */
	/* oracle @1440: section pad 0 128 80 (eyebrow P at the section top, 10979.4), Grid gap
	   16 eyebrow→logo (logo 11020.6), Top gap 40 logo→copy; capture glyph rows confirm
	   16/40 @900 and 16/24 @390 (build: 11 top pad, 6, 59, 60 bottom — same 306 total) */
	.outro-band {
		background: var(--color-white);
		padding: 11px 128px 60px; /* oracle: eyebrow top+11, 60 below body */
		border-radius: 0 0 var(--frame-radius) var(--frame-radius);
		padding-top: 0;
		padding-bottom: 80px;
	}
	.outro-band__container {
		max-width: 1000px;
		display: flex;
		flex-direction: column;
		align-items: center; /* oracle: logo→body 59 */
		gap: 40px;
		margin: 0;
	}
	.outro-band__top {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	/* oracle: eyebrow→logo 6 */
	.outro-band .eyebrow {
		color: var(--color-navy);
		text-align: center;
	}
	.outro-band__logo {
		width: 400px;
		height: 49px;
	}
	.outro-band__body {
		font: var(--type-body);
		max-width: 800px;
		color: var(--color-ink);
		text-align: center;
		opacity: 0.49;
		text-wrap: balance;
	}
	.outro-band__label-mask {
		overflow-y: clip;
	}
	@media (min-width: 1026px) {
		.outro-band__container {
			margin-left: auto;
			margin-right: auto;
		}
	}
	@media (min-width: 1440px) {
		/* ---- outro-band (@layer exceptions "outro-band") ----------------------
		   oracle Container mw=1000 is CENTRED: 220+1000 @1440 (logo x 520),
		   340+1000 @1680, 460+1000 @1920; the exceptions block's `margin: 0`
		   pins the build at 144 at every width (logo 444 @1440 → 76px off, 316
		   @1920). NOTE: also true at 1440 — lead may make it unconditional */
		.outro-band__container {
			margin: 0 auto;
		}
	}
	@media (max-width: 1025.98px) {
		.outro-band {
			padding: 96px 80px;
			padding-top: 96px;
			padding-bottom: 96px;
		}
		.outro-band__container {
			max-width: 716px;
		}
	}
	@media (max-width: 809.98px) {
		.outro-band {
			padding: 64px 40px 56px;
			padding-top: 64px;
			padding-bottom: 56px;
		}
		.outro-band__logo {
			width: 250px;
			height: 31px;
		}
		/* oracle @390: Phone pad 64 40 56 (h 424.8) */
		.outro-band__container {
			gap: 24px;
		}
		/* oracle @390: Top gap 24 (logo 9384.3+30.5 → copy 9439) */
		.outro-band__top {
			gap: 16px;
		}
	}

	/*  ===================== hero-cs =====================  */
	/* ------------------------------------------------------------------
	   hero-cs — case-study photo hero: eyebrow, display title, subtitle
	   ------------------------------------------------------------------ */
	.hero-cs {
		position: relative;
		border-radius: var(--frame-radius) var(--frame-radius) 0 0;
		overflow: clip;
		padding: 220px 128px 200px; /* oracle: 220 128 200 (hero h 789 @1440) */
	}
	.hero-cs__bg,
	.hero-cs__bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* dark texture PNG layered between photo and the flat overlay
	   (template renders it from the hero's texture field) */
	.hero-cs__texture {
		position: absolute;
		inset: 0;
		z-index: 1;
		opacity: 0.7;
		pointer-events: none;
	}
	.hero-cs__texture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.hero-cs__overlay {
		position: absolute;
		inset: 0;
		z-index: 2;
		background: rgba(25, 25, 25, 0.2);
	}
	.hero-cs__content {
		position: relative;
		z-index: 3;
		max-width: 1152px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
		color: var(--color-white);
	}
	.hero-cs__eyebrow {
		font: var(--type-kicker);
		text-transform: uppercase;
	}
	.hero-cs__title {
		font: var(--type-display);
		letter-spacing: var(--type-display-ls);
		text-transform: uppercase;
	}
	.hero-cs__subtitle {
		font: var(--type-lead);
		margin-top: -7px;
		text-wrap: balance;
	}
	/* "Hidden surface" reveals (John, cs-lancaster vs live): the oracle clips
	   exactly three enter animations (census scratch/clip-map.mjs, all pages):
	   case-study hero title (parent slot = title box, 115 tall @1728),
	   case-study hero subtitle (content block clips at the subtitle's bottom
	   edge), home outro "Powered by" label (slot = label box). Everything
	   else animates inside large containers. Vertical-only clip so wide
	   glyphs are never shaved at the sides. */
	.hero-cs__title-mask,
	.hero-cs__content {
		overflow-y: clip;
	}
	.hero-cs__title-mask {
		max-width: 100%;
	}
	@media (min-width: 1440px) {
		/* ---- hero-cs (@layer components "hero-cs") ----------------------------
		   oracle Inner mw=1600: 144+1152 @1440, 144+1392 @1680, 160+1600 @1920;
		   "LANCASTER COUNTY" fits one line at 1600 (h115 vs build's 2-line 230) */
		.hero-cs__content {
			max-width: 1600px;
		}
	}
	@media (min-width: 1800px) {
		/* rail hugs "Preferred" at 26px: oracle rail text 105.6 wide at 1654
		   (container right 1760) → tiers 1430 = 1600 − 64 − 106 (build 90) */
		/* kicker preset-1x09rnd 20/130% → 24/130%: hero "WASTE-TO-ENERGY Case
		   Study" 402x29, step-video pills "Step 1" 78x29 (build 65x24) */
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* ---- 1026–1199.98: desktop layout, TABLET type (desktop1100 band) ------- */
		/* oracle text presets switch at 1199px (capture.mjs note 2026-09-17). Census
	   @1100 for this page: subtitle Inter 300 20/30, eyebrow Inter 500 14/19.6
	   ls 1, fast-facts body Satoshi 20/32, h5 Inter 700 20/24, band heading
	   Inter 700 48/52.8 ls −0.5, band body Satoshi 20/32. Everything else (hero
	   title 128, ff heading 28, video titles 32/38.4, rows 16/24) stays desktop. */
	}
	@media (max-width: 1025.98px) {
		.hero-cs {
			padding: 220px 48px 200px;
		}
	}
	@media (max-width: 809.98px) {
		.hero-cs {
			padding: 220px 24px 200px;
		}
		.hero-cs__eyebrow {
			text-wrap: balance;
		}
	}

	/*  ===================== fast-facts =====================  */
	/* oracle: Inter w300 24/36; sits 17px under title box */
	/* ------------------------------------------------------------------
	   fast-facts — white rounded panel: heading/copy left, paper card right
	   w/ tangerine bolt bullets
	   ------------------------------------------------------------------ */
	.fast-facts {
		background: var(--color-white);
		border-radius: var(--frame-radius) var(--frame-radius) 0 0;
		margin-top: -80px;
		padding: 112px 80px 0;
		position: relative;
		z-index: 4;
	}
	/* z above the hero's overlay (z2) / content (z3): .hero-cs makes no stacking context */
	/* oracle: an 80px white cap overlaps the hero bottom at every band (cap y 574/521/533 @1440/900/390); content starts 32 below the Main Inner edge */
	.fast-facts__panel {
		max-width: 1248px;
		margin: 0 auto;
	}
	.fast-facts .eyebrow {
		color: var(--color-ink);
		text-align: center;
	}
	.fast-facts__grid {
		display: flex;
		gap: 48px;
		margin-top: 48px;
	}
	/* oracle section gap 48 */
	.fast-facts__content {
		flex: none;
	}
	/* ---- fast-facts (components › fast-facts) ------------------------------ */
	/* oracle h4 is text-wrap: balance at every band: "WASTE AS RESOURCE / IN
	   LANCASTER COUNTY" in the 560 col @1440 (build put "COUNTY" alone) */
	.fast-facts__heading {
		font: var(--type-subheading);
		text-transform: uppercase;
		color: var(--color-ink);
		text-wrap: balance;
	}
	.fast-facts__body {
		margin-top: 32px;
	}
	/* oracle Content gap 32 */
	.fast-facts__body p {
		font: var(--type-intro);
		color: var(--color-ink);
		text-wrap: balance;
	}
	.fast-facts__body p + p {
		margin-top: 16px;
	}
	.fast-facts__card {
		flex: 1;
		background: var(--color-paper);
		border-radius: 16px;
		padding: 40px;
		align-self: flex-start;
	}
	.fast-facts__card-title {
		font: var(--type-label);
		color: var(--color-ink);
		padding-bottom: 32px;
		border-bottom: 1px solid var(--color-blue);
	}
	/* oracle Card gap 32; divider Sky-token = #3E8DFD */
	.fast-facts__facts ul {
		list-style: none;
		padding: 32px 0 0;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.fast-facts__facts li {
		font: var(--type-body);
		position: relative;
		padding-left: 24px;
		color: var(--color-ink);
	}
	.fast-facts__facts li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 4px;
		width: 14px;
		height: 16px;
		background: var(--color-orange);
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 79"><path d="M 46.595 34.078 L 27.969 34.078 L 27.969 0.62 C 27.969 -0.002 27.152 -0.235 26.821 0.292 L 0.215 42.783 C -0.368 43.715 0.304 44.923 1.405 44.923 L 20.031 44.923 L 20.031 78.38 C 20.031 79.002 20.848 79.236 21.178 78.708 L 47.785 36.216 C 48.368 35.285 47.696 34.077 46.595 34.077 Z"/></svg>')
			center / contain no-repeat;
		-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
		mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
	}
	@media (min-width: 1440px) {
		/* ---- fast-facts (@layer components "fast-facts") ----------------------
		   oracle Container mw=1600 (96+1248 @1440, 96+1488 @1680, 160+1600 @1920);
		   Content|Card = 560|640 @1440, 680|760 @1680, 736|816 @1920 with gap 48
		   → content = (W−48)/2 − 40 = 50% − 64; card (flex 1) gets 50% + 16 */
		.fast-facts__panel {
			max-width: 1600px;
		}
		.fast-facts__content {
			width: calc(50% - 64px);
		}
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		/* desktop fluid sub-band: oracle shrinks the details/videos columns
	   linearly below 1440 (measured endpoints: content 440/560, video col
	   484/588 at 1200/1440) */
		.fast-facts__content {
			width: calc(50vw - 160px);
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: Inter 300 20/30 */
		.fast-facts {
			padding: 112px 80px 0;
		}
		.fast-facts__grid {
			flex-direction: column;
		}
		.fast-facts__content {
			width: 100%;
		}
	}
	@media (max-width: 809.98px) {
		/* oracle @390: Inter 300 18/27 */
		.fast-facts {
			padding: 112px 24px 0;
		}
		/* oracle @390: heading text-align center (rect x 68 w 254 in the 322 col; body stays left) */
		.fast-facts__heading {
			text-align: center;
		}
		.fast-facts__card {
			padding: 24px;
		}
	}

	/*  ===================== step-videos =====================  */
	/* ------------------------------------------------------------------
	   step-videos — one white card, 2-col grid: STEP pill, title,
	   responsive 16:9 Vimeo, lime card w/ sky bolt bullets
	   ------------------------------------------------------------------ */
	/* ---- step-videos (components › step-videos) ---------------------------- */
	/* oracle Main Inner is one white sheet: the 120px between the Details sheet
	   and the videos card is white at every band (capture pixel 255,255,255 at
	   y 1600/1860/2580 @1440/900/390); the transparent section showed #191919 */
	.step-videos {
		padding: 120px 0 0;
		background: var(--color-white);
	}
	/* oracle "Video 1" card: cap radius 60px at every band (theme var drops to
	   48/32); pad-bottom 96 (the theme's 88 only offset the 2px-taller pills) */
	.step-videos__card {
		background: var(--color-white);
		padding: 112px 96px 88px; /* spec 96 bottom; −8 absorbs grid-row rounding so the bands below land at oracle y */
		border-radius: 60px 60px 0 0;
		padding-bottom: 96px;
	}
	.step-videos__grid {
		max-width: 1216px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.step-videos__step {
		display: flex;
		flex-direction: column;
	}
	.step-videos__top {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	/* oracle pill "Variant 1": fixed 112×46 box, 2px orange ring drawn inset,
	   h4 centered (text x = box + 23.4 for "Step 1", +21.5 for "Step 2"…) */
	.step-videos__pill {
		border: 2px solid var(--color-orange);
		border-radius: 100px; /* oracle pill is 48px tall (border drawn as ::after overlay) */
		box-sizing: border-box;
		width: 112px;
		height: 46px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.step-videos__pill h4 {
		font: var(--type-kicker);
		text-transform: uppercase;
		color: var(--color-orange);
	}
	.step-videos__title {
		font: var(--type-title);
		letter-spacing: var(--type-title-ls);
		text-transform: uppercase;
		color: var(--color-ink);
		text-wrap: balance;
	}
	.step-videos__video {
		margin-top: 24px;
		aspect-ratio: 16 / 9;
		border-radius: 20px;
		overflow: clip;
		background: #000;
	}
	.step-videos__video iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
	/* every step: title →24→ video →32→ lime card (oracle steps 3–6; steps 1–2
	   carried per-instance gaps in Framer) */
	.step-videos__body {
		background: var(--color-lime);
		border-radius: 30px;
		padding: 40px;
		margin-top: 32px;
	}
	.step-videos__body h5 {
		font: var(--type-heading-sm);
		color: var(--color-navy);
		margin-top: 24px;
		margin-bottom: 20px;
	}
	/* oracle: group→h5 24, h5→rows 20 */
	.step-videos__body ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.step-videos__body li {
		font: var(--type-body);
		position: relative;
		padding: 5px 0 5px 24px; /* oracle rows carry 5px vertical padding (box = text + 10) */
		color: var(--color-ink);
	}
	.step-videos__body li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 9px;
		width: 14px;
		height: 16px;
		background: var(--color-blue);
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 79"><path d="M 46.595 34.078 L 27.969 34.078 L 27.969 0.62 C 27.969 -0.002 27.152 -0.235 26.821 0.292 L 0.215 42.783 C -0.368 43.715 0.304 44.923 1.405 44.923 L 20.031 44.923 L 20.031 78.38 C 20.031 79.002 20.848 79.236 21.178 78.708 L 47.785 36.216 C 48.368 35.285 47.696 34.077 46.595 34.077 Z"/></svg>')
			center / contain no-repeat;
		-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
		mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.503 15.985"><path d="M 13.396 6.045 C 13.227 5.705 12.88 5.491 12.501 5.493 L 8.046 5.493 L 8.31 1.024 C 8.337 0.598 8.079 0.205 7.678 0.06 C 7.277 -0.088 6.827 0.045 6.573 0.388 L 0.201 8.893 C -0.028 9.195 -0.064 9.601 0.107 9.94 C 0.277 10.28 0.621 10.492 1.001 10.492 L 5.457 10.492 L 5.193 14.961 C 5.175 15.228 5.269 15.49 5.452 15.684 C 5.636 15.878 5.892 15.987 6.16 15.985 C 6.463 15.985 6.749 15.841 6.93 15.597 L 13.303 7.091 C 13.53 6.788 13.567 6.382 13.397 6.044 Z"/></svg>');
	}
	
	/* theme reset repeated (see NOTE above) */
	.step-videos__body h5:first-child {
		margin-top: 0;
	}
	
	@media (min-width: 1440px) {
		/* ---- step-videos (@layer components "step-videos") --------------------
		   oracle Videos Content pad 112/96/96/96, NO cap: columns 112+828 |
		   980+828 @1920 (= 1696 = full width − 192), 588|588 @1440 (build caps 1216) */
		.step-videos__grid {
			max-width: none;
		}
	}
	@media (min-width: 1280px) and (max-width: 1439.98px) {
		.step-videos__card {
			padding-left: 96px;
			padding-right: 96px;
		}
		.step-videos__grid {
			max-width: none;
		}
	}
	@media (min-width: 1026px) and (max-width: 1279.98px) {
		/* lancaster step videos card (oracle c4z99e): pad 80 @1026–1279.98, 96
	   ≥1280, two equal columns fill the rest (508 @1280, 551 @1366). Build's
	   13.33vw−112 / 86.67vw−32 interpolation was 21–37px off in 1200–1439. */
		.step-videos__card {
			padding-left: 80px;
			padding-right: 80px;
		}
		.step-videos__grid {
			max-width: none;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: Inter 400 16/24 (census 2026-09-17; the July 14px note was wrong) */
		.step-videos__card {
			padding: 112px 64px 96px;
		}
		.step-videos__grid {
			grid-template-columns: 1fr;
		}
		/* oracle @900: h5 Inter 700 20px/24px (text-style "4a Boilers") */
	}
	@media (max-width: 809.98px) {
		/* oracle @390: Videos section top → card top = 120 (2522 → 2642); card pad 40 20 40 */
		.step-videos {
			padding: 40px 0 0;
			padding-top: 120px;
		}
		/* oracle @390: title Inter 800 24/28.8 ls −0.3px (leaf-dump "Tipping and Sorting") */
		.step-videos__body {
			padding: 40px 20px;
		}
		.step-videos__card {
			padding: 40px 20px;
		}
		/* oracle @390: h5 Inter 700 18px/21.6px (one line, 265 wide); row→h5 gap 25
		   = 5 row pad + 20 (ledger "4b Turbine" y 8126, "4c Utility" y 8465) */
		.step-videos__body h5 {
			margin-top: 20px;
		}
		.step-videos__body h5:first-child {
			margin-top: 0;
		}
	}

	/*  ===================== step-bands =====================  */
	/* ------------------------------------------------------------------
	   step-bands — dark photo bands, Step N heading + copy
	   ------------------------------------------------------------------ */
	/* oracle band anatomy: solid navy sheet (photo bg is 85%-covered — flat
	   #16263E approximation), h1 + copy at top, framed copy of the photo at
	   the bottom (1134×550 r15). Heights are content-driven:
	   1019/929/962/871 @1440. NOTE: oracle has a centered intro paragraph
	   (Satoshi 22/35.2, w750) between kicker and bands that the template
	   does not output — __bands margin-top 234 compensates (oracle rhythm:
	   kicker →10→ intro →48→ bands, bands top at 384 from section top). */
	.step-bands {
		background: var(--color-white);
		padding: 128px 80px 32px;
	}
	.step-bands .eyebrow {
		font: 500 22px/22px var(--font-switzer);
		letter-spacing: 1.38px;
		text-transform: uppercase;
		color: var(--color-ink);
		text-align: center;
	}
	.step-bands__bands {
		max-width: 1248px;
		margin: 48px auto 0;
		display: flex;
		flex-direction: column;
		gap: 80px;
	}
	/* oracle: intro →48→ bands (the 234 stand-in covered the missing intro paragraph) */
	/* Lancaster step cards: oracle card = the step photo (cover, r48) filling
	   the WHOLE card under rgba(22,38,62,.85), with the sharp photo inset on
	   top — every band. The build painted flat navy (the width sweep flagged
	   the card-size image as 114px narrower / 380px shorter). */
	.step-bands__band {
		display: flex;
		flex-direction: column;
		background: var(--color-navy);
		border-radius: 48px;
		overflow: clip;
		position: relative;
	}
	.step-bands__content {
		order: 1;
		padding: 57px 57px 0;
		color: var(--color-white);
	}
	.step-bands__image {
		order: 2;
		margin: 40px 57px 57px;
		height: 550px;
		border-radius: 15px;
		overflow: clip;
	}
	.step-bands__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* ---- step-bands (components › step-bands) ------------------------------ */
	/* oracle h1s are text-wrap: balance at every band (probe @390/900): Step 3
	   wraps to 6 lines @390 (215 tall), Step 4 to 3 lines (165 wide) */
	.step-bands__heading {
		font: var(--type-heading);
		letter-spacing: var(--type-heading-ls);
		text-wrap: balance;
	}
	
	.step-bands__body {
		margin-top: 20px;
	}
	.step-bands__body p {
		font: var(--type-subtitle);
		color: var(--color-mist);
		text-wrap: balance;
	}
	.step-bands__body p + p {
		margin-top: 12px;
	}
	/* step-bands intro paragraph (was missing from the compose; oracle @1440: kicker →10→ 750px centered
	   intro Satoshi 22/35.2 →48→ bands; 20/32 below 1200). The old bands margin stand-ins are gone. */
	.step-bands__intro {
		font: var(--type-intro);
		max-width: 750px;
		margin: 10px auto 0;
		text-align: center;
		color: var(--color-ink);
	}
	.step-bands__bg {
		position: absolute;
		inset: 0;
	}
	.step-bands__bg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.step-bands__overlay {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(22, 38, 62, 0.85);
	}
	.step-bands__content,
	.step-bands__image {
		position: relative;
		z-index: 1;
	}
	@media (min-width: 1440px) {
		/* ---- step-bands (@layer components "step-bands") ----------------------
		   oracle Gallery Container mw=1400: 112+1216 @1440, 140+1400 @1680,
		   260+1400 @1920 (band bg 1400 wide, text inset 57 → 317+1286) */
		.step-bands__bands {
			max-width: 1400px;
		}
		
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* ---------------------------------------------------------- cs-lancaster
		   step-bands — @layer components "step-bands — dark photo bands". The
		   home block's band-wide `.eyebrow { 14px/19.6px }` (@layer exceptions)
		   outranks the components-layer `.step-bands .eyebrow` Switzer 22/22.
		   oracle @1100: "how the system works" Switzer 500 22/22 ls 1.38 nowrap,
		   316.9x22 at (391.5, 6679); build 14/19.6 211.7x16 → intro and the four
		   bands sit 2.4 high (band 1 6916.6 vs 6919). */
		.step-bands .eyebrow {
			font-size: 22px;
			line-height: 22px;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900: ls normal at 26px (tablet headline style) */
		.step-bands {
			padding: 128px 48px 32px;
		}
		/* .step-bands__bands margin stand-in removed (intro paragraph composed 2026-09-17) */
		.step-bands__content {
			padding: 57px 57px 0;
		}
		/* oracle @900: Inter 700 48/52.8 ls −0.5px (census; text-style "Step 1") */
	}
	@media (max-width: 809.98px) {
		.step-bands {
			padding: 128px 24px 32px;
		}
		/* .step-bands__bands margin stand-in removed (intro paragraph composed 2026-09-17) */
		.step-bands__content {
			padding: 32px 32px 0;
		}
		.step-bands__image {
			margin: 40px 32px 32px;
			height: 280px;
		}
		/* oracle @390: Inter 700 32/35.2 ls normal */
	}

	/*  ===================== error-404 =====================  */
	/* ------------------------------------------------------------------
	   error-404 — webp gradient card, Zodiak 404 / Satoshi ERROR
	   ------------------------------------------------------------------ */
	.error-404 {
		position: relative;
		min-height: 100vh; /* oracle: card is 900 tall in a 900 viewport at every band (leaf-dump 2026-09-17) */
		border-radius: var(--frame-radius);
		overflow: clip;
		display: flex;
		align-items: flex-end;
	}
	.error-404__bg,
	.error-404__bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.error-404__content {
		position: relative;
		width: 100%;
		padding: 0 96px 96px;
		color: var(--color-white);
	}
	/* oracle @1440: text x=112 (16+96); button right/bottom 96 */
	.error-404__code {
		font: var(--type-numeral);
		text-transform: uppercase;
	}
	.error-404__zodiak {
		font: var(--type-numeral-serif);
	}
	/* text-wrap: balance — oracle computed style per element, census at
	   1920/1728/1440/1366/1200/1100/900/390 (scratch/audit/tw.mjs). Balance
	   changes WHERE multi-line text breaks (e.g. lancaster step copy: oracle
	   lines 876–915 wide in a 1060 box, build filled to 1050 @1366). */
	.error-404__copy {
		font: var(--type-lead);
		margin-top: 16px;
		max-width: 12.5em;
		text-wrap: balance;
	}
	/* oracle: Inter 300 24/36; wraps after "looking for" at 24px AND 18px → em-based max-width */
	.error-404 .btn {
		position: absolute;
		right: 96px;
		bottom: 96px;
	}
	@media (min-width: 1800px) {
		/* 404 presets u07s72 / 1xl1zor: 96/100% → 128/100% ("404" 241x160, "Error" 425x160 @1920) */
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* ------------------------------------------------------------------- 404
		   error-404 — @layer components "error-404 — webp gradient card" (the
		   theme's tablet block already has this anatomy; the oracle uses it from
		   1199.98 down, not 1025.98). oracle @1100 (900 viewport): Content pad 64
		   all round, flex, align-items flex-end, justify space-between → text
		   column x=80 (713.3 wide, 206 tall = 404 80 + Error 80 + gap 16 + copy
		   30) and the pill at x=793.3 y=798 (right/bottom edge 1020/852 = card
		   − 64). "404" Zodiak 400 80/80, "Error" Satoshi 500 80/80 (150.7 /
		   265.5 wide), copy Inter 300 20/30 in a 500 max-width box, one line
		   461.7 wide. Build: pad 96 (x=112), 96/96 glyphs, copy 24/36 in 300
		   (2 lines), pill at (761.3, 766). */
		/* Anatomy: oracle = [text column 206 tall (404/Error 160 + gap 16 + copy
		   30)] and [pill 54] bottom-aligned side by side — the pill (798–852)
		   overlaps the Error line (726–806), so a wrap-row layout (theme's tablet
		   block) parks the code row above the pill row and lands the glyphs 10px
		   high (probe: code 636–798 vs oracle 646–806). Two-column grid instead:
		   code + copy in column 1, pill spanning both rows in column 2, all end-
		   aligned → probe with this CSS: code 646/160, copy 822/30, pill 798/54,
		   glyph rects 404 (80,636) / Error (80,716) / copy (80,825) = oracle. */
		.error-404__content {
			padding: 0 64px 64px;
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: end;
		}
		.error-404__code {
			grid-column: 1;
		}
		.error-404__copy {
			grid-column: 1;
			max-width: 500px;
			margin-top: 16px;
		}
		.error-404 .btn {
			position: static;
			grid-column: 2;
			grid-row: 1 / span 2;
			align-self: end;
		}
		/* the Zodiak span shares a line box with the Satoshi <p> strut: different
		   ascent/descent → line 1 grows to 82 (code block 162, oracle 160).
		   Aligning the span to the line-box top keeps the line at 80 (probe). */
		.error-404__zodiak {
			vertical-align: top;
		}
	}
	@media (max-width: 1025.98px) {
		/* oracle @900 */
		/* oracle @900: 64 side/bottom padding; copy (one line, 461 wide) and button share a bottom row, both ending at y=848 */
		.error-404__content {
			padding: 0 64px 64px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-end;
		}
		.error-404__code {
			width: 100%;
		}
		/* oracle @900 */
		.error-404__copy {
			max-width: none;
			margin-top: 8px;
		}
		/* oracle @900: 404/ERROR sit 8px lower than with the desktop 16 gap */
		.error-404 .btn {
			position: static;
		}
	}
	@media (max-width: 809.98px) {
		.error-404 {
			border-radius: var(--frame-radius) var(--frame-radius) 0 0;
			align-items: flex-end;
		}
		.error-404__content {
			padding: 0 40px 40px;
			display: block;
		}
		/* oracle @390: text x=50 (10+40); button bottom 870 in a 910 card */
		/* oracle @390 */
		.error-404__copy {
			margin-top: 8px;
			max-width: 12.5em;
		}
		/* oracle @390: 8px under ERROR; wraps after "looking for" */
		.error-404 .btn {
			position: static;
			width: 100%;
			justify-content: center;
			margin-top: 35px;
		}
	}

	/*  ===================== site-footer =====================  */
	@media (min-width: 1440px) {
		/* ---- footer (main.css @layer layout "Footer") ------------------------
		   oracle footer Container: 80+1280 @1440, 80+1520 @1680, 160+1600 @1920
		   → max-width 1600 centred (build 80+1760 @1920) */
		.site-footer__container {
			max-width: 1600px;
			margin: 0 auto;
		}
	}
	@media (min-width: 1026px) and (max-width: 1199.98px) {
		/* ---------------------------------------------------------------- global
		   footer — @layer layout "Footer: sticky reveal dock" (next to the tablet
		   .site-footer__label 14/19.6 rule). oracle @1100 on EVERY route: "Pages"
		   Inter 500 14/19.6 ls 1, rect 50.3x17 at (969.7, 385.4 viewport-fixed);
		   build 18/25.2 63.2x21 → footer 648.6 vs oracle 643.6 = the +5 dHeight
		   on 404 / cs-harrisburg / discover-it / home / resources.
		   ------------------------------------------------------------------- */
	}

	/*  ===================== waste-search =====================  */
	/* ------------------------------------------------------------------
	   waste-search — LCSWMA's "What do I do with my…" search (not in the
	   Framer export; Janine's ask). WTE dialect of lcswma.org's indigo search
	   band: the stat-card navy→blue gradient with the hero's orange warming
	   one corner, heading-size field over a blue→orange rule, lime pill.
	   ------------------------------------------------------------------ */
	.waste-search {
		background: var(--color-white);
		padding: 48px 128px 120px;
	}
	.waste-search__card {
		max-width: var(--container);
		margin: 0 auto;
		padding: 96px 64px;
		border-radius: 24px;
		background:
			radial-gradient(55% 90% at 100% 100%, rgb(255 139 79 / 0.42), transparent 70%),
			linear-gradient(198deg, #16263e 3.91%, #2461b5 100%);
		color: var(--color-white);
	}
	.waste-search__form {
		max-width: 820px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}
	.waste-search__label {
		font: var(--type-subtitle);
		color: var(--color-mist);
	}
	.waste-search__field {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 24px;
		padding-bottom: 16px;
		border-bottom: 2px solid transparent;
		border-image: linear-gradient(90deg, var(--color-blue), var(--color-orange)) 1;
	}
	.waste-search__field:focus-within {
		border-image: linear-gradient(90deg, var(--color-lime), var(--color-lime)) 1;
	}
	.waste-search__input {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-white);
		font: var(--type-heading);
		letter-spacing: var(--type-heading-ls);
		text-align: center;
		appearance: none;
		outline: none;
	}
	.waste-search__input::placeholder {
		color: var(--color-sky);
		opacity: 0.75;
	}
	.waste-search__input::-webkit-search-cancel-button {
		display: none;
	}
	.waste-search__submit {
		position: relative;
		flex: none;
		gap: 10px;
		border: 0;
		cursor: pointer;
	}
	.waste-search__submit:focus-visible {
		outline: 2px solid var(--color-white);
		outline-offset: 3px;
	}
	.waste-search__icon svg {
		display: block;
		width: 18px;
		height: 18px;
	}
	.waste-search__note {
		font: var(--type-body);
		color: var(--color-mist);
		opacity: 0.8;
	}
	@media (min-width: 1026px) and (max-width: 1439.98px) {
		.waste-search {
			padding-left: 80px;
			padding-right: 80px;
		}
	}
	@media (max-width: 1025.98px) {
		.waste-search {
			padding: 32px 48px 80px;
		}
		.waste-search__card {
			padding: 72px 40px;
		}
	}
	@media (max-width: 809.98px) {
		.waste-search {
			padding: 24px 24px 48px;
		}
		.waste-search__card {
			padding: 48px 24px;
			border-radius: 16px;
		}
		.waste-search__form {
			gap: 16px;
		}
		.waste-search__field {
			gap: 12px;
			padding-bottom: 12px;
		}
		.waste-search__input {
			text-align: left;
		}
		/* phone: the pill shrinks to its magnifier (label stays for screen readers) */
		.waste-search__submit {
			padding: 14px;
		}
		.waste-search__submit .btn__swap {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}
	}

	/*  ===================== custom-cursor =====================  */
	/* Custom cursor (oracle Framer cursor component "voVQg", measured
	   2026-09-25): fixed 100x100 circle rgb(25,25,25), radius 500, centred on
	   the pointer, pointer-events none, above the viewport frame (oracle z13
	   over frame z10 → here 45 over 40, under the intro curtain 60); label
	   Inter 500 18/25.2, +1px tracking, uppercase, white. Opacity fades ~0.2s
	   in/out (samples .36/.62/.83/.97 at 60/104/147/189ms). Native cursor
	   hidden inside [data-cursor] regions (oracle cursor:none). */
	.custom-cursor {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 45;
		display: grid;
		place-items: center;
		width: 100px;
		height: 100px;
		border-radius: 500px;
		background: #191919;
		color: var(--color-white);
		font: 500 18px/25.2px var(--font-inter);
		letter-spacing: 1px;
		text-transform: uppercase;
		pointer-events: none;
		opacity: 0;
		will-change: transform, opacity;
	}
	.custom-cursor.is-visible {
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		.custom-cursor {
			transition: none;
		}
	}

	/*  ===================== global =====================  */
	.has-custom-cursor [data-cursor],
	.has-custom-cursor [data-cursor] * {
		cursor: none;
	}
}

@layer utilities {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}