/* ==========================================================================
   RM AUTOS V2 — DESIGN SYSTEM
   Mobile-first. Four breakpoints. WCAG 2.2 AA contrast verified.
   Brand retained from V1: dark automotive base, red accent, chrome ramp.
   ========================================================================== */

:root{
  /* --- Surfaces (retained from V1) --- */
  --black:#000000;
  --surface-0:#0A0A0A;
  --surface-1:#121212;
  --surface-2:#1A1A1A;
  --surface-3:#232323;
  --surface-4:#2C2C2C;
  --hairline:rgba(255,255,255,0.08);
  --hairline-strong:rgba(255,255,255,0.16);

  /* --- Text ---
     CONTRAST FIX 1: --text-low was #7A7A78 = 4.05:1 on cards (FAIL).
     Now #8E8E8B = 5.05:1 on --surface-2. Passes AA. */
  --white:#FFFFFF;
  --text-hi:#F5F5F3;
  --text-mid:#B7B7B4;
  --text-low:#8E8E8B;

  /* --- Chrome ramp (retained) --- */
  --chrome-300:#C9C9C9;
  --chrome-500:#8F8F8F;
  --chrome-gradient:linear-gradient(115deg,#FDFDFD 0%,#C6C6C6 28%,#8C8C8C 50%,#DADADA 68%,#5A5A5A 100%);

  /* --- Red accent ---
     CONTRAST FIX 2: white on #E42B2B = 4.49:1 (FAIL by 0.01).
     --red-btn #C81E1E gives 5.87:1 with white. Used for all solid buttons.
     CONTRAST FIX 3: #E42B2B as text on dark = 4.41:1 (FAIL).
     --red-text #FF4646 = 5.51:1 on --surface-0. Used for all red text. */
  --red:#E42B2B;
  --red-btn:#C81E1E;
  --red-btn-hover:#A81818;
  --red-text:#FF4646;
  --red-glow:rgba(228,43,43,0.30);

  --sold:#9A9A97;
  --sold-bg:rgba(0,0,0,0.72);

  /* --- Type --- */
  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:3rem;

  /* --- Spacing (4/8pt, retained) --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;

  --shadow-md:0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.55);

  --container:1240px;
  --header-h:64px;

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:220ms;
}

/* ========================= RESET ========================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface-0);
  color:var(--text-hi);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;line-height:1.15;}

/* ICON SIZING — SVGs use a viewBox with no intrinsic width/height, so without
   this they stretch to fill their flex/grid container. Every icon inherits a
   sane default; specific contexts can still override. This is deliberately
   above the component rules so those overrides win. */
svg{width:1em;height:1em;flex-shrink:0;}
.btn svg{width:18px;height:18px;flex-shrink:0;}

/* ACCESSIBILITY: visible focus on every interactive element (WCAG 2.4.7) */
:focus-visible{
  outline:3px solid var(--red-text);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:var(--sp-4);z-index:200;
  background:var(--red-btn);color:#fff;padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--r-sm) var(--r-sm);font-weight:600;
}
.skip-link:focus{top:0;}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--sp-4);
}

/* ========================= TYPE ========================= */
.display{
  font-family:var(--font-display);
  font-weight:400;letter-spacing:0.01em;
  text-transform:uppercase;line-height:1.02;
}
h1.display{font-size:clamp(2rem,7vw,3.5rem);}
h2.display{font-size:clamp(1.5rem,4.5vw,2.25rem);}

.kicker{
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--sp-2);
}
.section{padding-block:var(--sp-7);}
.section--alt{background:var(--surface-1);}
.section-head{margin-bottom:var(--sp-6);max-width:660px;}
.section-head p{color:var(--text-mid);margin:var(--sp-3) 0 0;}

/* ========================= BUTTONS ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;                    /* WCAG 2.5.5 touch target */
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-sm);border:1.5px solid transparent;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:0.02em;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  text-align:center;cursor:pointer;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--red-btn);color:#fff;}     /* 5.87:1 AA pass */
.btn-primary:hover{background:var(--red-btn-hover);}
.btn-outline{background:transparent;color:var(--text-hi);border-color:var(--hairline-strong);}
.btn-outline:hover{border-color:var(--text-mid);background:rgba(255,255,255,0.04);}
.btn-ghost{background:transparent;color:var(--text-mid);padding-inline:var(--sp-3);}
.btn-ghost:hover{color:var(--text-hi);}
.btn-block{width:100%;}
.btn-sm{min-height:40px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs);}

/* ========================= HEADER ========================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,0.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-h);
  max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4);
}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand img{height:34px;width:auto;}
.main-nav{display:none;}
.header-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;}
.icon-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--text-mid);border-radius:var(--r-sm);
}
.icon-link:hover{color:var(--text-hi);}
.icon-link svg{width:20px;height:20px;}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:none;border:none;
  color:var(--text-hi);border-radius:var(--r-sm);
}
.nav-toggle svg{width:24px;height:24px;}
.mobile-nav{
  display:none;flex-direction:column;
  border-top:1px solid var(--hairline);background:var(--surface-1);
  padding:var(--sp-3) var(--sp-4) var(--sp-5);
}
.mobile-nav.is-open{display:flex;}
.mobile-nav a{
  display:flex;align-items:center;min-height:48px;
  padding:var(--sp-2) 0;color:var(--text-mid);
  font-weight:500;border-bottom:1px solid var(--hairline);
}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{color:var(--text-hi);}
.mobile-nav a[aria-current="page"]{color:var(--red-text);}

/* ==========================================================================
   HERO — V1 personality (logo, crossfade, chrome eyebrow, trust row)
   rebuilt on V2 foundations (responsive images, no CLS, reduced motion).
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:var(--sp-7) var(--sp-8);
}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.hero-bg picture{position:absolute;inset:0;display:block;}

/* Crossfade only. No sliding, no zoom — atmosphere, not entertainment. */
.hero-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  opacity:0;
  transition:opacity 1400ms var(--ease);
}
.hero-slide.is-active{opacity:1;}

/* Two-axis overlay: vertical for readability, horizontal so the left-hand
   text column sits on darker ground while the car stays visible right. */
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    /* Vertical: readable at the top, blends into the page at the bottom */
    linear-gradient(180deg,rgba(6,6,6,0.34) 0%,rgba(6,6,6,0.52) 55%,rgba(10,10,10,0.94) 92%,var(--surface-0) 100%),
    /* Horizontal: darkest behind the text column, lifts across the middle so
       the car stays visible, then eases back for the emblem */
    linear-gradient(90deg,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.30) 40%,rgba(0,0,0,0.10) 62%,rgba(0,0,0,0.26) 100%);
}

.hero-inner{position:relative;z-index:1;}
.hero-content{max-width:640px;}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  margin:0 0 var(--sp-4);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--chrome-300);
}
.hero-eyebrow::before{
  content:"";width:26px;height:2px;
  background:var(--red);flex-shrink:0;
}

.hero h1{margin-bottom:var(--sp-3);max-width:14ch;}
.hero h1 .accent{color:var(--red-text);}

.hero-tagline{
  font-family:var(--font-display);
  font-size:clamp(1rem,3.2vw,1.375rem);
  letter-spacing:0.05em;text-transform:uppercase;
  color:var(--chrome-300);
  margin:0 0 var(--sp-4);
}

.hero-sub{
  color:var(--text-mid);font-size:var(--fs-md);
  max-width:46ch;margin:0 0 var(--sp-5);
}

.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);}

.hero-trust{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--hairline);
}
.hero-trust li{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0.04em;color:var(--chrome-300);
}
.hero-trust svg{width:14px;height:14px;color:var(--red-text);flex-shrink:0;}


/* ==========================================================================
   HERO EMBLEM
   Large RM Autos mark occupying the right-hand side of the hero.
   Three separate layers so entrance, drift and sheen never fight over
   the same transform: .hero-emblem (entrance) > .hero-emblem-float (drift)
   > .hero-emblem-mark (holds the sheen).
   ========================================================================== */
.hero-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;}

.hero-emblem{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  order:-1;                      /* mobile: mark sits above the headline */
  /* Own bounded height on mobile so the absolutely-positioned glow and ring
     cannot spill down onto the headline. */
  height:clamp(200px,54vw,300px);
  margin-bottom:var(--sp-2);
  overflow:hidden;
  animation:emblemIn 900ms var(--ease) both;
}

/* Dark plate behind the mark. A soft bloom alone was not enough — on a
   light-coloured car the chrome emblem washed straight out. This guarantees
   contrast whichever photograph is showing, and reads as a deliberate badge
   rather than a logo dropped on top of a picture. */
.hero-emblem-glow{
  position:absolute;
  width:min(300px,84vw);aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(228,43,43,0.30) 0%,
      rgba(228,43,43,0.10) 34%,
      transparent 60%),
    radial-gradient(circle,
      rgba(6,6,6,0.90) 0%,
      rgba(6,6,6,0.84) 38%,
      rgba(6,6,6,0.52) 60%,
      rgba(6,6,6,0.18) 72%,
      transparent 82%);
  animation:emblemPulse 7s ease-in-out infinite;
  pointer-events:none;
}

/* Thin chrome ring — automotive detail, not decoration for its own sake */
.hero-emblem-ring{
  position:absolute;
  width:min(240px,70vw);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(201,201,201,0.20);
  box-shadow:
    inset 0 0 70px rgba(228,43,43,0.12),
    0 0 40px rgba(0,0,0,0.45);
  pointer-events:none;
}

.hero-emblem-float{
  position:relative;
  display:block;
  animation:emblemFloat 6.5s ease-in-out infinite;
}

.hero-emblem-mark{
  position:relative;
  display:block;
  width:min(58vw,230px);
}
.hero-emblem-mark img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.65));
}

/* Chrome sweep. Masked to the artwork itself using the same PNG, so the
   highlight travels across the letterforms rather than a rectangle —
   this is what V1's box-shaped shine got wrong. */
.hero-emblem-sheen{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0.70) 50%,
    rgba(255,255,255,0.16) 54%,
    transparent 62%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:url("/assets/images/rm-autos-emblem.png");
          mask-image:url("/assets/images/rm-autos-emblem.png");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:emblemSheen 7s ease-in-out 1.1s infinite;
}

@keyframes emblemIn{
  from{opacity:0;transform:translateY(22px) scale(0.92);}
  to{opacity:1;transform:none;}
}
@keyframes emblemFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
@keyframes emblemPulse{
  0%,100%{opacity:0.92;transform:scale(1);}
  50%{opacity:1;transform:scale(1.035);}
}
/* Sweep occupies the first ~20% of the cycle, then rests off-screen */
@keyframes emblemSheen{
  0%{background-position:-70% 0;}
  20%{background-position:170% 0;}
  100%{background-position:170% 0;}
}

/* ==========================================================================
   VEHICLE FINDER
   Sits directly under the hero on mobile; lifts up to overlap it on desktop.
   ========================================================================== */
.finder-wrap{position:relative;z-index:2;padding-bottom:var(--sp-6);}

.finder{
  background:var(--surface-2);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--shadow-lg);
}
.finder--inline{
  box-shadow:none;
  border-radius:var(--r-md);
  margin-bottom:var(--sp-5);
}

.finder-head{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.finder-head svg{width:19px;height:19px;color:var(--red-text);flex-shrink:0;}
.finder-head h2{
  font-family:var(--font-display);
  font-size:var(--fs-lg);letter-spacing:0.03em;
  text-transform:uppercase;
}

/* Mobile: one field per row, full-size controls. Never four tiny fields. */
.finder-form{display:grid;gap:var(--sp-4);grid-template-columns:1fr;}

.finder-form .field select{
  width:100%;min-height:48px;
  padding:var(--sp-3) var(--sp-4);
  padding-right:var(--sp-8);
  background-color:var(--surface-0);
  color:var(--text-hi);
  border:1.5px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-base);
  /* Custom chevron — native selects clip badly on small Android screens */
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E8B' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp-4) center;
  background-size:18px;
}
.finder-form .field select:hover{border-color:var(--text-low);}
.finder-form .field select:disabled{opacity:0.45;cursor:not-allowed;}

.finder-submit{min-height:52px;font-size:var(--fs-base);}

.finder-note{
  margin:var(--sp-3) 0 0;
  font-size:var(--fs-xs);color:var(--text-low);
  min-height:1.2em;
}

/* ========================= CAR GRID + CARDS ========================= */
.car-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr;}

.car-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.car-card:hover{border-color:var(--hairline-strong);transform:translateY(-3px);}
.car-card:focus-within{border-color:var(--red-text);}

/* CLS FIX: fixed aspect ratio container. Portrait source photos (1200x1600)
   are cropped to fill rather than letterboxed. */
.car-card-media{position:relative;aspect-ratio:4/3;background:var(--surface-3);overflow:hidden;}
.car-card-media img{width:100%;height:100%;object-fit:cover;}
.car-card-count{
  position:absolute;right:var(--sp-3);bottom:var(--sp-3);
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:var(--r-full);
  background:rgba(0,0,0,0.75);color:var(--text-hi);
  font-size:var(--fs-xs);font-weight:600;
}
.car-card-count svg{width:13px;height:13px;}

.car-card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-4);}
.car-card-title{font-size:var(--fs-md);font-weight:700;line-height:1.3;margin-bottom:2px;}
.car-card-deriv{font-size:var(--fs-sm);color:var(--text-low);margin-bottom:var(--sp-3);}
.car-card-price{
  font-family:var(--font-display);font-size:var(--fs-xl);
  color:var(--text-hi);letter-spacing:0.01em;line-height:1;
  margin-bottom:var(--sp-3);
}
.car-card-price--poa{display:flex;flex-direction:column;line-height:1.05;}
.car-card-price--poa .poa-sub{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;color:var(--red-text);letter-spacing:0.02em;margin-top:2px;}
.detail-price--poa{font-size:clamp(1.5rem,5vw,2rem);color:var(--text-hi);}
.car-card-price .ono{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--text-low);margin-left:var(--sp-2);}

.spec-row{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  padding-top:var(--sp-3);margin-top:auto;
  border-top:1px solid var(--hairline);
  font-size:var(--fs-xs);color:var(--text-mid);
}
.spec-row span{display:inline-flex;align-items:center;gap:5px;}
.spec-row svg{width:13px;height:13px;color:var(--text-low);flex-shrink:0;}

.badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.badge{
  padding:3px 9px;border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--hairline);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-mid);
}
.badge--warn{background:rgba(228,43,43,0.14);border-color:rgba(228,43,43,0.4);color:var(--red-text);}

.car-card-link{position:absolute;inset:0;z-index:2;}
.car-card-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--red-text);
}
.car-card-cta svg{width:14px;height:14px;transition:transform var(--dur) var(--ease);}
.car-card:hover .car-card-cta svg{transform:translateX(3px);}

/* SOLD state — must be obvious in peripheral vision */
.car-card.is-sold .car-card-media img{filter:grayscale(0.55) brightness(0.7);}
.sold-ribbon{
  position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:1;
  padding:5px 12px;border-radius:var(--r-sm);
  background:var(--sold-bg);border:1px solid var(--hairline-strong);
  font-family:var(--font-display);font-size:var(--fs-sm);
  letter-spacing:0.12em;color:var(--white);text-transform:uppercase;
}
.car-card.is-sold .car-card-price{color:var(--sold);font-size:var(--fs-lg);}

/* ========================= FILTER BAR ========================= */
.filter-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:44px;background:none;border:none;color:var(--text-hi);font-weight:600;}
.filter-toggle svg{width:18px;height:18px;transition:transform var(--dur) var(--ease);}
.filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.filter-panel{display:none;gap:var(--sp-3);grid-template-columns:1fr;margin-top:var(--sp-4);}
.filter-panel.is-open{display:grid;}

.result-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.result-count{font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:0.02em;}
.sort-field{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);}
.sort-field label{font-size:var(--fs-xs);color:var(--text-low);white-space:nowrap;}
.sort-field select{min-height:44px;padding:var(--sp-2) var(--sp-3);
  background:var(--surface-2);color:var(--text-hi);
  border:1.5px solid var(--hairline-strong);border-radius:var(--r-sm);font-size:var(--fs-sm);}

/* Active filter chips — MUST wrap, never clip (ui-ux-pro-max: chip reflow) */
.chip-list{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4);}
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:36px;padding:var(--sp-2) var(--sp-3);
  background:var(--surface-3);border:1px solid var(--hairline-strong);
  border-radius:var(--r-full);font-size:var(--fs-xs);color:var(--text-hi);
}
.chip button{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin-right:-4px;
  background:none;border:none;color:var(--text-low);border-radius:50%;
}
.chip button:hover{color:var(--red-text);background:rgba(255,255,255,0.08);}
.chip button svg{width:12px;height:12px;}

.empty-state{
  padding:var(--sp-8) var(--sp-4);text-align:center;
  background:var(--surface-2);border:1px dashed var(--hairline-strong);
  border-radius:var(--r-md);
}
.empty-state h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3);}
.empty-state p{color:var(--text-mid);margin:0 0 var(--sp-5);}
.empty-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;}

/* ========================= VEHICLE DETAIL ========================= */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding-block:var(--sp-4);font-size:var(--fs-xs);color:var(--text-low);
}
.breadcrumb a:hover{color:var(--text-hi);}
.breadcrumb svg{width:12px;height:12px;}

.detail-layout{display:grid;gap:var(--sp-5);grid-template-columns:1fr;padding-bottom:var(--sp-7);}

.gallery{display:flex;flex-direction:column;gap:var(--sp-3);}
.gallery-main{
  position:relative;aspect-ratio:4/3;background:var(--surface-3);
  border-radius:var(--r-md);overflow:hidden;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;                 /* WCAG 2.5.5 */
  background:rgba(0,0,0,0.65);border:1px solid var(--hairline-strong);
  border-radius:50%;color:var(--white);
}
.gallery-nav:hover{background:rgba(0,0,0,0.85);}
.gallery-nav.prev{left:var(--sp-3);}
.gallery-nav.next{right:var(--sp-3);}
.gallery-nav svg{width:20px;height:20px;}
.gallery-counter{
  position:absolute;right:var(--sp-3);bottom:var(--sp-3);
  padding:5px 11px;border-radius:var(--r-full);
  background:rgba(0,0,0,0.75);font-size:var(--fs-xs);font-weight:600;
}
.gallery-thumbs{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2);scrollbar-width:thin;}
.gallery-thumb{
  flex:0 0 76px;aspect-ratio:4/3;padding:0;
  background:var(--surface-3);border:2px solid transparent;
  border-radius:var(--r-sm);overflow:hidden;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.gallery-thumb[aria-current="true"]{border-color:var(--red-text);}

.detail-head h1{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:var(--sp-2);}
.detail-deriv{color:var(--text-low);font-size:var(--fs-md);margin-bottom:var(--sp-4);}
.detail-price{
  font-family:var(--font-display);font-size:clamp(2.25rem,8vw,3rem);
  line-height:1;letter-spacing:0.01em;margin-bottom:var(--sp-2);
}
.detail-price .ono{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-low);margin-left:var(--sp-2);}
.detail-note{font-size:var(--fs-sm);color:var(--text-low);margin:0 0 var(--sp-5);}

.sidebar-card{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:var(--sp-5);
}
.sidebar-actions{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4);}

.key-specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);
  padding:var(--sp-4) 0;margin-bottom:var(--sp-4);
  border-block:1px solid var(--hairline);
}
.key-spec-label{font-size:var(--fs-xs);color:var(--text-low);text-transform:uppercase;letter-spacing:0.08em;}
.key-spec-value{font-size:var(--fs-sm);font-weight:600;color:var(--text-hi);margin-top:2px;}

.detail-section{padding-block:var(--sp-6);border-top:1px solid var(--hairline);}
.detail-section h2{font-size:var(--fs-lg);margin-bottom:var(--sp-4);}
.detail-section p{color:var(--text-mid);margin:0;}
.feature-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2) var(--sp-5);}
.feature-grid li{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:var(--sp-2) 0;color:var(--text-mid);font-size:var(--fs-sm);
}
.feature-grid svg{width:15px;height:15px;color:var(--red-text);flex-shrink:0;margin-top:3px;}

.disclosure{
  padding:var(--sp-4);margin-bottom:var(--sp-5);
  background:rgba(228,43,43,0.10);border:1px solid rgba(228,43,43,0.35);
  border-radius:var(--r-md);
}
.disclosure strong{color:var(--red-text);display:block;margin-bottom:var(--sp-2);}
.disclosure p{margin:0;font-size:var(--fs-sm);color:var(--text-mid);}

/* Sold banner replaces the price entirely */
.sold-banner{
  padding:var(--sp-5);margin-bottom:var(--sp-4);
  background:var(--surface-3);border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);text-align:center;
}
.sold-banner .label{
  font-family:var(--font-display);font-size:var(--fs-2xl);
  letter-spacing:0.14em;color:var(--sold);display:block;margin-bottom:var(--sp-2);
}
.sold-banner p{margin:0;font-size:var(--fs-sm);color:var(--text-mid);}

/* Sticky mobile contact bar — Call + Enquire only.
   WhatsApp lives in the floating .wa-fab button instead. */
.mobile-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:rgba(10,10,10,0.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline-strong);
}
.mobile-cta-bar .btn{flex:1;min-height:48px;}
.mobile-cta-bar .btn svg{width:18px;height:18px;}
body.has-cta-bar{padding-bottom:76px;}

/* ========================= FORMS ========================= */
.form-card{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:var(--sp-5);
}
.form-field{margin-bottom:var(--sp-4);}
.form-field label{
  display:block;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-low);margin-bottom:var(--sp-2);
}
.form-field .req{color:var(--red-text);}
.form-field input,.form-field textarea,.form-field select{
  width:100%;min-height:44px;padding:var(--sp-3);
  background:var(--surface-0);color:var(--text-hi);
  border:1.5px solid var(--hairline-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-base);
}
.form-field textarea{min-height:110px;resize:vertical;}
.form-field input:hover,.form-field textarea:hover{border-color:var(--text-low);}
.form-hint{font-size:var(--fs-xs);color:var(--text-low);margin:var(--sp-2) 0 0;}

/* ========================= TRUST / CTA BANDS ========================= */
.trust-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr;}
.trust-card{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:var(--sp-5);
}
.trust-card h3{font-size:var(--fs-md);margin-bottom:var(--sp-2);}
.trust-card p{color:var(--text-mid);font-size:var(--fs-sm);margin:0;}

.cta-band{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);text-align:center;
}
.cta-band h2{margin-bottom:var(--sp-3);}
.cta-band p{color:var(--text-mid);max-width:52ch;margin:0 auto var(--sp-5);}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;}

.steps{display:grid;gap:var(--sp-4);grid-template-columns:1fr;counter-reset:step;}
.step{
  position:relative;padding:var(--sp-5);
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);
}
.step-num{
  font-family:var(--font-display);font-size:var(--fs-xl);
  color:var(--red-text);line-height:1;margin-bottom:var(--sp-3);display:block;
}
.step h3{font-size:var(--fs-md);margin-bottom:var(--sp-2);}
.step p{color:var(--text-mid);font-size:var(--fs-sm);margin:0;}

/* Build-time placeholder marker — highly visible, must not reach production */
.placeholder-flag{
  padding:var(--sp-4);margin-block:var(--sp-4);
  background:repeating-linear-gradient(45deg,rgba(228,43,43,0.10),rgba(228,43,43,0.10) 10px,rgba(228,43,43,0.18) 10px,rgba(228,43,43,0.18) 20px);
  border:2px dashed var(--red-text);border-radius:var(--r-md);
  color:var(--text-hi);font-size:var(--fs-sm);
}
.placeholder-flag strong{color:var(--red-text);display:block;margin-bottom:var(--sp-2);}

.info-list{display:flex;flex-direction:column;gap:var(--sp-4);}
.info-row{display:flex;align-items:flex-start;gap:var(--sp-3);}
.info-row svg{width:19px;height:19px;color:var(--red-text);flex-shrink:0;margin-top:3px;}
.info-row p{margin:0;color:var(--text-mid);font-size:var(--fs-sm);}
.info-row a:hover{color:var(--text-hi);}


/* ==========================================================================
   SUB-HERO — compact hero for interior pages (sell, about)
   ========================================================================== */
.subhero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--sp-6) var(--sp-7);
}
.subhero-bg{position:absolute;inset:0;z-index:-2;}
.subhero-bg picture{position:absolute;inset:0;display:block;}
.subhero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;}
.subhero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,6,6,0.52) 0%,rgba(6,6,6,0.72) 62%,rgba(10,10,10,0.96) 94%,var(--surface-0) 100%),
    linear-gradient(90deg,rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.36) 55%,rgba(0,0,0,0.20) 100%);
}
.subhero .breadcrumb{padding-top:0;}
.subhero h1{margin-bottom:var(--sp-3);max-width:18ch;}
.subhero h1 .accent{color:var(--red-text);}
.subhero .hero-sub{max-width:52ch;}

/* ==========================================================================
   FORM — fieldsets, rows, radio pills, validation
   ========================================================================== */
.form-fieldset{border:0;padding:0;margin:0 0 var(--sp-6);}
.form-fieldset legend{
  font-family:var(--font-display);
  font-size:var(--fs-md);letter-spacing:0.03em;text-transform:uppercase;
  color:var(--text-hi);padding:0;margin-bottom:var(--sp-4);
  width:100%;padding-bottom:var(--sp-3);border-bottom:1px solid var(--hairline);
}
.form-row{display:grid;gap:var(--sp-4);grid-template-columns:1fr;}
.form-field .opt{color:var(--text-low);font-weight:400;text-transform:none;letter-spacing:0;}

.form-field select{
  width:100%;min-height:48px;padding:var(--sp-3) var(--sp-4);padding-right:var(--sp-8);
  background-color:var(--surface-0);color:var(--text-hi);
  border:1.5px solid var(--hairline-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-base);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E8B' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-4) center;background-size:18px;
}
.form-field select:hover{border-color:var(--text-low);}

/* Validation: only shown after a failed submit, via .is-invalid on the field */
.form-error{
  margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--red-text);
  display:flex;align-items:center;gap:6px;
}
.form-field.is-invalid input,
.form-field.is-invalid select{border-color:var(--red-text);}
.form-field.is-invalid input:focus-visible{outline-color:var(--red-text);}

.radio-group{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.radio-pill{position:relative;cursor:pointer;}
.radio-pill input{position:absolute;opacity:0;width:0;height:0;}
.radio-pill span{
  display:inline-flex;align-items:center;min-height:44px;
  padding:var(--sp-2) var(--sp-5);
  background:var(--surface-0);border:1.5px solid var(--hairline-strong);
  border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;color:var(--text-mid);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.radio-pill input:checked + span{
  border-color:var(--red-text);color:var(--text-hi);background:rgba(228,43,43,0.12);
}
.radio-pill input:focus-visible + span{outline:3px solid var(--red-text);outline-offset:2px;}
.radio-pill:hover span{border-color:var(--text-low);}


/* ==========================================================================
   ABOUT HEADER — deliberately distinct from the homepage hero.
   No full-bleed photo, no display-face slab headline, no slideshow. A calm
   credibility band with an at-a-glance stat panel.
   ========================================================================== */
.about-header{
  position:relative;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(228,43,43,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
  border-bottom:1px solid var(--hairline);
  padding-bottom:var(--sp-7);
}
.about-header .breadcrumb{padding-top:var(--sp-4);}
.about-header-inner{
  display:grid;gap:var(--sp-6);grid-template-columns:1fr;
  padding-top:var(--sp-4);
}
.about-header-lead .hero-eyebrow{color:var(--red-text);}
.about-header-lead .hero-eyebrow::before{background:var(--red);}

/* Sentence-case serif-weight headline instead of the uppercase display slab —
   a clear visual signal you're on a different kind of page. */
.about-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.9rem,6vw,3rem);
  line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:var(--sp-4);
}
.about-title .accent{color:var(--red-text);}
.about-lead-sub{color:var(--text-mid);font-size:var(--fs-md);max-width:48ch;margin:0 0 var(--sp-5);}

.about-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);
}
.about-stats li{
  display:flex;flex-direction:column;gap:4px;
  padding:var(--sp-4);
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.about-stat-num{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,5vw,2rem);line-height:1;
  color:var(--red-text);letter-spacing:0.01em;
}
.about-stat-label{font-size:var(--fs-xs);color:var(--text-mid);line-height:1.3;}

/* ==========================================================================
   ABOUT / FIND US
   ========================================================================== */
.about-intro{display:grid;gap:var(--sp-5);grid-template-columns:1fr;}
.about-copy p{color:var(--text-mid);margin:0 0 var(--sp-4);}

.hours-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);}
.hours-list li{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--hairline);
  font-size:var(--fs-sm);
}
.hours-list li span:first-child{color:var(--text-mid);}
.hours-list li span:last-child{color:var(--text-hi);font-weight:600;}

.findus-subhead{
  font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:0.03em;
  text-transform:uppercase;margin:var(--sp-6) 0 0;
}
.findus-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;}
.map-embed{
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--hairline-strong);
  background:var(--surface-2);line-height:0;
}
.map-embed iframe{display:block;width:100%;}


/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   Fixed bottom-right on every page, with a gentle pulsing ring so it draws
   the eye without being obnoxious. Sits above content but below the mobile
   CTA bar's stacking on vehicle pages, and lifts above that bar when present.
   ========================================================================== */
.wa-fab{
  position:fixed;z-index:95;
  right:clamp(16px,4vw,28px);
  bottom:clamp(16px,4vw,28px);
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  border-radius:50%;
  box-shadow:0 6px 20px rgba(0,0,0,0.35),0 2px 6px rgba(0,0,0,0.3);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.wa-fab svg{width:32px;height:32px;position:relative;z-index:1;}
.wa-fab:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(0,0,0,0.42);}
.wa-fab:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* Pulsing ring behind the button */
.wa-fab-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:#25D366;z-index:0;
  animation:waPulse 2.2s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:0.55;}
  70%{transform:scale(1.9);opacity:0;}
  100%{transform:scale(1.9);opacity:0;}
}

/* Lift the button above the sticky mobile CTA bar on vehicle pages */
body.has-cta-bar .wa-fab{bottom:calc(76px + env(safe-area-inset-bottom));}

@media (prefers-reduced-motion:reduce){
  .wa-fab-pulse{animation:none;opacity:0;}
  .wa-fab{transition:none;}
}



/* Reserve button + note on vehicle pages */
.btn-reserve{
  background:transparent;color:var(--text-hi);
  border:1.5px solid var(--red-btn);
}
.btn-reserve:hover{background:rgba(200,30,30,0.12);border-color:var(--red-text);color:var(--text-hi);}
.btn-reserve svg{width:18px;height:18px;}
.reserve-note{
  margin:var(--sp-3) 0 0;font-size:var(--fs-xs);color:var(--text-low);
  text-align:center;line-height:1.5;
}

/* WhatsApp button variant — green, matches the floating button */
.btn-wa{
  background:#25D366;color:#fff;border:1.5px solid #25D366;
}
.btn-wa:hover{background:#1fbe5a;border-color:#1fbe5a;color:#fff;}
.btn-wa svg{width:18px;height:18px;}

/* Contact grid on the About page (replaces the old find-us map layout) */
.contact-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;}

/* Google Reviews section */
.gr-head{margin-bottom:var(--sp-6);}
.gr-badge{display:inline-flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);
  padding:var(--sp-2) var(--sp-4);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-full);}
.gr-badge svg{width:22px;height:22px;flex-shrink:0;}
.gr-badge-label{font-size:var(--fs-xs);color:var(--text-mid);text-transform:uppercase;letter-spacing:0.04em;margin:0;}
.gr-badge-rating{margin:2px 0 0;font-size:var(--fs-sm);color:var(--text-hi);display:flex;align-items:center;gap:6px;}
.gr-stars{color:#FBBC05;letter-spacing:1px;}
.gr-card{padding:var(--sp-5);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);}
.gr-card .gr-stars{display:block;margin-bottom:var(--sp-3);font-size:var(--fs-md);}
.gr-quote{color:var(--text-mid);margin:0 0 var(--sp-3);line-height:1.6;}
.gr-author{font-size:var(--fs-sm);color:var(--text-low);margin:0;}
.gr-empty{color:var(--text-mid);max-width:52ch;}


/* Legal pages (privacy, terms) */
.legal-copy{max-width:70ch;}
.legal-copy h2{font-family:var(--font-display);font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-3);letter-spacing:0.01em;}
.legal-copy p{color:var(--text-mid);line-height:1.7;margin:0 0 var(--sp-4);}
.legal-copy ul{color:var(--text-mid);line-height:1.7;margin:0 0 var(--sp-4);padding-left:var(--sp-5);}
.legal-copy li{margin-bottom:var(--sp-2);}
.legal-copy a{color:var(--red-text);text-decoration:underline;text-underline-offset:2px;}
/* inline "to confirm" marker — amber, informational, not an alarming red */
.legal-flag{color:#E0A82E;font-style:italic;font-size:0.9em;}

/* Footer legal links */
.footer-legal-links{display:flex;gap:var(--sp-4);}
.footer-legal-links a{color:var(--text-mid);}
.footer-legal-links a:hover{color:var(--text-hi);}

/* Privacy note under forms */
.form-privacy{font-size:var(--fs-xs);color:var(--text-low);text-align:center;margin-top:var(--sp-3);}
.form-privacy a,.form-hint a{color:var(--text-mid);text-decoration:underline;text-underline-offset:2px;}

/* ========================= FOOTER ========================= */
.site-footer{
  background:var(--surface-1);border-top:1px solid var(--hairline);
  padding-block:var(--sp-7) var(--sp-5);margin-top:var(--sp-7);
}
.footer-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;}
.footer-brand img{height:64px;width:auto;margin-bottom:var(--sp-4);}
.footer-brand p{color:var(--text-mid);font-size:var(--fs-sm);max-width:38ch;margin:0;}
.footer-col h2.footer-h{font-size:var(--fs-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-low);margin:0 0 var(--sp-4);font-weight:700;}
.footer-col h4{
  font-size:var(--fs-xs);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-low);margin-bottom:var(--sp-4);
}
.footer-col li{margin-bottom:var(--sp-3);}
.footer-col a{color:var(--text-mid);font-size:var(--fs-sm);}
.footer-col a:hover{color:var(--text-hi);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;
  padding-top:var(--sp-5);margin-top:var(--sp-6);
  border-top:1px solid var(--hairline);
  font-size:var(--fs-xs);color:var(--text-low);
}


/* --------------------------------------------------------------------------
   OVERFLOW SAFETY
   Grid/flex children default to min-width:auto, which lets long content push
   a track wider than its share and blow the layout out horizontally.
   -------------------------------------------------------------------------- */
.car-grid > *,
.hero-grid > *,
.about-intro > *,
.about-header-inner > *,
.about-stats > *,
.contact-grid > *,
.findus-grid > *,
.form-row > *,
.finder-form > *,
.hero-content,
.detail-layout > *,
.footer-grid > *,
.trust-grid > *,
.filter-panel > *,
.key-specs > *,
.feature-grid > *{min-width:0;}

.car-card-title,.detail-head h1,.car-card-deriv,
.key-spec-value,.feature-grid li,.info-row p{overflow-wrap:anywhere;}

.result-bar,.hero-actions,.cta-actions,.empty-actions,.sidebar-actions{min-width:0;}

/* ========================= MOTION ========================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 500ms var(--ease),transform 500ms var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .hero-emblem,.hero-emblem-float,.hero-emblem-glow{animation:none !important;}
  .hero-emblem-sheen{display:none;}
  .hero-slide{transition:none;}
}

/* ==========================================================================
   BREAKPOINTS — consolidated from nine (V1) to four. Mobile-first.
   ========================================================================== */

@media (min-width:640px){
  .car-grid{grid-template-columns:repeat(2,1fr);}
  .hero{padding-block:var(--sp-8) var(--sp-9);}
  .hero-emblem-mark{width:min(52vw,340px);}
  .finder-form{grid-template-columns:repeat(2,1fr);align-items:end;}
  .finder-submit{grid-column:1 / -1;}
  .filter-panel{grid-template-columns:repeat(2,1fr);}
  .trust-grid,.steps{grid-template-columns:repeat(3,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr 1fr;}
  .form-row--3{grid-template-columns:1fr 1fr 1fr;}
  .hero-actions .btn{min-width:180px;}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;}
  .section{padding-block:var(--sp-8);}
}

@media (min-width:900px){
  :root{--header-h:72px;}
  .brand img{height:40px;}
  .nav-toggle{display:none;}
  .mobile-nav{display:none !important;}
  .main-nav{display:flex;align-items:center;gap:var(--sp-5);}
  .main-nav a{
    display:inline-flex;align-items:center;min-height:44px;
    font-size:var(--fs-sm);font-weight:500;color:var(--text-mid);
    transition:color var(--dur) var(--ease);
  }
  .main-nav a:hover{color:var(--text-hi);}
  .main-nav a[aria-current="page"]{color:var(--text-hi);border-bottom:2px solid var(--red-text);}
  .car-grid{grid-template-columns:repeat(3,1fr);}
  .hero{padding-block:var(--sp-9) calc(var(--sp-9) + 40px);}
  /* Desktop: text left, emblem right, in the space the photography leaves */
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:var(--sp-7);align-items:center;}
  .hero-emblem{order:0;height:auto;overflow:visible;margin-bottom:0;}
  .hero-emblem-mark{width:min(30vw,400px);}
  .hero-emblem-glow{width:min(122%,560px);}
  .hero-emblem-ring{width:min(86%,400px);}
  .hero-content{max-width:none;}
  /* Panel lifts to overlap the hero, V1-style, without a huge 100vh hero */
  .finder-wrap{margin-top:-72px;}
  .finder{padding:var(--sp-6);}
  .finder-form{grid-template-columns:1fr 1fr 1fr auto;align-items:end;}
  .finder-submit{grid-column:auto;min-width:190px;}
  .finder--inline .finder-form{grid-template-columns:repeat(4,1fr);}
  .detail-layout{grid-template-columns:1.55fr 1fr;gap:var(--sp-6);align-items:start;}
  .detail-sidebar{position:sticky;top:calc(var(--header-h) + var(--sp-4));}
  .subhero{padding-block:var(--sp-7) var(--sp-8);}
  .about-intro{grid-template-columns:0.8fr 1.2fr;gap:var(--sp-7);align-items:start;}
  .about-header{padding-bottom:var(--sp-8);}
  .about-header-inner{grid-template-columns:1.4fr 1fr;gap:var(--sp-7);align-items:center;}
  .about-stats{grid-template-columns:1fr;}
  .about-stats li{flex-direction:row;align-items:baseline;gap:var(--sp-3);}
  .about-stat-num{min-width:76px;}
  .findus-grid{grid-template-columns:1fr 1.1fr;align-items:start;}
  .contact-grid{grid-template-columns:1fr 1fr;align-items:start;gap:var(--sp-7);}
  .map-embed iframe{height:440px;}
  .filter-toggle{display:none;}
  .filter-panel{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;}
  .mobile-cta-bar{display:none;}
  body.has-cta-bar{padding-bottom:0;}
  .gallery-thumb{flex-basis:92px;}
  .feature-grid{grid-template-columns:repeat(3,1fr);}
}

@media (min-width:1200px){
  .car-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
  .hero-emblem-mark{width:440px;}
  .hero-emblem-ring{width:min(90%,480px);}
  .section{padding-block:var(--sp-9);}
}

@media (hover:none){
  .car-card:hover{transform:none;}
}