/* ==========================================================================
   GARAGE DOORS OF THE TRIAD: site.css
   Heavy-Duty Dark, locked 2026-07-29 (docs/decisions/2026-07-29-client-worksheet.md).
   Tokens mirror design-system/colors_and_type.css: keep names in sync.
   ========================================================================== */

/* ---- Fonts (self-hosted latin woff2) ---- */
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-800italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
  --gdt-amber:      #FDAA22;
  --gdt-amber-hot:  #FFBE4D;
  --gdt-amber-deep: #C77F06;
  --gdt-ink:        #0B0B0A;
  --gdt-coal:       #151514;
  --gdt-panel:      #1E1E1C;
  --gdt-panel-2:    #272725;
  --gdt-bone:      #FAF9F6;
  --gdt-steel:      #A9A49B;
  --gdt-line:       #35342F;
  --gdt-on-amber:   #141210;

  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-21: 21px; --fs-26: 26px; --fs-34: 34px; --fs-46: 46px;
  --fs-64: 64px; --fs-88: 88px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --r-0: 0; --r-card: 6px;
  --gdt-skew: -6deg;
  --ease-lift: cubic-bezier(.19, 1, .22, 1);
  --dur-lift: .4s;
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) { scroll-behavior: smooth; }
}
body {
  background: var(--gdt-coal);
  color: var(--gdt-bone);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gdt-bone); }

.shell { max-width: 1200px; margin: 0 auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.pad { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.pad-sm { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }

/* ---- Type ---- */
.display {
  font-family: var(--font-display);
  font-style: italic; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.95;
  color: var(--gdt-bone);
}
.display .hit, .h-sub .hit { color: var(--gdt-amber); }
/* Metallic gold pass on the hit word; falls back to flat amber. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .display .hit, .h-sub .hit {
    background: linear-gradient(180deg, #FFD34D 0%, var(--gdt-amber) 55%, #E08E07 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.h-sub {
  font-family: var(--font-display);
  font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
}
.display, .h-sub { text-wrap: balance; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-14); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--gdt-amber);
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--gdt-steel); }
.body-lg { font-size: var(--fs-21); }
.stars { color: var(--gdt-amber); letter-spacing: 2px; }
.callout { border-left: 4px solid var(--gdt-amber); padding-left: var(--sp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Section heading with hazard tab (signature detail) */
.sec-head { margin-bottom: var(--sp-7); }
.sec-head .tab {
  display: inline-block; width: 56px; height: 8px; margin-bottom: var(--sp-4);
  background: repeating-linear-gradient(-45deg, var(--gdt-amber) 0 10px, var(--gdt-ink) 10px 20px);
}
.sec-head h2 { font-size: var(--fs-46); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-21);
  padding: 14px 28px; border: 2px solid transparent; border-radius: var(--r-0);
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: linear-gradient(180deg, #FFC65C 0%, var(--gdt-amber) 55%, #EF9C0C 100%); color: var(--gdt-on-amber); transform: skewX(var(--gdt-skew)); }
.btn-primary > span { display: inline-block; transform: skewX(calc(-1 * var(--gdt-skew))); }
.btn-primary:hover { background: var(--gdt-amber-hot); }
.btn-secondary { background: transparent; color: var(--gdt-bone); border-color: var(--gdt-bone); }
.btn-secondary:hover { border-color: var(--gdt-amber); color: var(--gdt-amber); }
.btn-phone { background: linear-gradient(180deg, #FFC65C 0%, var(--gdt-amber) 55%, #EF9C0C 100%); color: var(--gdt-on-amber); font-size: var(--fs-26); padding: 16px 32px; transform: skewX(var(--gdt-skew)); }
.btn-phone > span { display: inline-block; transform: skewX(calc(-1 * var(--gdt-skew))); }
.btn-phone:hover { background: var(--gdt-amber-hot); }

/* ---- Hazard stripe divider (max one per region) ---- */
.hazard { height: 8px; background: repeating-linear-gradient(-45deg, var(--gdt-amber) 0 14px, var(--gdt-ink) 14px 28px); }
/* The stripe rolls with page scroll: user-driven, so no auto-play WCAG
   exposure. Chrome/Safari only; static everywhere else. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html:not(.no-motion)) .hazard { animation: hazard-roll linear both; animation-timeline: scroll(); }
  }
}
@keyframes hazard-roll { from { background-position: 0 0; } to { background-position: 396px 0; } }

/* ---- Panels ---- */
.panel { background: var(--gdt-panel); border: 1px solid var(--gdt-line); border-radius: var(--r-card); }

/* ---- 24/7 badge (LOCKED: quiet, beside the phone; never a loud band) ---- */
.badge-247 {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500;
  color: var(--gdt-amber); border: 1px solid var(--gdt-amber-deep); border-radius: 3px;
  padding: 2px 7px; letter-spacing: 0.08em; white-space: nowrap;
}

/* ---- Nav (classic bar) ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--gdt-ink); border-bottom: 1px solid var(--gdt-line);
  transition: top .25s ease;
}
/* mid-scroll the stars ribbon occupies the top 28px; keep the nav below it */
html.past-hero .nav { top: 28px; }
.nav-inner { display: flex; align-items: center; gap: var(--sp-6); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
/* Opener-trolley scroll progress: the carriage rides the nav's bottom rail
   as a function of page scroll (same scroll() timeline as the hazard
   stripe). Display-gated: it doesn't exist without scrub support or with
   motion off, so there is nothing to fail safe. */
.trolley-rail { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html.js:not(.no-motion)) .trolley-rail {
      display: block; position: absolute; left: 0; right: 0; bottom: -2px;
      height: 3px; pointer-events: none;
    }
    :where(html.js:not(.no-motion)) .trolley {
      position: absolute; top: -2px; left: 0; width: 26px; height: 6px;
      background: var(--gdt-amber); border-radius: 2px;
      box-shadow: 0 0 10px rgba(253, 170, 34, .55);
      animation: trolley-run linear both; animation-timeline: scroll();
    }
    :where(html.js:not(.no-motion)) .trolley::after {
      content: ""; position: absolute; left: 11px; top: 6px; width: 4px; height: 3px;
      background: var(--gdt-amber-deep);
    }
  }
}
@keyframes trolley-run { to { transform: translateX(calc(100vw - 26px)); } }
/* Client asked for a bigger mark 2026-08-11. Source is 360x178, so 74px tall
   (150 wide) still draws inside the asset's own pixels at DPR 2.
   flex-shrink:0 is load-bearing: without it the flex row squeezed the img
   narrower while the fixed height held, which SQUASHED the mark on narrow
   phones (measured 66x62 at 320px, aspect ratio should be 125x62). */
.nav-logo { flex: 0 0 auto; }
.nav-logo img { height: 74px; width: auto; max-width: none; }
.nav-links { display: flex; gap: var(--sp-5); list-style: none; margin-left: auto; }
.nav-links a {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-16);
  text-decoration: none; color: var(--gdt-bone); padding: 6px 2px;
  position: relative; transition: color .15s ease;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gdt-amber); transform: scaleX(0); transform-origin: left; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--gdt-amber); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(html:not(.no-motion)) .nav-links a::after { transition: transform .25s var(--ease-lift); }
}
.nav-phone { display: flex; align-items: center; gap: var(--sp-3); }
.nav-phone .num {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-16);
  color: var(--gdt-bone); text-decoration: none; white-space: nowrap;
}
.nav-phone .num:hover { color: var(--gdt-amber); }

/* ---- Stars ribbon (sticky extra: appears after hero scroll) ---- */
.stars-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 28px; box-sizing: border-box;
  display: flex; justify-content: center; align-items: center; gap: var(--sp-3);
  background: var(--gdt-ink); border-bottom: 1px solid var(--gdt-line);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.1em;
  padding: 0 8px; color: var(--gdt-steel);
  transform: translateY(-110%); visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
html.past-hero .stars-ribbon { transform: none; visibility: visible; }
.stars-ribbon a { color: var(--gdt-amber); text-decoration: none; }

/* ---- Hero (full photo, copy left, side-fade scrim) ---- */
.hero { position: relative; overflow: hidden; background: var(--gdt-ink); }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.94) saturate(1.06); }
/* Copy side stays ink-dark; the photo side opens to near-full color with a
   faint amber wash so the page glows instead of flattening to black. */
.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(115deg, rgba(253,170,34,0) 55%, rgba(253,170,34,0.07) 82%, rgba(253,170,34,0.13) 100%),
  linear-gradient(90deg, rgba(11,11,10,0.94) 0%, rgba(11,11,10,0.78) 36%, rgba(11,11,10,0.20) 70%, rgba(11,11,10,0.02) 100%); }
/* Photo drifts slowly with page scroll: user-driven, Chrome/Safari only. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html:not(.no-motion)) .hero-img img { animation: hero-drift linear both; animation-timeline: scroll(); animation-range: 0 120vh; }
  }
}
@keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1.12) translateY(-3%); } }
.hero-inner { position: relative; padding-top: var(--sp-10); padding-bottom: var(--sp-10); max-width: 720px; }
.hero h1 { font-size: clamp(56px, 8vw, 88px); }
.hero .tagline { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-26); color: var(--gdt-amber); margin-top: var(--sp-4); }
.hero .lede { color: var(--gdt-steel); margin-top: var(--sp-5); max-width: 52ch; text-shadow: 0 1px 4px rgba(11,11,10,0.9), 0 2px 12px rgba(11,11,10,0.7); }
.hero-cta { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); flex-wrap: wrap; }
.hero-cta .btn-phone { box-shadow: inset 0 0 0 1px rgba(255,198,92,0.35), 0 6px 24px rgba(253,170,34,0.32), 0 2px 8px rgba(11,11,10,0.45); }
.hero-trust .stars { text-shadow: 0 0 10px rgba(253,170,34,0.55); }
.hero-cta .alt { font-size: var(--fs-16); color: var(--gdt-bone); text-decoration: underline; text-decoration-color: var(--gdt-amber); text-underline-offset: 4px; }
.hero-cta .alt:hover { color: var(--gdt-amber); }
.hero-trust { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-14); color: var(--gdt-bone); text-shadow: 0 1px 4px rgba(11,11,10,0.95), 0 2px 14px rgba(11,11,10,0.85); flex-wrap: wrap; }

/* ---- Dealer panel: Haas alone, opening into HAAS Create.
       Client-directed 2026-08-10; supersedes the locked three-chip row. ---- */
.dealer { padding-top: var(--sp-7); padding-bottom: var(--sp-7); }
.dealer-frame {
  border: 1px solid var(--gdt-line); border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-6); text-align: center; position: relative;
  background:
    radial-gradient(120% 140% at 18% 50%, rgba(253,170,34,0.07) 0%, rgba(253,170,34,0) 62%),
    var(--gdt-panel);
}
/* Eyebrow lives in the copy column so it caps the headline instead of floating
   panel-centred 24px off it. It used to straddle the top border filled with the
   PAGE colour, which read as a dark rectangle punched over the panel. */
.dealer-frame .label {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.18em; color: var(--gdt-steel);
}
/* Fixed left track + equal gutters: a flex row centred the content 26px left of
   the panel's optical centre. align-items:start stops the plate floating at
   tablet width where the copy column is much taller. */
.dealer-haas {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-8);
  align-items: start; text-align: left; max-width: 1000px; margin: 0 auto;
}
/* The Haas mark is 176x103 native everywhere it exists, so it is never scaled
   up. Prominence comes from the plate it sits on, not from a blurry logo. */
.dealer-mark {
  border: 1px solid var(--gdt-line); border-top: 2px solid var(--gdt-amber);
  border-radius: var(--r-card); background: var(--gdt-ink);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
/* 150px, not the 176 native: the only Haas asset in existence is 176x103, so a
   smaller draw keeps the upscale factor down and stops the tagline going mushy. */
.dealer-mark img { width: 150px; height: 88px; border-radius: 4px; }
.dealer-cred {
  font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.5;
  letter-spacing: 0.1em; color: var(--gdt-steel); text-align: center; text-wrap: balance;
}
.dealer-pitch { min-width: 0; }
.dealer-pitch h2 { font-size: var(--fs-34); }
.dealer-pitch p { color: var(--gdt-steel); margin-top: var(--sp-4); max-width: 52ch; }
.dealer-cta { margin-top: var(--sp-6); }
.dealer-note {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-12); color: #948F86;
}

/* ---- Service cards (photo cards) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.svc-card {
  background: var(--gdt-panel); border: 1px solid var(--gdt-line); border-radius: var(--r-card);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: border-color .15s ease;
}
.svc-card:hover { border-color: var(--gdt-amber); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .svc-card { transition: border-color .15s ease, transform .25s var(--ease-lift); }
  .svc-card:hover { transform: translateY(-2px); }
}
.svc-card .ph { aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card .ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) saturate(0.95) sepia(0.06); transition: filter .2s ease; }
.svc-card:hover .ph img { filter: brightness(0.95) saturate(1); }
.svc-card .tx { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-26); line-height: 1; }
.svc-card p { font-size: var(--fs-16); color: var(--gdt-steel); margin-top: var(--sp-2); }
.svc-card .go { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--gdt-amber); margin-top: auto; padding-top: var(--sp-3); display: inline-block; }

/* Arrow nudge on card links (desktop pointer + motion only) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(html:not(.no-motion)) .svc-card .go, :where(html:not(.no-motion)) .rel-card .rel-go { transition: transform .25s var(--ease-lift); }
  .svc-card:hover .go, .rel-card:hover .rel-go { transform: translateX(4px); }
}

/* ---- Family strip ---- */
.family { background: var(--gdt-ink); }
.family-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.family-grid .ph { border-radius: var(--r-card); overflow: hidden; }
.family-grid .ph img { filter: brightness(0.88) saturate(0.95) sepia(0.06); }
.family h2 { font-size: var(--fs-46); }
.family .go { font-family: var(--font-mono); font-size: var(--fs-16); color: var(--gdt-amber); text-decoration: none; }
.family .go:hover { text-decoration: underline; }

/* ---- Reviews (card grid) ---- */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.rev-card { padding: var(--sp-5); }
.rev-card .q { margin-top: var(--sp-3); }
.rev-card .who { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--gdt-steel); margin-top: var(--sp-4); }

/* ---- Stat tiles (mono) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.stat-tile { padding: var(--sp-6); text-align: center; }
.stat-tile .n { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-46); color: var(--gdt-amber); line-height: 1; }
.stat-tile .l { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gdt-steel); margin-top: var(--sp-3); }

/* ---- Drive-time list (LOCKED service-area treatment) ---- */
.drive-list { list-style: none; border-top: 1px solid var(--gdt-line); }
.drive-list li { border-bottom: 1px solid var(--gdt-line); }
.drive-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2); text-decoration: none;
  transition: background .15s ease;
}
.drive-list a:hover { background: var(--gdt-panel); }
.drive-list .town { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-26); }
.drive-list a:hover .town { color: var(--gdt-amber); }
.drive-list .min { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.1em; color: var(--gdt-steel); white-space: nowrap; }
.drive-list .min .hm { color: var(--gdt-amber); }

/* ---- Callback panel (dark panel; pre-footer, every page) ---- */
.callback { background: var(--gdt-ink); }
.cb-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-8); align-items: center; }
.cb-form { display: grid; gap: var(--sp-4); }
.cb-form label { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gdt-steel); display: block; margin-bottom: var(--sp-2); }
.cb-form input, .cb-form select {
  width: 100%; background: var(--gdt-panel); border: 1px solid var(--gdt-line); border-radius: 3px;
  color: var(--gdt-bone); font-family: var(--font-body); font-size: var(--fs-18); padding: 12px 14px;
}
.cb-form input:focus, .cb-form select:focus { outline: 2px solid var(--gdt-amber); outline-offset: 0; border-color: var(--gdt-amber-deep); }
.cb-ok { display: none; padding: var(--sp-5); border: 1px solid var(--gdt-amber-deep); border-radius: var(--r-card); background: var(--gdt-panel); }
.cb-ok.on { display: block; }
/* The confirmation lifts in (.on shows it, .in lands it) so the swap from
   the form reads as a handoff, not a teleport. */
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .cb-ok.on { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease-lift), transform .3s var(--ease-lift); }
  :where(html.js:not(.no-motion)) .cb-ok.on.in { opacity: 1; transform: none; }
}
.cb-alt { font-size: var(--fs-16); color: var(--gdt-steel); margin-top: var(--sp-4); }
.cb-alt a { color: var(--gdt-amber); text-decoration: none; }

/* ---- Footer ---- */
.footer { background: var(--gdt-ink); border-top: 1px solid var(--gdt-line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-8); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.footer .logo img { height: 54px; width: auto; }
.footer .tag { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; color: var(--gdt-amber); font-size: var(--fs-21); margin-top: var(--sp-4); }
.footer h4 { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gdt-steel); margin-bottom: var(--sp-4); }
.footer ul { list-style: none; }
.footer ul a { display: inline-block; padding: 4px 0; color: var(--gdt-bone); text-decoration: none; font-size: var(--fs-16); }
.footer ul a:hover { color: var(--gdt-amber); }
.foot-meta { border-top: 1px solid var(--gdt-line); padding-top: var(--sp-5); padding-bottom: calc(var(--sp-5) + 76px); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--gdt-steel); display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.foot-meta #motion-btn { background: none; border: 1px solid var(--gdt-line); border-radius: 3px; color: var(--gdt-steel); font-size: var(--fs-12); letter-spacing: 0.08em; padding: 2px 8px; cursor: pointer; }
.foot-meta #motion-btn:hover { color: var(--gdt-amber); border-color: var(--gdt-amber-deep); }

/* ---- Sticky mobile call bar ---- */
.callbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--gdt-ink); border-top: 1px solid var(--gdt-line);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
  padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
  align-items: center; gap: var(--sp-4); justify-content: space-between;
  /* hidden while the hero's own call button is on screen; shows after the hero scrolls away */
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
html.past-hero .callbar { transform: none; visibility: visible; }
.callbar .ask { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-21); }
.callbar .btn-phone { font-size: var(--fs-21); padding: 12px 22px; }

/* ---- Service pages ---- */
.svc-hero .hero-inner { padding-top: var(--sp-9); padding-bottom: var(--sp-9); max-width: 780px; }
.svc-hero h1 { font-size: clamp(46px, 6vw, 72px); }
.svc-intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
.check-list { list-style: none; }
.check-list li {
  padding: var(--sp-3) 0 var(--sp-3) 34px; position: relative;
  border-bottom: 1px solid var(--gdt-line); font-size: var(--fs-18);
}
.check-list li::before {
  content: "✓"; position: absolute; left: 4px; top: var(--sp-3);
  color: var(--gdt-amber); font-family: var(--font-mono); font-weight: 500;
}
.city-svc a { color: var(--gdt-bone); text-decoration: none; transition: color .15s ease; }
.city-svc a:hover { color: var(--gdt-amber); }

.signs-list { list-style: none; }
.signs-list li {
  border-left: 4px solid var(--gdt-amber); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4); color: var(--gdt-steel); font-size: var(--fs-18);
}
.read-panel { max-width: 72ch; margin: 0 auto; padding: var(--sp-7); }
.read-panel p { margin-bottom: var(--sp-5); }
.read-panel p:last-of-type { margin-bottom: 0; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.rel-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); text-decoration: none;
  transition: border-color .15s ease;
}
.rel-card:hover { border-color: var(--gdt-amber); }
.rel-title { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-21); }
.rel-go { font-size: var(--fs-12); color: var(--gdt-amber); letter-spacing: 0.08em; margin-top: auto; white-space: nowrap; }

/* ---- About / Reviews / Gallery / Contact ---- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.team-card { padding: var(--sp-5); }
.team-name { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-26); line-height: 1.05; }
.team-role { font-size: var(--fs-12); letter-spacing: 0.1em; color: var(--gdt-steel); margin-top: var(--sp-3); }

.rating-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: var(--sp-4); margin-top: var(--sp-7); }
.rev-grid-page { grid-template-columns: repeat(3, 1fr); align-items: start; }
.rev-reply { font-size: var(--fs-12); letter-spacing: 0.06em; color: var(--gdt-steel); margin-top: var(--sp-4); border-top: 1px solid var(--gdt-line); padding-top: var(--sp-3); }
.rev-reply span { color: var(--gdt-amber); }

.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } /* 8 tiles = clean 4x2 since the pairs moved to sliders */
.g-tile { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--gdt-line); aspect-ratio: 4 / 3; }
.g-tile img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) saturate(0.97); transition: filter .2s ease; }
.g-tile:hover img { filter: brightness(1) saturate(1); }

.hours-list { list-style: none; border-top: 1px solid var(--gdt-line); }
.hours-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--gdt-line); }
.hrs-day { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: var(--fs-21); }
.hrs-time { font-size: var(--fs-14); letter-spacing: 0.08em; color: var(--gdt-steel); text-align: right; }

/* ---- The Door: a 5-panel sectional that moves as ONE SLAB (Marshall,
   round 4: no separating panels). ALL motion lives on .gd-door; panels are
   static faces. Default state is OPEN (slab up out of frame) so no-JS,
   reduced-motion, the footer toggle, and Firefox all see the photo.
   .gd-scroll: travel scrubbed by scroll position (Chrome/Edge/Safari).
   .gd-auto: IO latch + tap fallback where scrubbing is unsupported.
   .gd-pose: rolls from shut into its pose once on load (hero/posed doors).
   data-state: symptom poses = slab offsets. ---- */
.gd {
  position: relative; aspect-ratio: 4 / 3;
  background: #080807; border: 1px solid var(--gdt-line); border-radius: var(--r-card);
  overflow: hidden; overflow: clip;
}
.gd-reveal { position: absolute; inset: 0; }
.gd-reveal img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) saturate(.97); }
.gd-reveal::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,7,.92) 0%, rgba(8,8,7,.35) 22%, rgba(8,8,7,0) 55%); }
.gd-door { position: absolute; inset: 0; transform: translateY(-102%); }
.gd-panel {
  position: absolute; left: 0; right: 0;
  height: 20%; top: calc(var(--i) * 20%);
  background: linear-gradient(180deg, #4a4840 0%, #3a3830 14%, #2b2a23 52%, #363429 86%, #211f18 100%);
  border-top: 1px solid #5c594e; border-bottom: 2px solid #0a0906;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.5), inset 0 8px 12px rgba(255,255,255,.05);
}
.gd-panel::before { content: ""; position: absolute; inset: 15% 5%;
  border: 1px solid rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(0,0,0,.6); border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 23.4%, rgba(0,0,0,.28) 23.4% 25%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16)); }
.gd-panel:first-child::after { content: ""; position: absolute; inset: 20% 9%; opacity: .85; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, transparent 0 2.5%, #6d7c8c 2.5% 22.5%, transparent 22.5% 26%, #63727f 26% 45.5%, transparent 45.5% 49%, #6d7c8c 49% 68.5%, transparent 68.5% 72%, #63727f 72% 91.5%, transparent 91.5%); }
.gd-spill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(0deg, rgba(253,170,34,.16) 0%, rgba(253,170,34,.05) 30%, transparent 70%);
  pointer-events: none; }
.gd-rail { position: absolute; top: 0; bottom: 0; width: 10px;
  background:
    repeating-linear-gradient(180deg, transparent 0 9%, rgba(0,0,0,.5) 9% 10.5%),
    linear-gradient(90deg, #4c4a42, #2b2a24); }
.gd-rail.l { left: 0; border-right: 1px solid #0a0906; } .gd-rail.r { right: 0; border-left: 1px solid #0a0906; }

/* Scroll-scrubbed travel: the slab's position IS the scroll position.
   Starts shut as the door enters, photo fully revealed by mid-viewport
   (entry 10% to cover 55%), closes again if you scroll back. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html.js:not(.no-motion)) .gd-scroll { view-timeline: --door block; }
    /* .gd-auto ships cursor:pointer, but while the scrub owns the door there
       is nothing to tap: two classes so this outranks it regardless of order. */
    :where(html.js:not(.no-motion)) .gd-auto.gd-scroll { cursor: default; }
    :where(html.js:not(.no-motion)) .gd-scroll .gd-door {
      transition: none;
      animation: gd-slab linear both;
      animation-timeline: --door;
      animation-range: entry 10% cover 55%;
    }
    :where(html.js:not(.no-motion)) .gd-scroll .gd-spill {
      transform-origin: bottom;
      animation: gd-spill-scrub linear both;
      animation-timeline: --door;
      animation-range: entry 10% cover 55%;
    }
  }
}
@keyframes gd-slab { from { transform: translateY(0); } to { transform: translateY(-102%); } }
@keyframes gd-spill-scrub { from { transform: scaleY(0); opacity: .3; } to { transform: none; opacity: 1; } }

/* Pose entrance: posed/hero doors roll from shut into their pose once.
   The keyframe has no 'to', so it lands on whatever the pose sets. */
@media (prefers-reduced-motion: no-preference) {
  :where(html:not(.no-motion)) .gd-pose .gd-door { animation: gd-pose-in 1.1s cubic-bezier(.45, .05, .35, 1) .35s both; }
  :where(html:not(.no-motion)) .gd-pose .gd-spill { animation: gd-pose-spill 1.1s cubic-bezier(.45, .05, .35, 1) .35s both; }
}
@keyframes gd-pose-in { from { transform: translateY(0); } }
@keyframes gd-pose-spill { from { height: 0; } }

/* Fallback (no scroll-driven support, e.g. Firefox): shut until the IO
   latch opens it on approach; tap/Enter works it. Slow slab rise. */
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .gd-auto:not(.open) .gd-door { transform: translateY(0); }
  :where(html.js:not(.no-motion)) .gd-auto:not(.open) .gd-spill { height: 0; }
  :where(html.js:not(.js-live)) .gd-auto:not(.open) .gd-door { animation: gd-failsafe 0s 5s forwards; }
  @keyframes gd-failsafe { to { transform: translateY(-102%); } }
  :where(html.js:not(.no-motion)) .gd-anim .gd-door,
  :where(html.js:not(.no-motion)) .gd-auto .gd-door { transition: transform 900ms cubic-bezier(.45, .05, .35, 1), transform-origin 900ms cubic-bezier(.45, .05, .35, 1); }
  :where(html.js:not(.no-motion)) .gd-anim .gd-spill,
  :where(html.js:not(.no-motion)) .gd-auto .gd-spill { transition: height 900ms cubic-bezier(.45, .05, .35, 1); }
}
/* Once the user picks a symptom, the pill owns the door: drop the scrub or
   entrance animation so the data-state pose (900ms transition) applies. */
.gd.posed .gd-door, .gd.posed .gd-spill { animation: none; }
/* Symptom poses: how far the slab sits down its track. */
.gd[data-state="shut"] .gd-door    { transform: translateY(0); }
.gd[data-state="shut"] .gd-spill   { height: 0; }
.gd[data-state="half"] .gd-door    { transform: translateY(-52%); }
.gd[data-state="half"] .gd-spill   { height: 52%; }
.gd[data-state="sag"] .gd-door     { transform: translateY(-4%) rotate(-3deg); transform-origin: 88% 0; }
.gd[data-state="sag"] .gd-spill    { height: 8%; }
.gd[data-state="reverse"] .gd-door { transform: translateY(-86%); }
.gd[data-state="reverse"] .gd-spill{ height: 86%; }
/* (Poses live BELOW the scrub/fallback rules on purpose: they tie on
   specificity with the fallback shut rule, and the pose must win.) */

.gd-auto { cursor: pointer; }
.gd-auto:focus-visible { outline: 2px solid var(--gdt-amber); outline-offset: 3px; }

.door-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.diag-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--sp-8); align-items: center; }

.diag-pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.diag-pill { font-size: var(--fs-14); letter-spacing: 0.06em; text-decoration: none; color: var(--gdt-bone); border: 1px solid var(--gdt-line); border-radius: 3px; padding: 8px 14px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.diag-pill:hover, .diag-pill:focus-visible { border-color: var(--gdt-amber); color: var(--gdt-amber); }
.diag-pill[aria-current="true"] { background: var(--gdt-amber); color: var(--gdt-on-amber); border-color: var(--gdt-amber); }
.diag-answer { padding: var(--sp-5); margin-top: var(--sp-5); }

/* ---- FAQ blocks (question-shaped for answer engines) ---- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); }
.faq-q { font-size: var(--fs-20); margin-bottom: var(--sp-2); }
.faq-item .muted { max-width: 58ch; }
.faq-reviewed { margin-top: var(--sp-3); font-size: var(--fs-12); letter-spacing: .12em; }

/* ---- Door health check (JS app; no-JS sees the static list instead) ---- */
html:not(.js) .hc-app { display: none; }
html.js .hc-static { display: none; }
.hc-progress { font-size: var(--fs-12); letter-spacing: .12em; margin-bottom: var(--sp-4); }
.hc-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.hc-actions[hidden] { display: none; } /* display:flex would beat the hidden attribute */
.hc-actions .diag-pill { background: transparent; font-size: var(--fs-16); padding: 12px 30px; cursor: pointer; }
.hc-grade { font-size: var(--fs-34); }
.hc-flags { list-style: none; padding: 0; margin-top: var(--sp-4); }
.hc-flags li { margin-top: var(--sp-2); }
.hc-flags a { color: var(--gdt-amber); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: .08em; }
.hc-restart { background: none; border: 0; padding: 0; color: var(--gdt-steel); text-decoration: underline; cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .hc-result { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease-lift), transform .3s var(--ease-lift); }
  :where(html.js:not(.no-motion)) .hc-result.on { opacity: 1; transform: none; }
}
/* First reveal glides in alongside the door's 900ms pose instead of popping. */
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .diag-answer { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease-lift), transform .3s var(--ease-lift); }
  :where(html.js:not(.no-motion)) .diag-answer.on { opacity: 1; transform: none; }
}

/* ---- Before/after sliders: native range drives the clip so keyboard,
   click-on-track, and drag all work (WCAG 2.5.7). No-JS shows a static
   50/50 split and hides the inert control. ---- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ba { position: relative; border: 1px solid var(--gdt-line); border-radius: var(--r-card); overflow: hidden; overflow: clip; aspect-ratio: 4 / 3; margin: 0; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.ba .tag { position: absolute; top: var(--sp-3); font-size: var(--fs-12); letter-spacing: .1em; background: rgba(11,11,10,.78); color: var(--gdt-bone); padding: 3px 8px; border-radius: 3px; }
.ba .tag.b { left: var(--sp-3); } .ba .tag.a { right: var(--sp-3); color: var(--gdt-amber); }
.ba .cutline { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--gdt-amber); }
.ba-ctl input { width: 100%; margin-top: var(--sp-3); accent-color: var(--gdt-amber); cursor: ew-resize; }
html:not(.js) .ba-ctl { display: none; }
/* Scroll-wipe intro: --cut sweeps 100% -> 50% as the slider enters, so the
   "after" side wipes in on scroll. First input adds .touched, dropping the
   animation: its 'both' fill would otherwise pin --cut over the inline
   value the range writes. inherits: true is load-bearing: .after and
   .cutline read var(--cut) from the figure. */
@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html.js:not(.no-motion)) .ba:not(.touched) {
      view-timeline: --ba block;
      animation: ba-wipe linear both;
      animation-timeline: --ba;
      animation-range: entry 20% cover 60%;
    }
  }
}
@keyframes ba-wipe { from { --cut: 100%; } to { --cut: 50%; } }

/* Broken-spring page: the coil pulls apart as you scroll. Keyframes carry
   only 'from' (wound together, annotation hidden); the authored SVG is the
   snapped state, so no-SDA browsers show the end of the story. */
.spring-fig { margin: 0; }
.spring-fig svg { width: 100%; height: auto; display: block; }
.spring-cap { display: block; margin-top: var(--sp-3); font-size: var(--fs-12); letter-spacing: .1em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :where(html.js:not(.no-motion)) .spring-fig { view-timeline: --snap block; }
    :where(html.js:not(.no-motion)) .spring-fig .sp-l,
    :where(html.js:not(.no-motion)) .spring-fig .sp-r,
    :where(html.js:not(.no-motion)) .spring-fig .sp-gap {
      animation: sp-snap linear both;
      animation-timeline: --snap;
      animation-range: entry 25% cover 65%;
    }
    :where(html.js:not(.no-motion)) .spring-fig .sp-l { animation-name: sp-l; }
    :where(html.js:not(.no-motion)) .spring-fig .sp-r { animation-name: sp-r; }
    :where(html.js:not(.no-motion)) .spring-fig .sp-gap { animation-name: sp-gap; }
  }
}
@keyframes sp-l { from { transform: translateX(22px); } }
@keyframes sp-r { from { transform: translateX(-22px); } }
@keyframes sp-gap { from { opacity: 0; } }

/* ---- Reveals: static-first. Hidden-for-reveal ONLY when JS runs and motion
   is allowed; no-JS, reduced-motion, and the footer toggle all see content. */
/* Gate pattern (the blessed one, copy verbatim): :where(html.js:not(.no-motion)) + component selector, inside a no-preference media block. :where() keeps specificity at plain-class level. */
.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .rv {
    opacity: 0; transform: translateY(14px);
    /* --rvi staggers siblings (cards, rows, tiles) so groups cascade in
       instead of arriving as one block. Generators emit the index. */
    transition: opacity var(--dur-lift) var(--ease-lift) calc(var(--rvi, 0) * 55ms),
                transform var(--dur-lift) var(--ease-lift) calc(var(--rvi, 0) * 55ms);
  }
  :where(html.js:not(.no-motion)) .rv.in { opacity: 1; transform: none; }
  /* Dead-man switch, armed ONLY if site.js never ran (no js-live): content
     can never stay hidden. While JS is alive, IO is the sole revealer so
     the motion is actually seen. */
  :where(html.js:not(.js-live)) .rv { animation: rv-failsafe 0s 4s forwards; }
  @keyframes rv-failsafe { to { opacity: 1; transform: none; } }
}

/* Heading wipe: display h2s lift into place (the door gesture). The
   clip-path leaves slack on top/sides so italic overhang never clips.
   Bottom slack is deliberately tight for the mask edge: avoid ending
   display h2s on heavy descenders (Q). */
.wl { display: block; }
@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.no-motion)) .rv h2.display { clip-path: inset(-0.35em -0.4em -0.06em -0.4em); }
  :where(html.js:not(.no-motion)) .rv h2.display .wl {
    transform: translateY(120%);
    transition: transform .45s var(--ease-lift) calc(60ms + var(--rvi, 0) * 55ms); /* rides just behind the .4s container fade; retune together */
  }
  :where(html.js:not(.no-motion)) .rv.in h2.display .wl { transform: none; }
  :where(html.js:not(.js-live)) .rv h2.display .wl { animation: rv-failsafe 0s 4s forwards; }
}

/* ---- Mobile (390 first-class) ---- */
@media (max-width: 900px) {
  .pad { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .faq-grid { grid-template-columns: 1fr; }
  /* Collapse the dealer panel here, not at 480: a fixed 340px plate beside the
     copy squeezed the paragraph to ~316px through the whole tablet range. */
  .dealer-haas { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-6); }
  .dealer-mark { width: 100%; max-width: 340px; }
  .dealer-pitch p { margin-left: auto; margin-right: auto; }
  /* mobile gets the bottom call bar instead of the stars ribbon */
  .stars-ribbon { display: none; }
  html.past-hero .nav { top: 0; }
  .nav-links { display: none; }
  .nav-phone { margin-left: auto; }
  /* The bigger mark leaves less room beside it, so the number holds one line
     at a slightly smaller size instead of breaking mid-number. */
  .nav-logo img { height: 62px; }
  .nav-phone .num { font-size: var(--fs-14); }
  .nav-phone { gap: var(--sp-2); }
  .hero-inner { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .hero-scrim { background:
    linear-gradient(200deg, rgba(253,170,34,0.10) 0%, rgba(253,170,34,0) 40%),
    linear-gradient(180deg, rgba(11,11,10,0.82) 0%, rgba(11,11,10,0.62) 55%, rgba(11,11,10,0.4) 100%); }
  .svc-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .svc-intro-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-panel { padding: var(--sp-5); }
  .rel-go { white-space: normal; }
  .svc-card .go { white-space: normal; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .rating-summary { grid-template-columns: 1fr; max-width: 320px; }
  .rev-grid-page { grid-template-columns: 1fr; }
  .g-grid { grid-template-columns: 1fr 1fr; }
  .family-grid, .cb-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .door-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .diag-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ba-grid { grid-template-columns: 1fr; }
  .rev-grid, .stat-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .sec-head h2 { font-size: var(--fs-34); }
  .callbar { display: flex; }
}
/* Narrow phones: step the mark down rather than let it crowd the number.
   Still lands bigger than the 46px it started at. */
@media (max-width: 379px) {
  .nav-logo img { height: 54px; }
  .nav-phone .num { font-size: var(--fs-12); }
  .nav-inner { gap: var(--sp-3); }
}
@media (max-width: 480px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card .ph { aspect-ratio: 16 / 9; }
  .hero-cta .btn-phone { width: 100%; text-align: center; }
  .dealer-pitch h2 { font-size: var(--fs-26); }
  .dealer-cta { width: 100%; text-align: center; }
  .drive-list a { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---- Cross-page transitions (Chrome/Edge 126+, Safari 18.2+; Firefox and
   everything else just navigates normally). Nav bar holds steady; a service
   card's photo morphs into the service page hero. Reduced motion and the
   footer toggle disable the animations. ---- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
/* Snappy: the morph should feel like the site is FAST, not like a fade. */
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.no-motion::view-transition-group(*),
html.no-motion::view-transition-old(*),
html.no-motion::view-transition-new(*) { animation: none !important; }