/* ============================================================================
OPERATION IRON GATE — styles.css
Order: tokens · base · layout · components · motion · media queries
========================================================================= */
/* ---------------------------------------------------------------- FONTS -- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/anton-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("assets/fonts/archivo-latin-var.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("assets/fonts/archivo-latin-var-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* --------------------------------------------------------------- TOKENS -- */
:root{
/* colour */
--navy:#14233F;
--navy-deep:#0B1729;
--green:#2E7D5B;
--green-bright:#3FBF84;
--orange:#E07A2F;
--orange-soft:#F2B183;
--canvas:#FBF8F3;
--stone:#EFEAE1;
--mist:#DDE7E4;
--hairline:#D6D2CA;
--muted:#6B6F78;
/* #6B6F78 measures 4.75:1 on canvas but only 3.99:1 on the mist band.
Same role, re-lit for that one ground. */
--muted-on-mist:#5F646D;
--on-dark:#FFFFFF;
/* type */
--font-display:"Anton","Arial Narrow",Impact,sans-serif;
--font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* 120px cannot hold the three authored lines: "CALIFORNIA" alone measures
780px in Anton at that size, so a 1080px column broke every sentence into
three rows. 108px is the largest size at which each of the three sentences
breaks into exactly two rows. */
--fs-hero:clamp(44px,7.4vw,108px);
--fs-band:clamp(40px,6vw,84px);
--fs-section:clamp(34px,4.8vw,68px);
--fs-card-heading:clamp(22px,2.2vw,32px);
--fs-feature:20px;
--fs-body-lg:18px;
--fs-body:16px;
--fs-button:14px;
--fs-eyebrow:13px;
--fs-caption:13px;
--fs-figure:clamp(44px,6vw,88px);
--fs-micro:12px;
/* space & shape */
--shell:1440px;
--gutter:24px;
--outer:24px;
--section-y:clamp(80px,10vw,160px);
--r-xs:4px;
--r-sm:8px;
--r-md:16px;
--r-lg:24px;
--r-pill:999px;
/* motion */
--ease-enter:cubic-bezier(0.22,1,0.36,1);
--ease-scrub:cubic-bezier(0.65,0,0.35,1);
--ease-punch:cubic-bezier(0.34,1.56,0.64,1);
}
/* ----------------------------------------------------------------- BASE -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:106px}
body{
margin:0;background:var(--canvas);color:var(--navy);
font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;
font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
h1,h2,h3,h4,h5{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:var(--green);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--navy);text-decoration:underline}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--green-bright);color:var(--navy-deep)}
.u-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--on-dark);color:var(--navy);padding:12px 18px;font-weight:700;border-radius:var(--r-sm)}
.skip:focus{left:14px;top:14px}
/* --------------------------------------------------------------- LAYOUT -- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--outer)}
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,72px);align-items:center}
/* ----------------------------------------------------------- TYPOGRAPHY -- */
.display-hero,.display-band,.display-section{
font-family:var(--font-display);text-transform:uppercase;font-weight:400;
}
.display-hero{font-size:var(--fs-hero);line-height:.92;letter-spacing:-.02em}
.display-band{font-size:var(--fs-band);line-height:.95;letter-spacing:-.015em}
.display-section{font-size:var(--fs-section);line-height:1;letter-spacing:-.01em}
em,.em{font-family:var(--font-body);font-stretch:62%;font-weight:800;font-style:italic;letter-spacing:-.005em}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1}
.body-lg{font-size:var(--fs-body-lg);line-height:1.55;max-width:58ch;text-wrap:pretty}
.caption{font-size:var(--fs-caption);line-height:1.45}
.micro{font-size:var(--fs-micro);line-height:1.5}
/* --------------------------------------------------------------- TICKER -- */
/* Lives inside the sticky header, so it stays pinned as the page scrolls. */
.ticker{background:var(--navy-deep);color:var(--mist);overflow:hidden;border-bottom:1px solid rgba(221,231,228,.1)}
.ticker__rail{display:flex;width:max-content;animation:ticker-run 56s linear infinite}
.ticker__group{display:flex;align-items:center;gap:26px;padding-inline:13px;height:32px;white-space:nowrap;
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(221,231,228,.72)}
.ticker__sep{color:rgba(221,231,228,.26)}
.ticker__motto{color:var(--orange)}
.ticker__live{color:var(--green-bright);display:inline-flex;align-items:center;gap:8px}
.ticker__live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse-dot 2s ease-in-out infinite}
@keyframes ticker-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
/* ------------------------------------------------------------------ NAV -- */
.nav{position:sticky;top:0;z-index:90;background:rgba(251,248,243,0);
transform:translate3d(0,-100%,0);opacity:0;
transition:background 300ms var(--ease-enter),box-shadow 300ms var(--ease-enter),border-color 300ms var(--ease-enter);
border-bottom:1px solid transparent}
.nav.is-loaded{transform:none;opacity:1;transition:transform 500ms var(--ease-enter) 40ms,opacity 500ms var(--ease-enter) 40ms,background 300ms var(--ease-enter),box-shadow 300ms var(--ease-enter),border-color 300ms var(--ease-enter)}
.nav.is-condensed{background:var(--canvas);border-bottom-color:var(--hairline);box-shadow:0 10px 30px -22px rgba(20,35,63,.4)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:98px;transition:height 300ms var(--ease-enter)}
.nav.is-condensed .nav__in{height:74px}
.nav__brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--navy)}
.nav__brand:hover{text-decoration:none}
.nav__mark{height:38px;width:auto;transition:height 300ms var(--ease-enter)}
.nav.is-condensed .nav__mark{height:28px}
.nav__names{display:flex;flex-direction:column;line-height:1.15}
.nav__names b{font-size:14px;font-weight:800;letter-spacing:.01em}
.nav__names span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav__links{display:flex;align-items:center;gap:24px}
.nav__link{position:relative;display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;
color:var(--navy);font-size:14px;font-weight:500;padding-bottom:4px}
.nav__link:hover{color:var(--navy);text-decoration:none}
.nav__link i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);transition:color 220ms var(--ease-enter)}
.nav__link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width 220ms var(--ease-enter)}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{width:100%}
.nav__link:hover i,.nav__link[aria-current="true"] i{color:var(--green)}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__links .nav__menu-donate{display:none} /* .btn sets inline-flex later in the sheet, so this needs the extra class */
.nav__burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}
.nav__menu-donate{display:none;margin-top:14px;width:100%;justify-content:center}
.nav__progress{height:2px;width:0;background:var(--green-bright);transform-origin:left}
/* -------------------------------------------------------------- BUTTONS -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;position:relative;isolation:isolate;
font-family:var(--font-body);font-size:var(--fs-button);font-weight:600;letter-spacing:.02em;line-height:1.7;
padding:14px 28px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;white-space:nowrap;
transition:transform 220ms var(--ease-enter),border-color 220ms var(--ease-enter)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--navy-deep);opacity:0;z-index:-1;transition:opacity 220ms var(--ease-enter)}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:hover::after{opacity:.14}
.btn:active{transform:translateY(0)}
.btn:active::after{opacity:.22}
.btn--primary{background:var(--green);color:var(--on-dark);border-color:var(--green)}
.btn--primary:hover{color:var(--on-dark)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--hairline)}
.btn--outline:hover{color:var(--navy);border-color:var(--navy)}
.btn--outline::after{background:var(--navy)}
.btn--outline:hover::after{opacity:.05}
.btn--on-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.34)}
.btn--on-dark:hover{color:var(--on-dark);border-color:var(--on-dark)}
.btn--on-dark::after{background:var(--on-dark)}
.btn--on-dark:hover::after{opacity:.08}
.btn--sm{padding:10px 20px}
.btn__arrow{transition:transform 220ms var(--ease-enter)}
.btn:hover .btn__arrow{transform:translateX(3px)}
/* ----------------------------------------------------------------- HERO -- */
.hero{position:relative;background:var(--canvas);overflow:hidden;
padding-block:clamp(14px,1.6vw,22px) clamp(56px,7vw,104px)}
.hero__grid{position:relative;z-index:2}
.hero__copy{max-width:min(1010px,74vw)}
.hero__eyebrow{color:var(--navy);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.hero__eyebrow::before{content:"";width:30px;height:2px;background:var(--orange);flex:none}
/* The licensor name is lit rather than tinted: bright green on a deep-navy
pill with a soft green halo — the same treatment as the highlighted line in
the terminal card. #3FBF84 fails on canvas but clears 7.4:1 on #0B1729. */
.hero__eyebrow b{display:inline-flex;align-items:center;gap:8px;color:var(--green-bright);
font-weight:700;letter-spacing:.15em;background:var(--navy-deep);
padding:7px 15px 7px 13px;border-radius:var(--r-pill);cursor:default;
box-shadow:0 0 0 1px rgba(63,191,132,.45),0 0 18px -2px rgba(63,191,132,.55),0 6px 18px -10px rgba(11,23,41,.7);
transition:transform 220ms var(--ease-punch),box-shadow 220ms var(--ease-enter)}
.hero__eyebrow b:hover{transform:translateY(-3px) scale(1.045);
box-shadow:0 0 0 1px var(--green-bright),0 0 30px 0 rgba(63,191,132,.8),0 14px 26px -12px rgba(11,23,41,.8)}
.hero__eyebrow b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-bright);
flex:none;box-shadow:0 0 8px 1px rgba(63,191,132,.9);animation:pulse-dot 2s ease-in-out infinite}
.hero__eyebrow-sep{display:none}
/* Today's answer, sitting between the head and the doors. Not a card and not a
button: one line of copy with an orange rule down its left edge, the same
device as .hero__sub, so it reads as the page speaking rather than as an ad. */
.hero__now{position:relative;margin-top:16px;padding-left:clamp(18px,2vw,28px);max-width:60ch;
color:var(--navy);font-size:clamp(16px,1.15vw,18px);line-height:1.55;
opacity:0;transform:translateY(16px);
transition:opacity 600ms var(--ease-enter) 660ms,transform 600ms var(--ease-enter) 660ms}
.hero__now::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;background:var(--orange)}
.hero__now b{font-weight:700}
.hero__now a{color:var(--navy);font-weight:700;border-bottom:2px solid var(--orange);text-decoration:none}
.hero__now a:hover{color:var(--green);border-bottom-color:var(--green);text-decoration:none}
.is-loaded .hero__now{opacity:1;transform:none}
/* The doors, at hero scale. Reuses .doors__grid/.door verbatim — only the
wrapper, its kicker and the reveal timing are new. */
.hero__doors{position:relative;z-index:2;margin-top:clamp(22px,2.4vw,34px);
opacity:0;transform:translateY(18px);
transition:opacity 640ms var(--ease-enter) 760ms,transform 640ms var(--ease-enter) 760ms}
.is-loaded .hero__doors{opacity:1;transform:none}
.hero__doors-k{color:var(--navy);display:flex;align-items:center;gap:12px;margin:0}
.hero__doors-k::before{content:"";width:30px;height:2px;background:var(--orange);flex:none}
.hero__doors .doors__grid{margin-top:clamp(14px,1.6vw,20px)}
.hero__doors .door{padding:clamp(26px,2.8vw,36px) clamp(22px,2.4vw,32px) clamp(24px,2.6vw,32px)}
/* headline: each line clipped from below. text-wrap:balance splits each
sentence into two rows of even length instead of leaving a one-word orphan
("...WHERE IT / WENT."). */
/* Glyph clearance: overflow:hidden is the wipe clip, so each line box needs
room for Anton's full depth at line-heights below 1 or the baseline row gets
shaved. The negative margin cancels the padding, so line rhythm is unchanged.
Same remedy on .crisis__line, .pull__line, .dsrt__line and .dsrt__hl. */
.reveal-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.11em}
.reveal-line>span{display:block;text-wrap:balance;transform:translateY(105%);transition:transform 820ms var(--ease-enter)}
.is-in .reveal-line>span,.is-loaded .reveal-line>span{transform:translateY(0)}
.reveal-line:nth-child(1)>span{transition-delay:0ms}
.reveal-line:nth-child(2)>span{transition-delay:90ms}
.reveal-line:nth-child(3)>span{transition-delay:180ms}
/* Below the headline the hero used to be four stacked paragraphs of roughly
equal weight (lede, two pills, counties line, pilot note) — no hierarchy and
no punch. It is now three moves: a lede whose first sentence carries navy
weight against a drawn orange tick, ONE oversized action with a text link
beside it, and a mono docket strip that closes the block on a navy rule —
the same register as .rcpt__rail and .fhud elsewhere on the page. */
.hero__sub{position:relative;margin-top:24px;padding-left:clamp(18px,2vw,28px);max-width:60ch;
color:var(--muted);font-size:clamp(17px,1.3vw,20px);line-height:1.6;text-wrap:pretty;
opacity:0;transform:translateY(16px);
transition:opacity 600ms var(--ease-enter) 620ms,transform 600ms var(--ease-enter) 620ms}
/* Draws down as the lede arrives; scaleY keeps it a single composited layer. */
.hero__sub::before{content:"";position:absolute;left:0;top:.34em;bottom:.34em;width:3px;
background:linear-gradient(180deg,var(--orange),rgba(224,122,47,.12));
transform:scaleY(0);transform-origin:0 0;transition:transform 760ms var(--ease-enter) 700ms}
.is-loaded .hero__sub::before{transform:scaleY(1)}
.hero__sub b{color:var(--navy);font-weight:600}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px);margin-top:36px;
opacity:0;transform:translateY(16px);
transition:opacity 600ms var(--ease-enter) 700ms,transform 600ms var(--ease-enter) 700ms}
/* The one loud element in the block: bigger than any other button on the site,
with a green throw under it and a light sweep that crosses on hover. */
.hero__actions .btn--primary{font-size:16px;padding:19px 38px;overflow:hidden;
box-shadow:0 18px 40px -18px rgba(47,158,110,.75),0 2px 0 0 rgba(11,23,41,.06)}
.hero__actions .btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.34) 50%,transparent 66%);
transform:translateX(-120%);transition:transform 720ms var(--ease-enter)}
.hero__actions .btn--primary:hover{transform:translateY(-3px);
box-shadow:0 26px 52px -18px rgba(47,158,110,.85),0 2px 0 0 rgba(11,23,41,.06)}
.hero__actions .btn--primary:hover::before{transform:translateX(120%)}
.hero__actions .btn--primary .btn__arrow{transition:transform 260ms var(--ease-punch)}
.hero__actions .btn--primary:hover .btn__arrow{transform:translateX(5px)}
/* Second action drops the outline pill: two pills side by side read as a choice
between equals, and the pilot is the ask. */
.hero__alt{position:relative;display:inline-flex;align-items:center;gap:10px;color:var(--navy);
font-size:15px;font-weight:600;letter-spacing:.01em;padding-bottom:5px}
.hero__alt:hover{color:var(--navy);text-decoration:none}
.hero__alt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
transform:scaleX(.999);transform-origin:left;transition:transform 300ms var(--ease-enter)}
.hero__alt:hover::after{transform:scaleX(0);transform-origin:right}
.hero__alt span{font-size:13px;transition:transform 260ms var(--ease-punch)}
.hero__alt:hover span{transform:translateX(4px)}
/* Docket strip: the counties line and the pilot note, one row, mono, on a heavy
navy rule — it terminates the hero column instead of trailing off it. */
.hero__note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
max-width:100%;margin-top:clamp(26px,2.8vw,36px);padding-top:13px;
border-top:2px solid var(--navy);color:var(--navy);
font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
opacity:0;transform:translateY(16px);
transition:opacity 600ms var(--ease-enter) 780ms,transform 600ms var(--ease-enter) 780ms}
.hero__note>*{display:inline-flex;align-items:center;gap:10px;margin:0;font:inherit;letter-spacing:inherit}
.hero__note i{width:8px;height:8px;border-radius:50%;background:var(--green-bright);flex:none;
box-shadow:0 0 9px 1px rgba(63,191,132,.75);animation:pulse-dot 2s ease-in-out infinite}
.hero__note .hero__counties{color:var(--muted);margin:0}
.is-loaded .hero__sub,.is-loaded .hero__actions,.is-loaded .hero__note{opacity:1;transform:none}
/* ------------------------------------------------ G1 — ISOMETRIC FIELD -- */
/* Steeper fade: the field stays near-invisible under the headline and only
reaches full strength past the copy column's right edge. */
/* TWO masks composited with intersect, so the field dissolves on every edge
instead of ending on a hard rectangle. Layer 1 is the original steep
horizontal fade: near-invisible under the headline, full strength past the
copy column. Layer 2 is a soft ellipse that eats the top, right and bottom
perimeter, so the outermost columns and the lattice fade into the cream
rather than being clipped by the SVG box. Both -webkit- and standard
composite keywords are required. */
/* WIDTH is --field-w, written by the tweak block at the end of index.html
(default 68vw, was a hard 58vw). The field is the first thing on the page and
it was reading small; the mask below is what stops it ending on a hard edge,
so it can grow without the seam showing. min-width raised 520 -> 620 for the
same reason. */
.field{position:absolute;right:-10%;top:-14%;width:var(--field-w,68vw);min-width:620px;z-index:1;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 34%,#000 62%),radial-gradient(ellipse 76% 72% at 54% 48%,#000 38%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.18) 84%,transparent 96%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.16) 34%,#000 62%),radial-gradient(ellipse 76% 72% at 54% 48%,#000 38%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.18) 84%,transparent 96%);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-composite:source-in;mask-composite:intersect;
opacity:0;transform:scale(.94);
transition:opacity 700ms var(--ease-enter) 220ms,transform 1200ms var(--ease-enter) 220ms}
.is-loaded .field{opacity:1;transform:scale(1)}
.field svg{width:100%;height:auto;overflow:visible}
.field__col-grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);
transition:transform 900ms var(--ease-enter)}
.is-grown .field__col-grow{transform:scaleY(1)}
/* Pulse floor raised from .35: at 4.75:1 the outline is now carrying the
section's argument, so it must stay legible at every point in the cycle. */
.field__hollow{animation:hollow-pulse 3200ms ease-in-out infinite}
@keyframes hollow-pulse{0%,100%{opacity:.72}50%{opacity:1}}
/* Tech field: the hollows march. Dashes travelling along an outline is the
cheapest honest read of "the system is looking and finding nothing here". */
.field__hollow--march path{animation:hollow-march 900ms linear infinite}
@keyframes hollow-march{to{stroke-dashoffset:-13}}
@media (prefers-reduced-motion:reduce){.field__hollow--march path{animation:none}}
/* ==================================================== LEDGER BAND ======= */
/* Full-bleed navy instrument band between the two doors and the capability
strip. The SECTION has no card and no border — the ground change is the
frame. The CANVAS does: restored 2026-08-05 to the client's original plate
(hairline border, 14px radius, inset highlight, deep drop shadow). */
.ledger{position:relative;background:var(--navy-deep);color:var(--on-dark);overflow:hidden;
padding-block:clamp(56px,7vw,96px)}
/* Green filament on the top edge — the seam where the ground above ends. */
.ledger__filament{position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(63,191,132,.75) 22%,rgba(63,191,132,.9) 50%,rgba(63,191,132,.75) 78%,transparent)}
/* 30deg hatch — the same isometric axis as the field graphics and the .cap
extrusion, so the band belongs to the same drawing. Faded at both edges. */
.ledger__hatch{position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(30deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px);
-webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 34%,transparent 78%);
mask-image:radial-gradient(120% 100% at 50% 45%,#000 34%,transparent 78%)}
.ledger__in{position:relative;z-index:1;max-width:1120px;margin-inline:auto}
/* Head is a ROW: label left, pill right, as on the original. */
.ledger__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.ledger__label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#9FB0C8}
/* #3FBF84 fails on canvas but clears 7.4:1 on navy-deep — the one ground where
the live label can carry the colour itself. */
.ledger__live{display:inline-flex;align-items:center;gap:7px;color:var(--green-bright)}
.ledger__live i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;
animation:pulse-dot 2.4s ease-in-out infinite}
.ledger__sep{color:rgba(159,176,200,.5)}
.ledger__badge{display:inline-flex;align-items:center;
font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--green-bright);
border:1px solid rgba(61,167,118,.4);background:rgba(46,125,91,.12);
padding:6px 12px;border-radius:30px;white-space:nowrap}
.ledger__plate{border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -28px rgba(0,0,0,.7)}
.ledger__canvas{display:block;width:100%;height:188px}
.ledger__cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:#6F7E96;margin-top:12px}
@media (max-width:760px){.ledger__canvas{height:160px}.ledger__label{font-size:10.5px;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.ledger__live i{animation:none}}
/* =========================================================== SECTIONS == */
.band-canvas{background:var(--canvas)}
.band-stone{background:var(--stone)}
.band-mist{background:var(--mist)}
.band-navy{background:var(--navy);color:var(--on-dark)}
.band-deep{background:var(--navy-deep);color:var(--on-dark)}
.band-navy .display-section,.band-deep .display-section,
.band-navy .display-band,.band-deep .display-band{color:var(--on-dark)}
.band-navy a,.band-deep a,.foot a{color:var(--green-bright)}
.band-navy a:hover,.band-deep a:hover,.foot a:hover{color:var(--on-dark)}
.sec{padding-block:var(--section-y)}
.sec--tight{padding-block:clamp(56px,7vw,104px)}
.sec__head{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.sec__head::before{content:"";width:30px;height:2px;background:currentColor;flex:none}
/* Orange is a GRAPHIC colour on light grounds, never text — 2.8:1 on canvas,
2.4:1 on mist. The eyebrow keeps its orange rule and sets its words in navy. */
.eyebrow--orange{color:var(--navy)}
.eyebrow--orange.sec__head::before{background:var(--orange)}
.band-navy .eyebrow--orange,.band-deep .eyebrow--orange{color:var(--orange-soft)}
.eyebrow--green{color:var(--green)}
.band-navy .eyebrow--green,.band-deep .eyebrow--green{color:var(--green-bright)}
.lede{margin-top:28px;color:var(--muted)}
.band-mist .lede,.band-mist .srcnote,.band-mist .field-cap,.band-mist .stat__label{color:var(--muted-on-mist)}
.band-navy .lede,.band-deep .lede{color:var(--mist)}
.stack-24>*+*{margin-top:24px}
.hr-rule{height:1px;background:var(--hairline);border:0;margin:0}
.band-navy .hr-rule,.band-deep .hr-rule{background:rgba(221,231,228,.16)}
/* ----------------------------------------------- REVEAL (IO-DRIVEN) ---- */
.rv{opacity:0;transform:translateY(16px);
transition:opacity 700ms var(--ease-enter),transform 700ms var(--ease-enter)}
.rv.is-in{opacity:1;transform:none}
/* ==================================================== CAPABILITY STRIP == */
/* No card, no border: the cream ground IS the frame. It is clamped between two
dark blocks (ledger band above, photo band below), so it needs enough height
to read as a ground rather than a seam — ~400px total, not the ~250px it was. */
.cap{background:var(--canvas);padding:clamp(34px,4vw,64px) var(--outer)}
.cap__plate{position:relative;max-width:var(--shell);margin-inline:auto;overflow:hidden;background:var(--canvas)}
/* Isometric hatch, same 30° geometry as the field graphics — barely there. */
.cap__grid{display:none}
.cap__head{position:relative;z-index:2;display:flex;justify-content:center;
padding:14px clamp(20px,3vw,40px) 30px}
/* Same eyebrow lockup as .hero__eyebrow — orange rule, navy words — so the strip
announces a new section on cream instead of whispering. The green dot stays:
it is the tie back to the live band above. */
.cap__eyebrow{display:flex;align-items:center;gap:12px;margin:0;
font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
color:var(--navy)}
.cap__eyebrow::before{content:"";width:30px;height:2px;background:var(--orange);flex:none}
.cap__eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
box-shadow:0 0 0 4px rgba(46,125,91,.14);animation:pulse-dot 2s ease-in-out infinite}
.cap__foot,.cap__count{display:none}
/* overflow:hidden supplies the marquee's horizontal clip, so the tooltip needs
vertical room INSIDE this box or it is cut entirely. The padding that used to
sit on .cap's bottom edge lives here instead. Top padding is matched to that
reserve so the words sit optically centred instead of pushed to the top. */
.cap__viewport{position:relative;z-index:2;overflow:hidden;padding:74px 0 88px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cap__rail{display:flex;width:max-content;align-items:flex-start;animation:cap-run 40s linear infinite}
.cap__viewport:hover .cap__rail,.cap__viewport:focus-within .cap__rail{animation-play-state:paused}
@keyframes cap-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cap__group{display:flex;align-items:center;gap:56px;padding-right:56px}
/* Hard extrusion along the same 30° axis as the isometric fields — the words
sit above the page like cut steel; hover pushes the block deeper. */
.cap__item{--ext:rgba(20,35,63,.16);
position:relative;display:flex;align-items:center;gap:14px;
text-shadow:1px .6px 0 var(--ext),2px 1.2px 0 var(--ext),3px 1.8px 0 var(--ext),4px 2.4px 0 var(--ext),5px 3px 0 var(--ext);
font-family:var(--font-display);text-transform:uppercase;
font-size:clamp(40px,4.9vw,64px);line-height:1;letter-spacing:-.01em;color:var(--navy);padding:8px 2px 12px;
border-bottom:3px solid transparent;
transition:transform 260ms var(--ease-punch),border-color 220ms var(--ease-enter),color 220ms var(--ease-enter),text-shadow 260ms var(--ease-punch),-webkit-text-stroke-color 220ms var(--ease-enter)}
/* Alternating solid / outlined so the rail has rhythm instead of one grey wall.
Hover deliberately does NOT fill the outline: swapping to solid navy lands the
word on the same colour as its neighbours and loses the treatment. The hover
lives entirely in the extrusion instead — see below. */
/* text-shadow paints BEHIND the glyph, so on a transparent fill the five
extrusion layers show through the letter interiors and the outlined words read
as muddy grey rather than clean navy outlines. Outlined items therefore carry
no extrusion at rest or on hover — their hover thickens the stroke instead.
The stroke stays navy: orange here would be the letterform itself, not a
graphic shadow, and 2.8:1 on cream fails. */
.cap__group>*:nth-child(even){color:transparent;-webkit-text-stroke:2px rgba(20,35,63,.78);text-shadow:none;transition:transform 260ms var(--ease-punch),border-color 220ms var(--ease-enter),-webkit-text-stroke-width 220ms var(--ease-enter),-webkit-text-stroke-color 220ms var(--ease-enter)}
.cap__group>*:nth-child(even):hover,.cap__group>*:nth-child(even):focus-visible{text-shadow:none;-webkit-text-stroke-width:3px;-webkit-text-stroke-color:var(--navy)}
/* Three stepped bars — a two-column slice of the isometric field, so the strip
carries the same solid-means-tracked motif as the signature graphic. */
.cap__item::before{content:"";flex:none;width:15px;height:26px;
background:
linear-gradient(var(--green-bright) 0 0) left 0 bottom 0 / 4px 15px no-repeat,
linear-gradient(var(--green) 0 0) left 5.5px bottom 0 / 4px 26px no-repeat,
linear-gradient(var(--orange) 0 0) left 11px bottom 0 / 4px 9px no-repeat;
transition:transform 220ms var(--ease-punch)}
.cap__item:hover::before,.cap__item:focus-visible::before{transform:translateY(-3px) scaleY(1.14)}
/* Hover: the letterform is untouched — the extrusion doubles in length and turns
orange, so the word lifts off the cream like cut steel catching light. Orange
is legal here because it is a graphic shadow and never carries the text. */
.cap__item:hover,.cap__item:focus-visible{transform:translate3d(-4px,-6px,0);border-bottom-color:var(--orange);text-decoration:none;
--ext:rgba(224,122,47,.92);
text-shadow:1px .6px 0 var(--ext),2px 1.2px 0 var(--ext),3px 1.8px 0 var(--ext),4px 2.4px 0 var(--ext),
5px 3px 0 var(--ext),6px 3.6px 0 var(--ext),7px 4.2px 0 var(--ext),8px 4.8px 0 var(--ext),
9px 5.4px 0 rgba(224,122,47,.8),10px 6px 0 rgba(224,122,47,.62),
11px 6.6px 0 rgba(224,122,47,.44),12px 7.2px 0 rgba(224,122,47,.26),
0 0 30px rgba(224,122,47,.26)}
/* Anchored to the item's left edge, not centred: a centred tooltip on the
left-most item overhangs the strip and gets cut by the marquee's clip. */
.cap__tip{position:absolute;left:0;top:calc(100% + 12px);width:max-content;max-width:280px;
background:var(--navy-deep);color:var(--mist);border-left:3px solid var(--orange);font-family:var(--font-body);font-size:var(--fs-caption);
font-weight:400;text-transform:none;letter-spacing:0;line-height:1.45;white-space:normal;text-shadow:none;
padding:10px 14px;border-radius:var(--r-sm);box-shadow:0 18px 36px -18px rgba(11,23,41,.5);
opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;z-index:5;
transition:opacity 220ms var(--ease-enter),transform 220ms var(--ease-enter),visibility 0s linear 220ms}
.cap__item:hover .cap__tip,.cap__item:focus-visible .cap__tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Anchored left, then clamped inside the marquee's clip by motion.js §12. */
/* ============================================ G2 — INSET BAND ========== */
/* Inset rather than edge-to-edge: warm canvas frames the band on all four
sides, so the image reads as a plate set into the page. */
.gband-frame{background:var(--canvas);padding:clamp(24px,3vw,44px) var(--outer)}
.gband{position:relative;width:100%;max-width:var(--shell);margin-inline:auto;
height:clamp(400px,46vw,600px);overflow:hidden;background:var(--navy-deep);
border-radius:var(--r-sm);display:grid;place-items:center}
.gband__media{position:absolute;inset:-12% 0;will-change:transform}
.gband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Horizontal-only Gaussian blur (stdDeviation "62 0") reads as a directional
SMEAR rather than an out-of-focus blur. The mask holds it solid to 20% then
runs a long multi-stop ramp out to 64% so it dissolves into the sharp plate
with no visible seam. Scaled up and pushed left so the filter's own edge
falloff sits off-canvas. */
.gband__img--smear{transform:scaleX(1.14) translateX(-4%);transform-origin:left center;
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 20%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.68) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.16) 58%,transparent 64%);
mask-image:linear-gradient(90deg,#000 0%,#000 20%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.68) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.16) 58%,transparent 64%);
filter:url(#hsmear)}
/* Scrim does two jobs: an overall navy wash for the band, plus a centred
radial pool that guarantees 4.5:1 for white type over a busy photograph. */
.gband__scrim{position:absolute;inset:0;z-index:2;background:
radial-gradient(62% 56% at 50% 50%,rgba(11,23,41,.74) 0%,rgba(11,23,41,.4) 62%,rgba(11,23,41,.06) 100%),
linear-gradient(180deg,rgba(20,35,63,.5) 0%,rgba(20,35,63,.34) 48%,rgba(11,23,41,.66) 100%)}
/* Tighter measure than the band is wide, so the two sentences balance into
centred rows instead of running the full width edge to edge. */
.gband__title{position:relative;z-index:3;margin:0;max-width:min(23ch,88%);text-align:center;
font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--on-dark);
font-size:clamp(38px,5.4vw,78px);line-height:.94;letter-spacing:-.018em;
text-shadow:0 1px 2px rgba(11,23,41,.7),0 3px 10px rgba(11,23,41,.6),0 10px 40px rgba(11,23,41,.7);
will-change:transform}
.gband__line{display:block;overflow:hidden}
.gband__line>span{display:block;text-wrap:balance;transform:translateY(105%);transition:transform 820ms var(--ease-enter)}
.gband.is-in .gband__line>span{transform:translateY(0)}
.gband__line:nth-child(2)>span{transition-delay:110ms}
/* ============================================ 01 — CRISIS DOCKET HEAD == */
/* Section 01 sets the argument, so its headline runs larger than the other
sections' 68px — but not all the way to the 84px pull-quote band that
follows it, which would flatten the step down into the quote. */
.crisis__top{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding-bottom:18px;margin-bottom:clamp(24px,3vw,38px);
background:linear-gradient(90deg,var(--orange) 0 96px,var(--hairline) 96px) left bottom/100% 1px no-repeat}
.crisis__eyebrow{margin-bottom:0}
.crisis__docket{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);text-align:right}
.crisis__h{font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--navy);
font-size:clamp(34px,4.3vw,62px);line-height:.94;letter-spacing:-.015em}
/* Own clip class, NOT the shared .reveal-line: that one is also unlocked by
`.is-loaded` on , which fires ~30ms after load and would settle these
lines two screens before the reader reaches them. */
.crisis__line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.11em}
.crisis__line>span{display:block;transform:translateY(105%);transition:transform 820ms var(--ease-enter)}
.crisis__h.is-in .crisis__line>span,.crisis__hammer.is-in .crisis__line>span{transform:translateY(0)}
.crisis__h .crisis__line:nth-child(2)>span{transition-delay:90ms}
.crisis__h .crisis__line:nth-child(3)>span{transition-delay:170ms}
/* The verdict sentence stands alone under a heavy orange bar — the bar is a
graphic, it never carries the words. */
.crisis__hammer{display:inline-block;margin-top:clamp(8px,1vw,16px);
font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--navy);
font-size:clamp(34px,4.3vw,62px);line-height:.94;letter-spacing:-.015em}
.crisis__hammer .crisis__line>span{transition-delay:260ms}
.crisis__hammer::after{content:"";display:block;height:5px;margin-top:.12em;background:var(--orange);
transform:scaleX(0);transform-origin:left center;transition:transform 700ms var(--ease-scrub) 380ms}
.crisis__hammer.is-in::after{transform:scaleX(1)}
/* Head + verdict + lede left, field graphic right, both starting at the top —
the two cells are close in height, so no column runs empty. */
.crisis__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,66px);
align-items:start;margin-top:clamp(20px,2.4vw,32px)}
.crisis__lede{margin-top:clamp(22px,2.6vw,34px)}
/* ============================================== THE RECORD TAPE (01) === */
/* One compact ledger strip. All four figures at the same size on one row; a
single 8px tape runs the full plate underneath, and its colour changes are
the column dividers — there are no vertical rules and this is not a card. */
.rcpt{margin-top:clamp(42px,5.2vw,74px);border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.rcpt__rail{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:11px 0 10px;border-bottom:1px solid var(--hairline);
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rcpt__railL{display:inline-flex;align-items:center;gap:9px;color:var(--navy);font-weight:600}
/* Static, not pulsing: the pulse dot is reserved for live data on this site. */
.rcpt__railL i{width:6px;height:6px;background:var(--orange);flex:none}
.rcpt__railR{text-align:right}
.rcpt__row{--cpad:clamp(14px,1.7vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
padding:clamp(20px,2.3vw,30px) 0 clamp(18px,2vw,26px)}
.rcpt__c{display:flex;flex-direction:column;padding-inline:var(--cpad)}
.rcpt__c:first-child{padding-left:0}
.rcpt__c:last-child{padding-right:0}
.rcpt__i{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.rcpt__fig{margin-top:9px;font-family:var(--font-display);text-transform:uppercase;font-weight:400;
font-size:clamp(34px,4.3vw,60px);line-height:.9;letter-spacing:-.015em;
font-variant-numeric:tabular-nums;color:var(--navy)}
/* ZERO is hollow because there is nothing behind it. 2px / .82 alpha is the
readable floor for outlined Anton on cream at this size. */
.rcpt__fig--hollow{color:transparent;-webkit-text-stroke:2px rgba(20,35,63,.3);
transition:-webkit-text-stroke-color 700ms var(--ease-enter) 520ms}
.rcpt.is-in .rcpt__fig--hollow{-webkit-text-stroke-color:rgba(20,35,63,.82)}
@media (forced-colors:active){.rcpt__fig--hollow{color:CanvasText;-webkit-text-stroke:0}}
/* Each cell's segment runs edge to edge — negative insets cancel the cell
padding — so the four meet flush and read as one continuous tape. */
.rcpt__bar{position:relative;height:8px;margin:clamp(13px,1.5vw,18px) calc(-1*var(--cpad)) 0;background:var(--stone)}
.rcpt__c:first-child .rcpt__bar{margin-left:0}
.rcpt__c:last-child .rcpt__bar{margin-right:0}
.rcpt__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);background:var(--navy);
transform:scaleX(0);transform-origin:left center;transition:transform 620ms var(--ease-scrub)}
.rcpt.is-in .rcpt__bar::after{transform:scaleX(1)}
.rcpt__bar[data-tone="spend"]::after{background:var(--orange)}
.rcpt__c:nth-child(1) .rcpt__bar::after{transition-delay:170ms}
.rcpt__c:nth-child(2) .rcpt__bar::after{transition-delay:290ms}
.rcpt__c:nth-child(3) .rcpt__bar::after{transition-delay:410ms}
.rcpt__lab{margin-top:clamp(13px,1.4vw,17px);font-size:var(--fs-caption);line-height:1.45;color:var(--muted)}
/* margin-top:auto lands all four citations on one baseline. */
.rcpt__c .stat__src{margin-top:auto;padding-top:13px;align-self:start}
.stat__src{display:inline-block;margin-top:12px;font-size:11px;line-height:1.4;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);text-decoration:underline;text-decoration-color:var(--hairline)}
.stat__src:hover{color:var(--navy);text-decoration-color:var(--navy)}
/* ============================================== PULL QUOTE (NAVY) ======= */
/* Centred, and the ground carries the meaning: a hairline record grid holds the
band's edges and dissolves to nothing behind the words. The grid drifts one
cell over 44s — compositor-only, and paused unless the band is in view. */
.pull{position:relative;overflow:hidden;padding-block:clamp(84px,10.4vw,166px);text-align:center}
.pull__grid{position:absolute;inset:-44px;pointer-events:none;
background:linear-gradient(rgba(221,231,228,.2) 1px,transparent 1px) 0 0/100% 34px,
linear-gradient(90deg,rgba(221,231,228,.2) 1px,transparent 1px) 0 0/34px 100%;
-webkit-mask-image:radial-gradient(118% 92% at 50% 50%,transparent 0 26%,#000 68%);
mask-image:radial-gradient(118% 92% at 50% 50%,transparent 0 26%,#000 68%);
animation:pull-drift 44s linear infinite}
@keyframes pull-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,-34px,0)}}
.pull:not(.is-in) .pull__grid{animation-play-state:paused}
.pull__in{position:relative;z-index:2}
.pull blockquote{margin:0;display:flex;flex-direction:column;align-items:center}
.pull__q{font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--on-dark);
font-size:clamp(36px,5.6vw,84px);line-height:.98;letter-spacing:-.015em;max-width:min(1180px,100%)}
/* The quoted phrase is the one lit element. `--orange-soft` carries text only
because the ground is navy; `--orange` itself never would. */
.pull__q em{color:var(--orange-soft);text-shadow:0 0 42px rgba(224,122,47,.42),0 0 96px rgba(224,122,47,.2)}
.pull__line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.11em}
.pull__line>span{display:block;transform:translateY(108%);transition:transform 900ms var(--ease-enter)}
.pull.is-in .pull__line>span{transform:translateY(0)}
.pull.is-in .pull__line:nth-child(2)>span{transition-delay:120ms}
.pull__cite{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);
margin-top:clamp(26px,3vw,40px);font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
text-transform:uppercase;color:rgba(221,231,228,.74);font-style:normal;white-space:nowrap}
.pull__cite::before,.pull__cite::after{content:"";flex:none;height:1px;width:clamp(24px,8vw,124px)}
.pull__cite::before{background:linear-gradient(90deg,transparent,rgba(224,122,47,.75))}
.pull__cite::after{background:linear-gradient(90deg,rgba(224,122,47,.75),transparent)}
/* ============================================ THE DATA DESERT (G4) ====== */
/* Fourth pass, 2026-08-03. Built to the client's reference: a full-bleed dark
field, the headline holding the left half at up to 86px, and the two record
panels STAGGERED on the right with the terminal running past the shell's right
edge. This supersedes the aligned-portrait-pair pass (the client sent the
reference and asked for the stagger); the pair still animates on ONE clock at
ONE phase, so the stagger never drifts out of register.
02 The System below sits on the same --navy-deep ground, so the band closes on
a hairline horizon — that rule is the section break. Do not delete it. */
.dsrt{position:relative;overflow:hidden;text-align:left}
/* The section stays on the site's cream canvas — the reference was only ever the
reference for the PANELS, not for the ground. One barely-there stone bloom gives
the pair something to sit on. No grid, no texture, no colour field. */
.dsrt__field{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 56% at 72% 44%,rgba(20,35,63,.05),transparent 70%)}
.dsrt__in{position:relative;z-index:1}
.dsrt__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(34px,4.4vw,68px);align-items:center}
/* The headline is the event here: Anton to 86px, three clipped lines that wipe
up on entry. Uppercase, like every other display line on the page. */
.dsrt__h{margin-top:clamp(20px,2.2vw,32px);font-family:var(--font-display);font-weight:400;
text-transform:uppercase;color:var(--navy);font-size:clamp(32px,4.7vw,68px);
line-height:.92;letter-spacing:-.022em}
/* overflow:hidden is the wipe's clip, so each line box needs room for Anton's
full glyph depth or the baseline row gets shaved. .03em was not enough at
line-height .92 — the padding is opened up and pulled back out with a matching
negative margin, so glyphs clear without changing the line rhythm. */
.dsrt__hl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.11em}
.dsrt__hl>span{display:block;transform:translateY(106%);transition:transform 900ms var(--ease-enter)}
.dsrt__h.is-in .dsrt__hl>span{transform:translateY(0)}
.dsrt__h .dsrt__hl:nth-child(2)>span{transition-delay:120ms}
.dsrt__h .dsrt__hl:nth-child(3)>span{transition-delay:240ms}
/* Small copy under the headline, exactly as the reference sets it: two tight
columns at 13.5px, not the body size. */
.dsrt__cols{columns:2;column-gap:clamp(26px,2.6vw,44px);margin-top:clamp(24px,2.6vw,38px);
font-size:13.5px;line-height:1.62;color:var(--muted)}
.dsrt__cols p{break-inside:avoid;text-wrap:pretty}
.dsrt__cols p+p{margin-top:15px}
.dsrt__cols strong{color:var(--navy);font-weight:700}
/* ---- the stage: two panels, staggered, one clock ---- */
.fstage__ks{display:flex;justify-content:space-between;align-items:baseline;
gap:16px;margin-bottom:clamp(12px,1.4vw,18px)}
.fstage__k{display:flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.19em;
text-transform:uppercase;color:var(--navy)}
.fstage__k::before{content:"";width:5px;height:5px;flex:none;background:var(--orange)}
.fstage__k--b::before{background:var(--green)}
.fstage{position:relative;padding-top:clamp(58px,7vw,110px)}
/* Terminal behind, pinned HIGH and held inside the column — it used to run off the
shell's right edge and the client asked for it pulled back in. */
.fstage__back{position:absolute;top:0;left:40%;right:0;
animation:drift-b 11s ease-in-out infinite}
/* Light chart plate in front, dropped below the terminal's top edge so the two
overlap. Same animation, same duration, no delay: one phase. */
.fstage__front{position:relative;z-index:2;width:min(320px,86%);
animation:drift-a 9s ease-in-out infinite}
/* The pair floats on both axes now. The two clocks differ so the panels have some
life, but the HORIZONTAL travel is capped at ±5px each: the plate may never eat
more of the terminal than --tlpad clears (54px overlap + 10px worst case < 84px). */
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0)}
30%{transform:translate3d(-5px,-11px,0)}60%{transform:translate3d(4px,-6px,0)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0)}
35%{transform:translate3d(5px,-14px,0)}70%{transform:translate3d(-4px,-5px,0)}}
.dsrt__stage:not(.is-in) .fstage__back,.dsrt__stage:not(.is-in) .fstage__front{animation-play-state:paused}
.fpanel{display:flex;flex-direction:column}
.fpanel--chart{background:#fff;border:1px solid var(--stone);border-radius:12px;
box-shadow:0 30px 60px -24px rgba(20,35,63,.34);padding:clamp(15px,1.7vw,21px)}
.fpanel__t{font-size:13px;font-weight:700;line-height:1.35;color:var(--navy)}
/* margin-top:auto parks the chart on the panel floor, so the columns' baseline
sits at a fixed distance from the bottom no matter how the title wraps. */
.vch{margin-top:auto;padding-top:20px}
.vch__plot{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:clamp(6px,.8vw,10px);align-items:end;height:clamp(186px,17vw,214px);
border-bottom:2px solid var(--navy)}
.vch__col{position:relative;height:100%;display:flex;align-items:flex-end}
.vch__bar{display:block;width:100%;height:var(--h,100%);background:var(--navy);
transform:scaleY(0);transform-origin:bottom center;transition:transform 640ms var(--ease-enter)}
.is-charted .vch__bar{transform:scaleY(1)}
/* An unreported year is a hollow column, not a short one: the same
solid-means-tracked reading as the isometric fields. */
.vch__bar--empty{background:repeating-linear-gradient(135deg,rgba(224,122,47,.34) 0 2px,transparent 2px 7px);
box-shadow:inset 0 0 0 1.5px rgba(224,122,47,.5)}
/* The stop is a VERTICAL rule between the last reported year and the first blank
one, drawn downward — 60% is the column-3/4 boundary for a 5-column grid, so
no JS measurement is needed. */
.vch__stop{position:absolute;top:-12px;bottom:-2px;left:60%;width:2px;margin-left:-1px;
background:var(--orange);transform:scaleY(0);transform-origin:top center;
transition:transform 460ms var(--ease-scrub) 620ms}
.is-stopped .vch__stop{transform:scaleY(1)}
.vch__axis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.8vw,10px);margin-top:10px}
.vch__axis>div{text-align:center;min-width:0}
.vch__axis b{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}
.vch__axis span{display:block;margin-top:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
color:var(--navy);font-variant-numeric:tabular-nums}
.vch__axis .na{color:var(--muted)}
.vch__note{display:flex;align-items:center;justify-content:flex-end;gap:7px;
margin-top:14px;padding-top:11px;border-top:1px solid var(--stone);
font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--navy);opacity:0;transition:opacity 400ms var(--ease-enter) 900ms}
.is-stopped .vch__note{opacity:1}
.vch__note i{width:5px;height:5px;flex:none;background:var(--orange)}
/* The record panel. It is one step lighter than the band and carries a hairline,
because a navy-deep panel on a navy-deep ground would have no edge at all. */
.card-a{width:100%;background:var(--navy-deep);border-radius:12px;
box-shadow:0 32px 66px -24px rgba(11,23,41,.5);overflow:hidden}
.card-a__bar{display:flex;align-items:center;justify-content:flex-end;gap:7px;height:30px;padding-inline:13px;
background:rgba(255,255,255,.05);border-bottom:1px solid rgba(221,231,228,.1)}
.card-a__bar i{width:9px;height:9px;border-radius:50%;flex:none}
/* --tlpad is the terminal's left inset. It has to be WIDER than the chart
plate's overlap (max ~85px at 1440) or the plate covers the JSON keys and the
panel reads as broken instead of layered. The window dots move to the right
for the same reason. Reset to 15px at 640, where the panels stop overlapping. */
.card-a__body{--tlpad:clamp(84px,7.5vw,104px);
padding:14px 15px 18px var(--tlpad);font-family:var(--font-mono);font-size:10.5px;line-height:1.62;color:#93A4C0}
/* Hanging indent so a wrapped JSON value reads as a continuation, not as a
new key sitting at column 0. */
.tl{display:block;white-space:pre-wrap;opacity:0;padding-left:2ch;text-indent:-2ch}
.tl.is-typed{opacity:1}
.card-a__req{color:var(--mist);margin-bottom:9px}
.k{color:#93A4C0}.s{color:var(--green-bright)}.n{color:var(--orange)}.num{color:var(--canvas)}.p{color:var(--muted)}
.tl--hl{border-left:2px solid var(--green-bright);background:rgba(63,191,132,.06);
margin-left:-18px;padding-left:calc(16px + 2ch);padding-block:2px}
.caret{display:inline-block;width:6px;height:13px;background:var(--green-bright);vertical-align:-2px;margin-left:2px}
.caret.is-blinking{animation:caret-blink 1.06s steps(2,jump-none) 3}
.caret.is-done{display:none}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* The three figures run the full width under the split as one seamed ledger
strip — the language of 01's record tape, re-lit for a dark ground. */
.fstage__figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:clamp(48px,5.6vw,86px);
border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.fstage__figs>div{padding:clamp(15px,1.8vw,24px) clamp(10px,1.3vw,18px);text-align:center}
.fstage__figs>div+div{border-left:1px solid var(--hairline)}
.fstage__figs b{display:block;font-family:var(--font-display);text-transform:uppercase;
font-size:clamp(28px,3.6vw,54px);line-height:.9;letter-spacing:-.015em;
color:var(--navy);font-variant-numeric:tabular-nums}
.fstage__figs span{display:block;margin-top:9px;font-family:var(--font-mono);font-size:10px;
letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.dsrt__closer{margin-top:clamp(44px,5vw,76px);text-align:center;
font-family:var(--font-display);text-transform:uppercase;
font-weight:400;color:var(--navy);font-size:clamp(27px,4.1vw,58px);line-height:.98;letter-spacing:-.015em}
.dsrt__closer::after{content:"";display:block;height:4px;width:clamp(110px,20vw,280px);background:var(--orange);
margin:clamp(15px,1.7vw,23px) auto 0;transform:scaleX(0);transition:transform 700ms var(--ease-scrub) 320ms}
.dsrt__closer.is-in::after{transform:scaleX(1)}
.dsrt__line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.11em}
.dsrt__line>span{display:block;transform:translateY(108%);transition:transform 880ms var(--ease-enter)}
.dsrt__closer.is-in .dsrt__line>span{transform:translateY(0)}
/* ===================================================== WHO WE ARE (SHELL)
Structure only — every string inside is a labelled placeholder awaiting the
client's copy and staff photographs. Sits on canvas between the navy
"why it's different" band and the deep film band, so the alternation holds. */
.wwa__lede{max-width:64ch}
.wwa__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(38px,4.4vw,66px)}
.wwa__slot{display:flex;flex-direction:column;gap:16px}
/* 4:5 portrait, dashed so it reads unmistakably as an empty slot rather than a
design choice. Replaced by a plain when the photographs arrive. */
.wwa__shot{aspect-ratio:4/5;border:2px dashed rgba(20,35,63,.28);display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.wwa__name{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(21px,1.7vw,26px);line-height:1.05;color:var(--navy)}
.wwa__role{display:block;margin-top:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wwa__todo{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(26px,3vw,40px);padding:11px 16px;
border-left:3px solid var(--orange);background:rgba(20,35,63,.04);
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.srcnote{margin-top:28px;font-size:var(--fs-caption);line-height:1.5;color:var(--muted);font-style:italic;max-width:62ch}
.srcnote--c{margin-inline:auto;text-align:center;max-width:80ch;font-style:normal;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;line-height:1.7}
.dsrt .srcnote{color:var(--muted)}
/* ================================================= G3 — CRISIS FIELD ==== */
.field-inline{position:relative;width:100%}
.field-inline svg{width:100%;height:auto;overflow:visible}
/* HUD line over the field. Mono, small, with a live scan dot. */
.fhud{display:flex;justify-content:space-between;align-items:center;gap:16px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);padding-bottom:9px;border-bottom:1px solid rgba(20,35,63,.18);margin-bottom:14px}
.fhud__l{display:flex;align-items:center;gap:9px;color:var(--navy)}
.fhud__l i{width:7px;height:7px;background:var(--green-deep,#2E7D5B);display:block;
animation:fhud-blink 1500ms steps(1,end) infinite}
@keyframes fhud-blink{0%,60%{opacity:1}61%,100%{opacity:.22}}
.fhud__r{color:var(--muted)}
/* Corner brackets: the field is framed like a readout, not matted like art. */
.field-inline--tech::before,.field-inline--tech::after{content:"";position:absolute;
width:22px;height:22px;pointer-events:none;opacity:.5}
.field-inline--tech::before{left:0;top:0;border-left:2px solid var(--orange);border-top:2px solid var(--orange)}
.field-inline--tech::after{right:0;bottom:0;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange)}
/* Colour key. Each swatch is a flat isometric cap, not a dot. */
.fkey{list-style:none;margin:18px 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.fkey__i{position:relative;padding-left:20px;font-family:var(--font-mono);font-size:11.5px;
letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.fkey__i::before{content:"";position:absolute;left:0;top:.34em;width:11px;height:11px;
background:var(--sw);transform:rotate(45deg) scaleY(.58)}
.fkey__i--hollow{grid-column:1/-1;color:var(--navy)}
.fkey__i--hollow::before{background:none;border:1.6px dashed #6B6F78}
@media (max-width:900px){.fkey{grid-template-columns:1fr}.fkey__i--hollow{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.fhud__l i{animation:none}}
.field-cap{margin-top:22px;font-size:var(--fs-caption);line-height:1.5;color:var(--muted);max-width:44ch}
.field-cap b{color:var(--navy);font-weight:700}
/* ================================================ 02 — THE SYSTEM ======= */
/* Rebuilt 2026-08-03 (2nd rebuild). The four short centred columns and the
.xit exit-state register are both gone — the client called the section too
big and the register wrong for the site. What replaces them is ONE statute
rail: four full-width clauses stacked down the page against a single 2px
gate line, each segment filling green when its clause enters view. No cards,
no borders, no fills, nothing boxed — the rail is the only graphic. The
section head stays centred; the clauses are left-aligned because statute
reads left. Total height is well under the old two-block version. */
.laws{list-style:none;padding:0;margin:clamp(46px,5.5vw,76px) auto 0;max-width:1080px;text-align:left}
.law{position:relative;display:grid;
grid-template-columns:clamp(78px,8vw,118px) minmax(0,1fr) clamp(160px,17vw,250px);
align-items:start;gap:clamp(18px,2.6vw,44px);
padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) clamp(22px,2.6vw,36px)}
/* The rail: a dim segment per clause, butted so the four read as one line, and
a green fill that draws top-to-bottom when the clause lights. */
.law::before,.law::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px}
.law::before{background:rgba(221,231,228,.16)}
.law::after{background:var(--green-bright);transform:scaleY(0);transform-origin:top center;
transition:transform 700ms var(--ease-scrub);box-shadow:0 0 18px rgba(63,191,132,.45)}
.law.is-on::after{transform:scaleY(1)}
.law+.law{border-top:1px solid rgba(221,231,228,.1)}
/* Outlined numeral; fills green with the rail and on hover. */
.law__n{font-family:var(--font-display);font-size:clamp(40px,4.6vw,68px);line-height:.82;letter-spacing:-.02em;
color:transparent;-webkit-text-stroke:1.6px rgba(221,231,228,.34);font-variant-numeric:tabular-nums;
transition:color 420ms var(--ease-enter),-webkit-text-stroke-color 420ms var(--ease-enter)}
.law.is-on .law__n{-webkit-text-stroke-color:rgba(63,191,132,.55)}
.law:hover .law__n{color:var(--green-bright);-webkit-text-stroke-color:transparent}
.law__t{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.005em;
font-size:clamp(24px,2.9vw,40px);line-height:1.02;color:var(--on-dark);text-wrap:balance}
.law__b{margin-top:14px;font-size:clamp(14.5px,1.15vw,16px);line-height:1.62;
color:rgba(221,231,228,.68);max-width:62ch;text-wrap:pretty}
.law__b b{color:var(--on-dark);font-weight:600}
/* Kicker sits in the third column as a stamp: mono, right-aligned, with a rule
that draws in from the right when the clause lights. */
.law__k{justify-self:end;text-align:right;padding-top:.5em;font-family:var(--font-mono);
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(221,231,228,.5);
transition:color 320ms var(--ease-enter)}
.law__k span{display:inline-block;padding-bottom:9px;position:relative}
.law__k span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green-bright);
transform:scaleX(0);transform-origin:right center;transition:transform 620ms var(--ease-scrub) 140ms}
.law.is-on .law__k{color:var(--green-bright)}
.law.is-on .law__k span::after,.law:hover .law__k span::after{transform:scaleX(1)}
@media (max-width:860px){
.law{grid-template-columns:clamp(56px,13vw,78px) minmax(0,1fr);row-gap:14px}
.law__k{grid-column:2;justify-self:start;text-align:left;padding-top:0}
.law__k span::after{transform-origin:left center}
}
/* ======================================================= TIMELINE ======= */
.tline{margin-top:clamp(48px,6vw,80px)}
.tline__track{position:relative;height:2px;background:rgba(221,231,228,.2);margin:38px 0 0}
.tline__fill{position:absolute;inset:0;background:var(--green-bright);transform:scaleX(0);transform-origin:left center;
transition:transform 1100ms var(--ease-scrub)}
.is-drawn .tline__fill{transform:scaleX(1)}
.tline__marks{display:flex;justify-content:space-between;margin-top:-6px}
.tline__m{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}
.tline__m i{width:10px;height:10px;border-radius:50%;background:var(--mist);border:2px solid var(--navy-deep);
transform:scale(0);transition:transform 200ms var(--ease-punch)}
.is-drawn .tline__m i{transform:scale(1)}
.tline__m:nth-child(1) i{transition-delay:80ms}.tline__m:nth-child(2) i{transition-delay:300ms}
.tline__m:nth-child(3) i{transition-delay:520ms}.tline__m:nth-child(4) i{transition-delay:740ms}
.tline__m:nth-child(5) i{transition-delay:960ms}
.tline__m b{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.tline__m--key i{background:var(--green-bright);width:14px;height:14px}
.tline__m--key b{color:var(--green-bright)}
.tline__m small{font-size:10px;color:rgba(221,231,228,.6);text-align:center;max-width:14ch}
/* ============================ 03 THE GLASS — PUBLIC VIEW PANE (.gpv) ====
Rebuilt 2026-08-03. The old white bordered dashboard card (.glass) is gone.
Reasons: it was the only bordered card on a page that separates sections by
ground colour alone, every value on it read oversized, and the whole thing
was left-aligned inside a section whose head is now centred.
The public view is now a FULL-BLEED dark pane — the ledger-band precedent:
no border, no radius, no shadow, never a floating plate on cream. The
masthead IS the eye-catcher (Anton wordmark + spaced mono subline between
hairlines); the metrics sit under it, centred and deliberately SMALLER than
before (40px, was 44px on a much heavier card). Green and orange may carry
text here because the ground is navy-deep (7.4:1). */
.gpv{position:relative;margin-top:clamp(44px,5.5vw,74px);padding-block:clamp(42px,4.8vw,66px);
background:var(--navy-deep);color:var(--mist);overflow:hidden;text-align:center}
/* Instrument grid, masked to a soft pool behind the masthead. */
.gpv::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(63,191,132,.09) 1px,transparent 1px) 0 0/100% 36px,
linear-gradient(90deg,rgba(63,191,132,.07) 1px,transparent 1px) 0 0/36px 100%;
-webkit-mask-image:radial-gradient(120% 78% at 50% 30%,#000 8%,transparent 70%);
mask-image:radial-gradient(120% 78% at 50% 30%,#000 8%,transparent 70%)}
/* Slow scan sweep. TRANSFORM, not background-position: the first version
animated a full-bleed background and repainted the whole pane every frame,
which starved the main thread even with the pane off screen. This band is
compositor-only, and it is paused unless the pane is in view (.is-vis is
toggled by motion.js §10). */
.gpv::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(63,191,132,.13),transparent);
animation:gpv-scan 11s linear infinite}
@keyframes gpv-scan{from{transform:translateY(-100%)}to{transform:translateY(320%)}}
.gpv:not(.is-vis)::after{animation-play-state:paused}
.reel:not(.is-vis) .reel__ring{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.gpv::after{animation:none;opacity:0}}
.gpv__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.gpv__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:rgba(183,196,218,.74)}
.gpv__title{margin-top:16px;display:flex;flex-direction:column;align-items:center}
.gpv__t1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
font-size:clamp(46px,7.4vw,110px);line-height:.88;letter-spacing:-.015em;color:#fff;
text-shadow:0 0 46px rgba(63,191,132,.34),0 0 90px rgba(63,191,132,.16)}
.gpv__t2{display:flex;align-items:center;gap:clamp(12px,2vw,20px);margin-top:clamp(12px,1.4vw,18px);
font-family:var(--font-mono);font-size:clamp(11px,1.05vw,14px);letter-spacing:.36em;
text-transform:uppercase;color:var(--orange-soft);white-space:nowrap}
.gpv__t2::before,.gpv__t2::after{content:"";flex:none;height:1px;width:clamp(20px,7vw,96px)}
.gpv__t2::before{background:linear-gradient(90deg,transparent,rgba(242,177,131,.8))}
.gpv__t2::after{background:linear-gradient(90deg,rgba(242,177,131,.8),transparent)}
.gpv__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;
margin-top:clamp(20px,2.4vw,30px);font-family:var(--font-mono);font-size:11.5px;
letter-spacing:.13em;text-transform:uppercase;color:rgba(183,196,218,.8)}
.gpv__live{display:inline-flex;align-items:center;gap:8px;color:var(--green-bright);font-weight:600}
.gpv__live i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;
box-shadow:0 0 10px 1px rgba(63,191,132,.9);animation:pulse-dot 2s ease-in-out infinite}
.gpv__sep{color:rgba(183,196,218,.34)}
.gpv__badge{margin-top:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--orange-soft);border:1px solid rgba(242,177,131,.38);
background:rgba(224,122,47,.1);border-radius:var(--r-pill);padding:7px 16px}
.gpv__grid{display:grid;grid-template-columns:repeat(4,1fr);width:100%;
margin-top:clamp(34px,4vw,54px);border-top:1px solid rgba(221,231,228,.14)}
.gpv__cell{padding:clamp(22px,2.4vw,32px) 18px 4px;border-left:1px solid rgba(221,231,228,.14)}
.gpv__cell:first-child{border-left:0}
.gpv__cell h4{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:rgba(183,196,218,.82)}
.gpv__v{display:block;margin-top:14px;font-family:var(--font-display);font-size:clamp(32px,3.2vw,40px);
line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.gpv__cell p{margin-top:9px;font-size:var(--fs-micro);line-height:1.45;color:rgba(183,196,218,.66)}
.spark{display:block;margin:16px auto 0;width:100%;max-width:132px;height:30px;overflow:visible}
.spark path{fill:none;stroke:var(--green-bright);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 900ms var(--ease-enter)}
.is-in .spark path{stroke-dashoffset:0}
.gpv__foot{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.4vw,34px);
margin-top:clamp(30px,3.4vw,44px);padding-top:18px;width:100%;
border-top:1px solid rgba(221,231,228,.14);
font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:rgba(183,196,218,.78)}
.gpv__fi{display:inline-flex;align-items:center;gap:9px}
.gpv__fi::before{content:"";width:5px;height:5px;flex:none;background:rgba(183,196,218,.5);
transform:rotate(45deg)}
.gpv__fi--ok{color:var(--green-bright)}
.gpv__fi--ok::before{background:var(--green-bright);box-shadow:0 0 8px 1px rgba(63,191,132,.7)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(48px,6vw,72px)}
.trio h3{font-size:var(--fs-feature);font-weight:600;line-height:1.3;color:var(--navy)}
.trio p{margin-top:12px;font-size:var(--fs-body);line-height:1.6;color:var(--muted)}
.sec--center .trio p{max-width:38ch;margin-inline:auto}
/* ==================================== WHY IT'S DIFFERENT — VERDICT (.vs) ==
Rebuilt 2026-08-03. The old .cmp was two full-shell columns of body copy —
read as a wide spreadsheet, fought the centred sections around it, and the
left head "The state's approach" was rejected (it is now "The current
system"). What ships is a NARROW centred verdict ledger: max 780px, one row
per claim, the failed line struck in mono above the Iron Gate answer, with
an outlined Anton numeral in the gutter. No card, no border box — rows are
separated by hairlines only, in keeping with the rest of the page. */
.display-section--narrow{font-size:clamp(30px,4vw,54px);max-width:26ch;margin-inline:auto}
.vs{max-width:1080px;margin:clamp(34px,4vw,54px) auto 0;text-align:center;
opacity:0;transform:translateY(22px);
transition:opacity 760ms var(--ease-enter),transform 760ms var(--ease-enter)}
.is-in.vs{opacity:1;transform:none}
.vs__legend{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,26px);
margin-bottom:6px;padding:0 clamp(16px,3vw,54px) 16px}
.vs__key{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
padding:8px 15px;border-radius:var(--r-pill);border:1px solid;justify-self:end}
.vs__key--old{color:var(--orange-soft);border-color:rgba(242,177,131,.36);background:rgba(224,122,47,.09)}
.vs__key--new{color:var(--green-bright);border-color:rgba(63,191,132,.42);background:rgba(63,191,132,.09);
box-shadow:0 0 26px -8px rgba(63,191,132,.5);justify-self:start}
.vs__vs{font-family:var(--font-display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;
color:rgba(221,231,228,.42)}
/* One line per claim: failure right-aligned into the centre, answer out of it.
Stacked rows ran the section to a screen and a half — the page is long
enough already, so the pair reads across, not down. */
.vs__row{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:clamp(12px,2vw,26px);padding:clamp(14px,1.5vw,19px) clamp(16px,3vw,54px);
border-top:1px solid rgba(221,231,228,.14);transition:background 280ms var(--ease-enter)}
.vs__row:last-child{border-bottom:1px solid rgba(221,231,228,.14)}
.vs__row:hover{background:rgba(63,191,132,.055)}
/* Outlined Anton numeral in the gutter — same stamp idea as the 04 clause
plate, kept low-contrast so it never competes with the copy. */
.vs__n{position:absolute;left:clamp(-4px,.4vw,6px);top:50%;transform:translateY(-50%);
font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);line-height:1;
color:transparent;-webkit-text-stroke:1px rgba(221,231,228,.16);pointer-events:none;
transition:-webkit-text-stroke-color 280ms var(--ease-enter)}
.vs__row:hover .vs__n{-webkit-text-stroke-color:rgba(63,191,132,.42)}
/* Size floor: the strike is a 1px rule across a 13-14px mono cap. Any smaller
and the rule swallows the letterforms — the claim has to stay legible while
being crossed off. */
.vs__then{font-family:var(--font-mono);font-size:clamp(13px,1.05vw,14px);letter-spacing:.09em;
text-transform:uppercase;color:var(--orange-soft);line-height:1.5;text-align:right}
.vs__txt{position:relative;display:inline}
.vs__txt::after{content:"";position:absolute;left:-2px;right:-2px;top:.55em;height:1px;background:var(--orange);
transform:scaleX(0);transform-origin:left center;transition:transform 380ms var(--ease-scrub)}
.is-in .vs__txt::after{transform:scaleX(1)}
.vs__row:nth-of-type(2) .vs__txt::after{transition-delay:110ms}
.vs__row:nth-of-type(3) .vs__txt::after{transition-delay:220ms}
.vs__row:nth-of-type(4) .vs__txt::after{transition-delay:330ms}
.vs__row:nth-of-type(5) .vs__txt::after{transition-delay:440ms}
/* Orange-to-green hairline: the correction, drawn as one gesture. */
.vs__arrow{width:clamp(22px,3vw,44px);height:1px;flex:none;
background:linear-gradient(90deg,rgba(224,122,47,.85),rgba(63,191,132,.9));
transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--ease-scrub) 120ms}
.is-in .vs__arrow{transform:scaleX(1)}
.vs__now{font-size:clamp(14.5px,1.25vw,17px);line-height:1.45;color:var(--on-dark);
font-weight:500;text-wrap:pretty;text-align:left}
.vs__mark{display:inline-block;margin-right:10px;color:var(--green-bright);font-weight:700;
transform:scale(.7);opacity:0;transition:transform 220ms var(--ease-punch),opacity 220ms linear}
.is-in .vs__mark{transform:scale(1);opacity:1}
.vs__row:nth-of-type(2) .vs__mark{transition-delay:200ms}
.vs__row:nth-of-type(3) .vs__mark{transition-delay:300ms}
.vs__row:nth-of-type(4) .vs__mark{transition-delay:400ms}
.vs__row:nth-of-type(5) .vs__mark{transition-delay:500ms}
/* ================================================== FILM REEL (.reel) ====
Rebuilt 2026-08-03. The old .film slot was a 900px dashed 16:9 box hung off
a left-aligned head — it read as an empty div, not as an invitation to watch.
The plate is now CENTRED and SMALLER (760px), framed by corner registration
ticks with a glowing green play control, and it is click-to-play: with a
YouTube id in data-yt on .reel, motion.js §16 swaps in the nocookie embed on
click, so nothing third-party loads until the reader asks for it. No id ->
the plate stays a labelled placeholder. Never autoplay. */
.reel{max-width:760px;margin:clamp(30px,3.4vw,48px) auto 0}
.reel__meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:11px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(183,196,218,.78);margin-bottom:16px}
.reel__tag{color:var(--green-bright)}
.reel__sep{color:rgba(183,196,218,.34)}
.reel__frame{position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:clamp(20px,3vw,40px);
background:
radial-gradient(80% 60% at 50% 45%,rgba(63,191,132,.12),transparent 70%),
linear-gradient(rgba(221,231,228,.05) 1px,transparent 1px) 0 0/100% 30px,
linear-gradient(90deg,rgba(221,231,228,.04) 1px,transparent 1px) 0 0/30px 100%,
#0A1424;
box-shadow:inset 0 0 0 1px rgba(221,231,228,.14),0 40px 90px -50px rgba(0,0,0,.9)}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Corner registration ticks — the plate is a monitor, not a card, so the frame
is drawn at the corners only and there is no radius. */
.reel__t{position:absolute;width:22px;height:22px;pointer-events:none}
.reel__t--tl{top:-1px;left:-1px;border-top:2px solid var(--orange);border-left:2px solid var(--orange)}
.reel__t--tr{top:-1px;right:-1px;border-top:2px solid var(--orange);border-right:2px solid var(--orange)}
.reel__t--bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--green-bright);border-left:2px solid var(--green-bright)}
.reel__t--br{bottom:-1px;right:-1px;border-bottom:2px solid var(--green-bright);border-right:2px solid var(--green-bright)}
.reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:clamp(66px,7vw,86px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(63,191,132,.55);
background:rgba(11,23,41,.72);display:grid;place-items:center;cursor:pointer;
box-shadow:0 0 40px -6px rgba(63,191,132,.5);
transition:transform 260ms var(--ease-punch),box-shadow 260ms var(--ease-enter),background 260ms linear}
.reel__play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(63,191,132,.16);
box-shadow:0 0 60px 0 rgba(63,191,132,.75)}
.reel__play:active{transform:translate(-50%,-50%) scale(.97)}
.reel__tri{width:0;height:0;margin-left:5px;border-left:19px solid var(--green-bright);
border-top:12px solid transparent;border-bottom:12px solid transparent}
/* Sonar ring — the one thing on the page that pulses outward; it is what pulls
the eye to the film. */
.reel__ring{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(63,191,132,.6);
animation:reel-sonar 2.6s var(--ease-enter) infinite}
@keyframes reel-sonar{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.65);opacity:0}100%{transform:scale(1.65);opacity:0}}
@media (prefers-reduced-motion:reduce){.reel__ring{animation:none;opacity:.5}}
.reel__slot{align-self:end;justify-self:center;text-align:center;font-size:var(--fs-micro);
line-height:1.5;color:rgba(183,196,218,.72);max-width:52ch}
.reel__slot b{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;
text-transform:uppercase;color:var(--orange-soft);margin-bottom:7px}
.reel__slot code{font-family:var(--font-mono);font-size:11px;color:var(--mist)}
.reel.is-live .reel__slot,.reel.is-live .reel__play,.reel.is-live .reel__t,.reel.is-live .reel__alt{display:none}
/* Shown only when the embed was refused (see motion.js §16) — the film is
still one click away. */
.reel__alt{position:absolute;left:50%;bottom:clamp(18px,3vw,30px);transform:translateX(-50%);display:none;
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--navy-deep);background:var(--green-bright);padding:11px 20px;border-radius:var(--r-pill);
white-space:nowrap;transition:transform 220ms var(--ease-punch),box-shadow 220ms var(--ease-enter)}
.reel__alt:hover{color:var(--navy-deep);text-decoration:none;transform:translateX(-50%) translateY(-2px);
box-shadow:0 0 34px -6px rgba(63,191,132,.8)}
.reel.is-blocked .reel__alt{display:inline-block}
.reel.is-blocked .reel__play{opacity:.35;pointer-events:none}
/* With a video id present the "not supplied" note goes away — the plate is a
real player then, just not loaded yet. */
.reel.is-ready .reel__slot{display:none}
/* With the poster in, the instrument grid would fight the frame. */
.reel.has-poster .reel__frame{background-blend-mode:normal}
.reel__cap{margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:rgba(183,196,218,.66)}
.reel__out{color:var(--green-bright);border-bottom:1px solid rgba(63,191,132,.4);padding-bottom:2px}
.reel__out:hover{color:var(--on-dark);border-bottom-color:var(--on-dark);text-decoration:none}
/* ========================================================== PILOT ======= */
/* Rebuilt 2026-08-03. The 2x2 white `.qcard` grid is gone: the site carries no
cards anywhere else, and four of them pushed the section past two screens.
Everything in 04 is centred now, and the four commitments share ONE clause
plate. No panel, no border — the type and the seams are the structure. */
.sec--center{text-align:center}
.sec--center .lede{margin-inline:auto}
/* Centred eyebrow: rules on BOTH sides so the axis stays true. */
.sec__head--c{justify-content:center}
.sec__head--c::after{content:"";width:30px;height:2px;background:currentColor;flex:none}
.eyebrow--orange.sec__head--c::after{background:var(--orange)}
.pcm{margin-top:clamp(40px,5vw,68px);display:grid;justify-items:center}
/* ---- clause rail. Hairline dividers between tabs, orange underscore on the
live one — orange stays graphic, the word is navy. ---- */
.pcm__rail{display:flex;flex-wrap:wrap;justify-content:center}
.pcm__tab{position:relative;background:none;border:0;cursor:pointer;padding:12px 22px 14px;
display:inline-flex;align-items:baseline;gap:9px;color:var(--muted);
font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
transition:color 200ms var(--ease-enter)}
.pcm__tab+.pcm__tab{box-shadow:-1px 0 0 var(--hairline)}
.pcm__tab i{font-family:var(--font-mono);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--muted);transition:color 200ms var(--ease-enter)}
.pcm__tab::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--orange);
transform:scaleX(0);transform-origin:center;transition:transform 260ms var(--ease-enter)}
.pcm__tab:hover{color:var(--navy)}
.pcm__tab:hover i{color:var(--green)}
.pcm__tab.is-on{color:var(--navy)}
.pcm__tab.is-on i{color:var(--green)}
.pcm__tab.is-on::after{transform:scaleX(1)}
/* Dwell meter: the plate advances itself, and the fill says how long is left. */
.pcm__meter{width:min(100%,720px);height:2px;background:var(--hairline);margin-top:2px;overflow:hidden}
.pcm__meter span{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left center}
/* ---- the plate. Clauses are stacked absolutely and the stage animates its own
height to the live clause, so switching never jumps the page and a short
clause does not leave a long one's worth of dead cream behind it. ---- */
.pcm__stage{position:relative;width:100%;margin-top:clamp(58px,7vw,104px);
min-height:190px; /* no-JS floor ONLY — must stay under the shortest panel or the measured height never governs */
transition:height 460ms var(--ease-enter)}
.pcm__panel{position:absolute;inset:0 0 auto 0;display:grid;justify-items:center;
opacity:0;transform:translateY(14px);pointer-events:none;
transition:opacity 460ms var(--ease-enter),transform 560ms var(--ease-enter)}
.pcm__panel.is-on{opacity:1;transform:none;pointer-events:auto}
.pcm__panel[hidden]{display:grid} /* hidden is the a11y state; the stack needs the box to keep its cell */
.pcm__panel[hidden]:not(.is-on){visibility:hidden}
/* Stamped numeral behind the words. Outlined, not filled: a filled ghost read
as a brown smudge under the heading, and the 30° extrusion on a shape this
large fought the type. Stroke only — graphic, carries no reading. */
.pcm__num{position:absolute;top:-.08em;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none;
font-family:var(--font-display);font-size:clamp(132px,16vw,232px);line-height:.78;letter-spacing:.01em;
color:transparent;-webkit-text-stroke:2px rgba(20,35,63,.15);text-stroke:2px rgba(20,35,63,.15)}
.pcm__h{position:relative;z-index:1;max-width:22ch;font-family:var(--font-display);text-transform:uppercase;font-weight:400;
color:var(--navy);font-size:clamp(32px,5.4vw,74px);line-height:.92;letter-spacing:-.018em}
.pcm__p{position:relative;z-index:1;margin-top:clamp(18px,2vw,26px);max-width:52ch;
font-size:var(--fs-body-lg);line-height:1.55;color:var(--muted);text-wrap:pretty}
.pcm__stamp{position:relative;z-index:1;margin-top:clamp(22px,2.4vw,32px);display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcm__stamp i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--green)}
@media (max-width:640px){
.pcm__tab{padding:10px 14px 12px;font-size:11.5px;letter-spacing:.1em}
.pcm__tab::after{left:14px;right:14px}
.pcm__tab+.pcm__tab{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
.pcm__panel{transition:none;transform:none}
.pcm__meter{display:none}
}
/* The closer is the last thing said in the section and now carries no buttons,
so it is set as a monument: centred, full-shell width, seam above and below,
and the words extruded 30° so they stand off the cream like cut steel. */
.closer{margin-top:clamp(64px,8vw,120px);text-align:center;display:grid;justify-items:center;
gap:clamp(26px,3.4vw,46px)}
.closer__seam{display:block;width:min(100%,760px);height:3px;
background:linear-gradient(90deg,var(--orange) 0 34%,var(--green) 34% 67%,rgba(20,35,63,.34) 67% 100%);
transform:scaleX(0);transform-origin:center;transition:transform 780ms var(--ease-scrub) 120ms}
.closer.is-in .closer__seam{transform:scaleX(1)}
.closer.is-in .closer__seam--b{transition-delay:300ms}
.closer__l{--ext:rgba(20,35,63,.13);
font-family:var(--font-display);text-transform:uppercase;font-weight:400;color:var(--navy);
font-size:clamp(34px,6.2vw,98px);line-height:.9;letter-spacing:-.022em;max-width:34ch;
text-shadow:1px .6px 0 var(--ext),2px 1.2px 0 var(--ext),3px 1.8px 0 var(--ext),
4px 2.4px 0 var(--ext),5px 3px 0 var(--ext),6px 3.6px 0 var(--ext),7px 4.2px 0 var(--ext)}
.closer__line{display:block;overflow:hidden;padding-bottom:.02em}
.closer__line>span{display:block;transform:translateY(106%);transition:transform 900ms var(--ease-enter)}
.closer.is-in .closer__line>span{transform:translateY(0)}
.closer.is-in .closer__line:nth-child(2)>span{transition-delay:110ms}
.closer.is-in .closer__line:nth-child(3)>span{transition-delay:230ms}
/* "lives" keeps the italic condensed em and takes an orange underscore — the
rule is graphic, the word itself stays navy. */
.closer__l em{position:relative;color:var(--navy)}
.closer__l em::after{content:"";position:absolute;left:-.02em;right:-.02em;bottom:.02em;height:.075em;
background:var(--orange);transform:scaleX(0);transform-origin:left center;
transition:transform 620ms var(--ease-scrub) 520ms}
.closer.is-in .closer__l em::after{transform:scaleX(1)}
/* Closing line reads as the verdict: heavier extrusion, wider tracking. */
.closer__line--fix{margin-top:.1em}
.closer__line--fix>span{--ext:rgba(224,122,47,.42);letter-spacing:.005em;
text-shadow:1px .6px 0 var(--ext),2px 1.2px 0 var(--ext),3px 1.8px 0 var(--ext),
4px 2.4px 0 var(--ext),5px 3px 0 var(--ext),6px 3.6px 0 var(--ext),7px 4.2px 0 var(--ext),
8px 4.8px 0 var(--ext),9px 5.4px 0 rgba(20,35,63,.16)}
@media (prefers-reduced-motion:reduce){
.closer__seam,.closer__line>span,.closer__l em::after{transition:none;transform:none}
}
/* =================================================== CONTACT BAND ======= */
/* Replaces the form section, deleted 2026-08-03. Full-bleed navy-deep with no
card and no border — identical framing logic to the ledger band, and the same
reason: green and orange only read as live on a dark ground.
Console plate left, ask right; the two swap order below 1080. */
.ctb{position:relative;background:var(--navy-deep);color:var(--on-dark);overflow:hidden;padding-block:clamp(78px,9vw,140px)}
/* Tri-colour seam, echoing the footer topline — orange, green, steel. */
.ctb__filament{position:absolute;inset:0 0 auto;height:2px;opacity:.9;
background:linear-gradient(90deg,var(--orange) 0 34%,var(--green) 34% 67%,#7A92B6 67% 100%)}
.ctb__hatch{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(122,146,182,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(122,146,182,.075) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(120% 95% at 28% 42%,#000 22%,transparent 76%);
mask-image:radial-gradient(120% 95% at 28% 42%,#000 22%,transparent 76%)}
/* Orange as LIGHT, never as a fill behind text — the only way it is allowed to
sit this close to the console copy. */
.ctb__bloom{position:absolute;left:-8%;top:50%;width:min(780px,72%);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
background:radial-gradient(circle,rgba(224,122,47,.20),rgba(224,122,47,0) 62%)}
.ctb__in{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(44px,6vw,96px);align-items:center}
/* ---- the console plate. Replaces the clock in the reference layout: the
platform itself rather than a metaphor for it. ---- */
.term{position:relative;animation:term-float 9s ease-in-out infinite}
.term__frame{position:relative;border-radius:14px;overflow:hidden;
background:linear-gradient(180deg,#101E36,#0A1322);border:1px solid rgba(122,146,182,.30);
box-shadow:0 50px 90px -42px rgba(0,0,0,.92),inset 0 0 0 1px rgba(255,255,255,.04),0 0 70px -26px rgba(63,191,132,.32);
transform:perspective(1600px) rotateY(3.6deg) rotateX(1.1deg);
transition:transform 620ms var(--ease-enter),box-shadow 620ms var(--ease-enter)}
.term:hover .term__frame,.term:focus-within .term__frame{transform:perspective(1600px) rotateY(0) rotateX(0) translateY(-5px);
box-shadow:0 60px 100px -42px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.06),0 0 90px -22px rgba(63,191,132,.5)}
@keyframes term-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.term__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(122,146,182,.22)}
.term__leds{display:flex;gap:7px;flex:none}
.term__leds i{width:9px;height:9px;border-radius:50%;background:rgba(122,146,182,.34)}
.term__leds i:first-child{background:var(--orange);box-shadow:0 0 9px rgba(224,122,47,.65)}
.term__title{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(159,176,200,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__secure{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex:none;
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright)}
.term__secure i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px 1px rgba(63,191,132,.85);animation:pulse-dot 2s ease-in-out infinite}
/* No min-height: the seven line boxes are built empty at load and already hold
the screen open, so typing never shifts the plate and there is no dead room
under the last line. */
.term__screen{position:relative;overflow:hidden;padding:22px clamp(18px,2vw,28px) 20px;
background:radial-gradient(120% 100% at 18% 0%,rgba(63,191,132,.08),transparent 62%)}
.term__screen::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.term__scan{position:absolute;left:0;right:0;top:0;height:36%;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(63,191,132,.13) 48%,transparent);
animation:term-scan 6.5s linear infinite}
@keyframes term-scan{0%{transform:translateY(-100%)}100%{transform:translateY(320%)}}
.tml{position:relative;font-family:var(--font-mono);font-size:clamp(11.5px,1.02vw,14px);line-height:2.02;letter-spacing:.02em;
white-space:nowrap;color:var(--mist);opacity:0;transition:opacity 180ms linear;min-height:2.02em}
.tml.is-on{opacity:1}
/* The closing line is the promise the whole system makes — it gets the same
green filament treatment as the highlighted row in the float card. */
.tml--seal{margin-left:calc(-1 * clamp(18px,2vw,28px));padding-left:calc(clamp(18px,2vw,28px) - 2px);
border-left:2px solid var(--green-bright);background:rgba(63,191,132,.07)}
.tm-p{color:var(--green-bright)}
.tm-c{color:var(--on-dark)}
.tm-k{color:#93A4C0}
.tm-d{color:rgba(147,164,192,.5)}
.tm-w{color:var(--canvas)}
.tm-s{color:var(--green-bright)}
.tm-n{color:var(--orange-soft)}
.tmcaret{display:inline-block;width:8px;height:1em;background:var(--green-bright);vertical-align:-.16em;margin-left:3px;
box-shadow:0 0 10px rgba(63,191,132,.85);animation:tm-blink 1.05s steps(1,end) infinite}
@keyframes tm-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.term__foot{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);padding:14px clamp(18px,2vw,28px);
border-top:1px solid rgba(122,146,182,.22);background:rgba(9,18,33,.7)}
.term__stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.term__stat b{font-family:var(--font-mono);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.term__stat--zero b{color:var(--green-bright)}
.term__stat small{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(159,176,200,.82)}
/* Same badge rule as The Glass: nothing numeric ships without it until the
pilot produces verified figures. */
.term__tag{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--orange-soft);border:1px solid rgba(242,177,131,.42);border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap}
/* ---- the ask ---- */
.ctb__copy{max-width:58ch}
.ctb__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,42px)}
/* colour is not optional here: `.band-deep a` (0-1-1) outranks `.btn--primary`
(0-1-0), and this is the first .btn--primary ANCHOR on a dark ground on the
page — without it the label renders --green-bright on --green, 2.2:1. */
.ctb__cta .btn--primary{color:var(--on-dark);box-shadow:0 0 0 1px rgba(63,191,132,.42),0 16px 36px -18px rgba(63,191,132,.85)}
.ctb__cta .btn--primary:hover{color:var(--on-dark);box-shadow:0 0 0 1px var(--green-bright),0 0 36px -6px rgba(63,191,132,.75)}
.ctb__cta .btn--outline{color:var(--on-dark);border-color:rgba(221,231,228,.32)}
.ctb__cta .btn--outline:hover{color:var(--on-dark);border-color:var(--green-bright)}
.ctb__urgency{display:flex;align-items:center;gap:12px;margin-top:28px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(159,176,200,.95)}
.ctb__urgency::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.ctb__direct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px;
margin-top:30px;padding-top:24px;border-top:1px solid rgba(122,146,182,.24)}
.ctb__direct li{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:var(--fs-body);color:var(--on-dark)}
.ctb__direct span{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(159,176,200,.85)}
.ctb__direct a{overflow-wrap:anywhere}
@media (max-width:1080px){
.ctb__in{grid-template-columns:1fr;gap:clamp(40px,6vw,60px)}
.ctb__copy{order:1;max-width:none}
.ctb__stage{order:2}
.term__frame{transform:none}
.term:hover .term__frame,.term:focus-within .term__frame{transform:translateY(-4px)}
}
@media (max-width:560px){
.ctb__direct{grid-template-columns:1fr}
.term__foot{flex-wrap:wrap;gap:14px}
.term__tag{margin-left:0}
.tml{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
.term,.term__scan,.tmcaret,.term__secure i{animation:none}
.term__frame{transform:none}
.tml{opacity:1}
}
/* ================================ THE EVIDENCE + CLOSE (FOOTER) =========
Structure follows the client-supplied reference layout: a centred card grid
of citations on the cream ground, then a dark close carrying one claim, one
CTA, a thin link row, and the wordmark clipped by the page edge. The five
sources are the only figures allowed on the page — never delete a card. */
.ev__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ev__kicker{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--navy)}
.ev__kicker span{width:clamp(26px,5vw,64px);height:1px;background:var(--orange)}
.ev__h{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.025em;
font-size:clamp(46px,8.4vw,132px);line-height:.86;color:var(--navy)}
.ev__note{max-width:54ch;font-size:var(--fs-caption);line-height:1.6;color:var(--muted)}
.ev__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(38px,4.6vw,64px);
border-top:1px solid var(--hairline);padding-top:clamp(30px,3.6vw,46px)}
.ev__card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
padding:26px 20px 18px;text-decoration:none;background:#fff;border:1px solid var(--hairline);border-radius:14px;
transition:border-color 220ms linear,transform 260ms var(--ease-enter),box-shadow 260ms linear}
.ev__card:hover{border-color:rgba(46,125,91,.4);transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,35,63,.11)}
.ev__bar{position:absolute;top:0;left:0;right:0;height:4px;background:var(--orange);
transform:scaleX(.3);transform-origin:left;transition:transform 320ms var(--ease-enter),background 220ms linear}
.ev__card:hover .ev__bar{transform:scaleX(1);background:var(--green)}
.ev__n{font-family:var(--font-display);font-size:clamp(34px,3.4vw,46px);line-height:.8;letter-spacing:-.02em;
color:rgba(20,35,63,.16);transition:color 220ms linear}
.ev__card:hover .ev__n{color:rgba(46,125,91,.34)}
.ev__t{font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.008em;
font-size:clamp(17px,1.55vw,22px);line-height:.96;color:var(--navy)}
.ev__d{font-size:var(--fs-micro);line-height:1.55;color:var(--muted)}
.ev__src{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;
border-top:1px solid var(--hairline)}
.ev__dom{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
transition:color 200ms linear}
.ev__card:hover .ev__dom{color:var(--green)}
.ev__go{font-size:13px;color:var(--muted);transition:color 200ms linear,transform 260ms var(--ease-enter)}
.ev__card:hover .ev__go{color:var(--green);transform:translate(3px,-3px)}
.close{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--mist);padding-bottom:clamp(34px,4vw,56px)}
.close__topline{height:3px;background:linear-gradient(90deg,var(--orange) 0 34%,var(--green) 34% 67%,rgba(221,231,228,.55) 67% 100%)}
.close__field{position:absolute;inset:0;opacity:.6;pointer-events:none;
background-image:linear-gradient(rgba(221,231,228,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(221,231,228,.04) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%)}
.close .shell{position:relative}
.close__claim{max-width:22ch;margin:clamp(56px,7vw,104px) auto 0;text-align:center;color:var(--on-dark);
font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.02em;
font-size:clamp(30px,4.6vw,72px);line-height:.96}
.close__claim em{font-style:normal;font-family:inherit;font-stretch:100%;letter-spacing:inherit;color:var(--green-bright)}
.close__cta{display:flex;justify-content:center;margin-top:clamp(26px,3vw,38px)}
.close__nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,3vw,44px);
margin-top:clamp(52px,6.5vw,92px);padding-top:clamp(28px,3.4vw,42px);border-top:1px solid rgba(221,231,228,.14)}
.close__nav a{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--on-dark);
font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.01em;
font-size:clamp(17px,1.9vw,26px);line-height:1;transition:color 180ms linear,transform 220ms var(--ease-enter)}
.close__nav a i{font-style:normal;font-size:.62em;letter-spacing:.08em;color:var(--orange-soft);transition:color 180ms linear}
.close__nav a:hover{color:var(--green-bright);transform:translateY(-2px)}
.close__nav a:hover i{color:var(--green-bright)}
.close__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px clamp(14px,2vw,26px);
margin-top:clamp(20px,2.4vw,30px);font-size:var(--fs-micro);letter-spacing:.02em}
.close__meta a,.close__meta span{font-size:var(--fs-micro);line-height:1.5}
.close__meta a{color:rgba(221,231,228,.72);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.close__meta a:hover{color:var(--green-bright);border-bottom-color:currentColor}
.close__meta span{color:rgba(221,231,228,.66);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.close__mark{text-align:center;margin:clamp(44px,5.5vw,80px) 0 0;padding-inline:clamp(18px,4vw,44px);white-space:nowrap;
font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:-.035em;
font-size:clamp(44px,12.4vw,214px);line-height:.8;color:var(--on-dark);
margin-bottom:-.06em;-webkit-user-select:none;user-select:none}
.close__legal{margin:clamp(36px,4.5vw,64px) auto 0;text-align:center;
font-size:var(--fs-micro)!important;line-height:1.7;color:rgba(221,231,228,.55);max-width:78ch}
.close__legal b{color:rgba(221,231,228,.85);font-weight:700}
@media (max-width:1040px){.ev__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.ev__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ev__grid{grid-template-columns:1fr}}
.needs{color:var(--orange-soft);font-style:normal;font-stretch:100%;font-weight:600;letter-spacing:0;border-bottom:1px dashed currentColor}
/* jump CTA repeated at the end of each section */
.jump{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(40px,5vw,60px);
font-size:var(--fs-caption);font-weight:600;letter-spacing:.02em;color:var(--green);
border-bottom:1px solid transparent;padding-bottom:3px}
.jump:hover{color:var(--navy);border-bottom-color:var(--navy);text-decoration:none}
.band-navy .jump,.band-deep .jump{color:var(--green-bright)}
.band-navy .jump:hover,.band-deep .jump:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}
/* -------------------------------------------------------------- MOTION -- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.nav{transform:none;opacity:1}
.reveal-line>span{transform:none}
.hero__sub,.hero__actions,.hero__note,.field{opacity:1;transform:none}
.hero__eyebrow b:hover{transform:none}
.field__col-grow{transform:scaleY(1)}
/* Everything that waits on an observer or a keyframe is revealed outright. */
.rv,.vs{opacity:1;transform:none}
.gband__line>span,.card-a,.card-b{transform:none}
.gband__media{transform:none!important}
.gband__title{transform:none!important}
.chart__bar{transform:scaleX(1)}
.chart__stopline{transform:scaleX(1)}
.chart__stoplabel{opacity:1}
.tline__fill{transform:scaleX(1)}
.tline__m i{transform:scale(1)}
.vs__mark{transform:scale(1);opacity:1}
.vs__txt::after,.vs__arrow{transform:scaleX(1)}
.spark path{stroke-dashoffset:0}
.rcpt__bar::after,.crisis__hammer::after{transform:none}
.pull__grid{animation:none}
.pull__line>span{transform:none}
.crisis__line>span{transform:none}
.dsrt__line>span{transform:none}
.dsrt__closer::after{transform:none}
.rcpt__fig--hollow{-webkit-text-stroke-color:rgba(20,35,63,.82)}
.tl{opacity:1}
.caret{display:none}
.cap__rail,.ticker__rail{animation:none}
.fstage__back,.fstage__front{animation:none}
.dsrt__h .dsrt__hl>span{transform:none}
.vch__bar{transform:scaleY(1)}
.vch__stop{transform:scaleY(1)}
.vch__note{opacity:1}
}
/* ------------------------------------------------------ MEDIA QUERIES -- */
@media (max-width:1240px){
.nav__links{gap:18px}
.nav__link{font-size:13px}
.nav__cta .btn{padding:12px 20px}
}
@media (max-width:1080px){
.nav__links{display:none}
.nav__burger{display:block}
.nav__cta .btn{padding:11px 17px;font-size:13px}
.hero__copy{max-width:min(880px,92vw)}
.nav__links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;
background:var(--canvas);border-bottom:1px solid var(--hairline);padding:8px var(--outer) 18px}
.nav__links.is-open .nav__link{width:100%;padding-block:13px;border-bottom:1px solid var(--hairline)}
.nav__links.is-open .nav__link::after{display:none}
}
@media (max-width:1180px){
/* Stop overlaying the field once the copy column would collide with it. */
.hero__copy{max-width:none}
/* Stacked full-width under the copy, so the horizontal "stay out from under
the headline" fade is meaningless and is dropped. The radial edge blend is
kept — it is what stops the field ending on a hard rectangle, which matters
at every width. */
.field{position:relative;right:auto;top:auto;width:100%;min-width:0;margin-top:44px;
-webkit-mask-image:radial-gradient(ellipse 82% 78% at 50% 48%,#000 40%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.18) 86%,transparent 97%);
mask-image:radial-gradient(ellipse 82% 78% at 50% 48%,#000 40%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.18) 86%,transparent 97%);
-webkit-mask-composite:source-over;mask-composite:add}
.hero{padding-block:clamp(18px,2.2vw,30px) clamp(48px,6vw,88px)}
}
@media (max-width:1024px){
/* The desert split stacks. The two panels keep their overlap but stop drifting,
and the terminal stops bleeding — it sits flush to the right of the measure. */
.dsrt__split{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,4vw,46px)}
/* Same arrangement as desktop, just without the bleed: the terminal stays
pinned HIGH and the chart plate drops across its bottom-left corner. Do not
invert these — an earlier pass put the plate on top and the terminal low, and
the client rejected it. The pair keeps drifting on the one clock. */
.fstage{padding-top:clamp(70px,9vw,120px)}
.fstage__back{left:33%;right:0;top:0}
.fstage__front{width:min(340px,84%)}
/* Four rule columns pair up; the seam moves from vertical to horizontal. */
.laws{grid-template-columns:repeat(2,1fr)}
.law:nth-child(3){border-left:0}
.law:nth-child(-n+2){padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid rgba(221,231,228,.14)}
.law:nth-child(n+3){padding-top:clamp(20px,2.4vw,30px)}
/* The tape folds to two columns; each row's segments still meet flush. */
.rcpt__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(24px,2.8vw,34px)}
.rcpt__c:nth-child(2n+1){padding-left:0}
.rcpt__c:nth-child(2n){padding-right:0}
.rcpt__c:nth-child(2n+1) .rcpt__bar{margin-left:0}
.rcpt__c:nth-child(2n) .rcpt__bar{margin-right:0}
.rcpt__c:nth-child(2n) .rcpt__bar{margin-left:calc(-1*var(--cpad))}
.gpv__grid{grid-template-columns:1fr 1fr}
.gpv__cell:nth-child(3){border-left:0}
.gpv__cell:nth-child(-n+2){border-bottom:1px solid rgba(221,231,228,.14);padding-bottom:22px}
.trio{grid-template-columns:1fr}
}
@media (max-width:900px){
:root{--outer:16px}
.nav__cta .btn--outline{display:none} /* the menu carries Donate below 900 */
.nav__links .nav__menu-donate{display:flex}
.split{grid-template-columns:1fr}
.crisis__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
.crisis__top{flex-direction:column;align-items:flex-start;gap:10px}
.crisis__docket{text-align:left}
.quad{grid-template-columns:1fr}
.laws{grid-template-columns:1fr}
.law+.law{border-left:0}
.law:nth-child(2){padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid rgba(221,231,228,.14)}
/* Register stacks on the axis: index above the state, tag below it. */
.xit__row,.xit__void{grid-template-columns:1fr;justify-items:center;gap:5px}
.xit__i,.xit__tag{justify-self:center}
.xit__s::after{left:0;right:0}
.tl{opacity:1}
.cap__item{font-size:29px;gap:10px}
.cap__item::before{width:12px;height:21px;
background:
linear-gradient(var(--green-bright) 0 0) left 0 bottom 0 / 3px 12px no-repeat,
linear-gradient(var(--green) 0 0) left 4.5px bottom 0 / 3px 21px no-repeat,
linear-gradient(var(--orange) 0 0) left 9px bottom 0 / 3px 7px no-repeat}
.cap__group{gap:32px;padding-right:32px}
.cap__viewport{padding:40px 0 76px}
.cap__head{padding-bottom:20px}
.gband{height:clamp(340px,52vw,440px)}
.tline__m small{display:none}
}
@media (max-width:640px){
.dsrt__cols{columns:1}
/* Panels stop overlapping here, so the terminal's inset goes back to normal. */
.card-a__body{--tlpad:15px}
.fstage{padding-top:0}
.fstage__back{position:relative;left:auto;right:auto;top:auto;width:100%}
.fstage__front{width:100%;margin-top:16px}
.fstage__ks{flex-direction:column;gap:9px;align-items:flex-start}
.fstage__figs{grid-template-columns:minmax(0,1fr)}
.fstage__figs>div+div{border-left:0;border-top:1px solid var(--hairline)}
.rcpt__row{grid-template-columns:minmax(0,1fr);row-gap:30px}
.rcpt__c{padding-inline:0}
.rcpt__bar{margin-inline:0}
.rcpt__c .stat__src{margin-top:0}
.pull__cite{white-space:normal;letter-spacing:.18em}
.pull__cite::before,.pull__cite::after{display:none}
.vs__n{display:none}
.vs__legend{grid-template-columns:1fr;gap:10px;justify-items:center}
.vs__key,.vs__key--new{justify-self:center}
.vs__row{grid-template-columns:1fr;gap:9px;text-align:center;padding-block:18px}
.vs__then,.vs__now{text-align:center}
.vs__arrow{justify-self:center;width:44px}
.gpv__grid{grid-template-columns:1fr}
.gpv__cell{border-left:0;border-bottom:1px solid rgba(221,231,228,.14);padding-bottom:22px}
.gpv__cell:last-child{border-bottom:0}
.gpv__t2{letter-spacing:.2em;white-space:normal}
.card-b__figs{grid-template-columns:1fr;gap:14px}
.tline__marks{flex-wrap:wrap;gap:18px}
}
@media (max-width:400px){
.reveal-line>span{transform:none}
.hero__sub,.hero__actions,.hero__note{transform:none}
/* Below 400px nothing animates except opacity. */
.rv,.vs{transform:none!important}
.gband__line>span{transform:none}
.card-a,.card-b{animation:none}
}
/* ======================================================= HERO COUNTIES ===
The county/agency briefing ask, demoted out of the button row. It speaks to
procurement; the hero speaks to the people this program serves and to the
donors funding the pilot. Mono and small on purpose — findable, not
competing with the primary ask. */
.hero__counties{font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.hero__counties a{color:var(--navy);border-bottom:1px solid var(--orange);text-decoration:none}
.hero__counties a:hover{color:var(--green);border-bottom-color:var(--green);text-decoration:none}
.hero__counties button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;
border-bottom:1px solid var(--orange);transition:color 180ms var(--ease-enter),border-color 180ms var(--ease-enter)}
.hero__counties button:hover,.hero__counties button:focus-visible{color:var(--green);border-bottom-color:var(--green)}
/* ======================================================= ACCOUNTABILITY ===
Seamed cells, no cards — the same rule the rest of the page follows. Left
aligned against a left-aligned head: it is a register of documents, not a
statement, so it should read like the ledger strips in 01 rather than like
the centred argument sections. */
.acct__h{max-width:24ch;margin-inline:0}
.acct__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:clamp(30px,3.4vw,46px);
border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.acct__cell{padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,24px);border-left:1px solid var(--hairline)}
.acct__cell:first-child{border-left:0}
.acct__k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.acct__v{margin-top:12px;font-size:var(--fs-caption);line-height:1.55;color:var(--navy)}
/* ==================================================== SCHEMATIC FIELD ===
The plot writes scaleY on every band on every scroll frame, so the 900ms
entrance transition has to come off or each write would be animating toward
a value the next write replaces. Registration marks fade on their own short
transition, which scroll does not fight. */
.field--plot .field__col-grow{transition:none}
.field__marks{transition:opacity 260ms var(--ease-enter)}
/* ############################################################################
MULTI-PAGE PASS 2026-08-05 — APPENDED, NOTHING ABOVE THIS LINE TOUCHED.
----------------------------------------------------------------------------
Adds the two doors, the case-flow rail, and the two audience paths that now
live on their own pages (get-help.html / for-organizations.html).
Every value below is drawn from a token already in :root or reuses a literal
verbatim from the component it is deliberately speaking the language of. No
new colour, no new font, no new breakpoint, no new radius.
Breakpoints used: 1440 / 1240 / 900 / 640 / 400 — all already in the sheet.
######################################################################### */
/* =============================================== THE TWO DOORS (.doors) ====
Sits directly under the hero, above the ledger band, on --stone.
REBUILT 2026-08-05, founder brief: both doors must "stand out a lot" and
pull the reader in. They were white .ev__card boxes with a text link; they
are now two lit navy-deep plates — the only place on the page where a card
glows — each with a solid pill action and a slow sheen that crosses the pair
in sequence (door 2 delayed, so it reads as one sweep, not two loops).
Dark ground is also what makes the palette legal here: --green-bright is
7.4:1 on navy-deep and --orange-soft carries text at 8.9:1, neither of which
is permitted on a light card. Sheen and glow are dropped under
prefers-reduced-motion at the end of the sheet. */
.doors__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(26px,3vw,40px)}
.door{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;text-decoration:none;isolation:isolate;
padding:clamp(32px,3.6vw,48px) clamp(24px,2.8vw,38px) clamp(28px,3.2vw,38px);
border:0;border-radius:18px;
background:radial-gradient(120% 130% at 10% 0%,rgba(63,191,132,.2),transparent 58%),linear-gradient(168deg,#132744 0%,var(--navy-deep) 64%);
box-shadow:0 0 0 1px rgba(63,191,132,.3),0 26px 60px -30px rgba(11,23,41,.9),0 0 54px -22px rgba(63,191,132,.42);
transition:transform 320ms var(--ease-enter),box-shadow 320ms var(--ease-enter)}
.door--org{background:radial-gradient(120% 130% at 10% 0%,rgba(224,122,47,.22),transparent 58%),linear-gradient(168deg,#1A2B4A 0%,var(--navy-deep) 64%);
box-shadow:0 0 0 1px rgba(242,177,131,.3),0 26px 60px -30px rgba(11,23,41,.9),0 0 54px -22px rgba(224,122,47,.4)}
.door:hover{transform:translateY(-8px);text-decoration:none;
box-shadow:0 0 0 1px rgba(63,191,132,.6),0 34px 74px -28px rgba(11,23,41,.95),0 0 84px -18px rgba(63,191,132,.6)}
.door--org:hover{box-shadow:0 0 0 1px rgba(242,177,131,.6),0 34px 74px -28px rgba(11,23,41,.95),0 0 84px -18px rgba(224,122,47,.55)}
/* The sheen. Skewed light bar, crossing on its own clock. */
.door::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:34%;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-18deg);
animation:door-sheen 7s cubic-bezier(.4,0,.2,1) infinite}
.door--org::after{animation-delay:3.5s}
@keyframes door-sheen{0%{left:-45%}42%{left:120%}100%{left:120%}}
.door__bar{position:absolute;top:0;left:0;right:0;height:4px;background:var(--green-bright);
transform:scaleX(1);transform-origin:left;box-shadow:0 0 18px 0 rgba(63,191,132,.8)}
.door--org .door__bar{background:var(--orange);box-shadow:0 0 18px 0 rgba(224,122,47,.75)}
.door__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;font-weight:600;
letter-spacing:.19em;text-transform:uppercase;color:var(--green-bright)}
.door__k::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
box-shadow:0 0 9px 1px currentColor;animation:pulse-dot 2s ease-in-out infinite}
.door--org .door__k{color:var(--orange-soft)}
.door__t{font-family:var(--font-display);text-transform:uppercase;font-weight:400;
font-size:clamp(34px,3.6vw,54px);line-height:.94;letter-spacing:-.01em;color:var(--on-dark);
text-shadow:0 0 40px rgba(63,191,132,.28)}
.door--org .door__t{text-shadow:0 0 40px rgba(224,122,47,.26)}
.door__d{font-size:var(--fs-body);line-height:1.6;color:#C6D2E4;max-width:44ch}
/* Solid pill, not a text link: the action has to look pressable at a glance. */
.door__go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;
margin-top:clamp(16px,2vw,26px);padding:15px 26px;border-radius:var(--r-pill);
background:var(--green-bright);color:var(--navy-deep);
font-size:15px;font-weight:700;letter-spacing:.01em;
box-shadow:0 14px 32px -16px rgba(63,191,132,.9);
transition:transform 240ms var(--ease-punch),background 200ms linear,box-shadow 240ms var(--ease-enter)}
.door--org .door__go{background:var(--orange-soft);box-shadow:0 14px 32px -16px rgba(224,122,47,.85)}
.door:hover .door__go{background:#fff;transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(11,23,41,.65)}
.door__go i{font-style:normal;transition:transform 220ms var(--ease-enter)}
.door:hover .door__go i{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.door::after{display:none}.door__k::before{animation:none}}
@media (max-width:900px){.doors__grid{grid-template-columns:1fr}}
/* ======================================== HOW A CASE MOVES (.gate) =========
A DIAGRAM, never a screenshot and never a mockup — five steps on one
continuous rail. It borrows the record tape's device from 01 rather than
inventing one: cells on one row, each carrying its own segment of a single
rail so the segments meet flush and read as one line, and the rail's COLOUR
CHANGE is the terminus. No boxes, no borders, nothing that reads as a
feature grid. */
/* THE CASE PATH (.path) — replaced the dark .gate pane 2026-08-05.
Type on the cream ground, on the same hairline rule the rest of the page uses
to separate things. THREE louder passes were built and rejected the same day:
milled two-leaf gate hardware and a specular sweep on a --navy-deep pane, a
vertical descent shaft with 104px outlined numerals, then a calmed-down dark
pane. The client's ruling: the dark ground does not belong on this page and
the graphics were doing too much — keep it minimal, just the words, with
something faded behind them.
So the ONLY graphic here is .path__sheet: the site's own hairline record grid,
faded, sitting behind the steps. It correlates with the message rather than
decorating it — the case path is a record, and the same grid carries the pull
band and 01. Do not put a coloured ground, a token, a glow, a status chip or a
loop back on this block. Nothing here animates except a one-time reveal. */
.path{position:relative;margin-top:clamp(40px,4.8vw,64px);text-align:left}
/* The faded record sheet. Masked to a pool behind the type and gone at the
edges, so it never reads as a panel with a boundary. */
.path__sheet{position:absolute;left:calc(-1 * clamp(10px,2vw,40px));right:calc(-1 * clamp(10px,2vw,40px));
top:calc(-1 * clamp(18px,2.4vw,34px));bottom:calc(-1 * clamp(18px,2.4vw,34px));pointer-events:none;
background-image:linear-gradient(90deg,rgba(20,35,63,.055) 1px,transparent 1px),
linear-gradient(rgba(20,35,63,.045) 1px,transparent 1px);
background-size:34px 34px;
-webkit-mask-image:radial-gradient(120% 100% at 50% 46%,#000 26%,rgba(0,0,0,.35) 62%,transparent 88%);
mask-image:radial-gradient(120% 100% at 50% 46%,#000 26%,rgba(0,0,0,.35) 62%,transparent 88%)}
.path__row{position:relative;display:grid;grid-template-columns:repeat(5,1fr);list-style:none}
.path__s{position:relative;padding:clamp(20px,2.2vw,28px) clamp(16px,1.8vw,26px) 0 0;
opacity:0;transform:translateY(14px);
transition:opacity 620ms var(--ease-enter),transform 620ms var(--ease-enter)}
.path.is-in .path__s{opacity:1;transform:none}
.path__s:nth-child(2){transition-delay:110ms}
.path__s:nth-child(3){transition-delay:220ms}
.path__s:nth-child(4){transition-delay:330ms}
.path__s:nth-child(5){transition-delay:440ms}
/* One rule across all five, drawn as five abutting segments so it reads as a
single line. It is a rule, not a rail: no fill, no travelling mark. */
.path__s::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hairline)}
.path__s+.path__s::before{left:calc(-1 * clamp(16px,1.8vw,26px) - 1px)}
.path__s::after{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;background:var(--navy)}
.path__s:last-child::before{background:var(--green)}
.path__s:last-child::after{background:var(--green)}
/* The step figure, faded into the sheet behind its own words. */
.path__n{position:absolute;top:clamp(12px,1.4vw,18px);right:clamp(14px,1.6vw,24px);
font-family:var(--font-display);font-size:clamp(52px,5vw,74px);line-height:.76;font-weight:400;
color:transparent;-webkit-text-stroke:1.5px rgba(20,35,63,.13);pointer-events:none}
.path__k{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;
text-transform:uppercase;color:var(--muted)}
.path__t{position:relative;margin-top:clamp(12px,1.4vw,16px);font-family:var(--font-display);
text-transform:uppercase;font-weight:400;font-size:clamp(20px,1.7vw,25px);line-height:1.04;
letter-spacing:-.005em;color:var(--navy);max-width:13ch}
.path__b{position:relative;margin-top:10px;font-size:var(--fs-caption);line-height:1.6;
color:var(--muted);max-width:27ch}
@media (max-width:1080px){.path__row{grid-template-columns:repeat(2,1fr);row-gap:clamp(20px,3vw,30px)}
.path__s:nth-child(odd)::before{left:0}
.path__b,.path__t{max-width:34ch}}
@media (max-width:600px){.path__row{grid-template-columns:1fr}
.path__s::before{left:0}}
@media (prefers-reduced-motion:reduce){.path__s{opacity:1;transform:none;transition:none}}
/* THE THREE LOCKS (.lock) — cut back hard 2026-08-05.
These three closers must BLEND INTO the case path above them and hand off to
the next section quietly. The louder pass — 34px Anton headings, 80px outlined
numerals, a stone-plated struck string, an 8px green tape under each cell and
an ENFORCED stamp — was rejected as too much and too big.
What is left: one hairline rule, a mono kicker, the statement at body size, and
the forbidden state struck through on the same line. No numerals, no tape, no
stamp, no plate. Orange is the strike rule and nothing else. */
.lock{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
margin-top:clamp(40px,4.6vw,60px);list-style:none;text-align:left}
.lock__c{position:relative;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,30px) 0 0}
.lock__c+.lock__c{padding-left:clamp(18px,2vw,30px);border-left:1px solid var(--hairline)}
.lock__c::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline)}
.lock__c+.lock__c::before{left:calc(-1 * clamp(18px,2vw,30px) - 1px)}
.lock__k{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
text-transform:uppercase;color:var(--muted)}
.lock__t{margin-top:10px;font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--navy);
max-width:26ch}
/* The forbidden state, struck through. The bar is the only graphic in the block. */
.lock__x{position:relative;display:inline-block;margin-top:9px}
.lock__x span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted)}
.lock__x i{position:absolute;left:-1px;right:-1px;top:50%;height:2px;margin-top:-1px;
background:var(--orange);transform:scaleX(0);transform-origin:left;
transition:transform 380ms var(--ease-scrub) 80ms}
.lock__c.is-on .lock__x i{transform:scaleX(1)}
.lock__b{margin-top:10px;font-size:var(--fs-caption);line-height:1.6;color:var(--muted);max-width:34ch}
@media (max-width:900px){.lock{grid-template-columns:1fr;row-gap:0}
.lock__c+.lock__c{padding-left:0;border-left:0}
.lock__c+.lock__c::before{left:0}
.lock__c{padding-bottom:clamp(14px,2vw,20px)}
.lock__t,.lock__b{max-width:40ch}}
@media (prefers-reduced-motion:reduce){.lock__x i{transition:none}}
/* ================================================ --stone, RE-LIT ==========
.band-stone was declared but never used by a section until this pass.
MEASURED: --muted (#6B6F78) on --stone (#EFEAE1) is 4.15:1, below the 4.5:1
floor for normal text. Same problem the sheet already solved for the mist
band, solved the identical way with a token that already exists:
--muted-on-mist (#5F646D) measures 4.83:1 on stone and passes. */
.band-stone .lede,.band-stone .srcnote,.band-stone .field-cap,.band-stone .acct__k{color:var(--muted-on-mist)}
/* ==================================== THE INDIVIDUAL PATH (.help / .qx) ====
Different audience, different rules. Body copy here is --navy (12.8:1 on
stone), NOT --muted: this is read by someone who may be on an old phone, a
cracked screen, outdoors, in a hurry. Legibility beats refinement.
.qx / .qx__rail ARE DEAD RULES. The quick-exit control was removed from every
page 2026-08-05 at the founder's instruction; the rules are kept only so a
stale cached page does not lose its layout, and nothing on the site uses
them. Do not build anything new on them. */
.help__in{position:relative}
.qx__rail{position:absolute;top:0;right:0;bottom:0;width:clamp(118px,15vw,172px);display:flex;justify-content:flex-end;pointer-events:none}
.qx{position:sticky;top:106px;align-self:flex-start;pointer-events:auto;
display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:var(--r-pill);
font-family:var(--font-body);font-size:var(--fs-button);font-weight:700;letter-spacing:.02em;line-height:1.7;
background:var(--navy);color:var(--on-dark);border:1px solid var(--navy);text-decoration:none;
box-shadow:0 10px 30px -22px rgba(20,35,63,.4)}
.qx:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--on-dark);text-decoration:none}
.help__head{padding-right:clamp(128px,16vw,184px)}
/* The brand link sits INSIDE .help__head, directly above the eyebrow — these two
pages have no site nav to carry it. .eyebrow.sec__head declares margin-top:0
because everywhere else on the site it is the first child of its section, so
without this rule the gap is 0 and the two stack into one three-line wordmark:
"Pathfinders for Hope / OPERATION IRON GATE / GET HELP". Both lines are
uppercase letter-spaced Archivo at 11px and 13px, so the eyebrow reads as part
of the logo lockup instead of as the section head. Spaced here, on this block
only — .eyebrow and .sec__head are used by every section on index.html and must
not be touched. Applies to get-help.html, the one page with a brand link
inside .help__head. */
.help__head .nav__brand{margin-bottom:clamp(28px,3.4vw,44px)}
.qx__note{margin-top:16px;max-width:56ch;font-size:var(--fs-micro);line-height:1.55;color:var(--navy)}
.qx__note span{display:block}
.qx__note span+span{margin-top:4px;color:var(--muted-on-mist)}
.help__blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
.help__bt{font-size:var(--fs-feature);font-weight:600;line-height:1.3;color:var(--navy);margin-bottom:14px}
.help__l li{position:relative;font-size:var(--fs-body);line-height:1.6;color:var(--navy);padding-left:22px}
.help__l li+li{margin-top:12px}
.help__l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--green)}
.help__l--n{counter-reset:hn}
.help__l--n li{counter-increment:hn;padding-left:30px}
.help__l--n li::before{content:counter(hn,decimal-leading-zero);top:0;width:auto;height:auto;background:none;
font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted-on-mist);line-height:1.7}
/* Self-enrolment. An ANNOUNCEMENT. No form, no button, no input, by design. */
.help__soon{margin-top:clamp(40px,5vw,64px);padding-top:clamp(26px,3vw,38px);border-top:2px solid var(--navy)}
.help__soon p{max-width:62ch;font-size:var(--fs-body-lg);line-height:1.55;color:var(--navy)}
/* MEASURED: --green on --stone is 4.17:1 — below the 4.5:1 normal-text floor,
above the 3:1 large-text floor. Raising the step to --fs-feature (20px) at
weight 700 clears WCAG's large-text threshold, so the link passes on the size
axis without touching the colour. The selector must be .help__soon .help__211
because `.help__soon p` (0,1,1) outranks a bare `.help__211` (0,1,0). */
.help__soon .help__211{max-width:62ch;margin-top:18px;font-size:var(--fs-feature);line-height:1.55;color:var(--navy)}
.help__211 a{font-weight:700}
/* .jump inside the individual path is re-inked to --navy (13.06:1). MEASURED:
.jump's --green (#2E7D5B) on --stone (#EFEAE1) is 4.17:1 at 13px/600 — below
the 4.5:1 normal-text floor, and 13px at 600 does not reach the large-text
threshold, so it fails outright. Kept after the Spanish language toggle it was
written for was removed (2026-08-05): any future link on this page inherits a
passing colour rather than the failing one, and it holds the standing rule that
green is graphic-only on light grounds. Scoped to .help__in, so index.html and
for-organizations.html are untouched. */
.help__in .jump{color:var(--navy)}
.help__in .jump:hover{color:var(--navy-deep);border-bottom-color:var(--navy-deep)}
@media (max-width:640px){
.help__blocks{grid-template-columns:1fr;gap:clamp(28px,4vw,38px)}
/* THE RAIL LEAVES THE OVERLAY HERE. At desktop it is an absolutely-positioned
strip down the right margin and .help__head reserves a gutter for it. That
mechanism cannot work at this width: the rail spans the whole section, so a
pill sticking at a fixed viewport offset passes over EVERY block below it,
and only the block carrying padding is protected. An earlier version
reserved 52px of padding-top on .help__head; inserting .nav__brand above the
eyebrow (34px tall + 28px margin) then pushed the brand into the pill's
band, covering the tail of "Pathfinders for Hope" — and since the rail is
pointer-events:none with the pill auto, that strip of the only link back to
index.html stopped being clickable. Growing the padding again would fix the
brand and leave .help__blocks and .help__soon still passing underneath.
So: the rail becomes a STICKY element in normal flow, full width, opaque in
the band's own --stone. It occupies its own strip, so it cannot overlap
anything at any scroll position, and it still never scrolls out of view.
.qx drops to static because a sticky child inside an auto-height rail has no
room to travel — the rail is what sticks now. */
.qx__rail{position:sticky;inset:0 auto auto auto;width:100%;padding:12px 0;
background:var(--stone);z-index:5;pointer-events:auto}
.qx{position:static;top:auto}
.help__head{padding-right:0;padding-top:0}
}
/* ================================= THE ORGANIZATION PATH (.org) ============
A director's page. Long on purpose — a program officer deciding whether to
put their organization into an unlaunched pilot needs the answers, and
burying them behind an accordion hides them from the reader AND from search.
Everything is open text: no details element, no tabs, no progressive
disclosure.
TONE RULE, structural and not a style preference: this path never indicts a
provider. Providers are the distribution channel.
The benefit grid reuses .acct__grid / .acct__cell / .acct__k / .acct__v and
the step list reuses .help__l--n. Only the question/answer shape is new. */
.org__lead{margin-top:clamp(46px,5.6vw,76px);padding-bottom:14px;border-bottom:2px solid var(--navy);
font-family:var(--font-display);text-transform:uppercase;font-weight:400;
font-size:var(--fs-card-heading);line-height:1;letter-spacing:-.01em;color:var(--navy)}
.org__lead--top{margin-top:0}
.org__q{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,40px);margin-top:clamp(24px,2.8vw,34px)}
.org__qt{margin-bottom:10px;font-size:var(--fs-feature);font-weight:600;line-height:1.3;color:var(--navy)}
.org__qb{max-width:52ch;font-size:var(--fs-body);line-height:1.6;color:var(--navy)}
.org__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}
/* 26px matches .sec__head's margin-bottom and .ev__card's top padding; 62ch
matches the measure the statute rail bodies already use. */
.org__list{margin-top:26px}
.org__p{max-width:62ch;margin-top:26px;font-size:var(--fs-body);line-height:1.6;color:var(--navy)}
@media (max-width:900px){.org__q{grid-template-columns:1fr}}
/* --- the two paths, re-lit for dark grounds ------------------------------
The org path alternates grounds the way index.html does, so every ink token
it uses needs its dark-ground counterpart. Same inks the sheet already uses
on navy: --on-dark for headings, --mist for body, --green-bright and
--orange-soft for marks (7.4:1 and 5.6:1 on navy-deep). */
.band-navy .org__lead,.band-deep .org__lead{color:var(--on-dark);border-bottom-color:rgba(221,231,228,.55)}
.band-navy .org__qt,.band-deep .org__qt{color:var(--on-dark)}
.band-navy .org__qb,.band-deep .org__qb,
.band-navy .org__p,.band-deep .org__p{color:var(--mist)}
.band-navy .help__l li,.band-deep .help__l li{color:var(--mist)}
.band-navy .help__l li::before,.band-deep .help__l li::before{background:var(--green-bright)}
.band-navy .help__l--n li::before,.band-deep .help__l--n li::before{background:none;color:var(--orange-soft)}
.band-navy .help__bt,.band-deep .help__bt{color:var(--on-dark)}
.band-navy .org__docket,.band-deep .org__docket{color:rgba(221,231,228,.62)}
.band-navy .org__docket b,.band-deep .org__docket b{color:var(--on-dark)}
.band-navy .org__rule,.band-deep .org__rule{background:rgba(221,231,228,.22)}
/* --- a mono docket line, the same device 01's docket head uses ----------- */
.org__docket{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px;
font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted-on-mist)}
.org__docket b{color:var(--navy);font-weight:600}
.org__rule{position:relative;height:2px;margin:16px 0 clamp(26px,3vw,38px);background:var(--hairline)}
.org__rule::after{content:"";position:absolute;left:0;top:0;width:64px;height:2px;background:var(--orange)}
/* ================================================= NAV — SEVEN LINKS ======
The nav gained two links on 2026-08-05 ("Get help", "Organizations"). Five
fitted the desktop row with headroom; seven do not. The burger takeover moves
to 1240 — a breakpoint the sheet ALREADY declares — using the burger
treatment the sheet ALREADY defines, and the declarations below are copied
verbatim from the existing max-width:1080px block. No value is changed and no
nav element is restyled: the same menu simply opens 160px earlier.
Between 1241 and 1440 the row still carries seven links plus two buttons, so
the nav's secondary "Request a briefing" is hidden in that window only. It is
duplicated three times over (hero, contact band, footer) and losing it there
costs nothing. Donate stays the nav primary, which is the 2026-08-04
repositioning decision and is unchanged. */
@media (max-width:1440px){.nav__cta .btn--outline{display:none}}
@media (max-width:1240px){
/* The five declarations below are the max-width:1080px block, verbatim. This
menu is a DISPLAY TOGGLE and the open class lands on .nav__links, not on
.nav — motion.js sets it there. An earlier version of this block invented a
transform slide-in keyed to `.nav.is-open .nav__links`, a selector nothing
ever satisfies: the panel translated off-screen and never came back, so
below 1240px there was no way to navigate at all. Do not reintroduce a
transform, a transition, position:fixed, or a .nav-scoped open selector
here. Whatever the 1080px block does, this block does identically. */
.nav__links{display:none}
.nav__burger{display:block}
.nav__links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;
background:var(--canvas);border-bottom:1px solid var(--hairline);padding:8px var(--outer) 18px}
.nav__links.is-open .nav__link{width:100%;padding-block:13px;border-bottom:1px solid var(--hairline)}
.nav__links.is-open .nav__link::after{display:none}
}
/* ===================================================== 320px NAV FIX ======
Below 400px the nav's Donate button (81px plus a 12px gap) pushed the
hamburger past the viewport: MEASURED at 320px the burger sat at right:376
against a 320px viewport — 56px clipped on a 38px-wide control, so it was
100% off-screen. body has overflow-x:clip, so the page did not scroll
sideways and the failure was silent. The burger clears on its own from 400px
up. Nothing is lost by hiding Donate here: below 900px it already sits inside
the opened menu, and it also appears in the hero, the contact band and the
footer. */
@media (max-width:400px){.nav__cta .btn--primary{display:none}}
/* ================================================ SELF-ENROLLMENT (.enr) ===
Door 1. Lives on get-help.html and is lifted into the homepage modal by
enroll.js, so these styles serve both places.
TWO RULES HOLD HERE AND DO NOT BEND:
1. The 211 plate is the most prominent element on the page and stays ABOVE
the form. It is the only door that works today.
2. Green and orange carry text ONLY on the navy plates. On stone and cream
they stay graphic (2.8:1 / 4.17:1) — labels and hints are --navy.
Tap targets are 58px minimum: this is read on an old phone, in sunlight, one
thumb, low battery. Type never drops below 15.5px. */
/* --- 211 plate: navy-deep, glowing, with a slow sheen across it ---------- */
.enr211{position:relative;overflow:hidden;display:block;text-decoration:none;border-radius:20px;isolation:isolate;
padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px) clamp(24px,2.8vw,32px);
background:radial-gradient(120% 140% at 12% 0%,rgba(63,191,132,.22),transparent 58%),linear-gradient(168deg,#132744 0%,var(--navy-deep) 62%);
box-shadow:0 0 0 1px rgba(63,191,132,.35),0 26px 60px -26px rgba(11,23,41,.85),0 0 60px -18px rgba(63,191,132,.45)}
.enr211::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:34%;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);
animation:door-sheen 6.4s cubic-bezier(.4,0,.2,1) infinite}
.enr211:hover{text-decoration:none;box-shadow:0 0 0 1px rgba(63,191,132,.6),0 30px 70px -26px rgba(11,23,41,.9),0 0 80px -14px rgba(63,191,132,.6)}
.enr211__k{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;
letter-spacing:.17em;text-transform:uppercase;color:var(--green-bright)}
.enr211__k::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none;
box-shadow:0 0 10px 2px rgba(63,191,132,.85);animation:pulse-dot 2s ease-in-out infinite}
.enr211__row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:6px 0 6px}
.enr211__n{font-family:var(--font-display);font-size:clamp(62px,10vw,116px);line-height:.86;letter-spacing:-.01em;
color:#8FE3BA;text-shadow:0 0 46px rgba(63,191,132,.45)}
.enr211__tap{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;padding:15px 22px;border-radius:var(--r-pill);
background:var(--green-bright);color:var(--navy-deep);font-size:15px;font-weight:700;white-space:nowrap;
box-shadow:0 14px 32px -14px rgba(63,191,132,.9);transition:background 200ms linear,transform 220ms var(--ease-punch)}
.enr211:hover .enr211__tap{background:#fff;transform:translateY(-2px)}
.enr211__s{display:block;font-size:17.5px;line-height:1.5;font-weight:500;color:#D2DCEA;max-width:46ch}
.enr__211note{margin-top:14px;font-size:var(--fs-caption);line-height:1.55;color:var(--navy);max-width:60ch}
/* --- the form ------------------------------------------------------------ */
.enr{margin-top:clamp(40px,5vw,64px);padding-top:clamp(26px,3vw,38px);border-top:2px solid var(--navy)}
.enr__h{font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:.96;letter-spacing:-.01em;
color:var(--navy);font-size:clamp(32px,4.4vw,60px);margin-top:14px}
.enr__sub{margin-top:12px;max-width:52ch;font-size:var(--fs-body-lg);line-height:1.5;color:var(--navy)}
/* Progress tape — the record-tape device from 01, doing a job: four segments,
one per required answer, filling as they land. Read-only. */
.enr__tape{margin-top:clamp(22px,2.6vw,30px)}
.enr__taperow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;
font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-on-mist,var(--muted))}
.enr__taperow b{color:var(--navy);font-weight:600}
.enr__tapebar{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.enr__tapebar i{position:relative;display:block;height:9px;background:#DCD6CC;overflow:hidden}
.enr__tapebar i::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;
transition:transform 420ms var(--ease-enter)}
.enr__tapebar i.on::after{transform:scaleX(1)}
.enr form{margin-top:clamp(26px,3vw,36px)}
.enr .sect{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
border-top:1px solid var(--hairline);padding-top:20px;margin:34px 0 18px}
.enr .sect::before{content:"";width:9px;height:9px;flex:none;background:var(--orange)}
.enr .sect:first-of-type{border-top:0;padding-top:0;margin-top:0}
.enr .grp{margin:0 0 24px}
.enr label{display:block;font-size:18px;font-weight:700;color:var(--navy);margin:0 0 8px}
.enr .req{color:#B45A16}
.enr .opt{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--navy);background:#E4DED4;border-radius:var(--r-pill);padding:4px 10px;margin-left:8px;vertical-align:2px}
.enr .hint{display:block;margin-top:7px;font-size:15.5px;line-height:1.5;font-weight:400;color:var(--navy);opacity:.72}
.enr input[type=text],.enr input[type=tel],.enr input[type=email],.enr select{
width:100%;font-family:var(--font-body);font-size:19px;font-weight:500;line-height:1.4;color:var(--navy);background:#fff;
border:2px solid #C6C1B7;border-radius:12px;padding:16px 15px;min-height:58px;
transition:border-color 160ms linear,box-shadow 160ms linear}
.enr input[type=text]:hover,.enr input[type=tel]:hover,.enr input[type=email]:hover,.enr select:hover{border-color:var(--navy)}
.enr select{appearance:none;padding-right:48px;background-repeat:no-repeat;background-position:right 15px center;
background-image:url("data:image/svg+xml;utf8,")}
.enr input:focus,.enr select:focus,.enr button:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--navy)}
.enr .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.enr .radios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.enr .radios label{display:flex;align-items:center;gap:11px;margin:0;min-height:58px;padding:15px;cursor:pointer;
background:#fff;border:2px solid #D8D2C8;border-radius:12px;font-size:17.5px;font-weight:600;color:var(--navy);
transition:border-color 160ms linear,background 160ms linear,box-shadow 200ms linear}
.enr .radios label:hover{border-color:var(--navy)}
.enr .radios input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--green)}
.enr .radios label:has(input:checked){border-color:var(--green);background:#F1F8F4;box-shadow:0 12px 26px -20px rgba(28,90,63,.9)}
.enr .checkrow{display:flex;align-items:flex-start;gap:14px;padding:17px;background:#fff;border:2px solid #D8D2C8;border-radius:14px;
transition:border-color 160ms linear,box-shadow 200ms linear}
.enr .checkrow:has(input:checked){border-color:var(--green);box-shadow:0 14px 30px -22px rgba(28,90,63,.9)}
.enr .checkrow input{width:26px;height:26px;flex:none;margin:2px 0 0;accent-color:var(--green)}
.enr .checkrow label{margin:0;font-size:17.5px;font-weight:500}
.enr .err{display:none;margin:9px 0 0;font-size:16px;font-weight:700;color:#8F2C0C}
.enr .err.on{display:block}
.enr .field-bad input,.enr .field-bad select{border-color:#B45A16;background:#FFF6EF}
/* The one loud button on the page after 211. White on --green is 4.9:1. */
.enr__submit{position:relative;overflow:hidden;isolation:isolate;width:100%;appearance:none;border:0;border-radius:14px;cursor:pointer;
margin-top:8px;padding:22px 18px;min-height:68px;background:linear-gradient(180deg,#39926B,var(--green));color:var(--on-dark);
font-family:var(--font-body);font-size:21px;font-weight:700;line-height:1.25;
box-shadow:0 20px 44px -20px rgba(28,90,63,.95);transition:transform 200ms var(--ease-punch),box-shadow 200ms linear}
.enr__submit::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:34%;z-index:-1;transform:skewX(-18deg);
background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);animation:door-sheen 5.2s cubic-bezier(.4,0,.2,1) infinite}
.enr__submit:hover{transform:translateY(-2px);box-shadow:0 26px 54px -20px rgba(28,90,63,1)}
.enr__submit:active{transform:translateY(0)}
.enr__submit[disabled]{background:#9A9488;cursor:progress;box-shadow:none}
.enr__submit[disabled]::after{display:none}
.enr__privacy{margin-top:22px;max-width:64ch;font-size:16px;line-height:1.55;color:var(--navy)}
.enr__privacy b{font-weight:700}
/* Sealed confirmation */
.enr__sent{display:none}
.enr__sent.on{display:block}
.enr__seal{border-radius:20px;padding:clamp(24px,2.8vw,32px) clamp(20px,2.4vw,28px);color:var(--on-dark);
background:radial-gradient(120% 140% at 10% 0%,rgba(63,191,132,.2),transparent 60%),linear-gradient(168deg,#132744,var(--navy-deep) 64%);
box-shadow:0 0 0 1px rgba(63,191,132,.32),0 26px 60px -26px rgba(11,23,41,.85)}
.enr__code{font-family:var(--font-mono);font-size:clamp(28px,5vw,44px);font-weight:700;letter-spacing:.02em;line-height:1;color:#8FE3BA}
.enr__tx{margin-top:16px;font-size:18px;line-height:1.55;color:#D2DCEA}
.enr__tx b{color:var(--on-dark);font-weight:700}
.enr__stamp{display:inline-block;margin-top:18px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
background:linear-gradient(180deg,#BFF3D8,#8FE3BA);color:#0A1424;padding:10px 14px;border-radius:6px}
.enr__next{margin-top:22px;font-size:17px;line-height:1.55;color:var(--navy)}
.enr__next a{font-weight:700}
.enr__back{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;padding:17px 26px;min-height:56px;
appearance:none;border:0;border-radius:var(--r-pill);cursor:pointer;background:var(--navy);color:var(--on-dark);
font-family:var(--font-body);font-size:16px;font-weight:700}
.enr__back:hover{background:var(--navy-deep)}
@media (max-width:640px){
.enr .two,.enr .radios{grid-template-columns:1fr}
.enr211__row{align-items:flex-start;flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
.enr211::after,.enr__submit::after{display:none}
.enr211__k::before{animation:none}
.enr__tapebar i::after{transition:none}
}
/* Links in this block are inked NAVY, never the site default green: --green on
--stone measures 4.17:1, under the 4.5:1 normal-text floor. Same remedy as
.help__in .jump. */
.enr a,.enr__211note a,.enr__em a{color:var(--navy);font-weight:700}
.enr a:hover,.enr__211note a:hover,.enr__em a:hover{color:var(--navy-deep)}
/* The 911 line closes the page: full-column rule, body size, not a caption. */
.enr__em{margin-top:clamp(34px,4vw,48px);padding-top:22px;border-top:2px solid var(--navy);
font-size:17px;line-height:1.55;color:var(--navy)}
/* ============================================= ENROLLMENT MODAL (.emod) ===
The homepage door opens the form in place so the reader never loses the page
they were on: submit, see the sealed code, close, still on the homepage. The
form itself is fetched from get-help.html — there is no second copy. The
modal carries its own quick exit, because a person who needs it needs it here
too. */
.emod{position:fixed;inset:0;z-index:200;display:none;padding:clamp(12px,3vw,40px);
background:rgba(11,23,41,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.emod.is-open{display:flex;align-items:flex-start;justify-content:center}
body.has-modal{overflow:hidden}
.emod__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:780px;max-height:calc(100vh - clamp(24px,6vw,80px));
background:var(--canvas);border-radius:20px;overflow:hidden;
box-shadow:0 0 0 1px rgba(63,191,132,.28),0 50px 110px -40px rgba(0,0,0,.75);
animation:emod-in 320ms var(--ease-enter)}
@keyframes emod-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.emod__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;
padding:14px clamp(16px,2.2vw,26px);background:var(--navy);border-bottom:3px solid var(--orange)}
.emod__brand{color:var(--on-dark);font-size:15px;font-weight:700;line-height:1.2}
.emod__brand span{display:block;margin-top:3px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:#8FE3BA}
.emod__acts{display:flex;align-items:center;gap:10px}
.emod__qx{display:inline-flex;align-items:center;min-height:44px;padding:12px 16px;border-radius:10px;
background:#fff;color:var(--navy);font-size:14px;font-weight:700;white-space:nowrap}
.emod__qx:hover{background:var(--navy-deep);color:var(--on-dark);text-decoration:none}
.emod__x{appearance:none;border:2px solid rgba(255,255,255,.5);background:none;color:var(--on-dark);cursor:pointer;
width:44px;height:44px;border-radius:10px;font-size:20px;line-height:1;flex:none}
.emod__x:hover{background:rgba(255,255,255,.14);border-color:#fff}
.emod__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(20px,2.6vw,34px) clamp(18px,2.4vw,32px) clamp(28px,3.4vw,40px)}
.emod__body .enr{margin-top:0;padding-top:0;border-top:0}
.emod__load{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.emod__panel{animation:none}}
/* ================================== ENROLLMENT NOT OPEN YET (.enr--locked) ==
Enrollment opens toward the end of 2026. THE LOCK IS