/* Nidhi Automobiles — design prototype stylesheet
   Phase 0. Converts directly into the PHP build. */

/* Sora for headings — geometric, slightly technical, reads premium without
   being cold. Plus Jakarta Sans for body — humanist, excellent at small
   sizes, and its numerals are clear, which matters on a page full of prices
   and kilometre figures. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Showroom palette, cleaner pass: navy pushed brighter/more saturated
     (less muddy-grey), copper punched up to a hotter, more vivid orange so
     it actually pops against navy instead of blending toward brown. */
  --navy:#153A66;
  --navy-deep:#0A1E38;
  --steel:#8A94A0;
  --ink:#0F172A;
  --paper:#fff;
  --mist:#F5F7FA;
  --line:#E3E8EF;
  --amber:#D2410A;
  --copper:#FF7A1A;
  --copper-lo:#C2460A;
  --green:#15803D;
  --grey:#64748B;
  --radius:12px;

  /* ---- gradients ----
     Three only, each with a job: depth (dark surfaces), heat (accents),
     and sheen (the faint top-light on light cards). More than three and the
     page starts to look like a paint sample. Depth gradient now runs
     navy-to-blue instead of navy-to-teal — cleaner, less muddy in the middle. */
  --grad-depth:linear-gradient(145deg,#0A1E38 0%,#153A66 50%,#1A5CA8 100%);
  --grad-heat:linear-gradient(135deg,#FF7A1A 0%,#D2410A 100%);
  --grad-sheen:linear-gradient(180deg,#fff 0%,#FAFBFD 100%);
  /* Hairline top-light on cards — reads as a lit edge, not a border. */
  --grad-edge:linear-gradient(90deg,transparent,rgba(255,122,26,.6),transparent);

  --shadow:0 1px 3px rgba(10,30,56,.06), 0 8px 24px -10px rgba(10,30,56,.14);
  --shadow-lg:0 4px 14px rgba(10,30,56,.09), 0 24px 48px -16px rgba(10,30,56,.22);
  --shadow-copper:0 8px 22px -8px rgba(210,65,10,.45);
  --wrap:1200px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:"Sora","Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);line-height:1.16;
  font-weight:700;letter-spacing:-.025em}
h1{letter-spacing:-.035em}
p{margin:0}
/* Tabular figures keep prices and km columns aligned. */
.price,.specs b,.money,.hero-stats b,.buybox .price{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
/* Alternating bands are no longer flat grey — a soft vertical wash plus a
   faint copper haze at the top edge separates sections without a hard rule. */
.section--mist{position:relative;
  background:linear-gradient(180deg,#F7F9FC 0%,#EFF3F8 100%)}
.section--mist::before{content:"";position:absolute;top:0;left:0;right:0;
  height:1px;background:var(--grad-edge);opacity:.5}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius);border:1px solid transparent;
  font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,
             border-color .18s ease,color .18s ease;
}
/* Gradients cannot be transitioned, so the hover state is a second layer
   faded in over the first rather than a background swap.

   The layer sits BEHIND the content (z-index:0 with the button as the
   stacking context), not on top of it. Lifting each child above the layer
   instead was the old approach and it silently ate the label: a bare text
   node has no element to select, so `> *` never matched it and the gradient
   painted straight over the words on hover. */
.btn--primary,.btn--amber{color:#fff;isolation:isolate}
.btn--primary::after,.btn--amber::after{content:"";position:absolute;inset:0;
  opacity:0;transition:opacity .18s ease;z-index:-1;border-radius:inherit}

.btn--primary{background:var(--grad-depth);box-shadow:0 6px 18px -8px rgba(12,29,51,.55)}
.btn--primary::after{background:linear-gradient(145deg,#153A66 0%,#1D4E85 50%,#2270C4 100%)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(12,29,51,.6)}
.btn--primary:hover::after{opacity:1}

.btn--amber{background:var(--grad-heat);box-shadow:var(--shadow-copper)}
.btn--amber::after{background:linear-gradient(135deg,#F0851F 0%,#D24E08 100%)}
.btn--amber:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(194,65,12,.55)}
.btn--amber:hover::after{opacity:1}

.btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--copper);color:var(--copper-lo);
  background:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--outline-light{background:rgba(255,255,255,.10);color:#fff;
  border-color:rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)}
.btn--outline-light:hover{background:rgba(255,255,255,.20);border-color:#fff;
  transform:translateY(-2px)}
/* Keyboard users get the same affordance the mouse gets. */
.btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.btn--block{width:100%}
.btn--sm{padding:9px 16px;font-size:14px}

/* ---------- top bar ---------- */
.topbar{background:linear-gradient(90deg,#0A1E38 0%,#123253 55%,#164A82 100%);
  color:rgba(255,255,255,.85);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:16px;min-height:40px;flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar-left{display:flex;gap:22px;flex-wrap:wrap}
.topbar-left span{display:inline-flex;align-items:center;gap:7px}
.topbar-social{display:flex;gap:14px}

/* ---------- header ----------
   Frosted glass: cards scrolling underneath stay faintly visible instead of
   disappearing under an opaque bar. -webkit- prefix included for Safari,
   which still needs it. The @supports fallback keeps the header readable on
   browsers without backdrop-filter — without it the bar would be 72%
   transparent white and the nav would be unreadable over photos. */
.header{position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(227,232,239,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header{background:rgba(255,255,255,.97)}
}
.header .wrap{display:flex;align-items:center;gap:28px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* The logo is a circular seal on a square canvas. Clipping the container to
   a circle removes the white corners so it sits cleanly on any background. */
.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.brand-text strong{display:block;font-size:16.5px;font-weight:800;
  color:var(--navy);letter-spacing:-.01em;line-height:1.15}
.brand-text small{display:block;font-size:11px;color:var(--grey);
  letter-spacing:.09em;text-transform:uppercase;margin-top:2px}

.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:9px 14px;border-radius:9px;font-weight:600;font-size:15px;
  color:#334155;transition:.15s;position:relative}
.nav a:hover{background:var(--mist);color:var(--navy)}
/* Active page is marked by a copper underline, not another grey pill —
   hover and current-page were previously indistinguishable. */
.nav a.active{color:var(--navy);background:transparent;font-weight:700}
.nav a.active::after{content:"";position:absolute;left:14px;right:14px;
  bottom:2px;height:2.5px;border-radius:2px;background:var(--grad-heat)}
.header-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}

/* .header creates its own stacking context (z-index:60), so the burger cannot
   rise above the drawer on its own — the scrim would swallow the second tap
   and the menu could never be closed from the button. Lift the whole header
   above the drawer while it is open instead; the panel then pads its content
   clear of the header so nothing hides underneath it. */
/* While the drawer is open the page header is hidden completely, along with
   the topbar and the floating call buttons. Previously the header was
   lifted ABOVE the drawer so the burger stayed tappable, but that left it
   sitting on top of the panel and reading as a blended, half-visible bar.
   The drawer now carries its own brand and close button instead. */
body.nav-open .header,
body.nav-open .topbar,
body.nav-open .fab{display:none}
.burger{display:none;background:none;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;cursor:pointer;margin-left:auto;
  position:relative}
.burger span{display:block;width:20px;height:2px;background:var(--navy);
  margin:4px 0;border-radius:2px;transition:transform .25s,opacity .2s}
/* Burger morphs into an X while the drawer is open. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- mobile drawer ---------- */
/* display:none above the burger breakpoint (set in the 768px block below), so
   it can never appear on desktop whatever state JS left it in. */
.navdrawer{display:none;position:fixed;inset:0;z-index:110;visibility:hidden}
.navdrawer[data-open="true"]{visibility:visible}
/* Scrim blurs the page behind it rather than just darkening it — the drawer
   then reads as glass over the content, not a panel over a grey sheet. */
.navdrawer-scrim{position:absolute;inset:0;background:rgba(10,24,43,.48);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s}
.navdrawer[data-open="true"] .navdrawer-scrim{opacity:1}
/* Starts below the sticky header (which stays visible and raised above the
   drawer so the burger remains tappable to close). */
/* No top padding any more: the panel starts at the very top of the screen
   because the page header is hidden, and its own header sits there instead. */
.navdrawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:#fff;box-shadow:-8px 0 28px rgba(16,24,40,.18);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:0 0 22px}

/* ---- drawer's own header ---- */
.navdrawer-head{display:flex;align-items:center;gap:12px;
  padding:16px 14px 14px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;z-index:2}
.navdrawer-brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.navdrawer-brand img{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.navdrawer-brand strong{display:block;font-size:15px;font-weight:800;
  color:var(--navy);line-height:1.15;letter-spacing:-.01em}
.navdrawer-brand small{display:block;font-size:10.5px;color:var(--grey);
  letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
/* 44px is the minimum comfortable tap target on a phone. */
.navdrawer-close{width:44px;height:44px;flex-shrink:0;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:.15s}
.navdrawer-close:hover{border-color:var(--copper);color:var(--copper-lo)}
.navdrawer[data-open="true"] .navdrawer-panel{transform:translateX(0)}
.navdrawer nav{display:flex;flex-direction:column;padding:6px 12px}
.navdrawer nav a{padding:14px 12px;border-radius:9px;font-weight:600;
  font-size:16px;color:#374151;min-height:48px;display:flex;align-items:center}
.navdrawer nav a:active{background:var(--mist)}
.navdrawer nav a.active{background:var(--mist);color:var(--navy);font-weight:700}
.navdrawer-foot{margin-top:auto;padding:18px 20px 0;border-top:1px solid var(--line);
  display:grid;gap:10px}
.navdrawer-foot .btn{width:100%}
.navdrawer-foot .meta{font-size:13px;color:var(--grey);line-height:1.5}
/* Prevent the page behind the drawer from scrolling. */
body.nav-open{overflow:hidden}

/* ---------- hero ---------- */
/* Photographic hero. The gradient is weighted to the left so headline text
   keeps contrast while the vehicle stays visible on the right. */
.hero{position:relative;background:var(--navy-deep);
  color:#fff;padding:96px 0 104px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;object-fit:cover;
  width:100%;height:100%}
/* Three stacked layers: a copper light bloom from the upper right (the
   showroom lamp), the tint that keeps headline contrast, and a floor
   shadow. Weighted left so the vehicle stays readable on the right. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(100% 80% at 86% 4%,
      rgba(255,138,40,.40) 0%,
      rgba(234,115,23,.14) 34%,
      transparent 62%),
    linear-gradient(100deg,
      rgba(10,24,43,.97) 0%,
      rgba(12,32,58,.94) 34%,
      rgba(16,48,90,.80) 62%,
      rgba(20,66,120,.56) 100%),
    linear-gradient(to top,rgba(8,20,35,.78),transparent 48%)}
/* Copper hairline where the hero meets the page — the lit edge motif. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad-edge);z-index:1}
.hero-inner{position:relative;z-index:2;max-width:760px}
/* Glass pill on the hero photo. The inset highlight is what sells it as a
   lit edge rather than a flat translucent rectangle. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  padding:6px 15px;border-radius:100px;font-size:13px;font-weight:600;
  letter-spacing:.02em;margin-bottom:22px;
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 12px rgba(8,20,35,.25)}
/* Live-stock dot pulses — the one ambient motion on the page. */
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.hero h1{font-size:clamp(36px,5.6vw,60px);margin-bottom:18px}
/* Subline drops to a lighter weight and wider tracking so the two lines read
   as headline + caption instead of one grey block. */
.hero h1 .thin{font-weight:400;color:rgba(255,255,255,.66);display:block;
  font-size:.44em;letter-spacing:.005em;margin-top:14px;line-height:1.35}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.80);max-width:560px;
  margin-bottom:32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap;padding-top:26px;
  position:relative}
/* Rule fades out to the right instead of stopping dead. */
.hero-stats::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.30),rgba(255,255,255,.04))}
/* Gradient stops must both sit inside the box — a stop past 100% never
   renders, which left these flat white. */
.hero-stats b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(170deg,#fff 20%,#FFC488 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-size:13.5px;color:rgba(255,255,255,.62)}

/* ---------- showroom hero (home) ----------
   The photograph is the client's own forecourt. Its LEFT third is the
   brightest part (sky, white building, pale paving) and that is exactly
   where the headline sits, so the scrim is weighted left-to-right — the
   opposite of the usual hero treatment. Without that weighting the white
   type dissolves into the building behind it. */
.hero--photo{background:var(--navy-deep)}
/* Layer order matters: in CSS the FIRST background listed paints on top.
   The copper bloom therefore has to come before the navy scrim, or the
   scrim covers it and the warm accent never appears. */
.hero--photo::before{
  background:
    /* 1. copper light bloom from the top right — the showroom lamp */
    radial-gradient(46% 52% at 84% 6%,
      rgba(255,140,45,.30) 0%, rgba(255,122,26,.11) 40%, transparent 68%),
    /* 2. navy column behind the text, fading out by mid-frame. Lightened so
          the showroom reads through — but the left stays dark enough for
          white type, because that is the brightest part of the photograph
          (sky, white building, pale paving) and the headline sits on it. */
    linear-gradient(95deg,
      rgba(8,22,40,.84) 0%,
      rgba(9,26,46,.78) 30%,
      rgba(11,32,56,.62) 52%,
      rgba(13,40,70,.30) 70%,
      rgba(15,48,84,.10) 86%,
      rgba(16,52,92,.02) 100%),
    /* 3. floor shadow so the search panel has something to sit against */
    linear-gradient(to top, rgba(6,18,34,.62) 0%, transparent 40%)}

/* Anchor slightly right of centre so the receding line of cars stays in
   frame; the left is where the scrim is heaviest, so nothing interesting
   is lost there. */
.hero--photo .hero-bg{object-position:60% 58%}

/* Text shadow is the safety net — if a browser drops the gradients, or a
   future photo is brighter still, the headline stays readable. */
.hero--photo h1{text-shadow:0 2px 18px rgba(6,18,34,.55)}
.hero--photo p.lead{text-shadow:0 1px 10px rgba(6,18,34,.5)}
.hero--photo .hero-stats b{text-shadow:0 2px 12px rgba(6,18,34,.45)}

/* ---------- search panel ----------
   Glass needs a CONSISTENT backdrop. This panel overlaps the hero photo on
   its top edge and white page below, and a translucent fill across that
   seam picks up the dark hero on one strip only — it reads as a smudge, not
   glass. So the panel stays solid and the glass goes to elements that sit
   fully over the photo (eyebrow, hero buttons). */
.searchbar{background:var(--grad-sheen);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;margin-top:-52px;
  position:relative;z-index:20;overflow:hidden;
  border:1px solid rgba(255,255,255,.85)}
/* Copper edge ties the panel to the hero it overlaps. */
.searchbar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-heat);z-index:1}
.searchbar h3{font-size:17px;color:var(--navy);margin-bottom:16px}
.search-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--grey);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.field select,.field input{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-size:15px;transition:.15s}
.field select:focus,.field input:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(234,115,23,.15)}
.search-grid .btn{align-self:end;height:44px;padding-inline:26px}

/* ---------- section headings ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:34px;flex-wrap:wrap}
/* Copper rule above each heading — the smallest possible structural cue that
   a new section has started, and it carries the accent through the page. */
.sec-head h2{font-size:clamp(26px,3.1vw,35px);color:var(--navy);
  letter-spacing:-.03em}
.sec-head h2::before{content:"";display:block;width:28px;height:3px;
  border-radius:3px;background:var(--grad-heat);margin-bottom:10px}
.sec-head p{color:var(--grey);margin-top:8px;font-size:16px}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center h2::before{margin-left:auto;margin-right:auto}
.sec-head--center p{max-width:600px}

/* ---------- vehicle cards ---------- */
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{background:var(--grad-sheen);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  position:relative;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* Lit top edge — invisible until hover, then the card looks picked out by a
   showroom lamp. Same motif as the hero's bottom hairline. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-edge);opacity:0;transition:opacity .22s ease;z-index:3}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);
  border-color:#D2DAE5}
.card:hover::before{opacity:1}
.card-media{position:relative;aspect-ratio:4/3;background:var(--mist);
  overflow:hidden}
.card-media .ph{width:100%;height:100%}
.card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.card:hover .card-media img{transform:scale(1.045)}
/* Sold vehicles stay published for SEO but read as past stock. The price
   drops its gradient here — struck-metal treatment is for stock you can
   still buy. -webkit-text-fill-color must be reset too, or the gradient's
   transparent fill wins over the colour. */
.card--sold .card-media img{filter:grayscale(.72) brightness(.94)}
.card--sold .price{background:none;color:var(--grey);
  -webkit-text-fill-color:var(--grey)}
.card--sold .card-kicker{color:var(--grey)}
.card--sold .card-kicker::before{background:var(--steel)}
.card--sold::before{background:linear-gradient(90deg,transparent,
  rgba(138,148,160,.5),transparent)}
/* Status is the one thing on a card that must never be ambiguous, so these
   stay solid — the previous backdrop-filter here did nothing anyway, since
   an opaque gradient sits on top of it. The glass treatment goes to the
   photo-count chip instead, where legibility matters less. */
.badge{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;z-index:2;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 10px rgba(12,29,51,.32)}
.badge--available{background:linear-gradient(135deg,#16A34A,#15803D)}
.badge--upcoming{background:var(--grad-heat)}
.badge--sold{background:linear-gradient(135deg,#7C8797,#5A6472)}
/* Photo count sits directly on the vehicle image — glass keeps the car
   visible through it instead of punching a solid hole in the photo. */
.card-photos{position:absolute;bottom:12px;right:12px;
  background:rgba(10,24,43,.42);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;
  display:flex;align-items:center;gap:5px;z-index:2}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card-photos{background:rgba(10,24,43,.75)}
}
.card-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
/* Kicker gets a copper tick instead of just copper text — it reads as a tag,
   and stops the kicker competing with the price for the same colour weight. */
.card-kicker{font-size:11.5px;font-weight:700;color:var(--copper-lo);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;
  display:inline-flex;align-items:center;gap:6px}
.card-kicker::before{content:"";width:12px;height:2px;border-radius:2px;
  background:var(--grad-heat);flex-shrink:0}
.card h3{font-size:17px;color:var(--navy);margin-bottom:10px}
/* SIGNATURE: the price is the loudest thing on a car card. Bumped a full
   step in scale and given the depth gradient so it reads as struck metal. */
.card .price{font-size:24px;font-weight:800;letter-spacing:-.03em;
  margin-bottom:14px;line-height:1.1;
  background:linear-gradient(135deg,#0F172A 0%,#153A66 55%,#1A5CA8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Longer prices (1,25,00,000) pushed the qualifier onto its own line and
   left a dangling "·". Its own line is fine — the separator is not. */
.card .price small{display:block;font-size:12.5px;font-weight:600;
  color:var(--grey);letter-spacing:0;-webkit-text-fill-color:var(--grey);
  margin-top:2px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:14px}
.specs div{padding:10px 4px;text-align:center}
.specs b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.specs span{font-size:11px;color:var(--grey);text-transform:uppercase;
  letter-spacing:.05em}
.card-foot{display:flex;gap:8px;margin-top:auto}
.card-foot .btn{flex:1}
/* "Notify me" on upcoming stock is a softer ask than "View details" on a car
   you can buy today. Solid copper at card width made the arriving-soon row
   shout louder than available stock — outline it so the hierarchy matches
   what we actually want people to click. */
.card-foot .btn--amber{background:#fff;color:var(--copper-lo);
  border-color:rgba(234,115,23,.45);box-shadow:none}
.card-foot .btn--amber::after{background:var(--grad-heat)}
.card-foot .btn--amber:hover{color:#fff;border-color:transparent;
  box-shadow:var(--shadow-copper)}

/* car silhouette placeholder — replaced by real photos */
.ph{background:linear-gradient(160deg,#EDF1F6,#DCE3EC);
  display:flex;align-items:center;justify-content:center}
.ph svg{width:64%;opacity:.5}
.ph--dark{background:linear-gradient(160deg,#2563A8,#153A66)}

/* ---------- browse tiles ---------- */
.tabs{display:inline-flex;background:rgba(255,255,255,.7);
  border:1px solid var(--line);padding:4px;border-radius:12px;margin-bottom:28px}
.tabs button{padding:9px 20px;border:none;background:none;border-radius:9px;
  font-weight:700;font-size:14.5px;color:var(--grey);cursor:pointer;transition:.15s}
.tabs button:hover{color:var(--navy)}
.tabs button.on{background:var(--grad-depth);color:#fff;
  box-shadow:0 4px 12px -4px rgba(12,29,51,.5)}

.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px;
  text-align:center;background:var(--grad-sheen);position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
/* Copper wash rises from the bottom on hover instead of a border colour
   change — brand names feel selectable rather than merely outlined. */
.tile::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,transparent 40%,rgba(234,115,23,.10));
  transition:opacity .18s ease}
.tile:hover{border-color:rgba(234,115,23,.5);box-shadow:var(--shadow);
  transform:translateY(-3px)}
.tile:hover::after{opacity:1}
.tile > *{position:relative;z-index:1}
.tile .ico{height:36px;display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;color:var(--navy)}
.tile b{display:block;font-size:14px;color:var(--ink)}
.tile span{display:block;font-size:12px;color:var(--grey)}
.tile .wordmark{font-size:17px;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;margin-bottom:5px}

/* ---------- feature / why-us ---------- */
.feat{background:var(--grad-sheen);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feat:hover{box-shadow:var(--shadow);border-color:#D2DAE5;transform:translateY(-3px)}
/* Icon tile carries the dark gradient — four small anchors of brand colour
   across an otherwise white row. */
.feat .ico{width:48px;height:48px;border-radius:12px;background:var(--grad-depth);
  color:#fff;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;box-shadow:0 6px 16px -6px rgba(12,29,51,.5)}
.feat:hover .ico{background:var(--grad-heat);
  box-shadow:var(--shadow-copper)}
.feat .ico{transition:background .2s ease,box-shadow .2s ease}
.feat h3{font-size:17px;color:var(--navy);margin-bottom:8px}
.feat p{color:var(--grey);font-size:15px}

/* ---------- process steps ---------- */
/* These four are a real sequence — a vehicle moves through them in order —
   so the numbering carries information and stays. It was invisible in
   --line grey; now it fades from copper into nothing, top-weighted. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  counter-reset:step}
.step{position:relative;padding-top:20px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-size:48px;font-weight:800;letter-spacing:-.04em;
  display:block;line-height:1;margin-bottom:12px;
  background:linear-gradient(180deg,rgba(234,115,23,.85),rgba(234,115,23,.12));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Connector between stages, hidden on the last one. */
.step::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,rgba(234,115,23,.45),rgba(234,115,23,.06))}
.step:last-child::after{background:linear-gradient(90deg,rgba(234,115,23,.45),transparent 60%)}
.step h3{font-size:16.5px;color:var(--navy);margin-bottom:7px}
.step p{color:var(--grey);font-size:14.5px}

/* ---------- CTA band ---------- */
.band{background:var(--grad-depth);
  color:#fff;border-radius:20px;padding:48px;display:flex;
  align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
  box-shadow:0 24px 48px -20px rgba(12,29,51,.55)}
/* Copper bloom behind the CTA, echoing the hero's light source. */
.band::before{content:"";position:absolute;right:-10%;top:-70%;width:620px;
  height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(234,115,23,.30) 0%,
    rgba(234,115,23,.05) 45%,transparent 70%)}
.band::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-edge)}
.band-text{position:relative;z-index:2;max-width:600px}
.band h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:10px}
.band p{color:rgba(255,255,255,.80);font-size:16px}
.band-actions{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- testimonials ---------- */
.quote{background:var(--grad-sheen);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;display:flex;
  flex-direction:column;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* Oversized quote mark, cropped by the card — decoration that says
   "testimonial" without a label. */
.quote::before{content:"\201C";position:absolute;top:-26px;right:6px;
  font-family:var(--font-head);font-size:110px;font-weight:800;
  color:rgba(234,115,23,.11);line-height:1;pointer-events:none}
.stars{color:#EA7317;font-size:15px;letter-spacing:2px;margin-bottom:14px}
.quote p{color:#334155;font-size:15.5px;flex:1;position:relative}
.quote-by{display:flex;align-items:center;gap:12px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-depth);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;flex-shrink:0;
  box-shadow:0 4px 12px -4px rgba(12,29,51,.5)}
.quote-by b{display:block;font-size:14.5px}
.quote-by span{font-size:12.5px;color:var(--grey)}

/* ---------- footer ---------- */
.footer{background:var(--grad-depth);color:rgba(255,255,255,.66);
  padding:60px 0 0;font-size:15px;margin-top:0;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-edge)}
.footer h4{color:#fff;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.10em;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.footer h4::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(234,115,23,.4),transparent)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px}
.footer a:hover{color:#fff}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
/* On the dark footer the seal needs its white disc behind it, so the padding
   stays — but the disc itself is round, not a square with rounded corners. */
.footer-brand img{width:56px;height:56px;background:#fff;border-radius:50%;
  padding:3px;object-fit:cover}
.footer-brand strong{color:#fff;font-size:16px;display:block}
.footer-brand small{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.footer-contact li{display:flex;gap:11px;align-items:flex-start}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;
  padding:20px 0;font-size:13.5px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* Label available to screen readers where the design shows only a
   placeholder or an icon. Not display:none — that hides it from them too. */
.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}

/* ---------- founder ---------- */
.founder{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.founder-photo{width:168px;height:168px;border-radius:14px;object-fit:cover;
  flex-shrink:0;border:1px solid var(--line);box-shadow:var(--shadow)}
.founder-body{flex:1;min-width:260px}
.founder-body h3{font-size:19px;color:var(--navy);margin-bottom:4px}
.founder-body p{color:#374151;font-size:15.5px;margin-bottom:12px}
.founder-role{font-size:13px;color:var(--copper-lo);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px!important}
/* The quote is the one moment of voice on the page, so it gets a copper
   rule rather than quotation marks — the mark would compete with the
   oversized one already used on testimonial cards. */
.founder-quote{margin:16px 0 0;padding:2px 0 2px 16px;
  border-left:3px solid var(--copper);color:var(--navy);font-size:16px;
  font-style:italic;line-height:1.5}

/* ---------- team ---------- */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.teamcard{border:1px solid var(--line);border-radius:12px;padding:18px;
  background:var(--grad-sheen);text-align:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.teamcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:#D2DAE5}
.teamcard-photo{width:86px;height:86px;border-radius:50%;object-fit:cover;
  margin:0 auto 12px;border:2px solid #fff;box-shadow:var(--shadow)}
.teamcard-photo--none{background:var(--mist);color:var(--steel);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);box-shadow:none}
.teamcard b{display:block;font-size:15.5px;color:var(--navy);line-height:1.3}
.teamcard-role{display:block;font-size:12.5px;color:var(--copper-lo);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.teamcard-bio{font-size:14px;color:var(--grey);margin-top:10px;line-height:1.5}
.teamcard-contact{display:grid;gap:6px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line)}
.teamcard-contact a{display:inline-flex;align-items:center;
  justify-content:center;gap:7px;font-size:13.5px;color:#374151;font-weight:600;
  /* One line, truncated with an ellipsis. Wrapping split the domain
     mid-word and read as a typo; the full address is still in the href and
     in the title attribute. */
  min-width:0;max-width:100%}
.teamcard-contact a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamcard-contact a:hover{color:var(--copper-lo)}
.teamcard-contact svg{flex-shrink:0;color:var(--navy)}

@media(max-width:900px){
  .teamgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .founder-photo{width:112px;height:112px}
  .teamgrid{grid-template-columns:1fr;gap:12px}
  /* Photo left, details right — a tall stack wastes the width on a phone.
     The card is a grid so the photo can span both text rows. */
  .teamcard{display:grid;grid-template-columns:64px 1fr;gap:4px 14px;
    align-items:center;text-align:left;padding:14px}
  .teamcard-photo{width:64px;height:64px;margin:0;grid-row:1/3}
  .teamcard b{align-self:end}
  .teamcard-role{align-self:start}
  .teamcard-bio,.teamcard-contact{grid-column:1/-1}
  .teamcard-contact{border-top:1px solid var(--line);padding-top:10px;
    margin-top:10px;justify-items:start}
  .teamcard-contact a{justify-content:flex-start}
}

/* ---------- map ---------- */
.mapbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  aspect-ratio:16/10;background:var(--mist)}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ---------- form feedback ---------- */
/* Honeypot. Must be invisible to people but present in the DOM for bots,
   so it is moved off-screen rather than display:none — some bots skip
   hidden fields, which would defeat the trap. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:15px;
  border:1px solid;display:flex;gap:10px;align-items:flex-start}
.notice b{display:block}
.notice--ok{background:#F0FDF4;border-color:#BBF7D0;color:#14532D}
.notice--bad{background:#FEF2F2;border-color:#FECACA;color:#7F1D1D}
/* Field-level error. Red text alone fails colour-blind users, so the
   invalid input also gets a red border via [aria-invalid]. */
.err{display:block;margin-top:6px;font-size:13px;font-weight:600;color:#B91C1C}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#DC2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* ---------- promotional popup ---------- */
.promo{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.promo[hidden]{display:none}
.promo-scrim{position:absolute;inset:0;background:rgba(10,24,43,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.promo-box{position:relative;background:#fff;border-radius:16px;overflow:hidden;
  width:100%;max-width:420px;box-shadow:0 24px 60px -12px rgba(10,24,43,.5);
  animation:promoIn .28s cubic-bezier(.2,.7,.2,1)}
@keyframes promoIn{from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}}
/* Rule 5: 40px minimum — a 30px X reads as broken on a phone. */
.promo-x{position:absolute;top:10px;right:10px;width:40px;height:40px;
  border-radius:50%;border:none;cursor:pointer;font-size:24px;line-height:1;
  background:rgba(255,255,255,.9);color:var(--ink);z-index:2;
  display:flex;align-items:center;justify-content:center}
.promo-x:hover{background:#fff}
.promo-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.promo-body{padding:26px 24px}
.promo-body h3{font-size:21px;color:var(--navy);margin-bottom:10px}
.promo-body p{color:var(--grey);font-size:15px;margin-bottom:20px}
@media(prefers-reduced-motion:reduce){.promo-box{animation:none}}

/* ---------- upload dropzone (sell form) ---------- */
.upload-drop{display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;border:2px dashed var(--line);border-radius:12px;
  padding:26px 16px;cursor:pointer;color:var(--grey);background:var(--mist);
  transition:.15s}
.upload-drop small{display:block;margin-top:2px}
.upload-drop:hover,.upload-drop.is-over{border-color:var(--copper);
  background:rgba(255,122,26,.06);color:var(--copper-lo)}
.upload-drop svg{color:var(--copper)}
.upload-drop b{color:var(--navy)}
.upload-drop small{font-size:12.5px;color:var(--grey)}
.upload-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;margin-top:12px}
.upload-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:8px;border:1px solid var(--line)}

/* ---------- filters (listing page) ---------- */
.layout{display:grid;grid-template-columns:274px 1fr;gap:32px;align-items:start}
/* Content-left variant (about, contact, sell). Must be a class, not an inline
   style — inline styles beat the media query that collapses this to 1 column. */
.layout--wide{grid-template-columns:1fr minmax(0,360px)}
.filters{background:var(--grad-sheen);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;position:sticky;top:96px}

/* Collapse toggle. Desktop has room for the full sidebar, so the button
   only exists below the breakpoint — see the 1024px block. */
.filters-toggle{display:none;width:100%;align-items:center;gap:10px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--navy);font-weight:700;font-size:15px;
  cursor:pointer;margin-bottom:14px;box-shadow:var(--shadow)}
.filters-toggle span:first-of-type{margin-right:auto}
.filters-count{background:var(--grad-heat);color:#fff;font-size:12px;
  font-weight:800;min-width:22px;height:22px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.filters-chev{transition:transform .2s ease;color:var(--grey);flex-shrink:0}
.filters-toggle[aria-expanded="true"] .filters-chev{transform:rotate(180deg)}
.filters h3{font-size:15px;color:var(--navy);margin-bottom:4px}
.fgroup{padding:18px 0;border-bottom:1px solid var(--line)}
.fgroup:last-of-type{border-bottom:none}
.fgroup > b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px;
  color:#374151;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--copper);margin:0}
.check span.count{margin-left:auto;font-size:12.5px;color:var(--grey)}
.range{display:flex;gap:8px;align-items:center}
.range input{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:7px;font-size:14px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--mist);
  border:1px solid var(--line);border-radius:100px;padding:6px 12px;
  font-size:13.5px;font-weight:600;color:#374151}
/* The remove control is a link (it navigates to a filtered URL), so it is
   styled to match the original button and given a real tap target. */
.chip button,.chip a{background:none;border:none;cursor:pointer;color:var(--grey);
  font-size:15px;line-height:1;padding:0 2px;text-decoration:none}
.chip a:hover{color:var(--copper-lo)}
.listing-top{display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-bottom:20px;flex-wrap:wrap}
.listing-top .count{font-size:14.5px;color:var(--grey)}
.listing-top .count b{color:var(--ink)}
.sort{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--grey)}
.sort select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:14.5px;background:#fff}

.pager{display:flex;gap:7px;justify-content:center;margin-top:40px}
.pager a{min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:8px;
  font-weight:600;font-size:14.5px;background:#fff}
.pager a.on{background:var(--grad-depth);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(12,29,51,.5)}
.pager a:hover:not(.on){border-color:var(--copper);color:var(--copper-lo)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13.5px;color:var(--grey);padding:18px 0;display:flex;
  gap:8px;flex-wrap:wrap}
.crumb a:hover{color:var(--navy)}
.crumb .sep{opacity:.5}

/* ---------- detail page ---------- */
/* min-width:0 stops grid children refusing to shrink below their content
   width, which otherwise forces horizontal scroll on narrow phones. */
.layout > *,.detail > *{min-width:0}
.detail{display:grid;grid-template-columns:1fr minmax(0,380px);gap:36px;align-items:start}
/* Sidebar scrolls with the page like everything else — no sticky, no inner
   scroll area. The overlap this once solved is gone for a simpler reason:
   .buybox is no longer individually sticky, so the price card and the
   enquiry form are just two blocks stacked in normal flow. */
.gallery-main{aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);position:relative;margin-bottom:12px;
  background:var(--mist)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gallery-thumbs .t{aspect-ratio:4/3;border-radius:8px;overflow:hidden;padding:0;
  border:2px solid transparent;cursor:pointer;transition:.15s;position:relative;
  background:var(--mist);display:block}
.gallery-thumbs .t img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs .t.on{border-color:var(--copper)}
.gallery-thumbs .t:hover{border-color:var(--steel)}
.gallery-thumbs .t--more span{position:absolute;inset:0;background:rgba(17,24,39,.62);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px}

/* NOT sticky. Sticking this card pinned the price box while the enquiry
   form below it scrolled underneath, so the two overlapped by up to 490px.
   Both cards now sit in normal flow and scroll with the page. */
.buybox{border:1px solid var(--line);border-radius:16px;padding:24px;
  background:var(--grad-sheen);
  box-shadow:var(--shadow-lg);overflow:hidden}
.buybox::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-heat)}
/* Same struck-metal price as the cards, one scale step up — on the detail
   page this is the single most important number. */
.buybox .price{font-size:36px;font-weight:800;letter-spacing:-.035em;
  line-height:1.1;
  background:linear-gradient(135deg,#0F172A 0%,#153A66 55%,#1A5CA8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.buybox .price-note{font-size:13.5px;color:var(--grey);margin:6px 0 20px}
.buybox .btn{margin-bottom:10px}
.buybox-trust{border-top:1px solid var(--line);margin-top:18px;padding-top:18px;
  display:grid;gap:11px;font-size:14px;color:#374151}
.buybox-trust div{display:flex;gap:10px;align-items:flex-start}
/* min-width:0 lets the text column wrap instead of forcing the whole
   page wider on narrow phones. */
.buybox-trust div > span{min-width:0}
.buybox-trust svg{flex-shrink:0;color:var(--green);margin-top:2px}

/* Two spec tables side by side. minmax(0,1fr) rather than 1fr: a plain 1fr
   floors at the content's minimum width, and a table's minimum is wide
   enough to push the whole page past the viewport on a phone. */
.specsplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media(max-width:640px){
  /* One column below this — two tables cannot share a phone's width without
     the labels wrapping to nonsense. */
  .specsplit{grid-template-columns:1fr;gap:0}
}

.spectable{width:100%;border-collapse:collapse;font-size:15px;
  /* Lets the cells shrink with the column instead of holding it open. */
  table-layout:fixed}
.spectable td{overflow-wrap:break-word}
.spectable td{padding:13px 0;border-bottom:1px solid var(--line)}
.spectable td:first-child{color:var(--grey);width:45%}
.spectable td:last-child{font-weight:600;text-align:right}
.panel{border:1px solid var(--line);border-radius:12px;padding:26px;
  margin-top:28px}
.panel h2{font-size:20px;color:var(--navy);margin-bottom:18px}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  font-size:15px}
.checklist div{display:flex;gap:10px;align-items:flex-start;color:#374151}
.checklist svg{color:var(--green);flex-shrink:0;margin-top:3px}

/* ---------- floating contact ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;
  flex-direction:column;gap:10px}
.fab a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;box-shadow:var(--shadow-lg);transition:.18s}
.fab a:hover{transform:scale(1.07)}
.fab .wa{background:linear-gradient(135deg,#3AE07A,#1FB855)}
.fab .tel{background:var(--grad-heat)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  /* Nav + Call button stop fitting beside the logo well before the mobile
     breakpoint — drop the CTA first, the topbar still shows the number. */
  .header-cta{display:none}
  .nav a{padding:9px 10px;font-size:14.5px}
}
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .filters{position:static}

  /* Below the sidebar breakpoint the filter panel collapses behind a button,
     so the stock is on screen immediately instead of 2.4 screens down. */
  .filters-toggle{display:flex}
  .filters[data-open="false"]{display:none}
  /* The button already says "Filters" — the heading inside the panel would
     repeat it directly underneath. "Clear all" beside it still shows. */
  .filters h3{display:none}
  .filters{margin-top:-4px}
  .detail{grid-template-columns:1fr}
  .search-grid{grid-template-columns:repeat(2,1fr)}
  .search-grid .btn{grid-column:1/-1}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:768px){
  .nav,.header-cta{display:none}
  .burger{display:block}
  .navdrawer{display:block}
  .header .wrap{min-height:66px}
  .brand img{width:44px;height:44px;border-radius:50%}
  .brand-text strong{font-size:15px}
  .grid{gap:16px}
  .grid--3,.grid--4,.grid--2{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr);gap:10px}
  .section{padding:48px 0}
  .sec-head{margin-bottom:24px}

  /* Hero was filling the whole viewport before any stock was visible.
     Scale type and spacing down so a vehicle card is on screen sooner. */
  .hero{padding:34px 0 40px}
  .eyebrow{font-size:12px;padding:5px 12px;margin-bottom:16px}
  .hero h1{font-size:27px;margin-bottom:12px}
  .hero h1 .thin{font-size:.62em;margin-top:7px}
  .hero p.lead{font-size:15.5px;margin-bottom:22px}
  .hero-actions{margin-bottom:26px}
  .hero-stats{gap:16px 24px;padding-top:18px}
  .hero-stats b{font-size:19px}
  .hero-stats span{font-size:12px}
  .band{padding:30px 22px;border-radius:14px}
  .checklist{grid-template-columns:1fr}

  /* Topbar was wrapping to two rows (59px) because the social icons could not
     fit beside the contact text. Icons are already in the footer, so drop them
     here and keep one lean row: phone + hours. */
  .topbar{font-size:12.5px}
  .topbar .wrap{min-height:34px;flex-wrap:nowrap;justify-content:flex-start;
    gap:16px}
  .topbar-social{display:none}
  .topbar-left{flex-wrap:nowrap;gap:16px;width:100%;
    justify-content:space-between}
  .topbar-left span:nth-child(2){display:none}   /* address — it is in the footer */
  .topbar-left span{white-space:nowrap}
  /* Search panel no longer overlaps the hero on small screens — at this size
     the negative margin just crushes the hero's bottom padding. */
  .searchbar{margin-top:-30px;padding:18px}

  .panel{padding:22px 18px}
}

@media(max-width:560px){
  /* Stay 2-up. One column makes each card enormous and the catalogue
     endless to scroll — 2-up is how people actually browse stock on a phone. */
  .grid--3,.grid--4,.grid--2{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-body{padding:12px 12px 13px}
  .card h3{font-size:14.5px;margin-bottom:7px}
  .card .price{font-size:16px;margin-bottom:10px}
  .card .price small{display:block;font-size:11.5px}
  .card-kicker{font-size:10.5px;margin-bottom:4px}
  .specs{grid-template-columns:repeat(3,1fr);margin-bottom:10px}
  .specs div{padding:7px 2px}
  .specs b{font-size:12px}
  .specs span{font-size:9.5px;letter-spacing:.03em}
  .card-foot .btn{padding:9px 10px;font-size:13px}
  .badge{font-size:10px;padding:4px 8px;top:8px;left:8px}
  .card-photos{font-size:11px;padding:3px 7px;bottom:8px;right:8px}

  .tiles{grid-template-columns:repeat(2,1fr)}
  .search-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:18px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .gallery-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .section{padding:40px 0}
  .hero{padding:30px 0 36px}
  .hero h1{font-size:25px}
  .hero p.lead{font-size:15px;margin-bottom:20px}
  /* Stack hero CTAs. Forcing them side by side makes the longer label
     overflow its own button — full width reads better on a phone anyway. */
  .hero-actions{gap:9px;flex-direction:column;align-items:stretch;margin-bottom:22px}
  .hero-actions .btn{width:100%}
  /* 2x2 keeps the stat block compact instead of a tall stack. */
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
    padding-top:16px}
  .hero-stats b{font-size:18px}
  .wrap{padding:0 16px}
  /* Full-width tap targets for the primary actions. */
  .buybox .btn,.band-actions .btn{width:100%}
  .band-actions{width:100%}
}

@media(max-width:380px){
  /* Below ~380px the number and the hours cannot share one line without
     clipping. Keep the number — it is the action; hours are on /contact. */
  .topbar-left span:nth-child(3){display:none}
  .topbar-left{justify-content:flex-start}

  /* Only truly narrow phones drop to a single column. */
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .card h3{font-size:16px}
  .card .price{font-size:19px}
}

/* Bigger touch targets on any touch device, regardless of width. */
@media(hover:none){
  .nav a,.pager a,.check{min-height:44px;display:flex;align-items:center}
  .fab a{width:56px;height:56px}
}

/* ---------- hero load sequence ----------
   One staggered rise as the page opens. Deliberately confined to the hero:
   scroll-triggered reveals everywhere would need JS and would delay the
   stock, which is what people came for. */
.hero-inner > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.hero-inner > .eyebrow{animation-delay:.05s}
.hero-inner > h1{animation-delay:.14s}
.hero-inner > .lead{animation-delay:.23s}
.hero-inner > .hero-actions{animation-delay:.32s}
.hero-inner > .hero-stats{animation-delay:.41s}
@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
    animation-iteration-count:1!important}
  .card:hover{transform:none}
  .card:hover .card-media img{transform:none}
  .card:hover,.feat:hover,.tile:hover,.quote:hover,.btn:hover{transform:none}
  /* The pulse and the load sequence must not just run fast — they must not
     run. backwards fill would otherwise leave the hero at opacity 0. */
  .eyebrow .dot{animation:none}
  .hero-inner > *{animation:none;opacity:1;transform:none}
}