/* ==========================================================================
   VEGAS AUTO GLASS 911 — "IMPACT POINT"
   Object metaphor : a technician's damage-assessment mark — the grease-pencil
                     target ring drawn around a chip before it's repaired —
                     fused with the instrument-cluster gauge from the client's
                     own logo (cracked glass + speedometer, red/chrome/black).
   Tone            : urgent / precise / mechanical
   Signature       : every section carries a real damage-pattern diagram (chip,
                     bullseye, star break, combination break — the exact
                     taxonomy named in the client's own copy) inside a target
                     ring; the hero credential plate is a working gauge with a
                     needle that settles on the shop's real 15-year mark.
   World = night garage (asphalt, steel, shop-vinyl signage). Voice = logo red
   + automotive amber warning light. One bright "inspection bay" band for
   light/dark/light rhythm.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* base world — sampled from the client's own logo blacks */
  --asphalt:#0e0e0e;
  --asphalt-2:#161616;
  --asphalt-3:#1e1e1e;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);

  /* chrome — sampled from the logo's grays/whites */
  --chrome:#f2f2f0;         /* 17.2:1 on asphalt — headings */
  --chrome-2:#d6d4d0;       /* 13.0:1 — body */
  --chrome-mute:#a19e96;    /* 7.2:1  — mono labels */
  --chrome-mute-2:#847f75;  /* 4.9:1  — micro */

  /* accent — logo red + automotive amber warning light */
  --red:#e0141c;            /* DECORATIVE: fills, borders, icons, glows */
  --red-hot:#ff2530;        /* DECORATIVE ONLY: sweeps, glow */
  --red-text:#ff5a5f;       /* accent TEXT on asphalt — 6.3:1 (the dark-sibling fix) */
  --amber:#ffb020;          /* warning-light accent — 10.6:1, safe as text or fill */

  /* the one bright band — "inspection bay" under shop light */
  --bay:#f4f1ea;
  --bay-ink:#17140f;        /* 16.3:1 on bay */
  --bay-red:#a50d13;        /* 7.0:1 accent text on bay */
  --line-bay:rgba(23,20,15,.15);
  --line-bay-soft:rgba(23,20,15,.08);

  --ease:cubic-bezier(.16,1,.28,1);
  --bar-h:64px;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;
  background:var(--asphalt);
  color:var(--chrome-2);
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* gritty asphalt grain — coarser than paper grain, reads as texture not softness */
body::after{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}

/* --- 2. TYPE --------------------------------------------------------------
   Display = Oswald: bold condensed shop-signage energy — parts-counter
   placards and garage-door lettering, not editorial luxury serif.
   Body = Archivo (workhorse). Labels/numerals = DM Mono (gauge readout). */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,46px)}

h1,h2,h3,h4{margin:0;font-weight:600;color:var(--chrome);
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:-.005em}

.dsp{font-family:'Oswald',sans-serif;font-weight:600;line-height:.98;text-transform:uppercase}
h1.dsp{font-size:clamp(33px,5.4vw,68px);letter-spacing:-.008em;line-height:.98}
h2.dsp{font-size:clamp(27px,4vw,49px);letter-spacing:-.006em}
h3.dsp{font-size:clamp(18px,2vw,24px);line-height:1.14}
.dsp em{font-style:normal;color:var(--red-text)}
.bay .dsp em{color:var(--bay-red)}
/* Homepage-only: headings in normal sentence/title case, not the sitewide
   all-caps treatment (client feedback — scoped to home rather than sitewide
   per their own request, via .home on <body>, see head.php). */
.home h1,.home h2,.home h3,.home h4,.home .dsp{text-transform:none}

.mono{
  font-family:'DM Mono',ui-monospace,monospace;font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;line-height:1.4;
  color:var(--chrome-mute);
}
.tab{font-variant-numeric:tabular-nums}

p{margin:0 0 1.05em;max-width:68ch;text-wrap:pretty;font-weight:400;
  text-transform:none;letter-spacing:0}
.lede{font-size:clamp(16px,1.3vw,17.5px);line-height:1.68;color:var(--chrome-2);max-width:58ch}
.mut{color:var(--chrome-mute)}
strong,b{font-weight:700;color:var(--chrome)}
.bay strong,.bay b{color:var(--bay-ink)}

.ilink{color:var(--red-text);text-decoration:none;border-bottom:1px solid rgba(255,90,95,.4);
  transition:border-color .22s var(--ease)}
.bay .ilink{color:var(--bay-red);border-bottom-color:rgba(165,13,19,.35)}
@media(hover:hover){.ilink:hover{border-bottom-color:var(--red-text)}
  .bay .ilink:hover{border-bottom-color:var(--bay-red)}}

/* ===== the one bright band — inspection bay ===== */
.bay{background:var(--bay);color:var(--bay-ink)}
.bay h1,.bay h2,.bay h3,.bay h4{color:var(--bay-ink)}
.bay p{color:rgba(23,20,15,.72)}
.bay .lede{color:rgba(23,20,15,.8)}
.bay .mono,.bay .mut{color:rgba(23,20,15,.55)}

/* --- 3. DAMAGE-MARK SYSTEM (the signature ornament) ---------------------- */
/* target ring around every damage-pattern glyph — the technician's grease-
   pencil circle marking the point of impact before repair */
.mark{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:1.9em;height:1.9em;border-radius:50%;
  border:1.5px solid currentColor;color:var(--red);
}
.mark::before,.mark::after{content:"";position:absolute;background:currentColor}
.mark::before{left:50%;top:-4px;width:1.5px;height:4px;transform:translateX(-50%)}
.mark::after{left:50%;bottom:-4px;width:1.5px;height:4px;transform:translateX(-50%)}
.mark svg{width:62%;height:62%;display:block}
.bay .mark{color:var(--bay-red)}
.mark.amber{color:var(--amber)}
.mark.sm{width:1.5em;height:1.5em}

/* --- 4. FOLIO STRIP ------------------------------------------------------- */
.folio{border-bottom:1px solid var(--line);background:var(--asphalt);position:relative;z-index:60}
.folio-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:36px}
.folio .mono{font-size:9.5px;letter-spacing:.28em;white-space:nowrap}
.folio-l{display:flex;align-items:center;gap:14px;min-width:0}
.folio-r{display:flex;align-items:center;gap:18px}
.folio a{text-decoration:none;color:var(--chrome-mute);transition:color .2s var(--ease)}
@media(hover:hover){.folio a:hover{color:var(--red-text)}}
.folio a:focus-visible{color:var(--red-text)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 0 0 rgba(255,37,48,.55);animation:beat 1.9s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(255,37,48,.5)}65%{box-shadow:0 0 0 6px rgba(255,37,48,0)}}

/* --- 5. BAR (always sticky — no hide-on-scroll) ----------------------------*/
.bar{position:sticky;top:0;z-index:70;background:rgba(14,14,14,.92);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:26px;height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{height:50px;width:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-family:'Oswald',sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:.01em;color:var(--chrome);text-transform:uppercase}
.brand-tx span{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.24em;
  color:var(--chrome-mute);text-transform:uppercase;margin-top:3px}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;text-decoration:none;color:var(--chrome-2);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;padding:9px 12px;border-radius:2px;
  transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
@media(hover:hover){.nav a:hover{color:var(--chrome)}.nav a:hover::after{transform:scaleX(1)}}
.nav a:focus-visible{color:var(--chrome)}
.nav a:focus-visible::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--chrome)}

.drop{position:relative}
.drop-p{display:flex;align-items:center;gap:7px;cursor:pointer;background:none;border:0;
  font-family:inherit;font-size:12.5px;font-weight:500;color:var(--chrome-2);
  padding:9px 12px;transition:color .2s var(--ease)}
.drop-p:hover,.drop-p:focus-visible{color:var(--chrome)}
.drop-p .cv{width:8px;height:8px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s var(--ease)}
.drop.open .drop-p .cv{transform:rotate(225deg) translate(-3px,-3px)}
.drop-m{position:absolute;top:calc(100% + 10px);right:0;min-width:330px;
  background:var(--asphalt-2);border:1px solid var(--line);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.drop.open .drop-m{opacity:1;visibility:visible;transform:none}
.drop-m a{display:flex;align-items:center;gap:10px;padding:9px 11px;font-size:12.5px;
  color:var(--chrome-2);border-radius:2px;text-decoration:none;text-transform:none}
.drop-m a .n{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;
  color:var(--chrome-mute);transition:color .25s var(--ease)}
@media(hover:hover){.drop-m a:hover{background:var(--asphalt-3);color:var(--chrome)}
  .drop-m a:hover .n{color:var(--red-text)}}
.drop-m a:focus-visible{background:var(--asphalt-3);color:var(--chrome)}
/* wide variant — the Locations dropdown has 19 items; a single column runs
   off the bottom of the viewport, so it flows into 3 columns instead */
.drop-m.wide{width:min(600px,calc(100vw - 32px));column-count:3;column-gap:6px}
.drop-m.wide a{break-inside:avoid-column;-webkit-column-break-inside:avoid}

.bar-cta{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none;background:none;border:1px solid var(--line);width:42px;height:38px;
  cursor:pointer;position:relative;padding:0;border-radius:2px}
.burger i{position:absolute;left:11px;right:11px;height:1.4px;background:var(--chrome);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:18.5px}.burger i:nth-child(3){top:24px}
.burger.on i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* .bar is sticky (top:0) but .folio above it is not, so .folio scrolls out of
   view while .bar stays pinned. .mnav is .bar's very next sibling — giving it
   position:sticky too (offset by --bar-h) lets the two stack correctly: at
   the top of the page it sits right below the folio+bar like normal flow,
   and once scrolled it locks in directly under the pinned bar instead of
   staying behind at its original (now off-screen) spot. max-height+overflow
   keeps every link reachable even when the drawer is taller than the
   viewport, since a stuck sticky box can't reveal more of itself via page
   scroll alone. */
.mnav{display:none;position:sticky;top:var(--bar-h);z-index:65;
  max-height:calc(100vh - var(--bar-h));overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);background:var(--asphalt-2);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mnav.on{display:block}
.mnav .wrap{padding-top:14px;padding-bottom:20px}
.mnav a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;
  color:var(--chrome-2);font-size:14px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.mnav a .n{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--chrome-mute)}
.mnav .mh{display:block;margin:18px 0 2px;font-family:'DM Mono',monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-mute)}

/* --- 6. BUTTONS ------------------------------------------------------------
   Note: button text is pure #fff, not --chrome — --chrome dims contrast on
   red just under AA (4.37:1); pure white on --red clears it (4.9:1). */
.btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:11px;
  padding:14px 22px;text-decoration:none;overflow:hidden;
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--red);background:var(--red);color:#fff;
  border-radius:2px;cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease)}
.btn .a{transition:transform .4s var(--ease)}
/* Button label text is a bare text node (not wrapped in a span), so it can
   never receive z-index itself — only the .a arrow span can. A pseudo-element
   with z-index:0 still out-ranks non-positioned in-flow content (incl. bare
   text) in paint order regardless of that 0, so the old z-index:0 here sat
   the hover-fill ABOVE the label text, not below it — invisible text on
   ghost buttons the instant the fill covered them. z-index:-1, scoped to the
   local stacking context .btn now establishes (position:relative + z-index:0
   above), keeps it behind ALL of .btn's normal content, text node included,
   without leaking behind sibling elements outside the button. */
.btn::before{content:"";position:absolute;inset:0;background:var(--chrome);
  transform:translateX(-101%);transition:transform .46s var(--ease);z-index:-1}
.btn>*{position:relative;z-index:1}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--chrome)}
.btn.ghost::before{background:var(--chrome)}
.bay .btn.ghost{border-color:var(--line-bay);color:var(--bay-ink)}
.bay .btn.ghost::before{background:var(--bay-ink)}
@media(hover:hover){
  .btn:hover::before{transform:translateX(0)}
  .btn:hover .a{transform:translateX(5px)}
  .btn:hover{color:var(--asphalt)}
  .btn.ghost:hover{color:var(--asphalt)}
  .bay .btn.ghost:hover{color:var(--bay)}
}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn:focus-visible::before{transform:translateX(0)}
.btn:focus-visible{color:var(--asphalt)}

.tel-lg{display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,31px);
  color:var(--chrome);letter-spacing:-.005em;transition:color .25s var(--ease)}
.tel-lg .mono{font-size:9.5px}
.bay .tel-lg{color:var(--bay-ink)}
@media(hover:hover){.tel-lg:hover{color:var(--red-text)}.bay .tel-lg:hover{color:var(--bay-red)}}

/* --- 7. SECTIONS + THE REPAIR-ORDER LINE (signature) ---------------------- */
.sec{padding:clamp(58px,8.5vh,104px) 0;position:relative;overflow-x:clip}
.sec.tight{padding:clamp(42px,6vh,70px) 0}
.sec+.sec{border-top:1px solid var(--line)}
.sec.alt{background:var(--asphalt-2)}
.sec.bay+.sec,.sec+.sec.bay{border-top:0}

.wo{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.2vw,38px);
  border-top:2px solid var(--red);padding-top:12px}
.bay .wo{border-top-color:var(--bay-red)}
.wo-no{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome);flex:none;font-variant-numeric:tabular-nums}
.bay .wo-no{color:var(--bay-ink)}
.wo-ld{flex:1;height:1px;min-width:20px;position:relative;
  background-image:linear-gradient(to right,var(--line) 0 3px,transparent 3px 8px);
  background-size:8px 1px;background-repeat:repeat-x}
.bay .wo-ld{background-image:linear-gradient(to right,var(--line-bay) 0 3px,transparent 3px 8px)}
.wo-ld::after{content:"";position:absolute;top:-2.5px;left:0;width:6px;height:6px;
  background:var(--amber);opacity:0;transform:rotate(45deg)}
.wo.draw .wo-ld::after{animation:travel 1.4s var(--ease) forwards}
@keyframes travel{0%{left:0;opacity:1}85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}
.wo-st{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chrome-mute);flex:none}
.bay .wo-st{color:rgba(23,20,15,.55)}

.sec-head{max-width:70ch}
.sec-head .lede{margin-top:1.1rem}
.sec-head.duo{max-width:none;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(22px,3.4vw,60px);align-items:end}
.sec-head.duo .lede{margin-top:0;padding-bottom:.3rem}
@media(max-width:900px){.sec-head.duo{grid-template-columns:1fr;gap:14px}
  .sec-head.duo .lede{padding-bottom:0}}

/* --- 8. HERO ---------------------------------------------------------------*/
.hero{position:relative;overflow:clip;border-bottom:1px solid var(--line);background:var(--asphalt)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 8%,rgba(224,20,28,.16),transparent 46%),
    radial-gradient(circle at 6% 100%,rgba(255,176,32,.06),transparent 44%);
}
/* corrugated shutter-door texture — faint, anchors the "garage" read */
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 2px,transparent 2px 34px)}
.hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:72px minmax(0,1.18fr) minmax(0,.82fr);
  gap:0 clamp(26px,3.4vw,54px);padding-top:clamp(40px,5.6vh,66px);
  padding-bottom:clamp(48px,6.6vh,80px);align-items:start}
/* service-page hero — no rail column (only the homepage has one), so the
   2 remaining children (lead + credential plate) need their own column
   count. Without this override they fall back to the 3-column rule above
   and the lead column collapses to the 72px rail track. */
.hero-in.svc{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
/* Service-page hero-lead copy varies in length page to page (real content,
   not padded to fit) — some pages have a trailing caption under the plate,
   some don't. Top-aligning both columns left a hard void under the plate on
   pages with longer lead text and no caption. Centering the plate against
   the lead column's own height reads correctly regardless of which page's
   copy is longer, without adding a single invented word to fill space. */
.hero-in.svc > .hero-lead + div{align-self:center}
@media(max-width:980px){.hero-in.svc{grid-template-columns:1fr}
  .hero-in.svc > .hero-lead + div{align-self:start}}
.rail{position:relative;align-self:stretch;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:4px 0 6px;min-height:360px}
.rail-tx{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--chrome-mute);white-space:nowrap}
.rail-seal{width:46px;height:46px;border:1.5px solid var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red)}
.rail-seal svg{width:25px;height:25px}

.hero-lead{min-width:0;padding-top:4px}
.kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(15px,1.8vw,22px);
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--chrome-mute)}
.kick .bar-i{width:26px;height:2px;background:var(--red)}

/* white-space:nowrap is required here, not optional — without it a line that's
   a touch too long for the column silently wraps INSIDE the mask, orphaning a
   fragment on its own line and breaking the one-line-per-rise animation
   contract. Every .ln must be verified to fit at its narrowest width instead. */
h1.dsp .ln{display:block;overflow:hidden;padding:.05em 0}
h1.dsp .ln>span{display:block;white-space:nowrap;transform:translateY(104%);
  animation:rise .95s var(--ease) forwards}
h1.dsp .ln:nth-child(1)>span{animation-delay:.1s}
h1.dsp .ln:nth-child(2)>span{animation-delay:.19s}
h1.dsp .ln:nth-child(3)>span{animation-delay:.28s}
h1.dsp .ln:nth-child(4)>span{animation-delay:.37s}

/* mixed-scale lead line — "Vegas Auto Glass 911:" restates the brand name
   already shown in the logo/nav directly above; giving it full display weight
   duplicated that emphasis and buried the actual value statement under it.
   Scaling it down to a label-weight lead line creates one clear focal point
   (the 3-line statement below) instead of five equal-weight lines. */
h1.dsp .ln.h1-lead{font-size:.4em;font-weight:500;letter-spacing:.02em;
  color:var(--chrome-mute);margin-bottom:.35em}
h1.dsp .ln.h1-lead em{font-style:normal;color:var(--red-text)}
@keyframes rise{to{transform:translateY(0)}}

.hero .lede{margin-top:1.3rem;opacity:0;animation:fadeup .85s var(--ease) .54s forwards}
.hero .lede+.lede{margin-top:.85rem;animation-delay:.62s}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,2.8vw,32px);opacity:0;animation:fadeup .85s var(--ease) .8s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- 9. GAUGE CLUSTER (hero credential plate — the signature centerpiece) - */
.gauge-plate{position:relative;border:1px solid var(--line);background:var(--asphalt-2);
  padding:20px 20px 4px;opacity:0;animation:fadeup .9s var(--ease) .68s forwards}
/* static variant — reused below the fold where the timed keyframe would
   otherwise already have finished off-screen before a user scrolls to it;
   this just guarantees it starts visible regardless of scroll timing */
.gauge-plate.static{opacity:1;animation:none}
.gauge-plate::before,.gauge-plate::after{content:"";position:absolute;width:13px;height:13px;
  border:2px solid var(--red)}
.gauge-plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.gauge-plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.gp-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.gp-h .mono{font-size:9px;letter-spacing:.24em}
.gp-h .no{color:var(--chrome);font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.14em;font-variant-numeric:tabular-nums}

.gauge{display:flex;align-items:center;gap:16px;padding-bottom:16px}
.gauge svg{width:118px;height:76px;flex:none;overflow:visible}
.gauge-arc{fill:none;stroke:var(--line);stroke-width:7;stroke-linecap:round}
.gauge-fill{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:gaugefill 1.3s var(--ease) 1s forwards}
@keyframes gaugefill{to{stroke-dashoffset:18}}
.gauge-needle{transform-origin:60px 66px;transform:rotate(-90deg);
  animation:needle 1.3s var(--ease) 1s forwards}
@keyframes needle{to{transform:rotate(58deg)}}
.gauge-tick{stroke:var(--chrome-mute-2);stroke-width:1.5}
.gauge-pivot{fill:var(--amber)}
.gauge-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;
  color:var(--chrome);line-height:1;letter-spacing:-.01em}
.gauge-num sup{font-size:15px;color:var(--red-text);top:-.6em}
.gauge-lbl{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-mute);margin-top:5px}

.readout{display:grid;gap:0}
.readout-row{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-top:1px solid var(--line);font-size:13px}
.readout-row .mark{width:1.5em;height:1.5em;flex:none}
.readout-row .mark svg{width:58%;height:58%}
.readout-row span{color:var(--chrome-2)}

.gp-f{margin-top:14px;padding:14px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.gp-f .mono{font-size:9px;letter-spacing:.2em}
.stamp{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(255,176,32,.4);padding:5px 9px;
  transform:rotate(-2.2deg);white-space:nowrap}

.hero-shot{position:relative;margin-top:16px;border:1px solid var(--line);overflow:hidden;
  aspect-ratio:16/10;background:var(--asphalt-3);
  opacity:0;animation:fadeup .95s var(--ease) .95s forwards}
.hero-shot img{width:100%;height:100%;object-fit:cover}
.hero-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(224,20,28,.16),transparent 45%);mix-blend-mode:multiply;pointer-events:none}
.hero-shot .cap{position:absolute;left:0;bottom:0;right:0;padding:9px 12px;
  background:linear-gradient(to top,rgba(14,14,14,.92),transparent);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-2)}

/* --- 10. TICKER -------------------------------------------------------------*/
.tick{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--asphalt-2);overflow:hidden;padding:12px 0;position:relative;z-index:3}
.tick-t{display:flex;width:max-content;animation:slide 32s linear infinite}
.tick:hover .tick-t{animation-play-state:paused}
.tick-t>span{display:flex;align-items:center;gap:24px;padding-right:24px;white-space:nowrap}
.tick i{font-style:normal;font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-mute)}
.tick i.hi{color:var(--chrome)}
.tick .sp{color:var(--red);font-size:11px}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- 11. RULED ROWS (services / index) -------------------------------------*/
.rows{border-top:2px solid var(--red);margin-top:6px}
.bay .rows{border-top-color:var(--bay-red)}
.row{position:relative;display:grid;grid-template-columns:56px minmax(0,1.05fr) minmax(0,1.5fr) 50px;
  align-items:center;gap:0 20px;padding:21px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;overflow:hidden;transition:padding-left .5s var(--ease)}
.row::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(224,20,28,.13),rgba(224,20,28,0) 70%);
  transform:translateX(-101%);transition:transform .55s var(--ease)}
.row>*{position:relative;z-index:1}
.row-n{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.1em;font-weight:500;
  color:var(--red-text);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.row-t{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,1.6vw,20px);line-height:1.15;color:var(--chrome);letter-spacing:-.003em}
.row-d{font-size:13.5px;line-height:1.58;color:var(--chrome-mute);margin:0;max-width:60ch}
.row-a{justify-self:end;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--chrome);
  transition:transform .45s var(--ease),background-color .45s var(--ease),
             color .45s var(--ease),border-color .45s var(--ease)}
.row-a svg{width:15px;height:15px}
@media(hover:hover){
  .row:hover{padding-left:18px}
  .row:hover::before{transform:translateX(0)}
  .row:hover .row-n{color:var(--amber)}
  .row:hover .row-a{transform:rotate(-45deg);background:var(--red);border-color:var(--red);color:#fff}
}
.row:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.row:focus-visible .row-a{transform:rotate(-45deg);background:var(--red);border-color:var(--red);color:#fff}

/* --- 12. CHECK / BULLET LISTS ----------------------------------------------*/
.checks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.checks li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--chrome-2)}
.bay .checks li{border-bottom-color:var(--line-bay-soft);color:rgba(23,20,15,.82)}
.checks li .mark{margin-top:0;width:1.5em;height:1.5em}
.checks li .mark svg{width:58%;height:58%}
.checks.two{grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,46px)}

.blist{list-style:none;margin:0;padding:0}
.blist li{position:relative;padding:9px 0 9px 22px;font-size:14.5px;line-height:1.58;
  color:var(--chrome-2);border-bottom:1px solid var(--line)}
.blist li::before{content:"";position:absolute;left:2px;top:.98em;width:9px;height:2px;background:var(--red)}
.bay .blist li{color:rgba(23,20,15,.82);border-bottom-color:var(--line-bay-soft)}
.blist.two{columns:2;column-gap:clamp(26px,3.4vw,52px)}
.blist.two li{break-inside:avoid}

/* term/definition rows — manufacturer tables, spec pairs (same ruled-row
   rhythm as .readout-row, but for two text columns instead of icon+text) */
.specs{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:4px clamp(16px,2.2vw,30px);padding:14px 0;border-bottom:1px solid var(--line)}
/* .spec-row dt is the Wiki's glossary term (a real <dl> — genuine term/
   definition pairs). .spec-row h2 is the same visual treatment reused on
   Privacy Policy / Terms and Conditions, where each row is a numbered policy
   SECTION rather than a glossary entry — those need a real heading tag for
   the page's accessibility/SEO outline, not a <dt>, so they use <h2> in a
   plain <div class="specs"> instead of a <dl>. */
.spec-row dt,.spec-row h2{font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--chrome);text-transform:uppercase;letter-spacing:-.003em;margin:0}
.spec-row dd{font-size:13.8px;line-height:1.55;color:var(--chrome-mute);margin:0}
@media(max-width:700px){.spec-row{grid-template-columns:1fr}}

/* --- 13. CARD GRID (staggered — breaks the AI-slop uniform-grid tell) ------*/
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.stag{gap:14px;background:none;border:0}
.grid.stag .card{border:1px solid var(--line)}

.card{background:var(--asphalt);padding:clamp(20px,2.2vw,28px);position:relative;
  transition:background-color .45s var(--ease)}
.sec.alt .card{background:var(--asphalt-2)}
.card .cn{margin-bottom:14px}
.card h3{font-size:clamp(17px,1.55vw,20px);line-height:1.18;margin-bottom:.55rem}
.card p{font-size:13.8px;line-height:1.62;color:var(--chrome-mute);margin:0}
.card p+p{margin-top:.65rem}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media(hover:hover){.card:hover{background:var(--asphalt-3)}.card:hover::after{transform:scaleX(1)}}
.bay .grid{background:var(--line-bay);border-color:var(--line-bay)}
.bay .grid.stag .card{border-color:var(--line-bay)}
.bay .card{background:var(--bay)}
.bay .card h3{color:var(--bay-ink)}
.bay .card p{color:rgba(23,20,15,.68)}
@media(hover:hover){.bay .card:hover{background:#e9e2d4}}

/* --- 14. SPLIT --------------------------------------------------------------*/
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,4vw,68px);align-items:start}
.split-s{position:sticky;top:calc(var(--bar-h) + 26px)}
.split-b>*:last-child{margin-bottom:0}
.split.lbl{grid-template-columns:minmax(0,.34fr) minmax(0,1.66fr);gap:clamp(20px,2.6vw,44px)}
.split.lbl .split-s{padding-top:.35rem}
.split.lbl .split-s p{font-size:14px;line-height:1.5}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:24px}.split-s{position:static}
  .split.lbl{grid-template-columns:1fr;gap:14px}}

/* --- 15. STEPS ----------------------------------------------------------- */
.steps{display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 clamp(16px,2.2vw,30px);
  padding:22px 0;border-bottom:1px solid var(--line)}
.step-n{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,34px);
  line-height:1;color:var(--red-text);font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(16.5px,1.6vw,20px);line-height:1.16;margin-bottom:.45rem}
.step p{font-size:13.8px;color:var(--chrome-mute);margin:0;max-width:64ch}

/* --- 16. FAQ ----------------------------------------------------------------*/
.faq{border-top:2px solid var(--red)}
.bay .faq{border-top-color:var(--bay-red)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) 36px;gap:16px;align-items:center;padding:19px 0;
  color:var(--chrome);font-family:'Oswald',sans-serif;font-weight:500;text-transform:none;
  font-size:clamp(15.5px,1.4vw,18px);line-height:1.28;letter-spacing:0;
  transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq .chip{justify-self:end;width:28px;height:28px;border:1px solid var(--line);
  border-radius:50%;display:grid;place-items:center;position:relative;flex:none;
  transition:transform .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
.faq .chip::before,.faq .chip::after{content:"";position:absolute;background:currentColor}
.faq .chip::before{width:10px;height:1.4px}
.faq .chip::after{width:1.4px;height:10px}
.faq details[open] .chip{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.faq details[open] summary{color:var(--red-text)}
@media(hover:hover){.faq summary:hover{color:var(--red-text)}}
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.faq .ans{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:16px;padding:0 0 20px;animation:ansin .5s var(--ease)}
.faq .ans p{font-size:14px;color:var(--chrome-mute);margin:0;max-width:74ch}
.faq .ans p+p{margin-top:.75rem}
/* Bay (light) mode — .faq had never been used on a light section before, so its
   colors were all tuned for dark only. summary text especially: var(--chrome)
   is near-white, which on the cream bay background is barely distinguishable
   from the page itself. Reuses the same bay-ink/bay-red/line-bay tokens already
   established elsewhere (16.3:1 / 7.0:1 on bay), not new unverified values. */
.bay .faq details{border-bottom-color:var(--line-bay-soft)}
.bay .faq summary{color:var(--bay-ink)}
.bay .faq .chip{border-color:var(--line-bay)}
.bay .faq details[open] .chip{background:var(--bay-red);border-color:var(--bay-red)}
.bay .faq details[open] summary{color:var(--bay-red)}
@media(hover:hover){.bay .faq summary:hover{color:var(--bay-red)}}
.bay .faq .ans p{color:rgba(23,20,15,.68)}
@keyframes ansin{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* --- 17. REVIEWS ------------------------------------------------------------*/
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-bay);
  border:1px solid var(--line-bay)}
.rev{background:var(--bay);padding:clamp(20px,2.2vw,28px);position:relative;display:flex;flex-direction:column}
.rev .qm{font-family:'Oswald',sans-serif;font-weight:700;font-size:52px;line-height:.7;
  color:var(--bay-red);opacity:.55;display:block;margin-bottom:8px}
.rev p{font-size:14px;line-height:1.66;color:rgba(23,20,15,.78);margin:0 0 16px;flex:1;max-width:none}
.rev a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bay-red)}
.rev a .ar{transition:transform .35s var(--ease)}
@media(hover:hover){.rev a:hover .ar{transform:translateX(5px)}}

/* --- 18. AREAS ----------------------------------------------------------- */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.area{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  padding:8px 12px;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chrome-2);text-decoration:none;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
/* Some .area chips are real links (homepage service-area list, each linking
   to its /nearme/ page); others stay plain <span> (nearme pages' own
   neighborhood/nearby-city chips, which have no dedicated page to link to).
   The hover/focus treatment only ever shows on the real <a> ones. */
a.area:hover,a.area:focus-visible{color:var(--red-text);border-color:var(--red)}
.area .d{width:4px;height:4px;background:var(--red);flex:none}

/* --- 19. MAP --------------------------------------------------------------- */
.mapwrap{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/7;background:var(--asphalt-2)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) invert(.92) contrast(.86);transition:filter .6s var(--ease)}
@media(hover:hover){.mapwrap:hover iframe{filter:grayscale(.3) invert(.92) contrast(.92)}}
@media(max-width:760px){.mapwrap{aspect-ratio:4/3}}

/* --- 20. QUOTE FORM (repair-order intake) ----------------------------------*/
.qwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(28px,4.5vw,70px);align-items:start}
/* Compact/form-only instance ($Q_COMPACT — see quote-section.php): no content
   column, so the grid collapses to one centered track sized like a standalone
   form rather than stretching to the full section width. */
.qwrap.solo{grid-template-columns:minmax(0,1fr);max-width:640px;margin:0 auto}
.qsheet{position:relative;border:1px solid var(--line);background:var(--asphalt-2);
  padding:clamp(20px,2.5vw,30px)}
.qsheet::before,.qsheet::after{content:"";position:absolute;width:13px;height:13px;border:2px solid var(--red)}
.qsheet::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qsheet::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.qhead .mono{font-size:9.5px;letter-spacing:.22em}
.qsub{font-size:13.5px;color:var(--chrome-mute);margin:11px 0 17px;max-width:54ch}
.qf{display:block;margin-bottom:16px}
.ql{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-mute);margin-bottom:7px;transition:color .25s var(--ease)}
.qf:focus-within .ql{color:var(--red-text)}
.qsheet input,.qsheet textarea,.qsheet select{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--chrome);font-family:'Archivo',sans-serif;
  font-size:14.5px;padding:8px 0;border-radius:0;transition:border-color .3s var(--ease)}
.qsheet textarea{resize:vertical;min-height:74px;line-height:1.6}
.qsheet input:focus,.qsheet textarea:focus,.qsheet select:focus{outline:none;border-bottom-color:var(--red)}
.qsheet select option{background:var(--asphalt-2);color:var(--chrome)}
/* Explicit placeholder color — browsers default this differently (and some at
   low opacity), which isn't a computed/verified value. chrome-mute-2 is
   already documented elsewhere as 4.9:1 on asphalt; close enough on asphalt-2
   (slightly lighter) to stay comfortably AA. */
.qsheet ::placeholder{color:var(--chrome-mute-2);opacity:1}
.qcap{margin:20px 0 6px;padding-top:15px;border-top:1px solid var(--line)}
/* Question and answer box sit on ONE line ("12 + 11 = [ ? ]") so the box
   reads as filling in the blank, not as a disconnected/unlabeled field —
   the previous layout put them in separate grid columns with no visual link
   between them, which is why the box wasn't legible as an input at all. */
.qcap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.qq{font-family:'DM Mono',monospace;font-size:15px;letter-spacing:.04em;color:var(--chrome)}
.qcap input{width:76px;flex:none;background:var(--asphalt-3);
  border:1.5px solid var(--chrome-mute-2);color:var(--chrome);
  padding:9px 10px;text-align:center;font-size:16px;font-weight:600;border-radius:3px;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.qcap input::placeholder{color:var(--chrome-mute-2);opacity:.8}
.qcap input:focus{outline:none;border-color:var(--red);background:var(--asphalt-3);
  box-shadow:0 0 0 3px rgba(224,20,28,.18)}
.hpx{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.qsubmit{width:100%;justify-content:center;margin-top:19px}
.qsubmit:disabled{opacity:.5;cursor:not-allowed}
.qmsg{margin-top:12px;font-size:13px;line-height:1.5;min-height:1px}
.qmsg.err{color:var(--red-text)}
.qdone{text-align:center;padding:22px 6px}
.qstamp{display:inline-block;font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(255,176,32,.42);
  padding:9px 15px;transform:rotate(-2.4deg);margin-bottom:15px}
.qdn{margin-top:13px;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:var(--chrome-mute)}

/* --- 20b. FLOATING CALL BUTTON (mobile only) -------------------------------- */
/* Hidden by default; shown only under the site's real mobile breakpoint (the
   same 980px the nav switches to the burger at — see RESPONSIVE section). */
.fab-call{display:none;position:fixed;right:16px;bottom:16px;z-index:80;
  width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;
  align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:background-color .25s var(--ease),transform .18s var(--ease)}
.fab-call svg{width:24px;height:24px;stroke:currentColor}
.fab-call:active{transform:scale(.93)}
@media(hover:hover){.fab-call:hover{background:var(--red-hot)}}

/* --- 21. CTA MARQUEE BAND --------------------------------------------------- */
.cta-band{display:block;text-decoration:none;background:var(--red);color:#fff;
  padding:24px 0;overflow:hidden;position:relative;transition:background-color .45s var(--ease)}
.cta-band .tick-t{animation-duration:24s}
.cta-band i{font-family:'Oswald',sans-serif;font-weight:600;font-style:normal;text-transform:uppercase;
  font-size:clamp(22px,2.8vw,34px);letter-spacing:0;color:inherit}
.cta-band .sp{color:#fff;opacity:.55;font-size:16px}
@media(hover:hover){.cta-band:hover{background:var(--asphalt)}}
.cta-band:focus-visible{outline:3px solid var(--amber);outline-offset:-6px}

/* --- 22. COLOPHON ---------------------------------------------------------- */
.colo{background:var(--asphalt-2);border-top:1px solid var(--line);padding:clamp(42px,5.6vh,66px) 0 0}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,50px)}
.fgrid h4{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chrome-mute);font-weight:400;margin-bottom:15px}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:9px}
.fgrid a{text-decoration:none;color:var(--chrome-2);font-size:13.5px;transition:color .22s var(--ease)}
@media(hover:hover){.fgrid a:hover{color:var(--red-text)}}
.fbrand img{height:56px;width:auto;margin-bottom:13px}
.fbrand p{font-size:13.5px;color:var(--chrome-mute);max-width:38ch;margin-bottom:1rem}
.fnap{margin-top:4px}
.fnap div{font-size:13px;color:var(--chrome-2);margin-bottom:7px;display:flex;gap:9px}
.fnap .fl{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-mute);min-width:54px;padding-top:3px;flex:none}
.fnap a{text-decoration:none;color:inherit}
@media(hover:hover){.fnap a:hover{color:var(--red-text)}}
.fbot{margin-top:clamp(30px,4vh,50px);border-top:1px solid var(--line);padding:17px 0 20px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.fbot .mono{font-size:9px;letter-spacing:.2em}

/* --- 23. BREADCRUMB --------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.crumb a,.crumb span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-mute);text-decoration:none}
.crumb a{transition:color .2s var(--ease)}
@media(hover:hover){.crumb a:hover{color:var(--red-text)}}
.crumb .sep{color:var(--red)}
.crumb .cur{color:var(--chrome-2)}

/* --- 24. FIGURE -------------------------------------------------------------*/
.fig{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--asphalt-3)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover){.fig:hover img{transform:scale(1.03)}}
.fig .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 13px;
  background:linear-gradient(to top,rgba(14,14,14,.92),transparent);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-2)}

/* --- 25. REVEALS ------------------------------------------------------------*/
.ro{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ro.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* --- 26. RESPONSIVE ---------------------------------------------------------*/
@media(max-width:1080px){.nav a{padding:9px 9px;font-size:12px}.drop-p{padding:9px 9px;font-size:12px}}
@media(max-width:980px){
  .nav,.drop{display:none}.burger{display:block}
  .hero-in{grid-template-columns:1fr;gap:28px}.rail{display:none}
  .qwrap{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}.revs{grid-template-columns:1fr}
  .grid.g3{grid-template-columns:1fr 1fr}
  .fab-call{display:flex}
}
@media(max-width:860px){
  .row{grid-template-columns:44px minmax(0,1fr) 40px;gap:0 14px}
  .row-d{display:none}.row-a{width:36px;height:36px}
  .checks.two{grid-template-columns:1fr}.blist.two{columns:1}
  .folio-l .hide-s{display:none}
}
/* Folio strip: .wrap caps at 1240px, so above that viewport the actual content
   width is FIXED — it never grows past ~1148px no matter how wide the screen
   gets. That fixed width is confirmed to fit both blocks. Below it, .wrap
   shrinks 1:1 with the viewport, and there is a real dead zone (~900-1180px)
   where hours+address+phone no longer fit and visibly overlap. Hiding the
   (longer, less urgent) address for any viewport short of the cap removes
   that dead zone entirely rather than chasing an exact pixel threshold. */
@media(max-width:1239px){
  .folio-r .hide-s{display:none}
}
@media(max-width:700px){
  .grid.g2,.grid.g3{grid-template-columns:1fr}
  .grid.stag .card{margin-top:0!important}
  .fgrid{grid-template-columns:1fr}
  .step{grid-template-columns:48px minmax(0,1fr)}
  .wo{gap:10px}.wo-st{display:none}
}
@media(max-width:560px){
  .brand-tx b{font-size:12.5px}.brand img{height:38px}
  .gauge-plate{padding:16px 16px 4px}
  .btn{padding:13px 17px;font-size:12px}
  .hero-acts{gap:10px}.hero-acts .btn{flex:1 1 100%;justify-content:center}
  .tel-lg{font-size:25px}
}

/* --- 27. GATES ---------------------------------------------------------------*/
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .ro,.hero .lede,.hero-acts,.gauge-plate,.hero-shot{opacity:1!important;transform:none!important}
  h1.dsp .ln>span{transform:none!important}
  .tick-t,.cta-band .tick-t{animation:none!important}
  .dot{animation:none!important}
  .gauge-fill{stroke-dashoffset:18!important}
  .gauge-needle{transform:rotate(58deg)!important}
}
@media(hover:none){
  .row:hover{padding-left:0}.row:hover::before{transform:translateX(-101%)}
  .card:hover::after{transform:scaleX(0)}.btn:hover::before{transform:translateX(-101%)}
}