/* ═══════════════════════════════════════════════════════════════════════════
   NEW DAY TORNADO SHELTERS — "Storm → Dawn"
   A scroll-driven cinematic homepage. Dark storm-night dominant, sharp dawn-gold
   accents. Type: Archivo/Archivo Black (display) · Satoshi (body) · JetBrains Mono (data).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Storm (dark) */
  --storm-night:  #0B0E14;
  --storm-deep:   #151B27;
  --storm-indigo: #1E2A44;
  --storm-steel:  #2C3A4F;
  --storm-light:  #8FB3E8;   /* v70: electric storm-light — lightning flicker + the Live-Wire card ring */

  /* Dawn (warm) */
  --dawn-gold:    #F4A93C;
  --dawn-amber:   #E8821E;
  --first-light:  #FBD38D;
  --dawn-cream:   #F6EFE2;
  --ef5-ember:    #D9442B;

  /* Text */
  --text:         #ECE6DA;
  --text-dim:     #9AA3B2;
  --text-ink:     #12161D;

  --font-display: "Archivo", "Satoshi", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-heavy:   "Archivo Black", "Archivo", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1480px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--storm-night);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--dawn-gold); color: var(--text-ink); }

/* When Lenis is active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ── Grain / atmosphere ────────────────────────────────────────────────────*/
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Utilities ─────────────────────────────────────────────────────────────*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══ 1. LOADER ════════════════════════════════════════════════════════════*/
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(232,130,30,0.10), transparent 60%),
    var(--storm-night);
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
#loader.is-done { opacity: 0; visibility: hidden; }
.loader-inner { width: min(420px, 78vw); text-align: center; }
.loader-brand { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.loader-mark { width: 46px; height: 46px; }
.loader-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  letter-spacing: 0.04em; color: var(--dawn-cream);
}
.loader-track {
  height: 2px; width: 100%; background: rgba(255,255,255,0.10);
  border-radius: 2px; overflow: hidden;
}
#loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--dawn-amber), var(--dawn-gold)); }
.loader-meta {
  margin-top: 1rem; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase;
  display: flex; align-items: baseline; justify-content: center; gap: 0.15rem;
}
#loader-percent { color: var(--dawn-gold); }
.loader-status { margin-left: 0.9rem; opacity: 0.7; }

/* ═══ 2. HEADER ════════════════════════════════════════════════════════════*/
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  /* max(base, env()) → notched devices clear the camera/corners; everyone else keeps the base */
  padding: max(1.2rem, env(safe-area-inset-top))
           max(clamp(1.1rem, 4vw, 3rem), env(safe-area-inset-right))
           1.2rem
           max(clamp(1.1rem, 4vw, 3rem), env(safe-area-inset-left));
  transition: background 0.4s var(--ease-out), padding 0.4s var(--ease-out), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11,14,20,0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(255,255,255,0.07);
  padding-top: max(0.85rem, env(safe-area-inset-top)); padding-bottom: 0.85rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em; color: var(--dawn-cream); }
.brand-sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; }

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav a {
  position: relative; font-size: 0.92rem; font-weight: 500; color: var(--text);
  opacity: 0.82; transition: opacity 0.25s, color 0.25s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1.5px;
  background: var(--dawn-gold); transition: width 0.3s var(--ease-out);
}
.nav a:hover { opacity: 1; color: var(--dawn-gold); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 1rem; }
/* CALL-01 (lab pick): a pill chip — the number slides out of the phone icon on
   hover/focus; the green ping = "open 24 hours" */
.header-phone {
  display: flex; align-items: center; min-height: 40px; padding: 0 0.8rem;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.02em; color: var(--dawn-gold);
  transition: border-color 0.3s, background-color 0.3s;
}
.header-phone:hover, .header-phone:focus-visible { border-color: rgba(244,169,60,0.55); background-color: rgba(244,169,60,0.05); }
.phone-ico { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }
.phone-ico svg { width: 15px; height: 15px; }
.phone-ico::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(87,217,138,0.5); animation: pulse 2.4s infinite; }
.phone-num { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.5s var(--ease-out), opacity 0.3s, margin-left 0.5s var(--ease-out); }
.header-phone:hover .phone-num, .header-phone:focus-visible .phone-num { max-width: 150px; opacity: 1; margin-left: 0.6rem; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(87,217,138,0.5);} 70%{ box-shadow: 0 0 0 7px rgba(87,217,138,0);} 100%{ box-shadow:0 0 0 0 rgba(87,217,138,0);} }

/* ── Buttons ───────────────────────────────────────────────────────────────*/
/* Buttons — lab winner BTN-13 "Text Roll": gold→amber PILLS; primary labels roll
   over diagonally, letter by letter, on hover (initRollButtons in app.js builds
   the roll from each button's data-roll attribute). */
.btn {
  --b: var(--dawn-gold);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.72rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em; cursor: pointer;
  transition: transform 0.25s var(--ease-out), background 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; padding: 1rem; font-size: 1.02rem; }
.btn-gold {
  background: linear-gradient(100deg, var(--dawn-gold), var(--dawn-amber) 82%);
  color: var(--text-ink); box-shadow: 0 12px 32px -12px rgba(232,130,30,0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(232,130,30,0.7); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.22); color: var(--text); }
.btn-ghost:hover { border-color: var(--dawn-gold); color: var(--dawn-gold); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* the diagonal letter roll (winner BTN-13) */
.btn-roll .roll { display: grid; overflow: hidden; }
.btn-roll .r1, .btn-roll .r2 { grid-area: 1 / 1; display: flex; justify-content: center; white-space: nowrap; }
.btn-roll i {
  font-style: normal; display: inline-block;
  transition: transform 0.38s var(--ease-out); transition-delay: calc(var(--i, 0) * 20ms);
}
.btn-roll .r2 i { transform: translateY(130%); }
.btn-roll:hover .r1 i, .btn-roll:focus-visible .r1 i { transform: translateY(-130%); }
.btn-roll:hover .r2 i, .btn-roll:focus-visible .r2 i { transform: translateY(0); }

/* Keyboard / switch-control focus ring (was missing — inputs explicitly killed outline) */
/* no border-radius here — the outline follows each element's own radius, and
   forcing 6px visibly snapped rounded elements (12px fields, pills) on focus */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--dawn-gold); outline-offset: 2px;
}

/* ── Mobile hamburger + drawer (shown only ≤860px, see RESPONSIVE) ──────────*/
.nav-toggle { display: none; }
.mobile-drawer { display: none; }
.mobile-drawer[hidden] { display: none; }

/* ═══ 3. HERO ══════════════════════════════════════════════════════════════*/
.hero-standalone {
  position: relative; z-index: 20; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem clamp(1.2rem, 6vw, 6rem) 4rem;
  /* Transparent legibility scrim — the storm start frame (canvas) shows through.
     Darker on the left/bottom for text; clear on the right so the funnel reads. */
  background:
    linear-gradient(90deg, rgba(7,10,16,0.88) 0%, rgba(7,10,16,0.55) 38%, rgba(7,10,16,0.06) 70%),
    linear-gradient(180deg, rgba(7,10,16,0.55) 0%, rgba(7,10,16,0) 24%, rgba(7,10,16,0) 58%, rgba(7,10,16,0.92) 100%);
  overflow: hidden;
}
.hero-atmos {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 120%, rgba(244,169,60,0.12), transparent 60%);
  opacity: 0.9;
  overflow: hidden;
}
/* ── v70 mobile storm atmosphere ─────────────────────────────────────────────
   The portrait crop can't show the full tornado, so the phone hero carries its
   own weather: a slow cloud churn, a storm-light lightning flicker, and gold
   embers drifting up (kin to §005's dust motes). transform/opacity only —
   cheap; desktop never shows these (the real Seedance frame is the atmosphere). */
.hero-atmos > i, .hero-atmos > b { display: none; }
@media (max-width: 860px) {
  .hero-atmos > i, .hero-atmos > b { display: block; position: absolute; pointer-events: none; }
  .storm-churn {
    top: -18%; right: -35%; width: 130vw; height: 82vh; border-radius: 50%;
    background:
      radial-gradient(46% 40% at 62% 38%, rgba(44,58,79,0.5), transparent 70%),
      radial-gradient(30% 26% at 32% 62%, rgba(30,42,68,0.55), transparent 70%);
    animation: churnDrift 26s ease-in-out infinite alternate;
  }
  .storm-flash {
    top: 0; right: -12%; width: 85vw; height: 52vh; opacity: 0;
    background: radial-gradient(52% 46% at 68% 20%, rgba(143,179,232,0.27), transparent 65%);   /* v76: −20% glow */
    animation: stormFlash 9.5s linear infinite;
  }
  /* v72: second, deeper flash — sits UNDER the churn (DOM order), left side, its
     own period/delay so the two never sync: light rolling around inside the clouds */
  .storm-flash2 {
    top: -4%; left: -15%; width: 90vw; height: 55vh; opacity: 0;
    background: radial-gradient(50% 45% at 35% 25%, rgba(143,179,232,0.24), transparent 65%);   /* v76: −20% glow */
    animation: stormFlash 13s linear infinite; animation-delay: -5.5s;
  }
  /* v74: third flash — BOTTOM-RIGHT, hotter + faster period ("increase the
     thunder on the bottom right", user call) */
  .storm-flash3 {
    bottom: -6%; right: -18%; width: 95vw; height: 55vh; opacity: 0;
    background: radial-gradient(55% 48% at 72% 78%, rgba(143,179,232,0.32), transparent 65%);   /* v76: −20% glow */
    animation: stormFlash 8s linear infinite; animation-delay: -3.2s;
  }
  /* v74: embers went STORM-LIGHT BLUE (user trial — cool sparks against the warm
     brand gold). SWAP BACK to gold if it doesn't land: base var(--dawn-gold) +
     glow rgba(244,169,60,0.9); e2/e7 var(--first-light); e5 var(--dawn-amber). */
  .hero-atmos .ember {
    bottom: -2%; width: 3px; height: 3px; border-radius: 50%;
    background: var(--storm-light); box-shadow: 0 0 8px rgba(143,179,232,0.9);
    opacity: 0; will-change: transform, opacity;
    animation: emberRise var(--er) linear infinite; animation-delay: var(--ed);
  }
  .ember.e1 { left: 8%;  --er: 11s; --ed: 0s; }
  .ember.e2 { left: 24%; --er: 15s; --ed: -6s;  width: 2px; height: 2px; background: #D6E7FC; }
  .ember.e3 { left: 47%; --er: 12s; --ed: -3s; }
  .ember.e4 { left: 66%; --er: 17s; --ed: -9s;  width: 2px; height: 2px; }
  .ember.e5 { left: 82%; --er: 13s; --ed: -5s;  background: #B7CFF2; }
  .ember.e6 { left: 93%; --er: 19s; --ed: -12s; width: 2px; height: 2px; }
  /* v72: two more embers (+15% feel, user call) */
  .ember.e7 { left: 15%; --er: 14s; --ed: -10s; background: #D6E7FC; }
  .ember.e8 { left: 58%; --er: 16s; --ed: -7s;  width: 2px; height: 2px; }
}
@keyframes churnDrift { to { transform: translate3d(-6%, 3%, 0) rotate(7deg); } }
@keyframes stormFlash {
  0%, 86%, 100% { opacity: 0; }
  87% { opacity: 0.55; } 88.5% { opacity: 0.1; } 90% { opacity: 0.8; } 92.5% { opacity: 0; }
}
@keyframes emberRise {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0); }
  10%  { opacity: 1; }      /* v72: +15% ember presence */
  60%  { opacity: 0.64; }
  100% { opacity: 0;    transform: translate3d(-22px, -78vh, 0); }
}
.reduced-motion .hero-atmos > i, .reduced-motion .hero-atmos > b { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-atmos > i, .hero-atmos > b { display: none !important; } }
.hero-grid { position: relative; max-width: var(--maxw); width: 100%; margin: 0 auto; }

/* Section label — the numbered "00X / Name" labels were REMOVED site-wide at the
   user's request (v62); this base rule now styles only the hero eyebrow
   ("Tulsa, OK · Family-owned since 2008", which carries a .lbl-dot, not an index). */
.section-label {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero-label { margin-bottom: 1.8rem; color: var(--first-light); }
.lbl-dot, .section-label .lbl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dawn-gold); box-shadow: 0 0 12px var(--dawn-gold); }

.hero-heading {
  font-family: var(--font-heavy); font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 11rem); line-height: 0.92;
  letter-spacing: -0.025em; color: var(--dawn-cream); margin-bottom: 1.8rem;
}
.hero-heading .line { display: block; overflow: hidden; }
.hero-heading .word { display: inline-block; }
.word-gold, .ink-gold { color: var(--dawn-gold); }

/* v70 a11y: one visible gold ring for keyboard focus everywhere (mouse focus
   stays clean — :focus-visible only) */
:is(a, button):focus-visible { outline: 2px solid var(--dawn-gold); outline-offset: 3px; }

.hero-tagline {
  max-width: 38ch; font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--text); opacity: 0.86; margin-bottom: 2.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.2rem; }
.hero-trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--text-dim); text-transform: uppercase;
}
.hero-trust .dot { color: var(--dawn-gold); margin-right: 0.5rem; }

/* ── Brand stamp badges — HB-08, shipped from the component lab ──────────────
   ONE badge system site-wide: cert stamps (FEMA · ICC · Lifetime · 4.9 rating)
   in the hero's self-scrolling banner AND the static trust/standards rows —
   §004 .dawn-trust, §005 .why-badges, §006 .zone-trust — via the .stamp-row
   wrapper. The short utility names (.stamp/.sm/.si/.sd/.sc/.rate/.feed) stay
   scoped under the two containers so they never leak into the global namespace. */
.stamp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hero-badges { margin-top: 0.4rem; }
:is(.hero-badges, .stamp-row) .stamp {
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  padding: 0.5rem 0.78rem; border-radius: 9px; border: 1px solid rgba(244,169,60,0.22);
  background: linear-gradient(180deg, rgba(244,169,60,0.05), rgba(244,169,60,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
:is(.hero-badges, .stamp-row) .stamp .sm { font-family: var(--font-heavy); font-weight: 400; font-size: 0.8rem; color: var(--dawn-cream); line-height: 1; }
:is(.hero-badges, .stamp-row) .stamp .si { color: var(--dawn-gold); display: grid; place-items: center; }
:is(.hero-badges, .stamp-row) .stamp .si svg { width: 17px; height: 17px; }
:is(.hero-badges, .stamp-row) .stamp .sd { width: 1px; height: 16px; background: rgba(244,169,60,0.35); flex: none; }
:is(.hero-badges, .stamp-row) .stamp .sc { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
/* ONE self-scrolling banner: FEMA · ICC · Lifetime(∞) · 4.9 rating · Texas Tech · delivery.
   The floating .drift row was merged in here (2026-07-03) to declutter the mobile hero. */
.hero-badges .feed {
  position: relative; overflow: hidden; margin-top: 1.5rem; max-width: 560px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-badges .feed-track { display: flex; align-items: center; gap: 0.6rem; width: max-content; animation: feedscroll 32s linear infinite; }
.hero-badges .feed:hover .feed-track { animation-play-state: paused; }
:is(.hero-badges, .stamp-row) .rate { position: relative; display: inline-block; font-size: 0.82rem; line-height: 1; letter-spacing: 1.5px; white-space: nowrap; }
:is(.hero-badges, .stamp-row) .rate::before { content: "★★★★★"; color: rgba(244,169,60,0.28); }
:is(.hero-badges, .stamp-row) .rate::after { content: "★★★★★"; color: var(--dawn-gold); position: absolute; left: 0; top: 0; width: var(--pct, 90%); overflow: hidden; }
/* v70 micro-interaction: every stamp warms on hover — one shared behavior */
@media (hover: hover) {
  :is(.hero-badges, .stamp-row) .stamp { transition: border-color 0.3s, background 0.3s; }
  :is(.hero-badges, .stamp-row) .stamp:hover { border-color: rgba(244,169,60,0.5); background: linear-gradient(180deg, rgba(244,169,60,0.09), rgba(244,169,60,0.02)); }
}
@keyframes feedscroll { to { transform: translateX(-50%); } }
/* mobile: full-bleed banner + hide the "Tulsa · family-owned" eyebrow to declutter
   the top. The banner also gets more air above it — margins collapse the desktop
   spacing chain to ~1.6rem here, which sat "way too close" under the call button. */
@media (max-width: 860px) {
  .hero-badges .feed { max-width: none; margin-top: 3.75rem; }   /* v70: a touch lower still (user call) */
  .hero-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badges .feed-track { animation: none; }
}

.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-dim); z-index: 21;
}
/* Shimmer sweep across the cue label (replaces the old vertical line).
   v75: the palette now BREATHES storm→dawn (user call) — blue-silver melts into
   orange-silver and back on a 9s cycle (2 clean sweeps per cycle) while the
   gradient axis rotates gently 100°→124°. Registered @property colors/angle so
   they interpolate; browsers without @property just hold the storm palette. */
@property --cueA   { syntax: "<color>"; initial-value: #8FB3E8; inherits: false; }
@property --cueH   { syntax: "<color>"; initial-value: #EAF1FB; inherits: false; }
@property --cueAng { syntax: "<angle>"; initial-value: 100deg;  inherits: false; }
.scroll-cue-text {
  background: linear-gradient(var(--cueAng),
    var(--cueA) 35%,   /* base — storm blue → dawn orange */
    var(--cueH) 50%,   /* highlight — cool silver → warm silver */
    var(--cueA) 75%);
  background-size: 200% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer-sweep 4.5s linear infinite, cueStormDawn 9s ease-in-out infinite;
}
@keyframes cueStormDawn {
  0%, 100% { --cueA: #8FB3E8; --cueH: #EAF1FB; --cueAng: 100deg; }   /* storm: blue-silver */
  50%      { --cueA: #F4A93C; --cueH: #F5EDDE; --cueAng: 124deg; }   /* dawn: orange-silver */
}
@keyframes shimmer-sweep { to { background-position: -200% 0; } }

/* Reusable gold shimmer sweep (same effect as the hero scroll cue) — applied to
   the §005 ghost-button label. Gold gradient over dark reads legibly; on the
   ghost button the bg never fills, so the shimmering label stays on the dark. */
.shimmer-text {
  background: linear-gradient(110deg, var(--dawn-amber) 35%, var(--first-light) 50%, var(--dawn-amber) 75%);
  background-size: 200% 100%; background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer-sweep 4.5s linear infinite;
}

/* ═══ 4. CANVAS ════════════════════════════════════════════════════════════*/
.canvas-wrap {
  position: fixed; inset: 0; z-index: 1;
  will-change: opacity;
}
#canvas { width: 100%; height: 100%; display: block; }

/* ═══ 5. OVERLAYS ══════════════════════════════════════════════════════════*/
#dark-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  /* light vignette — darker behind the centered stats, clear at the edges so the
     daylight scene still reads through while the section-005 card rises over it */
  background: radial-gradient(80% 70% at 50% 50%, rgba(8,10,15,0.6) 0%, rgba(8,10,15,0.48) 45%, rgba(8,10,15,0.06) 86%);
  opacity: 0;
}
/* (v84: the §6 credentials marquee is GONE — a cert ticker mid-storm was the
   same chrome problem as the glass cards; the stamps live in §004/005/006/008) */

/* ═══ 7. SCROLL SECTIONS ═══════════════════════════════════════════════════*/
#scroll-container { position: relative; z-index: 4; height: 520vh; }

.scroll-section {
  position: fixed; inset: 0; z-index: 4;
  display: flex; align-items: center; visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.7s;
}
.scroll-section.is-active { visibility: visible; pointer-events: auto; z-index: 5; transition: visibility 0s; }

/* ── STORY-A film supers (001–003) — v84, lab §15 pick ──────────────────────
   No glass, no cards: the copy is film titles over the footage. Each beat is a
   `.sup` block (kicker → word-split headline → meta/quote/attr) absolutely
   placed in its frames' negative space, with a LOCAL radial light pool for
   legibility instead of a panel. paintSuper() in app.js drives the
   scroll-linked word-by-word reveal (the §004 "Daybreak" language). */
.section-super { pointer-events: none; }
.section-super .sup { position: absolute; max-width: min(46vw, 620px); }
.section-super .sup::before {
  content: ""; position: absolute; inset: -26% -20%; z-index: -1;
  background: radial-gradient(62% 60% at 40% 42%, rgba(6,9,15,0.55), transparent 72%);
}
/* placements — tuned to the clip's landmarks (funnel right → debris → shelter left) */
.sup-tl .sup { left: clamp(1.5rem, 5vw, 5rem); top: clamp(6.5rem, 15vh, 11rem); }
.sup-br .sup { right: clamp(1.4rem, 5vw, 4.5rem); bottom: clamp(3.4rem, 11vh, 8rem); max-width: min(56vw, 780px); }
.sup-br .sup::before { background: radial-gradient(68% 66% at 55% 55%, rgba(6,9,15,0.68), transparent 75%); }
.sup-rc .sup { right: clamp(1.4rem, 5vw, 4.5rem); top: clamp(7rem, 20vh, 13rem); }
/* beat 3 pool: tighter + centered on the text — at the default spread its soft
   left edge poked into the open sky mid-frame (user call on the lab board) */
.sup-rc .sup::before { inset: -22% -10%; background: radial-gradient(58% 58% at 55% 42%, rgba(6,9,15,0.5), transparent 68%); }
.sup-rc .sup { max-width: min(48vw, 660px); }
.sup-rc .sup-head { font-size: clamp(1.9rem, 3.7vw, 3.2rem); }  /* "The house was gone." holds one line ≥1200 */
.sup-kicker {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: clamp(0.6rem, 0.8vw, 0.7rem); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--first-light);
  text-shadow: 0 1px 12px rgba(5,8,14,0.85);
}
.sup-kicker i { width: 24px; height: 1px; flex: none; background: var(--dawn-gold); box-shadow: 0 0 8px rgba(244,169,60,0.8); }
.sup-head {
  font-family: var(--font-heavy); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.04; color: var(--dawn-cream);
  margin: 0.85rem 0 0;
  text-shadow: 0 2px 28px rgba(5,8,14,0.8), 0 0 80px rgba(5,8,14,0.55);
}
.sup-br .sup-head { font-size: clamp(1.45rem, 3.2vw, 2.7rem); margin-top: 0; }
.sup-head .au, .sup-head .ink-gold { color: var(--dawn-gold); font-style: normal; }
.sup-meta {
  margin: 1rem 0 0; font-family: var(--font-mono); font-size: clamp(0.58rem, 0.75vw, 0.68rem);
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(236,230,218,0.78); text-shadow: 0 1px 10px rgba(5,8,14,0.9);
}
.sup-quote {
  margin: 1.05rem 0 0; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.5; color: rgba(246,239,226,0.94);
  max-width: 44ch; text-shadow: 0 1px 14px rgba(5,8,14,0.85);
}
.sup-attr { margin: 0.8rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--first-light); text-shadow: 0 1px 10px rgba(5,8,14,0.9); }
/* at-rest (hidden) defaults — paintSuper paints the live values; these stop a
   missed frame from flashing finished copy (same net as §004's .dw) */
.sup-head .dw {
  display: inline-block; opacity: 0;
  transform: translateY(-0.45em); filter: blur(10px);
  will-change: opacity, transform, filter;
}
.sup-head .dw-sp { display: inline; white-space: pre; }
.sup-kicker, .sup-meta, .sup-quote, .sup-attr { opacity: 0; will-change: opacity, transform; }
.reduced-motion .sup-head .dw, .reduced-motion .sup-kicker, .reduced-motion .sup-meta,
.reduced-motion .sup-quote, .reduced-motion .sup-attr { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sup-head .dw, .sup-kicker, .sup-meta, .sup-quote, .sup-attr { opacity: 1; transform: none; filter: none; }
}

/* .section-heading stays — §004's plate headline + §005–008 share it */
.section-heading {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.9rem); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--dawn-cream); margin: 1.1rem 0 1.3rem;
}

/* ── §004 — "A new day" payoff plate ────────────────────────────────────────*/
.section-stats {
  /* Full stage — the spec-plate is an absolute card over the dawn that scrolls UP
     into view (all four edges showing), then scales up to FILL the screen. No tilt /
     perspective — a flat rise + expand (see plateCover in app.js). */
  padding: 0;
}
.centered { margin-left: auto; margin-right: auto; justify-content: center; text-align: center; }

/* The full-viewport gradient "cover card": starts inset (scale 0.85, gaps on top +
   sides, bottom flush) revealing the dawn canvas behind, then scales edge-to-edge
   with its corners squaring off (radius 26→0). Driven by plateCover() in app.js. */
.stats-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background:
    radial-gradient(85% 55% at 15% 4%, rgba(30,42,68,0.92), transparent 60%),
    radial-gradient(100% 75% at 92% 100%, rgba(232,130,30,0.20), transparent 55%),
    linear-gradient(180deg, #090C11 0%, var(--storm-night) 55%, #0A0E16 100%);
  border: 1px solid rgba(244,169,60,0.16); border-radius: 24px;
  padding: clamp(1.4rem, 4vw, 3rem) clamp(1.2rem, 5vw, 3.5rem);
  box-shadow: 0 44px 100px -45px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform, border-radius;
}
.stats-inner { width: 100%; max-width: 1000px; margin: 0 auto; }
/* text-align centers the inline-flex .section-label — auto margins don't center
   inline-level boxes, so without this the mono eyebrow hugs the left edge */
.stats-head { max-width: 760px; margin: 0 auto clamp(1.5rem, 3vw, 2.3rem); text-align: center; }

/* §004 content — the "A new day" brand payoff (the spec grid moved out:
   engineering lives in §005's fact tags + §006's capsule callouts). The plate
   rise→expand mechanics (plateCover in app.js) are unchanged. */
.dawn-mark {
  display: block; width: clamp(58px, 6.4vw, 78px); height: auto; margin: 0 auto 1.35rem;
  filter: drop-shadow(0 0 22px rgba(244,169,60,0.5)) drop-shadow(0 0 48px rgba(232,130,30,0.28));
  animation: dawnBreathe 5.5s ease-in-out infinite;
}
/* a slow sunrise pulse — the mark "warms" as it holds; stilled on reduced-motion */
@keyframes dawnBreathe {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(244,169,60,0.42)) drop-shadow(0 0 40px rgba(232,130,30,0.22)); }
  50%      { filter: drop-shadow(0 0 32px rgba(244,169,60,0.64)) drop-shadow(0 0 66px rgba(232,130,30,0.38)); }
}
.stats-head .dawn-sub {
  margin: 1.3rem auto 0; max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--text); opacity: 0.9;
}
/* the one proof chip — datasheet hairline language around a human fact */
.dawn-note {
  display: flex; align-items: flex-start; gap: 0.85rem; text-align: left;
  max-width: 620px; margin: 0 auto;
  background: rgba(13,17,25,0.62);
  border: 1px solid rgba(244,169,60,0.18); border-radius: 13px;
  padding: 1rem 1.2rem;
}
.dawn-note > svg { width: 18px; height: 18px; flex: none; color: var(--dawn-gold); margin-top: 3px; }
.dawn-note p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-dim); }
.dawn-note b { color: var(--dawn-gold); font-weight: 700; }
.dawn-note-eyebrow {
  display: block; margin-bottom: 0.35rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dawn-cream);
}
/* trust row is a .stamp-row of HB-08 stamps (one badge system site-wide) */
.dawn-trust { justify-content: center; margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.dawn-cta { display: flex; justify-content: center; margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* ── §004 "Daybreak" reveal ────────────────────────────────────────────────
   Per-word blur-fade-drift on the headline, quiet sequenced fade on the rest.
   JS (paintDawn in app.js) paints inline opacity/transform/filter off the
   plate's own scroll progress; these are the AT-REST (hidden) defaults so a
   missed frame never flashes finished copy, plus the reduced-motion/no-JS nets. */
.section-stats .section-heading .dw {
  display: inline-block;
  opacity: 0;
  transform: translateY(-0.5em);          /* drifts DOWN from above → 0 */
  filter: blur(12px);                      /* light resolving out of haze */
  will-change: opacity, transform, filter;
}
/* real space span so inline-block words keep exact kerning (no collapse) */
.section-stats .section-heading .dw-sp { display: inline; white-space: pre; }
/* supporting copy — quiet fade + short rise, NO blur; sequenced after the head */
.section-stats .dawn-sub,
.section-stats .dawn-note,
.section-stats .dawn-trust,
.section-stats .dawn-cta {
  opacity: 0; transform: translateY(14px); will-change: opacity, transform;
}
/* the sun mark leads the plate in — a tiny bloom before the words */
.section-stats .dawn-mark { opacity: 0; transform: translateY(8px) scale(0.9); will-change: opacity, transform; }

/* gentler travel + softer blur on small / short viewports */
@media (max-width: 860px) {
  .section-stats .section-heading .dw { transform: translateY(-0.34em); filter: blur(8px); }
}
@media (max-height: 600px) and (orientation: landscape) {
  .section-stats .section-heading .dw { transform: translateY(-0.3em); filter: blur(7px); }
  .section-stats .dawn-sub,
  .section-stats .dawn-note,
  .section-stats .dawn-trust,
  .section-stats .dawn-cta { transform: translateY(10px); }
}

/* reduced-motion / no-JS safety net: show everything, no blur, no offset */
.reduced-motion .section-stats .section-heading .dw,
.reduced-motion .section-stats .dawn-mark,
.reduced-motion .section-stats .dawn-sub,
.reduced-motion .section-stats .dawn-note,
.reduced-motion .section-stats .dawn-trust,
.reduced-motion .section-stats .dawn-cta { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .section-stats .section-heading .dw,
  .section-stats .dawn-mark,
  .section-stats .dawn-sub,
  .section-stats .dawn-note,
  .section-stats .dawn-trust,
  .section-stats .dawn-cta { opacity: 1; transform: none; filter: none; }
}
@media (hover: hover) {
  .grant-badges li:not(.badge-strong):hover {
    background-color: var(--dawn-gold); border-color: var(--dawn-gold); color: var(--text-ink);
    transform: translateY(-2px);
  }
  .grant-badges li:not(.badge-strong):hover::before { transform: scale(0); }
  .grant-badges li:not(.badge-strong):hover::after { transform: translateY(-50%) scale(1) rotate(0deg); }
}

/* ═══ 8. CTA — two columns: headline left, dark form card right ════════════*/
/* Clear separation from the capsule/shelter zone above (senior-UX vertical
   rhythm): generous top space alone — no divider line, keep it clean. */
.page-cta {
  flex-direction: column; align-items: center;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  padding-top: clamp(3rem, 7vh, 5.5rem);
}
.cta-layout {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: 1200px; width: 100%; margin: 0 auto;
}
.cta-copy { text-align: left; }
.cta-copy .section-label { margin-bottom: 1.2rem; }
/* v70: the tornado-siren mark replaced the plain gold .cta-rule — its sound
   waves pulse outward on a CSS loop; the entrance rise is scrubbed in app.js. */
.cta-siren { display: block; width: 106px; margin-bottom: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--dawn-gold); }
.cta-siren svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 12px rgba(244,169,60,0.3)); }
.cta-siren .sw { opacity: 0.14; animation: sirenWave 2.7s ease-out infinite; }
.cta-siren .sw2 { animation-delay: 0.35s; }
.cta-siren .sw3 { animation-delay: 0.7s; }
@keyframes sirenWave { 0% { opacity: 0.12; } 16% { opacity: 1; } 60% { opacity: 0.16; } 100% { opacity: 0.12; } }
.reduced-motion .cta-siren .sw { animation: none; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .cta-siren .sw { animation: none; opacity: 0.6; } }
/* v62: matches the other section headings (Archivo 800, sentence case) — the old
   uppercase Archivo Black read as a different vibe from every other header. */
.cta-heading {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.04;
  color: var(--dawn-cream); margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem);
}
.cta-sub {
  border-left: 2px solid rgba(244,169,60,0.55); padding-left: 1rem;
  color: var(--text-dim); max-width: 34ch; margin-bottom: 1.8rem; font-size: 1.05rem; line-height: 1.5;
}
.cta-meta-line { margin-top: 1.3rem; }  /* v70: now a .stamp-row of HB-08 stamps */

/* §006 panel language (ZONE-B "hot" panel) — upgraded v83 into a "service ticket"
   (user: fields/card/fonts read bland): layered warm surface + gold top hairline +
   ghost sun-mark watermark; letterhead head (mono eyebrow → Archivo title) over a
   dashed perforation; VISIBLE mono field labels (placeholder-only read cheap);
   dark inset fields. FIELD-07 focus + BTN-13 submit untouched (lab picks). */
.cta-card {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, rgba(30,42,68,0.5), rgba(9,12,18,0.92) 62%);
  border: 1px solid rgba(244,169,60,0.42); border-radius: 18px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  box-shadow: 0 36px 90px -44px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* v84 (user calls): the gold top hairline + top-right gold radial read like an
   accident ("orange line... offset at an angle") and the ghost sun read cheap —
   all three are GONE. The card's atmosphere is now the hero's own storm weather
   (.card-atmos below) framed by a warm traveling wire on the border. */
.cta-card .form-head, .cta-card .cta-form { position: relative; z-index: 1; }
/* the mobile-hero storm weather, scaled into the card: one slow cloud churn +
   two offset storm-light flashes (dimmer than the hero's so the form stays
   calm). Reuses the churnDrift/stormFlash keyframes; runs on desktop too — no
   footage behind it here to compete with. */
.card-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.card-atmos > b { position: absolute; display: block; }
.ca-churn {
  top: -32%; right: -28%; width: 125%; height: 95%; border-radius: 50%;
  background:
    radial-gradient(46% 40% at 62% 38%, rgba(44,58,79,0.5), transparent 70%),
    radial-gradient(30% 26% at 32% 62%, rgba(30,42,68,0.55), transparent 70%);
  animation: churnDrift 26s ease-in-out infinite alternate;
}
.ca-flash { opacity: 0; }
.ca-flash.f1 { top: -8%; right: -12%; width: 85%; height: 58%; background: radial-gradient(52% 46% at 68% 20%, rgba(143,179,232,0.19), transparent 65%); animation: stormFlash 11s linear infinite; }
.ca-flash.f2 { bottom: -10%; left: -14%; width: 88%; height: 58%; background: radial-gradient(50% 45% at 30% 75%, rgba(143,179,232,0.15), transparent 65%); animation: stormFlash 14.5s linear infinite; animation-delay: -6.2s; }
.reduced-motion .card-atmos { display: none; }
@media (prefers-reduced-motion: reduce) { .card-atmos { display: none; } }
/* the traveling border wire — §005's fc-wire mechanism in the DAWN palette (an
   ember riding the gold border; the blue stays the storm accent inside) */
.cta-wire {
  background: conic-gradient(from var(--wa),
    transparent 0 62%, rgba(244,169,60,0.06) 74%,
    rgba(244,169,60,0.55) 88%, rgba(251,211,141,0.9) 94%, transparent 100%);
  animation-duration: 10s; opacity: 0.9; z-index: 2;
}
/* letterhead: gold mono eyebrow over the Archivo title (v84: the dashed
   perforation under it is gone — user call) */
.form-head { position: relative; margin-bottom: 1.15rem; }
.cta-card .panel-head { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; color: var(--dawn-gold); margin-bottom: 0.6rem; }
.cta-card .panel-head svg { width: 17px; height: 17px; stroke-width: 2; filter: drop-shadow(0 0 7px rgba(244,169,60,0.65)); }
.form-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.12; color: var(--dawn-cream);
}

.cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem 0.8rem; text-align: left; }
.field-email, .field-select, .cta-form .btn-block, .form-note, .form-stamp { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
/* v83: labels are VISIBLE mono micro-labels with a gold tick (was sr-only +
   placeholder-as-label); placeholders demote to example hints */
.field label {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.45rem 2px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,239,226,0.52);
}
.field label::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: rgba(244,169,60,0.8); box-shadow: 0 0 6px rgba(244,169,60,0.45);
}
.field:has([required]) label::after { content: "*"; color: var(--dawn-gold); margin-left: 0.1rem; }
.field input, .field select {
  background: rgba(9,12,18,0.55); border: 1px solid rgba(246,239,226,0.13);
  border-radius: 12px; padding: 0.92rem 1.05rem; color: var(--dawn-cream);
  caret-color: var(--dawn-gold);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
  font-size: 16px;  /* 16px exactly — anything smaller triggers iOS Safari focus-zoom */
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .field input:hover, .field select:hover { border-color: rgba(244,169,60,0.4); }
}
/* Chrome autofill: keep the dark field (the UA yellow wash reads broken here) */
.field input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #10161f;
  -webkit-text-fill-color: #F6EFE2; caret-color: #F4A93C;
}
/* replace the OS-native dropdown chrome with a gold chevron */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4A93C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.field input::placeholder { color: rgba(178,186,200,0.55); }  /* v83: hints only — the visible mono labels carry the field names now */
/* FIELD-07 "Ember Focus" (lab winner): warm gold ring + 1px lift on focus.
   outline:none UNCONDITIONALLY — text fields always match :focus-visible, so the
   global outline was stacking a second hard edge over the ember ring (and it read
   as a different design than the approved lab specimen). The ring + gold border
   IS the focus indicator, for keyboard users too. background-COLOR only (a
   shorthand would wipe the select chevron). */
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--dawn-gold); background-color: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(244,169,60,0.16), 0 10px 30px -12px rgba(244,169,60,0.45);
  transform: translateY(-1px);
}
/* the submit inherits .btn-gold verbatim (same pill, gradient and Satoshi-700
   label as every other primary CTA) — only the form-scale padding differs */
.cta-form .btn-block { margin-top: 0.4rem; padding: 1.05rem; }
.form-note { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--dawn-gold); min-height: 1.1rem; text-align: center; margin-top: 0.2rem; }
/* v84: the trust foot is the REAL §004 FAMILY-OWNED stamp (user call — same
   badge, same font look; the HB-08 system is the one badge language site-wide) */
.form-stamp { display: flex; justify-content: center; margin-top: 0.1rem; }

/* v83: footer gains the brand lockup (scaled-down header mark) over the NAP line */
.site-footer {
  margin-top: 3rem; padding: 1.5rem 0 max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  display: flex; flex-direction: column; align-items: center; gap: 1.05rem;
}
.foot-brand { opacity: 0.92; }
.foot-brand .brand-mark { width: 27px; height: 27px; }
.foot-brand .brand-name { font-size: 0.98rem; }
.foot-brand .brand-sub { font-size: 0.52rem; margin-top: 2px; }
.foot-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.8rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim);
}
.foot-sep { opacity: 0.4; }
.foot-credit { color: var(--dawn-amber); }

/* ═══ NEW-PAGE CARDS (post-cinematic — normal document flow) ════════════════*/
/* The whole block is an opaque panel that RISES up over the cinematic (section
   004): a negative top margin pulls it over the pinned stage so there's no dead
   scroll, and the rounded top + shadow read as a card coming up on top. */
.page-content {
  /* -40vh: the §004 plate finishes its edge-to-edge fill at p≈0.878 and dwells
     full-bleed before this panel enters at p≈0.905 — don't re-deepen the overlap
     or the plate's payoff plays out hidden. */
  position: relative; z-index: 7; margin-top: -40vh;
  /* rise→expand entrance (pageEnter in app.js): the panel arrives slightly
     scaled-in so the filled §004 plate shows at its edges, then expands to
     full-bleed — same motion language as the plate itself. Origin top-center;
     the transform is cleared at rest so position:sticky inside stays healthy. */
  transform-origin: 50% 0;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(80% 55% at 18% 6%, rgba(30,42,68,0.9), transparent 60%),
    radial-gradient(90% 62% at 94% 100%, rgba(232,130,30,0.09), transparent 55%),
    radial-gradient(85% 58% at 14% 100%, rgba(44,58,79,0.6), transparent 62%),
    linear-gradient(180deg, #090C11 0%, var(--storm-night) 55%, #0A0E16 100%);
  box-shadow: 0 -34px 80px -18px rgba(0,0,0,0.72);
}
.page-content::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,169,60,0.6), transparent);
}
/* extra breathing room under the rounded top edge for the first block */
.section-why { position: relative; overflow: hidden; padding-top: clamp(4rem, 11vh, 8rem); }
.page-section { display: flex; justify-content: center; padding: clamp(2.5rem, 8vh, 6rem) clamp(1.1rem, 5vw, 3rem); }

/* ── Section 005 — Why New Day feature grid (plain content on .page-content) ──
   NOTE: §005 is intentionally NOT a cover card. .page-content is the single panel
   that rises up over the pinned §004; nesting a second scaling card inside it read
   as a "card on a card" and was reverted. Keep §005 flat, normal-flow content.
   rise() leaves an inline transform on .feature-card (the GSAP reveal target), so
   the VISIBLE card is the inner .fc-in — the hover lift lives there, un-fought. */
.section-why .why-inner { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; transform-origin: 50% 100%; backface-visibility: hidden; will-change: transform, opacity; }
.why-head { text-align: center; max-width: 900px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); }
.why-head .section-heading { font-size: clamp(2.2rem, 5.4vw, 4.6rem); letter-spacing: -0.03em; line-height: 1.06; }

/* ambience: two static light pools (radial gradients, NOT filter:blur — cheap)
   + the "First light" dawn god-rays. Hidden ≤860px; stilled on reduced-motion. */
.why-ambient { position: absolute; inset: 0; pointer-events: none; }
.why-orb { position: absolute; border-radius: 50%; }
.orb-l { top: 4%; left: -8%; width: min(560px, 46vw); height: min(560px, 46vw); background: radial-gradient(closest-side, rgba(244,169,60,0.07), transparent 70%); }
.orb-r { bottom: -6%; right: -9%; width: min(640px, 52vw); height: min(640px, 52vw); background: radial-gradient(closest-side, rgba(30,42,68,0.55), transparent 70%); }

/* "First light" — soft dawn god-rays fanning down from above the headline, then
   MASKED to fade out before the feature-card band so card copy is NEVER obscured
   (the old vortex sat behind the cards — this deliberately does not). A few slow
   dust motes drift up through the light. Pure CSS, no filter:blur; sits behind
   .why-inner (z-index:1); display:none ≤860px (inherited from .why-ambient). */
.why-rays {
  position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
  width: 130%; height: 60%; opacity: 0.65;
  /* the mask is what guarantees legibility: rays are gone well above the cards */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 40%, transparent 88%);
          mask: linear-gradient(180deg, #000 0%, #000 40%, transparent 88%);
}
.why-rays i {
  position: absolute; top: 0; left: 50%; width: clamp(80px, 9vw, 140px); height: 100%;
  transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(244,169,60,0.16), transparent);
  animation: rayBreath 9s ease-in-out infinite;
}
.why-rays i:nth-child(1) { transform: translateX(-50%) rotate(-21deg); animation-delay: 0s;   opacity: 0.7; }
.why-rays i:nth-child(2) { transform: translateX(-50%) rotate(-7deg);  animation-delay: 1.8s; }
.why-rays i:nth-child(3) { transform: translateX(-50%) rotate(7deg);   animation-delay: 3.4s; }
.why-rays i:nth-child(4) { transform: translateX(-50%) rotate(21deg);  animation-delay: 5s;   opacity: 0.7; }
@keyframes rayBreath { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.88; } }

/* dust motes drifting up through the dawn light — 2px, low alpha, can't obscure text */
.why-ambient .dust {
  position: absolute; bottom: -4%; width: 2px; height: 2px; border-radius: 50%;
  background: var(--first-light); opacity: 0; will-change: transform, opacity;
  animation: dustRise var(--dr) linear infinite; animation-delay: var(--dd);
}
.dust.d1 { left: 16%; --dr: 16s; --dd: 0s; }
.dust.d2 { left: 39%; --dr: 20s; --dd: -7s; background: var(--dawn-gold); }
.dust.d3 { left: 64%; --dr: 18s; --dd: -3s; }
.dust.d4 { left: 83%; --dr: 23s; --dd: -11s; background: var(--dawn-gold); }
@keyframes dustRise {
  0%   { opacity: 0;    transform: translateY(0) translateX(0); }
  14%  { opacity: 0.5; }
  85%  { opacity: 0.38; }
  100% { opacity: 0;    transform: translateY(-72vh) translateX(16px); }
}
/* reduced-motion: hold the rays as a soft still, hide the motes (only read in motion) */
.reduced-motion .why-rays i { animation: none; opacity: 0.5; }
.reduced-motion .why-ambient .dust { animation: none; opacity: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.6vw, 1.4rem); counter-reset: feat; }
.feature-card { counter-increment: feat; display: flex; }
.fc-in {
  position: relative; overflow: hidden; width: 100%;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 22px;
  padding: clamp(1.5rem, 2.2vw, 2rem); text-align: left;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), background 0.5s, border-color 0.5s, box-shadow 0.5s;
}
/* the datasheet language, louder: big mono watermark index + gold top hairline */
.fc-in::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute; top: 0.95rem; right: 1.2rem; line-height: 1;
  font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -0.03em; color: rgba(255,255,255,0.08);
  transition: color 0.5s;
}
.fc-in::after {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,169,60,0.45), transparent);
}
.feature-card:hover .fc-in {
  background: rgba(255,255,255,0.06); border-color: rgba(244,169,60,0.35);
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6), 0 0 34px rgba(244,169,60,0.12);
}
.feature-card:hover .fc-in::before { color: rgba(244,169,60,0.26); }

/* ── "Live Wire" card ring — adapted from lab BTN-08 (v70, user call) ────────
   A cool storm-light tail circles each card's 1px border — the storm's electric
   counterpoint to the gold. DOM: <i class="fc-wire"> inside .fc-in (both card
   pseudos are taken by the watermark + hairline). The masked-gradient ring only
   ever paints the border, so it works over the translucent card; cards are
   phase-offset so they never pulse in sync. Browsers without @property just
   hold a static ring. Static ≤860px + reduced-motion (no per-frame custom-prop
   animation on phones). */
@property --wa { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fc-wire {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--wa),
    transparent 0 62%, rgba(143,179,232,0.05) 74%,
    rgba(143,179,232,0.5) 88%, rgba(214,231,252,0.85) 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: fcWire 8s linear infinite;
  opacity: 0.8;
}
.feature-card:nth-child(2) .fc-wire { animation-delay: -2s; }
.feature-card:nth-child(3) .fc-wire { animation-delay: -4s; }
.feature-card:nth-child(4) .fc-wire { animation-delay: -6s; }
@keyframes fcWire { to { --wa: 360deg; } }

/* ── v73: per-icon hover micro-animations (user call) ────────────────────────
   Each blueprint icon animates its own story while the card is hovered:
   01 wind dashes flow over the dome + apex breathes · 02 anchors pulse in
   sequence (bolting down) + grade dashes flow · 03 the entry arrow nudges
   toward the door · 04 the $'s callout ring spins like a reticle + $ pops.
   Scoped to (hover:hover) so nothing latches on touch; the global
   prefers-reduced-motion clamp stills the loops. -12px dashoffset loops clean
   for both dash patterns (2 4 → 2 periods · 2 2 → 3 periods). */
@media (hover: hover) {
  .feature-card:hover .ic-wind  { animation: icDashFlow 1.1s linear infinite; }
  .feature-card:hover .ic-grade { animation: icDashFlow 1.4s linear infinite; }
  .feature-card:hover .ic-apex  { animation: icApexPulse 1.6s ease-in-out infinite; }
  .ic-anchor { transform-box: fill-box; transform-origin: center; }
  .feature-card:hover .ic-anchor    { animation: icAnchorPulse 1.5s ease-in-out infinite; }
  .feature-card:hover .ic-anchor.a2 { animation-delay: 0.22s; }
  .feature-card:hover .ic-anchor.a3 { animation-delay: 0.44s; }
  .feature-card:hover .ic-arrow { animation: icArrowNudge 1.1s ease-in-out infinite; }
  .ic-ring { transform-box: fill-box; transform-origin: center; }
  .feature-card:hover .ic-ring { animation: icRingSpin 7s linear infinite; }
  .ic-dollar { transform-box: fill-box; transform-origin: center; transition: transform 0.45s var(--ease-out); }
  .feature-card:hover .ic-dollar { transform: scale(1.08); }
}
@keyframes icDashFlow { to { stroke-dashoffset: -12; } }
@keyframes icApexPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes icAnchorPulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.75); } }
@keyframes icArrowNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes icRingSpin { to { transform: rotate(360deg); } }
/* v72: the wire ANIMATES on phones too (user call — the static ring read as
   "missing"); 4 small masked rings is a fine cost. Reduced-motion stays static. */
.reduced-motion .fc-wire { animation: none; --wa: 215deg; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .fc-wire { animation: none; --wa: 215deg; opacity: 0.55; } }

.feature-icohead { position: relative; align-self: flex-start; margin-bottom: 1.5rem; }
/* v78 (user call): the gold-bordered chip chrome is GONE — the blueprint svgs
   float bare (box kept so the .feature-tag pin + layout don't move) */
.feature-icon {
  width: 60px; height: 60px; color: var(--dawn-gold);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 40px; height: 40px; }   /* v71: the blueprint icons (64-viewBox, two-tone) need more room than the old 24-grid strokes */
/* fact stamp pinned to the icon chip — appears on hover; always shown on touch */
.feature-tag {
  position: absolute; bottom: -9px; right: -12px; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: var(--storm-night); border: 1px solid rgba(255,255,255,0.22);
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dawn-cream);
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.45s, transform 0.45s var(--ease-out);
}
.feature-tag.tag-gold { background: var(--dawn-gold); border-color: rgba(11,14,20,0.55); color: var(--text-ink); }
.feature-card:hover .feature-tag { opacity: 1; transform: translateY(0); }

.feature-title { font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; color: var(--dawn-cream); margin-bottom: 0.5rem; line-height: 1.2; transition: color 0.4s; }
.feature-card:hover .feature-title { color: var(--dawn-gold); }
.feature-desc { font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; }

/* footer diagrams — margin-top:auto keeps the row's bottoms aligned */
.feature-viz { margin-top: auto; padding-top: 1.3rem; }
.viz-svg { display: block; width: 100%; height: 54px; }
.viz-ground { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.viz-ground .gline { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.10); }
.viz-ground .gshelter {
  flex: none; width: 92px; height: 30px;
  background: rgba(244,169,60,0.16);
  border: 1px solid rgba(244,169,60,0.45); border-bottom: none;
  border-radius: 46px 46px 0 0;
  transition: height 0.5s var(--ease-out);
}
.feature-card:hover .gshelter { height: 42px; }
.viz-chip {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.72rem 0.9rem; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
}
.viz-chip svg { width: 20px; height: 20px; color: var(--dawn-gold); flex: none; }
.viz-chip span { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }

/* CTA row: ghost pill with a gold arrow orb, standards badges beneath */
.why-cta-row { display: flex; flex-direction: column; align-items: center; gap: clamp(1.6rem, 3vw, 2.4rem); margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.btn-arrow { gap: 0.9rem; padding: 0.55rem 0.62rem 0.55rem 1.8rem; border-color: rgba(244,169,60,0.55); }  /* v70: gold border at rest — higher contrast (user call) */
.btn-arrow:hover { color: var(--text); }   /* keep cream text — the orb + border carry the gold */
.btn-orb {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dawn-gold); color: var(--text-ink);
  display: grid; place-items: center;
  transition: transform 0.45s var(--ease-out), background 0.3s;
}
.btn-orb svg { width: 17px; height: 17px; }
.btn-arrow:hover .btn-orb { transform: translateX(6px); }  /* v70: orb stays --dawn-gold on hover — the bright first-light flash was cut (user call) */
/* standards row is a .stamp-row of HB-08 stamps (one badge system site-wide) */
.why-badges { justify-content: center; }

/* ── Floating shelter beside Proof + Grants (006 / 007) ─────────────────────*/
.shelter-zone {
  position: relative; display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(1rem, 3vw, 3.5rem); max-width: 1200px; margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 6rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 8vh, 6rem);
}
.shelter-float { position: sticky; top: 13vh; align-self: start; display: grid; place-items: center; min-height: 64vh; }
.shelter-orb {
  grid-area: 1 / 1; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,169,60,0.18) 0%, rgba(244,169,60,0) 70%);
  filter: blur(45px); animation: floaty 9s ease-in-out infinite;
}
/* stage = the capsule's exact bounds, so annotation callouts anchor cleanly */
.shelter-stage {
  grid-area: 1 / 1; position: relative; z-index: 1;
  width: clamp(178px, 18vw, 262px); height: clamp(340px, 42vw, 516px);
  display: grid; place-items: center; animation: floaty 7s ease-in-out infinite;
}
/* contain in BOTH axes — the real cutout is slightly narrower than the stage
   (0.45 vs 0.51), so width:100% alone would overflow the stage vertically */
.shelter-img { grid-area: 1 / 1; width: auto; height: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(0 40px 55px rgba(0,0,0,0.55)); transition: opacity 0.45s var(--ease-out); }
/* ── v80 · door-open peek — crossfade to the real open-door cutout. Height-matched
   to the stage; the swung door wing OVERFLOWS the stage right into the dark gap
   before the grants column (verified clear at 1200/1440, fits the viewport ≥360).
   The callouts describe the CLOSED shell, so they fade while open. ── */
.shelter-img-open {
  /* ABSOLUTE, not a grid item: a grid item's height:100% is circular in an
     implicit row and resolves to auto (natural 1161px — it rendered huge);
     absolute resolves against the stage's definite box. */
  position: absolute; left: 5%; top: 0; height: 100%; width: auto; max-width: none;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 40px 55px rgba(0,0,0,0.55)); transition: opacity 0.45s var(--ease-out);
}
/* 861–1199: the gap to the grants column shrinks — pull the open render in ~8%
   so the door wing clears the column (it kissed it at 1024) */
@media (min-width: 861px) and (max-width: 1199.98px) {
  .shelter-img-open { height: 92%; top: 4%; }
}
.shelter-stage.is-open .shelter-img-open { opacity: 1; }
.shelter-stage.is-open .shelter-img { opacity: 0; }
.shelter-stage.is-open .cap-callout { opacity: 0; pointer-events: none; transition-delay: 0s; }
.peek-facts {
  /* v82: Satoshi, not mono (user call — mono read odd; buttons/prose are body-font site-wide) */
  margin: 1rem 0 0; text-align: center; font-family: var(--font-body); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.02em; color: var(--storm-light);
  opacity: 0; transition: opacity 0.4s;
}
.shelter-float.peek-on .peek-facts { opacity: 1; }
.peek-toggle {
  margin-top: 0.55rem; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dawn-cream); background: none; border: 1px solid rgba(244,169,60,0.35);
  border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; min-height: 40px;
  transition: border-color 0.3s, background 0.3s;
}
.peek-toggle svg { width: 15px; height: 15px; color: var(--dawn-gold); flex: none; }
.peek-toggle:hover { border-color: var(--dawn-gold); background: rgba(244,169,60,0.08); }
/* placeholder capsule — auto-hidden when assets/shelter.png loads.
   Mirrors the real New Day unit: domed white-steel body, a tall rounded door
   with three hinges down the left seam, a chrome grab handle and a wordmark. */
.shelter-ph {
  grid-area: 1 / 1; position: relative; width: 100%; height: 100%;
  background:
    radial-gradient(125% 80% at 34% 20%, rgba(255,255,255,0.92), transparent 58%),
    linear-gradient(100deg, #a6b1bd 0%, #eaeff4 46%, #ccd4dd 72%, #98a4b1 100%);
  border-radius: 50% 50% 22px 22px / 27% 27% 5% 5%;
  box-shadow:
    inset 0 10px 24px rgba(255,255,255,0.6),
    inset -20px 0 42px rgba(0,0,0,0.22),
    inset 18px 0 30px rgba(255,255,255,0.25),
    0 46px 82px -30px rgba(0,0,0,0.65);
}
/* door — same painted steel as the body, read via a seam + hardware */
.ph-door {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 58%; height: 66%;
  border-radius: 46% 46% 16px 16px / 34% 34% 6% 6%;
  background: linear-gradient(100deg, rgba(0,0,0,0.06), rgba(255,255,255,0.12) 50%, rgba(0,0,0,0.07));
  border: 1px solid rgba(44,58,79,0.24);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.4), inset 0 -10px 20px rgba(0,0,0,0.1);
}
/* three hinges down the left edge of the door */
.ph-hinges {
  position: absolute; left: -5px; top: 15%; height: 70%;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.ph-hinges i {
  width: clamp(12px, 1vw, 15px); height: clamp(20px, 2.3vw, 29px); border-radius: 3px;
  background: linear-gradient(90deg, #d7dde4, #fbfdff 42%, #b4bec9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(0,0,0,0.05);
}
/* chrome grab handle on the right */
.ph-handle {
  position: absolute; right: 8%; top: 45%;
  width: clamp(8px, 0.9vw, 11px); height: clamp(46px, 7vw, 76px); border-radius: 8px;
  background: linear-gradient(90deg, #95a0ab, #f3f6f9 46%, #a6b0bb);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.45);
}
/* understated painted wordmark, like the photo */
.ph-badge {
  position: absolute; left: 50%; top: 33%; transform: translateX(-50%);
  font-family: var(--font-heavy); font-size: clamp(0.72rem, 1.05vw, 0.96rem);
  letter-spacing: 0.01em; color: rgba(28,40,64,0.5); white-space: nowrap; line-height: 1;
}
/* ── Capsule annotation callouts (anchored to .shelter-stage) ─────────────── */
.cap-callout {
  position: absolute; left: 0; pointer-events: none;
  display: grid; grid-template-columns: max-content max-content max-content; align-items: center;
  transform: translate(-100%, -50%);
  opacity: 0; transition: opacity 0.7s var(--ease-out);
}
.cap-callout.is-in { opacity: 1; }
/* base anchors serve the 861–1199 band only (mobile ≤860 and the ≥1200
   showpiece both override all four) — walls/door pulled 1%→5% in v76 so the
   wrapped chips clear the viewport's left edge at 1024 */
.cap-dome  { top: 11%; left: 11%; transition-delay: 0.05s; }
.cap-size  { top: 28%; left: 8%;  transition-delay: 0.11s; }   /* v82: 42″⌀ × 80″H (replaced the vent stat — user call: buyers care about size/room, and "4× the 6 sq-in standard" read confusing) */
.cap-walls { top: 45%; left: 5%;  transition-delay: 0.17s; }
.cap-door  { top: 62%; left: 5%;  transition-delay: 0.29s; }
.cap-base  { top: 87%; left: 4%;  transition-delay: 0.41s; }
/* v77: STAMP callouts (lab §14 CAP-01 picks: CAP-B Satoshi sub + CAP-H stamp) —
   the v76 glass card is GONE (archived in lab §14). Each callout is now an
   HB-08-anatomy stamp ([blueprint svg | divider | Archivo-Black header] — the
   FEMA/ICC/Texas-Tech badge language, per the user's screenshot) with a Satoshi
   500 sub-line BELOW it, a LONGER leader line, and the dot ON the shell.
   Grid: row 1 = stamp·line·dot (the line stays centered on the STAMP), row 2 =
   the sub; the fixed translateY pins the stamp midline to the anchor no matter
   how tall the sub wraps. */
.cap-stamp {
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.42rem 0.66rem; border-radius: 9px;
  border: 1px solid rgba(244,169,60,0.5);   /* v82: higher-contrast gold border (user call) */
  background: linear-gradient(180deg, rgba(244,169,60,0.05), rgba(244,169,60,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px -18px rgba(0,0,0,0.7);
}
.cap-stamp svg { width: 20px; height: 20px; display: block; flex: none; }
.cap-sd { width: 1px; height: 14px; background: rgba(244,169,60,0.5); flex: none; }
.cap-stamp b { font-family: var(--font-heavy); font-weight: 400; font-size: 0.72rem; letter-spacing: 0; color: var(--dawn-cream); line-height: 1; }
.cap-sub {
  grid-row: 2; grid-column: 1; justify-self: start;
  font-family: var(--font-body); font-weight: 500; font-size: 0.66rem; color: var(--storm-light);
  line-height: 1.35; margin-top: 0.42rem; padding-left: 2px;
}
/* v79 (user calls): the SUB-LINE carries the light blue (--storm-light) for
   contrast against the gold stamps; leaders + dots run DARKER (#5B84C8 — the
   light blue washed out on the white shell, the door dot vanished on the chrome
   handle) and dots grew to 8px */
.cap-line { width: 26px; height: 1px; margin: 0 9px; background: linear-gradient(90deg, rgba(91,132,200,0), #5B84C8); }
.cap-dot { width: 8px; height: 8px; border-radius: 50%; background: #5B84C8; box-shadow: 0 0 0 3px rgba(91,132,200,0.2), 0 0 8px rgba(91,132,200,0.75); }
/* ≥1200 (v82, user call): the badges SPLIT around the shell — LEFT trio keeps
   the in-stamp icons + long 80px leaders ("backed off"); RIGHT pair runs
   text-only with short leaders (the grants column caps the room — a right
   callout may extend to ~173px past its dot; verified 18px+ clear at 1440).
   Dots stay ON the shell features. */
@media (min-width: 1200px) {
  .cap-callout { transform: translate(-100%, -17px); }   /* 17px = half the ~34px stamp row */
  .cap-line { width: 80px; }
  .cap-dome  { top: 10%; left: 41%; }
  .cap-door  { top: 46%; left: 34%; }
  .cap-base  { top: 84%; left: 36%; }
  /* RIGHT pair — mirrored grid order, dots on the shell's right half */
  .cap-size, .cap-walls { left: auto; transform: translate(100%, -17px); }
  /* v83: raised onto the dome curve (12/9) — at 22/42 the dot sat ~60% INSIDE the
     shell and the sub read storm-light-on-white (user call). 9% from stage-right
     tracks the dome edge across the whole ≥1200 clamp range (width- AND
     height-contained stage geometries) — stamp + sub now sit fully on dark. */
  .cap-size  { top: 12%; right: 9%; }
  .cap-walls { top: 57%; right: 12%; }   /* dot on the body strip right of the door, not the hinge line */
  .cap-size .cap-stamp svg, .cap-size .cap-sd, .cap-walls .cap-stamp svg, .cap-walls .cap-sd { display: none; }
  .cap-size .cap-dot,   .cap-walls .cap-dot   { grid-column: 1; grid-row: 1; }
  .cap-size .cap-line,  .cap-walls .cap-line  { grid-column: 2; grid-row: 1; width: 36px; background: linear-gradient(90deg, #5B84C8, rgba(91,132,200,0)); }
  .cap-size .cap-stamp, .cap-walls .cap-stamp { grid-column: 3; grid-row: 1; }
  .cap-size .cap-sub,   .cap-walls .cap-sub   { grid-column: 3; }
  .cap-size, .cap-walls { --pin: -13px; transform: translate(100%, -13px); }   /* icon-less row is shorter */
}
/* 861–1199px: no lateral room — the in-stamp icon + divider go (text-only
   stamp), the sub wraps; base anchors (dots at the shell edge) unchanged */
@media (min-width: 861px) and (max-width: 1199.98px) {
  .cap-callout { transform: translate(-100%, -13px); }   /* half the icon-less stamp row */
  .cap-stamp svg, .cap-sd { display: none; }
  .cap-sub { max-width: 128px; }
}
/* hover warm-up (the shared v70 stamp behavior) + icon dash-flow ≥1200 */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .cap-stamp { pointer-events: auto; transition: border-color 0.3s, background 0.3s; }
  .cap-stamp:hover { border-color: rgba(244,169,60,0.8); background: linear-gradient(180deg, rgba(244,169,60,0.09), rgba(244,169,60,0.02)); }
  .cap-stamp:hover .cc-dash { animation: icDashFlow 1.3s linear infinite; }
}

/* ── 006 right side — lab pick ZONE-B "Split Panels" ────────────────────────
   The heading lives OUTSIDE (zone-head, full width). The column reads: open-air
   price statement → two light panels (programs | 3-step) → offers strip →
   full-width CTA → trust row. Each .zone-block reveals individually. */
.zone-head { grid-column: 1 / -1; text-align: center; max-width: 760px; margin: 0 auto clamp(1.8rem, 4vw, 3.2rem); }
/* §006's head has NO label (user call, v56) and the heading sits on ONE line —
   sized so "Grants can cover most of the cost." clears the zone width ≥ ~600px */
.shelter-zone .zone-head { max-width: none; }
.shelter-zone .zone-head .section-heading { margin-top: 0; font-size: clamp(1.9rem, 4.3vw, 3.5rem); }
/* NOTE the .page-section on the selector: `.shelter-content .page-section
   { display:block }` sits LATER in this file at equal specificity and silently
   killed this flex (gap never applied — the column stacked at 0px for weeks).
   The extra class keeps the flex + gap winning. */
.shelter-content .page-section.zone-section { display: flex; flex-direction: column; gap: clamp(2rem, 3.6vw, 3rem); }
/* open-air price — mono-datasheet language, no card around it */
.price-eyebrow {
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 0.85rem; display: inline-flex; align-items: center; gap: 0.55rem;
}
.price-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34C759; box-shadow: 0 0 10px rgba(52,199,89,0.75); }
.price-figrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price-figure {
  font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(2.7rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--dawn-cream); margin: 0; display: flex; align-items: baseline; gap: 0.5rem;
}
.price-cur { color: var(--dawn-gold); font-size: 0.55em; }
.price-inc { font-family: var(--font-body); font-weight: 500; font-size: 0.3em; letter-spacing: 0.01em; color: var(--text-dim); }
.price-shield { width: clamp(44px, 4vw, 54px); height: clamp(44px, 4vw, 54px); color: var(--dawn-gold); filter: drop-shadow(0 0 12px rgba(244,169,60,0.4)); flex: none; }
.price-sub { font-size: clamp(1rem, 1.3vw, 1.14rem); color: var(--text); opacity: 0.9; line-height: 1.55; max-width: 52ch; margin: 1.15rem 0 0; }
/* the "how it works" flow line — replaced the boxed 3-step process card (v56):
   the panels crowded the column and step 3 was already the headline. Reuses the
   §007 ticket's .route-dash arrow language. */
.zone-flow {
  display: flex; align-items: center; gap: 0.8rem; margin: 0;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dawn-cream);
}
.zone-flow svg { width: 17px; height: 17px; color: var(--dawn-gold); flex: none; }
.zone-flow span { white-space: nowrap; }
.panel-head {
  display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 1.15rem;
}
.panel-head svg { width: 16px; height: 16px; color: var(--dawn-gold); flex: none; }
/* trust row is a .stamp-row of HB-08 stamps (one badge system site-wide).
   The old STAR-01 starwrap CSS moved out with it (v69) — the rating stamp's
   .rate mini-stars carry the stars now; STAR-01's reference impl lives in lab.html. */
.zone-trust { justify-content: center; }
@media (max-width: 600px) {
  .zone-flow { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .zone-flow .route-dash { display: none; }
}
/* grant programs — CHIP-05 pill tiles (same plate language as the §004 chip) */
/* CHIP-05 (lab pick): compact pill tiles wrapping to fit the panel — on hover
   they fill gold and the dot stamps into a check ("you may qualify") */
.grant-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 0.55rem; margin: 0; padding: 0; }
.grant-badges li {
  position: relative; display: inline-flex; align-items: center; min-width: 0; line-height: 1.35; min-height: 38px;
  padding: 0.3rem 0.85rem 0.3rem 1.8rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.01em; color: var(--dawn-cream);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background-color: rgba(255,255,255,0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .3s var(--ease-out), background-color .3s, color .3s, transform .3s var(--ease-out);
}
.grant-badges li::before {
  content: ""; position: absolute; left: 0.85rem; top: 50%; margin-top: -2.5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--dawn-gold); box-shadow: 0 0 7px rgba(244,169,60,0.7);
  transition: transform .3s var(--ease-out);
}
.grant-badges li::after {
  content: "✓"; position: absolute; left: 0.66rem; top: 50%; font-weight: 700; font-size: 0.7rem; color: var(--text-ink);
  transform: translateY(-50%) scale(0) rotate(-40deg);
  transition: transform .35s var(--ease-out) .05s;
}
/* SoonerSafe — the preferred program, listed first: gold OUTLINE (not filled)
   with a shield-check mark */
.grant-badges .badge-strong {
  gap: 0.5rem; padding-left: 0.85rem; font-weight: 700; color: var(--dawn-cream);
  border-color: var(--dawn-gold); background-color: rgba(244,169,60,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 20px rgba(244,169,60,0.22);
}
.grant-badges .badge-strong svg { width: 15px; height: 15px; color: var(--dawn-gold); filter: drop-shadow(0 0 6px rgba(244,169,60,0.5)); flex: none; }
.grant-badges .badge-strong::before, .grant-badges .badge-strong::after { content: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* mobile stand-in for the desktop callouts (chips below the capsule) — hidden on
   desktop, where the annotated callouts do this job with room to breathe */
.capsule-specs { display: none; }

.shelter-content { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.4rem); }
.shelter-content .page-section { display: block; padding: 0; min-height: 0; }

/* ── 007 — Delivery "freight ticket" (free local zone + per-mile meter) ──────
   One gold-bordered panel split like a shipping ticket: route stub (left) and
   a live mileage meter (right). v84 (user call): ALL the dashes are gone — the
   perforation is a solid soft gold hairline and the route leader is a solid
   gradient line. The meter reads DELIVERY_RATES in app.js — the client's
   published 10-mile table. No backdrop-filter anywhere in it (mobile perf). */
.delivery-inner { max-width: 1200px; width: 100%; margin: 0 auto; }
.delivery-inner .zone-head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.delivery-ticket {
  display: grid; grid-template-columns: 0.9fr 1.25fr;
  border: 1px solid rgba(244,169,60,0.35); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006));
}
.ticket-stub { display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.ticket-calc { padding: clamp(1.4rem, 2.6vw, 2.1rem); border-left: 1px solid rgba(244,169,60,0.22); }
.ticket-route {
  display: flex; align-items: center; gap: 0.8rem; margin: 0;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.ticket-route b { color: var(--dawn-cream); font-weight: 700; white-space: nowrap; }
.route-dash { position: relative; flex: 1; height: 1px; min-width: 34px; background: linear-gradient(90deg, rgba(244,169,60,0.12), rgba(244,169,60,0.65)); }  /* v84: solid leader (dashes cut, user call) — also feeds §006's .zone-flow */
.route-dash::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px;
  border-top: 1.5px solid var(--dawn-gold); border-right: 1.5px solid var(--dawn-gold);
  transform: translateY(-50%) rotate(45deg);
}
/* fact rows spread through the stub's full height (desktop; content-height on
   the mobile stack, where flex:1 has no spare room and gap is the floor) */
.ticket-points { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 1.1rem; margin: 0; padding: 0; }
.ticket-points li { display: flex; gap: 0.75rem; font-size: 1rem; color: var(--text-dim); line-height: 1.55; }
.ticket-points svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--dawn-gold); }
.ticket-points b { font-family: var(--font-display); font-weight: 700; color: var(--dawn-cream); }
/* v80: free-zone mini-map — desktop garnish at the stub's foot (hidden ≤860 with
   the letterhead); the graphic is deliberately schematic, the zone CLAIM lives
   in the fact-row text */
.zone-map { margin: 1.2rem 0 0; }
.zone-map svg { width: min(210px, 100%); height: auto; display: block; }
.zm-state { stroke: rgba(246,239,226,0.5); stroke-width: 1.5; fill: rgba(255,255,255,0.02); stroke-linejoin: round; }
.zm-zone { fill: rgba(244,169,60,0.16); }
.zm-ring { stroke: var(--dawn-gold); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.zm-dot { fill: var(--dawn-gold); filter: drop-shadow(0 0 6px rgba(244,169,60,0.9)); }
.zm-label { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.18em; fill: var(--dawn-cream); text-anchor: middle; opacity: 0.85; }
.zone-map figcaption { margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
/* the meter */
.calc-readout { margin: 0.2rem 0 1.4rem; }
/* v84 (user call — "don't care for that font"): the meter readout leaves
   JetBrains. Big price = Archivo 800 (the display voice), meta/fine-print =
   Satoshi. Mono stays only on the axis endpoints + the small field label
   (eyebrow/data voice). */
.calc-price {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(2.9rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--dawn-cream);
}
.calc-cur { color: var(--dawn-gold); font-size: 0.55em; font-weight: 700; }
.calc-meta {
  margin: 0.55rem 0 0; font-family: var(--font-body); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim);
}
/* gold-fill range slider (--fill painted by app.js) */
.calc-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px;
  margin: 0; background: transparent; cursor: pointer; --fill: 16.7%;
}
.calc-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--dawn-amber), var(--dawn-gold) var(--fill), rgba(255,255,255,0.13) var(--fill));
}
/* v76: the thumb IS the delivery truck (user call) — the ticket's truck glyph,
   gold strokes on a dark body (inline data-URI, only <>/# encoded), wheels
   riding the track line (margin-top lifts the body above it). The v75 blink is
   CUT — the gauge needle below is the section's quiet interest cue instead. */
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 40px; height: 30px; margin-top: -22px;   /* wheels land ON the track line */
  border: 0; border-radius: 0; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A93C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23F6EFE2' stroke-width='1.2' d='M4.5 14v-4.75a3.25 3.25 0 0 1 6.5 0V14z'/%3E%3Cpath fill='%23141924' d='M1 14h12v2.5H1z'/%3E%3Cpath fill='%23141924' d='M13 9.5h3.2l2.8 3.2v3.8h-6z'/%3E%3Ccircle fill='%23141924' cx='5.5' cy='18.5' r='2'/%3E%3Ccircle fill='%23141924' cx='16.5' cy='18.5' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.55));
  transition: transform 0.25s var(--ease-out);
}
.calc-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.13); }
.calc-range::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--dawn-amber), var(--dawn-gold)); }
.calc-range::-moz-range-thumb {
  width: 40px; height: 30px; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A93C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23F6EFE2' stroke-width='1.2' d='M4.5 14v-4.75a3.25 3.25 0 0 1 6.5 0V14z'/%3E%3Cpath fill='%23141924' d='M1 14h12v2.5H1z'/%3E%3Cpath fill='%23141924' d='M13 9.5h3.2l2.8 3.2v3.8h-6z'/%3E%3Ccircle fill='%23141924' cx='5.5' cy='18.5' r='2'/%3E%3Ccircle fill='%23141924' cx='16.5' cy='18.5' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.55));
}
/* v76: the quiet interest cue — the "Estimate your delivery" gauge needle
   sweeps like a live meter (replaces the cut thumb blink) */
.ticket-calc .panel-head svg { overflow: visible; }
.gauge-needle { transform-box: view-box; transform-origin: 12px 13px; animation: gaugeSweep 4.5s ease-in-out infinite; }
@keyframes gaugeSweep {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-26deg); }
  60%      { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .gauge-needle { animation: none; } }
.calc-scale {
  display: flex; justify-content: space-between; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.7;
}
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem 1.2rem; flex-wrap: wrap; margin-top: 1.25rem; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.calc-chips button {
  min-height: 38px; padding: 0.25rem 0.85rem; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--dawn-cream);  /* v84: Satoshi 700 — the site-wide button voice */
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.calc-chips button.is-on { background: var(--dawn-gold); border-color: var(--dawn-gold); color: var(--text-ink); font-weight: 700; }
.calc-field {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.calc-field input {
  width: 5ch; padding: 0.3rem 0.1rem; text-align: right;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dawn-cream);  /* 16px exactly — iOS focus-zoom guard; v84: Satoshi */
  background: transparent; border: 0; border-bottom: 1px solid rgba(244,169,60,0.45); border-radius: 0;
  transition: border-color 0.25s;
}
.calc-field input:focus { border-bottom-color: var(--dawn-gold); }
.calc-field input:focus:not(:focus-visible) { outline: none; }
.calc-field input::-webkit-outer-spin-button, .calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-note { margin: 1.3rem 0 0; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.01em; line-height: 1.7; color: var(--text-dim); }  /* v84: Satoshi (mono fine print read odd — user call) */
.calc-note b { color: var(--dawn-gold); font-weight: 700; }
.calc-note a { color: var(--dawn-gold); border-bottom: 1px solid rgba(244,169,60,0.4); }
@media (hover: hover) {
  .calc-chips button:not(.is-on):hover { border-color: rgba(244,169,60,0.55); color: var(--dawn-gold); transform: translateY(-2px); }
  .calc-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════*/
/* Header collapse — phones AND short-landscape (930×430 landscape phones are wider
   than 860px but the desktop header needs ~1000px of min-content and clips) */
@media (max-width: 860px), (max-height: 600px) and (orientation: landscape) {
  .nav { display: none; }
  .brand-sub { display: none; }

  /* ── Header: real 44px tap-to-call chip + hamburger; number hidden (no hover
        on touch — the CALL-01 expand is a pointer-device treat) ─ */
  .header-actions { gap: 0.55rem; }
  .header-phone { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 0.7rem; }
  .header-phone .phone-num { display: none; }
  .header-actions .btn-gold { padding: 0.6rem 0.95rem; font-size: 0.85rem; }  /* 481–860: keep Request Call, just smaller */

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--dawn-cream); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* z-index 58 — BELOW the header (60) so the hamburger-turned-X stays visible
     and tappable over the open drawer; still above every page layer */
  .mobile-drawer {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 58;
    background: rgba(9,12,17,0.97);
    padding: calc(env(safe-area-inset-top) + 5.5rem) 1.6rem calc(env(safe-area-inset-bottom) + 2rem);
  }
  .mobile-drawer[hidden] { display: none; }
  .drawer-nav { display: flex; flex-direction: column; gap: 0.9rem; width: min(420px, 100%); text-align: center; }
  .drawer-nav a:not(.btn) {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--dawn-cream);
    min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .drawer-nav .btn { margin-top: 0.2rem; min-height: 52px; }
}

@media (max-width: 860px) {
  /* ── Kill backdrop-filter on phones (blurred fixed layers over a live scrub = the
        worst mobile cost); raise the panel opacity so the glass still reads ─────── */
  .site-header.scrolled, .fc-in, .shelter-ph, .stats-panel {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .site-header.scrolled { background: rgba(11,14,20,0.95); }
  .fc-in         { background: rgba(255,255,255,0.06); }
  .why-ambient   { display: none; }   /* no drifting lines/light pools over a phone scroll */
  .stats-panel   {
    /* full-bleed on phones (see plateCover mobile branch): kill the gold border so
       no card outline/frame shows at the viewport edges when it's edge-to-edge */
    border: none;
    background:
      radial-gradient(85% 55% at 15% 4%, rgba(30,42,68,0.92), transparent 60%),
      radial-gradient(100% 75% at 92% 100%, rgba(232,130,30,0.20), transparent 55%),
      linear-gradient(180deg, #090C11 0%, var(--storm-night) 55%, #0A0E16 100%); }  /* card carries the gradient (§004 cover card) */
  .grain { display: none; }  /* drop the per-frame overlay-blend pass */

  /* ── Pinned film supers (v84): small type blocks in the frame's dark zones —
        the tornado stays the show. Left-aligned, top-anchored (below the fixed
        header), full-ish width; the focal track keeps the action clear of them. */
  .scroll-section { overflow: hidden; }  /* supers never scroll; drift stays inside */
  .section-stats { text-align: center; overflow-y: auto; -webkit-overflow-scrolling: touch; }  /* §004 keeps its centered, scroll-safe plate */
  .section-super .sup { max-width: min(86vw, 420px); }
  .sup-tl .sup { left: 1.3rem; right: auto; top: calc(4.9rem + env(safe-area-inset-top)); }
  .sup-br .sup { left: 1.3rem; right: 1.3rem; bottom: max(3.6rem, calc(env(safe-area-inset-bottom) + 2.6rem)); max-width: min(88vw, 460px); }
  .sup-rc .sup { left: 1.3rem; right: auto; top: calc(5.4rem + env(safe-area-inset-top)); }
  .sup-head { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .sup-br .sup-head { font-size: clamp(1.2rem, 5.6vw, 1.6rem); }
  .sup-quote { font-size: 0.95rem; }
  .hero-tagline { margin-left: auto; margin-right: auto; }

  /* ── Hero: trim vertical space, kill the scroll-cue/trust collision ─────────── */
  .hero-standalone {
    padding: 5rem clamp(1.2rem, 6vw, 6rem) 4.4rem;   /* v70: bottom lane for the restored scroll cue */
    /* OPAQUE base on mobile: the desktop scrim fades to 0.06 alpha on the right,
       but the mobile card is full-width, so the fixed pinned cards (z5) bled through
       the transparent hero at the top. A solid base hides them; the storm canvas is
       revealed as the hero scrolls away. (Desktop keeps the clear-right scrim.) */
    background:
      linear-gradient(180deg, rgba(8,11,17,0.86) 0%, rgba(8,11,17,0.52) 44%, rgba(8,11,17,0.94) 100%),
      var(--storm-night);
  }
  .hero-tagline { margin-bottom: 1.8rem; }
  .hero-actions { justify-content: center; margin-bottom: 1.6rem; }
  .hero-trust { justify-content: center; }
  /* v70: the cue is BACK on phones (user call — "make sure we can see the scroll
     into the storm animation") — sized down; the hero's bottom padding reserves
     its lane so the banner never collides with it. */
  .scroll-cue { bottom: 1rem; gap: 0.45rem; }
  .scroll-cue-text { font-size: 0.58rem; letter-spacing: 0.22em; }

  /* ── Touch-friendly buttons ─────────────────────────────────────────────────*/
  .btn { min-height: 44px; }
  .why-cta-row .btn { width: 100%; justify-content: space-between; }

  .feature-grid { grid-template-columns: 1fr 1fr; }
  .shelter-zone { grid-template-columns: 1fr; padding: 0 1.1rem clamp(2rem, 5vh, 3rem); }
  /* ── The PRODUCT stays on phones: static compact capsule between the zone
        header and the cards, with the desktop callouts swapped for spec chips
        (the side-anchored callouts need lateral room a phone doesn't have) ── */
  .shelter-float { position: static; min-height: 0; margin: 0.4rem auto 0.6rem; row-gap: 1.2rem; }
  .shelter-orb { width: 280px; height: 280px; }
  .shelter-stage { width: clamp(160px, 42vw, 205px); height: clamp(310px, 82vw, 400px); }
  /* Annotated callouts on phones too (user request): show the orange dots + short
     connectors + compact labels, 2 per side, instead of the 2×2 spec cards. Room is
     tight (~96px each side at 390px), so labels wrap and stay small. */
  .capsule-specs { display: none; }
  .cap-callout { opacity: 1; }   /* always visible on phones (don't depend on the scroll-reveal trigger) */
  /* v77 stamp callouts at phone scale: in-stamp icon + divider hidden (no room),
     the stamp header wraps inside a tiny chip, the Satoshi sub wraps below.
     Anchors keep the v70 geometry — dots ON the shell edge, 2 per side. */
  .cap-stamp svg, .cap-sd { display: none; }
  .cap-stamp { padding: 0.3rem 0.42rem; border-radius: 7px; white-space: normal; }
  .cap-stamp b { font-size: 0.6rem; line-height: 1.15; max-width: 72px; }
  .cap-sub { font-size: 0.5rem; line-height: 1.25; max-width: 74px; margin-top: 0.24rem; }
  .cap-line { width: 9px; margin: 0 4px; }
  /* LEFT trio — dot at the shelter's left, stamp extends left (size joined v80/v82) */
  .cap-dome { top: 15%; left: 12%; }
  .cap-size { top: 38%; left: 12%; }
  .cap-door { top: 60%; left: 12%; }
  .cap-dome, .cap-size, .cap-door { transform: translate(-100%, -14px); }   /* pin the stamp row to the anchor */
  /* RIGHT pair — mirrored via explicit grid placement: dot · line · stamp */
  .cap-walls, .cap-base { left: auto; right: 12%; transform: translate(100%, -14px); }
  .cap-walls { top: 34%; }
  .cap-base  { top: 85%; }
  .cap-walls .cap-dot,   .cap-base .cap-dot   { grid-column: 1; grid-row: 1; }
  .cap-walls .cap-line,  .cap-base .cap-line  { grid-column: 2; grid-row: 1; background: linear-gradient(90deg, #5B84C8, rgba(91,132,200,0)); }
  .cap-walls .cap-stamp, .cap-base .cap-stamp { grid-column: 3; grid-row: 1; }
  .cap-walls .cap-sub,   .cap-base .cap-sub   { grid-column: 3; }
  .cta-form { grid-template-columns: 1fr; }
  .cta-layout { grid-template-columns: 1fr; gap: 2.4rem; }
  .cta-copy { text-align: center; }
  .cta-siren, .cta-sub { margin-left: auto; margin-right: auto; }
  .cta-meta-line { justify-content: center; }
  #scroll-container { height: 460vh; }
  /* smaller rise/overlap on phones; svh tracks the iOS toolbar (vh fallback first) */
  .page-content {
    margin-top: -24vh; margin-top: -22svh; border-radius: 24px 24px 0 0;
    /* v78 (user call): §005 read noticeably brighter/bluer than desktop — the big
       top-left indigo pool spans most of a phone's width; dim it (0.9 → 0.62) */
    background:
      radial-gradient(80% 55% at 18% 6%, rgba(30,42,68,0.62), transparent 60%),
      radial-gradient(90% 62% at 94% 100%, rgba(232,130,30,0.09), transparent 55%),
      radial-gradient(85% 58% at 14% 100%, rgba(44,58,79,0.6), transparent 62%),
      linear-gradient(180deg, #090C11 0%, var(--storm-night) 55%, #0A0E16 100%);
  }
  .section-why { padding-top: clamp(3rem, 8vh, 5rem); }

  /* ── Delivery ticket stacks: the meter leads, the route stub follows (the
        perforation flips from a left border to a top border) ─────────────── */
  .delivery-ticket { display: flex; flex-direction: column; }
  .ticket-calc { order: -1; border-left: 0; }
  .ticket-stub { border-top: 1px solid rgba(244,169,60,0.22); }
  .calc-chips { width: 100%; }
  .calc-chips button { flex: 1 1 calc(33.33% - 0.4rem); min-height: 44px; }  /* 2 tidy rows of 3 — no lone stretched chip */
  .calc-row { justify-content: flex-end; }

  /* §007 declutter on phones: the meter is the tool — drop the stub's decorative
     letterhead (panel-head + "Tulsa → Your county" route; the section heading
     already carries it) and tighten the 3 explainer facts + fine print so the
     ticket stops feeling long after the type-in field. */
  .ticket-stub .panel-head, .ticket-route, .zone-map { display: none; }   /* v80: map joins the ≤860 declutter */
  .ticket-stub { gap: 0.9rem; padding-top: 1.15rem; }
  .ticket-points { gap: 0.8rem; }
  .ticket-points li { line-height: 1.5; }
  .calc-note { margin-top: 1rem; line-height: 1.6; }

  /* §006 declutter on phones: hide the secondary "how it works" line (the CTA +
     "grants can bring it close to $0" copy already say it) and tighten the column
     so price → programs → offers → CTA reads shorter and less busy. */
  .zone-flow { display: none; }
  .shelter-content .page-section.zone-section { gap: 1.5rem; }
  .grant-badges { gap: 0.5rem 0.45rem; }
}

/* Portrait phones — inset the §004 plate below the fixed header (incl. the notch
   safe-area) and above the home indicator, so all four borders are visible as it
   rises/expands and the heading clears the header. Desktop keeps edge-to-edge fill. */
@media (max-width: 860px) and (orientation: portrait) {
  /* Plate is FULL-BLEED on phones (plateCover mobile branch — no floating card, no
     scale-down, no side outline). It sits behind the fixed header, so pad the CONTENT
     down to clear the notched header and lift off the home indicator; the flex column
     then centers the content in the space below the header. */
  .stats-panel {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  /* smallest phones: declutter header (Request Call lives in the hero + drawer) */
  .header-actions .btn-gold { display: none; }
  .hero-standalone { padding-left: 1.4rem; padding-right: 1.4rem; }
  .page-section { padding-left: 1.4rem; padding-right: 1.4rem; }

  /* type floors that were too big at ≤390px; drop hard <br> so text wraps naturally */
  .hero-heading { font-size: clamp(2.7rem, 15vw, 3.6rem); line-height: 0.98; letter-spacing: -0.02em; }
  .cta-heading  { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.08; }
  .section-heading { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.08; letter-spacing: -0.01em; }
  /* NB: keep the authored <br> in headings — every one sits mid-phrase with no
     surrounding space, so display:none would weld words. */
  .sup-head { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  .sup-br .sup-head { font-size: clamp(1.1rem, 5.4vw, 1.4rem); }

  /* §004 payoff plate on small phones — compact the dawn column */
  .dawn-mark { width: 48px; margin-bottom: 1rem; }
  .stats-head { margin-bottom: 1.6rem; }
  .stats-head .dawn-sub { font-size: 0.95rem; }
  .dawn-note { padding: 0.85rem 0.95rem; }
  .dawn-note p { font-size: 0.86rem; }
  /* compact the trust stamps so 4 of them wrap into 2 tidy rows, not 3 */
  .stamp-row { gap: 0.45rem; }
  .stamp-row .stamp { padding: 0.42rem 0.62rem; gap: 0.45rem; }

  /* one-up feature cards as compact horizontal rows (icon left, copy right) —
     four tall stacked cards were ~1500px of scroll for four short bullets.
     The footer diagrams + fact stamps are desktop garnish: hidden here. */
  .feature-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .fc-in {
    display: grid; grid-template-columns: 48px 1fr; gap: 0.2rem 1rem; align-items: center;
    padding: 1rem 1.15rem; border-radius: 18px;
  }
  .feature-icohead { margin: 0; grid-row: 1 / 3; align-self: center; }
  .feature-icon { width: 48px; height: 48px; border-radius: 13px; }
  .feature-icon svg { width: 32px; height: 32px; }   /* v71: blueprint icons */
  .feature-title { font-size: 1.02rem; margin: 0; }
  .feature-desc { font-size: 0.86rem; }
  .feature-tag, .feature-viz { display: none; }
  .fc-in::before { top: 0.75rem; right: 0.9rem; font-size: 1.05rem; }
  .grant-badges li { font-size: 0.64rem; }
  .calc-price { font-size: 2.7rem; }
  .ticket-points li { font-size: 0.9rem; }
  .ticket-stub, .ticket-calc { padding: 1.2rem 1.1rem 1.3rem; }
}

/* ── Landscape phones (very short height): fit fixed cards so nothing clips ─────*/
@media (max-height: 600px) and (orientation: landscape) {
  .hero-standalone { padding-top: 3.5rem; padding-bottom: 1.5rem; justify-content: flex-start; }
  .hero-heading { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: 1rem; }
  .hero-tagline { margin-bottom: 1.1rem; }
  .hero-actions { margin-bottom: 1.1rem; }
  .scroll-cue { display: none; }
  /* film supers on a ~430px-tall viewport: compact type, tuck below the header */
  .section-super .sup { max-width: min(60vw, 420px); }
  .sup-tl .sup, .sup-rc .sup { top: 3.4rem; }
  .sup-br .sup { bottom: 1.6rem; }
  .sup-head { font-size: clamp(1.3rem, 4.4vw, 1.9rem); }
  .sup-br .sup-head { font-size: clamp(1.05rem, 3.4vw, 1.4rem); }
  .sup-quote { font-size: 0.88rem; max-width: 40ch; }
  .section-stats { justify-content: center; padding-top: 3rem; }
  /* clear the condensed header + notch when the plate is contained/expanded in landscape */
  .stats-panel {
    padding: calc(48px + env(safe-area-inset-top, 0px))
             calc(1.3rem + env(safe-area-inset-right, 0px))
             0.9rem
             calc(1.3rem + env(safe-area-inset-left, 0px));
  }
  /* §004 payoff on short landscape — trim the column so it clears ~430px */
  .stats-head { margin-bottom: 0.7rem; }
  .dawn-mark { display: none; }
  .section-stats .section-heading { font-size: clamp(1.6rem, 4.2vw, 2.2rem); }
  .stats-head .dawn-sub { margin-top: 0.6rem; font-size: 0.88rem; }
  .dawn-note { padding: 0.6rem 0.9rem; }
  .dawn-note p { font-size: 0.8rem; }
  .dawn-trust { margin-top: 0.9rem; }
  .dawn-cta { margin-top: 0.9rem; }
  .page-content { margin-top: -6vh; }
}

/* ── Touch devices: neutralize sticky :hover lift/glow that latches after a tap ─*/
@media (hover: none) {
  .btn-gold:hover, .btn-ghost:hover, .cta-form .btn-block:hover { transform: none; }
  .feature-card:hover .fc-in { transform: none; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09); box-shadow: none; }
  .feature-card:hover .fc-in::before { color: rgba(255,255,255,0.08); }
  .feature-card:hover .feature-title { color: var(--dawn-cream); }
  .feature-card:hover .gshelter { height: 30px; }
  .feature-tag { opacity: 1; transform: none; }   /* the stamps carry real Brand Facts — keep them visible on touch */
  .btn-arrow:hover .btn-orb { transform: none; background: var(--dawn-gold); }
  .nav a:hover::after { width: 0; }
  /* the letter roll would latch mid-flip after a tap — keep the base label on touch */
  .btn-roll:hover .r1 i { transform: none; }
  .btn-roll:hover .r2 i { transform: translateY(130%); }
}

/* ═══ REDUCED MOTION — accessible static fallback ══════════════════════════*/
.reduced-motion .canvas-wrap { clip-path: none; opacity: 0.28; }
.reduced-motion .scroll-section { position: relative; height: auto; opacity: 1; visibility: visible; }
.reduced-motion #scroll-container { height: auto; }
.reduced-motion .scroll-section { padding-top: 5rem; padding-bottom: 5rem; pointer-events: auto; }
/* film supers un-fix into a readable static stack (the absolute placements
   assume a full-viewport fixed stage) */
.reduced-motion .section-super .sup { position: relative; inset: auto; max-width: 640px; margin: 0 auto; padding: 0 1.4rem; }
.reduced-motion .section-super .sup::before { display: none; }
.reduced-motion .scroll-cue { display: none; }
/* the plate must size to its content here (inset:0 collapses it to the section's
   padding and clips the whole spec grid), and the panel overlap makes no sense
   without the pinned scrub */
.reduced-motion .stats-panel { position: relative; inset: auto; width: 100%; }
.reduced-motion .page-content { margin-top: 0; }
.reduced-motion .dawn-mark { animation: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.1s !important; }
  .why-ambient .dust { opacity: 0; }   /* motes only read in motion — hide when the loops are stilled */
}

/* ── v80 · mobile sticky call bar (≤860px) — 24-hour phone-first business ─── */
@media (max-width: 860px) {
  .call-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;   /* under the header (60) + drawer (58) */
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 52px; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(11,14,20,0.94); border-top: 1px solid rgba(244,169,60,0.3);
    box-shadow: 0 -12px 30px -12px rgba(0,0,0,0.6);
    color: var(--dawn-gold); text-decoration: none;
    transform: translateY(102%); transition: transform 0.45s var(--ease-out);
  }
  .call-bar.is-on { transform: translateY(0); }
  .call-bar svg { width: 17px; height: 17px; flex: none; }
  .call-bar b { font-family: var(--font-mono); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; color: var(--dawn-gold); }
  .call-bar .cb-sub { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; color: var(--text-dim); }
}
@media (min-width: 861px) { .call-bar { display: none; } }