/* ==========================================================================
   Flagstaff Water Heaters LLC — site stylesheet
   Design system: FWH brand tokens (brand/tokens/colors.json) ·
   structure per Mercury (full-bleed bands, sticky blur nav) ·
   button vocabulary per Rivian (one warm filled primary + ghost-over-photo).
   Brand laws: hot/cold in every layout (~1:4 warm:cool) ·
   proportion ≈ 60% black/navy · 25% white · 10% summit · 5% ember.
   Motion scale: --dur-1 press/hover · --dur-2 menus/morphs · --dur-3 reveals.
   All motion is opacity/transform, opt-in behind prefers-reduced-motion:
   no-preference. No springs — this brand is precision hardware, not a toy.
   Cinematic exceptions keep literal timings: hero crossfade 1.2s, 404 sun .9s.
   ========================================================================== */

/* ---- fonts (self-hosted, latin subsets) -------------------------------- */
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/alfa-slab-one-400-latin.48a110c7fd.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/montserrat-var-latin.06b16db7a9.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600-latin.215a93c696.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700-latin.3787a5a419.woff2') format('woff2')}

/* ---- tokens ------------------------------------------------------------- */
:root{
  --basalt:#000000; --steel-dark:#040505;
  --navy:#012549; --ridge:#254B72; --glacier:#4D9AE1;
  --summit:#0079F1; --lcd:#01C8EC;
  --ember:#FB7005; --ignition:#FA3202;
  --copper:#CA5D20; --copper-light:#F39158; --brass:#DE9A28;
  --snow:#FBFBFB; --steel-light:#DFDFDF; --steel-mid:#6B6C6E;
  /* accessible ink variants (from the brand-kit artifact's own CSS) */
  --warm-ink:#B84A00;        /* ember for TEXT on light — 4.6:1 */
  --warm-on-dark:#FF8B2E;
  --cold-ink:#0060C4;        /* summit for TEXT on light */
  --cold-on-dark:#3D96F5;

  --f-display:'Alfa Slab One','Rockwell',Georgia,serif;
  --f-body:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --f-util:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;

  /* fluid 1.25 major-third on 16px */
  --fs-display-xl:clamp(2.5rem,1.55rem + 4.2vw,3.8rem);
  --fs-display-l:clamp(2.1rem,1.4rem + 3vw,3.05rem);
  --fs-h1:clamp(1.75rem,1.3rem + 2vw,2.45rem);
  --fs-h2:clamp(1.45rem,1.15rem + 1.3vw,1.95rem);
  --fs-h3:clamp(1.2rem,1.05rem + .7vw,1.55rem);
  --fs-lead:clamp(1.06rem,1rem + .35vw,1.25rem);
  --fs-body:1rem; --fs-small:.8125rem;

  --max:1200px; --pad:clamp(1rem,4vw,2rem);
  --r-card:18px; --r-pill:999px; --r-input:10px;
  --shadow-card:0 1px 0 rgba(1,37,73,.04),0 18px 40px -24px rgba(1,37,73,.35);
  --hairline-dark:rgba(251,251,251,.14);
  --hairline-light:rgba(1,37,73,.14);

  /* motion */
  --dur-1:.14s;   /* press feedback, hover accents, link underlines */
  --dur-2:.22s;   /* menus, chevrons, accordions, nav state */
  --dur-3:.45s;   /* IO reveals, callbar slide — the ceiling for UI motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* on-screen morphs only */

  /* stacking */
  --z-callbar:40; --z-nav:50; --z-skip:100;
}

/* ---- reset-ish ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--basalt);color:var(--snow);
  font:500 var(--fs-body)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--cold-on-dark)}
p{margin:0 0 1em}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:600}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ember);color:var(--basalt);
  padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:700;z-index:var(--z-skip)}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--summit);outline-offset:2px;border-radius:4px}
.btn:focus-visible{outline-offset:3px;border-radius:var(--r-pill)}

/* fixed nav must not swallow in-page anchor targets */
[id]{scroll-margin-top:5rem}

a,button,summary{-webkit-tap-highlight-color:transparent} /* we provide our own pressed states */

::selection{background:var(--summit);color:var(--snow)}
.band-white ::selection{background:var(--ember);color:var(--basalt)}

h1,h2{text-wrap:balance}
p{text-wrap:pretty}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- utility type ------------------------------------------------------- */
.eyebrow{font:600 .8125rem/1 var(--f-util);letter-spacing:.16em;text-transform:uppercase}
.tagline-caps{font:700 .9375rem/1 var(--f-util);letter-spacing:.22em;text-transform:uppercase}
.display{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em;line-height:1.04}

/* ---- buttons (Rivian vocabulary, FWH colours) --------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;border-radius:var(--r-pill);
  font:700 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;border:0;
  padding:.95rem 1.6rem;transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) ease,
  border-color var(--dur-1) ease,color var(--dur-1) ease}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
.btn-primary{background:var(--ember);color:var(--basalt)}     /* 7.42:1 */
.btn-ghost{background:transparent;border:2px solid var(--snow);color:var(--snow);padding:.85rem 1.5rem}
.on-light .btn-ghost,.btn-ghost.on-light{border-color:var(--ridge);color:var(--ridge)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--copper-light)}
  .btn-ghost:hover{background:rgba(251,251,251,.12)}
  .on-light .btn-ghost:hover{background:rgba(37,75,114,.08)}
}
.btn .ic{flex:none}

/* ---- sticky nav: transparent → blur + navy fill ------------------------- */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  transition:background-color var(--dur-2) ease,box-shadow var(--dur-2) ease}
/* Scrolled state stays readable over light bands without becoming a slab. The
   badge is 232px wide at rest (153px tall), which made the fixed bar 171px - 41%
   of a short laptop viewport - so filling it with near-opaque navy read as "the
   top goes black". Shrinking the badge on scroll cuts the bar to ~117px, and the
   lighter tint plus a smaller blur radius keeps it legible while costing the
   compositor less on every scrolled frame. */
.site-nav.scrolled{background:rgba(1,20,40,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--hairline-dark)}
.site-nav.scrolled .nav-logo img{width:120px}
@media (min-width:720px){.site-nav.scrolled .nav-logo img{width:150px}}
.nav-inner{max-width:var(--max);margin-inline:auto;padding:.55rem var(--pad);
  display:flex;align-items:center;gap:1.25rem}
.nav-logo img{width:176px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:width var(--dur-2) var(--ease-out)}
@media (min-width:720px){.nav-logo img{width:232px}}
.nav-links{display:none;gap:1.4rem;margin-left:auto}
.nav-links a{color:var(--snow);text-decoration:none;font-weight:600;font-size:.9375rem;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:border-bottom-color var(--dur-1) ease}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{border-bottom-color:var(--ember)}}
.nav-links a[aria-current="page"]{border-bottom-color:var(--summit)}
@media (min-width:1020px){.nav-links{display:flex}}
.nav-cta{display:flex;align-items:center;gap:.75rem;margin-left:auto}
@media (min-width:1020px){.nav-cta{margin-left:0}}
.btn-nav{padding:.7rem 1.15rem;font-size:.9375rem}
.btn-nav .l-call{display:none}
@media (max-width:419px){.btn-nav .l-num{display:none}.btn-nav .l-call{display:inline}.btn-nav{padding:.7rem .9rem}}
.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer;border-radius:10px}
.nav-burger span{display:block;height:2px;background:var(--snow);border-radius:2px;
  transition:transform var(--dur-2) var(--ease-in-out),opacity var(--dur-2) ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1020px){.nav-burger{display:none}}
@media (max-width:1019.98px){
  .nav-links{position:fixed;inset:0;padding:7rem var(--pad) 2rem;flex-direction:column;
    background:rgba(1,18,36,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);gap:.4rem}
  .nav-links.open{display:flex}
  @media (prefers-reduced-motion:no-preference){
    .nav-links{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),
      display var(--dur-2) allow-discrete}
    .nav-links:not(.open){opacity:0;transform:translateY(-8px)}
    .nav-links.open{opacity:1;transform:none}
    @starting-style{.nav-links.open{opacity:0;transform:translateY(-8px)}}
  }
  .nav-links a{font-size:1.4rem;padding:.8rem 0;border-bottom:1px solid var(--hairline-dark)}
}
body.nav-open{overflow:hidden}

/* ---- hero: layered scene + scroll-driven parallax ----------------------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:clip;
  background:var(--navy)}
.hero-scene{position:absolute;inset:0;z-index:0}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 34%}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,10,22,.38) 0%,rgba(1,10,22,0) 34%,rgba(1,10,22,.06) 55%,rgba(0,4,10,.82) 88%,rgba(0,0,0,.92) 100%)}
/* Same nav-clearance rule as .page-hero. The hero is min-height (not height), so
   on a tall viewport the copy still sits at the bottom and the extra top padding
   is absorbed by free space; on a short/landscape one the hero grows instead of
   letting the copy slide up under the badge. */
.hero-content{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  padding:9.5rem var(--pad) clamp(3.5rem,8vh,6rem)}
@media (min-width:720px){.hero-content{padding-top:12.25rem}}
.hero-eyebrow{color:var(--copper-light);margin-bottom:1rem}
.hero-h1{font-size:var(--fs-display-xl);max-width:14ch;color:var(--snow);
  text-shadow:0 2px 24px rgba(0,8,18,.55);margin-bottom:.4em}
.hero-sub{font-size:var(--fs-lead);max-width:52ch;color:var(--steel-light);margin-bottom:1.6rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.5rem}
.hero-roc{font:600 .875rem/1.4 var(--f-util);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,251,251,.82)}
.hero-roc strong{color:var(--snow);font-weight:700}
.scroll-cue{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;z-index:2;opacity:.7;color:var(--snow)}
@media (prefers-reduced-motion:no-preference){
  /* 2 iterations = 4.8s total, under the WCAG 2.2.2 5s auto-motion line */
  .scroll-cue{animation:cue-float 2.4s var(--ease-out) 2}
}
@keyframes cue-float{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* scroll-driven drift on the copy only — the video carries the real motion.
   animation-range caps the timeline at one viewport so the drift completes
   exactly as the hero exits (without it, progress spans the whole document
   and the effect is imperceptible while the hero is still visible). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-on .hero-content {animation:para-copy 1s linear both; animation-timeline:scroll(root);
      animation-range:0 100svh}
    .parallax-on .hero-photo   {animation:para-photo 1s linear both; animation-timeline:scroll(root);
      animation-range:0 100svh}
  }
}
@keyframes para-copy {to{transform:translateY(-4rem);opacity:.25}}
/* The scale must out-run the drift or the photo's top edge lifts off the hero and
   exposes the ground behind it. scale(S) gives (S-1)/2 of headroom above; a
   translateY(D) after it shifts down by D*S. 1.08/4% left only 4% of headroom
   against a 4.32% shift - a hairline gap. 1.12/3% gives 6% against 3.36%. */
@keyframes para-photo{to{transform:scale(1.12) translateY(3%)}}

/* mobile + tablet hero: a one-time Ken Burns SETTLE (zoom-out, ends on the LCP
   framing). 4.8s sits under the WCAG 2.2.2 5s auto-motion line. Scoped below
   1024px so it can never fight the desktop scroll parallax. */
@media (max-width:1023.98px) and (prefers-reduced-motion:no-preference){
  .hero-photo{animation:hero-settle 4.8s var(--ease-out) both}
}
@keyframes hero-settle{from{transform:scale(1.05)}}

/* ---- hero video slot (Layer 3, dormant until a file exists) ------------- */
#herovideo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease} /* cinematic, not UI — exempt from the motion scale */
#herovideo.live{opacity:1}
#herovideo video{width:100%;height:100%;object-fit:cover}

/* ---- interior page hero -------------------------------------------------- */
/* Top padding must clear the FIXED nav at its full (unscrolled) height, or the
   badge paints straight over the eyebrow - the nav is 134px under 720px and 171px
   above it, so 9.5rem/152px was short by ~19px on wide screens and the orange
   eyebrow sat behind the logo on every interior page. */
.page-hero{background:linear-gradient(175deg,#010D1F 0%,var(--navy) 55%,#02305e 100%);
  color:var(--snow);padding:9.5rem 0 3.4rem;position:relative;overflow:clip}
@media (min-width:720px){.page-hero{padding-top:12.25rem}}
.page-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.28),transparent 80%)}
.page-hero .eyebrow{color:var(--copper-light);display:block;margin-bottom:.8rem}
.page-hero h1{font-family:var(--f-display);font-weight:400;font-size:var(--fs-display-l);
  letter-spacing:-.01em;max-width:20ch}
.page-hero .lead{color:var(--steel-light);max-width:58ch}
.page-hero .hero-ctas{margin-top:1.4rem;margin-bottom:0}

/* per-type identity — each page type opens with its own character */
/* service pages: ember glow low on the horizon, ember-ruled eyebrow */
.page-hero--svc::before{content:"";position:absolute;inset:auto 0 0 0;height:120px;
  pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 100% at 12% 100%,rgba(251,112,5,.14),transparent 70%),
    linear-gradient(to top,rgba(1,37,73,.5),transparent)}
.page-hero--svc .eyebrow{border-left:3px solid var(--ember);padding-left:.7rem}
.page-hero--svc.is-sedona .eyebrow{border-left-color:var(--copper-light)}
.page-hero--svc.is-sedona{background:linear-gradient(175deg,#010D1F 0%,var(--navy) 50%,#243A57 100%)}
/* info pages: blueprint hairline grid — engineering-drawing character */
.page-hero--info{background:
  repeating-linear-gradient(0deg,rgba(77,154,225,.05) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(77,154,225,.05) 0 1px,transparent 1px 56px),
  linear-gradient(175deg,#010D1F 0%,var(--navy) 55%,#02305e 100%)}
.page-hero--info .eyebrow{color:var(--glacier)}
/* contact: the plate's LCD cyan */
.page-hero--contact .eyebrow{color:var(--lcd);text-shadow:0 0 10px rgba(1,200,236,.4)}
.page-hero--contact h1{border-bottom:1px solid rgba(1,200,236,.25);padding-bottom:.35em;
  max-width:fit-content}
/* legal: the quietest room in the house */
.page-hero--legal{background:linear-gradient(175deg,#010D1F,var(--navy));padding-bottom:2.6rem}
.page-hero--legal .eyebrow{color:var(--steel-light)}

/* shared entrance: one-time, CSS-only, always completes — no-JS safe */
@media (prefers-reduced-motion:no-preference){
  .page-hero .eyebrow,.page-hero h1,.page-hero .lead,.page-hero .hero-ctas{
    animation:hero-rise var(--dur-3) var(--ease-out) both}
  .page-hero h1{animation-delay:.06s}
  .page-hero .lead{animation-delay:.12s}
  .page-hero .hero-ctas{animation-delay:.18s}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(12px)}}

/* ---- data tables ---------------------------------------------------------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th{font:600 .8125rem/1.3 var(--f-util);letter-spacing:.12em;text-transform:uppercase;
  text-align:left;padding:.7rem .8rem;border-bottom:2px solid var(--ridge);
  background:linear-gradient(180deg,rgba(37,75,114,.10),rgba(37,75,114,0))}
.band-navy .tbl th,.band-black .tbl th{background:linear-gradient(180deg,rgba(251,251,251,.06),transparent)}
@media (hover:hover) and (pointer:fine){
  .tbl tr:hover td{background:rgba(37,75,114,.05)}
  .band-navy .tbl tr:hover td,.band-black .tbl tr:hover td{background:rgba(251,251,251,.04)}
}
.tbl td{padding:.7rem .8rem;border-bottom:1px solid var(--hairline-light);vertical-align:top}
.band-navy .tbl td,.band-black .tbl td{border-color:var(--hairline-dark)}
.tbl td:first-child{font-weight:700}
.tbl .yes{color:var(--warm-ink);font-weight:700}
.band-navy .tbl .yes{color:var(--warm-on-dark)}

/* ---- symptom triage cards ------------------------------------------------- */
.triage{display:grid;gap:1.1rem}
@media (min-width:820px){.triage{grid-template-columns:repeat(2,1fr)}}
.triage .card h3{display:flex;gap:.6rem;align-items:baseline}
.triage .card h3 .sym{color:var(--warm-ink);font-family:var(--f-util);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:.8125rem}

/* ---- full-bleed bands --------------------------------------------------- */
.band{padding-block:clamp(3.5rem,9vh,6.5rem)}
.band-white{background:var(--snow);color:var(--basalt)}
.band-white a{color:var(--cold-ink)}
.band-navy{background:var(--navy);color:var(--snow)}
.band-black{background:var(--basalt);color:var(--snow)}
.band-head{max-width:62ch;margin-bottom:2.2rem}
.band-white .band-kicker{color:var(--warm-ink)}
.band-navy .band-kicker,.band-black .band-kicker{color:var(--copper-light)}
.band-kicker{display:block;margin-bottom:.7rem}
.band-white .muted{color:var(--steel-mid)}
.band-navy .muted,.band-black .muted{color:var(--steel-light)}
.lead{font-size:var(--fs-lead)}

/* ---- cards -------------------------------------------------------------- */
.card-grid{display:grid;gap:1.2rem}
@media (min-width:760px){.card-grid-3{grid-template-columns:repeat(3,1fr)}
  .card-grid-2{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--hairline-light);border-radius:var(--r-card);
  padding:1.6rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.55rem}
.card h3{margin:0}
.card .card-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--navy);color:var(--lcd);margin-bottom:.5rem}
.card-link{margin-top:auto;font-weight:700;text-decoration:none;color:var(--cold-ink)}
.card-link:hover{text-decoration:underline}
.band-navy .card,.band-black .card{border-color:var(--hairline-dark);color:var(--snow);
  background:linear-gradient(160deg,rgba(251,251,251,.07),rgba(251,251,251,.028) 55%,rgba(1,37,73,.14));
  box-shadow:inset 0 1px 0 rgba(251,251,251,.10)} /* machined top edge */
.band-navy .card .card-ic{background:rgba(1,200,236,.12)}
.band-navy .card .card-link{color:var(--cold-on-dark)}

/* ---- route strip (services, no icon cards) ------------------------------- */
.routes{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline-light)}
.routes li{border-bottom:1px solid var(--hairline-light)}
.routes a{display:flex;align-items:center;gap:1.4rem;padding:1.5rem .4rem;text-decoration:none;
  color:var(--basalt)}
.route-no{font:400 2rem/1 var(--f-display);color:var(--copper);min-width:2.6rem}
.route-body{display:block;flex:1}
.route-body strong{display:block;font-size:1.25rem;margin-bottom:.15rem}
.route-body span{color:var(--steel-mid);font-size:.9375rem;max-width:56ch;display:block}
.route-go{font-size:1.6rem;color:var(--ridge);transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .routes a:hover .route-go{transform:translateX(6px);color:var(--warm-ink)}
  .routes a:hover .route-no{color:var(--warm-ink)}
}
.routes a{transition:background-color var(--dur-1) ease}
.routes a:active{background:rgba(37,75,114,.06)}
.routes a:active .route-no{color:var(--warm-ink)}

/* ---- the rating plate (signature component) ------------------------------ */
.plate{position:relative;max-width:880px;margin-top:2.4rem;border-radius:8px;
  background:linear-gradient(160deg,#37536f 0%,#22405c 45%,#16344f 100%);
  border:1px solid rgba(251,251,251,.22);
  box-shadow:inset 0 1px 0 rgba(251,251,251,.18),inset 0 -8px 22px rgba(0,10,22,.4),
    0 22px 44px -26px rgba(0,0,0,.7);
  padding:1.3rem 1.5rem 1.4rem}
.plate::before,.plate::after{content:"";position:absolute;width:9px;height:9px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6ecf2,#8fa3b5 55%,#3d5468);
  box-shadow:inset 0 -1px 2px rgba(0,10,22,.6)}
.plate::before{top:9px;left:10px}.plate::after{top:9px;right:10px}
.plate-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:700 .75rem/1 var(--f-util);letter-spacing:.22em;color:#cfe0ee;
  border-bottom:1px solid rgba(251,251,251,.2);padding:0 .2rem .8rem;margin-bottom:1rem}
.plate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem 1.4rem;margin:0}
.plate-grid dt{font:600 .68rem/1.2 var(--f-util);letter-spacing:.14em;text-transform:uppercase;
  color:#9fb6ca;margin-bottom:.25rem}
.plate-grid dd{margin:0;font:700 .95rem/1.25 var(--f-body);color:var(--snow);
  letter-spacing:.02em}
.plate-grid .lcd{display:inline-block;font-family:var(--f-util);font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:1.05rem;letter-spacing:.12em;color:var(--lcd);background:#04121e;
  border:1px solid rgba(1,200,236,.35);border-radius:4px;padding:.15rem .55rem;
  text-shadow:0 0 8px rgba(1,200,236,.55)}
.plate-note{margin:1.1rem .2rem 0;font-size:.9rem;color:#d9e4ee;max-width:64ch}
@media (max-width:560px){.plate{padding:1.1rem 1rem 1.2rem}}

/* ---- fact list (no boxes) ------------------------------------------------- */
.fact-list{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;max-width:760px}
.fact-list li{border-left:3px solid var(--copper);padding-left:1.1rem}
.fact-list h3{margin-bottom:.25rem}
.fact-list p{margin:0;color:var(--steel-mid)}

/* ---- step timeline ("Scheduled, not scrambled") ------------------------- */
.steps{display:grid;gap:1.4rem;counter-reset:step}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps--fluid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.band-white .steps{color:var(--basalt)}
.band-white .step p{color:var(--steel-mid)}
.step{position:relative;padding-top:1rem;border-top:1px solid var(--hairline-dark)}
.band-white .step{border-top-color:var(--hairline-light)}
.band-white .step::before{color:var(--warm-ink)}   /* raw ember on snow is 2.7:1 - fails 3:1 */
.band-white .step::after{background:var(--warm-ink)}
.step::after{content:"";position:absolute;top:-1px;left:0;width:2.2rem;height:2px;
  background:var(--ember)} /* index tick — the 5% warm law on the black band */
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font:400 2.4rem/1 var(--f-display);color:var(--ember);display:block;margin-bottom:.5rem}
.step h3{font-size:1.1rem}
.step p{color:var(--steel-light);font-size:.9375rem;margin:0}

/* ---- stat / proof row --------------------------------------------------- */
.proof-row{display:grid;gap:1.2rem;margin-top:2rem}
@media (min-width:760px){.proof-row{grid-template-columns:repeat(3,1fr)}}
.proof{border-left:3px solid var(--ember);padding-left:1rem}
.proof strong{display:block;font:400 1.6rem/1.2 var(--f-display);margin-bottom:.2rem}
.band-white .proof strong{color:var(--navy)}

/* ---- figures / charts --------------------------------------------------- */
.fig{margin:2rem 0;padding:1.4rem;border-radius:var(--r-card)}
.band-white .fig{background:#fff;border:1px solid var(--hairline-light);box-shadow:var(--shadow-card)}
.band-navy .fig,.band-black .fig{background:rgba(251,251,251,.04);border:1px solid var(--hairline-dark);
  box-shadow:inset 0 1px 0 rgba(251,251,251,.06)}
.fig figcaption{font-size:var(--fs-small);margin-top:.9rem}
.band-white .fig figcaption{color:var(--steel-mid)}
.band-navy .fig figcaption,.band-black .fig figcaption{color:var(--steel-light)}
.fig svg{width:100%;height:auto}
.fig-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ridge) transparent;
  overscroll-behavior-x:contain}
.fig-scroll::-webkit-scrollbar{height:8px}
.fig-scroll::-webkit-scrollbar-thumb{background:var(--ridge);border-radius:4px}
.fig-scroll::-webkit-scrollbar-track{background:transparent}
.fig-scroll > svg{min-width:560px}

/* chart data-lines draw in as they scroll into view. Gated by the same
   @supports + .parallax-on low-power gate as the hero parallax; browsers
   without support (or gated users) see the chart fully drawn.
   The timeline is NAMED on .fig (whose nearest scroller is the root) because
   an anonymous view() on the path would bind to .fig-scroll - overflow-x:auto
   makes it a scroll container whose block axis never scrolls, freezing the
   animation. Named timelines are visible to descendants via ancestor lookup. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .parallax-on .fig{view-timeline:--figv block}
    .parallax-on .fig .draw{stroke-dasharray:1;stroke-dashoffset:1;
      animation:fig-draw 1s linear both;animation-timeline:--figv;
      animation-range:entry 25% cover 60%}
  }
}
@keyframes fig-draw{to{stroke-dashoffset:0}}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hairline-light);padding:.35rem 0}
.band-navy .faq details,.band-black .faq details{border-color:var(--hairline-dark)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding:.85rem 2.2rem .85rem 0;
  position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.65rem;height:.65rem;
  border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-2) var(--ease-in-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq-a{padding:0 0 1.1rem;max-width:65ch}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq-a{animation:faq-in var(--dur-2) var(--ease-out)}
  /* height ease where ::details-content is supported (Chromium 131+);
     elsewhere the open stays instant + the fade above */
  @supports (interpolate-size: allow-keywords){
    .faq details::details-content{interpolate-size:allow-keywords;
      block-size:0;overflow-y:clip;
      transition:block-size var(--dur-2) var(--ease-out),
                 content-visibility var(--dur-2) allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
}
@keyframes faq-in{from{opacity:0;transform:translateY(4px)}}
.faq .faq-a p{margin-bottom:.6em}

/* ---- inline notice / legal strip ---------------------------------------- */
.legal-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark);
  padding:.9rem 0;font:600 .8125rem/1.5 var(--f-util);letter-spacing:.12em;text-transform:uppercase}

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{background:linear-gradient(140deg,var(--navy) 0%,#02182f 60%,var(--basalt) 100%);
  color:var(--snow);text-align:center}
.cta-band .wrap{max-width:760px}
.cta-band h2{font-size:var(--fs-display-l)}
.cta-band .hours{color:var(--steel-light);margin-top:1rem;font-size:.9375rem}

/* ---- utilities (replaced every inline style= attribute -> CSP style-src
   'self' with no 'unsafe-inline'; keep it that way) ----------------------- */
.mt-1{margin-top:1rem}.mt-15{margin-top:1.5rem}.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}.mt-35{margin-top:3.5rem}
.ctas-center{justify-content:center;margin-top:1.6rem}
.measure{max-width:65ch}
.measure-list{max-width:62ch;padding-left:1.2em}
.small-note{font-size:.9rem}
.disclosure{max-width:820px}
.disclosure summary{cursor:pointer;font-weight:700}
.footer-logo{width:200px;height:auto}
.page-hero--404{min-height:70svh;display:grid;align-items:center}
.p404-ridge{max-width:100%;margin-top:3rem;opacity:.6}

/* ---- prose pages --------------------------------------------------------- */
.prose{max-width:70ch}
.prose h2{margin-top:2.2em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.45em}

/* ---- footer -------------------------------------------------------------- */
.site-footer{background:var(--navy);color:var(--snow);
  border-top:3px solid var(--ember);padding-top:3.5rem}
.footer-grid{display:grid;gap:2.2rem;padding-bottom:2.5rem}
@media (min-width:860px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-tag{font:700 .9375rem/1.4 var(--f-util);letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper-light);margin:.9rem 0 .4rem}
.footer-legal-line{font-size:var(--fs-small);color:var(--steel-light)}
.footer-h{font:600 .8125rem/1 var(--f-util);letter-spacing:.16em;text-transform:uppercase;
  color:var(--glacier);margin:0 0 .9rem}
.footer-col{display:flex;flex-direction:column;gap:.45rem}
.footer-col a{color:var(--snow);text-decoration:none;font-size:.9375rem;opacity:.92}
.footer-col a:hover{text-decoration:underline;opacity:1}
.footer-phone{font:400 1.35rem/1.2 var(--f-display);color:var(--snow) !important}
.footer-hours,.footer-area{font-size:var(--fs-small);color:var(--steel-light);margin:0}
.footer-base{border-top:1px solid var(--hairline-dark);padding-block:1.2rem;
  font-size:var(--fs-small);color:var(--steel-light)}
.footer-base p{margin:0}

/* ---- sticky mobile call bar ----------------------------------------------
   The sole conversion path on a phone-only business. Appears only after the
   hero scrolls out (commitment signal), hides over the footer (which has its
   own phone link) and under the open menu. Overlay, not layout — zero CLS. */
.callbar{position:fixed;inset:auto 0 0 0;z-index:var(--z-callbar);display:none;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.78));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline-dark);
  transform:translateY(110%);visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out),visibility 0s linear var(--dur-3)}
.callbar.show{transform:none;visibility:visible;
  transition:transform var(--dur-3) var(--ease-out)}
.callbar .btn{width:100%;justify-content:center}
@media (max-width:1019.98px){.callbar{display:block}}
body.nav-open .callbar{transform:translateY(110%);visibility:hidden}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}.callbar.show{transition:none}}

/* pressed states for touch (hover states are gated to fine pointers above) */
.faq summary:active{opacity:.72}
.nav-links a:active,.footer-col a:active{opacity:.6}
.btn-primary:active{background:var(--copper)}  /* #CA5D20 on black ≈ 4.8:1 */

/* ---- 404 delight: the sun rises once ------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .p404 .cue-sun{animation:sun-rise .9s var(--ease-out) both}
}
@keyframes sun-rise{from{opacity:0;transform:translateY(6px)}}

/* ---- print: a homeowner comparing quotes is a real user ------------------
   The color sweep must hit DESCENDANTS: an !important on a container only
   changes what children would inherit, and every light-ink element here
   carries its own color declaration that would print white on white. */
@media print{
  .site-nav,.callbar,.scroll-cue,#herovideo,.hero-scene,.hero-scrim{display:none!important}
  body,.band,.band-navy,.band-black,.cta-band,.page-hero,.site-footer,.hero,
  .plate,.band-navy .card,.band-black .card{
    background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
  body *{color:#000!important}
  .footer-phone{color:#000!important}  /* its base rule carries !important - the sweep alone loses on specificity */
  svg text{fill:#000!important}
  svg line{stroke:#000!important;stroke-opacity:.75!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  /* scroll-driven states never advance on paper - force their end states */
  .draw{stroke-dashoffset:0!important;animation:none!important}
  .hero-content{opacity:1!important;transform:none!important;animation:none!important}
  /* own-dark-background chips: readable even with "background graphics" on */
  .plate-grid .lcd,.card .card-ic{background:#fff!important;border-color:#000!important;
    text-shadow:none!important}
  .faq details{page-break-inside:avoid}
}

/* ---- reveal-on-scroll (subtle, IO-driven) --------------------------------
   Hidden state exists ONLY under html.reveals-armed, which site.js adds after
   tagging + pre-marking in-view elements. JS blocked -> class never applied ->
   nothing is ever hidden. */
@media (prefers-reduced-motion:no-preference){
  html.reveals-armed .reveal{opacity:0;transform:translateY(10px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  html.reveals-armed .reveal.in{opacity:1;transform:none}
}

/* ---- reduced-motion kill-switch for state-change transitions -------------
   MUST stay at the END of the file: these tie on specificity with their base
   rules, and only source order makes the reduce branch win. */
@media (prefers-reduced-motion:reduce){
  .nav-burger span,.route-go,.faq summary::after,.nav-logo img{transition:none}
}