/* ============================================================
   DENT SOLUTIONS NW - fusion system

   Ground + chrome + melt-veils  ....  Dent Time (immersive.css)
   Archivo Black, sentence-case heads,
   accent-on-payload-phrase, pill CTAs  ....  Green Tech Collision
   Credential pill, bold lead-in lede,
   dark/light band alternation, melt-band  ....  Bumper Time

   Accent is Doug's seafoam pushed to a signal green.
   Buttons are ROUNDED, not chamfered. Headlines are SENTENCE CASE.
   ============================================================ */

:root{
  /* ground - Dent Time blue-black */
  --bg:#0e1526; --bg-2:#131b2e; --panel:#171f34; --bg-3:#1b2440; --bg-4:#212c4a;
  --footer:#090d18;
  --line:rgba(120,150,220,.13); --line-2:rgba(120,150,220,.22);
  --text:#fff; --muted:rgba(213,222,245,.85); --muted-2:rgba(210,219,242,.58);
  --steel:#86a6e6;

  /* accent - his #8ED5BC seafoam, saturated to signal strength */
  --g:#24D4A4; --g-hi:#5CEFCB; --g-dk:#109A77; --g-soft:rgba(36,212,164,.12);
  --g-glow:rgba(36,212,164,.34); --mint:#8ED5BC;

  /* No metal sheen on titles. Weight instead: --fat adds thickness to the
     display glyphs via a same-colour stroke, since Archivo Black has no
     heavier cut. Raise it to go bolder, drop to 0 for the plain face. */
  --fat:1.2px;      /* display type over photography */
  --fat-h:.5px;     /* section headings on flat ground */

  --f:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  /* display face. Condensed industrial cut, the same family Dent Time uses.
     Swap back to 'Archivo Black' with --dsp-wt:400 and --dsp-tr:-.028em. */
  --dsp:'Oswald','Archivo Black',Impact,sans-serif;
  --dsp-wt:700; --dsp-tr:.002em;
  --m:ui-monospace,'SF Mono',Menlo,monospace;
  --r:8px; --nav-h:68px; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--f);font-size:17px;
  line-height:1.62;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--g-glow);color:#fff}
p{margin:0 0 1.05em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.narrow{max-width:940px;margin-inline:auto}

/* ---- display type -------------------------------------------------------
   Sentence case, Archivo 900, tight. The accent lands on the payload
   phrase - never on the whole headline. */
h1,h2,h3{font-family:var(--dsp);font-weight:var(--dsp-wt);letter-spacing:var(--dsp-tr);
  line-height:1.04;text-wrap:balance}
/* The display layer is ALL CAPS. Oswald tops out at 700, so the extra weight
   comes from a same-colour stroke on the glyphs rather than a heavier cut.
   Caps carry no descenders, so the line height closes up. h3 is deliberately
   left alone: card titles at 19px set in caps read as shouting. */
h1,h2{text-transform:uppercase;letter-spacing:.006em;line-height:.96;
  -webkit-text-stroke:var(--fat-h) currentColor;paint-order:stroke fill}
.h-xl{font-size:clamp(40px,7.4vw,86px)}
.h-lg{font-size:clamp(31px,4.6vw,56px)}
.h-md{font-size:clamp(25px,3.3vw,38px)}
/* No sheen. Solid fill, and the glyphs are fattened with a same-colour stroke
   because Archivo Black has no heavier weight to go to. --fat tunes the extra
   weight; the shadow stack is what keeps it readable over photography. */
.chrome{background:none;color:#fff;-webkit-text-fill-color:#fff;
  -webkit-text-stroke:var(--fat) #fff;paint-order:stroke fill;
  padding:.02em .02em .1em 0;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.85))
         drop-shadow(0 10px 24px rgba(0,0,0,.75)) drop-shadow(0 28px 56px rgba(0,0,0,.6))}
/* the accent line, same solid treatment */
.pop{background:none;color:var(--g);-webkit-text-fill-color:var(--g);
  -webkit-text-stroke:var(--fat) var(--g);paint-order:stroke fill;
  padding:.02em .02em .1em 0;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.85))
         drop-shadow(0 10px 24px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(36,212,164,.22))}

/* credential pill - Bumper Time's bracketed strip */
.cred{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(230,238,255,.82);
  padding:9px 16px;border:1px solid var(--g-soft);background:rgba(36,212,164,.06);
  border-radius:999px;margin-bottom:22px}
.cred i{width:7px;height:7px;border-radius:50%;background:var(--g);flex:none;
  box-shadow:0 0 10px var(--g)}
.brandline{font-size:13.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--g);margin:0 0 14px}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--g);margin:0 0 15px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--g);border-radius:2px}
.head{max-width:900px;margin:0 auto 46px;text-align:center}
.head .eyebrow::before{display:none}
.head p{color:var(--muted);font-size:18px;margin-inline:auto;max-width:64ch}
/* lede with a bold lead-in, the shared pattern on all three sites */
.lede{font-size:clamp(16.5px,1.9vw,19px);color:var(--muted);max-width:58ch;line-height:1.68}
.lede b{color:#fff;font-weight:700}

.sec{padding:clamp(76px,9.5vw,120px) 0;position:relative}
.sec.tight{padding-top:0}
.sec.alt{background:linear-gradient(180deg,var(--bg) 0,var(--bg-2) 150px,
  var(--bg-2) calc(100% - 150px),var(--bg) 100%)}

/* ---- LIFT BAND. --------------------------------------------------------
   Was a near-white slab with a 70px feather, which read as a hard jump against
   #0e1526 no matter how it was masked. It is now a long tonal swell: the ground
   rises to a lighter blue through the middle of the section and settles back,
   so the transition IS the background rather than something laid over it. */
.sec.light{background:linear-gradient(180deg,
  var(--bg) 0%, var(--bg-2) 12%, var(--bg-3) 30%,
  var(--bg-4) 50%,
  var(--bg-3) 70%, var(--bg-2) 88%, var(--bg) 100%)}
/* a hairline of accent light where the swell peaks, so the band has a spine */
.sec.light::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--g-soft) 30%,var(--g-soft) 70%,transparent);
  pointer-events:none}

/* ---- cards. rounded, the way all three actually build them -------------- */
.card{position:relative;background:linear-gradient(158deg,var(--bg-3),var(--panel) 62%);
  border:1px solid var(--line);border-radius:14px;padding:28px 26px 30px;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.7);transition:border-color .3s,transform .4s var(--ease)}
.card:hover{border-color:var(--g-soft);transform:translateY(-3px)}
.card .num{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--g);margin-bottom:12px;
  display:block;font-variant-numeric:tabular-nums}
.card h3{font-size:20px;margin:0 0 9px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:15.4px;margin:0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(254px,1fr))}

/* ---- header ------------------------------------------------------------- */
header{position:sticky;top:0;z-index:60;height:var(--nav-h);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);background:rgba(14,21,38,.88);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;padding:0 24px;max-width:var(--maxw);
  margin-inline:auto;height:var(--nav-h)}
.nav .sp{flex:1}
.nav nav{display:flex;gap:10px}
.nav nav a{font-size:12px;font-weight:600;letter-spacing:.01em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--g)}
/* Eight items plus the phone and the button is the widest this bar ever gets.
   The bar is capped at --maxw, so the room available is the same ~1132px at
   every desktop width and the type above is sized to fit it exactly. Below
   1180 nothing will fit, so the panel takes over rather than clipping. */
@media(max-width:1180px){.nav nav{display:none}}

/* ---- MOBILE MENU --------------------------------------------------------
   Below 1180 the desktop nav is hidden, which until now left the site with
   NO navigation on a phone at all. The links live in the document either way
   so crawlers were always fine; this is purely for people.

   The panel sits under the sticky header rather than over it, so the button
   stays visible and reachable while it is open. */
.burger{display:none;width:42px;height:42px;flex:none;border:1px solid var(--line-2);
  border-radius:11px;background:rgba(14,21,38,.55);cursor:pointer;position:relative;
  transition:border-color .2s}
.burger:hover{border-color:var(--g)}
.burger:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#fff;
  transition:transform .28s var(--ease),opacity .18s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1180px){.burger{display:block}}

.navpanel{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:55;
  background:rgba(6,9,16,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.navpanel.open{opacity:1;visibility:visible;transform:none}
.navpanel__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(20px,5vw,34px) 22px 40px;
  display:flex;flex-direction:column;min-height:100%}
.navpanel a.lnk{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 4px;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-weight:var(--dsp-wt);text-transform:uppercase;
  font-size:clamp(17px,4.6vw,21px);letter-spacing:.02em;line-height:1.1;color:#fff;
  transition:color .2s}
.navpanel a.lnk:hover,.navpanel a.lnk[aria-current]{color:var(--g)}
.navpanel a.lnk i{font-style:normal;font-family:var(--f);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);flex:none}
.navpanel a.lnk[aria-current] i{color:var(--g)}
/* staggered entrance, so it does not all arrive as one slab */
.navpanel.open a.lnk{animation:npIn .4s var(--ease) backwards}
@keyframes npIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.navpanel__foot{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.navpanel__foot .tel{font-size:24px;font-weight:900;letter-spacing:-.03em;color:#fff;
  display:block;text-align:center}
.navpanel__foot .mini{text-align:center;margin-bottom:2px}
.navpanel__foot .btn{justify-content:center;padding:17px 24px;font-size:15.5px}
.navpanel__addr{margin:0;text-align:center;font-size:13px;color:var(--muted-2);line-height:1.6}
body.navopen{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .navpanel{transition:none}.navpanel.open a.lnk{animation:none}.burger span{transition:none}}

.mark{display:flex;align-items:center;gap:10px;flex:none}
.mark b{white-space:nowrap}
.mark .badge{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--g-hi),var(--g) 55%,var(--g-dk));color:#03210f;
  font-weight:900;font-size:15px;letter-spacing:-.04em;box-shadow:0 6px 18px var(--g-glow)}
.mark b{font-size:17px;font-weight:900;letter-spacing:-.032em;color:#fff}
.mark b em{font-style:normal;color:var(--g)}
.tel{font-size:16.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.mini{display:block;font-size:9.5px;font-weight:600;letter-spacing:.17em;color:var(--muted-2);
  text-transform:uppercase;margin-bottom:-3px}
@media(max-width:640px){.tel{font-size:15px}.mark b{font-size:16px}}
/* Below this the bar ran out of room and pushed Send Photos clean off the
   right edge, where overflow-x:clip hid it. Shed the least useful pieces in
   order so both calls to action stay reachable on a 375px phone. */
@media(max-width:620px){.nav{gap:12px;padding:0 18px}.mini{display:none}
  .btn.sm{padding:10px 15px;font-size:12.5px}}
@media(max-width:520px){.nav{gap:10px;padding:0 14px}.mark b{display:none}
  .tel{font-size:16px}}

/* ---- buttons. rounded pills, primary + ghost ---------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;
  letter-spacing:.04em;padding:15px 26px;border:0;border-radius:var(--r);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.btn svg{width:17px;height:17px;flex:none}
/* Option D (neon, chosen 2026-10-09): glowing green outline that floods to a
   green-to-blue gradient on hover. The fill grows via background-size so no
   button markup needs a wrapper. */
.btn-a{position:relative;color:#a6ffdc;border:2px solid rgba(36,212,164,.75);text-shadow:0 0 10px rgba(36,212,164,.5),0 1px 2px rgba(0,0,0,.65);
  background-color:rgba(8,13,26,.58);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  background-image:linear-gradient(110deg,var(--g-hi),var(--g) 52%,#10B894);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  box-shadow:0 0 22px -5px rgba(36,212,164,.45),inset 0 0 16px -9px rgba(36,212,164,.55),0 8px 20px -8px rgba(0,0,0,.6);
  transition:color .25s var(--ease),text-shadow .2s,box-shadow .25s,background-size .34s var(--ease),border-color .2s}
.btn-a:hover{color:#04221a;text-shadow:none;background-size:100% 100%;border-color:var(--g);box-shadow:0 0 32px -4px rgba(36,212,164,.65),0 8px 20px -8px rgba(0,0,0,.6)}
.btn-b{color:#cad9f2;background:rgba(8,13,26,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1.5px solid rgba(159,182,218,.45);text-shadow:0 1px 2px rgba(0,0,0,.55);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);transition:color .25s,border-color .25s,background .25s}
.btn-b:hover{color:#fff;border-color:rgba(190,215,255,.75);background:rgba(159,182,218,.16)}
.btn.round{border-radius:999px}
.btn.sm{padding:11px 20px;font-size:13px}
.btn:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---- hero. full-bleed real photography, 100vh ---------------------------- */
.hero{position:relative;min-height:clamp(600px,94vh,940px);display:flex;align-items:center;
  padding:clamp(76px,9vw,116px) 0 clamp(50px,6vw,76px);overflow:hidden}
.hero__photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:64% 42%;
  filter:saturate(1.02) contrast(1.04)}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(14,21,38,.93) 30%,rgba(14,21,38,.62) 54%,rgba(14,21,38,.2) 78%,rgba(14,21,38,.4) 100%),
  linear-gradient(0deg,var(--bg) 1%,rgba(14,21,38,.3) 26%,transparent 52%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{margin-bottom:20px}
.hero .btns{margin-top:30px}

/* ---- MASTER HERO -------------------------------------------------------
   Every page opens with this. No page starts on flat ground again.

   The device is the fog: a soft graduated reflection travels across the
   panel and the damage surfaces as it crosses, then sinks again once it
   passes. That is not decoration, it is literally how this trade reads a
   car. Two copies of the same photo, a flat one underneath and a high
   contrast one on top masked to a moving band.

   Markup:
     <section class="mh" data-hero>
       <div class="mh__ly mh__flat" data-img="key"></div>
       <div class="mh__ly mh__hot"  data-img="key"></div>
       <div class="mh__band"></div><div class="mh__veil"></div>
       <div class="wrap"> ...copy, each block tagged data-in... </div>
       <a class="mh__cue" href="#next"><i></i>Scroll</a>
     </section>
   ------------------------------------------------------------------------ */
.mh{position:relative;min-height:clamp(560px,92vh,900px);display:flex;align-items:center;
  overflow:hidden;background:var(--bg);isolation:isolate;
  padding:clamp(44px,6vw,84px) 0 clamp(44px,5vw,68px)}
.mh--short{min-height:clamp(460px,74vh,720px)}
.mh__ly{position:absolute;inset:0;background-size:cover;background-position:72% 39%}
.mh__flat{filter:brightness(.66) contrast(.88) saturate(.9);
  animation:mhPush 26s var(--ease) infinite alternate}
.mh__hot{filter:brightness(.8) contrast(2) saturate(.64);
  -webkit-mask-image:linear-gradient(103deg,transparent 34%,#000 44%,#000 55%,transparent 65%);
  mask-image:linear-gradient(103deg,transparent 34%,#000 44%,#000 55%,transparent 65%);
  -webkit-mask-size:230% 100%;mask-size:230% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:mhFog 12s cubic-bezier(.5,0,.5,1) infinite}
@keyframes mhFog{0%{-webkit-mask-position:-70% 0;mask-position:-70% 0}
  100%{-webkit-mask-position:170% 0;mask-position:170% 0}}
@keyframes mhPush{from{transform:scale(1.01)}to{transform:scale(1.09)}}
.mh__band{position:absolute;inset:-25% -20%;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(103deg,transparent 40%,rgba(196,224,255,.1) 46%,
    rgba(232,244,255,.22) 50%,rgba(196,224,255,.1) 54%,transparent 60%);
  animation:mhBand 12s cubic-bezier(.5,0,.5,1) infinite}
@keyframes mhBand{0%{transform:translateX(-58%)}100%{transform:translateX(58%)}}
/* near opaque across the copy column, then it opens up and lets the panel run */
/* Backed off hard 2026-09-23: the veil was still hiding the damage in the shot.
   Scrim now concentrates under the heading (far left) and the bottom fade is
   cut right back, so the dent in the lower/centre of the frame stays visible. */
.mh__veil{position:absolute;inset:0;z-index:10;pointer-events:none;background:
  linear-gradient(98deg,rgba(14,21,38,.84) 0%,rgba(14,21,38,.54) 30%,rgba(14,21,38,.2) 48%,
    rgba(14,21,38,.04) 64%,transparent 78%),
  linear-gradient(to top,var(--bg) 0.5%,rgba(14,21,38,.1) 20%,transparent 42%)}
/* photo-forward hero (e.g. truck bed): thin the veil so the damage in the shot
   reads, while keeping just enough scrim for the copy to stay legible */
.mh--photo .mh__veil{background:
  linear-gradient(96deg,rgba(14,21,38,.9) 0%,rgba(14,21,38,.64) 30%,rgba(14,21,38,.3) 48%,
    rgba(14,21,38,.08) 66%,transparent 80%),
  linear-gradient(to top,var(--bg) 1%,rgba(14,21,38,.26) 26%,transparent 52%)}
.mh--photo .mh__ly{background-position:72% 30%}
/* Rivian hero: the R2 sits low in the bay shot; drop the crop so the distinctive
   Rivian front (light bar and vertical headlights) reads instead of the ceiling */
.mh--rivpos .mh__ly{background-position:60% 66%}
/* hood: landscape dent crop; keep the dent high and clear of the heading, grille to the side */
.mh--hood .mh__ly{background-position:62% 26%}
@media(max-width:760px){.mh--hood .mh__ly{background-position:26% center}}
.mh .wrap{position:relative;z-index:20;width:100%}
.mh h1{font-size:clamp(37px,6.6vw,82px);margin:0 0 18px;max-width:15ch}
.mh .lede{max-width:52ch}
.mh .btns{margin-top:30px}
/* The H1 belongs to the search phrase and the city, not to a tagline. The
   brand line still gets said, it just sits underneath as a subhead where it
   cannot compete with the heading for ranking signal. */
.mh__tag{font-family:var(--dsp);font-weight:var(--dsp-wt);letter-spacing:.004em;
  font-size:clamp(19px,2.5vw,29px);line-height:1.12;color:rgba(236,243,255,.94);
  margin:0 0 18px;max-width:26ch;text-wrap:balance;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 3px 10px rgba(0,0,0,.7))}
/* the accent belongs to the H1's payload phrase. A green tagline directly
   under a green heading line reads as two competing headings. */
.mh__tag.accent{color:var(--g)}
@media(max-width:760px){.mh__tag{font-size:clamp(17px,4.6vw,23px);margin-bottom:14px;max-width:100%}}
.mh__rule{height:2px;width:0;background:linear-gradient(90deg,var(--g),transparent);
  margin:0 0 22px;animation:mhRule 1.2s var(--ease) .55s forwards}
@keyframes mhRule{to{width:210px}}
/* the copy lands in sequence rather than all at once */
.mh [data-in]{opacity:0;transform:translateY(22px);animation:mhIn .9s var(--ease) forwards}
.mh [data-in="1"]{animation-delay:.08s} .mh [data-in="2"]{animation-delay:.24s}
.mh [data-in="3"]{animation-delay:.4s}  .mh [data-in="4"]{animation-delay:.56s}
@keyframes mhIn{to{opacity:1;transform:none}}
.mh__cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:color .2s}
.mh__cue:hover{color:var(--g)}
.mh__cue i{width:1px;height:34px;background:linear-gradient(to bottom,var(--g),transparent);
  animation:mhCue 2.4s var(--ease) infinite}
@keyframes mhCue{0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
.mh .crumb{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(207,216,240,.5);margin:0 0 18px}
.mh .crumb a:hover{color:var(--g)}

/* on a phone there is no room beside the photo, so the copy goes underneath it
   and the effect keeps the top half of the frame */
@media(max-width:760px){
  .mh{min-height:clamp(520px,86vh,760px);align-items:flex-end}
  .mh h1{font-size:clamp(33px,9vw,50px);max-width:13ch}
  .mh .lede{max-width:100%;font-size:15.8px}
  .mh .btns{margin-top:24px;gap:10px}
  .mh .btns .btn{flex:1 1 auto;justify-content:center}
  .mh__cue{display:none}
  .mh__rule{margin-bottom:18px}
  @keyframes mhRule{to{width:140px}}
  .mh__veil{background:
    linear-gradient(to top,var(--bg) 0%,var(--bg) 11%,rgba(14,21,38,.8) 32%,
      rgba(14,21,38,.32) 50%,rgba(14,21,38,.06) 66%,transparent 80%)}
  .mh__hot{-webkit-mask-image:linear-gradient(103deg,transparent 28%,#000 41%,#000 58%,transparent 71%);
    mask-image:linear-gradient(103deg,transparent 28%,#000 41%,#000 58%,transparent 71%)}
  .mh__ly{background-position:center 40%}
}

/* ---- SCROLL RAIL -------------------------------------------------------
   A hairline of accent across the top of the header that fills as the page
   is read. Cheap, and it turns a long page into something with a measure. */
.rail-top{position:fixed;top:0;left:0;height:2px;width:0;z-index:80;
  background:linear-gradient(90deg,var(--g-dk),var(--g));box-shadow:0 0 12px var(--g-glow);
  pointer-events:none}

/* ---- stat rail ---------------------------------------------------------- */
.rail{display:flex;flex-wrap:wrap;margin-top:46px;border-top:1px solid var(--line)}
.rail div{flex:1 1 150px;padding:19px 22px 17px;border-right:1px solid var(--line)}
.rail div:last-child{border-right:0}
.rail b{display:block;font-size:30px;font-weight:900;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums}
.rail b em{font-style:normal;color:var(--g)}
.rail span{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2)}
@media(max-width:700px){.rail div{flex-basis:50%}}

/* ---- melt band. Bumper Time's tri-gradient blend ------------------------ */
.melt{position:relative;min-height:clamp(440px,62vw,720px);overflow:hidden;background:var(--bg);
  display:flex}
.melt .im{position:absolute;inset:0;background-size:cover;background-position:center 44%;
  filter:saturate(1.05) contrast(1.05);transform:scale(1.07);
  transition:transform 1.4s var(--ease)}
.melt.in .im{transform:scale(1)}
.melt .blend{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(105deg,rgba(36,212,164,.10),rgba(14,21,38,.34) 55%),
  linear-gradient(to top,var(--bg) 0%,rgba(14,21,38,.15) 34%,transparent 55%),
  linear-gradient(to bottom,var(--bg) 0%,rgba(14,21,38,.2) 30%,transparent 52%)}
.melt .inner{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;
  padding-bottom:clamp(32px,5vw,54px)}
.melt .inner p{font-size:clamp(23px,3.5vw,42px);font-weight:900;letter-spacing:-.03em;
  line-height:1.04;max-width:18ch;margin:0}
.melt .inner small{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g);margin-bottom:12px}

/* ---- split with media --------------------------------------------------- */
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.4vw,60px);align-items:center}
.split .media{aspect-ratio:3/3.6;background-size:cover;background-position:center;
  border-radius:16px;box-shadow:0 30px 60px -26px rgba(0,0,0,.85)}
@media(max-width:800px){.split{grid-template-columns:1fr}.split .media{aspect-ratio:4/3}}

/* ---- pull quote. editorial, never a boxed card -------------------------- */
.pq .mk{font-size:96px;font-weight:900;line-height:.62;color:var(--g);display:block}
.pq blockquote{margin:10px 0 22px;font-size:clamp(22px,3.1vw,34px);line-height:1.22;
  font-weight:800;letter-spacing:-.028em;max-width:23ch;color:#fff}
.pq .sig{display:flex;align-items:center;gap:13px}
.pq .dot{width:44px;height:44px;flex:none;border-radius:50%;background:var(--bg-3);
  box-shadow:0 0 0 2px var(--g);display:grid;place-items:center;font-weight:900;font-size:14px;
  color:var(--g)}
.pq .who b{display:block;font-size:15px}
.pq .who span{font-size:12px;color:var(--muted-2);letter-spacing:.11em;text-transform:uppercase;
  font-weight:600}
.pq .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--g),transparent)}

/* ---- CTA band -----------------------------------------------------------
   The right half of this band used to be empty ground with only an accent
   glow on it, which read as a missing element rather than as breathing room.
   It now carries a photo that melts in from the right: masked away entirely
   behind the copy, full strength at the outer edge, and faded top and bottom
   into the band colour so it has no hard edges anywhere.

   Markup:  <div class="cta">
              <div class="cta__ph" data-img="key"></div>
              <div class="cta__melt"></div>
              <div class="wrap"> ...copy... </div>
            </div>
   ------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;padding:clamp(62px,8vw,98px) 0;background:var(--bg-2)}
.cta__ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 42%;
  filter:brightness(.52) contrast(1.05) saturate(.98);
  -webkit-mask-image:linear-gradient(96deg,transparent 26%,rgba(0,0,0,.45) 46%,#000 74%);
  mask-image:linear-gradient(96deg,transparent 26%,rgba(0,0,0,.45) 46%,#000 74%)}
/* the vertical melt, in the band's own colour so the photo has no top or
   bottom edge to give itself away */
.cta__melt{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to top,var(--bg-2) 0%,rgba(11,15,27,.4) 22%,transparent 48%),
  linear-gradient(to bottom,var(--bg-2) 0%,rgba(11,15,27,.4) 20%,transparent 46%),
  linear-gradient(96deg,var(--bg-2) 12%,rgba(11,15,27,.55) 34%,transparent 58%)}
/* the accent glow rides above the photo so the green still reads */
.cta::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(58% 108% at 86% 50%,var(--g-soft),transparent 62%)}
.cta .wrap{position:relative;z-index:3}
/* on a phone the copy runs full width, so the photo goes to the top of the
   band and fades down into the words instead of sitting beside them */
@media(max-width:760px){
  .cta__ph{-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 26%,transparent 52%);
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 26%,transparent 52%);
    background-position:center 34%}
  .cta__melt{background:
    linear-gradient(to top,var(--bg-2) 0%,var(--bg-2) 42%,rgba(11,15,27,.6) 60%,transparent 84%),
    linear-gradient(to bottom,rgba(11,15,27,.55) 0%,transparent 26%)}
}
.cta p{color:var(--muted);max-width:56ch;font-size:17.5px}
.filter{margin-top:26px;padding-left:16px;border-left:2px solid var(--line-2);font-size:15.5px;
  color:var(--muted);max-width:60ch}

/* ---- LEAD FORM ---------------------------------------------------------
   The estimate request. Every field here exists because without it the shop
   has to send a message asking for it, and that round trip is what turns a
   same-day answer into a next-day one.

   The consent card is not decoration and not fine print. A2P 10DLC and TCPA
   need documented, provable consent before any SMS, so it is a bordered card,
   the checkbox is large, it is unchecked by default and it HARD GATES the
   submit button. The exact string shown is the exact string recorded.
   ------------------------------------------------------------------------- */
.lead{background:linear-gradient(158deg,var(--bg-3),var(--panel) 60%);
  border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -42px rgba(0,0,0,.95)}
.lead__hd{padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px) 0}
.lead__hd h2{font-size:clamp(21px,2.7vw,30px);margin:0 0 8px}
.lead__hd p{color:var(--muted);font-size:15.4px;margin:0}
.lead form{padding:clamp(20px,2.6vw,26px) clamp(22px,3vw,32px) clamp(22px,3vw,30px);
  display:grid;gap:16px}
.lead .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.lead .row{grid-template-columns:1fr}}
.lead label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.lead label .req{color:var(--g);margin-left:4px}
.lead input[type=text],.lead input[type=tel],.lead input[type=email],.lead textarea,.lead select{
  width:100%;font-family:inherit;font-size:16px;color:#fff;
  background:rgba(14,21,38,.6);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;transition:border-color .2s}
.lead textarea{min-height:88px;resize:vertical;line-height:1.5}
.lead input:focus,.lead textarea:focus,.lead select:focus{outline:none;border-color:var(--g)}
.lead input:-webkit-autofill{-webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 40px #0e1320 inset}
.lead .err{display:none;font-size:12.5px;color:#ff8478;margin-top:6px}
.lead .bad input,.lead .bad textarea{border-color:#e0554f}
.lead .bad .err{display:block}

/* the consent card */
.consent{border:1px solid rgba(36,212,164,.42);background:rgba(36,212,164,.06);
  border-radius:14px;padding:16px 18px}
.consent__top{display:flex;gap:14px;align-items:flex-start}
.consent input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:1px;
  accent-color:var(--g);cursor:pointer}
.consent b{display:block;font-size:15.5px;color:#fff;margin-bottom:6px;cursor:pointer}
.consent p{margin:0;font-size:12.6px;line-height:1.6;color:var(--muted)}
.consent a{color:var(--g);text-decoration:underline}
.consent__hint{display:none;margin-top:12px;font-size:12.6px;font-weight:700;color:#F0B429}
.consent.nag{border-color:#F0B429;background:rgba(240,180,41,.08)}
.consent.nag .consent__hint{display:block}
.lead button[type=submit]{width:100%;justify-content:center;padding:17px 24px;font-size:16px}
.lead button[type=submit]:disabled{opacity:.42;cursor:not-allowed;
  box-shadow:none;transform:none}
.lead__foot{font-size:12.6px;color:var(--muted-2);text-align:center;margin:0}
.lead__ok{padding:clamp(26px,4vw,40px) clamp(22px,3vw,32px);text-align:center}
.lead__ok h3{font-size:clamp(21px,2.6vw,28px);margin:0 0 10px}
.lead__ok p{color:var(--muted);max-width:46ch;margin-inline:auto}

/* ---- STICKY TEXT BAR ----------------------------------------------------
   Follows the visitor once they are past the hero, because the moment
   someone decides to act is rarely the moment they happen to be next to a
   button. Bottom of the screen on a phone, which is where a thumb already is.

   It carries whatever they picked in the situation block, so the text that
   opens already says what the car is for. Dismissible, and it stays
   dismissed for the session.
   ------------------------------------------------------------------------- */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:58;
  transform:translateY(120%);transition:transform .38s var(--ease);
  background:rgba(14,21,38,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 44px -20px rgba(0,0,0,.9)}
.stickycta.up{transform:none}
.stickycta__in{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;gap:12px}
.stickycta__tx{flex:1;min-width:0}
.stickycta__tx b{display:block;font-family:var(--dsp);font-weight:var(--dsp-wt);
  text-transform:uppercase;font-size:15px;letter-spacing:.01em;line-height:1.1;color:#fff}
.stickycta__tx span{display:block;font-size:12.2px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickycta .btn{flex:none;padding:13px 20px;font-size:14px}
.stickycta__x{flex:none;width:30px;height:30px;border-radius:8px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--muted-2);font-size:17px;line-height:1;
  transition:.2s}
.stickycta__x:hover{border-color:var(--g);color:#fff}
.stickycta__x:focus-visible{outline:2px solid var(--g);outline-offset:2px}
@media(max-width:640px){
  .stickycta__tx b{font-size:13.5px}
  .stickycta__tx span{font-size:11.4px}
  .stickycta .btn{padding:13px 16px;font-size:13.5px}
  .stickycta .btn.call{display:none}   /* the header already carries the number */
}
@media (prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* ---- THE SITUATION ------------------------------------------------------
   The front door of the whole site. One question, seven answers, and the
   answer picks which standard of repair gets recommended.

   Why it works this way: showing three prices to someone who has not said
   what the car is for is how you lose them. The situation is asked first,
   ONE standard is recommended, and the other two are explained as different
   pieces of work rather than discounts.

   Two shapes. Full (home page) carries photography on every card. Compact
   (interior pages) is a chip row plus one panel, so it can sit near the top
   of a page without displacing what that page is there to do.

   Markup:  <div data-situation>          full
            <div data-situation="compact"> chip row
   ------------------------------------------------------------------------- */
.sit{position:relative}
.sit__ask{max-width:56ch;margin-bottom:30px}
.sit__ask h2{font-size:clamp(26px,3.8vw,46px);margin:0 0 14px}
.sit__ask p{color:var(--muted);font-size:16.6px;margin:0}
.sit__ask p b{color:#fff}

/* the seven goals */
.goals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:940px){.goals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.goals{grid-template-columns:1fr}}
.goals button{position:relative;text-align:left;font-family:inherit;cursor:pointer;padding:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  transition:border-color .25s,transform .25s var(--ease);min-height:126px;
  display:flex;align-items:flex-end}
.goals button:hover{border-color:var(--g);transform:translateY(-2px)}
.goals button[aria-pressed="true"]{border-color:var(--g);box-shadow:0 0 0 1px var(--g)}
.goals .ph{position:absolute;inset:0;background-size:cover;background-position:center 46%;
  filter:brightness(.4) saturate(.88);transition:filter .3s}
.goals button:hover .ph,.goals button[aria-pressed="true"] .ph{filter:brightness(.56) saturate(1)}
.goals .vl{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,21,38,.92),transparent 62%)}
.goals .tx{position:relative;padding:14px 15px}
.goals b{display:block;font-family:var(--dsp);font-size:17px;font-weight:700;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;line-height:1.06}
.goals span{display:block;font-size:12.6px;color:rgba(232,240,255,.74);margin-top:3px;line-height:1.4}
.goals button[aria-pressed="true"] b{color:var(--g)}

/* what we would do about it */
.rec{margin-top:14px;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  background:linear-gradient(158deg,var(--bg-3),var(--panel) 62%)}
.rec__top{padding:clamp(20px,2.8vw,30px) clamp(22px,3vw,32px);display:grid;
  grid-template-columns:auto 1fr;gap:24px;align-items:start}
@media(max-width:700px){.rec__top{grid-template-columns:1fr;gap:14px}}
.rec__badge{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;white-space:nowrap;background:var(--g);color:#03210f;
  align-self:start}
.rec__badge.mid{background:rgba(240,180,41,.14);color:#F0B429;border:1px solid rgba(240,180,41,.35)}
.rec__badge.ask{background:rgba(134,166,230,.14);color:var(--steel);border:1px solid rgba(134,166,230,.35)}
.rec h3{font-size:clamp(20px,2.5vw,27px);margin:0 0 10px;letter-spacing:-.02em}
.rec p{margin:0 0 12px;color:var(--muted);font-size:16px;max-width:64ch}
.rec p:last-of-type{margin-bottom:0}
.rec p b{color:#fff}
.rec__foot{border-top:1px solid var(--line);background:rgba(14,21,38,.5);
  padding:18px clamp(22px,3vw,32px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rec__foot .note{font-size:13.4px;color:var(--muted-2);margin:0;flex:1 1 260px}

/* the three standards */
.std{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:16px;overflow:hidden}
@media(max-width:880px){.std{grid-template-columns:1fr}}
.std__c{background:var(--bg);padding:26px 24px 28px;display:flex;flex-direction:column;
  position:relative;transition:background .25s}
.std__c.on{background:linear-gradient(168deg,rgba(36,212,164,.07),rgba(14,21,38,0) 60%)}
.std__c.on::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--g)}
.std__lbl{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.std__c h3{font-size:23px;margin:0;letter-spacing:-.02em}
.std__gap{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2)}
.std__c.on .std__gap{color:var(--g)}
.std__one{font-size:14.6px;color:rgba(232,240,255,.9);margin:8px 0 16px;font-weight:600}
.std__def{font-size:15px;color:var(--muted);margin:0 0 18px}
.std__wh{margin-top:auto;display:grid;gap:1px;background:var(--line);border-radius:11px;
  overflow:hidden}
.std__wh div{background:rgba(14,21,38,.6);padding:12px 14px}
.std__wh b{display:block;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:5px}
.std__wh .yes b{color:var(--g)}
.std__wh .no b{color:#F0B429}
.std__wh p{margin:0;font-size:13.6px;color:var(--muted);line-height:1.5}
.std__flag{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#03210f;background:var(--g);
  padding:5px 10px;border-radius:999px;opacity:0;transition:opacity .25s}
.std__c.on .std__flag{opacity:1}

/* ── compact, for interior pages ── */
.sit--compact .goals{display:flex;flex-wrap:wrap;gap:8px}
.sit--compact .goals button{min-height:0;display:inline-flex;align-items:center;
  border-radius:999px;padding:10px 16px;background:rgba(14,21,38,.55)}
.sit--compact .goals .ph,.sit--compact .goals .vl{display:none}
.sit--compact .goals .tx{padding:0}
.sit--compact .goals b{font-size:13.5px;letter-spacing:.02em}
/* .tx is itself a span, so a bare `.goals span` rule hid the label wrapper
   along with the sub-label and left empty pills. Target the sub-label only. */
.sit--compact .goals .tx > span{display:none}
.sit--compact .goals button[aria-pressed="true"]{background:var(--g)}
.sit--compact .goals button[aria-pressed="true"] b{color:#03210f}
.sit--compact .rec__top{grid-template-columns:auto 1fr;gap:18px;
  padding:20px clamp(20px,2.6vw,26px)}
.sit--compact .rec h3{font-size:clamp(18px,2.1vw,22px)}
.sit--compact .rec p{font-size:15px}
.sit--compact .rec__hide{display:none}
.sit__lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:14px}
.sit__lead b{font-family:var(--dsp);font-size:clamp(17px,2.1vw,21px);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em}
.sit__lead span{font-size:14px;color:var(--muted)}

/* ---- BY DAMAGE ---------------------------------------------------------
   The situation block asks what the CAR is for. This asks what HAPPENED,
   which is the other half of how people search, and it is what feeds the
   repair-type pages their internal links. */
.dmg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:860px){.dmg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dmg{grid-template-columns:1fr}}
.dmg a{position:relative;display:flex;align-items:flex-end;min-height:150px;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .25s,transform .25s var(--ease)}
.dmg a:hover{border-color:var(--g);transform:translateY(-2px)}
.dmg .ph{position:absolute;inset:0;background-size:cover;background-position:center 46%;
  filter:brightness(.42) saturate(.9);transition:filter .3s}
.dmg a:hover .ph{filter:brightness(.58) saturate(1)}
.dmg .vl{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,21,38,.94),rgba(14,21,38,.15) 62%)}
.dmg .tx{position:relative;padding:15px 16px}
.dmg b{display:block;font-family:var(--dsp);font-size:18px;font-weight:700;letter-spacing:.01em;
  text-transform:uppercase;color:#fff;line-height:1.06}
.dmg span{display:block;font-size:12.6px;color:rgba(232,240,255,.74);margin-top:3px}
.dmg em{position:absolute;top:12px;right:12px;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--g);background:rgba(14,21,38,.8);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px)}

/* ---- DECK ---------------------------------------------------------------
   Turns a long stack into one card at a time with a named tab strip.

   SEO / AEO safety, which is the whole reason this is built the way it is:
   the markup ships as a PLAIN STACK. Every pane is ordinary HTML in the
   document, with its real headings and real links, always. JS then upgrades
   it into a deck. Nothing is fetched on click and nothing is built by script,
   so a crawler that never runs JS still reads the entire section, in order.
   That matters more for the AI answer engines than for Google: GPTBot and
   friends often take the raw HTML and nothing else.

   The tab strip is deliberately named and visible rather than dots, because
   the real risk with a deck is not indexing, it is people never clicking it.

   Markup:  <div class="deck" data-deck>
              <article data-deck-label="Name" data-deck-sub="Role">…</article>
              …
            </div>
   ------------------------------------------------------------------------- */
.deck__tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:26px;
  scrollbar-width:none}
.deck__tabs::-webkit-scrollbar{display:none}
.deck__tabs button{flex:0 0 auto;display:flex;align-items:center;gap:11px;font-family:inherit;
  text-align:left;padding:9px 16px 9px 9px;border-radius:999px;cursor:pointer;
  background:rgba(14,21,38,.55);color:var(--muted);border:1px solid var(--line);transition:.2s}
.deck__tabs button:hover{border-color:var(--g);color:#fff}
.deck__tabs button[aria-selected="true"]{background:var(--g);color:#03210f;border-color:var(--g)}
.deck__tabs img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 20%;
  flex:none;background:var(--bg-3)}
.deck__tabs .mono{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--dsp);font-size:14px;font-weight:700;color:#03210f;
  background:linear-gradient(150deg,var(--g-hi),var(--g) 55%,var(--g-dk))}
.deck__tabs b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.deck__tabs span{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;opacity:.72;white-space:nowrap}
.deck__tabs button[aria-selected="true"] .mono{background:rgba(3,33,15,.22);color:#03210f}

.deck [data-deck-label]{animation:deckIn .45s var(--ease)}
@keyframes deckIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.deck [hidden]{display:none}

.deck__nav{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line)}
.deck__nav button{font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:rgba(14,21,38,.55);color:var(--muted);border:1px solid var(--line);transition:.2s}
.deck__nav button:hover:not(:disabled){border-color:var(--g);color:#fff}
.deck__nav button:disabled{opacity:.3;cursor:not-allowed}
.deck__count{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .deck__tabs button{padding:8px 13px 8px 8px}
  .deck__tabs b{font-size:13.5px}
  .deck__nav button{flex:1;text-align:center}
  .deck__count{width:100%;margin:10px 0 0;text-align:center}
  .deck__nav{flex-wrap:wrap}
}

/* ---- NUMBERED REASON LIST ----------------------------------------------
   A real sequence of points, numbered because the order carries meaning.
   Shared by the crew page and the PDR pillar. */
.why{display:grid;gap:1px;background:var(--line);border-radius:16px;overflow:hidden}
.why > div{background:var(--bg);padding:26px 28px;display:grid;grid-template-columns:auto 1fr;
  gap:22px;align-items:start}
.why .n{font-family:var(--dsp);font-size:30px;font-weight:700;color:var(--g);line-height:1;
  font-variant-numeric:tabular-nums;min-width:1.6ch}
.why h3{font-size:19px;margin:0 0 7px;letter-spacing:-.022em}
.why p{margin:0;font-size:15.6px;color:var(--muted);max-width:64ch}
@media(max-width:640px){.why > div{grid-template-columns:1fr;gap:10px}}

/* ---- FAQ ---------------------------------------------------------------- */
.qa{max-width:980px;margin-inline:auto;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:23px 44px 23px 0;position:relative;
  font-size:18.5px;font-weight:800;letter-spacing:-.022em;transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--g)}
.qa summary::after{content:"";position:absolute;right:8px;top:29px;width:13px;height:13px;
  border-right:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(45deg);
  transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg);top:33px}
.qa .a{padding:0 44px 26px 0;color:var(--muted);font-size:16px}
.qa .a p:last-child{margin-bottom:0}

/* ---- answer-first block. the AEO citation target ------------------------ */
.ans{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 26px 22px 28px;margin:0 0 32px;overflow:hidden}
/* no colored accent edge (Myke: green edge bars read as AI slop); the label carries the color */
.ans b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--g);margin-bottom:9px}
.ans p{margin:0;font-size:17.5px;line-height:1.55;color:rgba(232,240,255,.9)}

/* ---- internal links ----------------------------------------------------- */
.links{display:grid;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.links a{background:var(--bg);padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:15.4px;font-weight:600;transition:.2s}
.links a:hover{background:var(--panel);color:var(--g)}
.links a span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);flex:none}

/* ---- reveal on scroll ---------------------------------------------------
   The hidden state is scoped to .rev-on, which JS adds to <html>. If the
   script never runs, nothing is ever hidden and the page reads normally.
   Three motions: copy rises, photography settles out of a slow push-in,
   list rows come in from the side. --d staggers siblings. */
.rev-on [data-rev]{opacity:0;transform:translateY(26px);will-change:opacity,transform}
[data-rev]{transition:opacity .85s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s)}
.rev-on [data-rev].in{opacity:1;transform:none}

.rev-on [data-rev="ph"]{opacity:0;transform:scale(1.055)}
[data-rev="ph"]{transition:opacity 1s var(--ease) var(--d,0s),transform 1.5s var(--ease) var(--d,0s)}
.rev-on [data-rev="ph"].in{opacity:1;transform:none}

.rev-on [data-rev="row"]{opacity:0;transform:translateX(-24px)}
[data-rev="row"]{transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.rev-on [data-rev="row"].in{opacity:1;transform:none}

/* the hero must never animate in, it is the first thing on screen */
.rev-on .hero [data-rev]{opacity:1;transform:none}
.rev-on .mh [data-rev]{opacity:1;transform:none}

footer{background:var(--footer);border-top:1px solid var(--line);padding:48px 0 62px;
  color:var(--muted-2);font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:34px}
.fgrid b{color:#fff}
.fgrid a{color:var(--g)}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
  scroll-behavior:auto!important}
  .rev-on [data-rev],.rev-on [data-rev="ph"],.rev-on [data-rev="row"]{opacity:1;transform:none}
  .melt .im{transform:none}
  .mh [data-in]{opacity:1;transform:none}
  .mh__rule{width:210px}
  .mh__hot{-webkit-mask-position:50% 0;mask-position:50% 0}}

/* Two standards, not three. Improvement is Doug's to offer in person, so the
   public block is a pair. */
.std--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.std--two{grid-template-columns:1fr}}

#estimate,#quote,#situation{scroll-margin-top:86px}

/* ── TITLES MATCH THE NEW HOMEPAGE (Myke 2026-10-21: "some of the section fonts look bubbly. They
   don't look like the title on the homepage"). The 1.2px outline + four-layer shadow on .chrome and
   the negative tracking made Oswald read puffy. Same treatment as the homepage now: Oswald 700, the
   light .5px weight only, open tracking, and the accent word in the mint glow. ── */
.chrome{-webkit-text-stroke:var(--fat-h) #fff;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.pop{-webkit-text-stroke:0;background:linear-gradient(150deg,#2ad6a8 0%,#5CEFCB 30%,#c4fdee 48%,#4fe8c0 64%,#22c99b 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 18px rgba(36,212,164,.28))}
h1,h2,.body2 h2{letter-spacing:.006em}
h3{letter-spacing:.01em}
/* Doug's logo in the header and footer on every page (replaces the old DS badge, same as the new homepage) */
.mark__logo{height:52px;width:72px;flex:none;display:grid;place-items:center}
.mark__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
@media(max-width:520px){.mark__logo{height:48px;width:66px}}