/* ==========================================================================
   DealerFront dealer site: master stylesheet
   Shared by every dealer. Per-site colours and fonts live in theme.css.
   Per-site additions live in custom.css and are never overwritten.

   Order: fonts, reset, type, layout, buttons, chrome, forms, cards,
   listing, vehicle, home, content pages, utilities.
   ========================================================================== */

/* ---------- Fonts, served locally ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   HUD MOTORS — HOME PAGE
   Build reference for the dev team. Section order matches the current
   /home-pro/ build exactly. Nothing has been added or removed except the
   brand index at the foot, which the Dealerfront revision document requires.

   WHAT CHANGED FROM /home-pro/ AND WHY
   1. Section headings are near-black, left aligned, weight 400. Red moved to
      the small label above each heading. Red now does three jobs only:
      eyebrow labels, primary buttons, and the price on a vehicle card.
   2. Hero carries four banners: Inventory, Financing, Sell or Trade,
      Car Finder.
   3. Brand tiles, body style and featured vehicles are rotating carousels
      that page a full row at a time, so cards are never clipped mid-card.
   4. Stat counters run on scroll. They were stuck at 0+.
   5. The duplicate "Drive With Confidence" heading is resolved. The split is
      Drive with confidence; the four boxes below are What sets us apart.
   6. Google Reviews has content.
   7. Upland copy corrected to La Habra throughout.
   8. One spacing value on every section: 96px desktop, 64px mobile.

   INTEGRATION
   - Photography is inline SVG placeholder. Every one is marked PHOTO SLOT
     with the size to supply. Swap for the dealer's own images.
   - Plugin regions are marked DEALERFRONT PLUGIN.
   - Colour, type and spacing are all tokens in the :root block below. Change
     --red to rebrand.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none !important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.022em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.4vw,3.7rem)}
h2{font-size:clamp(1.75rem,2.7vw,2.5rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{color:var(--steel)}
.lead{font-size:1.04rem;line-height:1.75;max-width:62ch}

/* The one repeated device: a pair of leaning red ticks, a mono label, then a
   black heading. The lean matches the italic forward slant of the wordmark,
   so the marker belongs to this brand rather than being a generic rule.
   Alternatives if this is not wanted, all single-line swaps below:
     a) one tick only: delete the .eyebrow::before + second box-shadow
     b) a small square: width 5px, height 5px, no skew
     c) no marker at all: remove ::before and keep the mono label on its own */
.eyebrow{
  display:flex;align-items:center;gap:.75em;
  font-family:var(--data);font-size:.67rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";flex:none;width:3px;height:13px;background:var(--red);
  transform:skewX(-16deg);
  box-shadow:7px 0 0 rgba(217,31,38,.35);   /* the second, quieter tick */
  margin-right:8px;                          /* room for the shadow tick */
}

.section{padding:var(--pad) 0}
.section--mist{background:var(--mist)}
.section--dark{background:var(--ink-2);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--mute)}
.head{max-width:680px;margin-bottom:48px}
.head h2 + .lead{margin-top:14px;color:var(--steel)}
.head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.head--row > div{max-width:680px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);font-weight:500;font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;padding:1.05em 2em;border-radius:var(--radius);
  transition:background .18s,color .18s,border-color .18s,transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--line{border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.section--dark .btn--line,.hero .btn--line{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
.section--dark .btn--line:hover,.hero .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--sm{font-size:.7rem;padding:.85em 1.4em}
.tlink{
  display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--red);transition:gap .2s;
}
.tlink:hover{gap:.9em}

/* ---------- Top bar ---------- */
.topbar{background:var(--ink-2);color:var(--mute);font-size:.78rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;flex-wrap:wrap}
.topbar__group{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.topbar a,.topbar span.ti{display:inline-flex;align-items:center;gap:.5em;transition:color .15s}
.topbar a:hover{color:#fff}
.topbar svg{width:14px;height:14px;stroke:var(--red);fill:none;stroke-width:1.5;flex:none}
.topbar__closed{color:var(--red)}
.social{display:flex;align-items:center;gap:12px;padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}

/* Mobile action bar. Hidden on desktop, replaces the info bar below 720px. */
.actionbar{display:none;background:var(--ink-2)}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 8px;
  color:var(--mute);font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.1);transition:color .15s,background .15s;
}
.actionbar a:first-child{border-left:0}
.actionbar a:active{background:rgba(255,255,255,.06);color:#fff}
.actionbar svg{width:15px;height:15px;flex:none;stroke:var(--red);fill:none;stroke-width:1.6}
.actionbar span{white-space:nowrap}
@media (max-width:360px){
  .actionbar a{gap:.4em;font-size:.58rem;letter-spacing:.1em}
  .actionbar svg{width:14px;height:14px}
}
.social a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;transition:background .15s}
.social a:hover{background:rgba(255,255,255,.1)}
.social svg{width:14px;height:14px;fill:currentColor;stroke:none}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.is-stuck{box-shadow:0 1px 20px rgba(20,22,26,.09)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;height:78px}
.logo{display:block;line-height:0}
.logo img{height:34px;width:auto}
@media (max-width:720px){.logo img{height:26px}}
/* The supplied logo is a black wordmark. On the dark footer it is inverted
   to white in CSS, so only one asset is needed. */
.footer .logo img{filter:brightness(0) invert(1)}
.nav{display:flex;gap:2px}
.nav a{position:relative;font-size:.84rem;font-weight:500;letter-spacing:.02em;padding:11px 13px}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1)}
.nav a.is-current{color:var(--red)}
.header__phone{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-size:1.05rem;font-weight:500}
.header__phone svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:1.6}
.navtoggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.navtoggle span{width:22px;height:2px;background:var(--ink);transition:transform .22s,opacity .22s}
.navtoggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle.is-open span:nth-child(2){opacity:0}
.navtoggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobilenav{display:none;background:var(--paper);border-bottom:1px solid var(--line)}
.mobilenav.is-open{display:block}
.mobilenav a{display:block;padding:15px 28px;border-top:1px solid var(--line-soft);font-size:.95rem;font-weight:500}
.mobilenav__foot{padding:18px 28px;border-top:1px solid var(--line-soft);display:grid;gap:10px}

/* ---------- Hero: four rotating banners ---------- */
.hero{position:relative;background:var(--ink-2);color:#fff;overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none;display:flex;align-items:center}
.hero__slide.is-active{position:relative;opacity:1;pointer-events:auto}
.hero__slide > .wrap{width:100%}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg svg{width:100%;height:100%}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,11,14,.95) 0%,rgba(9,11,14,.86) 34%,rgba(9,11,14,.45) 62%,rgba(9,11,14,.05) 100%)}
.hero__inner{position:relative;z-index:1;padding:132px 0 168px;max-width:620px}
.hero .eyebrow{color:#fff}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero p{
  color:#D2D6DD;font-size:1.05rem;line-height:1.7;max-width:52ch;margin-bottom:2rem;
  min-height:calc(2 * 1.7em);   /* two lines on desktop, so slides do not jump */
}
.hero__actions{display:flex;gap:13px;flex-wrap:wrap}
.is-active .eyebrow,.is-active h1,.is-active .hero__copy p,.is-active .hero__actions{animation:up .8s cubic-bezier(.22,.7,.3,1) both}
.is-active h1{animation-delay:.08s}
.is-active .hero__copy p{animation-delay:.16s}
.is-active .hero__actions{animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__nav{position:absolute;z-index:2;left:0;right:0;bottom:104px}
.hero__nav .wrap{display:flex;gap:18px}
.dot{display:flex;align-items:center;gap:9px;font-family:var(--data);font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.45);transition:color .25s}
.dot::after{content:"";width:26px;height:2px;background:rgba(255,255,255,.25);transition:background .25s,width .25s}
.dot.is-active{color:#fff}
.dot.is-active::after{background:var(--red);width:46px}
.arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s}
.arrow:hover{background:var(--red);border-color:var(--red)}
.arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.arrow--prev{left:26px}
.arrow--next{right:26px}

/* ---------- Search panel ---------- */
.search{position:relative;z-index:5;margin-top:-46px}
.search__card{background:var(--paper);box-shadow:var(--shadow);border-radius:var(--radius);padding:28px 30px 30px}
.search__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.search__head h2{font-size:1.2rem}
.search__head .tally{font-family:var(--data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.search__tabs{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);padding:3px;margin-bottom:20px}
.stab{
  font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:.72em 1.3em;border-radius:2px;color:var(--steel);transition:background .18s,color .18s;
}
.stab:hover{color:var(--ink)}
.stab.is-active{background:var(--red);color:#fff}
.search__grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end}
.searchrow{display:flex;gap:10px}
.searchrow input{
  flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;font-size:.92rem;transition:border-color .18s,box-shadow .18s;
}
.searchrow input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}
.searchrow .btn{height:47px;padding-top:0;padding-bottom:0}

/* ---------- Brand logo marquee ----------
   Continuous rotation. The track is duplicated so the loop is seamless;
   keep both copies in sync when editing. */
.logos{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;background:var(--paper)}
.logos__track{display:flex;width:max-content;animation:logos 46s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__item{
  display:grid;place-items:center;padding:0 34px;min-width:172px;
  font-family:var(--display);font-size:1.08rem;font-weight:500;letter-spacing:.04em;
  color:#B6BCC5;white-space:nowrap;transition:color .2s;
}
.logos__item:hover{color:var(--ink)}
.logos__item img{max-height:30px;width:auto;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.logos__item:hover img{filter:none;opacity:1}
@keyframes logos{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos__track{animation:none}}
.search__grid .btn{height:47px;padding-top:0;padding-bottom:0}

/* ==========================================================================
   CAROUSEL — one component, used by brand tiles, body style and featured
   vehicles. Pages a full row at a time so a card is never half visible.
   Cards per view come from data-per, and step down at each breakpoint.
   ========================================================================== */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{
  display:flex;gap:var(--gap);
  transition:transform .55s cubic-bezier(.22,.7,.3,1);will-change:transform;
}
.carousel__item{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))}
.carousel__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px}
.carousel__dots{display:flex;gap:8px}
.cdot{width:26px;height:3px;background:var(--line);border-radius:2px;transition:background .2s,width .2s}
.cdot.is-active{background:var(--red);width:40px}
.carousel__arrows{display:flex;gap:8px}
.carr{
  width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:border-color .18s,background .18s,color .18s;
}
.carr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.carr:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.carr:disabled{opacity:.35;cursor:default}

/* ---------- Brand tiles ---------- */
.tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);aspect-ratio:4/3}
.tile svg{position:absolute;inset:0;width:100%;height:100%}
.tile__label{
  position:absolute;left:16px;right:16px;bottom:16px;background:var(--paper);padding:11px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--display);font-size:.92rem;font-weight:500;letter-spacing:.02em;
  transition:background .18s,color .18s;
}
.tile__label span{font-family:var(--data);font-size:.62rem;letter-spacing:.12em;color:var(--steel)}
.tile:hover .tile__label{background:var(--red);color:#fff}
.tile:hover .tile__label span{color:rgba(255,255,255,.75)}

/* ---------- Shop by make chips ---------- */
.chips{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.chip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-size:.9rem;transition:border-color .18s,background .18s;
}
.chip span{font-family:var(--data);font-size:.62rem;color:var(--mute)}
.chip:hover{border-color:var(--red);background:var(--paper)}
.chip:hover span{color:var(--red)}

/* ---------- Feature boxes ---------- */
.boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.box{background:var(--paper);padding:34px 30px}
.box svg{width:26px;height:26px;stroke:var(--red);fill:none;stroke-width:1.3;margin-bottom:20px}
.box h3{margin-bottom:8px}
.box p{font-size:.92rem}
.flipgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flip{perspective:1400px;min-height:194px}
.flip__inner{
  position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,.7,.3,1);
}
.flip:hover .flip__inner,.flip:focus-within .flip__inner,.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;
}
.flip__front{background:var(--paper);border:1px solid var(--line)}
.flip__front svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.3;margin-bottom:auto}
.flip__front h3{margin-bottom:7px}
.flip__front p{font-size:.9rem}
.flip__back{background:var(--ink-2);color:#fff;transform:rotateY(180deg);justify-content:center}
.flip__back h3{color:#fff;margin-bottom:10px}
.flip__back p{color:var(--mute);font-size:.86rem;line-height:1.6}
.flip__link{
  margin-top:14px;align-self:flex-start;font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;padding-bottom:4px;border-bottom:1px solid var(--red);
}
@media (prefers-reduced-motion:reduce){
  .flip{min-height:0}
  .flip__inner{transform:none !important}
  .flip__face{position:static}
  .flip__front{display:none}
  .flip__back{transform:none;border-radius:var(--radius)}
}

/* ---------- Body style card ---------- */
.style{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 14px 24px;text-align:center;transition:border-color .18s,background .18s;
}
.style:hover{border-color:var(--red)}
.style svg{width:104px;height:38px;margin:0 auto 16px;fill:#C4C9D1;transition:fill .2s}
.style:hover svg{fill:var(--red)}
.style b{display:block;font-size:.9rem;font-weight:500}
.style span{display:block;font-family:var(--data);font-size:.6rem;letter-spacing:.14em;color:var(--steel);margin-top:5px}

/* ---------- Car finder rotator ---------- */
.finder{position:relative;background:var(--ink-2);color:#fff;border-radius:var(--radius);overflow:hidden;min-height:330px}
.finder__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.finder__slide.is-active{position:relative;opacity:1;pointer-events:auto}
.finder__copy{padding:56px 58px}
.finder__copy h2{color:#fff;margin-bottom:.6rem}
.finder__copy p{color:var(--mute);max-width:44ch;margin-bottom:1.7rem}
.finder__art{position:relative;align-self:stretch;min-height:250px}
.finder__art svg{position:absolute;inset:0;width:100%;height:100%}
.finder__nav{position:absolute;z-index:2;bottom:26px;left:58px;display:flex;gap:16px}

/* ---------- Stats ---------- */
/* Stat band. Depth comes from layered CSS gradients, so there is no image to
   source or maintain: a light sheen from the top right, a soft accent glow at
   the bottom right, over a diagonal base. */
.statband{
  position:relative;overflow:hidden;color:#fff;padding:var(--pad) 0;border-top:2px solid var(--red);
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(80% 120% at 100% 108%, rgba(217,31,38,.13) 0%, rgba(217,31,38,0) 62%),
    linear-gradient(112deg, #1B2028 0%, #0F1218 46%, #08090C 100%);
}
/* Hairline near the foot, echoing the rule under each figure */
.statband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.07)}
.statband .wrap{position:relative;z-index:1}
.statband__head{margin-bottom:52px}
.statband__head h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 44px;border-left:1px solid rgba(255,255,255,.11)}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{
  font-family:var(--display);font-weight:200;font-size:clamp(2.9rem,4.6vw,4.2rem);
  line-height:1;letter-spacing:-.035em;color:#fff;
}
.stat__n i{font-style:normal;font-weight:300;color:var(--red)}
.stat__bar{display:block;width:0;height:2px;background:var(--red);margin-top:20px;transition:width 1.7s cubic-bezier(.22,.7,.3,1)}
.stat.is-in .stat__bar{width:48px}
.stat__l{font-family:var(--data);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:16px}/* ---------- Vehicle card ---------- */

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split__art{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--ink-2)}
.split__art svg{position:absolute;inset:0;width:100%;height:100%}
.checks{display:grid;gap:13px;margin-top:24px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--steel)}
.checks svg{width:17px;height:17px;flex:none;margin-top:5px;stroke:var(--red);fill:none;stroke-width:1.7}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start}
.score{border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:center;background:var(--paper)}
.score__n{font-family:var(--display);font-weight:400;font-size:3.1rem;line-height:1;letter-spacing:-.03em}
.stars{display:flex;justify-content:center;gap:4px;margin:12px 0 10px}
.stars svg{width:16px;height:16px;fill:var(--red);stroke:none}
.score__m{font-family:var(--data);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.rlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.review{background:var(--paper);padding:28px 26px}
.review .stars{justify-content:flex-start;margin:0 0 14px}
.review p{font-size:.92rem;color:var(--ink);margin-bottom:16px}
.review cite{font-style:normal;font-size:.8rem;color:var(--steel)}
.review cite b{display:block;color:var(--ink);font-weight:500;font-size:.86rem}

/* ---------- Finance band ---------- */
.band{background:var(--red);color:#fff}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:52px 28px;flex-wrap:wrap}
.band h2{color:#fff;max-width:22ch}
.band p{color:rgba(255,255,255,.86);max-width:56ch;margin-top:8px}
.band .btn{background:#fff;color:var(--ink)}
.band .btn:hover{background:var(--ink);color:#fff}

/* ---------- Footer ---------- */
.footer{background:var(--ink-2);color:var(--mute);font-size:.9rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:50px;padding:70px 0 50px}
.footer h4{color:#fff;font-family:var(--data);font-size:.64rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px}
.footer .logo{color:#fff}
.footer__about{margin-top:18px;max-width:36ch;line-height:1.75;font-size:.88rem}
.footer li{margin-bottom:10px}
.footer a:hover{color:#fff}
.hours{width:100%;border-collapse:collapse;font-size:.86rem}
.hours td{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hours td:last-child{text-align:right;font-family:var(--data);font-size:.76rem;color:#fff}
.footer .social{margin-top:20px;padding-left:0;border-left:0}
.footer .social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.16)}
.footer .social a:hover{background:var(--red);border-color:var(--red)}
.legal{border-top:1px solid rgba(255,255,255,.1);padding:24px 0}
.legal .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.legal ul{display:flex;gap:22px;flex-wrap:wrap;font-size:.8rem}
.by{display:flex;align-items:center;gap:9px;font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.by b{font-family:var(--display);font-size:.88rem;font-weight:500;letter-spacing:.01em;color:#fff}
.by b i{font-style:normal;color:var(--red)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.22,.7,.3,1),transform .75s cubic-bezier(.22,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .nav,.header__phone{display:none}
  .navtoggle{display:flex}
  .search__grid{grid-template-columns:repeat(2,1fr)}
  .search__grid .btn{grid-column:1/-1}
  .carousel{--per:2 !important}
  .chips{grid-template-columns:repeat(3,1fr)}
  .boxes{grid-template-columns:repeat(2,1fr)}
  .flipgrid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 0}
  .stat{padding:0 34px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .statband__head{margin-bottom:44px}
  .finder__slide{grid-template-columns:1fr}
  .finder__art{display:none}
  .split{grid-template-columns:1fr;gap:40px}
  .reviews{grid-template-columns:1fr}
  .rlist{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:720px){
  :root{--pad:64px}
  .wrap{padding:0 20px}
  .topbar{display:none}
  .actionbar{display:grid;grid-template-columns:repeat(3,1fr)}
  .header .wrap{height:66px}
  .hero__inner{padding:86px 0 132px}
  .hero p{font-size:.98rem;min-height:calc(3 * 1.7em)}   /* three lines on mobile */
  .stat{padding:0 22px}
  .stat__bar{margin-top:14px}
  .stat__l{margin-top:12px;font-size:.58rem;letter-spacing:.16em}
  .arrow{display:none}
  .hero__nav{bottom:70px}
  .search{margin-top:-30px}
  .search__card{padding:24px 20px}
  .search__grid{grid-template-columns:1fr}
  .search__tabs{display:flex;width:100%}
  .stab{flex:1;text-align:center;padding:.72em .5em;font-size:.66rem;letter-spacing:.08em;white-space:nowrap}
  .searchrow{flex-direction:column}
  .searchrow .btn{width:100%}
  .carousel{--per:1 !important}
  .chips{grid-template-columns:repeat(2,1fr)}
  .boxes{grid-template-columns:1fr}
  .flipgrid{grid-template-columns:1fr}
  .flip{min-height:182px}
  .rlist{grid-template-columns:1fr}
  .finder__copy{padding:38px 26px 64px}
  .finder__nav{left:26px}
  .footer__grid{grid-template-columns:1fr;gap:36px}
  .band .wrap{padding:44px 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   INVENTORY
   Filters live in a side drawer. Every control applies on change, so there is
   no per group apply button; the drawer footer carries a single live count.
   ========================================================================== */

.inv{padding:36px 0 var(--pad)}
.inv__head{margin-bottom:26px}
.inv__head h1{font-size:clamp(1.7rem,2.6vw,2.3rem)}
.inv__head p{margin-top:8px;font-size:.96rem;max-width:70ch}

/* ---------- Toolbar ---------- */
.toolbar{
  position:sticky;top:78px;z-index:40;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;gap:14px;padding:12px 14px;flex-wrap:wrap;transition:box-shadow .2s;
}
.toolbar.is-stuck{box-shadow:0 8px 24px rgba(20,22,26,.08)}
.filterbtn{
  display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.3em;border-radius:var(--radius);
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;transition:background .18s;
}
.filterbtn:hover{background:#000}
.filterbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.filterbtn__n{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  display:none;place-items:center;font-family:var(--data);font-size:.58rem;letter-spacing:0;
}
.filterbtn.has-filters .filterbtn__n{display:grid}

.toolsearch{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;padding:0 6px}
.toolsearch svg{width:16px;height:16px;flex:none;stroke:var(--steel);fill:none;stroke-width:1.6}
.toolsearch input{flex:1;min-width:0;border:0;background:none;font-size:.92rem;padding:10px 0}
.toolsearch input:focus{outline:none}
.toolsearch input::placeholder{color:var(--mute)}

.toolbar__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.toolbar__right .field{flex-direction:row;align-items:center;gap:9px}
.toolbar__right .field label{white-space:nowrap}
.toolbar__right select{padding:9px 32px 9px 12px;font-size:.86rem}
.viewtoggle{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.viewtoggle button{padding:9px 11px;display:grid;place-items:center;transition:background .15s}
.viewtoggle button{color:var(--steel)}
.viewtoggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.viewtoggle button.is-active{color:#fff}
.viewtoggle button.is-active{background:var(--ink)}

/* ---------- Drawer ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(10,12,15,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:90;width:380px;max-width:88vw;background:var(--paper);
  display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .34s cubic-bezier(.22,.7,.3,1);
  box-shadow:0 0 60px rgba(10,12,15,.3);
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);flex:none;
}
.drawer__head h2{font-size:1.1rem}
.drawer__head .filterbtn__n{background:var(--red)}
.drawer__close{margin-left:auto;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .15s}
.drawer__close:hover{background:var(--mist)}
.drawer__close svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.6}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.drawer__foot{
  flex:none;border-top:1px solid var(--line);padding:16px 24px;display:flex;align-items:center;gap:14px;
  background:var(--paper);
}
.drawer__foot .btn{flex:1}
.drawer__clear{
  font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  padding-bottom:3px;border-bottom:1px solid var(--line);transition:color .15s,border-color .15s;
}
.drawer__clear:hover{color:var(--red);border-color:var(--red)}

/* ---------- Facet groups ---------- */
.facet{border-bottom:1px solid var(--line-soft)}
.facet__head{
  width:100%;display:flex;align-items:center;gap:10px;padding:16px 24px;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;transition:color .15s;
}
.facet__head:hover{color:var(--red)}
.facet__head::after{
  content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s,border-color .2s;
}
.facet.is-open .facet__head::after{transform:rotate(225deg) translateY(-2px);border-color:var(--red)}
.facet__sel{font-family:var(--data);font-size:.58rem;letter-spacing:.06em;color:var(--red)}
.facet__panel{display:none;padding:0 24px 18px}
.facet.is-open .facet__panel{display:block}
.facet__scroll{max-height:224px;overflow-y:auto;margin-right:-8px;padding-right:8px}

.opt{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:.88rem;color:var(--steel);cursor:pointer}
.opt:hover{color:var(--ink)}
.opt input{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;position:relative;
  border:1px solid var(--line);border-radius:2px;transition:all .15s;
}
.opt input:checked{background:var(--red);border-color:var(--red)}
.opt input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.opt__n{margin-left:auto;font-family:var(--data);font-size:.6rem;font-style:normal;color:var(--mute)}
.opt.is-empty{opacity:.35;pointer-events:none}

.facet__hint{font-size:.8rem;color:var(--mute);line-height:1.6}
.range{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.range input,.range select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;font-size:.88rem;
  appearance:none;-webkit-appearance:none;background:var(--paper);
}
.range select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23616878' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px;padding-right:30px;
}
.range input:focus,.range select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}

.swatchrow{display:flex;flex-wrap:wrap;gap:12px}
.swatch{
  position:relative;width:30px;height:30px;border-radius:50%;background:var(--sw);
  border:1px solid var(--line);transition:box-shadow .15s;
}
.swatch:hover{box-shadow:0 0 0 2px var(--line)}
.swatch.is-active{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--red)}
.swatch .opt__n{
  position:absolute;bottom:-15px;left:0;right:0;text-align:center;margin:0;font-size:.52rem;
}
.swatch.is-empty{opacity:.3;pointer-events:none}
.swatchrow{padding-bottom:16px}

/* ---------- Applied chips ---------- */
.chipbar{display:none;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px}
.chipbar.is-on{display:flex}
.chipbar__label{font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.fchip{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:20px;
  padding:6px 8px 6px 14px;font-size:.8rem;transition:border-color .15s;
}
.fchip:hover{border-color:var(--ink)}
.fchip button{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--steel);font-size:.72rem;line-height:1}
.fchip button:hover{background:var(--red);color:#fff}
.chipbar__clear{font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);padding-bottom:2px;border-bottom:1px solid var(--red)}

/* ---------- Result bar ---------- */
.resultbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:26px 0 22px}
.resultbar__count{font-size:.9rem;color:var(--steel)}
.resultbar__count b{color:var(--ink);font-weight:500}
.resultbar--foot{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- Cards ----------
   One markup set serves both views; grid areas switch the arrangement. */
.results{display:grid;gap:24px}
.results--grid{grid-template-columns:repeat(3,1fr)}
.results--list{grid-template-columns:1fr;gap:20px}

.vcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:grid;transition:border-color .22s,box-shadow .22s,transform .22s;
}
.vcard[hidden]{display:none}
.vcard:hover{border-color:#CBD1D9;box-shadow:var(--shadow)}
.results--grid .vcard{grid-template-areas:"media" "info" "specs" "cta" "addr";grid-template-rows:auto auto auto 1fr auto}
.results--grid .vcard:hover{transform:translateY(-2px)}
.results--list .vcard{grid-template-columns:440px 1fr;grid-template-areas:"media info" "media specs" "media cta" "addr addr"}

.vcard__media{grid-area:media;position:relative;display:block;background:#161A20;aspect-ratio:4/3}
.results--list .vcard__media{aspect-ratio:auto;height:100%;min-height:300px}
.vcard__media .art{position:absolute;inset:0;width:100%;height:100%}
.vcard__tag{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-family:var(--data);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px}
.vcard__shots{position:absolute;bottom:11px;right:12px;display:flex;align-items:center;gap:6px;color:#fff;font-family:var(--data);font-size:.58rem;letter-spacing:.08em}
.vcard__shots svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4}

.vcard__info{grid-area:info;padding:18px 18px 0}
.results--list .vcard__info{padding:22px 24px 0}
.vcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.vcard__title{font-family:var(--display);font-size:1.02rem;line-height:1.3}
.results--list .vcard__title{font-size:1.15rem}
.vcard__trim{font-size:.8rem;color:var(--steel);margin-top:3px}
.vcard__stock{font-family:var(--data);font-size:.56rem;letter-spacing:.08em;color:var(--mute);text-align:right;flex:none;line-height:1.5;position:static;background:none;padding:0}
.vcard__stock b{display:block;color:var(--ink);font-weight:500}

.price{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.price__l{font-family:var(--data);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.price__n{font-family:var(--display);font-size:1.6rem;font-weight:500;letter-spacing:-.025em;color:var(--red);line-height:1.15;margin-top:2px}
.price__mo{font-size:.78rem;color:var(--steel);margin-top:2px}

.specs{grid-area:specs;display:grid;grid-template-columns:repeat(5,1fr);margin:15px 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.results--list .specs{margin:16px 24px 0;border-bottom:0}
.specs li{padding:13px 3px;text-align:center;border-left:1px solid var(--line-soft);min-width:0}
.specs li:first-child{border-left:0}
.specs svg{width:18px;height:18px;margin:0 auto 6px;stroke:var(--steel);fill:none;stroke-width:1.3}
.specs b{display:block;font-size:.66rem;font-weight:500;line-height:1.3}
.vcard:hover .specs svg{stroke:var(--red)}

.vcard__cta{grid-area:cta;padding:14px 18px 16px;display:grid;gap:12px;align-content:start}
.vcard__actions{order:1}
.reports{order:2}
.results--list .vcard__cta{padding:16px 24px 20px;grid-template-columns:1fr;gap:12px}
.results--list .vcard__actions{order:1;grid-template-columns:repeat(4,1fr)}
.results--list .reports{order:2;flex-direction:row;justify-content:flex-end;gap:8px}
/* Report badges. Sized to a common height so Carfax, Car Story and CarGurus
   sit level whatever their aspect ratio. */
.reports{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:2px}
.rbadge{
  display:grid;place-items:center;height:36px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .15s,background .15s;
}
.rbadge:hover{border-color:var(--red);background:rgba(217,31,38,.04)}
.rbadge svg{height:20px;width:auto}
.rbadge--slot span{
  font-family:var(--display);font-size:.76rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);white-space:nowrap;
}
.rbadge--slot b{color:var(--red);font-weight:500}
.vcard__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.results--list .vcard__actions{grid-template-columns:repeat(4,1fr)}
.vcard__actions .btn{padding:.85em .6em;font-size:.66rem;letter-spacing:.1em}
.vcard__actions .btn--wide{grid-column:1/-1}
.results--list .vcard__actions .btn--wide{grid-column:auto}
.vcard__addr{grid-area:addr;background:var(--ink);color:#fff;text-align:center;padding:9px 12px;font-family:var(--data);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Empty state ---------- */
.empty{display:none;text-align:center;padding:60px 20px;border:1px solid var(--line);border-radius:var(--radius)}
.empty.is-on{display:block}
.empty h3{font-size:1.15rem;margin-bottom:8px}
.empty p{font-size:.92rem;margin-bottom:20px}

/* ---------- Load control ---------- */
.loadzone{text-align:center;padding-top:36px}
.loadzone__track{width:190px;height:2px;background:var(--line);margin:0 auto 14px;position:relative;overflow:hidden}
.loadzone__bar{position:absolute;left:0;top:0;bottom:0;background:var(--red);transition:width .5s ease}
.loadzone__label{font-family:var(--data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:18px}

/* ---------- SEO ---------- */
.seoblock{border-top:1px solid var(--line);padding-top:44px;margin-top:var(--pad);max-width:920px}
.seoblock h2{font-size:1.35rem;margin-bottom:12px}
.seoblock h3{font-size:1rem;margin:26px 0 8px}
.seoblock p{font-size:.93rem;margin-bottom:9px;max-width:88ch}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .toolbar{top:66px}
  .results--grid{grid-template-columns:repeat(2,1fr)}
  .results--list .vcard{grid-template-columns:340px 1fr}
  .results--list .vcard__actions{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .inv{padding:24px 0 var(--pad)}
  .toolbar{position:static;display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px}
  .filterbtn{width:100%;justify-content:center}
  .toolsearch{grid-column:1/-1;order:3;border-top:1px solid var(--line-soft);padding:4px 4px 0}
  .toolbar__right{grid-column:1/-1;margin-left:0;display:grid;grid-template-columns:1fr;gap:10px}
  .toolbar__right .field{width:100%}
  .toolbar__right .field label{display:none}
  .toolbar__right select{width:100%}
  .toolbar__right .viewtoggle{grid-column:1/-1;justify-content:center}
  .toolbar__right .viewtoggle button{flex:1}
  .drawer{width:100%;max-width:none}
  .results--grid,.results--list{grid-template-columns:1fr}
  .results--list .vcard{grid-template-areas:"media" "info" "specs" "cta" "addr";grid-template-columns:1fr}
  .results--list .vcard__media{aspect-ratio:16/10;min-height:0}
  .results--list .vcard__info,.results--list .vcard__cta{padding-left:18px;padding-right:18px}
  .results--list .specs{margin-left:18px;margin-right:18px}
  .results--list .vcard__cta{grid-template-columns:1fr}
  .results--list .vcard__actions{grid-template-columns:1fr 1fr}
  .reports,.results--list .reports{justify-content:center}
  /* grid and list render identically at this width, so the toggle is noise */
  .toolbar__right .viewtoggle{display:none}
  .specs{grid-template-columns:repeat(3,1fr)}
  .specs li:nth-child(4){border-left:0}
  .specs li:nth-child(-n+3){border-bottom:1px solid var(--line-soft)}
}

/* ==========================================================================
   VEHICLE DETAIL PAGE
   Layout: gallery and content left, a sticky purchase rail right. On mobile
   the rail unstacks and the primary action moves to a fixed bottom bar.
   ========================================================================== */

.vdp{padding:44px 0 var(--pad)}
.vdp__layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:48px;align-items:start}
.vdp__layout > *{min-width:0}
.tabwrap{min-width:0}

/* ---------- Title block ---------- */
.crumbs{font-family:var(--data);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:20px}
.crumbs a:hover{color:var(--red)}
.vdp__title{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:26px}
.vdp__title h1{font-size:clamp(1.85rem,3vw,2.6rem);margin-bottom:6px}
.vdp__trim{color:var(--steel);font-size:1rem}
.vdp__ids{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--data);font-size:.62rem;letter-spacing:.1em;color:var(--mute);margin-top:12px}
.vdp__ids b{color:var(--ink);font-weight:500;margin-left:6px}

/* Price, standalone. Not attached to a button or a panel. */
.pricetag{text-align:right;flex:none}
.pricetag__label{font-family:var(--data);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.pricetag__amount{
  font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,3.4vw,3rem);
  letter-spacing:-.03em;line-height:1.05;color:var(--red);margin-top:4px;
}
.pricetag__mo{font-size:.86rem;color:var(--steel);margin-top:6px}
.pricetag__mo b{font-family:var(--display);font-size:1rem;font-weight:500;color:var(--ink)}

/* ---------- Gallery ---------- */
.gal{position:relative;background:#14171C;border-radius:var(--radius);overflow:hidden}
.gal__stage{position:relative;aspect-ratio:3/2}
.gal__shot{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.gal__shot.is-active{opacity:1}
.gal__shot svg{width:100%;height:100%}
.gal__tag{
  position:absolute;top:0;left:0;z-index:2;background:var(--red);color:#fff;
  font-family:var(--data);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;
}
.gal__count{
  position:absolute;bottom:16px;right:16px;z-index:2;background:rgba(8,9,12,.72);color:#fff;
  font-family:var(--data);font-size:.62rem;letter-spacing:.1em;padding:7px 12px;border-radius:var(--radius);
}
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(8,9,12,.35);transition:background .18s,border-color .18s;
}
.gal__nav:hover{background:var(--red);border-color:var(--red)}
.gal__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.gal__nav--prev{left:16px}
.gal__nav--next{right:16px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.thumb{
  position:relative;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:#14171C;
  border:2px solid transparent;transition:border-color .18s,filter .18s;filter:brightness(.62);
}
.thumb svg{width:100%;height:100%}
.thumb:hover{filter:brightness(.85)}
.thumb.is-active{border-color:var(--red);filter:none}
.thumb--more{display:grid;place-items:center;background:var(--mist);filter:none;border:1px solid var(--line)}
.thumb--more span{font-family:var(--data);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-align:center;padding:0 6px}
.thumb--more:hover{border-color:var(--ink)}

/* ---------- Key spec strip ---------- */
.keyspecs{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--radius);margin-top:32px}
.keyspecs li{padding:20px 10px;text-align:center;border-left:1px solid var(--line-soft);min-width:0}
.keyspecs li:first-child{border-left:0}
.keyspecs svg{width:22px;height:22px;margin:0 auto 10px;stroke:var(--red);fill:none;stroke-width:1.3}
.keyspecs b{display:block;font-size:.86rem;font-weight:500;line-height:1.3}
.keyspecs span{display:block;font-family:var(--data);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:4px}

/* ---------- Tabs ---------- */
/* Tab rail. Scrolls horizontally rather than wrapping, so any number of
   report tabs can be added without the row breaking onto two lines. A fade on
   the right edge signals that more tabs exist. */
.tabs{
  position:relative;display:flex;gap:0;border-bottom:1px solid var(--line);margin:52px 0 0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.tabs::-webkit-scrollbar{display:none}
.tabwrap{position:relative}
.tabwrap::after{
  content:"";position:absolute;right:0;top:0;bottom:1px;width:52px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--paper) 72%);transition:opacity .2s;
}
.tabwrap.is-scrollable::after{opacity:1}
.tab{
  position:relative;flex:none;scroll-snap-align:start;padding:16px 22px;
  font-size:.78rem;font-weight:500;letter-spacing:.13em;white-space:nowrap;
  text-transform:uppercase;color:var(--steel);transition:color .18s;
}
/* Report tabs carry a small marker so they read as attachments, not content */
.tab--report::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--line);margin-right:9px;transform:translateY(-1px);transition:background .18s;
}
.tab--report.is-active::before,.tab--report:hover::before{background:var(--red)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .25s}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink)}
.tab.is-active::after{transform:scaleX(1)}
/* Report pane: badge left, explanation and action right */
.report{
  display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px;
}
.report__mark{display:grid;place-items:center;padding:18px 22px;background:var(--mist);border-radius:var(--radius);min-height:120px}
.report__mark svg{width:100%;height:auto;max-width:200px}
.report__placeholder{
  font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.01em;color:var(--ink);
}
.report__placeholder span{color:var(--red)}
.report__body h3{margin-bottom:10px}
.report__body p{font-size:.94rem;max-width:64ch}
.report__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.report__note{font-family:var(--data);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* Report badge. DEALERFRONT PLUGIN: replace with the licensed CARFAX artwork,
   this placeholder is sized and spaced for it. */
.badge{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 12px;transition:border-color .15s,background .15s;
}
.badge:hover{border-color:var(--red);background:rgba(217,31,38,.05)}
.badge__mark{
  width:24px;height:19px;flex:none;border-radius:2px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--data);font-size:.55rem;letter-spacing:.03em;
}
.badge__text{font-family:var(--data);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.tabpane{padding-top:34px}
.tabpane p{max-width:76ch;margin-bottom:14px;font-size:.98rem;line-height:1.8}

/* Full specification table, hairlines and mono values, no coloured pills */
.spectable{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.spectable div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.spectable dt{color:var(--steel);font-size:.92rem}
.spectable dd{font-family:var(--data);font-size:.8rem;letter-spacing:.02em;text-align:right}

/* Full equipment list. Hairline groups rather than solid bars, so twenty-two
   collapsed rows read as a list and not as a wall of black. */
.specacc__tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.specacc__count{font-family:var(--data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.specacc__all{
  font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  padding-bottom:3px;border-bottom:1px solid var(--red);
}
.specacc{border-top:1px solid var(--line)}
.specgrp{border-bottom:1px solid var(--line)}
.specgrp summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:15px 2px;
  font-size:.86rem;font-weight:500;letter-spacing:.02em;transition:color .15s;
}
.specgrp summary::-webkit-details-marker{display:none}
.specgrp summary:hover{color:var(--red)}
.specgrp summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s,border-color .2s;
}
.specgrp[open] summary::after{transform:rotate(225deg) translateY(-3px);border-color:var(--red)}
.specgrp__n{
  font-family:var(--data);font-size:.6rem;letter-spacing:.06em;color:var(--mute);
  border:1px solid var(--line);border-radius:2px;padding:2px 7px;
}
.specgrp[open] .specgrp__n{border-color:var(--red);color:var(--red)}
.specgrp__list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 30px;padding:4px 2px 22px}
.specgrp__list li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--steel)}
.specgrp__list svg{width:14px;height:14px;flex:none;margin-top:5px;stroke:var(--red);fill:none;stroke-width:1.8}

/* ---------- Purchase rail ---------- */
.rail{position:sticky;top:100px;display:grid;gap:16px}
/* Action set. One size and shape for every button so they read as a group. */
.pricecard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pricecard__actions{padding:22px 24px;display:grid;gap:9px}
.btn--block{width:100%}
.pricecard__actions .btn,
.railbox .btn{padding:1.05em 1.4em;font-size:.74rem}

.callcard{
  display:flex;align-items:center;gap:14px;background:var(--ink-2);color:#fff;
  border-radius:var(--radius);padding:20px 24px;transition:background .18s;
}
.callcard:hover{background:#000}
.callcard svg{width:22px;height:22px;flex:none;stroke:var(--red);fill:none;stroke-width:1.5}
.callcard b{display:block;font-family:var(--display);font-size:1.25rem;font-weight:500;letter-spacing:.01em}
.callcard span{font-family:var(--data);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.railbox{border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.railbox h3{font-size:1rem;margin-bottom:16px}
.railbox .field{margin-bottom:12px}
.railbox .field--split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.railbox textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
  font-size:.9rem;min-height:92px;resize:vertical;
}
.railbox textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}
.railbox__legal{font-size:.72rem;color:var(--mute);margin-top:12px;line-height:1.55}

/* Payment calculator */
.calc__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.terms{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:7px}
.term{
  padding:10px 0;border:1px solid var(--line);border-radius:2px;text-align:center;
  font-family:var(--data);font-size:.72rem;transition:all .15s;
}
.term:hover{border-color:var(--ink)}
.term.is-active{background:var(--red);border-color:var(--red);color:#fff}
.calc__out{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.calc__out span{
  display:block;font-family:var(--data);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:4px;
}
.calc__out b{display:block;font-family:var(--display);font-size:2rem;font-weight:400;letter-spacing:-.025em;color:var(--ink);line-height:1.05}
.calc__out b i{font-style:normal;font-size:.9rem;color:var(--steel)}

/* ---------- Disclaimer ----------
   Always visible. Set at small size on a tinted panel with a left accent rule,
   so it reads as required legal detail rather than body copy. */
.disclaim{
  margin-top:56px;background:var(--mist);border-left:2px solid var(--red);
  border-radius:0 var(--radius) var(--radius) 0;padding:26px 30px;
}
.disclaim h2{
  font-family:var(--data);font-size:.66rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin-bottom:12px;
}
.disclaim p{font-size:.81rem;color:var(--steel);line-height:1.75;max-width:104ch}
.disclaim p + p{margin-top:10px}

/* ---------- Mobile action bar ---------- */
.buybar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(20,22,26,.10);padding:12px 16px;
  align-items:center;gap:14px;
}
.buybar__price{flex:none}
.buybar__price span{display:block;font-family:var(--data);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.buybar__price b{font-family:var(--display);font-size:1.3rem;font-weight:500;color:var(--red);letter-spacing:-.02em}
.buybar .btn{flex:1}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .vdp__layout{grid-template-columns:minmax(0,1fr);gap:40px}

  /* Tablet rail. The cards vary a lot in height, so a plain two column grid
     leaves the short ones stranded beside the tall ones. Actions and the call
     card run full width, then the two forms sit side by side as equals. */
  .rail{position:static;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  .rail > .pricecard,
  .rail > .callcard{grid-column:1/-1}
  .pricecard__actions{grid-template-columns:1fr 1fr;gap:10px}
  .callcard{justify-content:center}
  .rail > .railbox{display:flex;flex-direction:column}
  .rail > .railbox > :last-child{margin-top:auto}
  .keyspecs{grid-template-columns:repeat(3,1fr)}
  .keyspecs li:nth-child(4){border-left:0}
  .keyspecs li:nth-child(-n+3){border-bottom:1px solid var(--line-soft)}
  .specgrp__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .vdp{padding:28px 0 calc(var(--pad) + 76px)}
  .thumbs{grid-template-columns:repeat(3,1fr)}
  .keyspecs{grid-template-columns:repeat(2,1fr)}
  .keyspecs li:nth-child(odd){border-left:0}
  .keyspecs li:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--line-soft)}
  .rail{grid-template-columns:1fr}
  .spectable{grid-template-columns:1fr;gap:0}
  .specgrp__list{grid-template-columns:1fr}
  .tab{padding:14px 15px;font-size:.7rem;letter-spacing:.09em}
  .tabs{margin-top:38px}
  .report{grid-template-columns:1fr;gap:24px;padding:26px 22px}
  .report__mark{min-height:0;padding:20px}
  .report__actions{gap:12px}
  .report__actions .btn{width:100%}
  .gal__nav{width:38px;height:38px}
  .terms{grid-template-columns:repeat(3,1fr)}
  .buybar{display:flex}
  .vdp__title{gap:18px;flex-direction:column;align-items:stretch}
  .pricetag{text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
  .pricetag__amount{font-size:2.4rem}
}

/* ==========================================================================
   ABOUT AND CONTACT
   ========================================================================== */

/* ---------- Page hero ---------- */
.phero{
  position:relative;overflow:hidden;color:#fff;padding:76px 0 72px;border-top:2px solid var(--red);
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(80% 120% at 100% 108%, rgba(217,31,38,.13) 0%, rgba(217,31,38,0) 62%),
    linear-gradient(112deg, #1B2028 0%, #0F1218 46%, #08090C 100%);
}
/* PHOTO SLOT: to run a photograph behind the hero instead, drop an img in
   .phero__art at 2400x700 and keep the overlay below for legibility. */
.phero__art{position:absolute;inset:0;z-index:0;opacity:.35}
.phero__art img,.phero__art svg{width:100%;height:100%;object-fit:cover}
.phero .wrap{position:relative;z-index:1}
.phero .crumbs{font-family:var(--data);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.phero .crumbs a:hover{color:#fff}
.phero h1{color:#fff;font-size:clamp(2rem,3.4vw,3rem);max-width:18ch}
.phero p{color:var(--mute);max-width:56ch;margin-top:14px;font-size:1.02rem}

/* ---------- Contact layout ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.infolist{display:grid;gap:26px}
.infoitem{display:flex;gap:16px;align-items:flex-start}
.infoitem svg{width:20px;height:20px;flex:none;margin-top:4px;stroke:var(--red);fill:none;stroke-width:1.5}
.infoitem h3{font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.infoitem p,.infoitem a{font-size:1rem;color:var(--steel);line-height:1.6}
.infoitem a:hover{color:var(--red)}
.infoitem .big{font-family:var(--display);font-size:1.3rem;color:var(--ink);letter-spacing:-.01em}

.socialrow{display:flex;gap:10px;margin-top:12px}
.socialrow a{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:border-color .18s,background .18s,color .18s;
}
.socialrow a:hover{border-color:var(--red);background:var(--red);color:#fff}
.socialrow svg{width:15px;height:15px;fill:currentColor}

/* Form card. DEALERFRONT PLUGIN: fields must stay exactly as they are. */
.formcard{border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.formcard h2{font-size:1.2rem;margin-bottom:6px}
.formcard > p{font-size:.9rem;margin-bottom:22px}
.formgrid{display:grid;gap:14px}
.formgrid .split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formgrid input,.formgrid textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;font-size:.94rem;
  transition:border-color .18s,box-shadow .18s;background:var(--paper);
}
.formgrid textarea{min-height:132px;resize:vertical;line-height:1.6}
.formgrid input:focus,.formgrid textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}
.formgrid input::placeholder,.formgrid textarea::placeholder{color:var(--mute)}
.formnote{font-size:.78rem;color:var(--mute);margin-top:14px;line-height:1.6}

/* ---------- Opening hours ---------- */
.hours{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hours__row{
  display:flex;align-items:center;gap:16px;padding:15px 22px;border-top:1px solid var(--line-soft);
}
.hours__row:first-child{border-top:0}
.hours__row.is-today{background:var(--mist)}
.hours__day{font-weight:500;font-size:.95rem;min-width:112px}
.hours__row.is-today .hours__day{color:var(--red)}
.hours__time{margin-left:auto;font-family:var(--data);font-size:.82rem;color:var(--steel)}
.hours__row.is-today .hours__time{color:var(--ink)}
.hours__closed{color:var(--mute)}
.hours__tag{
  font-family:var(--data);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--red);color:var(--red);border-radius:20px;padding:3px 9px;
}
.hours__foot{
  display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--ink);color:#fff;
  font-family:var(--data);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
}
.hours__dot{width:7px;height:7px;border-radius:50%;background:#3ECF7E;flex:none}
.hours__dot.is-shut{background:var(--red)}

/* ---------- Visit grid: hours paired with a map or a visit card ---------- */
.visitgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}

.mapcardbox{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.mapcardbox__map{aspect-ratio:16/11;position:relative}
.mapcardbox__map svg,.mapcardbox__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapcardbox__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.mapcardbox__foot b{display:block;font-family:var(--display);font-size:1rem;font-weight:500}
.mapcardbox__foot span{font-size:.86rem;color:var(--steel)}

.visitcard{border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;background:var(--paper)}
.visitcard h3{font-size:1.15rem;margin-bottom:10px}
.visitcard > p{font-size:.93rem;margin-bottom:22px}
.visitcard__rows{display:grid;gap:16px;padding:20px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.visitcard__row{display:flex;gap:14px;align-items:flex-start}
.visitcard__row svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--red);fill:none;stroke-width:1.5}
.visitcard__row b{display:block;font-family:var(--display);font-size:1rem;font-weight:500}
.visitcard__row span{font-size:.86rem;color:var(--steel)}
.visitcard__actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.visitcard__actions .btn{flex:1}/* ---------- Map ---------- *//* ---------- About: story split ---------- *//* ---------- Stat band ---------- *//* ---------- Feature boxes ---------- *//* ---------- Reviews ---------- */

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.person__photo{aspect-ratio:1;background:var(--ink-2);position:relative}
.person__photo svg,.person__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person__body{padding:18px 20px 22px}
.person h3{font-size:1rem}
.person span{font-family:var(--data);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:block;margin-top:4px}
.person a{display:inline-block;margin-top:10px;font-size:.86rem;color:var(--steel)}
.person a:hover{color:var(--red)}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .contact{grid-template-columns:1fr;gap:40px}
  .visitgrid{grid-template-columns:1fr;gap:24px}
  .split{grid-template-columns:1fr;gap:40px}
  .boxes{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 0}
  .stat{padding:0 34px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .reviews{grid-template-columns:1fr}
  .rlist{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .phero{padding:52px 0 48px}
  .formcard{padding:24px 20px}
  .formgrid .split{grid-template-columns:1fr}
  .boxes{grid-template-columns:1fr}
  .rlist{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .stat{padding:0 22px}
  .hours__row{padding:13px 16px;gap:10px}
  .hours__day{min-width:0}
  .mapband{height:320px}
  .mapcard{left:16px;right:16px;transform:none;bottom:16px;padding:14px 16px;gap:12px}
  .visitcard{padding:24px 20px}
}

/* ==========================================================================
   FORM PAGES: finance, trade, car finder, test drive
   The forms themselves are Dealerfront's. Fields, labels and order are
   unchanged; only the presentation is new.
   ========================================================================== *//* ---------- Page hero ---------- */
.phero__actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---------- Value props ---------- */
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.props--3{grid-template-columns:repeat(3,1fr)}
.prop{background:var(--paper);padding:32px 28px}
.prop svg{width:26px;height:26px;stroke:var(--red);fill:none;stroke-width:1.3;margin-bottom:18px}
.prop h3{margin-bottom:8px}
.prop p{font-size:.92rem}

/* ---------- Form layout ---------- */
.formlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.formlayout--wide{grid-template-columns:minmax(0,1fr)}

/* Step card */
.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.step + .step{margin-top:22px}
.step__head{display:flex;align-items:flex-start;gap:16px;padding:24px 28px;border-bottom:1px solid var(--line-soft)}
.step__n{
  width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  font-family:var(--data);font-size:.74rem;color:var(--red);
}
.step__head h2{font-size:1.1rem}
.step__head p{font-size:.88rem;margin-top:4px}
.step__body{padding:26px 28px 30px}

/* Sub heading inside a step, replacing the solid black bars */
.subhead{
  display:flex;align-items:center;gap:11px;margin:26px 0 14px;
  font-family:var(--data);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
}
.subhead::before{content:"";width:3px;height:12px;background:var(--red);transform:skewX(-16deg);flex:none}
.subhead:first-child{margin-top:0}

/* Lender requirement notes, previously solid amber bars */
.notice{
  display:flex;gap:12px;background:#FFF8E8;border-left:2px solid #D8A32B;border-radius:0 var(--radius) var(--radius) 0;
  padding:13px 16px;font-size:.86rem;color:#7A5C15;line-height:1.55;margin-bottom:20px;
}
.notice svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:#D8A32B;fill:none;stroke-width:1.6}

/* Fields */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid--3{grid-template-columns:repeat(3,1fr)}
.fgrid--311{grid-template-columns:2fr 1fr 2fr}
.fgrid + .fgrid,.fgrid + .field,.field + .fgrid,.field + .field{margin-top:16px}
.full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field > label{font-family:var(--data);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;font-size:.93rem;transition:border-color .18s,box-shadow .18s;
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23616878' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}
.field input::placeholder,.field textarea::placeholder{color:var(--mute)}

.addmore{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:.7em 1.2em;
  border:1px dashed var(--line);border-radius:var(--radius);
  font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  transition:border-color .15s,color .15s;
}
.addmore:hover{border-color:var(--red);color:var(--red)}
.addmore span{font-size:1rem;line-height:1}

.checkline{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--steel);margin-top:18px}
.checkline input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--red)}

.optin{font-size:.78rem;color:var(--mute);line-height:1.65;margin-top:20px}
.optin b{color:var(--steel);font-weight:500}

.terms{
  max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;font-size:.8rem;color:var(--steel);line-height:1.7;background:var(--mist);
}
.terms p{margin-bottom:9px;color:inherit}
.terms p:last-child{margin-bottom:0}

.submitrow{margin-top:24px}
.submitrow .btn{width:100%}/* ---------- Rail ---------- */
.railcard{border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.railcard h3{font-size:1rem;margin-bottom:14px}
.railcard p{font-size:.88rem}
.raillist{display:grid;gap:12px}
.raillist li{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--steel)}
.raillist svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--red);fill:none;stroke-width:1.7}
.railcard--dark{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.railcard--dark h3{color:#fff}
.railcard--dark p{color:var(--mute)}

/* ---------- Steps strip ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.flow__step{background:var(--paper);padding:30px 28px}
.flow__n{font-family:var(--data);font-size:.62rem;letter-spacing:.18em;color:var(--red);margin-bottom:12px;display:block}
.flow__step h3{margin-bottom:8px}
.flow__step p{font-size:.92rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;padding:20px 2px;
  font-size:.98rem;font-weight:500;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s,border-color .2s;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px);border-color:var(--red)}
.faq details p{padding:0 2px 22px;font-size:.94rem;max-width:80ch}

/* ---------- Help block ---------- */
.help{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px;
}
.help h3{font-size:1.15rem}
.help p{font-size:.92rem;margin-top:4px}
.help__num{font-family:var(--display);font-size:1.6rem;font-weight:500;letter-spacing:-.02em}
.help__num:hover{color:var(--red)}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .formlayout{grid-template-columns:minmax(0,1fr);gap:32px}
  .rail{position:static;grid-template-columns:1fr 1fr;gap:18px}
  .rail > .callcard{grid-column:1/-1;justify-content:center}
  .props{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr}
}
@media (max-width:720px){
  .phero{padding:52px 0 48px}
  .step__head{padding:20px 18px}
  .step__body{padding:20px 18px 24px}
  .fgrid,.fgrid--3,.fgrid--311{grid-template-columns:1fr}
  .props{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .help{padding:22px 20px}
}

/* ==========================================================================
   Additions for the static build
   ========================================================================== */

/* Load progress as a real progress element, so the script sets value not style */
progress.loadzone__track{
  -webkit-appearance:none;appearance:none;display:block;width:190px;height:2px;border:0;
  background:var(--line);color:var(--red);margin:0 auto 14px;
}
progress.loadzone__track::-webkit-progress-bar{background:var(--line)}
progress.loadzone__track::-webkit-progress-value{background:var(--red);transition:width .5s ease}
progress.loadzone__track::-moz-progress-bar{background:var(--red)}

/* Promotion detail and the standard pricing note inside the fee panel */
.pricetag__promo [data-inv-field="promo-desc"],
.pricetag__promo [data-inv-field="promo-end"]{font-size:.82rem;color:var(--steel)}
.pricetag__promo [data-inv-field="promo-desc"]:empty,
.pricetag__promo [data-inv-field="promo-end"]:empty{display:none}
.fees__note{padding:12px 16px;font-size:.76rem;line-height:1.6;color:var(--mute);border-top:1px solid var(--line-soft)}

/* The DealerFront credit application keeps the plugin's layout classes, so
   they are styled here rather than renamed. */
.financehost .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.financehost [class*="col-md-"]{grid-column:span 12}
.financehost .col-md-1{grid-column:span 1}
.financehost .col-md-2{grid-column:span 2}
.financehost .col-md-3{grid-column:span 3}
.financehost .col-md-4{grid-column:span 4}
.financehost .col-md-5{grid-column:span 5}
.financehost .col-md-6{grid-column:span 6}
.financehost .col-md-8{grid-column:span 8}
.financehost .col-md-9{grid-column:span 9}
.financehost .col-md-12{grid-column:span 12}
.financehost label{
  display:block;font-family:var(--data);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px;
}
.financehost .form-control{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;font-size:.93rem;appearance:none;-webkit-appearance:none;
  transition:border-color .18s,box-shadow .18s;
}
.financehost select.form-control{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23616878' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px;
}
.financehost .form-control:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(217,31,38,.10)}
.financehost textarea.form-control{min-height:120px;resize:vertical;line-height:1.6}
@media (max-width:720px){
  .financehost [class*="col-md-"]{grid-column:span 12}
}

/* Finance host: the console fills this with the application, iframe or link */
.financehost{min-height:320px}
.financehost:empty::before{
  content:"";display:block;min-height:320px;border:1px dashed var(--line);border-radius:var(--radius);
}

/* Vehicle title row: long showroom titles must not push the price down */
.vdp__title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:28px}
@media (max-width:720px){
  .vdp__title{grid-template-columns:1fr}
}

/* Sold notice */
.soldnotice{
  display:flex;gap:16px;align-items:flex-start;background:var(--ink-2);color:#fff;
  border-radius:var(--radius);padding:26px 30px;margin-bottom:28px;
}
.soldnotice svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:var(--red);fill:none;stroke-width:1.5}
.soldnotice h2{color:#fff;font-size:1.25rem;margin-bottom:6px}
.soldnotice p{color:var(--mute);font-size:.94rem;max-width:62ch}
.soldnotice .btn{margin-top:16px}
.vcard__tag--sold{background:var(--ink)}

/* Price additions: promotion, fee breakdown, zero price */
.pricetag__promo{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-size:.86rem}
.pricetag__promo [data-inv-field="promo-was"]{color:var(--mute);text-decoration:line-through}
.pricetag__promo [data-inv-field="promo-save"]{color:var(--red);font-weight:500}
.pricetag__feeslink{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--data);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);padding-bottom:3px;border-bottom:1px solid var(--line);transition:color .15s,border-color .15s;
}
.pricetag__feeslink:hover{color:var(--red);border-color:var(--red)}
.pricetag__feeslink::after{
  content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.pricetag__feeslink[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
.fees{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fees__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;font-size:.86rem;color:var(--steel);border-top:1px solid var(--line-soft)}
.fees__row:first-child{border-top:0}
.fees__row b{font-family:var(--data);font-size:.82rem;color:var(--ink);font-weight:500}
.fees__row--total{background:var(--mist);border-top:1px solid var(--line)}
.fees__row--total span{color:var(--ink);font-weight:500}
.pricetag__note{font-size:.8rem;color:var(--mute);margin-top:10px;line-height:1.6}
.pricetag__note:empty{display:none}
[data-inv-price-zero]{font-family:var(--display);font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
[data-inv-price-zero] a{color:var(--red);border-bottom:1px solid var(--red);font-size:.9rem;display:inline-block;margin-top:8px}

/* Form status and field errors */
.field__err{font-size:.78rem;color:var(--red);margin-top:5px}
.form__status{font-size:.86rem;margin-top:14px;min-height:1.2em}
.form__status.is-error{color:var(--red)}
.form__status.is-ok{color:var(--ink)}
form.is-loading [data-inv-submit]{opacity:.6;pointer-events:none}
[data-inv-hp]{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Report pane on the vehicle page */
.report{display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px}
.report__mark{display:grid;place-items:center;padding:18px 22px;background:var(--mist);border-radius:var(--radius);min-height:120px}
.report__mark img{max-width:180px;height:auto}
.report__body h3{margin-bottom:10px}
.report__body p{font-size:.94rem;max-width:64ch}
.report__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.report__note{font-family:var(--data);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* Opening hours without times, as the feed supplies them */
.hours__status{margin-left:auto;font-family:var(--data);font-size:.8rem;color:var(--steel)}
.hours__row.is-today .hours__status{color:var(--ink)}

/* Brand index */
.index{border-top:1px solid var(--line);padding-top:30px}
.index p{font-size:.92rem;line-height:2.3}
.index a:hover{color:var(--red)}
.index .sep{color:var(--line);margin:0 10px}

/* 404 */
.notfound{text-align:center;max-width:560px;margin:0 auto;padding:var(--pad) 0}
.notfound__code{font-family:var(--display);font-weight:200;font-size:clamp(4rem,10vw,7rem);line-height:1;letter-spacing:-.04em;color:var(--line)}
.notfound h1{margin:10px 0 12px}
.notfound .btn{margin-top:24px}

/* Legal pages */
.legal-body{max-width:80ch}
.legal-body h2{font-size:1.3rem;margin:34px 0 10px}
.legal-body h3{margin:24px 0 8px}
.legal-body p,.legal-body li{font-size:.95rem;color:var(--steel);line-height:1.8}
.legal-body ul{margin:10px 0 10px 20px;list-style:disc}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

@media (max-width:720px){
  .report{grid-template-columns:1fr;gap:24px;padding:26px 22px}
  .report__mark{min-height:0;padding:20px}
  .report__actions .btn{width:100%}
}