/* ═══════════════════════════════════════════════════════════════
   Abby Tires & Auto Repair — main stylesheet

   Dark cinematic system: a carbon stage lit by one amber signal and
   one cold rim-light, brushed-metal accents, precise hairlines.
   No external fonts, no external requests, no frameworks.

   Reading order
     1  tokens            9  wheel room
     2  base + utilities 10  vehicle showcase
     3  surfaces         11  tire cards
     4  buttons          12  services
     5  nav + drawer     13  pricing
     6  preloader        14  financing
     7  hero             15  proof
     8  quick quote      16  locations / booking / faq / footer
                         17  legal pages
                         18  responsive + reduced motion
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. tokens ──────────────────────────────────────────────── */
:root{
  /* Stage. Deliberately grey rather than black: the amber signal and the chrome
     wheels read stronger against a neutral dark than against a void, and large
     areas of near-black bloom badly on OLED phones. Each step is a real value
     apart so a panel on a panel still separates. */
  --ink:#181B20;
  --carbon:#1E2228;
  --panel:#252A32;
  --panel-2:#2D333C;
  --raise:#363D47;

  /* hairlines. --edge is the 1px inner highlight that sells a raised surface */
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.17);
  --edge:rgba(255,255,255,.08);

  /* type. --txt-3 sits at 5.8:1 on the stage — the old value failed AA */
  --txt:#EEF1F6;
  --txt-2:#A3ACBB;
  --txt-3:#818B9A;

  /* signal */
  --amber:#FF7A18;
  --amber-2:#FFB53C;
  --amber-3:#FFD9A8;
  --amber-dim:rgba(255,122,24,.16);
  --ice:#7FB6FF;

  --grad-amber:linear-gradient(135deg,#FFC862 0%,#FF7A18 55%,#E05500 100%);
  --grad-chrome:linear-gradient(160deg,#F6F9FD 0%,#9AA5B5 26%,#EDF1F7 50%,#727C92 74%,#DCE3EC 100%);
  --grad-steel:linear-gradient(180deg,#FFFFFF 0%,#C7CFDB 40%,#8A94A5 100%);

  /* geometry */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:32px; --r-2xl:42px;

  /* elevation */
  --e1:0 2px 6px rgba(0,0,0,.4);
  --e2:0 18px 40px -22px rgba(0,0,0,.9);
  --e3:0 40px 90px -40px rgba(0,0,0,.95);
  --glow:0 0 60px -12px rgba(255,122,24,.55);

  --f:"Segoe UI Variable Text","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --f-d:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --f-s:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --f-m:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;

  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(5rem,11vw,10rem);
  --wrap:1280px;
  --navh:78px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-soft:cubic-bezier(.2,.7,.2,1);
}

/* ── 2. base + utilities ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh) + 12px);
  background:var(--ink);
}
body{
  margin:0;background:transparent;color:var(--txt);
  font:400 clamp(.95rem,.9rem + .2vw,1.0625rem)/1.65 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Ambient light pools, fixed so they behave like studio lamps rather than
   scrolling wallpaper. z-index -1 keeps them above the html canvas colour and
   behind every in-flow element. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 10% -8%,rgba(255,122,24,.10),transparent 62%),
    radial-gradient(1000px 700px at 102% 8%,rgba(120,160,255,.05),transparent 60%),
    radial-gradient(900px 900px at 46% 108%,rgba(255,122,24,.07),transparent 58%);
}
/* One film grain for the whole page instead of per-section. Below the nav's
   z-index so chrome stays clean, above the content so nothing looks plastic. */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.3;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--amber);color:#0A0A0A}

:focus-visible{outline:2px solid var(--amber-2);outline-offset:3px;border-radius:4px}

/* tabular figures everywhere a number is meant to be read as a number */
.count,.price b,.plist b,.stats b,.calc__amt output,.calc__res b,.trust__i b,
.loader__num,.wr__spec dd,.wr__price b,.foot__hrs b,.hours td{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

@supports (scrollbar-color:auto){
  html{scrollbar-color:#2A3038 transparent;scrollbar-width:thin}
}

.skip{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--amber);color:#000;
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600;transition:top .2s}
.skip:focus{top:1rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
section{position:relative}

.kicker{
  font:600 .72rem/1 var(--f);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-2);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.kicker::after{content:"";flex:0 0 46px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent)}

.h1{
  font-family:var(--f-d);font-weight:800;
  font-size:clamp(2.2rem,1.2rem + 4.4vw,4.6rem);line-height:.94;
  letter-spacing:-.038em;text-transform:uppercase;margin:0 0 1.1rem;
  text-wrap:balance;
}
.h1 i{
  display:inline-block;font-family:var(--f-s);font-style:italic;font-weight:400;
  text-transform:lowercase;letter-spacing:-.02em;
  background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.h2{font-family:var(--f-d);font-weight:750;font-size:clamp(1.5rem,1.1rem + 1.7vw,2.4rem);
  line-height:1.06;letter-spacing:-.028em;margin:0 0 .7rem;text-wrap:balance}
.h2 i{font-family:var(--f-s);font-style:italic;font-weight:400;color:var(--amber-2)}

.lede{color:var(--txt-2);font-size:clamp(1rem,.95rem + .3vw,1.16rem);max-width:56ch;margin:0;
  text-wrap:pretty}
.shead{margin-bottom:clamp(2.5rem,5vw,4.5rem);max-width:70ch}

.stars{color:var(--amber-2);letter-spacing:.12em;font-size:.85em}

/* oversized watermark numeral behind a section */
.ghostnum{
  position:absolute;top:5%;left:-2vw;z-index:0;pointer-events:none;
  font-family:var(--f-d);font-weight:800;font-size:clamp(9rem,26vw,24rem);line-height:.8;
  letter-spacing:-.06em;color:rgba(255,255,255,.03);
  -webkit-text-stroke:1px rgba(255,255,255,.04);
}
.ghostnum--r{left:auto;right:-2vw}

.ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--txt-2);font-size:.94rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}
.ticks--lg li{font-size:1.02rem;color:var(--txt)}

/* image placeholder: blurred LQIP paints instantly, real file fades over */
.ph{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/9);background:#1C1F25}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .7s ease,transform 1.2s var(--ease-soft)}
.ph>img.ready{opacity:1;transform:none}

.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.reveal{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity .85s var(--ease-soft),transform .85s var(--ease-soft);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ── 3. surfaces ────────────────────────────────────────────── */
/* One recipe for every raised panel: graded fill, hairline border, a 1px inner
   highlight along the top edge and a deep contact shadow. Applied through a
   placeholder-ish list rather than a utility class so the markup stays semantic. */
.quote__card,.calc,.book__form,.wr,.build,.loc,.card,.svc,.ptable,.rev,.builds__cta{
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--edge),var(--e2);
}

/* a hairline that catches the light in the middle — used between big sections */
.rule{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 22%,
    rgba(255,180,90,.4) 50%,rgba(255,255,255,.13) 78%,transparent)}

/* pointer-tracked spotlight, driven by --mx/--my from main.js */
.spot{position:relative;isolation:isolate}
.spot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:inherit;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,150,60,.13),transparent 70%);
}
.spot:hover::before{opacity:1}

/* ── 4. buttons ─────────────────────────────────────────────── */
.btn{
  --bx:0px; --by:0px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border:1px solid transparent;border-radius:100px;
  font:650 .93rem/1 var(--f);letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transform:translate3d(var(--bx),var(--by),0);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2),background .25s,
    box-shadow .3s,border-color .25s,color .25s;
}
/* specular sweep — a narrow highlight that crosses the face on hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.45) 50%,transparent 64%);
  transform:translateX(-110%);
}
.btn:hover::after{transform:translateX(110%);transition:transform .85s var(--ease)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--lg{padding:1.08rem 2.1rem;font-size:1rem}
.btn--block{width:100%}

.btn--amber{background:var(--grad-amber);color:#180A00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 34px -12px rgba(255,122,24,.8)}
.btn--amber:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 48px -12px rgba(255,140,40,1)}

.btn--glass{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--txt);
  box-shadow:inset 0 1px 0 var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn--glass:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

.btn--ghost{background:transparent;border-color:var(--line);color:var(--txt-2);
  padding:.72rem 1.15rem;font-size:.88rem}
.btn--ghost:hover{color:var(--txt);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.btn--ghost::after{display:none}

/* ── 5. nav + drawer ────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:80;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(24,27,32,.78);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom-color:var(--line);
  box-shadow:0 18px 40px -32px #000}
.nav__in{width:min(100% - var(--pad)*2,1560px);margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;padding:1.05rem 0;transition:padding .4s}
.nav.stuck .nav__in{padding:.66rem 0}

.brand{display:flex;align-items:center;gap:.75rem;flex:none}
/* real badge logo — a spin would look wrong on a shield, so it lifts instead */
.brand__mark{width:46px;height:46px;flex:none;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.7));
  transition:transform .45s var(--ease),filter .45s,width .4s,height .4s}
.brand:hover .brand__mark{transform:scale(1.07) translateY(-1px);
  filter:drop-shadow(0 5px 16px rgba(255,122,24,.5))}
.nav.stuck .brand__mark{width:40px;height:40px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--f-d);font-weight:800;font-size:1.08rem;letter-spacing:.11em;
  background:var(--grad-steel);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__txt i{font-style:normal;font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--txt-3);margin-top:3px}

.nav__links{display:flex;gap:.15rem;margin-inline:auto;
  padding:.28rem;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 var(--edge)}
.nav__links a{position:relative;padding:.5rem .95rem;font-size:.87rem;color:var(--txt-2);
  border-radius:100px;transition:color .22s,background .22s}
.nav__links a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav__links a.active{color:var(--amber-3);background:rgba(255,122,24,.11)}

.nav__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.nav__progress{height:2px;width:var(--p,0%);background:var(--grad-amber);
  box-shadow:0 0 14px rgba(255,122,24,.85);transition:width .1s linear}

.burger{display:none;width:42px;height:42px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:17px;height:1.5px;background:var(--txt);transition:transform .35s,opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:75;background:rgba(24,27,32,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 2rem;
  perspective:900px}
.drawer[hidden]{display:none}
.drawer__nav{display:grid;gap:.25rem}
.drawer__nav a{display:flex;align-items:baseline;gap:1rem;padding:.7rem 0;
  font-family:var(--f-d);font-weight:750;font-size:clamp(1.6rem,8vw,2.6rem);letter-spacing:-.03em;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translate3d(0,26px,0) rotateX(-28deg);transform-origin:top;
  animation:drwIn .55s var(--ease) forwards;animation-delay:var(--d,0ms)}
.drawer__nav a em{font:600 .68rem/1 var(--f);font-style:normal;color:var(--amber);letter-spacing:.16em}
@keyframes drwIn{to{opacity:1;transform:none}}
.drawer__foot{margin-top:2.4rem;text-align:center}
.drawer__foot p{color:var(--txt-3);font-size:.85rem;margin:.9rem 0 0}

/* ── 6. preloader ───────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:300;background:#15181C;
  display:flex;align-items:flex-end;
  padding:var(--pad) var(--pad) clamp(2rem,6vh,4.5rem);
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.loader__in{width:100%}
.loader__bar{position:relative;height:1px;width:100%;background:rgba(237,232,223,.16);
  margin-bottom:1.15rem}
.loader__bar i{
  position:absolute;inset:0 auto 0 0;display:block;height:1px;width:var(--w,0%);
  background:linear-gradient(90deg,rgba(255,122,24,.75),#EDE8DF 65%);
  box-shadow:0 0 12px rgba(255,180,90,.5);
}
.loader__row{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  color:#EDE8DF;transition:opacity .35s ease}
.loader__brand{font-family:var(--f-s);font-size:clamp(1.35rem,3.4vw,2.5rem);line-height:1;
  letter-spacing:-.01em}
.loader__brand em{font-style:italic;opacity:.62}
.loader__num{font-family:var(--f-d);font-weight:300;font-size:clamp(1.6rem,4.2vw,3rem);line-height:1;
  letter-spacing:-.02em}
.loader.is-done .loader__row{opacity:0}
.loader.is-out{transform:translateY(-100%)}
.loader.is-gone{display:none}
body.is-loading{overflow:hidden}

/* ── 7. hero ────────────────────────────────────────────────── */
.hero{position:relative}
.hero__stage{
  --p:0;
  position:relative;height:100svh;min-height:620px;max-height:1000px;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0}
.layer{position:absolute;inset:0;aspect-ratio:auto}

.layer--covered{
  transform:scale(calc(1 + var(--p) * .14));
  filter:blur(calc(var(--p) * 9px)) brightness(calc(1 - var(--p) * .5));
  opacity:calc(1 - var(--p) * .95);
}
/* revealed layer irises open from the centre — the cloth "blowing off" */
.layer--revealed{
  transform:scale(calc(1.14 - var(--p) * .14));
  -webkit-mask-image:radial-gradient(circle at 50% 56%,
      #000 calc(var(--p) * 92%), transparent calc(var(--p) * 92% + 16%));
  mask-image:radial-gradient(circle at 50% 56%,
      #000 calc(var(--p) * 92%), transparent calc(var(--p) * 92% + 16%));
}

.hero__streaks{position:absolute;inset:-20%;z-index:1;pointer-events:none;
  opacity:calc(.25 + var(--p,0) * .75);transition:opacity .3s}
.hero__streaks i{position:absolute;left:-30%;width:160%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  filter:blur(.6px);opacity:.5}
/* --rot has to be per-streak: the keyframe rewrites transform wholesale, so without
   it every bar would drift to the same angle and the crossing pattern collapses */
.hero__streaks i:nth-child(1){--rot:-13deg;top:22%;animation:sweep 9s ease-in-out infinite}
.hero__streaks i:nth-child(2){--rot:9deg;top:31%;animation:sweep 11s ease-in-out infinite reverse}
.hero__streaks i:nth-child(3){--rot:6deg;top:16%;opacity:.28;animation:sweep 14s ease-in-out infinite}
.hero__streaks i:nth-child(4){--rot:-6deg;top:38%;opacity:.2;animation:sweep 17s ease-in-out infinite reverse}
@keyframes sweep{0%,100%{transform:translateX(-3%) rotate(var(--rot))}
  50%{transform:translateX(3%) rotate(var(--rot))}}

/* the covered-car shot has a bright white cloth right where the copy sits,
   so the vignette carries a directional scrim as well as the edge falloff */
/* Three layers doing three jobs: a directional scrim so the headline has
   something to sit on, a soft iris that keeps the eye on the vehicle, and a
   bottom ramp into the trust bar. Kept light through the middle-right —
   an earlier, heavier mix buried the truck entirely. */
.hero__vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(4,5,8,.94) 0%,rgba(4,5,8,.7) 24%,rgba(4,5,8,.2) 46%,transparent 62%),
    radial-gradient(120% 85% at 56% 46%,transparent 34%,rgba(4,5,8,.36) 72%,rgba(4,5,8,.9) 100%),
    linear-gradient(to bottom,rgba(5,6,10,.72) 0%,transparent 24%,transparent 54%,var(--ink) 100%);
}
.hero__media .grain{z-index:3}

/* rotary reveal dial */
.dial{
  position:absolute;z-index:6;inset:0;display:grid;place-items:center;pointer-events:none;
  opacity:calc(1 - var(--p,0) * .82);
  transition:opacity .5s ease;
}
.dial.done{opacity:0}
.dial.done .dial__knob{pointer-events:none}
/* not rotated: an SVG circle's dash already starts at 3 o'clock and runs clockwise,
   which is exactly where the knob rests at zero progress */
.dial__svg{width:min(72vh,74vw,660px);aspect-ratio:1;overflow:visible}
.dial__track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.dial__arc{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.6;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
  stroke-dasharray:var(--c,1432);stroke-dashoffset:var(--o,1432)}

.dial__knob{
  position:absolute;width:64px;height:64px;padding:0;background:none;border:0;cursor:grab;
  pointer-events:auto;display:grid;place-items:center;touch-action:none;
  transform:translate(var(--kx,0px),var(--ky,0px));
}
.dial__knob:active{cursor:grabbing}
.dial__dot{width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 26px 5px rgba(255,255,255,.65);
  transition:transform .25s}
.dial__knob:hover .dial__dot{transform:scale(1.35)}
.dial__pulse{position:absolute;width:15px;height:15px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.dial.done .dial__pulse,
.dial.auto .dial__pulse{display:none}

.dial__label{
  position:absolute;margin:0;pointer-events:none;white-space:nowrap;
  font:600 .68rem/1 var(--f);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.8);
  transform:translate(var(--lx,0px),var(--ly,0px));
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.dial__label span{display:inline-block;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.dial__txt{display:none}

/* Narrow screens: the rotary arc would sit straight on top of the headline and a
   rotary drag is awkward with a thumb, so the control collapses to a pill that
   fills with amber as it turns. Same reveal, same gesture, no collision. */
.dial.compact .dial__svg,
.dial.compact .dial__label,
.dial.compact .dial__pulse{display:none}
.dial.compact .dial__knob{
  position:absolute;inset:auto auto 1.35rem 50%;
  width:auto;height:auto;padding:.68rem 1.15rem;
  grid-auto-flow:column;align-items:center;gap:.55rem;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.28);border-radius:100px;
  background:linear-gradient(90deg,rgba(255,122,24,.6) calc(var(--p,0) * 100%),rgba(0,0,0,.55) 0);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.9);
}
.dial.compact .dial__dot{width:9px;height:9px;box-shadow:0 0 12px 2px rgba(255,255,255,.7)}
.dial.compact .dial__txt{
  display:inline;font:600 .66rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}

.hero__copy{position:relative;z-index:7;width:min(100% - var(--pad)*2,var(--wrap));
  margin-inline:auto;justify-self:center;align-self:center;pointer-events:none;
  transform:translateY(calc(var(--p,0) * -14px))}
.hero__copy>*{pointer-events:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1.4rem;
  padding:.42rem .95rem;border:1px solid var(--line-2);border-radius:100px;
  background:rgba(0,0,0,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 var(--edge);
  font-size:.8rem;color:var(--txt-2)}
.eyebrow b{color:var(--txt)}

/* Sized for the wordmark it now carries: "ABBY TIRES" over "and auto repair" is
   roughly twice the character count the old two-word headline had, so the cap
   comes down and the second line gets room for the serif descenders. */
.display{margin:0 0 1.9rem;font-family:var(--f-d);font-weight:800;line-height:.9;
  letter-spacing:-.045em;text-transform:uppercase;
  font-size:clamp(2.7rem,1rem + 7.8vw,6.6rem);
  text-shadow:0 22px 70px rgba(0,0,0,.75)}
.display__l1{display:block;
  background:linear-gradient(180deg,#FFFFFF 6%,#C9D2DE 62%,#8E99AA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.display__l2{display:block;padding-left:.06em;line-height:1.02}
.display__l2 i{font-family:var(--f-s);font-style:italic;font-weight:400;text-transform:lowercase;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff 0%,#FFD9A8 40%,var(--amber) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero__sub{max-width:44ch;color:#C6CDD9;font-size:clamp(1rem,.95rem + .35vw,1.2rem);margin:0 0 2rem;
  text-shadow:0 2px 16px rgba(0,0,0,.85)}
.hero__sub b{color:var(--txt)}
.hero__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem}
.hero__note{margin:0;font-size:.8rem;letter-spacing:.06em;color:#95A0AF;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}

.specs{position:absolute;z-index:7;right:var(--pad);bottom:clamp(5rem,12vh,8rem);
  text-align:right;pointer-events:none;
  opacity:calc(max(0, var(--p,0) - .62) * 2.65);
  transform:translateY(calc((1 - max(0,var(--p,0) - .62) * 2.65) * 18px))}
.specs__ghost{position:absolute;right:-.05em;bottom:-.16em;z-index:-1;
  font-family:var(--f-d);font-weight:800;font-size:clamp(6rem,15vw,13rem);line-height:.75;
  letter-spacing:-.06em;color:rgba(255,255,255,.05)}
.specs dl{display:flex;gap:clamp(1.1rem,3vw,2.4rem);margin:0;justify-content:flex-end}
.specs dt{font:600 .6rem/1 var(--f);letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:.4rem}
.specs dd{margin:0;font-family:var(--f-d);font-weight:750;
  font-size:clamp(.95rem,2vw,1.35rem);letter-spacing:-.02em}

.scrollcue{position:absolute;z-index:7;bottom:1.6rem;left:50%;translate:-50% 0;
  width:26px;height:42px;border:1px solid var(--line-2);border-radius:100px;
  display:grid;justify-items:center;padding-top:8px}
.scrollcue span{width:3px;height:8px;border-radius:3px;background:var(--amber);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}
  100%{transform:translateY(15px);opacity:0}}

/* trust bar */
.trust{position:relative;border-block:1px solid var(--line);
  background:linear-gradient(180deg,#22262C,#1A1D22)}
.trust::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,180,90,.5),transparent)}
.trust__in{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.trust__i{background:var(--ink);padding:1.6rem .9rem;text-align:center;display:grid;gap:.28rem;
  transition:background .3s}
.trust__i:hover{background:var(--panel)}
.trust__i b{font-family:var(--f-d);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.7rem);
  letter-spacing:-.03em;
  background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust__i span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}

/* ── 8. quick quote ─────────────────────────────────────────── */
.quote{padding:var(--sec) 0 0;perspective:1400px}
.quote__card{
  position:relative;border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(52,59,70,.95),rgba(30,34,40,.98));
  padding:clamp(1.6rem,4vw,3.2rem);box-shadow:inset 0 1px 0 var(--edge),var(--e3);
  border-color:var(--line-2);overflow:hidden;
}
.quote__card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 88% -20%,rgba(255,122,24,.2),transparent 62%)}
.quote__card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,180,90,.8),transparent)}
.quote__head{position:relative;margin-bottom:2rem;max-width:52ch}
.quote__head p{color:var(--txt-2);margin:0}
.quote__form{position:relative;display:grid;gap:1rem;
  grid-template-columns:repeat(4,1fr);align-items:end}
/* five fields over four tracks: the vehicle box needs the extra room anyway, so
   it doubles up on row one and the two contact fields split row two evenly */
.quote__form .field--wide{grid-column:span 2}
/* full width across a four-track row is a 900px pill; centre it instead, and
   let it go full width once the form collapses to one column */
.quote__go{grid-column:1/-1;justify-self:center;min-width:min(100%,300px)}
.quote__fine{grid-column:1/-1;margin:0;font-size:.78rem;color:var(--txt-3);text-align:center}
.quote__fine a{color:var(--amber-2)}

/* form atoms */
.field{display:grid;gap:.45rem;min-width:0}
.field label{font:600 .72rem/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.field label em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75}
.field input,.field textarea,.sel select{
  width:100%;padding:.95rem 1.05rem;border:1px solid var(--line-2);border-radius:12px;
  background:rgba(0,0,0,.26);color:var(--txt);font-size:.96rem;
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:focus,.field textarea:focus,.sel select:focus{
  outline:none;border-color:var(--amber);background:rgba(0,0,0,.42);
  box-shadow:0 0 0 4px var(--amber-dim)}
.field input.bad,.field textarea.bad{border-color:#FF5B5B;box-shadow:0 0 0 4px rgba(255,91,91,.14)}

.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem}
.sel::after{content:"";position:absolute;right:1.05rem;top:50%;translate:0 -60%;
  width:7px;height:7px;border-right:1.6px solid var(--txt-2);border-bottom:1.6px solid var(--txt-2);
  rotate:45deg;pointer-events:none}
.sel select option{background:#252A32;color:var(--txt)}

.check{display:flex;align-items:center;gap:.7rem;cursor:pointer;color:var(--txt-2);font-size:.92rem}
.check input{width:20px;height:20px;accent-color:var(--amber);cursor:pointer}

/* honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it. Real users never see or tab into it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formmsg{display:none;margin-top:.4rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.92rem;
  border:1px solid transparent}
.formmsg.ok{display:block;background:rgba(56,214,107,.09);border-color:rgba(56,214,107,.35);color:#9CEFBB}
.formmsg.err{display:block;background:rgba(255,91,91,.09);border-color:rgba(255,91,91,.35);color:#FFB3B3}

/* ═══════════════════════════════════════════════════════════════
   9. WHEEL ROOM
   A catalogue, not a toy. One wheel is shown large and completely
   still; every other wheel in the range sits in a rail underneath
   with its name printed directly beneath its own photograph, so a
   label can never drift away from the thing it describes.
   ═══════════════════════════════════════════════════════════════ */
.wheels{padding:var(--sec) 0;overflow:clip}
/* the wheel-wall photo, thrown far back and heavily dimmed, gives the section
   depth without competing with the product shot */
.wheels::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background:url("../img/wheel-wall.webp") center/cover no-repeat;
  -webkit-mask-image:radial-gradient(90% 60% at 50% 4%,#000,transparent 76%);
  mask-image:radial-gradient(90% 60% at 50% 4%,#000,transparent 76%);
  filter:grayscale(.75) brightness(.62) blur(3px);
}
.wheels>.wrap{position:relative;z-index:1}

.wr{
  border-radius:var(--r-2xl);overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% -10%,rgba(255,122,24,.1),transparent 58%),
    linear-gradient(165deg,rgba(48,54,64,.92),rgba(28,32,38,.97));
  box-shadow:inset 0 1px 0 var(--edge),var(--e3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* category switch */
.wr__tabs{position:relative;display:flex;gap:.2rem;padding:.3rem;
  margin:clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,3vw,2.4rem) 0;
  width:fit-content;max-width:calc(100% - clamp(2.4rem,6vw,4.8rem));
  border:1px solid var(--line);border-radius:100px;background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 var(--edge)}
.wr__tabs button{position:relative;z-index:1;padding:.6rem 1.5rem;background:none;border:0;
  border-radius:100px;font-size:.87rem;font-weight:650;color:var(--txt-3);cursor:pointer;
  white-space:nowrap;transition:color .3s}
.wr__tabs button[aria-selected="true"]{color:#180A00}
.wr__ink{position:absolute;z-index:0;top:.3rem;bottom:.3rem;border-radius:100px;
  background:var(--grad-amber);box-shadow:0 6px 20px -8px rgba(255,122,24,.9),
    inset 0 1px 0 rgba(255,255,255,.45);
  left:var(--x,0);width:var(--w,0);
  transition:left .45s var(--ease),width .45s var(--ease)}

/* stage + spec */
.wr__panel{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.2rem,3vw,3rem);align-items:center;
  padding:clamp(1.2rem,3vw,2.4rem)}
.wr__panel>*{min-width:0}

.wr__view{display:grid;gap:clamp(.7rem,1.6vw,1.1rem);align-content:center}
/* the view strip's min-content width is five 62px tiles; without this the grid
   track stretches to fit it and drags the whole stage past the panel on a phone */
.wr__view>*{min-width:0}
.wr__stage{position:relative;aspect-ratio:1/.92;display:grid;place-items:center;isolation:isolate}
/* lamp behind the wheel */
.wr__halo{position:absolute;z-index:-1;width:88%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,150,60,.3),rgba(255,122,24,.08) 48%,transparent 68%);
  filter:blur(38px)}
.wr__stage::before{
  content:"";position:absolute;z-index:-1;width:74%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.05),transparent 62%);
}
.wr__shot{position:relative;width:min(100%,540px);aspect-ratio:1}
.wr__shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.85));
  opacity:0;transform:scale(.965);
  transition:opacity .5s ease,transform .7s var(--ease);
}
.wr__shot img.ready{opacity:1;transform:none}

/* a lifestyle photograph is a solid rectangle, so it gets a frame and fills it
   rather than floating on the stage lighting a cut-out needs */
.wr__shot.is-photo img{
  object-fit:cover;border-radius:var(--r-xl);
  filter:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.95),inset 0 0 0 1px var(--edge);
}
.wr__view:has(.is-photo) .wr__halo,
.wr__view:has(.is-photo) .wr__floor{opacity:0}
.wr__halo,.wr__floor{transition:opacity .45s ease}
/* contact shadow on the studio floor */
.wr__floor{position:absolute;bottom:2%;width:56%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,122,24,.42),rgba(0,0,0,.5) 45%,transparent 72%);
  filter:blur(14px)}

.wr__arrow{position:absolute;z-index:3;top:50%;translate:0 -50%;
  width:clamp(40px,3.4vw,50px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(22,25,30,.72);
  color:var(--txt);cursor:pointer;backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.wr__arrow svg{width:44%;height:44%}
.wr__arrow:hover{background:rgba(255,122,24,.2);border-color:rgba(255,122,24,.65);
  transform:translateY(-50%) scale(1.09)}
.wr__arrow--prev{left:0}
.wr__arrow--next{right:0}

/* moved off the baseline and into the corner as a badge, so the view strip can
   have the space directly under the wheel */
.wr__count{position:absolute;z-index:3;top:0;left:0;margin:0;padding:.35rem .7rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(22,25,30,.7);
  backdrop-filter:blur(8px);
  font:600 .66rem/1 var(--f);letter-spacing:.2em;color:var(--txt-3)}
.wr__count b{color:var(--amber-2);font-weight:700}

/* view strip — one thumbnail per photograph of this wheel */
.wr__views{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem;margin:0;padding:0}
.wr__views[hidden]{display:none}
/* li as a flex container so a two-line label can't leave its neighbours short */
.wr__views li{display:flex}
.wr__views button{
  width:clamp(62px,6.4vw,78px);padding:.3rem .3rem .38rem;
  display:grid;gap:.1rem;justify-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  color:var(--txt-3);
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease);
}
.wr__views button:hover{transform:translateY(-3px);border-color:var(--line-2);color:var(--txt-2)}
.wr__views button[aria-selected="true"]{
  border-color:rgba(255,180,90,.6);color:var(--amber-3);
  background:linear-gradient(170deg,rgba(255,122,24,.16),rgba(255,122,24,.03));
  box-shadow:0 12px 26px -16px rgba(255,122,24,.9),inset 0 1px 0 rgba(255,255,255,.12)}
.wr__views img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:9px}
.wr__views span{font-size:.58rem;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap}

.wr__spec{padding-block:clamp(.5rem,2vw,1.5rem)}
.wr__brand{margin:0 0 .5rem;font:600 .68rem/1 var(--f);letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber-2)}
.wr__name{font-family:var(--f-d);font-weight:800;
  font-size:clamp(2rem,1.2rem + 2.2vw,3.1rem);line-height:.95;letter-spacing:-.04em;
  text-transform:uppercase;margin:0 0 .7rem}
.wr__desc{color:var(--txt-2);margin:0 0 1.5rem;font-size:.97rem;max-width:46ch;
  text-wrap:pretty}

.wr__spec dl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 1.5rem;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wr__spec dl>div{background:rgba(20,23,28,.55);padding:.85rem .7rem;display:grid;gap:.3rem}
.wr__spec dt{font:600 .6rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.wr__spec dd{margin:0;font-family:var(--f-d);font-weight:750;font-size:1.02rem;letter-spacing:-.02em}

.wr__flabel{margin:0 0 .6rem;font:600 .62rem/1 var(--f);letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-3)}
.wr__finishes{margin-bottom:1.6rem}
.wr__finishes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.wr__finishes li{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .8rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.03);
  font-size:.8rem;color:var(--txt-2)}
/* the finish actually in the photograph, called out so the picture and the
   words can never disagree */
.wr__finishes li.is-shown{border-color:rgba(255,180,90,.5);background:rgba(255,122,24,.12);
  color:var(--amber-3)}
.wr__finishes li.is-shown::after{content:"shown";font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.75}

.sw{width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.sw--gloss{background:linear-gradient(140deg,#3A3E46,#0C0D10)}
.sw--satin{background:linear-gradient(140deg,#2E323A,#141619)}
.sw--bronze{background:linear-gradient(140deg,#D9A05B,#7A4E1E)}
.sw--chrome{background:var(--grad-chrome)}
.sw--silver{background:linear-gradient(140deg,#EDF1F6,#9AA4B2)}
.sw--sand{background:linear-gradient(140deg,#D9C7A3,#8A7A5C)}
.sw--white{background:linear-gradient(140deg,#FFFFFF,#D2D8E0)}
.sw--blue{background:linear-gradient(140deg,#3B82F6,#0B1A33)}
.sw--brass{background:linear-gradient(140deg,#D4AF5A 0 46%,#1A1C20 46% 100%)}
.sw--graphite{background:linear-gradient(140deg,#6A7078,#2A2E34)}
.sw--gunmetal{background:linear-gradient(140deg,#767E8A,#31363E)}
.sw--milled{background:linear-gradient(140deg,#C8CDD4 0 48%,#17191D 48% 100%)}

.wr__buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.wr__price{margin:0;color:var(--txt-3);font-size:.86rem}
.wr__price b{font-family:var(--f-d);font-weight:800;font-size:2.1rem;letter-spacing:-.04em;
  background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 .25rem}
.wr__price em{font-style:normal}

/* selector rail — picture and name travel together */
.wr__rail{
  list-style:none;display:flex;gap:.7rem;margin:0;
  padding:0 clamp(1.2rem,3vw,2.4rem) clamp(1.2rem,3vw,2.4rem);
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:#2A3038 transparent;
}
.wr__rail::-webkit-scrollbar{height:6px}
.wr__rail::-webkit-scrollbar-thumb{background:#2A3038;border-radius:6px}
.wr__rail::-webkit-scrollbar-track{background:transparent}
/* li is a flex container purely so the button stretches to the tallest tile —
   otherwise a two-line finish label leaves its neighbours short */
.wr__rail li{flex:1 1 118px;min-width:112px;max-width:196px;display:flex;
  scroll-snap-align:center}
/* display:flex above outranks the UA's [hidden]{display:none}, so the other
   categories' tiles would all stay on screen without this */
.wr__rail li[hidden]{display:none}
.wr__rail button{
  width:100%;padding:.75rem .55rem .8rem;
  display:grid;gap:.15rem;justify-items:center;align-content:start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  color:var(--txt-2);text-align:center;
  transition:border-color .3s,background .3s,transform .3s var(--ease),color .3s;
}
.wr__rail button:hover{transform:translateY(-4px);border-color:var(--line-2);color:var(--txt)}
.wr__rail button[aria-checked="true"]{
  border-color:rgba(255,180,90,.6);color:var(--txt);
  background:linear-gradient(170deg,rgba(255,122,24,.18),rgba(255,122,24,.03));
  box-shadow:0 18px 40px -22px rgba(255,122,24,.9),inset 0 1px 0 rgba(255,255,255,.12)}
/* height:auto is load-bearing — the img carries width/height attributes so the
   browser can reserve the box, and without it that 400px height attribute wins
   over aspect-ratio and each tile grows to four hundred pixels tall */
.wr__rail img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.wr__rail b{font-family:var(--f-d);font-weight:750;font-size:.85rem;letter-spacing:-.01em;
  line-height:1.2}
.wr__rail span{font-size:.66rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3)}
.wr__rail button[aria-checked="true"] span{color:var(--amber-2)}

.wr__foot{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;
  justify-content:space-between;
  margin:0 clamp(1.2rem,3vw,2.4rem) clamp(1.2rem,3vw,2.4rem);
  padding-top:1.2rem;border-top:1px solid var(--line)}
.wr__foot p{margin:0;font-size:.86rem;color:var(--txt-2);max-width:62ch}
.wr__foot p a{color:var(--amber-2);font-weight:650;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.wr__foot p a:hover{color:var(--amber-3)}

.wr__note{margin:1.1rem 0 0;font-size:.76rem;color:var(--txt-3);max-width:88ch}

/* ── 10. vehicle showcase ───────────────────────────────────── */
.builds{margin-top:clamp(3rem,7vw,6rem)}
.builds__head{margin-bottom:1.6rem}
.builds__head h3{font-family:var(--f-d);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:-.03em;text-transform:uppercase;margin:0 0 .35rem}
.builds__head p{margin:0;color:var(--txt-3);font-size:.92rem}

/* one build at a time, arrows either side — the lane it belongs to also drives
   the wheel rail, so wheels and vehicle always match */
.builds__stage{position:relative;display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.4rem)}
.builds__nav{flex:none;width:clamp(42px,4vw,56px);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.04);
  color:var(--txt);cursor:pointer;backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.builds__nav svg{width:44%;height:44%}
.builds__nav:hover{background:rgba(255,122,24,.16);border-color:rgba(255,122,24,.6);transform:scale(1.08)}
.builds__nav:active{transform:scale(.96)}

.build{flex:1;min-width:0;margin:0;border-radius:var(--r-xl);
  overflow:hidden;background:linear-gradient(170deg,var(--panel-2),var(--carbon));
  display:grid;grid-template-columns:1.35fr .65fr}
.build.swap{animation:buildIn .5s var(--ease)}
@keyframes buildIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.build__dots{display:flex;gap:.4rem;margin-top:1.1rem}
.build__dots i{width:20px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);
  transition:background .3s}
.build__dots i.on{background:var(--amber)}
/* the figure is a two-column grid, so the photo cell must stretch rather than
   hold its own aspect ratio or it leaves a gap under the copy */
.build .ph{height:100%;aspect-ratio:auto;min-height:clamp(240px,26vw,360px)}
.build .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,transparent 55%,rgba(11,13,18,.55) 100%)}
.build__b{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.4rem,3vw,2.4rem)}
.build__b b{display:block;font-family:var(--f-d);font-weight:800;
  font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:.6rem}
.build__b em{display:block;font-style:normal;color:var(--txt-2);font-size:.95rem;margin-bottom:1.1rem}
.build__tag{display:inline-block;align-self:flex-start;padding:.35rem .8rem;
  border:1px solid rgba(255,122,24,.35);border-radius:100px;background:rgba(255,122,24,.09);
  color:var(--amber-3);font-size:.76rem;font-weight:600;letter-spacing:.04em}

.builds__cta{margin-top:clamp(1.4rem,3vw,2.2rem);
  padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,3vw,2rem);
  border-radius:var(--r-lg);
  background:radial-gradient(120% 200% at 100% 0,rgba(255,122,24,.13),transparent 62%);
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.builds__cta p{margin:0;color:var(--txt-2);max-width:52ch}
.builds__cta b{color:var(--txt)}

/* ── 11. tire cards ─────────────────────────────────────────── */
.tires{padding:var(--sec) 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.5rem);
  perspective:1500px}
.card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(170deg,var(--panel-2),var(--carbon));
  display:flex;flex-direction:column;
  transition:border-color .4s,box-shadow .4s;
}
.card:hover{border-color:rgba(255,180,90,.32);
  box-shadow:inset 0 1px 0 var(--edge),0 40px 70px -34px rgba(255,122,24,.5)}
.card>*{position:relative;z-index:1}
.card__img{--ar:1;background:#181B20}
.card__img::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,transparent,rgba(10,12,15,.5));
  opacity:.9;transition:opacity .5s}
.card:hover .card__img::after{opacity:.4}
.card__img>img{transition:opacity .7s,transform 1s var(--ease)}
.card:hover .card__img>img.ready{transform:scale(1.07) rotate(-1.5deg)}
.card__body{padding:1.4rem;display:flex;flex-direction:column;flex:1;gap:.6rem}
.card__body h3{font-family:var(--f-d);font-weight:750;font-size:1.2rem;letter-spacing:-.02em;margin:0}
.card__body p{margin:0;color:var(--txt-2);font-size:.92rem}
.card .ticks{margin-top:.2rem}
.card .ticks li{font-size:.84rem}
.card__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.price{color:var(--txt-3);font-size:.8rem}
.price b{font-family:var(--f-d);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  color:var(--txt);margin:0 .15rem}
.price em{font-style:normal}
.lnk{font-size:.85rem;font-weight:650;color:var(--amber-2);transition:color .2s}
.lnk:hover{color:var(--amber-3)}

.pdisc{margin:1.4rem 0 0;font-size:.82rem;color:var(--txt-3);max-width:80ch}
.pdisc a{color:var(--amber-2)}

/* ── 10b. our work gallery ──────────────────────────────────── */
/* Masonry through CSS columns rather than a grid: these are phone photographs
   in five different aspect ratios, and cropping them all square threw away the
   vehicle. Columns let every picture keep its own shape. */
.work{margin-top:clamp(3rem,7vw,6rem)}
.work__head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.work__head h3{font-family:var(--f-d);font-weight:800;font-size:clamp(1.4rem,2.8vw,2.1rem);
  letter-spacing:-.03em;text-transform:uppercase;margin:0 0 .35rem}
.work__head h3 i{font-family:var(--f-s);font-style:italic;font-weight:400;
  text-transform:lowercase;letter-spacing:-.02em;color:var(--amber-2)}
.work__head p{margin:0;color:var(--txt-2);font-size:.95rem;max-width:56ch}
.work__count{flex:none;padding:.4rem .9rem;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 var(--edge);
  font:600 .66rem/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}

.gal{columns:4;column-gap:clamp(.6rem,1.2vw,1rem)}
.gal__i{
  break-inside:avoid;margin:0 0 clamp(.6rem,1.2vw,1rem);position:relative;
  border-radius:var(--r-lg);overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line);background:var(--carbon);
  box-shadow:inset 0 1px 0 var(--edge),var(--e2);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;
}
.gal__i:hover{transform:translateY(-5px);border-color:rgba(255,180,90,.4);
  box-shadow:0 34px 60px -34px rgba(255,122,24,.5)}
.gal__i img{display:block;width:100%;height:auto;opacity:0;
  transition:transform .8s var(--ease),opacity .6s ease}
.gal__i img.ready{opacity:1}
.gal__i:hover img{transform:scale(1.06)}
/* a wash that lifts on hover, so the tiles read as one set rather than fifteen
   different exposures shouting at once */
.gal__i::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(12,14,17,.5));
  opacity:.85;transition:opacity .45s}
.gal__i:hover::after{opacity:.35}

/* lightbox */
.lb{position:fixed;inset:0;z-index:250;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(10,12,15,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:lbIn .3s ease}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__img{max-width:min(100%,1100px);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-lg);box-shadow:0 50px 100px -40px #000;
  animation:lbPop .4s var(--ease)}
@keyframes lbPop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lb__btn{position:absolute;z-index:2;display:grid;place-items:center;
  width:clamp(42px,4vw,54px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(24,27,32,.7);color:var(--txt);
  cursor:pointer;backdrop-filter:blur(10px);
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.lb__btn:hover{background:rgba(255,122,24,.22);border-color:rgba(255,122,24,.65);transform:scale(1.08)}
.lb__btn svg{width:44%;height:44%}
.lb__prev{left:clamp(.6rem,2vw,2rem);top:50%;translate:0 -50%}
.lb__next{right:clamp(.6rem,2vw,2rem);top:50%;translate:0 -50%}
.lb__close{top:clamp(.6rem,2vw,2rem);right:clamp(.6rem,2vw,2rem)}
.lb__count{position:absolute;bottom:clamp(.8rem,2.5vw,2rem);left:50%;translate:-50% 0;
  margin:0;font:600 .68rem/1 var(--f);letter-spacing:.2em;color:var(--txt-3)}
.lb__count b{color:var(--amber-2)}
body.lb-open{overflow:hidden}

/* ── 11b. instagram strip ───────────────────────────────────── */
/* Sits between the wheels and the services list, where someone who has just
   scrolled the whole wheel range is most likely to want to see more of them. */
.social{padding:clamp(2rem,5vw,3.5rem) 0}
.social__in{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,3vw,2.2rem);
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3.5vw,2.6rem);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:
    radial-gradient(120% 190% at 8% 0,rgba(214,60,160,.16),transparent 55%),
    radial-gradient(110% 180% at 62% 120%,rgba(255,122,24,.15),transparent 58%),
    linear-gradient(165deg,rgba(48,54,64,.92),rgba(29,33,39,.97));
  box-shadow:inset 0 1px 0 var(--edge),var(--e2);
}
.social__glyph{
  width:clamp(52px,5vw,64px);aspect-ratio:1;display:grid;place-items:center;flex:none;
  border-radius:18px;color:#fff;
  background:conic-gradient(from 200deg at 32% 108%,#FFC862,#FF7A18,#D6417C,#8A3AB9,#FFC862);
  box-shadow:0 14px 30px -14px rgba(214,65,124,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
.social__glyph svg{width:56%;height:56%}
.social__copy h2{font-family:var(--f-d);font-weight:800;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);line-height:1.1;letter-spacing:-.03em;
  margin:0 0 .4rem;text-wrap:balance}
.social__copy h2 i{font-family:var(--f-s);font-style:italic;font-weight:400;
  letter-spacing:-.02em;color:var(--amber-2)}
.social__copy p{margin:0;color:var(--txt-2);font-size:.93rem;max-width:58ch;text-wrap:pretty}
.social__cta{flex:none}

/* ── 12. services ───────────────────────────────────────────── */
.services{padding:var(--sec) 0;overflow:clip}
.svcs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.6vw,1.5rem)}
.svc{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--carbon);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s}
.svc:hover{transform:translateY(-7px);border-color:rgba(255,180,90,.3);
  box-shadow:inset 0 1px 0 var(--edge),0 40px 70px -34px rgba(255,122,24,.4)}
.svc>*{position:relative;z-index:1}
.svc .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--carbon) 2%,rgba(11,13,18,.35) 45%,transparent)}
.svc__b{padding:1.4rem}
.svc__b h3{font-family:var(--f-d);font-weight:750;font-size:1.18rem;letter-spacing:-.02em;margin:0 0 .5rem}
.svc__b p{margin:0 0 1rem;color:var(--txt-2);font-size:.92rem}
.tag{display:inline-block;padding:.35rem .8rem;border:1px solid rgba(255,122,24,.35);
  border-radius:100px;background:rgba(255,122,24,.09);color:var(--amber-3);
  font-size:.78rem;font-weight:600;letter-spacing:.04em}

/* ── 13. pricing ────────────────────────────────────────────── */
.pricing{padding:var(--sec) 0}
.tabs{position:relative;display:inline-flex;gap:.2rem;padding:.32rem;margin-bottom:2rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 var(--edge)}
.tabs button{position:relative;z-index:1;padding:.7rem 1.4rem;background:none;border:0;
  border-radius:100px;font-size:.9rem;font-weight:600;color:var(--txt-3);cursor:pointer;
  transition:color .3s;white-space:nowrap}
.tabs button[aria-selected="true"]{color:#180A00}
.tabs__ink{position:absolute;z-index:0;top:.32rem;bottom:.32rem;border-radius:100px;
  background:var(--grad-amber);
  box-shadow:0 6px 22px -8px rgba(255,122,24,.9),inset 0 1px 0 rgba(255,255,255,.45);
  left:var(--x,0);width:var(--w,0);transition:left .45s var(--ease),width .45s var(--ease)}

.ptable{border-radius:var(--r-lg);overflow:hidden;background:rgba(30,34,40,.66)}
.pane{animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* a two-track grid rather than CSS columns: multicol splits flex rows unevenly
   and leaves the last row's hairline hanging in mid-air */
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.plist li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.1rem,2.4vw,1.9rem);border-bottom:1px solid var(--line);
  transition:background .25s}
.plist li:nth-child(odd){border-right:1px solid var(--line)}
/* an odd-length list ends with a lone left-column row — without this its right
   divider hangs in empty space */
.plist li:last-child:nth-child(odd){border-right:0}
/* and the bottom row's rule would otherwise run along the panel's own edge */
.plist li:last-child,
.plist li:nth-last-child(2):nth-child(odd){border-bottom:0}
.plist li:hover{background:rgba(255,122,24,.05)}
.plist span{color:var(--txt-2);font-size:.94rem}
.plist b{font-family:var(--f-d);font-weight:750;font-size:.98rem;letter-spacing:-.01em;
  white-space:nowrap;color:var(--txt)}

/* ── 14. financing ──────────────────────────────────────────── */
.fin{position:relative;padding:var(--sec) 0;overflow:clip;isolation:isolate}
.fin__bg{position:absolute;inset:0;z-index:-1;aspect-ratio:auto}
/* the copy sits on the left, so the scrim is heavy there and eases off far
   enough right that the photo behind the calculator is actually visible */
.fin__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,6,10,.96) 22%,rgba(5,6,10,.62) 58%,rgba(5,6,10,.82)),
             linear-gradient(to bottom,var(--ink),transparent 20%,transparent 76%,var(--ink))}
.fin__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.fin__in>*{min-width:0}

.calc{border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.4rem);
  border-color:var(--line-2);
  background:linear-gradient(155deg,rgba(52,59,70,.96),rgba(29,33,39,.98));
  box-shadow:inset 0 1px 0 var(--edge),var(--e3);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.calc h3{font-family:var(--f-d);font-weight:750;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 1.5rem}
.calc__amt{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.calc__amt label{font:600 .72rem/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.calc__amt output{font-family:var(--f-d);font-weight:800;font-size:1.65rem;letter-spacing:-.03em}

.range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,var(--amber) var(--fill,32%),rgba(255,255,255,.12) var(--fill,32%))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:5px solid var(--amber);cursor:grab;
  box-shadow:0 0 0 6px rgba(255,122,24,.16),0 4px 14px rgba(0,0,0,.6)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;
  border:5px solid var(--amber);cursor:grab;box-shadow:0 0 0 6px rgba(255,122,24,.16)}

.calc__terms{display:flex;gap:.5rem;margin:1.6rem 0}
.calc__terms button{flex:1;padding:.75rem;background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:12px;font-size:.9rem;font-weight:600;color:var(--txt-2);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.calc__terms button:hover{border-color:var(--line-2);color:var(--txt)}
.calc__terms button[aria-pressed="true"]{background:rgba(255,122,24,.14);
  border-color:rgba(255,122,24,.55);color:var(--amber-3)}

.calc__res{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.3rem 1.4rem;border:1px solid rgba(255,122,24,.28);border-radius:var(--r);
  background:radial-gradient(120% 160% at 100% 0,rgba(255,122,24,.16),transparent 70%)}
.calc__res>span{font:600 .72rem/1 var(--f);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.calc__res p{margin:0;display:flex;align-items:baseline;gap:.4rem}
.calc__res b{font-family:var(--f-d);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;
  background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__res em{font-style:normal;color:var(--txt-3);font-size:.85rem}
.calc__fine{margin:1.1rem 0 0;font-size:.75rem;color:var(--txt-3)}

/* ── 15. proof ──────────────────────────────────────────────── */
.proof{padding:var(--sec) 0}
.proof__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.proof__grid>*{min-width:0}

.gauge{position:relative;display:grid;place-items:center;max-width:340px;margin-inline:auto;width:100%}
.gauge svg{width:100%;transform:rotate(-90deg)}
.gauge__t{fill:none;stroke:rgba(255,255,255,.07);stroke-width:6}
.gauge__v{fill:none;stroke:var(--amber);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:540;stroke-dashoffset:540;
  filter:drop-shadow(0 0 14px rgba(255,122,24,.75));
  transition:stroke-dashoffset 2s var(--ease)}
.gauge__mid{position:absolute;display:grid;justify-items:center;gap:.25rem;text-align:center}
.gauge__mid b{font-family:var(--f-d);font-weight:800;font-size:clamp(2.6rem,7vw,3.8rem);
  letter-spacing:-.05em;line-height:1}
.gauge__mid em{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

.bars{display:grid;gap:.5rem;margin:1.8rem 0}
.bar{display:grid;grid-template-columns:2.2rem 1fr 2.2rem;align-items:center;gap:.9rem;font-size:.85rem}
.bar span{color:var(--txt-3)}
.bar b{color:var(--txt-2);font-weight:600;text-align:right;font-size:.82rem}
.bar i{height:6px;border-radius:6px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;
  background:var(--grad-amber);transition:width 1.4s var(--ease) var(--bd,0ms)}
.bars.on .bar i::after{width:var(--w)}

.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);padding-top:1.6rem;
  border-top:1px solid var(--line)}
.stats div{display:grid;gap:.2rem}
.stats b{font-family:var(--f-d);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:-.04em;line-height:1}
.stats span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

.marquee{margin-top:clamp(3rem,6vw,5rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:1.2rem;width:max-content;animation:slide 52s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.rev{flex:0 0 clamp(280px,32vw,400px);margin:0;padding:1.6rem;border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--panel),var(--carbon))}
.rev p{margin:0 0 1.1rem;color:var(--txt);font-size:.96rem;line-height:1.6}
.rev figcaption{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  font-size:.8rem;color:var(--txt-3);letter-spacing:.06em}

/* ── 16. locations, booking, faq, band, footer ──────────────── */
.locs{padding:var(--sec) 0;overflow:clip}
.locgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem,2.4vw,2rem);perspective:1500px}
.loc{border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(170deg,var(--panel),var(--carbon));
  transition:border-color .4s,box-shadow .4s}
.loc:hover{border-color:rgba(255,180,90,.3);
  box-shadow:inset 0 1px 0 var(--edge),0 44px 80px -40px rgba(255,122,24,.45)}
.loc>*{position:relative;z-index:1}
/* Blends the photo into the card body. Kept shallow and weak: real storefront
   photos have the cars and the open bay along the bottom edge, and a stronger
   scrim wiped them out. */
.loc__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--panel) 0.5%,rgba(17,20,27,.16) 9%,transparent 26%)}
.loc__b{padding:clamp(1.3rem,2.6vw,2rem)}
.loc__badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;padding:.35rem .8rem;
  border:1px solid var(--line);border-radius:100px;font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-3);background:rgba(0,0,0,.22)}
.loc__badge i{width:7px;height:7px;border-radius:50%;background:var(--txt-3)}
.loc__badge.open i{background:#38D66B;box-shadow:0 0 0 3px rgba(56,214,107,.18);
  animation:blip 2.4s ease-in-out infinite}
.loc__badge.open{color:#8DEFB0;border-color:rgba(56,214,107,.3)}
.loc__badge.shut i{background:#FF6B6B}
.loc__badge.shut{color:#FFA8A8;border-color:rgba(255,107,107,.28)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.45}}
.loc__b h3{font-family:var(--f-d);font-weight:800;font-size:clamp(1.6rem,3vw,2.1rem);
  letter-spacing:-.035em;text-transform:uppercase;margin:0 0 .5rem}
.loc__rate{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .8rem}
.loc__rate b{font-family:var(--f-d);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.loc__rate em{font-style:normal;font-size:.8rem;color:var(--txt-3)}
.loc address{font-style:normal;color:var(--txt-2);margin-bottom:1.3rem}

.hours{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.88rem}
.hours tr{border-bottom:1px solid var(--line)}
.hours tr:last-child{border-bottom:0}
.hours th{text-align:left;font-weight:400;color:var(--txt-3);padding:.5rem 0}
.hours td{text-align:right;color:var(--txt-2);padding:.5rem 0}
.hours tr.today th,.hours tr.today td{color:var(--amber-2);font-weight:600}
.loc__cta{display:flex;flex-wrap:wrap;gap:.6rem}
/* each card carries its own shop's line, so nobody dials the wrong bay */
.loc__tel{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;opacity:.75;margin-top:2px}
.loc__cta .btn--amber{flex-direction:column;gap:.1rem;padding-block:.72rem}

.book{padding:var(--sec) 0}
.book__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;perspective:1400px}
.book__in>*{min-width:0}
.book__tech{margin:2rem 0 1.4rem;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);max-width:340px}
.book__quote{margin:0;font-family:var(--f-s);font-style:italic;font-size:1.15rem;
  color:var(--txt-2);max-width:30ch}
.book__form{border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.6rem);
  border-color:var(--line-2);
  background:linear-gradient(155deg,rgba(50,56,67,.95),rgba(29,33,39,.98));
  box-shadow:inset 0 1px 0 var(--edge),var(--e3);
  display:grid;gap:1.1rem}
.book__form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

.faq{padding:var(--sec) 0}
/* heading on the left, questions on the right: a full-width summary row put the
   plus icon a screen away from the question it belongs to */
.faq__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
.faq__in>*{min-width:0}
.faq__in .shead{margin-bottom:0;position:sticky;top:calc(var(--navh) + 2rem)}
.faq__call{margin-top:1.8rem}

.acc details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.6rem;
  background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .3s,background .3s}
.acc details:hover{border-color:var(--line-2)}
.acc details[open]{border-color:rgba(255,180,90,.32);
  background:linear-gradient(170deg,rgba(255,122,24,.09),rgba(255,122,24,.015));
  box-shadow:inset 0 1px 0 var(--edge)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.2rem clamp(1rem,2vw,1.5rem);cursor:pointer;list-style:none;
  font-family:var(--f-d);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.28rem);letter-spacing:-.02em;
  transition:color .25s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--amber-2)}
.acc summary i{position:relative;flex:none;width:22px;height:22px}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;inset:50% 0 auto;
  height:1.5px;background:var(--amber);transition:transform .35s var(--ease)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc details[open] summary{color:var(--amber-2)}
.acc div{overflow:hidden;animation:accIn .4s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.acc div p{margin:0;padding:0 clamp(1rem,2vw,1.5rem) 1.35rem;color:var(--txt-2);max-width:70ch}

.band{padding:clamp(4rem,9vw,7rem) 0;border-top:1px solid var(--line);
  background:radial-gradient(90% 160% at 50% 120%,rgba(255,122,24,.18),transparent 62%)}
.band__in{text-align:center;display:grid;justify-items:center;gap:1.6rem}
.band__btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

.foot{border-top:1px solid var(--line);background:#141619;padding:clamp(3rem,6vw,5rem) 0 0}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot__c h4{font:600 .72rem/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--txt);
  margin:0 0 1rem}
.foot__c h4:not(:first-child){margin-top:1.6rem}
.foot__c ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot__c a{color:var(--txt-2);font-size:.92rem;transition:color .2s}
.foot__c a:hover{color:var(--amber-2)}
.foot__c address{font-style:normal;color:var(--txt-2);font-size:.92rem}
.foot__c--brand p{color:var(--txt-3);font-size:.9rem;max-width:34ch;margin:1.2rem 0 0}
.foot__rate{display:flex;align-items:center;gap:.5rem}
.foot__rate b{color:var(--txt)}
.foot__hrs{font-size:.88rem}
.foot__hrs li{display:flex;justify-content:space-between;gap:1rem;color:var(--txt-3)}
.foot__hrs b{color:var(--txt-2);font-weight:500}
.foot__tel{display:inline-block;margin-top:1.2rem;font-family:var(--f-d);font-weight:750;
  font-size:1.25rem;letter-spacing:-.02em;color:var(--amber-2)!important}
.foot__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem);padding:1.5rem 0;border-top:1px solid var(--line)}
.foot__bar p{margin:0;font-size:.8rem;color:var(--txt-3)}
.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.foot__legal a{color:var(--txt-3);font-size:.84rem;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.foot__legal a:hover{color:var(--amber-2);border-bottom-color:currentColor}

.stickybar{position:fixed;z-index:70;inset:auto 0 0;display:none;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.stickybar.on{transform:none}
.stickybar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.05rem;background:#1F2329;font-weight:650;font-size:.95rem}
.stickybar a svg{width:1.05em;height:1.05em}
.stickybar__go{background:var(--grad-amber)!important;color:#180A00}

.cursor{position:fixed;z-index:200;top:0;left:0;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,180,90,.55);pointer-events:none;opacity:0;
  translate:-50% -50%;transition:opacity .3s,width .25s,height .25s,background .25s}
.cursor.on{opacity:1}
.cursor.hot{width:56px;height:56px;background:rgba(255,122,24,.13);border-color:rgba(255,180,90,.85)}

/* ── 17. legal pages ────────────────────────────────────────── */
.legal{padding:clamp(7rem,12vw,10rem) 0 clamp(4rem,8vw,7rem)}
.legal__in{max-width:74ch;margin:0 auto}
.legal h1{font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:-.03em;text-transform:uppercase;margin:0 0 .5rem}
.legal .updated{color:var(--txt-3);font-size:.86rem;margin:0 0 2.6rem}
.legal h2{font-family:var(--f-d);font-weight:750;font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:-.02em;margin:2.6rem 0 .7rem;color:var(--txt)}
.legal h3{font-size:1rem;font-weight:700;margin:1.6rem 0 .5rem;color:var(--txt)}
.legal p,.legal li{color:var(--txt-2);line-height:1.75}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1.2rem;padding-left:1.2rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--amber-2)}
.legal strong{color:var(--txt)}
.legal__box{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.5rem;
  background:rgba(255,255,255,.02);margin:0 0 1.4rem}
.legal__box p:last-child{margin-bottom:0}
.legal__back{display:inline-block;margin-top:3rem;color:var(--amber-2);font-weight:650}
.legal kbd{display:inline-block;padding:.08em .42em;margin:0 .1em;border-radius:5px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.06);
  font-family:var(--f-m);font-size:.85em;color:var(--txt)}
.legal em{font-style:italic;color:var(--txt-2)}

/* ═══════════════ 18. responsive ═══════════════ */
@media (max-width:1180px){
  .gal{columns:3}
  /* the links carried margin-inline:auto, which is what pushed the CTA group to
     the right edge — with them hidden the group needs to claim that space itself */
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .burger{display:flex}
  .cards{grid-template-columns:repeat(2,1fr)}
  .svcs{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--navh:70px}
  .gal{columns:2}
  .wr__panel,.fin__in,.proof__grid,.book__in,.faq__in{grid-template-columns:1fr}
  .faq__in .shead{position:static}
  /* width, not max-width: `margin-inline:auto` on a grid item cancels the
     default stretch, and with no definite width the shot inside collapses */
  .wr__view{width:min(100%,520px);margin-inline:auto}
  .wr__stage{aspect-ratio:1/.82}
  .wr__spec dl{grid-template-columns:repeat(2,1fr)}
  .build{grid-template-columns:1fr}
  .build .ph::after{background:linear-gradient(to top,var(--carbon) 2%,transparent 40%)}
  .locgrid{grid-template-columns:1fr}
  /* copy under the glyph, button on its own row — three columns would squeeze
     the sentence into a two-word-per-line ribbon */
  .social__in{grid-template-columns:auto 1fr;row-gap:1.3rem}
  .social__cta{grid-column:1/-1;justify-self:start}
  .quote__form{grid-template-columns:1fr 1fr}
  /* two tracks take the pairs already; email would otherwise sit alone with a
     hole beside it, so give it the whole last row */
  .quote__form .field--wide{grid-column:span 1}
  .quote__form .field--email{grid-column:1/-1}
  .plist{grid-template-columns:1fr}
  .plist li:nth-child(odd){border-right:0}
  /* 5 items over a 6-track grid: three across, then two half-width — no orphan gap */
  .trust__in{grid-template-columns:repeat(6,1fr)}
  .trust__i{grid-column:span 2}
  .trust__i:nth-child(4),.trust__i:nth-child(5){grid-column:span 3}
  .specs{display:none}
  .gauge{max-width:280px}
  .btn--phone span{display:none}
}
@media (max-width:640px){
  :root{--navh:66px}
  .gal{columns:2;column-gap:.5rem}
  .gal__i{margin-bottom:.5rem;border-radius:var(--r)}
  .cards,.svcs{grid-template-columns:1fr}
  /* arrows tuck over the image corners so the panel keeps full width on phones */
  .builds__stage{gap:0}
  .builds__nav{position:absolute;z-index:3;top:32%;background:rgba(24,27,32,.72)}
  .builds__nav--prev{left:.6rem}
  .builds__nav--next{right:.6rem}
  .quote__form,.book__form .row{grid-template-columns:1fr}
  .social__in{grid-template-columns:1fr;text-align:center;justify-items:center}
  .social__cta{width:100%}
  .trust__in{grid-template-columns:repeat(2,1fr)}
  .trust__i,.trust__i:nth-child(4){grid-column:span 1}
  .trust__i:nth-child(5){grid-column:span 2}
  .foot__in{grid-template-columns:1fr}
  .stickybar{display:flex}
  /* the bar is fixed and sits after .foot in the DOM, so reserve the room on body */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* the price tabs can overflow a narrow phone — becomes a scroller */
  .tabs{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;padding:.7rem 1.05rem;font-size:.85rem}

  .wr__tabs{width:auto;max-width:none;overflow-x:auto;scrollbar-width:none}
  .wr__tabs::-webkit-scrollbar{display:none}
  .wr__tabs button{flex:0 0 auto;padding:.6rem 1.15rem}
  .wr__spec dl{grid-template-columns:repeat(2,1fr)}
  .wr__name{font-size:clamp(1.8rem,9vw,2.4rem)}
  .wr__rail{margin-inline:0}
  .wr__rail li{flex:0 0 118px}
  /* five views will not sit on one row at this width — let them wrap rather
     than push the stage out of the panel */
  .wr__views{gap:.4rem}
  .wr__views button{width:clamp(54px,15vw,70px)}

  .hero__stage{height:92svh}
  /* a 21:9 frame cropped to portrait lands on empty floor — bias up to the vehicle */
  .layer>img{object-position:52% 41%}
  /* copy runs full width on phones, so the scrim has to cover the whole frame;
     it eases off as the dial turns so the truck isn't left buried under it */
  .hero__vig{background:
    linear-gradient(180deg,
      rgba(4,5,8,.9) 0%,
      rgba(4,5,8,calc(.72 - var(--p,0) * .18)) 30%,
      rgba(4,5,8,calc(.64 - var(--p,0) * .18)) 62%,
      var(--ink) 100%),
    radial-gradient(130% 70% at 50% 45%,transparent 20%,rgba(4,5,8,.5) 80%)}
  .dial__svg{width:min(86vw,420px)}
  .scrollcue{display:none}
  .cursor{display:none}
  .btn--phone{display:none}

  /* At 375px the brand block, the Book Now pill and the burger together were
     ~40px wider than the bar, which pushed the burger off the right edge where
     body{overflow-x:hidden} quietly clipped it. Trim all three. */
  .nav__in{gap:.7rem}
  .brand{gap:.55rem}
  .brand__mark,.nav.stuck .brand__mark{width:38px;height:38px}
  .brand__txt i{display:none}
  .brand__txt b{font-size:1rem}
  .nav__cta{gap:.45rem}
  .nav__cta .btn--amber{padding:.72rem 1.05rem;font-size:.86rem}
  .burger{width:40px;height:40px}
}
@media (max-width:420px){
  .display{font-size:clamp(2.1rem,11.5vw,3rem)}
  .wr__rail button{width:104px}
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .marquee__row{animation:none;flex-wrap:wrap;width:auto}
  .btn::after{display:none}
}