/* ═══════════════════════════════════════════ 01 · TOKENS ═════════════ */
:root{
  /* base world — warm charcoal, sodium-lamp night */
  --night:#141210; --night-2:#1c1917; --night-3:#0b0a09;
  /* text on night */
  --chalk:#f2efe9; --chalk-2:#a9a29a; --chalk-3:#8a827a;
  /* accent family — hazard amber, 3 steps */
  --amber:#f0a51e; --amber-hi:#ffc558; --amber-deep:#7a4e08;
  /* the ONE light band */
  --lamp:#f2efe9; --lamp-2:#e6e0d6;
  --amber-ink:#7a4e08;              /* accent TEXT on light ground only */
  /* hairlines */
  --line:rgba(242,239,233,.145); --line-soft:rgba(242,239,233,.075);
  --line-dark:rgba(20,18,16,.18); --line-dark-soft:rgba(20,18,16,.09);
  /* one easing curve, everywhere */
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:1240px; --bar:64px; --folio:32px;
  --grot:'Big Shoulders Display','Archivo Narrow',sans-serif;
  --ser:'Newsreader',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --body:'Manrope',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--night);color:var(--chalk);font-family:var(--body);
  font-weight:400;font-size:15.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--night)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* film grain — the material layer */
body::before{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.42;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
/* scroll progress hairline */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;z-index:1000;will-change:transform}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--night-3)}
::-webkit-scrollbar-thumb{background:#332e29}
::-webkit-scrollbar-thumb:hover{background:var(--amber-deep)}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 32px}

/* ═══════════════════════════════════════════ 02 · PRIMITIVES ═════════ */
.ro{opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ro.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}
.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

.kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.kicker .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:var(--amber);white-space:nowrap}
.kicker .rule{height:1px;width:52px;background:var(--line);flex:none}
.kicker .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chalk-3);white-space:nowrap}

/* the mixed-type heading system — repeated in EVERY section.
   The two voices are BLOCK lines, so the break is deliberate and no section
   heading can ever orphan its last word. */
.h2{font-size:clamp(29px,4.3vw,54px);line-height:1;letter-spacing:-.01em;
  margin-bottom:22px}
.h2>.grot,.h2>.ser{display:block}
/* optical size: Newsreader's cap height sits below Big Shoulders' at the same
   px, so the serif line needs ~4% to read as an equal partner, not a subtitle */
.h2>.ser{line-height:1.06;margin-top:.02em;font-size:1.04em}
/* section header: heading left, lede right — kills the right-hand void */
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:24px 56px;
  align-items:end}
.sec-head .h2{margin-bottom:0}
.sec-head .lede{padding-bottom:5px}
/* TRACKING SCALE — a heavy condensed face must be tightened or it reads loose.
   display -.022em · titles -.012em · mono labels stay positive (see --mono uses) */
.grot{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  letter-spacing:-.022em;display:inline-block}
.ser{font-family:var(--ser);font-weight:300;font-style:italic;
  letter-spacing:-.01em;text-transform:none}
.amb{color:var(--amber)}
.lede{color:var(--chalk-2);font-size:16.5px;line-height:1.75;max-width:56ch;text-wrap:pretty}
.lede em{font-family:var(--ser);font-style:italic;font-weight:400;
  color:var(--amber);font-size:1.08em}
.band{padding:clamp(76px,10.5vh,132px) 0;position:relative;overflow-x:clip}
.band+.band{border-top:1px solid var(--line-soft)}
section[id]{scroll-margin-top:112px}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--line);overflow:hidden;
  background:transparent;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .5s var(--ease)}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--amber),var(--amber-hi));
  transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn .arw{transition:transform .45s var(--ease)}
.btn--primary{border-color:var(--amber);color:var(--amber)}
.btn--ghost{color:var(--chalk-2)}

/* ═══════════════════════════════════════════ 03 · CURTAIN ═══════════ */
/* LOAD TIMELINE (beats — keep every delay in this file in sync with it)
   BEAT 0  brand     0–1.55s  letters rise (.55s), rule grows, panel lifts at .88s
   BEAT 1  message   .95s+    headline lines rise .08s apart, readable by ~1.5s
   BEAT 2  support   1.35s    lede · 1.48s CTAs
   BEAT 3  evidence  1.60s    docket plate · 1.75s dispatch strip
   BEAT 4  signature 1.70s    crack retracts into the impact chip, gone by 2.65s
   BEAT 5  ambient   2.6s+    chip flashes out, pulse + marquee take over
   total settle ≈ 2.95s                                                        */
.curtain{position:fixed;inset:0;z-index:9999;background:var(--night-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  animation:curtainUp .7s cubic-bezier(.7,0,.18,1) .88s forwards}
@keyframes curtainUp{to{transform:translateY(-101%);visibility:hidden}}
.ct-word{display:flex;overflow:hidden;font-family:var(--grot);font-weight:800;
  text-transform:uppercase;font-size:clamp(34px,7vw,74px);letter-spacing:.01em;
  line-height:1;color:var(--chalk)}
.ct-word i{display:block;font-style:normal;transform:translateY(105%);
  animation:ctUp .55s var(--ease) forwards}
@keyframes ctUp{to{transform:translateY(0)}}
.ct-rule{height:2px;width:0;background:var(--amber);
  animation:ctRule .6s var(--ease) .25s forwards}
@keyframes ctRule{to{width:min(300px,52vw)}}

/* ═══════════════════════════════════════════ 04 · FOLIO + BAR ═══════ */
.folio{height:var(--folio);display:flex;align-items:center;
  border-bottom:1px solid var(--line-soft);background:var(--night-3);
  position:relative;z-index:60}
.folio .shell{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--chalk-3)}
.folio b{color:var(--amber);font-weight:500}
.folio .fo-r{display:flex;gap:26px}

/* Pinned for the whole page. The background is near-opaque rather than the
   old .86 alpha because content now scrolls underneath it permanently — at
   .86 the page showed through the bar and the nav became unreadable. */
.bar{position:sticky;top:0;z-index:80;height:var(--bar);
  background:rgba(20,18,16,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.bar .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand .seal{width:27px;height:27px;border:1px solid var(--amber);border-radius:50%;
  display:grid;place-items:center;font-family:var(--grot);font-weight:800;
  font-size:15px;color:var(--amber);flex:none;line-height:1}
.brand .wm{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  font-size:19px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand .wm em{font-style:normal;color:var(--amber)}
.nav{display:flex;gap:30px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-3)}
.nav a{position:relative;padding:5px 0;transition:color .22s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--amber);transition:width .4s var(--ease)}
.nav a.act{color:var(--chalk)}
.nav a.act::after{width:100%}
.bar-cta{display:flex;align-items:center;gap:16px}
.bar-tel{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--chalk);
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.bar .btn{padding:11px 19px;font-size:10px}

/* ═══════════════════════════════════════════ 05 · HERO ══════════════ */
.hero{position:relative;padding:clamp(48px,7vh,86px) 0 0;overflow:visible}
.hero::before{content:"";position:absolute;top:-120px;right:0;
  width:min(620px,88vw);height:min(620px,88vw);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(240,165,30,.11),transparent 66%)}
.hero-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:72px 1.52fr .78fr;gap:0 46px;align-items:start;
  min-height:calc(88vh - var(--bar) - var(--folio))}
/* left rail */
.rail{border-right:1px solid var(--line-soft);height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:6px 0 40px;gap:24px}
.rail-txt{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--chalk-3);white-space:nowrap}
.rail-seal{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;color:var(--amber);flex:none}

/* headline */
.hero-lead{padding-bottom:56px}
h1{font-size:clamp(40px,5.5vw,84px);line-height:.96;letter-spacing:-.018em;
  margin:0 0 30px;position:relative}
h1 .ln{display:block;overflow:hidden;padding:.05em 0}
h1 .ln>span{display:block;transform:translateY(106%);white-space:nowrap;
  animation:up 1s var(--ease) forwards}
@keyframes up{to{transform:translateY(0)}}
h1 .l1>span{animation-delay:.95s}
h1 .l2>span{animation-delay:1.03s}
h1 .l3>span{animation-delay:1.11s}
h1 .l4>span{animation-delay:1.19s}
h1 .ser{font-size:.62em;line-height:1.06;display:inline-block}
h1 .out{-webkit-text-stroke:1.4px var(--chalk);-webkit-text-fill-color:transparent;
  color:transparent}

/* ── SIGNATURE GESTURE: the crack seals ─────────────────────────────
   Every stroke ORIGINATES at the impact point, so retracting the dash
   pulls all five fractures home into the chip — the repair, performed.
   pathLength normalises each path to 100 units, so one dash value is
   exact for every stroke regardless of its real length.                */
.crackwrap{position:relative;display:inline-block}
.crack{position:absolute;left:-2%;top:-6%;width:104%;height:112%;
  pointer-events:none;overflow:visible;z-index:3}
.crack path{fill:none;stroke:var(--amber-hi);stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.crack .arm{stroke-width:2.4;animation:seal .8s var(--ease) 1.85s forwards}
.crack .br{stroke-width:1.5;animation:seal .6s var(--ease) 1.7s forwards}
@keyframes seal{to{stroke-dashoffset:100}}
.crack .chip{fill:var(--amber-hi);stroke:none;transform-origin:112px 34px;
  animation:chipOut .45s var(--ease) 2.55s forwards}
@keyframes chipOut{40%{opacity:1;transform:scale(1.5)}
                   to{opacity:0;transform:scale(.1)}}

.hero-lede{opacity:0;animation:fadeUp .9s var(--ease) 1.35s forwards;
  color:var(--chalk-2);font-size:17px;line-height:1.72;max-width:50ch}
/* the italic sentence is a pull-line of its own — inline it orphans "You" */
.hero-lede em{display:block;margin-top:11px;font-family:var(--ser);
  font-style:italic;color:var(--amber);font-size:1.09em;line-height:1.5}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.48s forwards}

/* live dispatch strip — an instrument row, not a sentence. Three equal cells
   divided by hairlines: no separator glyph can strand itself at a wrap. */
.status{margin-top:38px;border-top:1px solid var(--line-soft);padding-top:18px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--chalk-3);line-height:1.6;
  opacity:0;animation:fadeUp .9s var(--ease) 1.75s forwards}
.status>span+span{border-left:1px solid var(--line-soft);padding-left:18px}
.status b{display:block;margin-top:5px;color:var(--chalk);font-weight:400;
  font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* ── the work-order docket plate ──────────────────────────────────── */
.plate{position:relative;border:1px solid var(--line);background:var(--night-2);
  padding:26px 26px 30px;margin-top:6px;
  opacity:0;animation:fadeUp .95s var(--ease) 1.6s forwards}
.plate::before,.plate::after{content:"";position:absolute;width:13px;height:13px;
  border:2px solid var(--amber)}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.pl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--chalk-3);padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.pl-head b{color:var(--amber);font-weight:500}
.pl-fig{padding:22px 0 6px;display:flex;align-items:baseline;gap:9px}
.pl-fig .n{font-family:var(--grot);font-weight:800;font-size:clamp(52px,6.4vw,78px);font-variant-numeric:tabular-nums;
  line-height:.82;color:var(--chalk);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pl-fig .u{font-family:var(--ser);font-style:italic;font-weight:300;
  font-size:19px;color:var(--amber)}
.pl-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-3);margin-bottom:24px;line-height:1.7}
/* dotted-leader rows */
.leaders{display:flex;flex-direction:column;gap:11px;
  border-top:1px solid var(--line-soft);padding-top:18px}
.ld{display:flex;align-items:flex-end;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em}
.ld .k{color:var(--chalk-3);white-space:nowrap;text-transform:uppercase;letter-spacing:.14em}
.ld .dots{flex:1;border-bottom:1px dotted rgba(242,239,233,.32);transform:translateY(-4px)}
.ld .v{color:var(--chalk);white-space:nowrap;font-variant-numeric:tabular-nums}
.ld .v.on{color:var(--amber)}
/* rotated stamp — BREAKS the hero→ticker boundary */
.stamp{position:absolute;right:18px;bottom:-40px;z-index:6;
  transform:rotate(-9deg);border:2px solid var(--amber);color:var(--amber);
  background:var(--night);padding:9px 15px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  line-height:1.55;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.stamp b{display:block;font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--amber-hi)}

/* ═══════════════════════════════════════════ 06 · TICKER ════════════ */
.ticker{background:var(--night-3);border-top:2px solid var(--amber);
  border-bottom:2px solid var(--amber);overflow:hidden;padding:19px 0;
  position:relative;z-index:1}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(242,239,233,.028) 0 1px,transparent 1px 11px)}
.tk{display:flex;width:max-content;animation:marq 30s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.tk span{display:flex;align-items:center;flex:none}
.tk i{font-style:normal;font-family:var(--grot);font-weight:800;
  text-transform:uppercase;font-size:19px;letter-spacing:.01em;padding:0 26px;
  color:var(--chalk)}
.tk em{font-family:var(--ser);font-style:italic;font-weight:300;font-size:19px;
  padding:0 26px;color:var(--chalk-2)}
.tk b{color:var(--amber);font-size:13px;font-weight:400}

/* ═══════════════════════════════════════════ 07 · MANIFESTO ═════════ */
.mani-grid{display:grid;grid-template-columns:.34fr 1fr;gap:46px}
.mani-side{position:sticky;top:calc(var(--bar) + 26px);align-self:start}
.mani p{font-family:var(--ser);font-weight:300;font-size:clamp(21px,2.5vw,33px);
  line-height:1.42;letter-spacing:-.008em;color:var(--chalk)}
.mani p+p{margin-top:24px}
.w{opacity:.15;transition:opacity .5s var(--ease)}
.fill .w{opacity:1}
.mani em{font-style:italic;color:var(--amber)}
.mani-note{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-3);line-height:1.9}

/* ═══════════════════════════════════════════ 08 · TRIAGE FIGURE ═════ */
.triage{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.tri{border:1px solid var(--line);background:var(--night-2);padding:22px;
  position:relative;transition:border-color .45s var(--ease),transform .5s var(--ease)}
.tri-top{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-3);margin-bottom:18px}
.tri svg{width:100%;height:auto;display:block}
.tri .pane{fill:rgba(242,239,233,.035);stroke:var(--line);stroke-width:1}
.tri .frac{fill:none;stroke:var(--chalk-2);stroke-width:1.5;stroke-linecap:round}
.tri .ret{fill:none;stroke:var(--amber);stroke-width:1;opacity:.85}
.tri .retd{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:2 4;opacity:.6}
.tri-verdict{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft)}
.tri-verdict{display:flex;flex-direction:column;gap:10px}
/* the verdict itself carries the signal: filled amber = we can fix it cheap,
   outlined = it depends, solid chalk = the glass comes out */
.tri-verdict .vt{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  font-size:25px;line-height:1;letter-spacing:-.012em}
.tri-verdict .vt.rep{color:var(--amber)}
.tri-verdict .vt.mid{-webkit-text-stroke:1.2px var(--chalk);
  -webkit-text-fill-color:transparent;color:transparent}
/* sentence-length copy belongs in the body face — mono is for short labels */
.tri-verdict .vs{font-size:13.5px;line-height:1.62;color:var(--chalk-2)}

/* ═══════════════════════════════════════════ 09 · RULED ROWS ════════ */
.rows{border-top:2px solid var(--chalk);margin-top:48px}
.row{position:relative;display:grid;grid-template-columns:.3fr 1.15fr 1.5fr auto;
  gap:26px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line-soft);
  overflow:hidden;transition:padding-left .5s var(--ease)}
.row::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(240,165,30,.14),rgba(240,165,30,0) 72%);
  transform:translateX(-101%);transition:transform .55s var(--ease)}
.row>*{position:relative;z-index:1}
.r-idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber)}
.r-tt{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,27px);line-height:1.06;letter-spacing:-.012em}
.r-tx{color:var(--chalk-2);font-size:14.5px;line-height:1.68}
.r-arw{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;flex:none;
  transition:transform .45s var(--ease),background-color .45s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease)}
.r-arw svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}

/* peek card */
.peek{position:fixed;top:0;left:0;width:222px;z-index:900;pointer-events:none;
  background:var(--amber);color:var(--night);padding:16px 18px;opacity:0;
  transition:opacity .3s var(--ease);will-change:transform;
  box-shadow:0 20px 48px rgba(0,0,0,.5)}
.peek.on{opacity:1}
.peek .pk-i{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.72;display:block}
.peek .pk-n{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  font-size:30px;line-height:1;margin:9px 0 5px}
.peek .pk-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.5}

/* ═══════════════════════════════════════════ 10 · PROCESS ═══════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;
  position:relative}
.drawn{position:absolute;top:23px;left:0;height:1px;width:100%;
  background:var(--line);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.6s var(--ease)}
.steps.drew .drawn{transform:scaleX(1)}
.step{padding:0 26px 0 0;position:relative}
.step .chip{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--night);display:grid;place-items:center;position:relative;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--amber);
  transition:background-color .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease)}
.step h3{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:20px;line-height:1.08;margin:24px 0 11px;letter-spacing:-.012em}
.step p{color:var(--chalk-2);font-size:14.5px;line-height:1.7}

/* ═══════════════════════════════════════════ 11 · WHY CARDS ═════════ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.card{border-top:1px solid var(--line);padding:26px 0 0;position:relative}
.why .card:nth-child(2){margin-top:34px}
.why .card:nth-child(3){margin-top:68px}
.why .card:nth-child(5){margin-top:34px}
.why .card:nth-child(6){margin-top:68px}
.card .ci{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--amber);display:block;margin-bottom:20px}
.card h3{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:22px;line-height:1.06;margin-bottom:12px;letter-spacing:-.012em}
.card p{color:var(--chalk-2);font-size:14.5px;line-height:1.7}
.card::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--amber);transition:width .55s var(--ease)}

/* ═══════════════════════ 12 · THE ONE LIGHT BAND ════════════════════ */
.lightband{background:var(--lamp);color:var(--night);
  padding:clamp(80px,11vh,140px) 0;position:relative;overflow:hidden}
.lightband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(20,18,16,.022) 0 1px,transparent 1px 11px)}
.lightband .shell{position:relative;z-index:2}
.lightband .kicker .num{color:var(--amber-ink)}
.lightband .kicker .rule{background:var(--line-dark)}
.lightband .kicker .lbl{color:#5b544c}
.promise{border-top:2px solid var(--night);margin-bottom:64px}
.pr{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line-dark-soft)}
.pr .pw{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,3.8vw,50px);line-height:1;letter-spacing:-.018em}
.pr .pw.out{-webkit-text-stroke:1.4px var(--night);-webkit-text-fill-color:transparent}
.pr .ps{font-family:var(--ser);font-style:italic;font-weight:300;
  font-size:clamp(17px,1.9vw,24px);line-height:1.4;color:#3d372f}
.quote{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  max-width:900px}
/* optical hang: the mark sits OUTSIDE the text column so the quote's first
   character aligns with the promise rows above it, not with the punctuation */
.qmark{font-family:var(--ser);font-style:italic;font-size:118px;line-height:.66;
  color:var(--amber-ink);opacity:.42;user-select:none;
  margin-left:-.34em;margin-top:-.06em}
.quote blockquote{font-family:var(--ser);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.3vw,29px);line-height:1.44;color:var(--night)}
.qattr{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#5b544c;display:flex;flex-wrap:wrap;gap:8px 16px}
.qattr b{color:var(--amber-ink);font-weight:500}

/* real Google reviews — two side by side, flex so the attributions bottom-align
   even though the quotes are very different lengths */
.rvs{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.rvc{display:flex;flex-direction:column;border-top:2px solid var(--night);
  padding-top:24px}
/* the accent on this light band must be the deep ink token: raw --amber is
   1.81:1 on lamp and a star rating is information, not decoration */
.stars{display:flex;gap:3px;font-size:15px;line-height:1;color:var(--amber-ink);
  margin-bottom:18px}
.stars .off{color:rgba(20,18,16,.24)}
.rvc blockquote{font-family:var(--ser);font-style:italic;font-weight:300;
  font-size:clamp(18px,1.85vw,23px);line-height:1.46;color:var(--night);
  text-wrap:pretty;margin-bottom:24px}
.rvc figcaption{margin-top:auto;padding-top:16px;
  border-top:1px solid var(--line-dark-soft);font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:#5b544c;
  display:flex;flex-wrap:wrap;gap:6px 16px}
.rvc figcaption b{color:var(--amber-ink);font-weight:500}
/* source link out to the review on Google */
.rvc figcaption a{display:inline-flex;align-items:center;gap:6px;color:#5b544c;
  border-bottom:1px solid rgba(20,18,16,.28);padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.rvc figcaption a .ext{font-size:11px;line-height:1;
  transition:transform .4s var(--ease)}
@media(hover:hover){
  .rvc figcaption a:hover{color:var(--amber-ink);border-color:var(--amber-ink)}
  .rvc figcaption a:hover .ext{transform:translate(2px,-2px)}
}
@media(max-width:820px){.rvs{grid-template-columns:1fr;gap:30px}}

/* ═══════════════════════════════════════════ 13 · CTA MARQUEE ═══════ */
.ctaband{display:block;background:var(--amber);color:var(--night);
  padding:26px 0;overflow:hidden;
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.ctaband:hover{background:var(--night-3);color:var(--amber)}
.ctaband .tk{animation-duration:24s}
.ctaband i{font-size:clamp(30px,4.2vw,54px);padding:0 22px;color:inherit}
.ctaband b{font-size:19px;color:inherit;opacity:.55}

/* ═════════════════════ 13b · LETTER (the voice) ═════════════════════ */
.letter-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:start}
.letter-side{position:sticky;top:calc(var(--bar) + 28px);align-self:start}
.seal-lg{width:150px;height:150px;margin-top:34px;transform:rotate(-9deg)}
.seal-lg .sl-ring{fill:none;stroke:var(--amber);stroke-width:1;opacity:.7}
.seal-lg .sl-ring2{fill:none;stroke:var(--line);stroke-width:1}
.seal-lg .sl-txt{font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  fill:var(--amber);text-transform:uppercase}
.seal-lg .sl-mid{font-family:var(--grot);font-weight:800;font-size:17px;
  fill:var(--chalk);letter-spacing:-.01em}
/* NB: `ch` is the width of "0", which is wide in Newsreader — 52ch measured out
   at ~76 characters. Cap in em so the measure lands near 55. */
.letter p{font-family:var(--ser);font-weight:300;font-size:clamp(19px,2.05vw,26px);
  line-height:1.52;letter-spacing:-.006em;color:var(--chalk);max-width:21.5em;
  text-wrap:pretty}
.letter p+p{margin-top:22px}
.letter em{font-style:italic;color:var(--amber)}
.sign{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
.sign .nm{font-family:var(--ser);font-style:italic;font-weight:400;font-size:30px;
  color:var(--chalk);line-height:1}
.sign .rl{margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-3)}
.sign .ps{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-2);line-height:1.85;max-width:560px}
.sign .ps b{color:var(--amber);font-weight:400}
@media(max-width:980px){
  .letter-grid{grid-template-columns:1fr;gap:30px}
  .letter-side{position:static;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .seal-lg{margin-top:0;width:112px;height:112px}
}

/* ═══════════════════════════════════════════ 14 · COVERAGE ══════════ */
.cov-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.areas a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);
  color:var(--chalk-2);
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease),transform .4s var(--ease)}
.map{border:1px solid var(--line);background:var(--night-2);padding:20px;position:relative}
.map-head{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-3);
  padding-bottom:16px;border-bottom:1px solid var(--line-soft);margin-bottom:20px}
.map-head b{color:var(--amber);font-weight:500}
.map svg{width:100%;height:auto}
.map .grid-l{stroke:rgba(242,239,233,.09);stroke-width:1}
.map .ring{fill:none;stroke:var(--amber);stroke-width:1;opacity:.55}
.map .ringd{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:3 5;opacity:.4}
.map .pin{fill:var(--amber)}
.map .road{stroke:rgba(242,239,233,.2);stroke-width:1.4;fill:none}
.map text{font-family:var(--mono);font-size:7px;letter-spacing:.14em;
  fill:var(--chalk-3);text-transform:uppercase}

/* ═══════════════════════════════════════════ 15 · FAQ ═══════════════ */
.faq{--qcol:58px;margin-top:48px;border-top:2px solid var(--chalk)}
details{border-bottom:1px solid var(--line-soft)}
summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:var(--qcol) 1fr 38px;gap:18px;align-items:center;
  padding:24px 0;transition:color .25s var(--ease)}
summary::-webkit-details-marker{display:none}
.qn{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--amber);font-variant-numeric:tabular-nums}
.qt{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.85vw,23px);line-height:1.14;letter-spacing:-.012em}
.qi{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;justify-self:end;position:relative;
  transition:transform .45s var(--ease),background-color .45s var(--ease),
             border-color .45s var(--ease)}
.qi::before,.qi::after{content:"";position:absolute;background:var(--chalk);
  transition:background-color .3s var(--ease)}
.qi::before{width:11px;height:1px}.qi::after{width:1px;height:11px}
details[open] .qi{transform:rotate(45deg);background:var(--amber);border-color:var(--amber)}
details[open] .qi::before,details[open] .qi::after{background:var(--night)}
.qa{display:grid;grid-template-columns:var(--qcol) 1fr 38px;gap:18px;
  padding:0 0 28px}
.qa p{grid-column:2;color:var(--chalk-2);font-size:15px;line-height:1.76;max-width:58ch;text-wrap:pretty}
details[open] .qa p{animation:fadeUp .55s var(--ease) both}

/* ═══════════════════════════════════════════ 16 · QUOTE FORM ════════ */
.ask{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.sheet{position:relative;border:1px solid var(--line);background:var(--night-2);
  padding:32px}
.sheet::before,.sheet::after{content:"";position:absolute;width:13px;height:13px;
  border:2px solid var(--amber)}
.sheet::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sheet::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.sh-head{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chalk-3);
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
.sh-head b{color:var(--amber);font-weight:500}
.fr{margin-bottom:22px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* NB: class selector, not `label.lb` — the "Service needed" label is a <span> */
.lb{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chalk-3);margin-bottom:9px;
  transition:color .25s var(--ease)}
.fr:focus-within>.lb,.fr:focus-within>div>.lb{color:var(--amber)}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:9px 0;font-family:var(--body);font-size:15px;color:var(--chalk);
  transition:border-color .3s var(--ease)}
.inp:focus{outline:none;border-bottom-color:var(--amber)}
.inp::placeholder{color:var(--chalk-3)}   /* #5f5850 was 2.50:1 — fails AA */
textarea.inp{resize:vertical;min-height:74px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-r{position:relative}
.chip-r input{position:absolute;opacity:0;width:0;height:0}
.chip-r span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);
  color:var(--chalk-2);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),
             background-color .25s var(--ease)}
.chip-r input:checked+span{background:var(--amber);border-color:var(--amber);color:var(--night)}
.chip-r input:focus-visible+span{outline:2px solid var(--amber);outline-offset:3px}
/* spam check — the sum sits inline with the answer box. The question is set
   large and in the accent colour: at the old 11px it was easy to miss, and a
   spam check nobody notices is a form nobody submits. */
.cap{display:flex;align-items:flex-end;gap:16px}
.cap-row{display:flex;align-items:flex-end;gap:14px}
/* Every sum is exactly 7 mono characters ("8 − 6 ="), so the width is known:
   7ch plus the 7 letter-spacing gaps. Reserving it stops the question from
   collapsing to "…" while a new one loads — without this the row re-flowed and
   the refresh button visibly jumped across the answer field. */
.cap .q{flex:0 0 auto;min-width:calc(7ch + 7 * .02em);font-family:var(--mono);font-size:26px;
  font-weight:500;letter-spacing:.02em;color:var(--amber);white-space:nowrap;
  padding-bottom:6px;line-height:1;cursor:pointer;user-select:none}
.cap-row .inp{max-width:110px}
/* ↻ — sits between the sum and the answer box */
.cap-refresh{flex:0 0 auto;width:34px;height:34px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);color:var(--chalk-2);
  font-size:17px;line-height:1;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.cap-refresh:hover{color:var(--amber);border-color:var(--amber)}
/* the glyph spins, not the button box — rotating the border looks broken */
.cap-refresh .ic{display:block}
.cap-refresh.spin .ic{animation:cap-spin .6s linear infinite}
@keyframes cap-spin{to{transform:rotate(360deg)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub{width:100%;justify-content:center;margin-top:8px}
.fnote{margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chalk-3);line-height:1.7}
.fmsg{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--chalk-2)}
.fmsg:empty{display:none}
.fmsg.err{color:var(--amber-hi)}
.fmsg p{margin:0}
.sub:disabled{opacity:.5;cursor:not-allowed}
.done-body p{color:var(--chalk-2);font-size:14.5px;margin:0}
.done-body .success{color:var(--chalk-2)}
.done{display:none;text-align:center;padding:34px 6px}
.done .dt{font-family:var(--grot);font-weight:800;text-transform:uppercase;
  font-size:32px;color:var(--amber);line-height:1;margin-bottom:14px}
.done p{color:var(--chalk-2);font-size:14.5px}
.sheet.sent form{display:none}
.sheet.sent .done{display:block}

/* ═══════════════════════════════════════════ 17 · COLOPHON ══════════ */
.colo{background:var(--night-3);border-top:1px solid var(--line-soft);
  padding:70px 0 0}
.colo-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:36px;
  padding-bottom:56px}
.colo .brand{margin-bottom:20px}
.colo-blurb{color:var(--chalk-3);font-size:14px;line-height:1.75;max-width:34ch}
.colo h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);margin-bottom:18px;font-weight:500}
.colo li{margin-bottom:11px}
.colo li a,.colo address{color:var(--chalk-2);font-size:14px;font-style:normal;
  line-height:1.75;transition:color .22s var(--ease)}
.colo-bot{border-top:1px solid var(--line-soft);padding:22px 0;display:flex;
  flex-wrap:wrap;justify-content:space-between;gap:12px 26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-3)}                    /* #6d665f was 3.50:1 — fails AA */

/* chapter indicator */
.chap{position:fixed;left:22px;bottom:22px;z-index:70;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-3);background:rgba(11,10,9,.82);backdrop-filter:blur(9px);
  border:1px solid var(--line-soft);padding:9px 15px;
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chap.on{opacity:1;transform:none}
.chap b{color:var(--amber);font-weight:500}
/* mobile call pill */
.callpill{display:none;position:fixed;right:16px;bottom:16px;z-index:70;
  background:var(--amber);color:var(--night);font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;padding:14px 20px;
  box-shadow:0 12px 32px rgba(0,0,0,.55)}

/* ═══════════════════════════════════════════ 18 · HOVER LAYER ═══════ */
@media(hover:hover){
  .btn:hover,.btn:focus-visible{color:var(--night);border-color:var(--amber)}
  .btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
  .btn:hover .arw{transform:translateX(5px)}
  .nav a:hover{color:var(--chalk)}
  .nav a:hover::after{width:100%}
  .row:hover{padding-left:20px}
  .row:hover::before{transform:translateX(0)}
  .row:hover .r-arw{transform:rotate(-45deg);background:var(--amber);
    border-color:var(--amber);color:var(--night)}
  .tri:hover{border-color:var(--amber);transform:translateY(-4px)}
  .card:hover::after{width:100%}
  .step:hover .chip{background:var(--amber);border-color:var(--amber);color:var(--night)}
  .areas a:hover{color:var(--night);background:var(--amber);border-color:var(--amber);
    transform:translateY(-2px)}
  .chip-r span:hover{border-color:var(--amber);color:var(--chalk)}
  summary:hover .qt{color:var(--amber)}
  summary:hover .qi{border-color:var(--amber)}
  .colo li a:hover{color:var(--amber)}
  .bar-tel:hover{color:var(--amber)}
}
summary:focus-visible .qi{border-color:var(--amber)}

/* ═══════════════════════════════════════════ 19 · RESPONSIVE ════════ */
@media(max-width:1080px){
  .why{grid-template-columns:repeat(2,1fr)}
  .why .card:nth-child(3){margin-top:0}
  .why .card:nth-child(2),.why .card:nth-child(4){margin-top:34px}
  .why .card:nth-child(5),.why .card:nth-child(6){margin-top:0}
  .why .card:nth-child(6){margin-top:34px}
}
@media(max-width:980px){
  .sec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:0}
  .rail{display:none}
  .hero-lead{padding-bottom:40px}
  .plate{margin-top:0;margin-bottom:64px}
  .stamp{bottom:-30px;right:12px}
  .mani-grid{grid-template-columns:1fr;gap:32px}
  .mani-side{position:static}
  .cov-grid,.ask{grid-template-columns:1fr;gap:44px}
  .steps{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .drawn{display:none}
  .step{padding-right:20px}
}
@media(max-width:900px){
  .chap{display:none}
  .callpill{display:block}
  .pr{grid-template-columns:1fr;gap:12px}
  .colo-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:820px){
  .triage{grid-template-columns:1fr;gap:18px}
  /* fr on the index column leaves ~130px of dead space beside "i." — pin it */
  .row{grid-template-columns:38px 1fr auto;gap:16px}
  .r-tx{display:none}
  .quote{grid-template-columns:1fr;gap:0}
  .qmark{font-size:80px;line-height:.5}
}
@media(max-width:700px){
  .shell{padding:0 20px}
  .folio .fo-r span:last-child{display:none}
  .why{grid-template-columns:1fr}
  .why .card{margin-top:0!important}
  .bar-tel{display:none}
  .faq{--qcol:34px}
  .sheet{padding:24px 20px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr;gap:34px}
  .fr2{grid-template-columns:1fr;gap:22px}
  .colo-grid{grid-template-columns:1fr}
  /* stacked, so no line can begin with an orphaned separator */
  .status{flex-direction:column;align-items:flex-start;gap:7px;font-size:9.5px}
  .status>span+span::before{display:none}
  .cap{flex-direction:column;align-items:stretch;gap:10px}
  .cap .q{padding-bottom:0}
}

/* ═══════════════════════════════════════════ 20 · GATES ═════════════ */
@media(pointer:coarse){.peek{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important}
  .curtain{display:none}
  .ro,.hero-lede,.acts,.plate,.status{opacity:1!important;transform:none!important}
  h1 .ln>span{transform:none!important}
  .crack,.glint{display:none}
  .w{opacity:1}
  .drawn{transform:scaleX(1)!important}
  html{scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════════════════
   21 · NAVIGATION — logo, dropdowns, hamburger drawer
   The bar carries six items plus a phone and a CTA, so the horizontal nav
   only survives above 1100px. Below that everything folds into a drawer.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--nav-bp:1100px}

.brand .mark{height:34px;width:auto;flex:none;display:block}
.colo .brand .mark{height:46px}

.nav{align-items:center;gap:26px;margin:0;list-style:none}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:7px;position:relative;padding:5px 0;
  transition:color .22s var(--ease)}
.nav .car{width:7px;height:7px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  flex:none;transition:transform .3s var(--ease)}

/* dropdown panel — capped and scrollable, a 20-item list must never run off
   the bottom of the viewport */
.dd{position:absolute;top:calc(100% + 14px);left:-18px;z-index:90;min-width:274px;
  max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(11,10,9,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line);padding:10px 0;margin:0;list-style:none;
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.dd::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber)}
.nav>li.open>.dd,.nav>li:focus-within>.dd{opacity:1;visibility:visible;transform:none}
.nav>li.open>a .car{transform:rotate(-135deg) translate(-3px,-3px)}
.dd a{display:block;padding:10px 22px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-2);line-height:1.5;
  border-left:2px solid transparent;
  transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.dd a.here{color:var(--amber)}
.dd::-webkit-scrollbar{width:6px}
.dd::-webkit-scrollbar-track{background:transparent}
.dd::-webkit-scrollbar-thumb{background:#3a342e}

/* hamburger */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);
  background:transparent;cursor:pointer;padding:0;position:relative;flex:none}
.burger i{position:absolute;left:12px;width:20px;height:1.5px;background:var(--chalk);
  transition:transform .38s var(--ease),opacity .2s var(--ease)}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.scrim{position:fixed;inset:0;z-index:78;background:rgba(11,10,9,.62);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
body.menu-open .scrim{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

@media(max-width:1100px){
  .burger{display:block}
  .bar .bar-cta .btn{display:none}
  /* the drawer */
  .nav{position:fixed;top:0;right:0;z-index:85;width:min(400px,88vw);height:100dvh;
    flex-direction:column;align-items:stretch;gap:0;padding:96px 0 40px;
    background:var(--night-3);border-left:1px solid var(--line);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(101%);transition:transform .42s var(--ease);
    font-size:12px;letter-spacing:.18em}
  body.menu-open .nav{transform:none}
  .nav>li{border-bottom:1px solid var(--line-soft)}
  .nav>li>a{padding:19px 28px;justify-content:space-between;color:var(--chalk)}
  .nav>li>a::after{display:none}
  .nav .car{width:8px;height:8px}
  /* dropdowns become in-flow accordions */
  .dd{position:static;opacity:1;visibility:visible;transform:none;max-height:0;
    overflow:hidden;min-width:0;border:0;box-shadow:none;padding:0;
    background:rgba(20,18,16,.55);backdrop-filter:none;
    transition:max-height .4s var(--ease),padding .4s var(--ease)}
  .dd::before{display:none}
  .nav>li.open>.dd{max-height:none;padding:6px 0 14px;overflow:visible}
  .dd a{padding:11px 28px 11px 42px;font-size:10.5px}
  .nav-tel{display:flex;align-items:center;gap:10px;padding:26px 28px 0;
    font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--amber)}
  .nav-cta{margin:18px 28px 0;display:flex}
  .nav-cta .btn{width:100%;justify-content:center}
}
@media(min-width:1101px){
  .nav-tel,.nav-cta{display:none}
}
@media(max-width:520px){
  .brand .wm{font-size:15px;white-space:normal;max-width:150px;line-height:1.05}
  .brand .mark{height:28px}
}

/* ════════════════════════════════════════════════════════════════════════
   22 · HERO — lead column + photographic plate
   ═══════════════════════════════════════════════════════════════════════ */
.hero-grid{grid-template-columns:64px 1.12fr .88fr;gap:0 46px;align-items:start}
.hero-lead{padding-bottom:48px}
h1{font-size:clamp(31px,3.9vw,58px);line-height:1.03;margin-bottom:26px}
h1 .ln{white-space:normal}
h1 .ln>span{white-space:normal}
h1 .ser{font-size:.86em}
.hero-p{color:var(--chalk-2);font-size:16px;line-height:1.76;max-width:58ch;
  text-wrap:pretty;opacity:0;animation:fadeUp .9s var(--ease) 1.35s forwards}
.hero-p+.hero-p{margin-top:16px;animation-delay:1.44s}

/* the five credentials — dotted-leader rows, one per doc bullet */
.creds{margin-top:32px;border-top:1px solid var(--line);padding-top:20px;
  display:grid;gap:0;opacity:0;animation:fadeUp .9s var(--ease) 1.6s forwards}
.creds li{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chalk);line-height:1.5}
.creds li .tick{width:18px;height:18px;flex:none;border:1px solid var(--amber);
  border-radius:50%;display:grid;place-items:center}
.creds li .tick svg{width:9px;height:9px;stroke:var(--amber);stroke-width:2.2;fill:none}

.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.72s forwards}
.hero-acts .sep{font-family:var(--mono);font-size:11px;color:var(--chalk-3)}

/* photographic plate — same corner-bracket language as the docket */
.hero-media{position:relative;margin-top:6px;
  opacity:0;animation:fadeUp .95s var(--ease) 1.5s forwards}
.hero-media .fr-img{position:relative;border:1px solid var(--line);overflow:hidden;
  background:var(--night-2)}
.hero-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.94)}
.hero-media .fr-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(20,18,16,0) 38%,rgba(20,18,16,.82) 100%)}
.hero-media::before,.hero-media::after{content:"";position:absolute;width:15px;height:15px;
  border:2px solid var(--amber);z-index:3}
.hero-media::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.hero-media::after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chalk-2);line-height:1.6}
.hero-cap b{display:block;color:var(--amber);font-weight:500;font-size:11px;
  letter-spacing:.16em;margin-bottom:4px}
.hero-media .stamp{right:-14px;bottom:-26px}

/* ════════════════════════════════════════════════════════════════════════
   23 · DOC PRIMITIVES — bullet lists, lead-in lines, section paragraphs
   ═══════════════════════════════════════════════════════════════════════ */
.p{color:var(--chalk-2);font-size:15.5px;line-height:1.76;max-width:70ch;text-wrap:pretty}
.p+.p{margin-top:15px}
.leadin{margin-top:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber)}
.blist{margin-top:18px;display:grid;gap:0}
.blist li{display:flex;align-items:center;gap:14px;padding:13px 2px;
  border-bottom:1px solid var(--line-soft);color:var(--chalk);
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.blist li:first-child{border-top:1px solid var(--line)}
.blist li::before{content:"";width:5px;height:5px;background:var(--amber);flex:none;
  transform:rotate(45deg)}
.blist--2{grid-template-columns:1fr 1fr;column-gap:34px}
@media(max-width:640px){.blist--2{grid-template-columns:1fr;column-gap:0}}

/* ════════════════════════════════════════════════════════════════════════
   24 · SERVICE PLATES
   ═══════════════════════════════════════════════════════════════════════ */
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.svc{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--night-2);
  transition:border-color .45s var(--ease),transform .5s var(--ease)}
.svc-img{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.svc-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.8) contrast(1.03) brightness(.9);
  transition:transform .8s var(--ease),filter .5s var(--ease)}
.svc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.1),rgba(28,25,23,.72))}
.svc-n{position:absolute;left:0;top:0;z-index:2;background:var(--amber);color:var(--night);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:7px 12px}
.svc-body{padding:24px 24px 0;flex:1}
.svc h3{font-family:var(--grot);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,24px);line-height:1.08;letter-spacing:-.012em;
  margin-bottom:14px}
.svc .p{font-size:14.5px;max-width:none}
.svc-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:22px;padding:18px 24px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);
  transition:background-color .4s var(--ease),color .4s var(--ease)}
.svc-cta .r-arw{width:32px;height:32px;border-color:var(--line)}
@media(max-width:820px){.svcs{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════
   25 · MOBILE-SERVICE + INSURANCE two-column bands
   ═══════════════════════════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.split-side{position:sticky;top:calc(var(--bar) + 28px);align-self:start}
.panel{position:relative;border:1px solid var(--line);background:var(--night-2);padding:30px}
.panel::before,.panel::after{content:"";position:absolute;width:13px;height:13px;
  border:2px solid var(--amber)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--chalk-3);padding-bottom:18px;border-bottom:1px solid var(--line-soft);
  margin-bottom:6px}
.panel-head b{color:var(--amber);font-weight:500}
@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:34px}
  .split-side{position:static}
}

/* ════════════════════════════════════════════════════════════════════════
   26 · COVERAGE — area chips, live map, weather
   ═══════════════════════════════════════════════════════════════════════ */
.cov-grid{grid-template-columns:1fr 1fr;gap:52px}
.areas{gap:8px}
.mapembed{position:relative;border:1px solid var(--line);background:var(--night-2);
  padding:14px}
.mapembed iframe{width:100%;height:clamp(300px,44vh,430px);border:0;display:block;
  filter:grayscale(.55) contrast(1.06) brightness(.92)}
.wx{margin-top:22px;border:1px solid var(--line);background:var(--night-2);padding:14px}
.wx .weatherwidget-io{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-3)}

/* ════════════════════════════════════════════════════════════════════════
   27 · TRUST LOGOS — moving marquee (doc: "add the below logos in a moving
   format"). Light tiles because every supplied logo is dark art on white.
   ═══════════════════════════════════════════════════════════════════════ */
.logos{margin-top:44px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-tk{display:flex;width:max-content;animation:marq 60s linear infinite}  /* 42s held 14 tiles; 60s keeps the same px/s now the strip carries 20 */
.logos:hover .logo-tk{animation-play-state:paused}
.logo-tk>span{display:flex;flex:none}
.logo-tile{width:168px;height:104px;margin-right:18px;flex:none;
  background:var(--lamp);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:18px;
  transition:transform .45s var(--ease),background-color .45s var(--ease)}
/* flex (not grid) sizing: a grid item's height:100% resolves against an
   auto track, which let the portrait ADAS logo spill past the tile */
.logo-tile img{min-width:0;min-height:0;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain}
@media(max-width:560px){.logo-tile{width:132px;height:88px;padding:14px;margin-right:14px}}

/* ════════════════════════════════════════════════════════════════════════
   28 · REVIEWS — three real Google reviews on the one light band
   ═══════════════════════════════════════════════════════════════════════ */
.rvs{grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.rvc blockquote{font-size:clamp(16.5px,1.5vw,19px);line-height:1.52}
@media(max-width:980px){.rvs{grid-template-columns:1fr;gap:28px}}

/* ════════════════════════════════════════════════════════════════════════
   29 · QUOTE BAND — intake checklist beside the form
   ═══════════════════════════════════════════════════════════════════════ */
.ask{grid-template-columns:1fr 1fr;gap:52px}
.intake{margin-top:30px}
.intake .blist{grid-template-columns:1fr 1fr;column-gap:30px}
@media(max-width:1080px){.intake .blist{grid-template-columns:1fr;column-gap:0}}

/* ════════════════════════════════════════════════════════════════════════
   30 · FOOTER — Brand | Service Areas (2 sub-columns) | Quick Links
   ═══════════════════════════════════════════════════════════════════════ */
.colo-grid{grid-template-columns:1.05fr 1.75fr .75fr;gap:44px}
.colo-areas{columns:2;column-gap:30px}
.colo-areas li{break-inside:avoid;margin-bottom:10px}
.colo-areas li a{font-size:13px}
.colo address a{display:inline-block}
.colo-tel{display:flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--amber)}
.colo-bot{gap:12px 30px}
.colo-bot .legal{display:flex;flex-wrap:wrap;gap:10px 24px}
.colo-bot .legal a{transition:color .22s var(--ease)}
@media(max-width:900px){
  .colo-grid{grid-template-columns:1fr;gap:36px}
  .colo-areas{columns:2}
}
@media(max-width:460px){.colo-areas{columns:1}}

/* ════════════════════════════════════════════════════════════════════════
   31 · HOVER LAYER (new components)
   ═══════════════════════════════════════════════════════════════════════ */
@media(hover:hover){
  .nav>li:hover>.dd{opacity:1;visibility:visible;transform:none}
  .nav>li:hover>a{color:var(--chalk)}
  .nav>li:hover>a .car{transform:rotate(-135deg) translate(-3px,-3px)}
  .dd a:hover{color:var(--amber);background:rgba(240,165,30,.07);border-left-color:var(--amber)}
  .burger:hover{border-color:var(--amber)}
  .svc:hover{border-color:var(--amber);transform:translateY(-4px)}
  .svc:hover .svc-img img{transform:scale(1.05);filter:saturate(1) contrast(1.05) brightness(1)}
  .svc:hover .svc-cta{background:var(--amber);color:var(--night)}
  .svc:hover .svc-cta .r-arw{transform:rotate(-45deg);border-color:var(--night)}
  .logo-tile:hover{transform:translateY(-5px);background:#fff}
  .colo-bot .legal a:hover{color:var(--amber)}
}
@media(min-width:1101px){
  /* keyboard users get the dropdown without a pointer */
  .nav>li>a:focus-visible+.dd{opacity:1;visibility:visible;transform:none}
}

/* ════════════════════════════════════════════════════════════════════════
   32 · RESPONSIVE (new components)
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .rail{display:none}
  /* image FIRST on narrow screens, copy underneath */
  .hero-lead{padding-bottom:34px}
  .hero-media .stamp{right:6px;bottom:-22px}
}
@media(max-width:980px){
  .cov-grid{grid-template-columns:1fr;gap:40px}
  .ask{grid-template-columns:1fr;gap:44px}
}
@media(max-width:700px){
  h1{font-size:clamp(28px,7.4vw,38px)}
  .hero-p{font-size:15px}
  .creds li,.blist li{font-size:10px;letter-spacing:.12em}
  .panel{padding:22px 18px}
  .svc-body{padding:20px 18px 0}
  .svc-cta{padding:16px 18px}
  .mapembed{padding:10px}
  .hero-acts .btn{width:100%;justify-content:center}
}

/* the animated underline belongs to the top-level bar items only — inside a
   dropdown it draws a stray amber rule under every hovered row */
.dd a::after{display:none}
/* the bar has to out-stack the drawer, otherwise the close button sits
   underneath the panel it is meant to close */
@media(max-width:1100px){
  .bar{z-index:88}
  .nav{z-index:84}
  .scrim{z-index:80}
}

/* the hero's right-hand column: photograph on top, the five credentials from
   the document underneath, so the column matches the headline column's height
   instead of leaving a void below a square image */
.hero-side{display:flex;flex-direction:column;margin-top:6px}
.hero-media{margin-top:0}
.hero-side .creds{margin-top:52px}
@media(max-width:1080px){
  .hero-side{order:-1;margin:0 0 40px}
  .hero-side .creds{margin-top:44px}
}

/* The insurance heading lives in the manifesto's narrow side column, where the
   full display size wraps to four lines and crowds the note under it. */
.mani-grid--claim{grid-template-columns:.44fr 1fr;gap:52px}
.mani-grid--claim .h2{font-size:clamp(26px,2.6vw,38px);margin-bottom:0}
.mani-grid--claim .mani-note{margin-top:26px}
@media(max-width:980px){.mani-grid--claim{grid-template-columns:1fr;gap:28px}}

/* .bar owns a stacking context, so the drawer (a child of .bar) paints over
   the close button unless the button is lifted inside that same context */
.burger{position:relative;z-index:90}

/* ════════════════════════════════════════════════════════════════════════
   33 · CONTENT-FIDELITY LAYOUT
   Section 3 and section 10 both run heading -> lead-in -> bullets -> closing
   paragraphs. They are stacked, not columned, so the rendered reading order
   cannot diverge from the document's order.
   ═══════════════════════════════════════════════════════════════════════ */
.band--tight{padding-top:clamp(40px,5vh,64px)}
.blist--3{grid-template-columns:repeat(3,1fr);column-gap:34px}
@media(max-width:820px){.blist--3{grid-template-columns:repeat(2,1fr);column-gap:24px}}
@media(max-width:520px){.blist--3{grid-template-columns:1fr;column-gap:0}}
.panel .blist{margin-top:0}
.panel .blist li:first-child,
.panel .blist--3>li:nth-child(-n+3){border-top:0}
.tail-cols{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:26px 46px;
  align-items:start}
@media(max-width:820px){.tail-cols{grid-template-columns:1fr;gap:15px}}

/* section 2: the five document bullets sit beside the quote form */
.creds--sec2{margin-top:0;border-top:0;padding-top:0;animation:none;opacity:1}
.creds--sec2 li:first-child{border-top:1px solid var(--line)}

/* the kicker is now a bare index mark — let the rule run out to the column */
.kicker .rule{width:auto;flex:1;max-width:120px}

/* the document's "Call … | Get a Free Quote" is one line: the pipe is real
   text between two links, not decoration */
.hero-acts .sep{font-family:var(--mono);font-size:13px;color:var(--chalk-3)}

/* a review attribution reads as part of the quote, not a bordered footer */
.rvc figcaption{border-top:0;padding-top:0}

/* the lead-in line introduces the panel directly beneath it, so it needs
   clearance from the panel's top rule and its corner bracket */
.leadin+.panel{margin-top:16px}
.sec-head+.leadin{margin-top:46px}

/* the hero column is now headline + two paragraphs beside the photograph;
   a fixed 88vh floor left a dead band under both columns */
.hero{padding:clamp(48px,7vh,86px) 0 clamp(34px,5vh,64px)}
.hero-grid{min-height:0}
/* the pipe is a character of the document's CTA line, so it stays on phones
   too — centred between the two stacked buttons rather than dropped */
@media(max-width:700px){
  .hero-acts{flex-direction:column;align-items:stretch}
  .hero-acts .sep{align-self:center;line-height:1}
}

/* section 2 now opens with prose before the bullet list */
.ask .p+.creds--sec2{margin-top:34px}

/* Some document entries carry two paragraphs (e.g. the "OEM and OEE glass
   options" why-card, step 1 of the scheduling process). Without this they
   butt together and read as one block. */
.card p + p{margin-top:12px}
.step p + p{margin-top:11px}
.qa p + p{margin-top:11px}

/* ── Header: the one full-bleed row ──────────────────────────────────────
   The brand hugs the left edge and the nav takes the reclaimed width. Held
   inside the 1240px content shell, the brand + six nav items + phone + CTA
   ran out of room and every two-word item ("About Us", "Service Areas",
   "Contact Us", "Free Quote") broke onto a second line. The folio above it
   gets the same padding so the two rows stay left-aligned with each other. */
@media(min-width:1101px){
  .folio .shell,
  .bar .shell{max-width:none;
    padding-left:clamp(22px,2.4vw,40px);padding-right:clamp(22px,2.4vw,40px)}
  .bar .shell{gap:clamp(22px,3vw,56px)}
  .nav{gap:clamp(20px,1.9vw,30px)}
  /* a nav item wrapping across two lines breaks the bar's rhythm — let the
     gaps absorb the pressure instead */
  .nav>li>a,.bar-tel,.bar .btn{white-space:nowrap}
}

/* Between the drawer breakpoint and ~1380px the full-bleed bar alone is not
   enough room for brand + six items + "+1 (623) 432-0498" + the button, so the
   type and gaps step down a notch rather than letting anything wrap or clip. */
@media(min-width:1101px) and (max-width:1380px){
  .bar .shell{gap:18px;padding-left:20px;padding-right:20px}
  .folio .shell{padding-left:20px;padding-right:20px}
  .brand{gap:9px}
  .brand .wm{font-size:16px}
  .nav{gap:17px;font-size:10px;letter-spacing:.14em}
  .bar-cta{gap:12px}
  .bar-tel{font-size:11px;letter-spacing:.06em}
  .bar .btn{padding:10px 14px;font-size:9.5px}
}