/* Ask Auto Zone — shared public site CSS
   DARK PREMIUM palette. Brand red accent as the only chromatic colour.
   Mobile-first. Single file, no build step. */

:root{
  /* ─── DARK SURFACES (4-step depth) ─── */
  --bg:        #0A0A0A;      /* page background */
  --surface:   #141414;      /* cards, sections */
  --surface-2: #1d1d1d;      /* elevated cards / hover */
  --surface-3: #262626;      /* nav scrolled, modals */
  --line:      rgba(255,255,255,.08);   /* hairlines */
  --line-2:    rgba(255,255,255,.16);   /* stronger hairlines */

  /* ─── TEXT (warm-bone, not pure white — easier on dark) ─── */
  --text:        #EFECE7;    /* body */
  --text-strong: #FFFFFF;    /* headings */
  --muted:       #8A8A85;    /* secondary text */
  --muted-2:     #6B6B68;    /* tertiary */

  /* ─── BRAND RED (locked, sampled from logo) ─── */
  --red:        #ED0003;
  --red-hover:  #FF1A1D;     /* on dark, hover goes brighter not darker */
  --red-soft:   rgba(237,0,3,.12);
  --red-glow:   rgba(237,0,3,.35);

  /* ─── LEGACY ALIASES — map old --ink/--paper rules to new dark surfaces.
       Most rules using var(--ink) were either:
         color:var(--ink)  → was dark text on light. Now → light text on dark.
         border:1px var(--ink) → was dark border on light. Now → light hairline.
         background:var(--surface-3) → was dark bg highlight. Now → still dark (surface-3).
       The first two cases are perfectly served by mapping --ink to --text.
       Specific background:var(--surface-3) rules are individually overridden below. */
  --ink:        var(--text);
  --paper:      var(--bg);
  --paper-alt:  var(--surface);
  --black:      #000;
  --red-muted:  var(--red-soft);
  --border:     var(--line);

  /* ─── LAYOUT ─── */
  --sans: 'Inter', system-ui, sans-serif;
  --nav-h: 72px;
  --bottom-nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --wrap: 1540px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:var(--sans);
  background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.6;
  font-variation-settings:'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media(max-width:1024px){
  body{padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom))}
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ──────────────────────────────────────── NAV
   Rock-solid layout:
   • Desktop (>1024px): horizontal top-bar, logo left · links centred · Contact + (optional) burger right
   • Mobile  (≤1024px): top-bar with logo left + burger right; burger opens LEFT slide-in drawer
   No legacy "slide from top" behaviour — drawer comes in from the left side with a dimmed backdrop. */
.nav{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;border-bottom:1px solid transparent;height:var(--nav-h);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change:background;
}
.nav--scrolled{
  background:rgba(0,0,0,.96);
  border-bottom-color:#1a1a1a;
  box-shadow:0 4px 24px -16px rgba(0,0,0,.6);
}
.nav__row{
  max-width:var(--wrap);margin:0 auto;padding:14px 32px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__logo{height:40px;display:block;flex-shrink:0}
.nav__logo img{height:100%;width:auto;display:block}
.nav__links{
  display:flex;gap:30px;align-items:center;flex:1;justify-content:center;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-variation-settings:'wght' 500;
}
.nav__links a{opacity:.78;transition:opacity .2s, color .2s;position:relative;padding:6px 0;color:#fff}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav__links a:hover, .nav__links a.active{opacity:1;color:#fff}
.nav__links a:hover::after, .nav__links a.active::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav__cta{background:var(--red);color:#fff;padding:11px 22px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-variation-settings:'wght' 700;transition:background .2s;white-space:nowrap}
.nav__cta:hover{background:var(--red-hover);color:#fff}
.nav__burger{
  display:none;color:#fff;padding:8px;background:none;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.nav__burger svg{display:block}

/* Tablet + mobile: hide inline links, show burger */
@media(max-width:1024px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
}
@media(max-width:640px){
  .nav__row{padding:12px 20px}
  .nav__cta{padding:9px 14px;font-size:11px}
  .nav__logo{height:34px}
}

/* ── Drawer (mobile sidebar, slides in from LEFT) ── */
.nav__drawer-backdrop{
  position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.nav__drawer-backdrop.open{opacity:1;pointer-events:auto}

.nav__drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:99;
  width:min(360px, 85vw);
  background:#000;color:#fff;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.2,.6,.2,1);
  display:flex;flex-direction:column;
  box-shadow:6px 0 32px -8px rgba(0,0,0,.6);
}
.nav__drawer.open{transform:translateX(0)}
.nav__drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid #1a1a1a;height:var(--nav-h);flex-shrink:0;
}
.nav__drawer__head img{height:30px;width:auto;display:block}
.nav__drawer__close{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:#fff;cursor:pointer;
}
.nav__drawer ul{
  list-style:none;margin:0;padding:24px 24px 32px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;
}
.nav__drawer li{margin:0}
.nav__drawer a{
  display:flex;justify-content:space-between;align-items:center;padding:18px 0;
  color:#fff;font-size:20px;font-variation-settings:'wght' 700;letter-spacing:-.01em;text-transform:uppercase;
  border-bottom:1px solid #1a1a1a;text-decoration:none;
}
.nav__drawer a::after{content:"→";color:var(--red);font-size:20px;transition:transform .2s ease}
.nav__drawer a:hover::after{transform:translateX(4px)}
.nav__drawer .nav__drawer__cta{
  margin:18px 24px 24px;background:var(--red);color:#fff;padding:16px 22px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:'wght' 700;
  text-align:center;transition:background .2s;
  border:0;display:block;border-bottom:0;
}
.nav__drawer .nav__drawer__cta::after{content:""}
.nav__drawer .nav__drawer__cta:hover{background:var(--red-hover)}

/* Lock body scroll when drawer is open */
body.nav-open{overflow:hidden}

/* Skip nav spacer (so content below pushed down below the fixed top bar) */
.nav-spacer{height:var(--nav-h);width:100%}

/* ──────────────────────────────────────── BOTTOM NAV (MOBILE)
   App-style 4-tab bar visible only ≤1024px. Borrowed from Black_Way driver PWA.
   iPhone notch/home-bar safe via env(safe-area-inset-bottom). */
.bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--line);
  padding:8px 0 calc(8px + var(--safe-bottom));
  height:calc(var(--bottom-nav-h) + var(--safe-bottom));
}
@media(max-width:1024px){.bottom-nav{display:flex}}
.bottom-nav__inner{display:flex;width:100%;justify-content:space-around;align-items:stretch}
.bottom-nav__tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 4px;color:var(--muted);text-decoration:none;
  transition:color .2s ease;position:relative;
}
.bottom-nav__tab.is-active{color:var(--text-strong)}
.bottom-nav__tab.is-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:2px;background:var(--red);
}
.bottom-nav__tab svg{width:22px;height:22px;flex-shrink:0;stroke-width:1.8}
.bottom-nav__tab__label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:'wght' 700}
.bottom-nav__tab.is-active svg{stroke:var(--red)}

/* ──────────────────────────────────────── HERO */
.hero{
  position:relative;min-height:calc(100vh - var(--nav-h));
  padding:120px 32px 100px;overflow:hidden;background:var(--bg);
}
.hero__video-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.hero__video-bg video{width:100%;height:100%;object-fit:cover;opacity:.92}
/* Dark theme overlay: subtle dark wash from left for headline legibility, video stays prominent */
.hero__video-bg.has-video::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.25) 70%, rgba(10,10,10,.55) 100%),
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, transparent 35%, rgba(10,10,10,.65) 100%);
}
.hero__video-bg:not(.has-video)::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 30%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 30% 40%, rgba(237,0,3,.10) 0%, transparent 55%);
}
/* CSS placeholder until real video swap-in */
.hero__video-bg:not(.has-video)::after{
  content:"";position:absolute;inset:-10%;opacity:.14;
  background:
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(10,10,10,.1) 24px 25px),
    linear-gradient(180deg,transparent 60%,rgba(10,10,10,.2) 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 80%,#000 30%,transparent 85%);
  mask-image:radial-gradient(ellipse 70% 50% at 50% 80%,#000 30%,transparent 85%);
}

.hero__wrap{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto}
.hero__eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  opacity:.7;margin-bottom:24px;
  display:inline-flex;align-items:center;gap:12px;font-variation-settings:'wght' 500;
}
.hero__eyebrow::before{content:"";width:44px;height:1px;background:var(--red)}
.hero__logo{
  display:block;height:clamp(80px,9vw,150px);width:auto;
  margin:0 0 36px -4px;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.45));
}
@media(max-width:480px){
  .hero__logo{height:68px;margin-bottom:20px}
}
/* Hero text on dark theme — make stroke variant visible */
.poster__headline .stroke{-webkit-text-stroke:2px var(--text);color:transparent}
.sect-head h2 .stroke{-webkit-text-stroke:2px var(--text);color:transparent}
/* Hero on mobile — smaller padding, less aggressive headline scaling */
@media(max-width:480px){
  .hero{padding:80px 20px 60px;min-height:auto}
  .poster__headline{font-size:clamp(48px,12vw,72px) !important}
  .poster__rule{display:none}
  .poster__lede{font-size:15px}
}

.poster{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);
  gap:40px;align-items:flex-start;
}
@media(max-width:900px){.poster{grid-template-columns:1fr;gap:32px}.poster__rule{display:none}}
.poster__rule{
  width:4px;height:clamp(380px,62vh,620px);background:var(--red);
  animation:rule-grow 1.2s .2s cubic-bezier(.2,.6,.2,1) both;
  transform-origin:top;
}
@keyframes rule-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.poster__l{padding-top:6px}
.poster__kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;font-variation-settings:'wght' 500}
.poster__headline{
  font-size:clamp(56px,10.5vw,180px);
  line-height:.82;letter-spacing:-.05em;
  font-variation-settings:'wght' var(--h-wght,300);
  transition:font-variation-settings .2s linear;
  text-transform:uppercase;
}
@supports (animation-timeline:scroll(root)){
  .poster__headline{
    animation:wght-morph linear both;
    animation-timeline:scroll(root);
    animation-range:0vh 70vh;
  }
}
@keyframes wght-morph{
  0%  {font-variation-settings:'wght' 250;letter-spacing:-.02em}
  50% {font-variation-settings:'wght' 700;letter-spacing:-.05em}
  100%{font-variation-settings:'wght' 950;letter-spacing:-.06em}
}
.poster__headline .red{color:var(--red)}
.poster__headline .stroke{-webkit-text-stroke:2px var(--ink);color:transparent}

.poster__r{display:flex;flex-direction:column;gap:30px;padding-top:18px}
.poster__lede{font-size:clamp(17px,1.4vw,22px);line-height:1.5;max-width:46ch;color:var(--ink);font-variation-settings:'wght' 400}
.poster__meta{display:flex;gap:40px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px;flex-wrap:wrap}
.poster__meta .item .num,
.poster__meta .item .num b{white-space:nowrap}  /* BUG #16 — keep "£19k–32k" on a single line */
.poster__meta .item{display:flex;flex-direction:column;gap:6px}
.poster__meta .num{font-size:44px;line-height:1;font-variation-settings:'wght' 300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.poster__meta .num b{font-variation-settings:'wght' 800;color:var(--red)}
.poster__meta .lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.poster__actions{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}

/* Speedometer arc mark — scales into view */
.hero__mark{
  position:absolute;right:0;bottom:0;width:44vw;max-width:620px;
  opacity:.92;pointer-events:none;z-index:1;
}
.hero__mark svg{width:100%;height:auto}
.hero__mark .s{fill:var(--red)}

/* ──────────────────────────────────────── BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 700;
  transition:all .25s ease;border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;
}
.btn--red{background:var(--red);color:#fff;box-shadow:0 0 0 0 var(--red-glow);transition:all .25s ease,box-shadow .35s ease}
.btn--red:hover{background:var(--red-hover);color:#fff;box-shadow:0 0 0 6px var(--red-glow)}
/* "ink" = inverted button on dark theme = light pill */
.btn--ink{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--ink:hover{background:var(--text-strong);color:var(--bg);border-color:var(--text-strong)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text-strong);border-color:var(--text)}
.btn--outline-white{background:transparent;color:var(--text);border-color:var(--text)}
.btn--outline-white:hover{background:var(--text);color:var(--bg)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ──────────────────────────────────────── MARQUEE (velocity) */
.marquee{
  background:var(--surface-3);color:#fff;padding:32px 0;overflow:hidden;position:relative;
  border-top:none;
}
/* Soft fade-in mask so the words don't appear cut at the edges */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg, var(--ink), transparent)}
.marquee::after{right:0;background:linear-gradient(270deg, var(--ink), transparent)}
.marquee__track{
  display:flex;gap:48px;white-space:nowrap;will-change:transform;
  animation:mq 50s linear infinite;
  font-size:clamp(20px,3vw,40px);font-variation-settings:'wght' 700;letter-spacing:-.01em;text-transform:uppercase;
  padding-right:48px;
}
.marquee__track em{font-style:italic;color:var(--red);font-variation-settings:'wght' 300}
.marquee__track span{display:inline-flex;align-items:center;gap:14px}
.marquee__track span::after{content:"◆";color:var(--red);font-size:.4em;opacity:.7}
@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:480px){
  .marquee{padding:20px 0}
  .marquee__track{font-size:18px;gap:32px;padding-right:32px}
  .marquee::before,.marquee::after{width:40px}
}

/* ──────────────────────────────────────── SECTIONS */
section{padding:120px 32px;position:relative}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:60px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--ink)}
.sect-head h2{font-size:clamp(38px,6vw,104px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;font-variation-settings:'wght' 800;max-width:16ch}
.sect-head h2 .red{color:var(--red)}
.sect-head h2 .stroke{-webkit-text-stroke:2px var(--ink);color:transparent}
.sect-head .eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 500;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sect-head .eyebrow::before{content:"";width:30px;height:1px;background:var(--red)}
.sect-link{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:'wght' 700;padding:10px 18px;border:1.5px solid var(--ink);transition:all .2s}
.sect-link:hover{background:var(--surface-3);color:#fff}

/* dark section variant */
.dark{background:var(--black);color:#fff}
.dark .sect-head{border-color:#fff}
.dark .sect-head h2{color:#fff}
.dark .sect-head .eyebrow{color:#9a9a97}
.dark .sect-link{border-color:#fff;color:#fff}
.dark .sect-link:hover{background:var(--surface);color:var(--ink)}
.dark .stroke{-webkit-text-stroke:2px #fff}

/* ──────────────────────────────────────── CARS */
.cars-featured{display:grid;grid-template-columns:1.6fr 1fr;gap:28px}
@media(max-width:900px){.cars-featured{grid-template-columns:1fr}}
.cars-featured__side{display:flex;flex-direction:column;gap:28px}

.cars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* Tablet + small laptop → 2 cols */
@media(max-width:1100px){.cars-grid{grid-template-columns:repeat(2,1fr);gap:22px}}
/* Mobile: 2x2 grid (per spec) — compact card body */
@media(max-width:480px){
  .cars-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .car__body{padding:14px 12px 16px;gap:6px}
  .car__make{font-size:9px;letter-spacing:.14em;margin-bottom:2px}
  .car__model{font-size:13px;line-height:1.2;max-width:none}
  .car__price{font-size:15px}
  .car__specs{font-size:10px;gap:4px 10px;padding-top:6px;border-top-width:1px}
  .car__specs span::before{width:2px;height:2px}
  .car__cta{font-size:9px;letter-spacing:.08em;margin-top:4px;gap:6px}
  .car__badges{top:8px;left:8px;gap:4px}
  .badge{font-size:8px;padding:3px 6px;letter-spacing:.08em}
  .car__gallery-hint{padding:3px 7px;font-size:8px;top:8px;right:8px}
  .car__gallery-hint svg{display:none}
}

/* (legacy .listing card overrides removed — new /cars layout uses .stock-section) */

.car{
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .3s;
  text-decoration:none;color:inherit;
}
.car:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -22px rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.10);
  border-color:var(--ink);
}
.car__img{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(145deg,#2a2a2a 0%,#0a0a0a 60%,#000 100%);
}
.car--big .car__img{aspect-ratio:4/3}
.car__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;position:relative;z-index:1}
.car:hover .car__img img{transform:scale(1.03);filter:contrast(1.05) saturate(.92)}
/* Brand-themed placeholder — large silhouette + brand stripe + photo-coming label */
.car__img::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 65%, rgba(237,0,3,.22) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' fill='none'><path d='M60 160 L80 110 Q90 95 110 92 L170 88 Q195 80 220 80 L270 80 Q300 85 320 105 L340 160 L360 165 Q370 168 370 178 L370 195 Q370 205 360 205 L310 205 Q305 220 290 220 Q275 220 270 205 L130 205 Q125 220 110 220 Q95 220 90 205 L40 205 Q30 205 30 195 L30 178 Q30 168 40 165 Z M120 160 Q120 135 145 135 Q170 135 170 160 M230 160 Q230 135 255 135 Q280 135 280 160' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.8' fill='rgba(255,255,255,0.025)'/></svg>") center/85% no-repeat;
  z-index:0;
}
.car__img::after{
  content:attr(data-label);
  position:absolute;inset:auto 0 18px 0;text-align:center;z-index:1;
  color:rgba(255,255,255,.55);font-variation-settings:'wght' 600;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;
}
.car__img.has-img::before,.car__img.has-img::after{display:none}
/* Gallery indicator — small camera/count chip top-right, hints there are photos to scroll */
.car__gallery-hint{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);color:#fff;
  padding:6px 10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 700;
}
.car__gallery-hint svg{width:12px;height:12px;flex-shrink:0}

/* Brand colour accents (left border line) */
.car__img--bmw      { box-shadow:inset 4px 0 0 0 rgba(0,102,177,.7)}
.car__img--audi     { box-shadow:inset 4px 0 0 0 rgba(187,30,46,.7)}
.car__img--vw       { box-shadow:inset 4px 0 0 0 rgba(0,30,78,.7)}
.car__img--mercedes { box-shadow:inset 4px 0 0 0 rgba(154,156,158,.85)}
.car__img--ford     { box-shadow:inset 4px 0 0 0 rgba(0,50,160,.7)}
.car__img--vauxhall { box-shadow:inset 4px 0 0 0 rgba(237,177,28,.7)}
.car__img--toyota   { box-shadow:inset 4px 0 0 0 rgba(235,0,0,.7)}
.car__img--kia      { box-shadow:inset 4px 0 0 0 rgba(187,22,36,.7)}
.car__img--nissan   { box-shadow:inset 4px 0 0 0 rgba(199,0,0,.7)}
.car__img--mini     { box-shadow:inset 4px 0 0 0 rgba(0,0,0,.85)}
.car__badges{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px;z-index:2;align-items:flex-start}
.badge{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:var(--surface-3);color:#fff;font-variation-settings:'wght' 700}
.badge--red{background:var(--red)}
.badge--outline{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.car__status{position:absolute;top:16px;right:16px;z-index:2;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:6px 10px;background:rgba(255,255,255,.94);color:var(--ink);font-variation-settings:'wght' 700}
.car__status--sold{background:var(--surface-3);color:#fff}
.car__status--reserved{background:var(--red);color:#fff}

.car__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--ink);background:var(--surface)}
.car__head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.car__make{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600;margin-bottom:2px}
.car__model{font-size:20px;letter-spacing:-.01em;font-variation-settings:'wght' 800;line-height:1.18;max-width:22ch}
.car--big .car__model{font-size:clamp(28px,2.8vw,42px)}
.car__price{font-size:24px;letter-spacing:-.01em;font-variation-settings:'wght' 900;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.car--big .car__price{font-size:44px}
.car__specs{display:flex;gap:10px 18px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-variation-settings:'wght' 600;padding-top:10px;border-top:1px solid #e8e8e3}
.car__specs span{display:inline-flex;align-items:center;gap:6px}
.car__specs span::before{content:"";width:3px;height:3px;background:var(--red);border-radius:50%}
.car__cta{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:'wght' 700;display:inline-flex;align-items:center;gap:10px}
.car__cta::after{content:"→";color:var(--red);transition:transform .2s}
.car:hover .car__cta::after{transform:translateX(4px)}
.car__cta--static{color:var(--muted)}
.car__cta--static::after{content:"·"}
/* Sold (archive) cars render as <div>, not <a> — no hover lift, subtle desaturation.
   Visual cue that these are social-proof, not buyable. */
.car--sold{cursor:default}
.car--sold .car__img{filter:saturate(.55) contrast(.95)}
.car--sold:hover{transform:none;box-shadow:none}

/* ──────────────────────────────────────── PRICE BUCKETS */
.price-band{background:var(--paper-alt)}
.buckets{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink)}
@media(max-width:900px){.buckets{grid-template-columns:repeat(2,1fr)}}
.bkt{padding:48px 28px 38px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper-alt);transition:background .3s,color .3s;position:relative;cursor:pointer}
.bkt:nth-child(4n){border-right:none}
@media(max-width:900px){.bkt:nth-child(2n){border-right:none}.bkt:nth-child(4n){border-right:1px solid var(--ink)}}
.bkt:hover{background:var(--surface-3);color:#fff}
.bkt:hover .bkt__count{color:var(--red)}
.bkt:hover .bkt__arr::after{transform:translateX(6px)}
.bkt__range{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-variation-settings:'wght' 700}
.bkt__count{font-size:74px;line-height:1;font-variation-settings:'wght' 900;letter-spacing:-.05em;color:var(--ink);transition:color .3s}
.bkt__arr{margin-top:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variation-settings:'wght' 700;display:inline-flex;align-items:center;gap:10px}
.bkt__arr::after{content:"→";transition:transform .25s;color:var(--red)}

/* ──────────────────────────────────────── SERVICES (numbered rows, dark) */
.svc-list{display:flex;flex-direction:column;border-top:1px solid #222}
.svc-row{display:grid;grid-template-columns:80px 1.2fr 2fr 60px;gap:32px;padding:32px 0;border-bottom:1px solid #222;align-items:center;transition:background .25s;text-decoration:none;color:inherit;font-variation-settings:'wght' 500}
.svc-row:hover{background:#0f0f0f;padding-left:12px;padding-right:12px}
.svc-row:hover .svc-row__arr{color:var(--red);transform:translateX(6px)}
.svc-row__num{font-size:14px;letter-spacing:.22em;color:var(--red);font-variation-settings:'wght' 700}
.svc-row__title{font-size:clamp(24px,2.6vw,40px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;font-variation-settings:'wght' 700}
.svc-row__desc{font-size:15px;color:#b0b0ad;line-height:1.55;max-width:60ch}
.svc-row__arr{font-size:22px;text-align:right;transition:all .25s}
@media(max-width:900px){
  .svc-row{grid-template-columns:60px 1fr;grid-template-rows:auto auto auto}
  .svc-row__desc{grid-column:1/-1}
  .svc-row__arr{grid-row:1;grid-column:2;text-align:right}
}

/* ──────────────────────────────────────── ABOUT */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:48px}}
.about__img{aspect-ratio:3/4;background:linear-gradient(160deg,#2a2a2a,#0a0a0a);position:relative;border:1px solid var(--ink);overflow:hidden}
.about__img::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.3);font-variation-settings:'wght' 400;font-size:14px;letter-spacing:.02em;pointer-events:none}
.about__img.has-img::after{display:none}
.about__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ──────────────────────────────────────── PAGE FEATURE BLOCK
   Editorial split — image one side, copy the other.
   Used on internal pages (part-exchange, warranty) to break up the form/spec sections. */
.page-feature{padding:80px 32px;background:var(--paper-alt);border-bottom:1px solid var(--ink)}
.page-feature__inner{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
@media(max-width:900px){
  .page-feature{padding:48px 20px}
  .page-feature__inner{grid-template-columns:1fr;gap:32px}
  .page-feature__inner--reverse{display:flex;flex-direction:column-reverse}
}
.page-feature__img{
  aspect-ratio:16/10;border:1px solid var(--ink);overflow:hidden;
  background:linear-gradient(160deg,#1a1a1a,#000);
}
.page-feature__img img{width:100%;height:100%;object-fit:cover;display:block}
.page-feature__copy h2{
  font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wght' 800;
  margin-bottom:18px;
}
.page-feature__copy h2 .red{color:var(--red)}
.page-feature__copy .eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;display:inline-flex;align-items:center;gap:12px;font-variation-settings:'wght' 500;
}
.page-feature__copy .eyebrow::before{content:"";width:30px;height:1px;background:var(--red)}
.page-feature__copy p{font-size:16px;line-height:1.7;color:var(--ink);max-width:54ch}

/* Wide variant: cinematic banner strip on top + centred copy below */
.page-feature--wide{padding:0;background:var(--paper);border-bottom:1px solid var(--ink)}
.page-feature__banner{
  position:relative;width:100%;
  height:280px;max-height:32vh;
  overflow:hidden;border-bottom:1px solid var(--ink);
  background:linear-gradient(160deg,#1a1a1a,#000);
}
@media(max-width:640px){.page-feature__banner{height:200px}}
.page-feature__banner img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 14s ease-out;
}
.page-feature--wide:hover .page-feature__banner img{transform:scale(1.04)}
.page-feature__copy-wide{
  max-width:880px;margin:0 auto;padding:64px 32px;
}
.page-feature__copy-wide .eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;display:inline-flex;align-items:center;gap:12px;font-variation-settings:'wght' 500;
}
.page-feature__copy-wide .eyebrow::before{content:"";width:30px;height:1px;background:var(--red)}
.page-feature__copy-wide h2{
  font-size:clamp(32px,4.6vw,64px);line-height:.95;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:'wght' 800;margin-bottom:24px;
}
.page-feature__copy-wide h2 .red{color:var(--red)}
.page-feature__copy-wide p{font-size:17px;line-height:1.65;color:var(--ink);max-width:62ch;margin-bottom:14px}
@media(max-width:640px){
  .page-feature__banner{aspect-ratio:16/10;max-height:none}
  .page-feature__copy-wide{padding:40px 20px}
  .page-feature__copy-wide h2{font-size:clamp(28px,8vw,40px)}
}
.about h2{font-size:clamp(36px,5vw,84px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;font-variation-settings:'wght' 800;margin-bottom:28px}
.about h2 .red{color:var(--red)}
.about p{font-size:17px;line-height:1.65;color:var(--ink);max-width:54ch;margin-bottom:18px;font-variation-settings:'wght' 400}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--ink)}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__n{font-size:clamp(42px,4vw,58px);line-height:1;font-variation-settings:'wght' 900;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat__n .red{color:var(--red)}
.stat__l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 500}

/* ──────────────────────────────────────── FAQ (accordion, editorial) */
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--ink);padding:0}
.faq-item>summary{
  list-style:none;cursor:pointer;padding:28px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:clamp(18px,2vw,26px);font-variation-settings:'wght' 700;letter-spacing:-.01em;
  transition:padding .2s ease, color .2s ease;
}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"+";font-size:28px;color:var(--red);font-variation-settings:'wght' 300;
  transition:transform .3s ease;flex-shrink:0;width:32px;text-align:center;line-height:1;
}
.faq-item[open]>summary::after{transform:rotate(45deg)}
.faq-item>summary:hover{padding-left:8px;padding-right:8px}
.faq-body{padding:0 0 28px;max-width:70ch}
.faq-body p{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:12px;font-variation-settings:'wght' 400}
.faq-body a{color:var(--red);border-bottom:1px solid var(--red)}
.faq-body a:hover{color:var(--red-hover)}

/* ──────────────────────────────────────── CTA BAND */
.cta{background:var(--red);color:#fff;padding:100px 32px}
.cta .wrap{display:flex;gap:48px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-variation-settings:'wght' 900;max-width:18ch}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ──────────────────────────────────────── INVENTORY LISTING PAGE */
.page-head{background:var(--paper);padding:48px 32px 40px;border-bottom:1px solid var(--ink)}
.page-head h1{font-size:clamp(36px,6vw,84px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase;font-variation-settings:'wght' 900;margin-bottom:12px}
.page-head h1 .red{color:var(--red)}
.page-head .crumbs{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;font-variation-settings:'wght' 500}
.page-head .crumbs a{color:var(--muted)}
.page-head .crumbs a:hover{color:var(--red)}
.page-head .crumbs + * {margin-top:6px}
.page-head .lede{font-size:17px;line-height:1.55;color:var(--muted);max-width:60ch;margin-top:8px}

/* Legacy .listing layout — kept for any old pages but new /cars uses .stock-section */
.listing{
  display:block;padding:48px 32px 80px;max-width:var(--wrap);margin:0 auto;
}
@media(max-width:1000px){.listing{padding:32px 20px 60px}}

/* ──────────────────────────────────────── STOCK PAGE (new layout)
   Top toolbar + collapsible filter drawer + full-width grid below. */
.stock-section{padding:32px 32px 80px;max-width:var(--wrap);margin:0 auto}
@media(max-width:640px){.stock-section{padding:20px 20px 60px}}

.stock-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  margin-bottom:32px;
}
.stock-toolbar__toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-variation-settings:'wght' 700;
  cursor:pointer;transition:background .2s, color .2s;
}
.stock-toolbar__toggle:hover{background:var(--surface-3);color:#fff}
.stock-toolbar__toggle[aria-expanded="true"]{background:var(--red);color:#fff;border-color:var(--red)}
.stock-toolbar__toggle svg{flex-shrink:0}
.stock-toolbar__count{font-size:13px;color:var(--muted);font-variation-settings:'wght' 600;letter-spacing:.04em}
.stock-toolbar__count b{color:var(--ink);font-variation-settings:'wght' 800;font-size:16px}
.stock-toolbar__sort{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600;
}
.stock-toolbar__sort select{
  padding:9px 12px;border:1px solid var(--ink);background:var(--surface);
  font-family:inherit;font-size:13px;font-variation-settings:'wght' 600;cursor:pointer;
}
@media(max-width:640px){
  .stock-toolbar{gap:10px;padding:14px 0;margin-bottom:22px}
  .stock-toolbar__toggle{padding:9px 14px;font-size:10px}
  .stock-toolbar__count{font-size:11px;flex:1}
  .stock-toolbar__count b{font-size:14px}
  .stock-toolbar__sort{margin-left:0;width:100%;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
  .stock-toolbar__sort select{flex:1;max-width:200px}
}

.stock-filters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:24px;background:var(--paper-alt);border:1px solid var(--ink);
  margin-bottom:32px;
}
.stock-filters[hidden]{display:none}
@media(max-width:900px){.stock-filters{grid-template-columns:repeat(2,1fr);gap:14px;padding:18px}}
@media(max-width:480px){.stock-filters{grid-template-columns:1fr;padding:14px}}
.stock-filters .filter{margin:0}
.stock-filters .filters__actions{
  grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;
  border-top:1px solid var(--border);padding-top:16px;margin-top:0;
}
@media(max-width:480px){.stock-filters .filters__actions .btn{flex:1;justify-content:center}}

/* Cars grid — applies to homepage Recently Sold + Stock page */
.cars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1100px){.cars-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:480px){
  .cars-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .car__body{padding:14px 12px 16px;gap:6px}
  .car__make{font-size:9px;letter-spacing:.14em;margin-bottom:2px}
  .car__model{font-size:13px;line-height:1.2;max-width:none}
  .car__price{font-size:15px}
  .car__specs{font-size:10px;gap:4px 10px;padding-top:6px;border-top-width:1px}
  .car__specs span::before{width:2px;height:2px}
  .car__cta{font-size:9px;letter-spacing:.08em;margin-top:4px;gap:6px}
  .car__badges{top:8px;left:8px;gap:4px}
  .badge{font-size:8px;padding:3px 6px;letter-spacing:.08em}
  .car__gallery-hint{padding:3px 7px;font-size:8px;top:8px;right:8px}
  .car__gallery-hint svg{display:none}
}
.filters h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-variation-settings:'wght' 800;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.filter{margin-bottom:22px}
.filter label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-variation-settings:'wght' 600}
.filter select,.filter input[type=number],.filter input[type=text]{
  width:100%;padding:10px 12px;border:1px solid var(--border);background:var(--surface);
  font-variation-settings:'wght' 500;font-size:14px;
}
.filter select:focus,.filter input:focus{outline:none;border-color:var(--red)}
.filter-range{display:flex;gap:8px}
.filters__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.filters__actions .btn{padding:10px 14px;font-size:11px}

.listing__main{display:flex;flex-direction:column;gap:24px}
.listing__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.listing__count{font-size:13px;color:var(--muted);font-variation-settings:'wght' 500}
.listing__count b{color:var(--ink);font-variation-settings:'wght' 800}
.listing__sort{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.listing__sort select{padding:8px 12px;border:1px solid var(--border);font-size:13px}
.cars-empty{grid-column:1/-1;text-align:center;padding:80px 20px;border:1px dashed var(--border);background:var(--paper-alt)}
.cars-empty p{font-size:15px;color:var(--muted)}
.cars-empty .link{background:none;border:0;color:var(--red);text-decoration:underline;cursor:pointer;font:inherit;font-variation-settings:'wght' 700}
.cars-empty .link:hover{color:var(--red-hover)}
.car--hidden{display:none !important}

/* ──────────────────────────────────────── VEHICLE DETAIL PAGE
   BUG #18 — wider on big screens (1480px max), zoom-cursor on main photo. */
.v-detail{padding:0 0 80px}
.v-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,4vw,3rem);padding:clamp(2rem,4vw,3.5rem) clamp(1rem,4vw,2.5rem);max-width:1480px;margin:0 auto;align-items:start}
.v-hero > *{min-width:0}
.v-gallery__main{cursor:zoom-in}
@media(max-width:1000px){.v-hero{grid-template-columns:1fr;gap:32px;padding:32px 20px}}

.v-gallery{position:relative}
.v-gallery__main{
  position:relative;aspect-ratio:4/3;border:1px solid var(--ink);overflow:hidden;
  background:#000;
  cursor:zoom-in;
  user-select:none;
}
.v-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .4s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;justify-content:center;
}
.v-slide.is-active{opacity:1;z-index:1}
.v-slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  pointer-events:none;
}
.v-slide__placeholder{
  width:100%;height:100%;position:relative;
  background:linear-gradient(145deg,#2a2a2a 0%,#0a0a0a 60%,#000 100%);
}
.v-slide__placeholder::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 65%, rgba(237,0,3,.22) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' fill='none'><path d='M60 160 L80 110 Q90 95 110 92 L170 88 Q195 80 220 80 L270 80 Q300 85 320 105 L340 160 L360 165 Q370 168 370 178 L370 195 Q370 205 360 205 L310 205 Q305 220 290 220 Q275 220 270 205 L130 205 Q125 220 110 220 Q95 220 90 205 L40 205 Q30 205 30 195 L30 178 Q30 168 40 165 Z M120 160 Q120 135 145 135 Q170 135 170 160 M230 160 Q230 135 255 135 Q280 135 280 160' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2' fill='rgba(255,255,255,0.03)'/></svg>") center/85% no-repeat;
}
.v-slide__placeholder::after{
  content:attr(data-label);position:absolute;inset:auto 0 22px 0;text-align:center;
  color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
}

.v-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border:0;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:26px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;line-height:1;
  border-radius:50%;
  opacity:.7;
  transition:opacity .2s, background .2s, transform .15s;
}
.v-gallery__main:hover .v-nav{opacity:1}
.v-nav:hover{background:rgba(237,0,3,.95);opacity:1}
.v-nav:active{transform:translateY(-50%) scale(.94)}
.v-nav--prev{left:14px}
.v-nav--next{right:14px}
.v-counter{
  position:absolute;bottom:14px;right:14px;z-index:4;
  background:rgba(0,0,0,.75);color:#fff;padding:6px 14px;
  border-radius:99px;
  font-size:11px;letter-spacing:.14em;font-variation-settings:'wght' 700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.v-gallery__thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px;
}
@media(max-width:480px){.v-gallery__thumbs{grid-template-columns:repeat(4,1fr);gap:6px}}
.v-thumb{
  aspect-ratio:4/3;background:#0a0a0a;cursor:pointer;
  border:2px solid transparent;padding:0;overflow:hidden;
  transition:border-color .2s ease, transform .15s, opacity .2s;
  opacity:.55;
  border-radius:4px;
}
.v-thumb:hover{opacity:.85;transform:translateY(-1px)}
.v-thumb.is-active{border-color:var(--red);opacity:1}
.v-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.v-thumb--placeholder{
  background:linear-gradient(145deg,#1a1a1a,#000);color:rgba(255,255,255,.6);
  display:grid;place-items:center;font-size:14px;font-variation-settings:'wght' 700;
}

.v-info{display:flex;flex-direction:column;gap:18px}
.v-make{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600}
.v-model{
  font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;
  font-variation-settings:'wght' 800;text-transform:none;margin:0;
}
.v-price{
  font-size:clamp(40px,4vw,58px);line-height:1;font-variation-settings:'wght' 900;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.v-badges{display:flex;gap:6px;flex-wrap:wrap}
.v-specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;
  padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.v-spec{display:flex;flex-direction:column;gap:2px}
.v-spec__k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600}
.v-spec__v{font-size:15px;font-variation-settings:'wght' 700;letter-spacing:-.005em}

.v-highlights{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;
}
@media(max-width:600px){.v-highlights{grid-template-columns:1fr}}
.v-highlights li{
  font-size:13px;line-height:1.5;padding-left:16px;position:relative;color:var(--ink);
}
.v-highlights li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--red);
}

.v-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
@media(max-width:600px){.v-actions .btn{flex:1;justify-content:center}}

.v-description{max-width:var(--wrap);margin:0 auto;padding:32px 32px 0}
.v-description h2{font-size:clamp(22px,2.4vw,32px);font-variation-settings:'wght' 800;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:14px}
.v-description p{font-size:16px;line-height:1.7;color:var(--text);max-width:70ch}

.v-finance{max-width:var(--wrap);margin:0 auto;padding:48px 32px 32px}
@media(max-width:480px){.v-finance{padding:32px 20px 24px}}
.finance-calc--inline{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding:0}
@media(max-width:900px){.finance-calc--inline{grid-template-columns:1fr;gap:18px}}

.v-sticky-bar{
  position:fixed;bottom:0;left:0;right:0;background:var(--surface-3);color:#fff;
  padding:12px 16px;display:none;z-index:50;gap:8px;justify-content:center;
  box-shadow:0 -8px 24px rgba(0,0,0,.2);
}
@media(max-width:700px){
  .v-sticky-bar{display:flex}
  .v-sticky-bar .btn{flex:1;justify-content:center;padding:14px 12px;font-size:11px}
  .v-detail{padding-bottom:96px}
}

.v-info{display:flex;flex-direction:column;gap:20px}
.v-make{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 500}
.v-model{font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;font-variation-settings:'wght' 800}
.v-price{font-size:clamp(40px,4vw,58px);line-height:1;font-variation-settings:'wght' 900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.v-spec{display:flex;flex-direction:column;gap:2px}
.v-spec__k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 500}
.v-spec__v{font-size:16px;font-variation-settings:'wght' 700;letter-spacing:-.005em}
.v-badges{display:flex;gap:6px;flex-wrap:wrap}
.v-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.v-sticky-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface-3);color:#fff;padding:12px 16px;display:none;z-index:50;gap:8px;justify-content:center;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
@media(max-width:700px){.v-sticky-bar{display:flex}.v-sticky-bar a{flex:1;justify-content:center;padding:14px 12px;font-size:11px}}

/* ──────────────────────────────────────── FINANCE CALCULATOR */
.finance-calc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:60px 32px}
@media(max-width:900px){.finance-calc{grid-template-columns:1fr;gap:32px}}
.calc-form{border:1px solid var(--ink);padding:32px;background:var(--surface)}
.calc-form h2{font-size:22px;font-variation-settings:'wght' 800;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.calc-field{margin-bottom:20px}
.calc-field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-variation-settings:'wght' 600}
.calc-field input[type=number],.calc-field input[type=range],.calc-field select{width:100%;padding:12px 14px;border:1px solid var(--border);font-size:16px;font-variation-settings:'wght' 600;font-variant-numeric:tabular-nums}
.calc-field input:focus{outline:none;border-color:var(--red)}
.calc-terms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-term{padding:12px;text-align:center;border:1px solid var(--border);background:var(--surface);font-size:13px;font-variation-settings:'wght' 700;cursor:pointer;transition:all .2s}
.calc-term.active{background:var(--surface-3);color:#fff;border-color:var(--ink)}

.calc-result{border:1px solid var(--ink);padding:32px;background:var(--surface-3);color:#fff;display:flex;flex-direction:column;gap:20px;min-height:360px}
.calc-result h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9a9a97;font-variation-settings:'wght' 600}
.calc-monthly{font-size:clamp(56px,8vw,112px);line-height:.88;font-variation-settings:'wght' 900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.calc-monthly small{font-size:.25em;opacity:.6;letter-spacing:.04em;font-variation-settings:'wght' 400}
.calc-summary{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-top:1px solid #222;border-bottom:1px solid #222}
.calc-summary .row{display:flex;justify-content:space-between;font-size:13px}
.calc-summary .row span:first-child{color:#9a9a97;letter-spacing:.06em}
.calc-summary .row span:last-child{font-variation-settings:'wght' 700;font-variant-numeric:tabular-nums}
.calc-disclaimer{font-size:11px;color:#6b6b68;line-height:1.55;letter-spacing:.02em;margin-top:auto}

/* ──────────────────────────────────────── FORMS (contact, part-ex, inquiry) */
.form-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:60px 32px;align-items:start}
@media(max-width:900px){.form-block{grid-template-columns:1fr;gap:32px}}
.form-block__intro h2{font-size:clamp(32px,4.5vw,64px);line-height:.95;font-variation-settings:'wght' 800;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:18px}
.form-block__intro h2 .red{color:var(--red)}
.form-block__intro p{font-size:17px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.form-block__intro .meta-line{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--border);font-size:13px;font-variation-settings:'wght' 500}
.form-block__intro .meta-line strong{font-variation-settings:'wght' 800;color:var(--ink)}

form.pp-form{border:1px solid var(--ink);padding:32px;background:var(--surface);display:flex;flex-direction:column;gap:18px}
form.pp-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){form.pp-form .row{grid-template-columns:1fr}}
form.pp-form label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-variation-settings:'wght' 600}
form.pp-form input,form.pp-form select,form.pp-form textarea{width:100%;padding:12px 14px;border:1px solid var(--border);font-size:16px;font-variation-settings:'wght' 500;background:var(--surface)}
form.pp-form textarea{min-height:140px;resize:vertical;font-family:inherit}
form.pp-form input:focus,form.pp-form select:focus,form.pp-form textarea:focus{outline:none;border-color:var(--red)}
form.pp-form .consent{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.5}
form.pp-form .consent input{width:auto;margin-top:3px}
form.pp-form .btn{justify-content:center;margin-top:4px}
form.pp-form .success{padding:14px;background:#E8F5ED;border:1px solid #0A9656;font-size:14px;color:#0A5D36}
form.pp-form .error{padding:14px;background:var(--red-muted);border:1px solid var(--red);font-size:14px;color:var(--red-hover)}

/* ──────────────────────────────────────── LEGAL TEXT PAGES */
.prose{max-width:760px;margin:0 auto;padding:60px 32px 100px}
.prose h1{font-size:clamp(36px,5vw,64px);line-height:.95;font-variation-settings:'wght' 900;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px}
.prose .meta{font-size:11px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin-bottom:40px;font-variation-settings:'wght' 500}
.prose h2{font-size:22px;font-variation-settings:'wght' 800;letter-spacing:-.01em;text-transform:uppercase;margin:32px 0 12px}
.prose h3{font-size:17px;font-variation-settings:'wght' 800;margin:22px 0 8px}
.prose p,.prose li{font-size:16px;line-height:1.7;color:#222;margin-bottom:14px}
.prose ul,.prose ol{margin-left:22px;margin-bottom:18px}
.prose a{color:var(--red);border-bottom:1px solid var(--red)}
.prose a:hover{color:var(--red-hover)}

/* ──────────────────────────────────────── FOOTER */
footer{background:var(--black);color:#a3a3a0;padding:80px 32px 40px}
.foot-top{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}
.foot-logo{height:56px;margin-bottom:24px;display:block}
.foot-logo img{height:100%;width:auto}
.foot-brand p{font-size:13px;line-height:1.7;max-width:320px;font-variation-settings:'wght' 400}
.foot-contact{display:flex;flex-direction:column;gap:6px;margin-top:18px;font-size:13px}
.foot-contact a{opacity:.85}
.foot-contact a:hover{color:var(--red);opacity:1}
footer h4{color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;font-variation-settings:'wght' 700}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px}
footer ul a{opacity:.72;transition:all .2s}
footer ul a:hover{opacity:1;color:var(--red)}
.foot-bottom{max-width:var(--wrap);margin:0 auto;padding-top:28px;border-top:1px solid #1a1a1a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#595955}
.foot-bottom a{color:#9a9a97}
.foot-bottom a:hover{color:var(--red)}

/* ──────────────────────────────────────── PROMO POPUP */
.promo-popup{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  animation:fade-in .3s ease-out;
}
.promo-popup.open{display:flex}
.promo-popup__card{
  position:relative;background:var(--paper);max-width:520px;width:100%;padding:48px 40px 40px;
  border:2px solid var(--ink);box-shadow:0 24px 72px -16px rgba(0,0,0,.4);
  animation:slide-up .4s cubic-bezier(.2,.6,.2,1);
}
.promo-popup--dark .promo-popup__card{background:var(--surface-3);color:#fff;border-color:var(--ink)}
.promo-popup--red .promo-popup__card{background:var(--red);color:#fff;border-color:var(--red)}
.promo-popup__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid currentColor;opacity:.6;font-size:16px;transition:opacity .2s}
.promo-popup__close:hover{opacity:1}
.promo-popup__kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:14px;opacity:.7;font-variation-settings:'wght' 600;display:inline-flex;align-items:center;gap:10px}
.promo-popup__kicker::before{content:"";width:30px;height:1px;background:currentColor}
.promo-popup__headline{font-size:clamp(28px,4vw,44px);line-height:.95;font-variation-settings:'wght' 900;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:14px}
.promo-popup__sub{font-size:15px;line-height:1.5;margin-bottom:24px;opacity:.9}
.promo-popup__cta{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:var(--surface-3);color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:'wght' 700;transition:background .2s}
.promo-popup--dark .promo-popup__cta{background:var(--red)}
.promo-popup--red .promo-popup__cta{background:var(--surface-3)}
.promo-popup__cta:hover{background:var(--red)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ──────────────────────────────────────── COOKIE BANNER */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
  background:var(--surface-3);color:#fff;padding:22px 26px;
  box-shadow:0 16px 48px -8px rgba(0,0,0,.4);border:1px solid var(--ink);
  display:none;align-items:center;gap:20px;flex-wrap:wrap;
  animation:slide-up-banner .4s cubic-bezier(.2,.6,.2,1);
  max-width:900px;margin:0 auto;
}
.cookie-banner.show{display:flex}
.cookie-banner__text{flex:1;font-size:13px;line-height:1.5;min-width:260px}
.cookie-banner__text a{color:var(--red);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-banner .btn{padding:10px 16px;font-size:11px;letter-spacing:.12em}
@keyframes slide-up-banner{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ──────────────────────────────────────── REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ──────────────────────────────────────── UTIL */
.text-muted{color:var(--muted)}
.text-red{color:var(--red)}
.mt-auto{margin-top:auto}
.hidden{display:none!important}

/* ──────────────────────────────────────── INQUIRIES FORM — BRANDED (BUG #22)
   Renders for [pp:inquiries:form] shortcode on contact / part-exchange / vehicle detail. */
form.pp-inquiries-form{
  display:flex;flex-direction:column;gap:1rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:2rem;
  position:relative;
}
form.pp-inquiries-form::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;
  width:3px;background:var(--red);border-radius:0 3px 3px 0;
}
form.pp-inquiries-form .pp-form-title{
  font-size:1.45rem;font-weight:800;letter-spacing:-.01em;
  color:var(--text-strong);margin:0 0 .4rem;
}
form.pp-inquiries-form > label{
  display:flex;flex-direction:column;gap:.45rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
form.pp-inquiries-form input,
form.pp-inquiries-form select,
form.pp-inquiries-form textarea{
  width:100%;box-sizing:border-box;
  background:var(--bg);color:var(--text);
  border:1px solid var(--line-2);border-radius:10px;
  padding:.85rem 1rem;font:1rem var(--sans);
  letter-spacing:0;text-transform:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
form.pp-inquiries-form input:focus,
form.pp-inquiries-form select:focus,
form.pp-inquiries-form textarea:focus{
  outline:0;border-color:var(--red);
  background:#0F0F0F;
  box-shadow:0 0 0 4px var(--red-soft);
}
form.pp-inquiries-form textarea{min-height:130px;resize:vertical;line-height:1.55}
form.pp-inquiries-form .pp-checkbox,
form.pp-inquiries-form .pp-consent{
  display:flex;align-items:flex-start;gap:.65rem;
  flex-direction:row;
  font-size:.85rem;color:rgba(239,236,231,.78);
  text-transform:none;letter-spacing:0;font-weight:400;
}
form.pp-inquiries-form .pp-consent input[type=checkbox]{
  margin-top:2px;flex-shrink:0;
  width:18px;height:18px;
  accent-color:var(--red);
}
form.pp-inquiries-form button[type="submit"]{
  background:var(--red);color:#fff;
  padding:1rem 2rem;border-radius:999px;
  font:700 1rem var(--sans);letter-spacing:.04em;text-transform:uppercase;
  border:0;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
form.pp-inquiries-form button[type="submit"]:hover{
  background:var(--red-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--red-soft);
}
form.pp-inquiries-form .pp-alert{
  padding:.9rem 1.1rem;border-radius:10px;
  font-size:.92rem;line-height:1.5;
  animation:ppFadeSlide .35s ease-out;
}
form.pp-inquiries-form .pp-alert-ok{background:rgba(46,204,113,.12);color:#4ade80;border-left:3px solid #2ECC71}
form.pp-inquiries-form .pp-alert-ok::before{content:"✓ ";font-weight:800}
form.pp-inquiries-form .pp-alert-error{background:rgba(231,76,60,.12);color:#fca5a5;border-left:3px solid #E74C3C}
form.pp-inquiries-form .pp-alert-error::before{content:"✕ ";font-weight:800}
@keyframes ppFadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
  form.pp-inquiries-form{padding:1.4rem 1.2rem;border-radius:14px}
  form.pp-inquiries-form button[type="submit"]{width:100%}
}

/* ──────────────────────────────────────── LIGHTBOX (BUG #19)
   Used on /cars/<slug> when there are >1 photos.
   Click main image → opens full-screen overlay with prev/next + counter + swipe + ESC. */
.pp-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(5,5,5,.96);display:grid;place-items:center;animation:ppLbFade .2s ease-out}
.pp-lightbox[hidden]{display:none}
@keyframes ppLbFade{from{opacity:0}to{opacity:1}}
.pp-lightbox__img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pp-lightbox__close,.pp-lightbox__prev,.pp-lightbox__next{
  position:fixed;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(20,20,20,.85);border:1px solid var(--line-2);
  color:#fff;font-size:28px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(8px);transition:background .2s,border-color .2s;
}
.pp-lightbox__close{top:24px;right:24px;transform:none}
.pp-lightbox__prev{left:24px}
.pp-lightbox__next{right:24px}
.pp-lightbox__close:hover,.pp-lightbox__prev:hover,.pp-lightbox__next:hover{background:var(--red);color:#fff;border-color:var(--red)}
.pp-lightbox__counter{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(20,20,20,.85);color:var(--red);padding:10px 22px;border-radius:999px;font:700 13px var(--sans);letter-spacing:.04em}
@media(max-width:720px){
  .pp-lightbox__prev,.pp-lightbox__next{width:44px;height:44px;font-size:22px}
  .pp-lightbox__prev{left:12px}.pp-lightbox__next{right:12px}
  .pp-lightbox__close{top:16px;right:16px;width:44px;height:44px;font-size:22px}
}

/* ──────────────────────────────────────── TRUST STRIP */
.trust-strip{
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:48px 32px;
}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  max-width:var(--wrap);margin:0 auto;
}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:480px){.trust-strip{padding:32px 20px}.trust-grid{gap:24px}}
.trust-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.trust-item__icon{
  width:36px;height:36px;display:grid;place-items:center;
  color:var(--red);border:1px solid var(--line-2);border-radius:50%;
}
.trust-item__icon svg{width:18px;height:18px}
.trust-item__lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600}
.trust-item__val{font-size:18px;font-variation-settings:'wght' 800;letter-spacing:-.01em;color:var(--text-strong)}

/* ──────────────────────────────────────── TESTIMONIALS */
.testimonials{padding:120px 32px;background:var(--bg)}
@media(max-width:480px){.testimonials{padding:64px 20px}}
.testimonials__rating{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
@media(max-width:640px){.testimonials__rating{align-items:flex-start;text-align:left}}
.testimonials__stars{font-size:20px;letter-spacing:.06em;color:var(--red)}
.testimonials__rating-value{font-size:28px;font-variation-settings:'wght' 900;letter-spacing:-.02em;color:var(--text-strong)}
.testimonials__rating-value b{font-variation-settings:'wght' 900}
.testimonials__rating-source{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-variation-settings:'wght' 600}
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1100px){.testimonials__grid{grid-template-columns:1fr;gap:16px}}
.testimonial{
  background:var(--surface);border:1px solid var(--line);padding:32px 28px;
  display:flex;flex-direction:column;gap:18px;
  transition:border-color .25s ease, transform .25s ease;
}
.testimonial:hover{border-color:var(--line-2);transform:translateY(-2px)}
.testimonial__stars{font-size:14px;color:var(--red);letter-spacing:.06em}
.testimonial p{font-size:16px;line-height:1.6;color:var(--text);font-variation-settings:'wght' 400;margin:0}
.testimonial footer{font-size:12px;color:var(--muted);letter-spacing:.04em;font-variation-settings:'wght' 500;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.testimonial footer b{color:var(--text-strong);font-variation-settings:'wght' 700;letter-spacing:0}
@media(max-width:480px){.testimonial{padding:24px 20px}.testimonial p{font-size:15px}}

/* ──────────────────────────────────────── REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST POLISH — applied below all the above rules
   Most UK car-dealer traffic is mobile; this block ensures the site FEELS
   great at 320–640px widths, then 641–900px, then scales up.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Small phones (≤480px) ────────────────────────────────────────────────── */
@media(max-width:480px){
  /* Section padding breathes less aggressively on small screens */
  section{padding:64px 20px}
  .cta{padding:64px 20px}
  .wrap{padding:0 20px}

  /* Hero — big poster headline stays punchy but fits 360-420px viewports */
  .hero{padding:80px 20px 64px;min-height:auto}
  .hero__eyebrow{font-size:10px;margin-bottom:20px}
  .hero__eyebrow::before{width:28px}
  .poster{gap:24px}
  .poster__kicker{font-size:10px;margin-bottom:14px}
  .poster__headline{font-size:clamp(52px,14vw,80px);line-height:.85}
  .poster__lede{font-size:15px;line-height:1.55;max-width:none}
  .poster__meta{gap:20px;padding:18px 0}
  .poster__meta .num{font-size:32px}
  .poster__meta .lbl{font-size:9px}
  .poster__actions .btn{flex:1;justify-content:center}
  .hero__mark{width:90vw;max-width:none;opacity:.6}

  /* Marquee — tighter */
  .marquee{padding:16px 0}
  .marquee__track{font-size:clamp(22px,7vw,30px);gap:36px}
  .marquee__track span{gap:12px}

  /* Section headings — scale down */
  .sect-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px;padding-bottom:20px}
  .sect-head h2{font-size:clamp(32px,9vw,44px);max-width:none}
  .sect-link{font-size:11px;padding:8px 14px}

  /* About — tighter */
  .about{gap:32px}
  .about h2{font-size:clamp(30px,8vw,40px);margin-bottom:20px}
  .about p{font-size:15px}
  .about__stats{gap:16px;margin-top:28px;padding-top:20px}
  .stat__n{font-size:clamp(32px,8vw,42px)}

  /* Dark services rows — single column on small */
  .svc-row{padding:24px 0}
  .svc-row__num{font-size:12px}
  .svc-row__title{font-size:22px}
  .svc-row__desc{font-size:14px}

  /* Budget / body-type buckets — smaller numbers */
  .bkt{padding:32px 20px 26px;gap:10px}
  .bkt__range{font-size:10px}
  .bkt__count{font-size:52px}
  .bkt__arr{font-size:11px}

  /* Cars grid — one column, full bleed within section padding */
  .cars-grid{gap:20px}
  .car__body{padding:18px 18px 22px;gap:8px}
  .car__model{font-size:18px;max-width:none}
  .car__price{font-size:22px}
  .car--big .car__model{font-size:24px}
  .car--big .car__price{font-size:30px}
  .car__specs{font-size:11px;gap:8px 16px}

  /* FAQ */
  .faq-item>summary{padding:22px 0;font-size:16px;gap:12px}
  .faq-item>summary::after{font-size:24px;width:28px}
  .faq-body{padding:0 0 22px}
  .faq-body p{font-size:14px}

  /* CTA band */
  .cta h2{font-size:clamp(30px,8vw,44px)}
  .cta__actions .btn{flex:1;justify-content:center}

  /* Page head (inner pages) */
  .page-head{padding:32px 20px 28px}
  .page-head h1{font-size:clamp(36px,11vw,52px)}
  .page-head .lede{font-size:15px}
  .page-head .crumbs{font-size:10px;margin-bottom:12px}

  /* Cars listing filters — collapsed above grid on mobile */
  .listing{padding:24px 20px 48px;gap:20px}
  .filters{padding:20px}
  .filters h3{font-size:11px;margin-bottom:14px;padding-bottom:10px}
  .filter{margin-bottom:16px}
  .filter label{font-size:10px}
  .filter select,.filter input[type=number]{padding:12px;font-size:15px}
  .filters__actions .btn{flex:1;padding:12px;font-size:11px}
  .listing__bar{flex-direction:column;align-items:stretch}
  .listing__sort{justify-content:space-between}
  .listing__sort select{flex:1;padding:10px 12px}

  /* Forms */
  form.pp-form{padding:22px;gap:14px}
  form.pp-form input,form.pp-form select,form.pp-form textarea{padding:14px;font-size:16px}
  form.pp-form .btn{padding:16px;font-size:13px}
  .form-block{padding:40px 20px;gap:24px}
  .form-block__intro h2{font-size:clamp(28px,8vw,40px)}
  .form-block__intro p{font-size:15px}

  /* Finance calculator */
  .finance-calc{padding:40px 20px;gap:24px}
  .calc-form,.calc-result{padding:24px}
  .calc-monthly{font-size:clamp(48px,14vw,72px)}
  .calc-terms{gap:4px}
  .calc-term{padding:12px 6px;font-size:12px}

  /* Footer */
  footer{padding:56px 20px 32px}
  .foot-top{gap:28px;margin-bottom:40px}
  .foot-logo{height:48px;margin-bottom:20px}
  .foot-brand p{font-size:12px}

  /* Recently sold 2-card homepage uses cars-grid → already 1-col below 720 */
}

/* ── Tablet portrait (481–720px) ──────────────────────────────────────────── */
@media(min-width:481px) and (max-width:720px){
  section{padding:80px 24px}
  .hero{padding:96px 24px 80px}
  .poster__headline{font-size:clamp(64px,12vw,100px)}
  .poster__actions .btn{flex:1;justify-content:center}
  .sect-head h2{font-size:clamp(36px,7vw,56px)}
  .cars-grid{grid-template-columns:repeat(2,1fr)}
  .bkt__count{font-size:58px}
  .listing{padding:32px 24px 64px}
  .filters__actions .btn{flex:1}
}

/* ── Touch targets — all devices with coarse pointer get 44px minimum ─────── */
@media(pointer:coarse){
  .btn{min-height:44px}
  .nav__cta{min-height:44px;display:inline-flex;align-items:center}
  .nav__burger{min-width:44px;min-height:44px}
  .faq-item>summary{min-height:48px}
  .car__cta{min-height:20px;padding:4px 0}
  form.pp-form .btn{min-height:48px}
  .filter select,.filter input[type=number]{min-height:44px}
  .calc-term{min-height:44px}
  .filters__actions .btn{min-height:44px}
  details>summary{cursor:pointer}
}

/* ── Disable hover lift on touch devices (feels janky) ────────────────────── */
@media(hover:none){
  .car:hover{transform:none;box-shadow:none;border-color:var(--border)}
  .svc-row:hover{padding-left:0;padding-right:0;background:transparent}
  .bkt:hover{background:var(--paper-alt);color:var(--ink)}
  .bkt:hover .bkt__count{color:var(--ink)}
  .btn:hover .arr{transform:none}
}

/* ─── Phase 3 additions: vehicle pre-fill notice, similar vehicles, sticky bar 3-button ─── */
.pp-inq-vehicle-ref{padding:14px 18px;background:rgba(237,0,3,.08);border-left:3px solid #ED0003;border-radius:4px;margin:0 0 18px;font-size:14px}
.pp-inq-vehicle-ref__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8A8A85;font-weight:600;margin-right:8px}
.pp-inq-vehicle-ref strong{color:#fff}

.v-similar{padding:60px 0 80px;border-top:1px solid var(--border)}
.v-similar .sect-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.v-similar .cars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
@media(max-width:1100px){.v-similar .cars-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.v-similar .cars-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.v-sticky-bar--3 .btn{padding:12px 14px;font-size:13px}
@media(max-width:480px){.v-sticky-bar--3 .btn{font-size:11px;padding:12px 8px}}

/* ── Multi-video gallery (vehicle detail page) ───────────────────────────── */
.v-videos{padding:60px 0 40px;border-top:1px solid var(--line)}
.v-videos h2{margin:0 0 24px}
.v-videos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.v-videos-grid--single{grid-template-columns:1fr;max-width:680px}
@media(max-width:720px){.v-videos-grid{grid-template-columns:1fr}}
.v-video-tile{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#0e0e0e;
  aspect-ratio:16/9;
}
/* YouTube click-to-play facade */
.v-video__facade{
  position:relative;width:100%;height:100%;
  background-size:cover;background-position:center;
  cursor:pointer;display:grid;place-items:center;
}
.v-video__facade::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.35);transition:background .2s;
}
.v-video__facade:hover::after{background:rgba(0,0,0,.18)}
.v-video__play{
  position:relative;z-index:1;
  background:transparent;border:0;padding:0;cursor:pointer;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition:transform .15s;
}
.v-video__facade:hover .v-video__play{transform:scale(1.08)}
/* Native HTML5 video */
.v-video__native-wrap{width:100%;height:100%}
.v-video__native{width:100%;height:100%;display:block;object-fit:contain;background:#000}

/* ─── Hero centered + quick search widget + trust widgets (2026-05-08) ─── */
.hero__wrap--centered{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 12px}
.hero__wrap--centered .hero__eyebrow{justify-content:center}
.hero__wrap--centered .hero__eyebrow::before{display:none}
.hero__headline{
  font-size:clamp(48px,8vw,128px);line-height:.95;letter-spacing:-.03em;
  font-variation-settings:'wght' 800;text-transform:none;
  margin:8px 0 4px;color:var(--text);max-width:14ch;
}
.hero__headline .red{color:var(--red)}
.hero__headline .stroke{-webkit-text-stroke:2px var(--text);color:transparent}
.hero__lede{
  font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--text);
  max-width:580px;margin:0 auto;opacity:.85;
}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.hero__stats{
  display:flex;gap:48px;justify-content:center;flex-wrap:wrap;
  padding:24px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  margin-top:18px;width:100%;max-width:760px;
}
.hero__stats .item{text-align:center}
.hero__stats .item .num{font-size:clamp(24px,3vw,36px);font-variation-settings:'wght' 800;line-height:1;color:var(--text)}
.hero__stats .item .num .red{color:var(--red)}
.hero__stats .item .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-variation-settings:'wght' 600}

/* Quick-search widget */
.hero-search{
  width:100%;max-width:920px;margin:14px auto 6px;padding:14px;
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:8px;
  scroll-margin-top:80px;
}
.hero-search__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.hero-search__field{display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.hero-search__field label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:rgba(255,255,255,.7);padding-left:2px;
}
.hero-search__field select,
.hero-search__field input{
  padding:11px 12px;background:rgba(20,20,20,.85);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  font:14px var(--sans);border-radius:4px;
  width:100%;min-width:0;
  transition:border-color .15s, background .15s;
}
.hero-search__field select:focus,
.hero-search__field input:focus{outline:0;border-color:var(--red);background:rgba(20,20,20,.95)}
.hero-search__field input::placeholder{color:rgba(255,255,255,.4)}
.hero-search__submit{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 22px;background:var(--red);color:#fff;border:0;border-radius:4px;
  font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;transition:background .15s, transform .1s;
}
.hero-search__submit:hover{background:#FF1A1D}
.hero-search__submit:active{transform:translateY(1px)}
@media(max-width:900px){
  .hero-search__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero-search__submit{grid-column:span 2;padding:14px}
}
@media(max-width:480px){
  .hero-search{padding:12px}
  .hero-search__row{gap:8px}
}

/* Trust widgets (replaces old marquee) */
.trust-widgets{padding:48px 32px;background:var(--bg);border-bottom:1px solid var(--line)}
.trust-widgets__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1240px;margin:0 auto}
.trust-w{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:24px 26px;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;transition:border-color .2s, transform .15s;
}
.trust-w:hover{border-color:var(--red);transform:translateY(-2px)}
.trust-w__icon{width:38px;height:38px;display:grid;place-items:center;color:var(--red);margin-bottom:4px}
.trust-w__icon svg{width:100%;height:100%}
.trust-w__val{font-size:20px;font-variation-settings:'wght' 800;letter-spacing:-.01em;color:var(--text);line-height:1.1}
.trust-w__val b{color:var(--red);font-variation-settings:'wght' 800}
.trust-w__lbl{font-size:12px;letter-spacing:.06em;color:var(--muted);font-variation-settings:'wght' 500}
@media(max-width:1100px){.trust-widgets__grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:480px){
  .trust-widgets{padding:32px 20px}
  .trust-w{padding:18px 20px}
  .trust-w__val{font-size:17px}
}


/* ─── Testimonials carousel: swipeable + center focus + blur sides ─── */
.testimonials-carousel{
  position:relative;
  margin:24px 0 0;
  padding:0 0 8px;
}
.tcarousel__track{
  display:flex;gap:24px;
  overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:24px 50%;  /* huge horizontal padding centers slides via snap */
}
.tcarousel__track::-webkit-scrollbar{display:none}
.tcarousel__track .testimonial{
  flex:0 0 min(440px,82vw);
  scroll-snap-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  padding:32px 30px;
  display:flex;flex-direction:column;gap:14px;
  border-radius:6px;
  transition:opacity .35s, filter .35s, transform .35s;
  opacity:.45;filter:blur(2px);
  transform:scale(.94);
}
.tcarousel__track .testimonial.is-center{
  opacity:1;filter:none;transform:scale(1);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  border-color:rgba(237,0,3,.4);
}
.tcarousel__track .testimonial p{
  font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--text);
  font-variation-settings:'wght' 500;
  margin:0;
}
.tcarousel__track .testimonial__stars{
  color:#FFB400;font-size:18px;letter-spacing:2px;
}
.tcarousel__track .testimonial footer{
  font-size:12px;letter-spacing:.06em;color:var(--muted);
  border-top:1px solid var(--line);padding-top:14px;margin-top:auto;
  font-variation-settings:'wght' 500;
}
.tcarousel__track .testimonial footer b{color:var(--text);font-variation-settings:'wght' 700}

.tcarousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(20,20,20,.85);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s, transform .15s;
  opacity:.85;
}
.tcarousel__nav:hover{background:var(--red);opacity:1}
.tcarousel__nav:active{transform:translateY(-50%) scale(.94)}
.tcarousel__nav--prev{left:14px}
.tcarousel__nav--next{right:14px}
.tcarousel__nav[disabled]{opacity:.3;cursor:not-allowed}

.tcarousel__dots{
  display:flex;gap:8px;justify-content:center;margin-top:18px;
}
.tcarousel__dot{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.2);cursor:pointer;
  transition:background .2s, transform .15s;
}
.tcarousel__dot.is-active{background:var(--red);transform:scale(1.3)}

@media(max-width:600px){
  .tcarousel__track{gap:16px;padding-top:18px;padding-bottom:18px}
  .tcarousel__track .testimonial{flex-basis:84vw;padding:24px 22px}
  .tcarousel__nav{width:40px;height:40px}
  .tcarousel__nav--prev{left:8px}
  .tcarousel__nav--next{right:8px}
}