/* ==========================================================================
   DRIVE NOW MOTORS — "Showroom White / Forecourt Black" (Fable redesign v2)
   --------------------------------------------------------------------------
   White showroom surfaces, black structural bands (header, ticker, footer,
   CTA), brand blue for action, gold detailing. One pass, no override stacks.
   Styles the class contract shared by hand-written pages AND the pages
   mc_sync.php regenerates; fonts load from this file because generated
   pages hardcode the old <link> tag.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap");

:root{
  /* light surfaces */
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --card:#ffffff;        /* card / panel surface (themeable) */
  --field:#ffffff;       /* form input surface */
  --field-line:#c2cddc;  /* form input border */
  --line:#dce3ec;
  /* black structure */
  --night:#0a0c10;
  --night-2:#13161d;
  --line-dark:rgba(255,255,255,.14);
  /* text */
  --ink:#0b1220;
  --ink-soft:#39455c;
  --ink-muted:#5c6878;
  --on-night:#eef2f9;
  --on-night-muted:#aab6c9;
  /* brand */
  --brand:#0057d9;
  --brand-hover:#0046b8;
  --brand-bright:#5b9bff;
  /* gold detailing */
  --gold:#c9971c;
  --gold-bright:#ffd24d;
  /* feedback */
  --ok:#116b44;
  --danger:#b42318;
  /* type */
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  /* geometry */
  --radius:8px;
  --radius-card:14px;
  --container:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* z scale: dropdown 10 < sticky 50 < mobile-cta 60 < skip 100 */
  --z-sticky:50;
  --z-cta:60;
  --z-skip:100;
}

/* ---------- base ---------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;color-scheme:light}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--bg);
}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--brand);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}
.container{width:min(var(--container),calc(100% - 36px));margin-inline:auto}
.narrow{max-width:820px}
.is-hidden{display:none!important}

.skip-link{
  position:absolute;left:16px;top:-80px;z-index:var(--z-skip);
  background:var(--brand);color:#fff;font-weight:700;
  padding:12px 18px;border-radius:var(--radius);
}
.skip-link:focus{top:12px}

/* ---------- display type ---------- */

.hero-copy h1,.page-hero h1,.article h1,.vehicle-summary h1,
.section-head h2,.cta-band h2,.content-stack h2,.article h2,
.vehicle-card h3,.footer-title,.side-panel h2,.check-panel h3,
.hero-form h2,.blog-card h2,.contact-card h3,.service-link strong,
.related-links h3,.trust-banner__lead,.blue-panel h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
}

/* ---------- buttons ---------- */

.button{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font:700 16px/1.2 var(--body);
  cursor:pointer;text-align:center;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .15s var(--ease);
}
.button:hover{text-decoration:none}
.button:active{transform:translateY(1px)}
.button-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.button-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.button-secondary{background:var(--card);border-color:#c9d3e0;color:var(--ink)}
.button-secondary:hover{background:#f7f9fc;border-color:#9fb0c4}
.button-call{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.38);
  color:#fff;
}
.button-call:hover{background:rgba(255,255,255,.14);border-color:#fff}
.button-plain{background:transparent;border-color:transparent;color:var(--brand);padding-inline:10px}
.button-plain::after{content:"→";transition:transform .2s var(--ease)}
.button-plain:hover::after{transform:translateX(3px)}

/* ---------- top strip ---------- */

.top-strip{background:var(--night);border-bottom:1px solid var(--line-dark);font-size:14px}
.top-strip__inner{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 20px;padding:8px 0}
.top-strip a{color:var(--on-night-muted);font-weight:600}
.top-strip a:first-child{color:#fff;font-weight:700}
.top-strip a:hover{color:#fff;text-decoration:none}

/* ---------- header ---------- */

.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--night);
  border-bottom:1px solid var(--line-dark);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 8px 24px rgba(4,7,12,.45)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:96px}
.brand{display:flex;flex-direction:column;color:var(--on-night)}
.brand:hover{text-decoration:none}
.brand__logo{width:312px;height:84px;object-fit:cover;object-position:center}
.brand__sub{display:none}

.site-nav{display:none;align-items:center;gap:20px}
.site-nav a{
  color:#dde5f0;font-weight:600;font-size:16px;white-space:nowrap;
  transition:color .2s var(--ease);
}
.site-nav a:hover{color:#fff;text-decoration:none}
.site-nav .nav-apply{
  background:var(--brand);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:var(--radius);
  transition:background-color .2s var(--ease);
}
.site-nav .nav-apply:hover{background:var(--brand-hover)}

.nav-toggle{
  width:48px;height:48px;flex:0 0 48px;
  display:grid;place-content:center;gap:5px;
  background:var(--night-2);border:1px solid #2a2f3a;
  border-radius:var(--radius);cursor:pointer;
}
.nav-toggle span{width:22px;height:2px;background:#fff;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav.is-open{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  position:absolute;left:0;right:0;top:100%;
  background:var(--night);border-bottom:1px solid #2a2f3a;
  padding:10px 20px 20px;
  box-shadow:0 24px 40px rgba(4,7,12,.5);
}
.site-nav.is-open a{padding:14px 4px;font-size:18px;border-bottom:1px solid var(--line-dark)}
.site-nav.is-open a:last-of-type{border-bottom:0}
.site-nav.is-open .nav-apply{margin-top:12px;text-align:center;border-bottom:0}

/* ---------- homepage hero (black photo band on the white page) ---------- */

.hero-home{
  position:relative;
  color:#fff;
  background:
    radial-gradient(640px 300px at 88% 92%,rgba(255,210,77,.09),transparent 70%),
    linear-gradient(100deg,rgba(5,6,9,.95) 0%,rgba(5,6,9,.84) 42%,rgba(6,9,14,.52) 100%),
    url("../img/drive-now-hero.jpg") center 38%/cover no-repeat;
}
.hero-inner{
  display:grid;gap:44px;
  padding:clamp(56px,8vw,92px) 0;
}
.hero-copy h1{
  color:#fff;
  font-size:clamp(2.9rem,7vw,5.75rem);
  line-height:.95;
  margin:0 0 20px;
  max-width:13ch;
}
.hero-copy p{
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  color:#e6ecf5;
  max-width:54ch;margin:0 0 28px;
}
.hero-actions,.cta-actions,.card-actions,.search-actions,.article-cta{
  display:flex;flex-wrap:wrap;gap:12px;
}
.hero-actions--three .button{flex:1 1 180px}
.hero-home .button-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.38);color:#fff}
.hero-home .button-secondary:hover{background:rgba(255,255,255,.14);border-color:#fff}
.hero-call{
  margin-top:14px;
  width:100%;max-width:560px;
  display:inline-flex;gap:12px;
  font-size:17px;
}
.hero-call strong{
  font-family:var(--display);font-weight:700;font-size:24px;
  letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.trust-list{
  list-style:none;margin:32px 0 0;padding:0;
  display:grid;gap:12px 28px;
  max-width:680px;
  font-weight:600;color:#e6ecf5;
}
.trust-list li{position:relative;padding-left:24px}
.trust-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:3px;border-radius:2px;background:#c9d2de;
}
/* the same list on white pages (contact, about) */
.section .trust-list{color:var(--ink-soft)}
.section .trust-list li::before{background:var(--brand)}

/* ============================================================
   LIGHT HOMEPAGE HERO — toggle variant.
   ENABLE : add "hero-home--light" to the homepage hero element
            <section class="hero hero-home hero-home--light">
   REVERT : delete that one word (dark hero returns untouched).
   Full dark snapshot also saved in /backups/2026-06-16-dark-homepage/.
   ============================================================ */
.hero-home--light{
  color:var(--ink);
  background:
    radial-gradient(620px 320px at 90% 96%,rgba(0,87,217,.06),transparent 70%),
    linear-gradient(104deg,#eef3f9 0%,rgba(238,243,249,.95) 34%,rgba(238,243,249,.64) 60%,rgba(238,243,249,.3) 100%),
    url("../img/drive-now-hero.jpg") center 38%/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero-home--light .hero-copy h1{color:var(--ink)}
.hero-home--light .hero-copy p{color:var(--ink-soft)}
.hero-home--light .trust-list{color:var(--ink-soft)}
.hero-home--light .trust-list li::before{background:var(--gold)}
.hero-home--light .button-secondary{background:var(--card);border-color:#c9d3e0;color:var(--ink)}
.hero-home--light .button-secondary:hover{background:#f7f9fc;border-color:#9fb0c4}
.hero-home--light .button-call{background:var(--card);border-color:#c9d3e0;color:var(--ink)}
.hero-home--light .button-call:hover{background:#f7f9fc;border-color:#9fb0c4}
.hero-home--light .button-call strong{color:var(--brand)}

.hero-form{
  position:relative;
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:0 18px 44px rgba(5,8,14,.35);
  padding:clamp(22px,3vw,30px);
  color:var(--ink-soft);
}
.hero-form::before,.side-panel::before{
  /* chrome hairline: nod to the logo's silver */
  content:"";position:absolute;inset:0 14% auto 14%;height:1px;
  background:linear-gradient(90deg,transparent,#9fb0c4,transparent);
}
.side-panel{position:relative}
.hero-form h2{margin:0 0 6px;font-size:26px}
.hero-form>.fine-print{margin-bottom:18px}

/* ---------- LED ticker (homepage strip) ---------- */

.ticker{
  overflow:hidden;
  background:var(--night);
  border-bottom:1px solid var(--line-dark);
  padding:13px 0;
}
.ticker__track{display:flex;gap:0;width:max-content;animation:ticker-roll 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;flex:none;align-items:center}
.ticker__group span{
  font-family:var(--display);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold-bright);white-space:nowrap;
}
.ticker__group span::after{content:"";display:inline-block;width:26px;height:3px;border-radius:2px;background:#3a3f4a;margin:0 26px;vertical-align:middle}
@keyframes ticker-roll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */

.section{padding:clamp(3.5rem,8vw,6.25rem) 0}
.section-muted{background:var(--bg-soft);border-block:1px solid #e6ecf3}
.home-section{position:relative;border-top:1px solid var(--line)}
.home-section::before{
  content:"";position:absolute;z-index:1;top:-2px;left:50%;width:78px;height:3px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,var(--gold) 0 13px,transparent 13px 22px);
}
.home-section--soft{background:var(--bg-soft)}
.section-head{max-width:760px;margin-bottom:clamp(26px,4vw,40px)}
.section-head h1,.section-head h2,.cta-band h2,.content-stack h2,.article h2{
  font-size:clamp(2rem,3.8vw,3.1rem);
  line-height:1;
  margin:0 0 12px;
}
.section-head h1::after,.section-head h2::after{
  /* the centerline: road-marking dash under section headings */
  content:"";display:block;width:66px;height:3px;margin-top:16px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 21px);
}
.section-head p{color:var(--ink-muted);margin:0;font-size:18px}
.content-stack p,.article p{color:var(--ink-soft);max-width:70ch}
.two-col{display:grid;gap:clamp(28px,4vw,56px);align-items:start}

/* ---------- panels ---------- */

.check-panel,.side-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:clamp(22px,3vw,28px);
}
.check-panel h3{margin:0 0 14px;font-size:22px;letter-spacing:.02em}
.side-panel h2{margin:0 0 16px;font-size:24px}
.check-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check-panel li{position:relative;padding-left:24px}
.check-panel li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:3px;border-radius:2px;background:var(--brand);
}
.plain-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.plain-list li{position:relative;padding-left:24px}
.plain-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:3px;border-radius:2px;background:var(--brand);
}

/* ---------- journey (numbered steps along the road line) ---------- */

.journey{
  list-style:none;margin:0;padding:0;
  position:relative;
  display:grid;gap:32px;
}
.journey::before{
  /* the road: vertical on mobile, horizontal on desktop */
  content:"";position:absolute;left:23px;top:10px;bottom:10px;width:3px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 12px,transparent 12px 21px);
}
.journey__step{position:relative;padding-left:72px}
.journey__num{
  position:absolute;left:0;top:0;
  width:48px;height:48px;border-radius:50%;
  background:var(--card);border:2px solid var(--gold);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);
}
.journey__step h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:22px;margin:6px 0 8px;
}
.journey__step p{margin:0;color:var(--ink-soft);max-width:48ch}
@media (min-width:760px){
  .journey{grid-template-columns:repeat(3,1fr);gap:40px}
  .journey::before{
    left:24px;right:96px;top:23px;bottom:auto;width:auto;height:3px;
    background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 21px);
  }
  .journey__step{padding-left:0;padding-top:66px}
}

/* ---------- floating contact bubbles (injected by site.js on desktop) ---------- */

.fab-stack{
  position:fixed;right:24px;bottom:24px;z-index:var(--z-cta);
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.call-bubble{
  position:relative;
  display:flex;align-items:center;
  height:58px;min-width:58px;padding:0 17px;
  background:var(--night);color:#fff;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(4,7,12,.38);
  text-decoration:none;
  transition:background-color .2s var(--ease),transform .15s var(--ease);
}
.fab-stack .call-bubble--wa svg{fill:#25d366}
.call-bubble--wa::before{display:none} /* one ripple is enough; it stays on the phone */
.call-bubble:hover{background:#1a2030;text-decoration:none}
.call-bubble:active{transform:translateY(1px)}
.call-bubble::before{
  /* gentle ripple to draw the eye, once every few seconds */
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid rgba(255,255,255,.45);
  animation:bubble-ping 5.5s var(--ease) infinite;
  pointer-events:none;
}
.call-bubble svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.call-bubble__label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  transition:max-width .35s var(--ease),margin-left .35s var(--ease);
}
.call-bubble:hover .call-bubble__label,
.call-bubble:focus-visible .call-bubble__label{max-width:170px;margin-left:10px}
@keyframes bubble-ping{
  0%{transform:scale(1);opacity:.6}
  28%{transform:scale(1.4);opacity:0}
  100%{transform:scale(1.4);opacity:0}
}
@media (max-width:759px){
  .fab-stack{display:none} /* mobile gets WhatsApp in the bottom action bar instead */
}

/* ---------- forms ---------- */

.lead-form{display:grid;gap:16px}
.form-grid{display:grid;gap:16px}
.lead-form label,.filters label{
  display:grid;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink);
}
.lead-form input,.lead-form select,.lead-form textarea,.filters select{
  width:100%;min-height:48px;
  padding:11px 14px;
  font:400 16px/1.4 var(--body);
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--field-line);
  border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.lead-form textarea{resize:vertical;min-height:96px}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#5f6b80}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus,.filters select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,87,217,.22);
}
.lead-form select,.filters select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6878' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.form-disclaimer,.fine-print{font-size:13.5px;color:var(--ink-muted);margin:0;line-height:1.5}
.form-status{min-height:24px;font-weight:700}
.lead-form .button[type="submit"]{justify-self:start;min-width:200px}
.lead-form .button[disabled]{opacity:.6;cursor:wait}

/* ---------- vehicle search panel ---------- */

.vehicle-search-section{padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(3rem,6vw,4.5rem)}
.vehicle-search-section>.container{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:clamp(20px,3vw,30px);
  box-shadow:0 18px 44px rgba(11,18,32,.12);
}
.vehicle-search-section .section-head{margin-bottom:18px}
.vehicle-search-section .section-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.vehicle-search-section .section-head h2::after{display:none}
.filters{display:grid;gap:14px;margin-bottom:18px}
.search-actions{margin-top:4px}

/* ---------- vehicle cards ---------- */

.vehicle-grid{display:grid;gap:20px}
.vehicle-card{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.vehicle-card:hover{transform:translateY(-4px);border-color:#8db4ee}
.vehicle-card>a{display:block;overflow:hidden}
.vehicle-card img{
  /* height:auto is essential — the generated <img> carries width/height HTML
     attributes (e.g. 640x480) whose height would otherwise win over this
     aspect-ratio and force a tall, badly-cropped portrait box on mobile */
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--bg-soft);
  transition:transform .6s var(--ease);
}
.vehicle-card:hover img{transform:scale(1.045)}
.vehicle-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.5vw,28px)}
.vehicle-card h3{font-size:24px;line-height:1.05;margin:0 0 8px;letter-spacing:.01em}
.vehicle-card h3 a{color:var(--ink)}
.vehicle-card h3 a:hover{color:var(--brand);text-decoration:none}
.vehicle-card p{color:var(--ink-muted);font-size:15px;margin:0 0 16px}
.vehicle-card dl{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:auto 0 16px;
  padding:12px 0;
  border-block:1px solid #e8edf4;
}
.vehicle-card dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.vehicle-card dd{
  margin:2px 0 0;
  font-family:var(--display);font-weight:600;font-size:19px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.card-actions{margin-top:auto}
.card-actions .button-primary{flex:1}

/* ---------- trust board (stats) ---------- */

.trust-card-grid{
  display:grid;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.trust-card{background:var(--card);padding:clamp(20px,3vw,30px) clamp(18px,2.5vw,26px)}
.trust-card__icon{width:28px;height:28px;margin-bottom:12px;color:var(--gold)}
.trust-card__icon.ic-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust-card__icon.ic-fill{fill:currentColor;stroke:none}
.trust-card strong{
  display:block;
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,4vw,46px);line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums;
  margin-bottom:6px;text-transform:uppercase;
}
.trust-card span{font-weight:600;color:var(--ink-soft);font-size:15px}

/* ---------- trust banner (stars) ---------- */

.trust-banner{text-align:center;max-width:740px;margin:0 auto clamp(28px,4vw,40px)}
.trust-banner__stars{color:var(--gold);font-size:30px;letter-spacing:8px;line-height:1}
.trust-banner__lead{font-size:clamp(22px,3vw,30px);margin:14px 0 6px;color:var(--ink)}
.trust-banner__sub{color:var(--ink-muted);margin:0;font-size:16px}

/* ---------- testimonials ---------- */

.testimonial-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.testimonial-grid blockquote{
  position:relative;margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:54px 24px 24px;
  font-weight:600;color:var(--ink-soft);
}
.testimonial-grid blockquote::before{
  content:"“";
  position:absolute;top:10px;left:20px;
  font-family:var(--display);font-weight:700;font-size:56px;line-height:1;
  color:var(--gold);
}

/* ---------- video testimonials (YouTube embeds) ---------- */

.video-testimonial-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:28px;
}
.video-testimonial{margin:0}
.video-testimonial__frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
}
.video-testimonial__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-testimonial figcaption{
  margin-top:10px;
  font-size:15px;font-weight:600;color:var(--ink-muted);
}

/* vertical (Shorts) testimonials beside the written quotes */
.testimonial-layout{display:grid;gap:32px;align-items:start}
.video-testimonial-row{display:flex;flex-wrap:wrap;gap:18px}
.video-testimonial--portrait{flex:0 1 240px;min-width:160px}
.video-testimonial--portrait .video-testimonial__frame{aspect-ratio:9/16}
@media (min-width:980px){
  .testimonial-layout{grid-template-columns:auto minmax(0,1fr);gap:44px}
  .testimonial-layout .testimonial-grid{grid-template-columns:1fr}
  .video-testimonial--portrait{flex:0 0 248px}
}

/* ---------- blue drench band ---------- */

.section-blue{background:var(--brand);color:#fff}
.section-blue h2,.section-blue h3{color:#fff}
.section-blue .section-head h2::after{background:repeating-linear-gradient(90deg,var(--gold-bright) 0 12px,transparent 12px 21px)}
.section-blue p{color:#d9e6ff}
.section-blue a{color:#fff}
.blue-panel{
  background:rgba(4,14,36,.28);
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-card);
  padding:clamp(22px,3vw,28px);
}
.blue-panel h3{margin:0 0 12px;font-size:22px;letter-spacing:.02em}
.blue-panel .button-secondary{background:#fff;border-color:#fff;color:#0b1220}
.blue-panel .button-secondary:hover{background:#e7efff;border-color:#e7efff}

/* ---------- black CTA band ---------- */

.cta-band{background:var(--night);color:var(--on-night);padding:clamp(2.75rem,6vw,4.25rem) 0}
.cta-band__inner{display:grid;gap:22px;align-items:center}
.cta-band h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:0 0 8px}
.cta-band h2::after{
  content:"";display:block;width:66px;height:3px;margin-top:14px;
  background:repeating-linear-gradient(90deg,var(--gold-bright) 0 12px,transparent 12px 21px);
}
.cta-band p{color:var(--on-night-muted);margin:0;font-weight:600;font-size:18px}
.cta-band .button-secondary{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .button-secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* ---------- inner page hero ---------- */

.page-hero{
  position:relative;
  background:
    radial-gradient(560px 260px at 12% 0%,rgba(0,87,217,.08),transparent 70%),
    var(--bg-soft);
  border-bottom:1px solid #e6ecf3;
  padding:clamp(3.5rem,7vw,5.5rem) 0;
}
.page-hero h1,.article h1{
  font-size:clamp(2.5rem,5.5vw,4.4rem);
  line-height:.96;margin:0 0 16px;
}
.page-hero h1::after{
  content:"";display:block;width:66px;height:3px;margin-top:18px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 21px);
}
.page-hero p{font-size:clamp(17px,1.4vw,20px);color:var(--ink-muted);max-width:64ch;margin:0 0 20px}
.page-hero .button{margin-top:4px}

/* ============================================================
   LEDE HERO — richer split hero for the key conversion pages
   (finance, sell-your-car). Copy left, a real photo right;
   collapses to one column on mobile with the copy + CTA first.
   Additive variant of .page-hero, so the other 30+ .page-hero
   pages are untouched. Tokens throughout, so it adapts to dark.
   ============================================================ */
.page-hero.lede{padding:clamp(2.75rem,5.5vw,4.25rem) 0}
.lede__grid{
  display:grid;align-items:center;
  gap:clamp(28px,5vw,60px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.lede__copy{min-width:0}
.page-hero.lede h1{margin-bottom:16px}
.page-hero.lede p{max-width:48ch;margin-bottom:24px}
.lede__media{position:relative;min-width:0}
.lede__media img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-card);
  border:1px solid var(--line);
  box-shadow:0 22px 50px -26px rgba(10,18,34,.5);
}
.sell-hero-proof{
  min-width:0;background:var(--card);border-block:1px solid var(--line);border-left:4px solid var(--gold);
  padding:clamp(24px,4vw,38px);box-shadow:0 8px 24px -20px rgba(10,18,34,.5);
}
.sell-hero-proof__rating{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.sell-hero-proof__rating svg{width:24px;height:24px;flex:0 0 auto}
.sell-hero-proof__rating strong{font-family:var(--display);font-size:20px;color:var(--ink)}
.sell-hero-proof__rating span{margin-left:auto;color:var(--gold);letter-spacing:2px;font-size:15px}
.sell-hero-proof blockquote{
  margin:0;color:var(--ink);font-family:var(--display);font-size:clamp(1.45rem,2.4vw,2rem);
  font-weight:600;line-height:1.18;
}
.sell-hero-proof>p{margin:22px 0 0;color:var(--ink);font-weight:700;max-width:none}
.sell-hero-proof>p span{display:block;margin-top:3px;color:var(--ink-muted);font-size:14px;font-weight:500}
.sell-review-section .review-card{border-radius:8px;box-shadow:none}
.sell-review-section .review-card:hover{transform:none;box-shadow:none}
@media (max-width:860px){
  .lede__grid{grid-template-columns:1fr;gap:24px}
  .page-hero.lede p{max-width:60ch}
  .lede__media img{aspect-ratio:16/10}
}

/* value strip directly beneath the hero — trust signals belong
   here, not crammed into the hero stack */
.lede-strip{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.lede-strip__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.lede-point{
  display:flex;gap:14px;align-items:flex-start;
  padding:clamp(18px,2.3vw,24px) clamp(16px,2.2vw,28px);
}
.lede-point + .lede-point{border-left:1px solid var(--line)}
.lede-point__ic{
  flex:none;width:26px;height:26px;color:var(--gold);margin-top:1px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.lede-point strong{
  display:block;font-family:var(--display);font-weight:700;
  font-size:18px;letter-spacing:.01em;line-height:1.12;color:var(--ink);
}
.lede-point span{display:block;margin-top:3px;font-size:14.5px;color:var(--ink-muted)}
@media (max-width:760px){
  .lede-strip__grid{grid-template-columns:1fr}
  .lede-point + .lede-point{border-left:0;border-top:1px solid var(--line)}
}

/* one-time entrance: staggered fade-up, strong ease-out, plays once
   on load and only when the visitor has not asked for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .lede__copy>*{animation:lede-rise .6s var(--ease) both}
  .lede__copy>*:nth-child(2){animation-delay:.07s}
  .lede__copy>*:nth-child(3){animation-delay:.14s}
  .lede__media{animation:lede-rise .7s var(--ease) both .1s}
}
@keyframes lede-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- articles & content pages ---------- */

.article{padding:clamp(3rem,7vw,5.25rem) 0}
.article h1{margin-bottom:22px}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:36px 0 12px}
.answer-box{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:20px 22px;
}
.answer-box strong{color:var(--brand)}
.article-cta{margin-top:28px}

.content-stack h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:32px 0 10px}
.content-stack ul{padding-left:22px;color:var(--ink-soft)}
.content-stack li{margin:6px 0}

/* directory board: hairline rows, condensed titles, full-row click target */
.resource-list{list-style:none;padding:0;margin:0;display:grid;gap:0 64px;border-top:1px solid var(--line)}
.resource-list li{
  position:relative;
  border-bottom:1px solid var(--line);
  padding:20px 52px 20px 2px;
}
.resource-list li::after{
  content:"→";
  position:absolute;right:8px;top:24px;
  font-size:21px;line-height:1;color:var(--brand);
  transition:transform .25s var(--ease);
}
.resource-list li:hover::after{transform:translateX(5px)}
.resource-list a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:21px;color:var(--ink);
  transition:color .2s var(--ease);
}
.resource-list a::before{content:"";position:absolute;inset:0} /* whole row is the link */
.resource-list a:hover{color:var(--brand);text-decoration:none}
.resource-list span{display:block;color:var(--ink-muted);font-size:15px;margin-top:4px}

.related-links{border-top:1px solid var(--line);margin-top:34px;padding-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.related-links h3{width:100%;margin:0 0 6px;font-size:20px;letter-spacing:.03em}
.related-links a{
  display:inline-block;
  background:var(--card);
  border:1px solid #c9d3e0;
  border-radius:999px;
  padding:9px 16px;
  font-size:15px;font-weight:600;color:var(--ink-soft);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.related-links a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* ---------- FAQ ---------- */

.faq-layout{display:grid;gap:26px}
/* FAQ accordion: clean border-divided rows, rotating chevron, smooth height.
   <details>/<summary> kept for semantics + no-JS fallback; site.js adds the
   grid-template-rows slide animation (the .faq-ans wrapper it injects). */
.faq-list{display:grid;gap:0}
.faq-list details{
  border-bottom:1px solid var(--line);
}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 2px;
  font-weight:600;color:var(--ink);font-size:17px;
  transition:color .2s var(--ease);
}
.faq-list summary:hover{color:var(--brand)}
.faq-list summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.faq-list summary::-webkit-details-marker{display:none}
/* CSS chevron (down) that flips up when open */
.faq-list summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;margin:-3px 4px 0 8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.55;
  transition:transform .25s var(--ease);
}
.faq-list details[open] summary::after{transform:rotate(-135deg)}
.faq-ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-list details[open] .faq-ans{grid-template-rows:1fr}
.faq-ans__in{overflow:hidden}
.faq-list details p{color:var(--ink-muted);margin:0;padding:0 2px 20px}
@media (prefers-reduced-motion:reduce){.faq-ans{transition:none}}

/* ---------- form submit progress indicator (built by site.js) ---------- */
/* Shown while a lead form is submitting: 3 dots with a green fill that loops
   (indeterminate), then snaps full + a check scales in on success. */
.form-progress{display:none;align-items:center;gap:12px;margin-top:10px;
  font-weight:600;font-size:14px;color:var(--ink-muted)}
.form-progress.is-active{display:flex}
.fp-track{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line)}
.fp-dot{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;
  background:var(--line);transition:background .3s var(--ease)}
.fp-fill{position:absolute;left:7px;top:50%;transform:translateY(-50%);
  height:14px;width:14px;border-radius:999px;background:#16a34a}
.form-progress.is-sending .fp-fill{animation:fp-load 1.15s var(--ease) infinite alternate}
@keyframes fp-load{from{width:14px}to{width:42px}}
.form-progress.is-done .fp-fill{width:51px;animation:none}
.form-progress.is-done .fp-dot{background:#fff}
.fp-check{flex:0 0 auto;width:18px;height:18px;color:#16a34a;
  opacity:0;transform:scale(.6);
  transition:opacity .25s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1)}
.form-progress.is-done .fp-check{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .form-progress.is-sending .fp-fill{animation:none;width:28px}
  .fp-check{transition:opacity .2s linear}
}

/* ---------- skeleton loading shimmer (applied/removed by site.js) ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--bg-soft)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:skeleton-shimmer 1.4s ease-in-out infinite}
@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}
html[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* ============================================================
   TESTIMONIALS / social proof — Google-style review cards, a
   Google rating badge, a swipeable card carousel (homepage), a
   masonry grid + quote marquee (the /testimonials/ page).
   ============================================================ */
.google-rating{display:inline-flex;align-items:center;gap:12px;padding:11px 20px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 10px 28px -18px rgba(10,18,34,.45);
  text-decoration:none;color:var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.google-rating:hover{transform:translateY(-2px);border-color:#c9d3e0;box-shadow:0 14px 34px -18px rgba(10,18,34,.55);text-decoration:none}
.google-rating__g{flex:0 0 auto;width:24px;height:24px}
.google-rating__col{display:flex;flex-direction:column;gap:2px;line-height:1}
.google-rating__score{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;color:var(--ink)}
.google-rating__stars{color:var(--gold);letter-spacing:2px;font-size:15px;line-height:1}
.google-rating__sub{color:var(--ink-muted);font-weight:600;font-size:13px}

.review-card{display:flex;flex-direction:column;gap:13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-card);padding:24px;
  box-shadow:0 10px 30px -24px rgba(10,18,34,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
@media (hover:hover){.review-card:hover{transform:translateY(-4px);border-color:#c9d3e0;box-shadow:0 18px 40px -24px rgba(10,18,34,.55)}}
.review-card__head{display:flex;align-items:center;gap:12px}
.review-card__avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-family:var(--display);font-weight:700;font-size:19px;background:var(--av,#475569)}
.review-card__id{min-width:0}
.review-card__name{margin:0;font-weight:700;color:var(--ink);font-size:16px;line-height:1.15}
.review-card__meta{margin:2px 0 0;color:var(--ink-muted);font-size:13px}
.review-card__g{margin-left:auto;flex:0 0 auto;width:20px;height:20px}
.review-card__stars{color:var(--gold);letter-spacing:2px;font-size:16px}
.review-card__text{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.6}

/* swipeable card row (homepage) */
.review-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.review-carousel::-webkit-scrollbar{display:none}
.review-carousel>.review-card{scroll-snap-align:start;flex:0 0 360px;max-width:86vw}
@media (max-width:560px){.review-carousel>.review-card{flex-basis:84%}}

/* masonry grid (testimonials page) */
.review-masonry{columns:1;column-gap:20px}
@media (min-width:640px){.review-masonry{columns:2}}
@media (min-width:1000px){.review-masonry{columns:3}}
.review-masonry>.review-card{break-inside:avoid;margin-bottom:20px}

.tm-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}

/* Homepage proof band: videos and written reviews read as one section. */
.home-testimonials{background:var(--night);color:#fff;border-color:var(--line-dark)}
.home-testimonials::before{background:repeating-linear-gradient(90deg,var(--gold-bright) 0 13px,transparent 13px 22px)}
.home-testimonials__intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.home-testimonials .section-head{margin-bottom:0}
.home-testimonials .section-head h2{color:#fff}
.home-testimonials .section-head h2::after{background:repeating-linear-gradient(90deg,var(--gold-bright) 0 12px,transparent 12px 21px)}
.home-testimonials .section-head p{color:var(--on-night-muted)}
.home-testimonials .google-rating{background:#fff;border-color:#fff;box-shadow:none}
.home-testimonials .google-rating:hover{transform:none;border-color:#fff;box-shadow:none}
.home-testimonials .google-rating__score{color:#0b1220}
.home-testimonials .google-rating__sub{color:#5c6878}
.home-testimonials__videos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  max-width:820px;margin:42px auto 46px;padding:0;
}
.home-testimonials__videos .video-testimonial--portrait{min-width:0;max-width:none}
.home-testimonials__videos .video-testimonial__frame{border-color:#343b47;border-radius:8px}
.home-testimonials__reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-top:26px;border-top:1px solid var(--line-dark);margin-bottom:10px;
}
.home-testimonials__reviews-head h3{margin:0;color:#fff;font-size:24px}
.home-testimonials__reviews-head a{color:var(--gold-bright);font-weight:700}
.home-testimonials .review-carousel{padding-top:10px}
.home-testimonials .review-card{background:#fff;border-color:#dce3ec;border-radius:8px;box-shadow:none}
.home-testimonials .review-card:hover{transform:none;border-color:#c9d3e0;box-shadow:none}
.home-testimonials .review-card__name{color:#0b1220}
.home-testimonials .review-card__meta{color:#5c6878}
.home-testimonials .review-card__text{color:#39455c}
@media (max-width:759px){
  .home-testimonials__intro{grid-template-columns:1fr;align-items:start;gap:22px}
  .home-testimonials__intro .google-rating{justify-self:start}
  .home-testimonials__videos{
    display:flex;max-width:none;margin:34px 0 38px;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .home-testimonials__videos::-webkit-scrollbar{display:none}
  .home-testimonials__videos>*{flex:0 0 68%;max-width:none;scroll-snap-align:center}
  .home-testimonials__reviews-head{align-items:flex-start;flex-direction:column;gap:8px}
}

/* continuous quote marquee */
.quote-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.quote-marquee__track{display:flex;gap:14px;width:max-content;animation:quote-scroll 42s linear infinite}
.quote-marquee:hover .quote-marquee__track{animation-play-state:paused}
.quote-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);font-size:14.5px;font-weight:500;white-space:nowrap}
.quote-chip .stars{color:var(--gold);letter-spacing:1px;font-size:13px;flex:0 0 auto}
@keyframes quote-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.quote-marquee__track{animation:none}.quote-marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}}

/* dedicated testimonials page hero (dark social-proof band) */
.tm-hero{background:var(--night);position:relative;overflow:hidden;
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem)}
.tm-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98;margin:0 0 16px;max-width:16ch}
.tm-hero p{color:var(--on-night-muted);font-size:clamp(17px,1.5vw,20px);max-width:52ch;margin:0 0 26px}
.tm-hero .google-rating{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.tm-hero .google-rating__score{color:#fff}
.tm-hero .google-rating__sub{color:var(--on-night-muted)}
@media (prefers-reduced-motion:no-preference){
  .tm-hero h1{animation:lede-rise .6s var(--ease) both}
  .tm-hero p{animation:lede-rise .6s var(--ease) both .08s}
  .tm-hero .google-rating{animation:lede-rise .6s var(--ease) both .16s}
}

/* ---------- link grids (locations, services, blog) ---------- */

.service-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.service-link{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:22px;
  color:var(--ink-soft);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.service-link:hover{transform:translateY(-3px);border-color:#8db4ee;text-decoration:none}
.service-link strong{display:block;font-size:22px;color:var(--ink);margin-bottom:6px;letter-spacing:.02em}
.service-link span{display:block;color:var(--ink-muted);font-size:15px}

.blog-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.blog-card{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:24px;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.blog-card:hover{transform:translateY(-3px);border-color:#8db4ee}
.blog-card h2{font-size:23px;line-height:1.05;margin:0 0 10px;letter-spacing:.01em}
.blog-card h2 a{color:var(--ink)}
.blog-card h2 a:hover{color:var(--brand);text-decoration:none}
.blog-card p{color:var(--ink-muted);font-size:15px;margin:0 0 18px}
.blog-card>a{margin-top:auto;font-weight:700}
.blog-card>a::after{content:" →"}

/* ---------- contact cards ---------- */

.contact-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.contact-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:24px;
}
.contact-card h3{font-size:23px;color:var(--brand);margin:0 0 10px;letter-spacing:.02em}
.contact-card__list{list-style:none;margin:0;padding:0}
.contact-card__list li{
  display:flex;align-items:center;gap:12px;
  padding:13px 0;
  border-bottom:1px solid #e8edf4;
}
.contact-card__list li:last-child{border-bottom:0}
.contact-card__list svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor;color:var(--ink-muted)}
.contact-card__list a,.contact-card__list span{color:var(--ink-soft);word-break:break-word}
.contact-card__list a{font-weight:600}
.contact-card__list a:hover{color:var(--brand)}

/* ---------- vehicle detail ---------- */

.vehicle-detail{padding:clamp(2.75rem,6vw,4.5rem) 0}
.vehicle-detail__grid{display:grid;gap:clamp(24px,4vw,48px);align-items:start}
/* grid children must be allowed to shrink below their content width —
   otherwise a long thumbnail strip (15+ photos) blows the layout out */
.vehicle-detail__grid>*,.vehicle-grid>*,.two-col>*,.footer-grid>*,.faq-layout>*{min-width:0}
.vehicle-detail img{
  /* native ratio: never crop the photo a buyer is inspecting */
  width:100%;height:auto;
  max-height:72vh;object-fit:contain;
  background:var(--bg-soft);
  border-radius:var(--radius-card);
  border:1px solid var(--line);
}
.vehicle-summary h1{font-size:clamp(2.3rem,4.5vw,3.6rem);line-height:.96;margin:0 0 12px}
.vehicle-summary>p{color:var(--ink-muted)}
.spec-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  margin:20px 0 22px;
}
.spec-grid>div{background:var(--card);padding:14px 16px}
.spec-grid dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.spec-grid dd{
  margin:3px 0 0;
  font-family:var(--display);font-weight:600;font-size:21px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.vehicle-summary .fine-print{margin-top:16px}

/* ---------- vehicle photo gallery + lightbox (built by site.js) ---------- */

.gallery__stage{position:relative}
.gallery__stage img{cursor:zoom-in}
.gallery__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(8,10,14,.55);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .2s var(--ease);
}
.gallery__nav:hover{background:rgba(8,10,14,.82)}
.gallery__nav--prev{left:12px}
.gallery__nav--next{right:12px}
.gallery__count{
  position:absolute;right:12px;bottom:12px;
  background:rgba(8,10,14,.68);color:#fff;
  font:600 13px/1 var(--body);font-variant-numeric:tabular-nums;
  padding:7px 11px;border-radius:999px;
}
.gallery__thumbs{
  display:flex;gap:10px;margin-top:12px;
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;
}
.gallery__thumb{
  flex:0 0 92px;width:92px;aspect-ratio:16/10;
  padding:0;border:2px solid transparent;border-radius:10px;
  overflow:hidden;background:var(--bg-soft);cursor:pointer;
  transition:border-color .2s var(--ease);
}
.gallery__thumb.is-active{border-color:var(--brand)}
.gallery__thumb:hover{border-color:#8db4ee}
.vehicle-detail .gallery__thumb img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;cursor:pointer}

.lightbox{border:0;padding:0;background:transparent;outline:none}
.lightbox::backdrop{background:rgba(4,6,10,.93)}
.lightbox img{
  display:block;width:auto;height:auto;
  max-width:min(94vw,1500px);max-height:88vh;
  border-radius:10px;
}
.lightbox__close{
  position:fixed;top:16px;right:16px;
  width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .2s var(--ease);
}
.lightbox__close:hover{background:rgba(255,255,255,.26)}
.lightbox .gallery__nav{position:fixed;top:50%}
.lightbox .gallery__nav--prev{left:16px}
.lightbox .gallery__nav--next{right:16px}
.lightbox__count{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(255,255,255,.14);color:#fff;
  font:600 14px/1 var(--body);font-variant-numeric:tabular-nums;
  padding:8px 14px;border-radius:999px;
}

.sell-image{
  margin-top:20px;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius-card);border:1px solid var(--line);
}

/* ---------- embedded map ---------- */

.map-embed{
  display:block;width:100%;height:320px;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
}
.map-embed--tall{height:420px}
.blue-panel .map-embed{height:230px;margin:18px 0;border-color:rgba(255,255,255,.26);border-radius:var(--radius)}

/* ---------- footer ---------- */

.site-footer{background:var(--night);border-top:1px solid var(--line-dark);padding:clamp(3rem,6vw,4.5rem) 0 0;color:var(--on-night-muted)}
.footer-grid{display:grid;gap:clamp(28px,4vw,44px)}
.footer-logo{width:236px;height:64px;object-fit:cover;object-position:center;margin-bottom:16px}
.footer-brand p{color:var(--on-night-muted);max-width:400px;margin:0 0 14px}
.footer-brand address{font-style:normal;color:var(--on-night-muted);margin:0 0 12px;line-height:1.6}
.footer-brand>a{font-family:var(--display);font-weight:700;font-size:22px;color:#fff;letter-spacing:.03em}
.footer-brand>a:hover{color:var(--on-night-muted);text-decoration:none}
.footer-title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:17px;color:#fff;margin:0 0 12px}
.site-footer .footer-grid a{display:block;color:var(--on-night-muted);margin:8px 0;transition:color .2s var(--ease)}
.site-footer .footer-grid a:hover{color:#fff;text-decoration:none}
.site-footer .footer-brand a{display:inline-block;color:#fff}
.footer-bottom{
  border-top:1px solid var(--line-dark);
  margin-top:clamp(28px,4vw,44px);
  padding:20px 0;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
.footer-bottom p{margin:0;color:#8b97a9;font-size:14px}
.social-links{display:flex;gap:16px}

/* ---------- mobile quick actions ---------- */

.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;
  background:rgba(8,10,14,.96);
  border-top:1px solid #2a2f3a;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
.mobile-cta a{
  min-height:50px;display:grid;place-items:center;
  font-weight:800;font-size:16px;border-radius:var(--radius);
}
.mobile-cta a:first-child{background:#fff;color:#0b1220}
.mobile-cta a:last-child{background:var(--brand);color:#fff}
.mobile-cta .mobile-cta__wa{background:#16a34a;color:#fff}
.mobile-cta a:hover{text-decoration:none}

/* ---------- cookie notice (injected by site.js, bottom-right) ---------- */

.cookie-notice{
  position:fixed;z-index:var(--z-cta);
  right:24px;bottom:24px;left:auto;
  width:min(340px,calc(100vw - 32px));
  background:var(--night);color:var(--on-night);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-card);
  box-shadow:0 16px 40px rgba(4,7,12,.5);
  padding:18px 18px 16px;
  font-size:14px;line-height:1.55;
  animation:cookie-rise .35s var(--ease) both;
}
.cookie-notice p{margin:0 0 13px;color:var(--on-night-muted)}
.cookie-notice a{color:#fff;text-decoration:underline}
.cookie-notice a:hover{color:var(--on-night-muted)}
.cookie-notice__actions{display:flex;gap:10px;align-items:center}
.cookie-notice .button{min-height:42px;padding:9px 20px;font-size:14px}
@keyframes cookie-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* keep the call / WhatsApp bubbles clear of the notice while it shows (desktop) */
@media (max-width:759px){
  /* fabs are hidden on mobile; sit the notice above the bottom action bar */
  .cookie-notice{right:12px;left:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.cookie-notice{animation:none}}

/* ---------- scroll reveals (JS adds .reveal; no-JS pages stay visible) ---------- */

html.has-js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
html.has-js .reveal.is-in{opacity:1;transform:none}
html.has-js .home-section.reveal{opacity:1;transform:none;transition:none}
html.has-js .home-section.reveal>.container{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
html.has-js .home-section.reveal.is-in>.container{opacity:1;transform:none}
/* the centerline draws itself in once its heading reveals */
html.has-js .section-head.reveal h2::after{width:0;transition:width .8s var(--ease) .25s}
html.has-js .section-head.reveal.is-in h2::after{width:66px}

/* ---------- responsive ---------- */

body{padding-bottom:76px} /* room for fixed mobile-cta */

@media (max-width:759px){
  .container{width:calc(100% - 28px)}
  .header-inner{min-height:84px;gap:12px}
  .brand__logo{width:234px;height:64px}
  .top-strip__inner{justify-content:center;text-align:center}
  .hero-copy h1{max-width:none}
  .hero-call{display:flex}
  .lead-form .button[type="submit"]{justify-self:stretch;width:100%}
  /* full-width copy on mobile needs a flatter light wash to stay readable */
  .hero-home--light{
    background:
      linear-gradient(180deg,rgba(238,243,249,.93),rgba(238,243,249,.9)),
      url("../img/drive-now-hero.jpg") center 38%/cover no-repeat;
  }
}

@media (min-width:600px){
  .trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-card-grid{grid-template-columns:repeat(2,1fr)}
}

/* horizontal nav needs room for 6 items + Apply button; below this width the
   hamburger menu is used instead (it lists every page including Testimonials) */
@media (min-width:1024px){
  .site-nav{display:flex}
  .nav-toggle{display:none}
}
@media (min-width:760px){
  body{padding-bottom:0}
  .mobile-cta{display:none}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .resource-list{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:repeat(3,1fr);align-items:end}
  .vehicle-grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr 1fr}
  .cta-band__inner{grid-template-columns:1fr auto}
  .footer-grid{grid-template-columns:1.35fr 1fr 1fr}
  .trust-card-grid{grid-template-columns:repeat(3,1fr)}
  .vehicle-detail__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .faq-layout{grid-template-columns:.85fr 1.3fr}
  .faq-layout>.section-head{position:sticky;top:130px;margin-bottom:0}
  .faq-layout>.button{grid-column:2;justify-self:start}
  .faq-layout>.faq-list{grid-column:2}
  .faq-layout>.section-head{grid-column:1;grid-row:1 / span 2}
}

@media (min-width:980px){
  .hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center}
  .hero-form{justify-self:end;width:100%;max-width:460px}
}

@media (min-width:1040px){
  /* stays 2-across: big landscape car photos are the selling point */
  .brand__logo{width:312px}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  html.has-js .reveal{opacity:1;transform:none}
  .ticker__track{animation:none}
  .vehicle-card:hover,.service-link:hover,.blog-card:hover{transform:none}
  .vehicle-card:hover img{transform:none}
}

/* ---------- finance calculators ---------- */

.calc-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.calc-grid{display:grid;gap:24px}
@media (min-width:920px){.calc-grid{grid-template-columns:1fr 1fr}}
.calc-grid>*{min-width:0}

.calc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:clamp(20px,3vw,28px);
  display:grid;gap:22px;align-content:start;
}
.calc__head h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:22px;margin:0 0 4px;color:var(--ink);
}
.calc__head p{margin:0;color:var(--ink-muted);font-size:14.5px;line-height:1.5}

.calc__controls{display:grid;gap:20px}
.calc__row{display:grid;gap:10px}
.calc__label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.calc__label>span{font-size:14px;font-weight:600;color:var(--ink)}
.calc__val{
  font-family:var(--display);font-weight:700;font-size:21px;
  color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

.calc__range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:6px;margin:6px 0;cursor:pointer;
  background:linear-gradient(90deg,var(--brand) 0 var(--pct,50%),var(--line) var(--pct,50%) 100%);
}
.calc__range:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);
  box-shadow:0 2px 6px rgba(5,8,14,.25);cursor:pointer;
  transition:transform .15s var(--ease);
}
.calc__range::-webkit-slider-thumb:hover{transform:scale(1.08)}
.calc__range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);
  box-shadow:0 2px 6px rgba(5,8,14,.25);cursor:pointer;
}
.calc__range::-moz-range-track{height:6px;border-radius:6px;background:transparent}

.calc__inline{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:420px){.calc__inline{grid-template-columns:1fr}}
.calc__field{display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.calc__field input,.calc__field select{
  width:100%;min-height:48px;padding:11px 14px;
  font:400 16px/1.4 var(--body);color:var(--ink);background:var(--field);
  border:1px solid var(--field-line);border-radius:var(--radius);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.calc__field input:focus,.calc__field select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,87,217,.22);
}
.calc__field select{
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6878' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

.calc__result{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px,2.6vw,24px);
  display:grid;gap:16px;text-align:center;
}
.calc__result-label{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted);
}
.calc__figure{
  margin:0;font-family:var(--display);font-weight:700;line-height:.95;
  font-size:clamp(3rem,8vw,4.25rem);color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:.005em;
}
.calc__figure .calc__cur{font-size:.5em;vertical-align:.18em;margin-right:.04em}
.calc__figure .calc__per{
  display:block;font-family:var(--body);font-weight:600;font-size:14px;
  letter-spacing:.02em;color:var(--ink-muted);text-transform:none;margin-top:6px;
}
.calc__breakdown{margin:0;display:grid;gap:0;text-align:left}
.calc__breakdown>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-top:1px solid var(--line);
}
.calc__breakdown>div:first-child{border-top:0}
.calc__breakdown dt{margin:0;font-size:14px;color:var(--ink-soft)}
.calc__breakdown dd{
  margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}
.calc__cta{width:100%}

.calc__rate{font-size:14px;color:var(--ink-soft)}
.calc__rate>summary{
  cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;
  color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px;
}
.calc__rate>summary::-webkit-details-marker{display:none}
.calc__rate>summary::after{content:"›";transition:transform .2s var(--ease);font-size:16px}
.calc__rate[open]>summary::after{transform:rotate(90deg)}
.calc__rate>summary:hover{color:var(--brand)}
.calc__rate .calc__field{margin:14px 0 10px;max-width:220px;font-size:13.5px}
.calc__note{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.55}
.calc__disclaimer{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.5}

/* ---------- calc-suite: single full-width calculator with mode toggle ---------- */
.calc-suite{max-width:1100px;margin-inline:auto}
.calc-switch{display:inline-flex;gap:4px;margin:0 0 24px;padding:4px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px}
.calc-switch button{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--ink-muted);padding:10px 18px;border-radius:999px;transition:background-color .2s var(--ease),color .2s var(--ease)}
.calc-switch button[aria-pressed="true"]{background:var(--brand);color:#fff}
.calc-switch button:active{transform:translateY(1px)}
.calc-suite .calc[hidden]{display:none}
/* giant single calculator: controls left, result right */
.calc-suite .calc{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);padding:clamp(20px,3vw,30px)}
@media (min-width:720px){
  .calc-suite .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.5vw,40px);align-items:start}
  .calc-suite .calc .calc__head{grid-column:1 / -1}
}
/* exact-value entry control */
.calc__entry{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:var(--field);border-radius:8px;padding:2px 8px;min-width:0}
.calc__entry:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,87,217,.15)}
.calc__entry-pre,.calc__entry-suf{font-size:13px;font-weight:600;color:var(--ink-muted)}
.calc__num{width:7ch;border:0;background:transparent;color:var(--ink);font-family:var(--display);font-weight:700;font-size:17px;text-align:right;padding:4px 2px;-moz-appearance:textfield}
.calc__num::-webkit-outer-spin-button,.calc__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__num:focus{outline:none}

/* Enlarged calculator — fills the available width with bigger, easier-to-read
   controls (applies to both the finance page and the homepage calc-suite). */
.calc-suite .calc{padding:clamp(26px,3.2vw,40px)}
@media (min-width:720px){.calc-suite .calc{grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,56px)}}
.calc-switch button{font-size:16px;padding:12px 22px}
.calc-suite .calc__head h3{font-size:clamp(1.55rem,2.3vw,2rem)}
.calc-suite .calc__head p{font-size:15.5px}
.calc-suite .calc__label>span{font-size:16px}
.calc-suite .calc__entry{padding:5px 12px}
.calc-suite .calc__num{font-size:20px;width:8ch}
.calc-suite .calc__entry-pre,.calc-suite .calc__entry-suf{font-size:15px}
.calc-suite .calc__result{padding:clamp(24px,3vw,36px);gap:18px}
.calc-suite .calc__result-label{font-size:14px}
.calc-suite .calc__figure{font-size:clamp(3.5rem,7vw,5.25rem)}
.calc-suite .calc__breakdown dt{font-size:15px}
.calc-suite .calc__breakdown dd{font-size:18px}
.calc-suite .calc__cta{min-height:54px;font-size:16px}

/* ---------- mobile swipeable carousels (scroll-snap, no JS) ---------- */
/* Video testimonials, testimonial cards, and the homepage featured vehicles
   become horizontal swipe carousels on phones; a peek of the next item signals
   that more can be swiped in. Contained inside the section so the page itself
   never scrolls sideways. */
@media (max-width:759px){
  .video-testimonial-row,
  .testimonial-grid,
  .featured-vehicles .vehicle-grid{
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .video-testimonial-row::-webkit-scrollbar,
  .testimonial-grid::-webkit-scrollbar,
  .featured-vehicles .vehicle-grid::-webkit-scrollbar{display:none}
  .video-testimonial-row>*,
  .testimonial-grid>blockquote,
  .featured-vehicles .vehicle-grid>*{
    scroll-snap-align:center;flex:0 0 86%;
  }
  /* video frames are narrower (portrait 9:16) so show ~1.4 per view */
  .video-testimonial-row>*{flex-basis:62%}
}

/* ---------- mobile: auto-hide header on scroll down ---------- */
/* The sticky header slides up out of the way when the visitor scrolls down
   (frees screen space on phones) and slides back when they scroll up. Class is
   toggled by site.js; the transform is gated to mobile so desktop is unchanged. */
@media (max-width:759px){
  .site-header.is-tucked{transform:translateY(-100%)}
}

/* ============================================================
   DARK THEME — opt-in via the header toggle (sets data-theme="dark"
   on <html>, saved to localStorage). Light is the default.
   Structural bands (header, ticker, CTA, footer) are already dark,
   so dark mode mainly re-skins the white body + cards.
   ============================================================ */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;
  --bg-soft:#111b2e;
  --card:#16213a;
  --field:#0d1626;
  --field-line:#2c3c58;
  --line:#27364f;
  --ink:#f4f7fc;
  --ink-soft:#cdd8ea;
  --ink-muted:#94a4be;
}
/* brand blue is too dark to read on the dark surfaces: brighten accents */
html[data-theme="dark"] .trust-card strong,
html[data-theme="dark"] .calc__val,
html[data-theme="dark"] .contact-card h3,
html[data-theme="dark"] .faq-list summary::after,
html[data-theme="dark"] .answer-box strong,
html[data-theme="dark"] .button-plain{color:var(--brand-bright)}
html[data-theme="dark"] .article a,
html[data-theme="dark"] .content-stack a,
html[data-theme="dark"] .blog-card>a{color:var(--brand-bright)}
html[data-theme="dark"] .vehicle-card h3 a:hover,
html[data-theme="dark"] .blog-card h2 a:hover,
html[data-theme="dark"] .resource-list a:hover,
html[data-theme="dark"] .contact-card__list a:hover{color:var(--brand-bright)}
/* outline buttons / pill borders / inputs pick up the dark line */
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .related-links a{border-color:var(--line)}
html[data-theme="dark"] .lead-form input::placeholder,
html[data-theme="dark"] .lead-form textarea::placeholder{color:#8294ad}
/* deeper shadows read better on dark */
html[data-theme="dark"] .hero-form,
html[data-theme="dark"] .vehicle-search-section>.container{box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* hero: in dark theme use the dark forecourt treatment even though the
   homepage element still carries the light-hero class */
html[data-theme="dark"] .hero-home--light{
  color:#fff;
  border-bottom:1px solid var(--line-dark);
  background:
    radial-gradient(640px 300px at 88% 92%,rgba(255,210,77,.09),transparent 70%),
    linear-gradient(100deg,rgba(5,6,9,.95) 0%,rgba(5,6,9,.84) 42%,rgba(6,9,14,.55) 100%),
    url("../img/drive-now-hero.jpg") center 38%/cover no-repeat;
}
html[data-theme="dark"] .hero-home--light .hero-copy h1{color:#fff}
html[data-theme="dark"] .hero-home--light .hero-copy p{color:#e6ecf5}
html[data-theme="dark"] .hero-home--light .trust-list{color:#e6ecf5}
html[data-theme="dark"] .hero-home--light .trust-list li::before{background:#c9d2de}
html[data-theme="dark"] .hero-home--light .button-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.38);color:#fff}
html[data-theme="dark"] .hero-home--light .button-call{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.38);color:#fff}
html[data-theme="dark"] .hero-home--light .button-call strong{color:#fff}

/* ---------- theme toggle (injected into the top strip by site.js) ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  background:transparent;border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:999px;padding:4px 13px;
  font:700 12.5px/1 var(--body);letter-spacing:.02em;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.theme-toggle svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
@media (max-width:520px){.theme-toggle__txt{display:none}.theme-toggle{padding:6px 9px}}

/* ============================================================
   VEHICLES LISTING — Grid / List view toggle + per-card slideshow.
   Toggle + slideshow are injected by site.js; cards come from
   MotorCentral so everything here works on the generated markup.
   ============================================================ */
/* live result count under the filters (listing page) */
.filter-status{
  margin:14px 0 0;
  font-size:14px;font-weight:600;color:var(--ink-muted);
}
.filter-status--empty{color:var(--ink-soft)}

.vehicles-toolbar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:18px}
.view-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.view-toggle button{
  display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  color:var(--ink-muted);font:700 13px/1 var(--body);letter-spacing:.02em;
  padding:9px 16px;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.view-toggle button.is-active{background:var(--brand);color:#fff}
.view-toggle svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* per-card slideshow controls (hidden until list view) */
.vcard-media{position:relative;display:block}
.vcard-media>a{display:block;height:100%}
.vcard-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(8,10,14,.55);color:#fff;font-size:24px;line-height:1;
  cursor:pointer;display:none;place-items:center;
  transition:background-color .2s var(--ease);
}
.vcard-nav:hover{background:rgba(8,10,14,.85)}
.vcard-nav--prev{left:10px}
.vcard-nav--next{right:10px}
.vcard-count{
  position:absolute;right:10px;bottom:10px;z-index:2;display:none;
  background:rgba(8,10,14,.68);color:#fff;
  font:600 12px/1 var(--body);font-variant-numeric:tabular-nums;
  padding:6px 10px;border-radius:999px;
}

/* LIST VIEW: each card becomes a row, photo left, details right */
.vehicle-grid--list{display:flex;flex-direction:column;gap:18px}
.vehicle-grid--list .vehicle-card{flex-direction:row;align-items:stretch}
.vehicle-grid--list .vehicle-card>a,
.vehicle-grid--list .vcard-media{flex:0 0 42%;max-width:42%;align-self:stretch}
.vehicle-grid--list .vehicle-card img{width:100%;height:100%;min-height:236px;aspect-ratio:auto;object-fit:cover}
.vehicle-grid--list .vehicle-card__body{padding:clamp(20px,2.4vw,30px)}
.vehicle-grid--list .vehicle-card p{font-size:16px}
.vehicle-grid--list .vcard-nav{display:grid}
.vehicle-grid--list .vcard-count{display:block}
@media (min-width:760px){
  .vehicle-grid--list .vehicle-card dl{max-width:420px}
  .vehicle-grid--list .card-actions{max-width:420px}
}
@media (max-width:680px){
  /* list view on small screens stacks like a card again */
  .vehicle-grid--list .vehicle-card{flex-direction:column}
  .vehicle-grid--list .vehicle-card>a,
  .vehicle-grid--list .vcard-media{flex:none;max-width:none}
  .vehicle-grid--list .vehicle-card img{min-height:0;height:auto;aspect-ratio:16/10}
  .vcard-nav,.vcard-count{display:none!important}
}

/* ============================================================
   MULTI-STEP FINANCE APPLICATION (apply page). Reuses .lead-form
   input styling; step nav + submit handled by site.js.
   ============================================================ */
.finance-app{max-width:720px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:clamp(22px,3.2vw,40px)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.finance-app__progress{margin-bottom:28px}
.finance-app__progress ol{list-style:none;display:flex;gap:6px;margin:0 0 14px;padding:0}
.finance-app__progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font:700 11.5px/1.2 var(--body);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted)}
.finance-app__progress li span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-muted);font-family:var(--display);font-size:15px}
.finance-app__progress li.is-active{color:var(--ink)}
.finance-app__progress li.is-active span,.finance-app__progress li.is-done span{background:var(--brand);border-color:var(--brand);color:#fff}
.finance-app__bar{height:5px;border-radius:5px;background:var(--bg-soft);overflow:hidden}
.finance-app__bar i{display:block;height:100%;width:25%;background:var(--brand);border-radius:5px;transition:width .35s var(--ease)}

.finance-step{border:0;margin:0;padding:0;min-inline-size:0;display:grid;gap:16px}
.finance-step[hidden]{display:none}
.finance-step legend{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.45rem,2.4vw,2rem);color:var(--ink);padding:0;float:left;width:100%}
.finance-step__hint{color:var(--ink-muted);font-size:15px;margin:-6px 0 4px}
.finance-step__nav{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.finance-step__nav .button{min-width:132px}

.finance-consent{display:flex!important;gap:12px;align-items:flex-start;font-size:14px;font-weight:400!important;color:var(--ink-soft)}
.finance-consent input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--brand)}

.finance-summary{display:grid;gap:9px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.finance-summary div{display:flex;justify-content:space-between;gap:18px;font-size:14.5px}
.finance-summary span:first-child{color:var(--ink-muted);flex:0 0 auto}
.finance-summary span:last-child{color:var(--ink);font-weight:600;text-align:right}

.finance-done{text-align:center;padding:24px 0}
.finance-done h2{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.finance-done p{color:var(--ink-soft);max-width:46ch;margin:0 auto}