/* =============================================================================
   DISCOUNT YEAR NEW & USED TIRES — Design System
   -----------------------------------------------------------------------------
   Direction : "Pit-lane spec sheet" — motorsport / engineering-spec precision.
   Palette   : Sampled directly from the client's logo artwork —
               deep orange #E05500 → core orange #F88000 → gold #FFB61E,
               on the logo's near-black plate, with chrome pulled from the
               alloy rim in the mark.
   Display   : Inter (tight, heavy)
   Data face : JetBrains Mono — the "stamped sidewall code" voice
   Signature : One realistic tire, used three times — loader, hero, cursor.

   Structure
     1  Design tokens          9  Brand marquee      17  Reviews carousel
     2  Reset & base          10  Stats band         18  FAQ
     3  Typography            11  Services           19  Contact & hours
     4  Buttons               12  Tire decoder       20  Footer
     5  Loading screen        13  Inventory          21  Floating elements
     6  Custom cursor         14  Why us             22  Scroll reveal
     7  Navigation            15  Tread safety       23  Responsive
     8  Hero                  16  Financing          24  Motion preferences
   ========================================================================== */

/* =============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- surfaces: the logo's plate is almost pure black, so we go deeper ---- */
  --asphalt:      #0a0b0d;
  --asphalt-2:    #121419;
  --asphalt-3:    #1b1e25;
  --asphalt-4:    #262a33;
  --concrete:     #f5f3ef;
  --concrete-2:   #eae6de;
  --paper:        #ffffff;

  /* --- ink ---------------------------------------------------------------- */
  --ink:          #101216;
  --ink-soft:     #52575f;
  --ink-faint:    #868b93;
  --ink-dark-1:   #d9dbdf;
  --ink-dark-2:   #9aa0aa;

  /* --- brand: sampled from the logo ---------------------------------------
     The logo's orange is a GRADIENT, not a flat colour. That gradient is the
     single most recognisable thing about the mark, so it drives the palette. */
  --signal:       #f88000;   /* core orange — the dominant tone in the mark   */
  --signal-2:     #ff9414;   /* lifted mid                                    */
  --signal-glow:  #ffb61e;   /* gold highlight from the NEW & USED TIRES band */
  --signal-deep:  #e05500;   /* deep orange from the swoosh's shadow side     */
  --signal-ink:   #1a0e00;   /* text that sits ON orange                      */

  /* --- chrome: lifted from the alloy rim in the logo ----------------------
     Replaces the old steel-blue. A metallic reads far more "automotive" and
     it is already present in the artwork, so it ties the page to the mark. */
  --chrome:       #c9ced6;
  --chrome-2:     #8a929e;
  --chrome-deep:  #4a515c;

  /* --- lines -------------------------------------------------------------- */
  --line:         rgba(16,18,22,.10);
  --line-2:       rgba(16,18,22,.16);
  --line-dark:    rgba(255,255,255,.09);
  --line-dark-2:  rgba(255,255,255,.17);

  /* --- radius ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- elevation ---------------------------------------------------------- */
  --shadow-sm:   0 6px 20px rgba(0,0,0,.10);
  --shadow-md:   0 18px 44px rgba(0,0,0,.16);
  --shadow-lg:   0 34px 80px rgba(0,0,0,.32);
  --shadow-glow: 0 12px 44px rgba(248,128,0,.32);

  /* --- brand gradients — the logo's own ramp ------------------------------ */
  --grad-signal:      linear-gradient(135deg, var(--signal-glow) 0%, var(--signal) 46%, var(--signal-deep) 100%);
  --grad-signal-flat: linear-gradient(180deg, var(--signal-glow) 0%, var(--signal) 55%, var(--signal-deep) 100%);
  --grad-signal-soft: linear-gradient(135deg, rgba(255,182,30,.15), rgba(248,128,0,.03));
  --grad-chrome:      linear-gradient(160deg, #fdfefe 0%, var(--chrome) 22%, var(--chrome-2) 52%, #e9edf2 74%, var(--chrome-deep) 100%);
  --hazard:           repeating-linear-gradient(135deg, var(--signal) 0 18px, var(--asphalt) 18px 36px);

  /* --- type --------------------------------------------------------------- */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- fluid type scale ---------------------------------------------------
     clamp() everywhere so phones get deliberate sizes, not shrunken desktop
     ones. Min values are tuned for a 320px iPhone SE. */
  --fs-eyebrow: clamp(.62rem, .55rem + .18vw, .72rem);
  --fs-body:    clamp(.95rem, .91rem + .18vw, 1.05rem);
  --fs-lead:    clamp(1.02rem, .96rem + .32vw, 1.2rem);
  --fs-h3:      clamp(1.1rem, 1.02rem + .38vw, 1.35rem);
  --fs-h2:      clamp(1.85rem, 1.42rem + 2.05vw, 3.15rem);
  --fs-hero:    clamp(2.35rem, 1.5rem + 5.1vw, 5.1rem);
  --fs-stat:    clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);

  /* --- spacing rhythm ----------------------------------------------------- */
  --sp-section: clamp(64px, 8.5vw, 132px);
  --sp-gap:     clamp(16px, 2.2vw, 28px);

  /* --- layout ------------------------------------------------------------- */
  --container: min(1220px, 100% - clamp(32px, 7vw, 64px));
  --nav-h: 74px;

  /* --- motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;
  --t-med:  .34s;
  --t-slow: .62s;
}

/* =============================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--asphalt);
  color:var(--ink-dark-1);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;            /* belt-and-braces against horizontal scroll  */
  text-rendering:optimizeLegibility;
}

/* Deliberately NOT locking scroll here. A lock applied by a class that only
   JavaScript removes is exactly how the page became unusable on iOS with
   scripting disabled. .loader carries touch-action:none instead. */
body.nav-open{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:where(section){ position:relative; }

/* Accessible focus ring — visible, on-brand, never clipped. */
:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--signal); color:var(--signal-ink);
  padding:14px 22px; font-weight:700; border-radius:0 0 var(--r-s) 0;
}
.skip-link:focus{ left:0; }

.container{ width:var(--container); margin-inline:auto; }

.section{ padding-block:var(--sp-section); }
.section-dark{ background:var(--asphalt); color:var(--ink-dark-1); }
.section-light{ background:var(--concrete); color:var(--ink); }
.section-light-2{ background:var(--concrete-2); color:var(--ink); }

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:34px; height:2px; flex:none;
  background:var(--grad-signal); border-radius:2px;
}
.section-light .eyebrow{ color:var(--signal-deep); }

.h2{
  font-size:var(--fs-h2);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.06;
  color:var(--paper);
  text-wrap:balance;
}
.section-light .h2, .section-light-2 .h2{ color:var(--ink); }

.lead{
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--ink-dark-2);
  max-width:56ch;
  text-wrap:pretty;
}
.section-light .lead, .section-light-2 .lead{ color:var(--ink-soft); }

.section-head{ max-width:760px; margin-bottom:clamp(36px,4.6vw,60px); }

/* The mono face carries every piece of hard data: sizes, codes, figures. */
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* =============================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  --btn-bg: var(--asphalt-3);
  --btn-fg: var(--paper);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px;                    /* comfortably above the 44px target   */
  padding:15px 30px;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-.008em;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-med) var(--ease),
             background-color var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease);
}
.btn svg{ flex:none; }

/* Light sweep across the face on hover — one effect, used consistently. */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.34) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .62s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }

.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn-primary{
  --btn-fg: var(--signal-ink);
  background:var(--grad-signal);
  box-shadow:0 8px 26px rgba(248,128,0,.30);
}
.btn-primary:hover{ box-shadow:0 14px 40px rgba(248,128,0,.44); }

.btn-ghost{
  background:transparent;
  border:1.5px solid var(--line-dark-2);
}
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }

.section-light .btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.section-light .btn-ghost:hover{ border-color:var(--signal-deep); color:var(--signal-deep); }

.btn-block{ width:100%; }

/* =============================================================================
   5. LOADING SCREEN — realistic tire, percentage, soft lighting
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(248,128,0,.09), transparent 70%),
    var(--asphalt);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner{ display:grid; justify-items:center; gap:30px; padding:24px; }

.loader-tyre{
  position:relative;
  width:clamp(96px,20vw,132px);
  aspect-ratio:1;
}
/* Same reasoning as the hero wheel — but this one spins at 1.5s, so
   recomputing two drop-shadow filters per frame was the single most expensive
   thing on the loading screen. Static glow behind, filter off the spinner. */
.loader-tyre::before{
  content:'';
  position:absolute; inset:-18%;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(248,128,0,.22), transparent 70%),
    radial-gradient(closest-side, rgba(0,0,0,.6), transparent 76%);
  filter:blur(14px);
  pointer-events:none;
}
.loader-tyre .tyre-spin{
  transform-origin:50% 50%;
  animation:tyre-roll 1.5s linear infinite;
  will-change:transform;
}

@keyframes tyre-roll{ to{ transform:rotate(360deg); } }

.loader-meter{ display:grid; justify-items:center; gap:14px; width:min(240px,60vw); }

.loader-pct{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:1.6rem; font-weight:700;
  letter-spacing:.04em;
  color:var(--paper);
}
.loader-pct span{ color:var(--signal); }

.loader-bar{
  width:100%; height:3px; border-radius:3px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.loader-bar i{
  display:block; height:100%; width:0%;
  background:var(--grad-signal);
  border-radius:3px;
  box-shadow:0 0 14px rgba(248,128,0,.7);
  transition:width .22s var(--ease-out);
}
.loader-label{
  font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-dark-2);
}

/* =============================================================================
   6. CUSTOM CURSOR — desktop / fine-pointer only, enabled by JS
   -----------------------------------------------------------------------------
   Two layers: a soft shadow that trails slightly for depth, and the tire
   itself which tracks the pointer almost 1:1. All movement is transform-only
   inside a single rAF loop, so it stays pinned to the compositor at 60fps+.
   ========================================================================== */
.cursor-on, .cursor-on *{ cursor:none !important; }

.cursor{
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  margin:-19px 0 0 -19px;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:opacity .3s var(--ease);
  will-change:transform;
}
.cursor.ready{ opacity:1; }
.cursor.hidden{ opacity:0; }

/* Soft contact shadow — sells the tire as a physical object on the page. */
.cursor-shadow{
  position:fixed; top:0; left:0;
  width:34px; height:12px;
  margin:-6px 0 0 -17px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 70%);
  pointer-events:none;
  z-index:9998;
  opacity:0;
  transition:opacity .3s var(--ease);
  will-change:transform;
  filter:blur(2px);
}
.cursor-shadow.ready{ opacity:1; }

.cursor-tyre{ width:100%; height:100%; display:block; }
.cursor-tyre .tyre-spin{ transform-origin:50% 50%; }

/* Hover ring — expands to acknowledge an interactive target. */
.cursor-ring{
  position:absolute; inset:-9px;
  border:2px solid var(--signal);
  border-radius:50%;
  opacity:0;
  transform:scale(.55);
  transition:opacity var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-spring);
}
.cursor.on-link  .cursor-ring{ opacity:.55; transform:scale(1); }
.cursor.on-btn   .cursor-ring{ opacity:.9;  transform:scale(1.24); border-width:2.5px; }
.cursor.on-cta   .cursor-ring{
  opacity:1; transform:scale(1.46);
  box-shadow:0 0 22px rgba(248,128,0,.55), inset 0 0 14px rgba(248,128,0,.28);
}
.cursor.on-text  .cursor-ring{ opacity:0; }

/* =============================================================================
   7. NAVIGATION
   ========================================================================== */
.topbar{
  position:fixed; inset:0 0 auto; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease),
             height var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  height:64px;
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line-dark);
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}

.nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); width:var(--container); margin-inline:auto; }

/* --- brand lockup: the client's real logo, never redrawn ------------------ */
.brand{ display:flex; align-items:center; flex:none; margin-right:auto; }
.brand img{
  height:clamp(38px,4.4vw,50px);
  width:auto;
  transition:height var(--t-med) var(--ease), filter var(--t-med) var(--ease);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));
}
.topbar.scrolled .brand img{ height:clamp(34px,3.8vw,42px); }
.brand:hover img{ filter:drop-shadow(0 4px 16px rgba(248,128,0,.4)); }

.nav-links{ display:flex; align-items:center; gap:clamp(4px,1.4vw,10px); }
.nav-links a{
  position:relative;
  padding:10px 14px;
  font-size:.92rem; font-weight:600;
  color:var(--ink-dark-1);
  border-radius:var(--r-s);
  transition:color var(--t-fast) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; border-radius:2px;
  background:var(--grad-signal);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-med) var(--ease-out);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--signal); }

.nav-tel{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:10px 18px;
  border:1px solid var(--line-dark-2);
  border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:.82rem; font-weight:600;
  letter-spacing:.02em;
  transition:border-color var(--t-med) var(--ease),
             color var(--t-med) var(--ease),
             background-color var(--t-med) var(--ease);
}
.nav-tel svg{ color:var(--signal); }
.nav-tel:hover{ border-color:var(--signal); background:rgba(248,128,0,.08); color:var(--paper); }

.nav-cta{ min-height:46px; padding:12px 24px; font-size:.9rem; }

/* --- hamburger ----------------------------------------------------------- */
.menu-btn{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-dark-2);
  border-radius:var(--r-s);
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.menu-btn:hover{ border-color:var(--signal); }
.menu-btn span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--paper);
  position:relative;
  transition:background-color .1s var(--ease);
}
.menu-btn span::before,
.menu-btn span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  border-radius:2px; background:var(--paper);
  transition:transform var(--t-med) var(--ease-out), top var(--t-med) var(--ease-out);
}
.menu-btn span::before{ top:-6px; }
.menu-btn span::after{  top:6px; }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{  top:0; transform:rotate(-45deg); }

/* --- mobile drawer ------------------------------------------------------- */
.mobile-nav{
  position:fixed; inset:var(--nav-h) 0 auto; z-index:880;
  background:rgba(10,11,13,.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line-dark);
  padding:16px clamp(16px,5vw,28px) 30px;
  display:grid; gap:4px;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .48s var(--ease-out);
}
.mobile-nav.open{ clip-path:inset(0 0 0 0); }

.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px; padding:14px 6px;
  font-size:1.06rem; font-weight:600;
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(14px);
}
.mobile-nav.open a{
  animation:drawer-in .46s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * .045s + .08s);
}
.mobile-nav a span{ color:var(--signal); font-family:var(--font-mono); font-size:.74rem; }

@keyframes drawer-in{ to{ opacity:1; transform:translateY(0); } }

.mobile-nav .btn{ margin-top:18px; }

/* --- scroll progress: a thin fuel-gauge along the top of the nav ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:950;
  height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad-signal);
  box-shadow:0 0 12px rgba(248,128,0,.65);
  pointer-events:none;
}

/* =============================================================================
   8. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + clamp(24px,5vw,52px));
  padding-bottom:clamp(56px,8vw,92px);
  overflow:hidden;
  background:var(--asphalt);
}

/* Ambient lighting — two slow-drifting pools of brand light.
   will-change promotes this to its own layer so the drift+scale is composited
   instead of re-rasterising two full-viewport radial gradients each frame. */
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 46% at 74% 34%, rgba(248,128,0,.20), transparent 68%),
    radial-gradient(38% 38% at 18% 78%, rgba(255,182,30,.11), transparent 70%);
  animation:glow-drift 17s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes glow-drift{
  from{ transform:translate3d(-1.5%,-1%,0) scale(1); }
  to  { transform:translate3d(2%,1.5%,0) scale(1.07); }
}

/* Engineering grid — faint, so it reads as drafting paper, not decoration. */
.hero-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(78% 68% at 50% 46%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(78% 68% at 50% 46%, #000 30%, transparent 100%);
}

/* A moving highlight sweep, like a workshop light passing over the bay.
   The gradient lives on an over-wide child that is TRANSLATED rather than
   animating background-position on the parent. Animating background-position
   repaints the full viewport every frame — measured at 6fps here; moving it to
   a composited transform took the hero to ~55fps. */
.hero-sweep{
  position:absolute; inset:0; pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.hero-sweep::after{
  content:'';
  position:absolute; top:0; bottom:0; left:0;
  width:260%;
  background:linear-gradient(104deg, transparent 38%, rgba(255,255,255,.045) 50%, transparent 62%);
  transform:translate3d(-46%,0,0);
  will-change:transform;
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{
  0%,100%{ transform:translate3d(-46%,0,0); }
  50%    { transform:translate3d(8%,0,0); }
}

.hero-inner{
  position:relative; z-index:2;
  width:var(--container); margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(32px,5vw,68px);
}

/* --- staged entrance ----------------------------------------------------- */
.hero-copy > *{
  opacity:0; transform:translateY(26px);
  animation:hero-in .95s var(--ease-out) forwards;
}
.hero-copy > *:nth-child(1){ animation-delay:.10s; }
.hero-copy > *:nth-child(2){ animation-delay:.20s; }
.hero-copy > *:nth-child(3){ animation-delay:.32s; }
.hero-copy > *:nth-child(4){ animation-delay:.44s; }
.hero-copy > *:nth-child(5){ animation-delay:.56s; }
@keyframes hero-in{ to{ opacity:1; transform:translateY(0); } }

.hero h1{
  font-size:var(--fs-hero);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.038em;
  color:var(--paper);
  margin-bottom:22px;
  text-wrap:balance;
}

/* Line-by-line reveal: each line rises out from behind a mask. */
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > i{
  display:block; font-style:normal;
  transform:translateY(102%);
  animation:line-up 1s var(--ease-out) forwards;
}
.reveal-line:nth-of-type(1) > i{ animation-delay:.16s; }
.reveal-line:nth-of-type(2) > i{ animation-delay:.30s; }
@keyframes line-up{ to{ transform:translateY(0); } }

/* The accent line carries the logo's own gradient. */
.hero h1 .accent{
  background:var(--grad-signal);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero-lead{ font-size:var(--fs-lead); color:var(--ink-dark-2); max-width:50ch; margin-bottom:34px; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:32px; }

.hero-points{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.hero-points li{
  display:flex; align-items:center; gap:9px;
  font-size:.9rem; font-weight:600; color:var(--ink-dark-1);
}
.hero-points svg{ color:var(--signal); flex:none; }

/* --- hero tire ----------------------------------------------------------- */
.hero-visual{
  position:relative;
  display:grid; place-items:center;
  /* width:100% is load-bearing. Without it the element shrink-wraps to its
     content while the tire inside is sized at 100% of the element — each
     waits on the other and the whole visual collapses to 0x0. */
  width:100%;
  aspect-ratio:1;
  max-width:min(560px,100%);
  margin-inline:auto;
  opacity:0;
  animation:visual-in 1.25s var(--ease-out) .28s forwards;
}
@keyframes visual-in{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }

/* Halo behind the tire — soft, warm, pulsing very slowly. */
.hero-visual::before{
  content:""; position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(248,128,0,.34), rgba(248,128,0,.06) 55%, transparent 72%);
  filter:blur(26px);
  animation:halo 6.5s ease-in-out infinite alternate;
}
@keyframes halo{ from{ transform:scale(.94); opacity:.75; } to{ transform:scale(1.06); opacity:1; } }

.hero-tyre{
  position:relative; z-index:2;
  width:100%; height:auto;
}
/* The shadow is a STATIC element behind the wheel rather than a drop-shadow()
   filter on the parent. A filter on the parent of a rotating child has to be
   recomputed every single frame — and because the wheel is radially symmetric
   its shadow never actually changes, so the recomputation bought nothing. */
.hero-tyre::before{
  content:'';
  position:absolute; z-index:-1;
  left:50%; top:56%;
  width:92%; aspect-ratio:1/.42;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(0,0,0,.62), transparent 72%);
  filter:blur(18px);
  pointer-events:none;
}
.hero-tyre .tyre-spin{
  transform-origin:50% 50%;
  animation:tyre-roll 26s linear infinite;
  will-change:transform;
}

/* Floating spec chips — real information, not ornament. */
.chip{
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px;
  border-radius:var(--r-pill);
  background:rgba(18,20,25,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-dark-2);
  box-shadow:var(--shadow-md);
  font-family:var(--font-mono);
  font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper);
  white-space:nowrap;
  animation:float 7s ease-in-out infinite;
}
.chip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 10px var(--signal); flex:none;
}
.chip-1{ top:6%;  left:-4%;  animation-delay:0s;   }
.chip-2{ top:56%; right:-6%; animation-delay:1.4s; }
.chip-3{ bottom:4%; left:8%; animation-delay:2.6s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }

/* --- scroll cue ---------------------------------------------------------- */
.scroll-cue{
  position:absolute; left:50%; bottom:26px; z-index:3;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dark-2);
  opacity:0; animation:hero-in .9s var(--ease-out) 1.15s forwards;
}
.scroll-cue i{
  width:22px; height:34px; border:2px solid var(--line-dark-2);
  border-radius:var(--r-pill); position:relative;
}
.scroll-cue i::after{
  content:""; position:absolute; left:50%; top:7px;
  width:3px; height:7px; margin-left:-1.5px; border-radius:2px;
  background:var(--signal);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%{ opacity:0; transform:translateY(0); } 40%{ opacity:1; } 80%,100%{ opacity:0; transform:translateY(11px); } }

/* Hazard stripe — a workshop cue, and the section divider. */
.hazard{ height:8px; background:var(--hazard); }

/* =============================================================================
   9. BRAND MARQUEE
   ========================================================================== */
.marquee{
  border-block:1px solid var(--line-dark);
  background:var(--asphalt-2);
  padding-block:22px;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:clamp(34px,5vw,68px);
  width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--font-mono);
  font-size:clamp(.82rem,1.5vw,1.02rem);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--chrome-2);
  transition:color var(--t-med) var(--ease);
  white-space:nowrap;
}
.marquee span:hover{ color:var(--signal); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =============================================================================
   10. STATS BAND
   ========================================================================== */
.stats{
  background:var(--grad-signal-flat);
  color:var(--signal-ink);
  padding-block:clamp(38px,5vw,58px);
  position:relative; overflow:hidden;
}
.stats::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.22), transparent 70%);
  pointer-events:none;
}
.stats-grid{
  position:relative;
  width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,3vw,30px);
  text-align:center;
}
.stat{ position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:calc(-1 * clamp(8px,1.5vw,15px)); top:14%; bottom:14%;
  width:1px; background:rgba(26,14,0,.20);
}
.stat-num{
  font-family:var(--font-ui);
  font-size:var(--fs-stat); font-weight:800; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.stat-label{
  margin-top:9px;
  font-family:var(--font-mono);
  font-size:clamp(.58rem,1.1vw,.68rem);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  /* Solid rather than a faded ink: at 72% opacity this dropped to 3.46:1
     against the deep end of the gradient, under the 4.5:1 AA floor for small
     text. Hierarchy is carried by the mono face and letter-spacing instead. */
  color:var(--signal-ink);
}

/* =============================================================================
   11. SERVICES
   ========================================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,280px), 1fr));
  gap:var(--sp-gap);
}

.card{
  position:relative;
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-l);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),
             box-shadow var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease);
}
/* Gradient hairline that lights up on hover. */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-signal);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--t-med) var(--ease);
  pointer-events:none;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card:hover::before{ opacity:1; }

.card-num{
  position:absolute; top:20px; right:24px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; color:var(--line-2);
  transition:color var(--t-med) var(--ease);
}
.card:hover .card-num{ color:var(--signal); }

.card-icon{
  width:52px; height:52px; border-radius:var(--r-m);
  display:grid; place-items:center;
  background:var(--grad-signal-soft);
  border:1px solid rgba(248,128,0,.2);
  color:var(--signal-deep);
  margin-bottom:20px;
  transition:transform var(--t-med) var(--ease-spring), background var(--t-med) var(--ease);
}
.card:hover .card-icon{ transform:scale(1.08) rotate(-6deg); }

.card h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.018em; color:var(--ink); margin-bottom:9px; }
.card p{ color:var(--ink-soft); font-size:.94rem; line-height:1.62; }

/* =============================================================================
   12. TIRE DECODER — the signature functional tool
   ========================================================================== */
.decoder-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}

.decoder-panel{
  background:var(--asphalt-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--shadow-lg);
}

.decoder-form{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.decoder-form label{ flex:1 1 220px; display:grid; gap:9px; }
.decoder-form .lbl{
  font-family:var(--font-mono); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dark-2);
}

.input{
  width:100%; min-height:54px;
  padding:14px 18px;
  background:var(--asphalt);
  border:1.5px solid var(--line-dark-2);
  border-radius:var(--r-s);
  color:var(--paper);
  font-family:var(--font-mono); font-size:1rem; letter-spacing:.06em;
  transition:border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.input::placeholder{ color:#5d626b; letter-spacing:.04em; }
.input:focus{
  outline:none; border-color:var(--signal);
  box-shadow:0 0 0 4px rgba(248,128,0,.16);
}

.decoder-error{
  min-height:22px; margin-top:12px;
  font-size:.85rem; color:#ff8a7a;
}
.decoder-error:empty{ min-height:0; }

.decoder-results{ margin-top:26px; display:grid; gap:2px; }
.res-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(10px);
}
.decoder-results.show .res-row{ animation:res-in .5s var(--ease-out) forwards; }
.decoder-results.show .res-row:nth-child(1){ animation-delay:.04s; }
.decoder-results.show .res-row:nth-child(2){ animation-delay:.10s; }
.decoder-results.show .res-row:nth-child(3){ animation-delay:.16s; }
.decoder-results.show .res-row:nth-child(4){ animation-delay:.22s; }
.decoder-results.show .res-row:nth-child(5){ animation-delay:.28s; }
.decoder-results.show .res-row:nth-child(6){ animation-delay:.34s; }
@keyframes res-in{ to{ opacity:1; transform:translateY(0); } }

.res-key{
  font-family:var(--font-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dark-2);
}
.res-val{ font-weight:700; color:var(--paper); text-align:right; font-size:.98rem; }
.res-val b{ color:var(--signal); }

/* --- the annotated diagram ----------------------------------------------- */
.diagram{ display:grid; place-items:center; gap:18px; }
.diagram svg{ width:100%; max-width:400px; height:auto; }
.diag-wheel{ transform-origin:50% 50%; transition:transform 1.1s var(--ease-out); }
.decoded .diag-wheel{ transform:rotate(360deg); }
.diag-lbl{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; fill:var(--signal);
}
.diag-tick{ stroke:var(--chrome-2); stroke-width:1; stroke-dasharray:3 3; }
.diagram figcaption{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dark-2); text-align:center;
}

/* =============================================================================
   13. INVENTORY
   ========================================================================== */
.inv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,240px), 1fr));
  gap:var(--sp-gap);
}
.inv-card{
  position:relative;
  padding:clamp(24px,3vw,32px);
  border-radius:var(--r-l);
  background:var(--asphalt-2);
  border:1px solid var(--line-dark);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease),
             background-color var(--t-med) var(--ease);
}
.inv-card::after{
  content:""; position:absolute; inset:auto auto -40% -20%;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(248,128,0,.16), transparent 70%);
  opacity:0; transition:opacity var(--t-med) var(--ease);
}
.inv-card:hover{ transform:translateY(-5px); border-color:rgba(248,128,0,.36); background:var(--asphalt-3); }
.inv-card:hover::after{ opacity:1; }

.inv-tag{
  display:inline-block; margin-bottom:16px;
  padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(248,128,0,.12);
  border:1px solid rgba(248,128,0,.28);
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal-glow);
}
.inv-card h3{ font-size:var(--fs-h3); font-weight:700; color:var(--paper); margin-bottom:10px; letter-spacing:-.018em; }
.inv-card p{ color:var(--ink-dark-2); font-size:.93rem; }
.inv-card ul{ margin-top:16px; display:grid; gap:9px; }
.inv-card li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.88rem; color:var(--ink-dark-1);
}
.inv-card li svg{ color:var(--signal); flex:none; margin-top:3px; }

/* =============================================================================
   14. WHY US
   ========================================================================== */
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,250px), 1fr));
  gap:clamp(24px,3.4vw,44px);
}
.why-item{ display:grid; gap:14px; }
.why-num{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; color:var(--signal-deep);
  padding-bottom:12px; border-bottom:2px solid var(--line-2);
  transition:border-color var(--t-med) var(--ease);
}
.why-item:hover .why-num{ border-color:var(--signal); }
.why-item h3{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); letter-spacing:-.018em; }
.why-item p{ color:var(--ink-soft); font-size:.94rem; }

/* =============================================================================
   15. TREAD SAFETY
   ========================================================================== */
.tread-wrap{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4.4vw,60px); align-items:center;
}
.tread-visual{
  background:var(--asphalt-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);
  display:grid; place-items:center;
}
.tread-visual svg{ width:100%; max-width:300px; }
.tread-steps{ display:grid; gap:clamp(18px,2.4vw,26px); }
.tread-step{ display:flex; gap:18px; align-items:flex-start; }
.tread-step .n{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad-signal); color:var(--signal-ink);
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  box-shadow:0 5px 16px rgba(248,128,0,.34);
}
.tread-step h3{ font-size:1.02rem; font-weight:700; color:var(--paper); margin-bottom:5px; }
.tread-step p{ color:var(--ink-dark-2); font-size:.92rem; }

/* =============================================================================
   16. FINANCING
   ========================================================================== */
.fin-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr));
  gap:var(--sp-gap);
}
.fin-card{
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-l);
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease);
}
.fin-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.fin-card .card-icon{ background:var(--grad-signal-soft); }
.fin-card h3{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); margin-bottom:9px; letter-spacing:-.018em; }
.fin-card p{ color:var(--ink-soft); font-size:.94rem; }

/* =============================================================================
   17. REVIEWS CAROUSEL
   ========================================================================== */
.carousel{ position:relative; }
.carousel-viewport{ overflow:hidden; padding:6px; margin:-6px; }
.carousel-track{
  display:flex; gap:var(--sp-gap);
  transition:transform .62s var(--ease-out);
  will-change:transform;
}
.review{
  flex:0 0 auto;
  padding:clamp(26px,3.2vw,36px);
  border-radius:var(--r-l);
  background:var(--paper);
  border:1px solid var(--line);
  display:grid; gap:16px; align-content:start;
  transition:box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.review:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.review-stars{ display:flex; gap:3px; color:var(--signal); }
.review p{ color:var(--ink-soft); font-size:.97rem; line-height:1.68; }
.review footer{ display:flex; align-items:center; gap:13px; margin-top:2px; }
.review-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--grad-signal); color:var(--signal-ink);
  font-weight:800; font-size:.95rem;
}
.review-name{ font-weight:700; color:var(--ink); font-size:.94rem; }
.review-meta{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; }

.carousel-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(26px,3.4vw,38px); }
.car-btn{
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--line-2); color:var(--ink);
  transition:background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
             color var(--t-med) var(--ease), transform var(--t-fast) var(--ease-out);
}
.car-btn:hover{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); transform:scale(1.07); }
.car-btn:active{ transform:scale(.96); }
.car-dots{ display:flex; gap:9px; }
/* .car-dot styling lives in section 25 — it owns both the visible dot and the
   44px hit area, so defining width here would fight it on specificity. */

.reviews-note{
  margin-top:22px; text-align:center;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* =============================================================================
   18. FAQ
   ========================================================================== */
.faq{ max-width:840px; margin-inline:auto; display:grid; gap:12px; }
.faq-item{
  border:1px solid var(--line-dark);
  border-radius:var(--r-m);
  background:var(--asphalt-2);
  overflow:hidden;
  transition:border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.faq-item[data-open="true"]{ border-color:rgba(248,128,0,.4); background:var(--asphalt-3); }

.faq-q{
  width:100%; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(18px,2.4vw,26px);
  text-align:left; font-size:1rem; font-weight:600; color:var(--paper);
  transition:color var(--t-fast) var(--ease);
}
.faq-q:hover{ color:var(--signal); }

.plus{ position:relative; width:18px; height:18px; flex:none; }
.plus::before,.plus::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--signal); border-radius:2px;
  transition:transform var(--t-med) var(--ease-spring);
}
.plus::before{ width:16px; height:2px; margin:-1px 0 0 -8px; }
.plus::after{  width:2px; height:16px; margin:-8px 0 0 -1px; }
.faq-item[data-open="true"] .plus::after{ transform:rotate(90deg) scaleX(0); }

/* Open/closed mechanics live in section 26 — see the note there on why a
   max-height transition is used rather than the 0fr/1fr grid technique. */
.faq-a > div{ overflow:hidden; }
.faq-a p{
  padding:0 clamp(18px,2.4vw,26px) 22px;
  color:var(--ink-dark-2); font-size:.95rem; line-height:1.68;
}

/* =============================================================================
   19. CONTACT & HOURS
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}
.contact-block + .contact-block{ margin-top:clamp(26px,3.4vw,38px); }

.detail{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line-dark); }
.detail-icon{
  width:44px; height:44px; flex:none; border-radius:var(--r-s);
  display:grid; place-items:center;
  background:rgba(248,128,0,.1); border:1px solid rgba(248,128,0,.24);
  color:var(--signal);
}
.detail-k{
  font-family:var(--font-mono); font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dark-2); margin-bottom:4px;
}
.detail-v{ color:var(--paper); font-weight:600; }
.detail-v a:hover{ color:var(--signal); }

.hours-table{ margin-top:14px; border:1px solid var(--line-dark); border-radius:var(--r-m); overflow:hidden; }
.hours-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 18px;
  font-size:.9rem;
  border-bottom:1px solid var(--line-dark);
  transition:background-color var(--t-med) var(--ease);
}
.hours-row:last-child{ border-bottom:0; }
.hours-row .d{ color:var(--ink-dark-2); }
.hours-row span:last-child{ font-family:var(--font-mono); font-size:.84rem; color:var(--ink-dark-1); }
.hours-row.today{ background:rgba(248,128,0,.1); }
.hours-row.today .d{ color:var(--signal); font-weight:700; }
.hours-row.today span:last-child{ color:var(--paper); }

.hours-status{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:8px 15px; border-radius:var(--r-pill);
  background:rgba(248,128,0,.11); border:1px solid rgba(248,128,0,.26);
  font-family:var(--font-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--signal-glow);
}

.map-frame{
  margin-top:clamp(26px,3.4vw,38px);
  border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line-dark);
  filter:grayscale(.4) contrast(1.06);
  transition:filter var(--t-slow) var(--ease);
}
.map-frame:hover{ filter:grayscale(0) contrast(1); }
.map-frame iframe{ display:block; width:100%; height:300px; border:0; }

/* --- quote form ---------------------------------------------------------- */
.quote-form{
  background:var(--asphalt-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--shadow-lg);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:9px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-mono); font-size:.62rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dark-2);
}
.field label .req{ color:var(--signal); }
.field textarea{ resize:vertical; min-height:112px; font-family:var(--font-ui); letter-spacing:0; }
.field select.input{ appearance:none; cursor:pointer; font-family:var(--font-ui); letter-spacing:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f88000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; padding-right:44px; }

.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ margin-top:16px; font-size:.9rem; min-height:22px; }
.form-status.ok{ color:#5fd39a; }
.form-status.err{ color:#ff8a7a; }

.field-error{
  margin:0; font-family:var(--font-mono); font-size:.74rem;
  color:#ff8a7a; letter-spacing:.01em;
}
.input[aria-invalid="true"]{ border-color:#ff8a7a; box-shadow:0 0 0 4px rgba(255,138,122,.14); }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

.form-note{ margin-top:14px; font-size:.8rem; color:var(--ink-faint); line-height:1.6; }

/* =============================================================================
   20. FOOTER
   ========================================================================== */
.footer{ background:var(--asphalt); border-top:1px solid var(--line-dark); padding-top:clamp(48px,6vw,76px); }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(36px,4.6vw,54px);
}
.footer-brand img{ height:52px; width:auto; margin-bottom:18px; }
.footer-brand p{ color:var(--ink-dark-2); font-size:.9rem; max-width:34ch; }

.socials{ display:flex; gap:10px; margin-top:20px; }
.socials a{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-dark-2); color:var(--ink-dark-1);
  transition:background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
             color var(--t-med) var(--ease), transform var(--t-fast) var(--ease-out);
}
.socials a:hover{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); transform:translateY(-3px); }

.footer h3{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper); margin-bottom:18px;
}
.footer-list{ display:grid; gap:11px; }
.footer-list a, .footer-list li{ color:var(--ink-dark-2); font-size:.9rem; transition:color var(--t-fast) var(--ease); }
.footer-list a:hover{ color:var(--signal); }

.footer-cta p{ color:var(--ink-dark-2); font-size:.9rem; margin-bottom:18px; }

.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding-block:24px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.82rem; color:var(--ink-faint);
}

/* =============================================================================
   21. FLOATING ELEMENTS
   ========================================================================== */
.floating{
  position:fixed; right:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px);
  z-index:850; display:grid; gap:12px; justify-items:center;
}
.fab{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease);
}
.fab:hover{ transform:scale(1.09) translateY(-2px); box-shadow:var(--shadow-lg); }
.fab:active{ transform:scale(.96); }
.fab-wa{ background:#25d366; color:#fff; }
.fab-call{ background:var(--grad-signal); color:var(--signal-ink); }

.to-top{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--asphalt-3); color:var(--paper);
  border:1px solid var(--line-dark-2);
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-spring),
             background-color var(--t-med) var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--signal); color:var(--signal-ink); border-color:var(--signal); }

/* --- mobile sticky action bar -------------------------------------------- */
.mobile-bar{
  position:fixed; inset:auto 0 0; z-index:860;
  display:none; grid-template-columns:repeat(3,1fr);
  background:rgba(10,11,13,.96);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  min-height:60px;
  display:grid; place-items:center; gap:4px; padding:9px 6px;
  font-family:var(--font-mono); font-size:.6rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dark-1);
  border-right:1px solid var(--line-dark);
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mobile-bar a:last-child{ border-right:0; }
.mobile-bar a:active{ background:rgba(248,128,0,.14); color:var(--signal); }
.mobile-bar svg{ color:var(--signal); }

/* =============================================================================
   22. SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .82s var(--ease-out), transform .82s var(--ease-out);
  transition-delay:calc(var(--delay,0) * 90ms);
}
.reveal.in{ opacity:1; transform:none; }

/* =============================================================================
   23. RESPONSIVE
   -----------------------------------------------------------------------------
   Written mobile-outward: the grids above already collapse on their own via
   `minmax(min(100%, Npx), 1fr)`, so these rules only handle the places where a
   phone needs a genuinely DIFFERENT layout, not a squeezed desktop one.
   ========================================================================== */

/* --- large desktop: let the hero breathe rather than stretch -------------- */
@media (min-width:1600px){
  :root{ --container: min(1340px, 100% - 80px); }
}

/* --- laptop -------------------------------------------------------------- */
@media (max-width:1180px){
  .hero-inner{ gap:clamp(24px,3.4vw,44px); }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer-cta{ grid-column:1 / -1; }
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width:1024px){
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 44px); }
  .hero-inner{ grid-template-columns:1fr; text-align:left; }
  .hero-visual{ order:-1; max-width:min(400px,74vw); }
  .hero-lead{ max-width:60ch; }
  .scroll-cue{ display:none; }

  .decoder-wrap,
  .tread-wrap,
  .contact-grid{ grid-template-columns:1fr; }
  .diagram{ order:-1; }
  .map-frame iframe{ height:260px; }
}

/* --- collapse the nav ----------------------------------------------------- */
@media (max-width:900px){
  .nav-links, .nav-tel, .nav-cta{ display:none; }
  .menu-btn{ display:flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

/* --- phone ---------------------------------------------------------------- */
@media (max-width:680px){
  :root{ --nav-h:66px; }

  /* Leave room for the sticky action bar so nothing hides behind it. */
  body{ padding-bottom:60px; }
  .mobile-bar{ display:grid; }
  .floating{ bottom:74px; right:14px; }
  .fab{ width:50px; height:50px; }
  .to-top{ width:44px; height:44px; }

  .hero-visual{ max-width:min(320px,68vw); }
  .chip{ font-size:.6rem; padding:9px 13px; }
  .chip-1{ left:-2%; }
  .chip-2{ right:-2%; }
  .chip-3{ left:4%; }

  .hero-actions{ gap:11px; }
  .hero-actions .btn{ flex:1 1 100%; }

  .stats-grid{ grid-template-columns:1fr 1fr; gap:26px 16px; }
  .stat:nth-child(3)::before,
  .stat + .stat:nth-child(odd)::before{ display:none; }

  .form-grid{ grid-template-columns:1fr; }
  .carousel-nav{ gap:12px; }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:8px; }

  /* A tapped card shouldn't lift — that's a mouse idiom. */
  .card:hover, .inv-card:hover, .fin-card:hover, .review:hover{ transform:none; }
}

/* --- small phones (iPhone SE and narrow Android) -------------------------- */
@media (max-width:400px){
  :root{ --container: min(1220px, 100% - 28px); }
  .brand img{ height:34px; }
  .btn{ padding:14px 22px; font-size:.9rem; }
  .stats-grid{ gap:22px 12px; }
  .decoder-form label{ flex:1 1 100%; }
  .mobile-bar a{ font-size:.55rem; letter-spacing:.08em; }
}

/* --- landscape phones: the hero must not demand a full tall viewport ------ */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 28px); padding-bottom:44px; }
  .hero-inner{ grid-template-columns:1fr 1fr; align-items:center; }
  .hero-visual{ order:0; max-width:min(260px,34vw); }
  .scroll-cue{ display:none; }
  .mobile-nav{ max-height:calc(100dvh - var(--nav-h)); }
}

/* --- coarse pointers: no hover-dependent affordances --------------------- */
@media (hover:none){
  .btn::after{ display:none; }
  .map-frame{ filter:none; }
  .card:hover{ box-shadow:none; }

  /* The JS never starts the cursor without a fine pointer, but take the nodes
     out of the layer tree too so touch devices never paint or composite them. */
  .cursor,.cursor-shadow{ display:none !important; }
}

/* =============================================================================
   24. MOTION PREFERENCES
   -----------------------------------------------------------------------------
   Respect the OS setting properly: kill ambient/looping motion entirely and
   make state changes instant, rather than merely shortening durations.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }

  /* Anything that starts hidden and animates in must end up visible. */
  .hero-copy > *,
  .hero-visual,
  .scroll-cue,
  .mobile-nav a,
  .reveal,
  .res-row{ opacity:1 !important; transform:none !important; }
  .reveal-line > i{ transform:none !important; }

  .hero-glow,.hero-sweep,.marquee-track,.chip,
  .loader-tyre .tyre-spin,.hero-tyre .tyre-spin{ animation:none !important; }
  .hero-visual::before{ animation:none !important; }

  /* The custom cursor is pure motion — JS also refuses to start it here. */
  .cursor,.cursor-shadow{ display:none !important; }
}

/* --- print ---------------------------------------------------------------- */
@media print{
  .topbar,.mobile-nav,.floating,.mobile-bar,.loader,.cursor,.cursor-shadow,
  .scroll-progress,.marquee,.scroll-cue{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .section{ padding-block:24px; break-inside:avoid; }
}

/* =============================================================================
   26. TOUCH ERGONOMICS
   -----------------------------------------------------------------------------
   WCAG 2.5.5 and both platform HIGs want a ~44px minimum touch target. Several
   controls here are deliberately small for visual reasons (carousel dots, tight
   footer link lists), so rather than inflating the design we expand the HIT AREA
   with pseudo-elements and min-heights. The layout is unchanged; only the
   invisible box you can tap grows.
   ========================================================================== */
@media (hover:none), (pointer:coarse){

  /* Carousel dots: 9px dot, 44px target centred on it. */
  .car-dots{ gap:2px; }
  .car-dot{ position:relative; }
  .car-dot::before{
    content:'';
    position:absolute; top:50%; left:50%;
    width:44px; height:44px;
    transform:translate(-50%,-50%);
  }

  /* Text links in tight lists: pad vertically without moving the text. */
  .footer-list a,
  .mobile-nav a,
  .detail-v a,
  .footer-bottom a{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  /* Keep the visual rhythm of the list the same as it was on desktop. */
  .footer-list{ gap:0; }

  /* The logo link in the bar. */
  .brand{ min-height:44px; }

  /* Form controls should never be smaller than a fingertip. */
  .quote-form input,
  .quote-form select,
  .quote-form textarea,
  .decoder-form .input{ min-height:48px; }
}

/* =============================================================================
   25. TOUCH TARGET GUARANTEES
   -----------------------------------------------------------------------------
   Audited every interactive element at 390px and fixed the ones that fell
   under the 44x44 minimum. Where enlarging the visible element would have hurt
   the layout (the carousel dots), the HIT AREA is expanded instead of the dot.
   ========================================================================== */

/* The logo is a link, so it needs a real tap target of its own. */
.brand{ min-height:44px; align-items:center; }

/* Nav links: padding alone left them at ~40px. */
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; }

/* Footer link lists: 16px text is a 16px target without this. */
.footer-list{ gap:2px; }
.footer-list a,
.footer-list li{ display:flex; align-items:center; min-height:44px; min-width:44px; }

/* Inline phone/email links inside contact details. */
.detail-v a{ display:inline-flex; align-items:center; min-height:44px; }

/* Carousel dots: the BUTTON is a full 44x44 target and the visible dot is
   drawn inside it, rather than shrinking the button to the size of the dot. */
.car-dot{
  position:relative;
  width:44px; height:44px;
  background:none; border-radius:0;
  display:grid; place-items:center;
  transition:none;
}
.car-dot::after{
  content:""; display:block;
  width:9px; height:9px; border-radius:50%;
  background:var(--line-2);
  transition:background-color var(--t-med) var(--ease), width var(--t-med) var(--ease-out);
}
.car-dot.active::after{ background:var(--signal); width:26px; border-radius:var(--r-pill); }
.car-dots{ gap:0; }

/* Skip link needs a proper target once it is focused. */
.skip-link{ min-height:44px; display:inline-flex; align-items:center; }

/* =============================================================================
   26. COMPATIBILITY & BUG FIXES
   -----------------------------------------------------------------------------
   Everything below is a correction, not a design change. Each block records
   what was wrong and which engine it affected, so none of it gets "tidied
   away" later by someone who assumes it is redundant.
   ========================================================================== */

/* --- [hidden] must win over a display rule -------------------------------
   .res-row sets display:flex, which overrides the browser's default
   [hidden]{display:none}. Optional decoder rows stayed visible as a result. */
[hidden]{ display:none !important; }

/* --- decoder hint (restored from the original build) --------------------- */
.decoder-hint{
  margin:12px 0 0;
  font-family:var(--font-mono);
  font-size:.7rem; line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink-dark-2);
}

/* --- iOS: native select chrome ------------------------------------------
   `appearance:none` alone is ignored by Safari, so the custom arrow appeared
   alongside iOS's own control. -webkit- prefix is still required. */
.field select.input,
select.input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* --- iOS: inputs keep native rounding and inner shadow -------------------
   Safari applies its own border-radius and inset shadow to text inputs and
   textareas unless appearance is reset. */
.input,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
  -webkit-appearance:none;
  appearance:none;
  border-radius:var(--r-s);   /* restated: resetting appearance drops it */
}

/* --- iOS: auto-zoom on focus --------------------------------------------
   Safari zooms the whole page when a focused control's text is under 16px.
   Every control is pinned to exactly 16px on coarse pointers. */
@media (max-width:900px){
  .input,
  input, select, textarea{ font-size:16px; }
}

/* --- iOS: grey tap flash -------------------------------------------------
   Safari paints a translucent grey box on tap. Our own :active states already
   give feedback, so the default is suppressed. */
html{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* --- iOS: overflow containment ------------------------------------------
   overflow-x:hidden on <body> alone does not reliably contain iOS Safari;
   the rule has to be on the root element too. */
html{ overflow-x:hidden; width:100%; }

/* --- viewport units on older iOS ----------------------------------------
   svh/dvh landed in Safari 15.4. On iOS 15.3 and earlier the declaration is
   invalid, so the hero would be left with no min-height at all. The vh value
   is stated first as the fallback and only overridden where svh is supported. */
.hero{ min-height:100vh; }
@supports (min-height:100svh){
  .hero{ min-height:100svh; }
}

.mobile-nav{ max-height:calc(100vh - var(--nav-h)); }
@supports (max-height:100dvh){
  .mobile-nav{ max-height:calc(100dvh - var(--nav-h)); }
}

/* --- iOS: momentum scrolling inside the drawer --------------------------- */
.mobile-nav{ -webkit-overflow-scrolling:touch; }

/* --- FAQ accordion: one technique for every engine -----------------------
   The 0fr -> 1fr grid transition only animates in Safari 17+, so on iOS 16 and
   earlier the panel snapped open. Rather than branch on a browser-sniffing
   hack, the accordion now uses a max-height transition everywhere: it behaves
   identically in Chrome, Edge, Firefox and Safari, old and new.

   The grid technique is explicitly unset, because grid-template-rows:0fr would
   otherwise keep the row collapsed no matter what max-height allows. */
.faq-a{
  display:block;
  grid-template-rows:none;
  max-height:0;
  overflow:hidden;
  transition:max-height .42s var(--ease-out);
}
/* Cap comfortably above the tallest answer; only the ceiling is a guess,
   the resting height is still driven by the content. */
.faq-item[data-open="true"] .faq-a{ max-height:40rem; }

/* --- aspect-ratio fallback ----------------------------------------------
   Safari 14 and earlier ignore aspect-ratio. Without a height the hero visual
   collapses (the same class of bug as the 0x0 regression fixed earlier). */
@supports not (aspect-ratio:1){
  .hero-visual{ min-height:min(560px,74vw); }
  .tread-visual svg{ min-height:220px; }
}

/* --- SVG sizing in Safari -----------------------------------------------
   An <svg> with only a viewBox can resolve to zero height inside a flex or
   grid item in WebKit. Being explicit costs nothing and removes the risk. */
.hero-tyre svg,
.loader-tyre svg,
.cursor-tyre svg,
.diagram svg,
.tread-visual svg{ display:block; width:100%; height:auto; }

/* --- backdrop-filter fallback -------------------------------------------
   If the blur is unsupported (or disabled for battery), the translucent
   surfaces must not become unreadable. Opaque backgrounds are the default and
   the translucent version is only applied where blur actually works. */
.topbar.scrolled{ background:rgba(10,11,13,.97); }
.mobile-nav{ background:rgba(10,11,13,.99); }
.mobile-bar{ background:rgba(10,11,13,.99); }
.chip{ background:rgba(18,20,25,.95); }

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar.scrolled{ background:rgba(10,11,13,.82); }
  .mobile-nav{ background:rgba(10,11,13,.97); }
  .mobile-bar{ background:rgba(10,11,13,.96); }
  .chip{ background:rgba(18,20,25,.86); }
}

/* --- iOS: the sticky bar covers the field you are typing in --------------
   When the software keyboard opens, a bottom-fixed bar sits on top of the
   form. JS adds .kb-open while a field has focus. */
body.kb-open .mobile-bar,
body.kb-open .floating{
  opacity:0;
  pointer-events:none;
  transform:translateY(100%);
}
.mobile-bar,.floating{
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

/* --- safe-area padding on notched iPhones -------------------------------- */
@supports (padding:max(0px)){
  .mobile-bar{ padding-bottom:max(env(safe-area-inset-bottom), 0px); }
  .floating{ right:max(env(safe-area-inset-right), 14px); }
  .container{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
}
@media (max-width:680px){
  body{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
}

/* --- carousel: let vertical scrolling through -----------------------------
   Without this, iOS can capture a vertical drag started on a review card. */
.carousel-viewport{ touch-action:pan-y; }

/* --- focus ring: progressive enhancement, not feature detection ----------
   An earlier attempt used @supports not selector(:focus-visible), which can
   never fire: Safari shipped selector() and :focus-visible in the same
   release, so any engine lacking the pseudo-class also fails to parse the
   test and skips the fallback.

   The three rules below are ordered so the right thing happens either way:
     1. every engine draws a ring on :focus
     2. engines that understand :focus-visible remove it for mouse clicks
        (older engines drop rule 2 as an unparseable selector and simply keep
        the always-on ring, which is the safe direction to fail in)
     3. and re-apply it for keyboard focus */
:focus{
  outline:3px solid var(--signal);
  outline-offset:3px;
}
:focus:not(:focus-visible){
  outline:none;
}
:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}

/* --- Firefox: hide the inner focus border on buttons --------------------- */
button::-moz-focus-inner{ border:0; padding:0; }

/* --- reduce compositor memory on mobile ---------------------------------
   will-change promotes a layer permanently. On phones that is wasted memory
   for elements whose animation is disabled anyway. */
@media (max-width:900px){
  .carousel-track{ will-change:auto; }
}

/* --- viewport-height fallback for engines without svh --------------------
   script.js publishes --vh-fallback and sets .no-svh when svh is unavailable. */
.no-svh .hero{ min-height:var(--vh-fallback, 100vh); }
.no-svh .mobile-nav{ max-height:calc(var(--vh-fallback, 100vh) - var(--nav-h)); }

/* --- font swap ------------------------------------------------------------
   Until the real faces load, nudge the fallback's metrics closer to Inter so
   the swap doesn't visibly reflow headings. */
html:not(.fonts-ready) .h2,
html:not(.fonts-ready) .hero h1{ letter-spacing:-.02em; }

/* =============================================================================
   27. LOADER MUST NEVER TRAP THE VISITOR
   -----------------------------------------------------------------------------
   Found on a real iPhone: the site was opened through iOS Quick Look (the Files
   / WhatsApp document preview), which renders HTML with scripting disabled. The
   loading overlay is dismissed by JavaScript, so it stayed at 00% for ever and
   the site was completely unreachable.

   The overlay is a progressive enhancement and is now treated as one. Three
   independent nets, any one of which is enough:

     1. <noscript> in the document head removes it outright  (scripting off)
     2. the CSS animation below retires it after 2.6s        (script broken)
     3. an ES5 escape hatch in the head clears it at 4s      (bundle failed)

   JavaScript still dismisses it in about a second when everything is healthy;
   these only decide what happens when that does not run.
   ========================================================================== */

.loader{
  /* Retire on a timer that needs no scripting at all. */
  animation:loader-failsafe .55s var(--ease) 2.6s forwards;
  /* Stop touch-scrolling the page underneath while the overlay is up, rather
     than locking <body>, which only JavaScript could then unlock. */
  touch-action:none;
}

/* pointer-events is a discrete property, so it flips partway through the
   keyframe — which is all that is needed to stop the faded overlay from
   swallowing taps. */
@keyframes loader-failsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

.loader.done{ pointer-events:none; }

/* Reduced motion: no animation runs, so the overlay is never shown at all —
   the JS path calls finish() immediately and this covers the scripting-off
   case for the same visitors. */
@media (prefers-reduced-motion:reduce){
  .loader{ display:none !important; }
  body.is-loading{ overflow:visible !important; }
}

/* =============================================================================
   28. NEW PAGES — About & Blog
   -----------------------------------------------------------------------------
   These styles are ADDITIVE. They introduce no new colours, fonts or spacing
   primitives — everything below is composed from the tokens defined in
   section 1, so the existing pages are untouched and the new pages inherit the
   exact look and feel.
   ========================================================================== */

/* Page header band, reused by About and every blog page. Sits below the fixed
   nav and sets the dark tone the rest of the site opens with. */
.page-head{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(40px,7vw,80px));
  padding-bottom:clamp(36px,5vw,60px);
  background:var(--asphalt);
  overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 78% 0%, rgba(248,128,0,.12), transparent 70%);
}
.page-head .container{ position:relative; }
.page-head h1{
  font-size:var(--fs-h2);
  font-weight:800; letter-spacing:-.028em; line-height:1.05;
  color:var(--paper); margin-bottom:14px; text-wrap:balance;
}
.page-head p{ color:var(--ink-dark-2); font-size:var(--fs-lead); max-width:60ch; }

/* --- breadcrumbs --------------------------------------------------------- */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:20px;
}
.breadcrumb a{ color:var(--ink-dark-2); transition:color var(--t-fast) var(--ease); }
.breadcrumb a:hover{ color:var(--signal); }
.breadcrumb span[aria-current]{ color:var(--signal); }
.breadcrumb .sep{ color:var(--ink-faint); opacity:.6; }

/* --- About page ---------------------------------------------------------- */
.about-intro{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4.4vw,64px); align-items:center; }
.about-intro p{ color:var(--ink-soft); font-size:var(--fs-lead); line-height:1.7; }
.about-intro p + p{ margin-top:16px; }
.section-light .about-intro p{ color:var(--ink-soft); }

.about-figure{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--asphalt-2); border:1px solid var(--line-dark);
  aspect-ratio:4/3; display:grid; place-items:center;
}
.about-figure svg{ width:70%; height:auto; }
.about-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mission / Vision pair */
.mv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--sp-gap); }
.mv-card{
  padding:clamp(26px,3.2vw,38px); border-radius:var(--r-l);
  background:var(--asphalt-2); border:1px solid var(--line-dark);
}
.mv-card .card-icon{ margin-bottom:18px; }
.mv-card h2{ font-size:var(--fs-h3); font-weight:700; color:var(--paper); margin-bottom:10px; letter-spacing:-.018em; }
.mv-card p{ color:var(--ink-dark-2); font-size:.96rem; line-height:1.65; }

/* Values / highlights list */
.value-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(22px,3vw,40px); }
.value-item{ display:grid; gap:12px; }
.value-item .card-icon{ width:46px; height:46px; }
.value-item h3{ font-size:1.05rem; font-weight:700; color:var(--ink); letter-spacing:-.015em; }
.section-dark .value-item h3{ color:var(--paper); }
.value-item p{ color:var(--ink-soft); font-size:.93rem; line-height:1.6; }
.section-dark .value-item p{ color:var(--ink-dark-2); }

/* --- shared CTA band (About + article ends) ------------------------------ */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--grad-signal-flat); color:var(--signal-ink);
  border-radius:var(--r-xl);
  padding:clamp(32px,4.4vw,56px);
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.22), transparent 70%);
}
.cta-band > *{ position:relative; }
.cta-band h2{ font-size:var(--fs-h2); font-weight:800; letter-spacing:-.025em; margin-bottom:12px; }
.cta-band p{ font-size:var(--fs-lead); max-width:52ch; margin:0 auto 26px; color:rgba(26,14,0,.82); }
.cta-band .btn{ background:var(--asphalt); color:var(--paper); }
.cta-band .btn:hover{ background:#000; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* --- blog index ---------------------------------------------------------- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:clamp(20px,3vw,32px); }
.post-card{
  display:flex; flex-direction:column;
  border-radius:var(--r-l); overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.post-thumb{ aspect-ratio:16/9; position:relative; overflow:hidden; }
.post-thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.post-body{ padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:10px; flex:1; }
.post-tag{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal-deep);
}
.post-card h2, .post-card h3{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); letter-spacing:-.018em; line-height:1.25; }
.post-card p{ color:var(--ink-soft); font-size:.93rem; line-height:1.6; flex:1; }
.post-meta{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.post-more{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--signal-deep); margin-top:2px; }
.post-card:hover .post-more{ gap:11px; }
.post-more svg{ transition:transform var(--t-med) var(--ease-out); }
.post-card:hover .post-more svg{ transform:translateX(3px); }

/* --- article (single blog post) ------------------------------------------ */
.article{ max-width:760px; margin-inline:auto; }
.article-hero{ aspect-ratio:21/9; border-radius:var(--r-l); overflow:hidden; margin-bottom:clamp(28px,4vw,44px); position:relative; }
.article-hero svg{ position:absolute; inset:0; width:100%; height:100%; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:24px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.article-meta .post-tag{ color:var(--signal-deep); }

.prose{ color:var(--ink-soft); font-size:1.04rem; line-height:1.75; }
.section-light .prose{ color:#3d4148; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:clamp(1.35rem,1.1rem+1vw,1.75rem); font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:1.8em; line-height:1.2; }
.prose h3{ font-size:clamp(1.1rem,1rem+.5vw,1.3rem); font-weight:700; letter-spacing:-.015em; color:var(--ink); margin-top:1.5em; }
.prose p{ text-wrap:pretty; }
.prose ul, .prose ol{ padding-left:1.3em; display:grid; gap:.5em; }
.prose li{ list-style:disc; }
.prose ol li{ list-style:decimal; }
.prose li::marker{ color:var(--signal-deep); }
.prose a{ color:var(--signal-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--signal); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose blockquote{
  border-left:3px solid var(--signal);
  padding:8px 0 8px 20px; margin-left:0;
  font-size:1.1rem; color:var(--ink); font-style:italic;
}
.prose .callout{
  background:var(--grad-signal-soft);
  border:1px solid rgba(248,128,0,.24);
  border-radius:var(--r-m); padding:18px 22px;
  font-size:.98rem; color:var(--ink);
}
.prose .callout strong{ color:var(--signal-deep); }

/* --- related articles ---------------------------------------------------- */
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--sp-gap); }

/* --- responsive tweaks for the new pages --------------------------------- */
@media (max-width:820px){
  .about-intro{ grid-template-columns:1fr; }
  .about-figure{ order:-1; aspect-ratio:16/9; }
}

/* =============================================================================
   29. SOLID NAV ON SUB-PAGES
   -----------------------------------------------------------------------------
   The navbar is intentionally transparent at rest and only gains its dark,
   blurred background once you scroll. That works on the home page because it
   opens over the dark hero — but About and the blog pages open with a LIGHT
   section directly under the fixed navbar, so the transparent bar let the light
   background (and near-invisible light nav links) show through.

   Sub-pages carry `class="page-solid-nav"` on <body>. This gives their navbar
   the exact scrolled appearance from the start, so it looks identical to the
   home navbar in its normal state. The home page never gets this class, so it
   is completely unaffected.
   ========================================================================== */
body.page-solid-nav .topbar{
  background:rgba(10,11,13,.97);
  border-bottom-color:var(--line-dark);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.page-solid-nav .topbar{
    background:rgba(10,11,13,.82);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
  }
}
/* Its scrolled state matches the home page exactly (adds shadow + shrinks). */
body.page-solid-nav .topbar.scrolled{
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}

/* =============================================================================
   30. TIRE PRODUCT FINDER
   -----------------------------------------------------------------------------
   Additive: the finder appears BELOW the existing decoder results when a valid
   size is entered. It reuses the site's tokens, card treatment, buttons and
   reveal animation, so it reads as part of the same design language — no new
   colours, fonts or spacing primitives are introduced.
   ========================================================================== */
.finder{
  margin-top:clamp(28px,3.6vw,44px);
  /* hidden until a search runs; [hidden] handles the actual display:none */
}
.finder-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px 20px; margin-bottom:20px;
}
.finder-head h3{
  font-size:var(--fs-h3); font-weight:700; letter-spacing:-.018em; color:var(--paper);
}
.finder-count{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dark-2);
}
.finder-count b{ color:var(--signal); }

.finder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,260px), 1fr));
  gap:var(--sp-gap);
}

/* One product card. Mirrors .inv-card / .card treatment already in the site. */
.tyre-card{
  display:flex; flex-direction:column;
  border-radius:var(--r-l);
  background:var(--asphalt-2);
  border:1px solid var(--line-dark);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),
             border-color var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease);
}
.tyre-card:hover{
  transform:translateY(-5px);
  border-color:rgba(248,128,0,.36);
  box-shadow:var(--shadow-md);
}

.tyre-thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--asphalt-3);
}
.tyre-thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.tyre-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.tyre-badge.in-stock{ background:rgba(95,211,154,.16); color:#7ee0aa; border:1px solid rgba(95,211,154,.32); }
.tyre-badge.low-stock{ background:rgba(255,182,30,.16); color:var(--signal-glow); border:1px solid rgba(255,182,30,.32); }
.tyre-badge.order-in{ background:rgba(138,146,158,.16); color:var(--chrome); border:1px solid rgba(138,146,158,.32); }
.tyre-badge.used{ position:static; margin-left:8px; background:rgba(201,206,214,.12); color:var(--chrome); border:1px solid var(--line-dark-2); }

.tyre-body{ padding:clamp(18px,2.4vw,24px); display:flex; flex-direction:column; gap:8px; flex:1; }
.tyre-brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal);
}
.tyre-model{ font-size:1.02rem; font-weight:700; color:var(--paper); letter-spacing:-.015em; line-height:1.25; }
.tyre-spec{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-dark-2);
}
.tyre-desc{ font-size:.85rem; line-height:1.55; color:var(--ink-dark-2); flex:1; }

.tyre-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:4px; }
.tyre-price{ display:flex; flex-direction:column; gap:2px; }
.tyre-price .amt{ font-size:1.35rem; font-weight:800; color:var(--paper); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.tyre-price .per{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

.tyre-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.tyre-actions .btn{ min-height:44px; padding:11px 14px; font-size:.82rem; }
.tyre-actions .btn svg{ width:15px; height:15px; }

/* No-match state — same card grammar, centred message + two actions. */
.finder-empty{
  text-align:center;
  padding:clamp(28px,4vw,44px);
  border-radius:var(--r-l);
  background:var(--asphalt-2);
  border:1px dashed var(--line-dark-2);
}
.finder-empty svg{ color:var(--ink-faint); margin:0 auto 14px; }
.finder-empty h3{ font-size:var(--fs-h3); font-weight:700; color:var(--paper); margin-bottom:8px; }
.finder-empty p{ color:var(--ink-dark-2); font-size:.94rem; max-width:44ch; margin:0 auto 22px; }
.finder-empty .cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Loading + error states */
.finder-status{
  padding:clamp(24px,3vw,36px); text-align:center;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  color:var(--ink-dark-2);
}
.finder-spinner{
  width:34px; height:34px; margin:0 auto 16px;
  border:3px solid var(--line-dark-2); border-top-color:var(--signal);
  border-radius:50%;
  animation:finder-spin .8s linear infinite;
}
@keyframes finder-spin{ to{ transform:rotate(360deg); } }

/* Staggered reveal for cards, reusing the site's reveal feel. */
.finder-grid .tyre-card{
  opacity:0; transform:translateY(16px);
  animation:tyre-in .5s var(--ease-out) forwards;
}
.finder-grid .tyre-card:nth-child(1){ animation-delay:.02s; }
.finder-grid .tyre-card:nth-child(2){ animation-delay:.08s; }
.finder-grid .tyre-card:nth-child(3){ animation-delay:.14s; }
.finder-grid .tyre-card:nth-child(4){ animation-delay:.20s; }
.finder-grid .tyre-card:nth-child(5){ animation-delay:.26s; }
.finder-grid .tyre-card:nth-child(n+6){ animation-delay:.32s; }
@keyframes tyre-in{ to{ opacity:1; transform:none; } }

/* A quote form that has been prefilled from a tire gets a subtle marker so the
   customer sees what they are quoting, without any layout change. */
.quote-selection{
  display:none;
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:var(--r-m);
  background:var(--grad-signal-soft);
  border:1px solid rgba(248,128,0,.28);
  font-size:.88rem; color:var(--paper);
}
.quote-selection.show{ display:block; }
.quote-selection b{ color:var(--signal-glow); }
.quote-selection .clear{
  float:right; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dark-2);
  text-decoration:underline; cursor:pointer; background:none; border:0;
}
.quote-selection .clear:hover{ color:var(--signal); }

@media (prefers-reduced-motion:reduce){
  .finder-grid .tyre-card{ opacity:1 !important; transform:none !important; animation:none !important; }
  .finder-spinner{ animation-duration:1.2s; }
}

@media (max-width:680px){
  .tyre-actions{ grid-template-columns:1fr 1fr; }
}

/* =============================================================================
   31. REAL SHOP PHOTOGRAPHY
   -----------------------------------------------------------------------------
   Real photos of the shop, integrated as subtle section backgrounds behind the
   EXISTING content. Every photo sits under a strong dark gradient built from
   the site's own asphalt tokens, so the established white/orange text keeps its
   contrast and the black/orange identity is untouched. No layout, type, or
   colour changes — the photo only replaces a flat background fill.
   ========================================================================== */

/* Shared: a section that carries a background photo. The ::before layer holds
   the image + overlay so it always sits BEHIND .container content. */
.has-photo{ position:relative; isolation:isolate; }
.has-photo > .container{ position:relative; z-index:1; }
.has-photo::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.88) 55%, rgba(10,11,13,.96) 100%),
    var(--photo);
  background-size:cover;
  background-position:var(--photo-pos, center);
  background-repeat:no-repeat;
  /* A hair of warmth so the photo sits in the brand world, not cold grey. */
  box-shadow:inset 0 0 240px rgba(224,85,0,.10);
}
/* On light sections the overlay flips to keep dark text readable is NOT needed —
   we only put photos on dark sections, where the existing text is already light. */

/* Section-specific images + focal points. Responsive: the browser picks the
   file via image-set(), and a plain url() fallback covers older engines. */
#inventory.has-photo::before{
  --photo: image-set(
    url("assets/photos/inventory-600.webp") 1x,
    url("assets/photos/inventory-765.webp") 2x);
  --photo: -webkit-image-set(
    url("assets/photos/inventory-600.webp") 1x,
    url("assets/photos/inventory-765.webp") 2x);
}
#contact.has-photo::before{
  --photo: image-set(
    url("assets/photos/contact-600.webp") 1x,
    url("assets/photos/contact-765.webp") 2x);
  --photo: -webkit-image-set(
    url("assets/photos/contact-600.webp") 1x,
    url("assets/photos/contact-765.webp") 2x);
}

/* Fallback for engines without image-set: a plain background-image. */
@supports not (background-image: image-set(url("x") 1x)){
  #inventory.has-photo::before{ background-image:
    linear-gradient(180deg, rgba(10,11,13,.82), rgba(10,11,13,.96)),
    url("assets/photos/inventory-765.webp"); }
  #contact.has-photo::before{ background-image:
    linear-gradient(180deg, rgba(10,11,13,.82), rgba(10,11,13,.96)),
    url("assets/photos/contact-765.webp"); }
}

/* Respect data-saver / reduced-motion users: photos are static (no parallax),
   so nothing extra is needed, but we keep them from ever animating. */
.has-photo::before{ will-change:auto; }

/* --- hero: real photo backdrop -------------------------------------------
   A real shot of a customer car on fresh wheels, sitting FAR back behind the
   existing glow, grid, sweep and the signature spinning tire. It is heavily
   darkened so none of the approved hero elements lose prominence — it only adds
   a touch of authentic depth where there was flat asphalt before. */
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.80) 40%, rgba(10,11,13,.94) 100%),
    linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.35) 100%),
    image-set(url("assets/photos/hero-960.webp") 1x, url("assets/photos/hero-1360.webp") 2x);
  background-image:
    linear-gradient(180deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.80) 40%, rgba(10,11,13,.94) 100%),
    linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.35) 100%),
    -webkit-image-set(url("assets/photos/hero-960.webp") 1x, url("assets/photos/hero-1360.webp") 2x);
  background-size:cover; background-position:center right; background-repeat:no-repeat;
}
@supports not (background-image: image-set(url("x") 1x)){
  .hero-photo{ background-image:
    linear-gradient(180deg, rgba(10,11,13,.86), rgba(10,11,13,.94)),
    linear-gradient(90deg, rgba(10,11,13,.92), rgba(10,11,13,.35)),
    url("assets/photos/hero-1360.webp"); }
}
/* The existing ambient layers already sit above this (they appear later in the
   DOM and the copy/visual carry their own stacking); confirm the copy stays on
   top regardless of engine. */
.hero-inner{ position:relative; z-index:2; }
/* On small screens the car photo reads as noise behind dense text, so fade it
   further and shift focus so the vehicle (not empty asphalt) shows. */
@media (max-width:760px){
  .hero-photo{ background-position:center; }
  .hero-photo::after{
    content:""; position:absolute; inset:0;
    background:rgba(10,11,13,.32);
  }
}

/* About page service list — reuses the site's check-list pattern (orange tick +
   label) so it matches the existing inventory-card lists. Additive only. */
.svc-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap:10px 20px;
  margin:16px 0 20px;
}
.svc-list li{
  display:flex; align-items:flex-start; gap:10px;
  color:var(--ink-dark-2); font-size:.95rem; line-height:1.5;
}
.svc-list li svg{ color:var(--signal); flex:none; margin-top:3px; }
.svc-list li span{ min-width:0; }

/* About page "Proudly serving Houston" prose block — readable measure + spacing
   consistent with the site's body copy. Additive only. */
.about-prose{ max-width:70ch; }
.about-prose p{ color:var(--ink); font-size:1.02rem; line-height:1.7; }
.about-prose p + p{ margin-top:1em; }
.section-light .about-prose p{ color:var(--ink); }