/* =====================================================================
   US Equipment Express — White / Blue editorial theme
   Squared corners (no border-radius), bordered header, blue accents
   taken from the logo (navy blue + red).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg:        #ffffff;
  --bg-2:      #f4f4f5;
  --bg-3:      #ececee;
  --ink:       #15171c;   /* near-black text */
  --ink-2:     #2c2f36;
  --muted:     #5f646d;
  --muted-2:   #8c9099;

  --line:      #e4e4e7;
  --line-2:    #d5d5d9;
  --line-dark: #2a2d34;

  --red:       #01267b;   /* brand blue from the logo (name kept from the old palette) */
  --true-red:  #d2010d;   /* the logo red, for the financing button */
  --true-red-d:#a8000a;
  --red-dark:  #001a57;
  --red-soft:  #e6ecf7;
  --gold:      #fcd800;   /* yellow, for the "reserved" status */

  --footer-bg: #16181d;

  --ff-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 88px;
  --r: 10px;           /* soft corners on panels and fields */
  --r-btn: 999px;      /* buttons are fully rounded */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--ff-body); line-height: 1.65; font-size: 16px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--red-dark); }
::selection { background: var(--red); color: #fff; }

h1,h2,h3,h4 { font-family: var(--ff-head); font-weight: 600; line-height: 1.1; letter-spacing: .2px; margin: 0; }

.container-x { width: min(1320px, 92%); margin-inline: auto; }
.section { padding: clamp(58px, 7vw, 104px) 0; }
.section-tight { padding: clamp(42px, 5vw, 74px) 0; }
.bg-grey { background: var(--bg-2); }
.bordered-top { border-top: 1px solid var(--line); }
.bordered-block { border-block: 1px solid var(--line); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #c9c9cd; border: 3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-body); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: 2.6px; color: var(--red);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 26px; height: 2px; background: var(--red); }
.eyebrow.light { color: #fff; }
.eyebrow.light::before, .eyebrow.light.center::after { background: #fff; }

.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; margin: 0 0 16px; color: var(--ink);
}
.section-title .accent { color: var(--red); }
.accent { color: var(--red); }
.lead-muted { color: var(--muted); font-size: 1.04rem; max-width: 620px; font-family: var(--ff-body); }
.text-gold, .text-red { color: var(--red) !important; }
.text-muted-2 { color: var(--muted) !important; }

.gold-rule { width: 54px; height: 3px; background: var(--red); margin: 18px 0 24px; }
.center .gold-rule { margin-inline: auto; }

/* ---------- Buttons (square) ---------- */
.btn-gold, .btn-outline-gold, .btn-ghost, .btn-dark, .btn-outline-accent, .btn-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 2px solid transparent; cursor: pointer;
  font-family: var(--ff-head); font-weight: 500; font-size: .92rem;
  text-transform: uppercase; letter-spacing: 1.4px; border-radius: 0;
  transition: all .22s var(--ease);
}
.btn-gold { background: var(--red); color: #fff; border-color: var(--red); }
.btn-gold:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-outline-gold { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-gold:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline-accent { background: #fff; color: var(--red); border-color: var(--red); }
.btn-outline-accent:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red { background: var(--true-red); color: #fff; border-color: var(--true-red); }
.btn-red:hover { background: var(--true-red-d); border-color: var(--true-red-d); color: #fff; }
.btn-icon svg { width: 17px; height: 17px; }
.btn-sm-x { padding: 11px 20px; font-size: .8rem; }

/* ============================================================
   HEADER — bordered, divided, centered logo
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
}

/* top row — action pill, centred logo, rounded search */
.hdr-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; height: var(--header-h); padding: 0 clamp(16px, 3.5vw, 40px); }

.hdr-actions { justify-self: start; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  box-shadow: 0 2px 10px rgba(21, 23, 28, .07); overflow: hidden; }
.hdr-actions a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  font-size: .85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  border-right: 1px solid var(--line); transition: color .2s var(--ease), background .2s var(--ease); }
.hdr-actions a:last-child { border-right: 0; }
.hdr-actions a:hover { color: var(--red); background: var(--bg-2); }
.hdr-actions svg { width: 17px; height: 17px; color: var(--red); flex: none; }

.hdr-logo { justify-self: center; display: block; }
.hdr-logo img { height: 62px; width: auto; }

.hdr-search { justify-self: end; position: relative; display: flex; align-items: center;
  width: min(340px, 100%); border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; padding-left: 20px; box-shadow: 0 2px 10px rgba(21, 23, 28, .06);
  transition: border-color .2s var(--ease); }
.hdr-search:focus-within { border-color: var(--red); }
.hdr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 12px 0; font-family: var(--ff-body); font-size: .9rem; color: var(--ink); }
.hdr-search input::placeholder { color: var(--muted-2); }
.hdr-search-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  color: var(--red); }
.hdr-search-ic svg { width: 19px; height: 19px; }

/* blue navigation bar */
.hdr-nav { background: var(--red); }
.hdr-nav-inner { display: flex; align-items: stretch; justify-content: center;
  gap: clamp(10px, 2.8vw, 46px); padding: 0 clamp(16px, 3.5vw, 40px); }
.hdr-cell { position: relative; display: flex; align-items: stretch; }
.hdr-link { display: inline-flex; align-items: center; gap: 7px; padding: 15px 12px;
  font-family: var(--ff-head); font-weight: 500; text-transform: uppercase;
  letter-spacing: 1.2px; font-size: .92rem; color: #fff; white-space: nowrap;
  transition: opacity .2s var(--ease); }
.hdr-link:hover { color: #fff; opacity: .78; }
.hdr-link .caret { width: 11px; height: 11px; opacity: .85; transition: transform .25s var(--ease); }
.hdr-cell.has-drop:hover .caret { transform: rotate(180deg); }
.hdr-cell::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px;
  background: #fff; transform: scaleX(0); transition: transform .25s var(--ease); }
.hdr-cell:hover::after, .hdr-cell.active-cell::after { transform: scaleX(1); }

/* dropdown */
.hdr-drop {
  position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
  border: 1px solid var(--line-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s var(--ease); z-index: 60; padding: 6px 0;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.4);
}
.hdr-cell.has-drop:hover .hdr-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr-drop a {
  display: flex; align-items: center; gap: 11px; padding: 12px 22px; color: var(--ink-2);
  font-size: .9rem; font-weight: 500; transition: all .18s var(--ease); border-left: 3px solid transparent;
}
.hdr-drop a:hover { background: var(--bg-2); color: var(--red); border-left-color: var(--red); }

/* header search results dropdown */
.hdr-results {
  position: absolute; top: 100%; right: 0; width: min(460px, 92vw); background: #fff;
  border: 1px solid var(--line-2);
  max-height: 70vh; overflow-y: auto; z-index: 80; display: none;
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.45);
}
.hdr-results.open { display: block; }
.sr-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  transition: background .16s var(--ease); cursor: pointer; }
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover, .sr-item.sel { background: var(--bg-2); }
.sr-item img { width: 84px; height: 56px; object-fit: cover; flex: none; }
.sr-meta { flex: 1; min-width: 0; }
.sr-title { font-family: var(--ff-head); font-weight: 500; font-size: .98rem; margin: 0; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
.sr-title mark { background: var(--red-soft); color: var(--red-dark); padding: 0 2px; }
.sr-sub { color: var(--muted); font-size: .78rem; margin: 2px 0 0; }
.sr-price { font-family: var(--ff-head); font-weight: 600; color: var(--red); white-space: nowrap; font-size: 1rem; }
.sr-was { display: block; font-family: var(--ff-body); font-size: .7rem; font-weight: 500; color: var(--muted-2); line-height: 1.2; }
.sr-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: .9rem; }

/* mobile */
.hdr-mobile-phone { display: none; }
.nav-toggle { display: none; width: 58px; height: auto; border: 0; border-left: 1px solid var(--line); background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle .bars { display: flex; flex-direction: column; gap: 5px; }
.nav-toggle .bars span { display: block; width: 24px; height: 2px; background: var(--red); transition: .28s var(--ease); }
.nav-toggle.open .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .bars span:nth-child(2) { opacity: 0; }
.nav-toggle.open .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nt-label, .hdr-actions .a-short { display: none; }

.mobile-menu {
  position: fixed; inset: var(--hdr-h, var(--header-h)) 0 0 0; background: #fff; z-index: 999;
  transform: translateX(100%); transition: transform .35s var(--ease);
  overflow-y: auto; padding: 10px 0 40px;
}
.mobile-menu.open { transform: translateX(0); }
.m-link { display: flex; justify-content: space-between; align-items: center; padding: 16px 6%; border-bottom: 1px solid var(--line);
  font-family: var(--ff-head); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.m-sub { display: none; background: var(--bg-2); }
.m-sub.open { display: block; }
.m-sub a { display: block; padding: 13px 10%; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.m-sub a:hover { color: var(--red); }
.m-link .caret { width: 14px; transition: transform .25s var(--ease); }
.m-link.open .caret { transform: rotate(180deg); }
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 6%; }
.m-actions a { justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero { --hero-h: clamp(400px, 34vw, 560px);
  position: relative; height: var(--hero-h); overflow: hidden; background: #fff; }
/* on a phone each slide stacks the photo over the text, so it needs height */
@media (max-width: 900px) { .hero { --hero-h: calc(440px + 25vw); } }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  display: grid; place-items: center; opacity: 0; transition: opacity .9s var(--ease); }
.hero-slide.active { opacity: 1; }

/* Banners are built in HTML, not baked into a picture, so they re-flow on any
   screen: copy on the left over navy, the photo on the right behind a diagonal
   edge; on a phone the photo sits on top and the copy below it. Used by the
   home hero slides (.is-promo) and the inventory consignment card (.promo-card). */
.is-promo, .promo-card { --promo-w: 58%; color: #fff;
  background:
    linear-gradient(115deg, transparent 52%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.06) 58%, transparent 58%),
    linear-gradient(120deg, #0b1a3c 0%, #01267b 55%, #0a3aa8 100%); }
.hero-slide.is-promo { display: block; }
.hero-slide.is-promo::after { display: none; }
.promo-media { position: absolute; top: 0; right: 0; bottom: 0; width: var(--promo-w);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.promo-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(1,38,123,.45), transparent 28%); }
.promo-media img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; }
.promo-credit { position: absolute; z-index: 2; top: 8px; right: 12px; font-size: 10px; line-height: 1.3;
  color: rgba(255,255,255,.8); text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
.promo-credit:hover { color: #fff; }
.promo-copy { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 48%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 28px 0 clamp(72px, 6.5vw, 130px); }
.promo-title { font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: .5px;
  font-size: clamp(1.7rem, 3.2vw, 3.3rem); line-height: 1.05; margin: 0; }
.promo-title em { font-style: normal; color: #6aa8ff; }
.promo-text { margin: 14px 0 0; max-width: 34em; color: rgba(255,255,255,.86);
  font-size: clamp(.95rem, 1.15vw, 1.12rem); line-height: 1.55; }
.promo-rate { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); margin: 8px 0 0; }
.promo-big { font-weight: 800; font-style: italic; line-height: .95; letter-spacing: -2px;
  font-size: clamp(4.2rem, 7.6vw, 8.5rem); }
.promo-rate-txt { display: flex; flex-direction: column; line-height: 1.05;
  border-left: 3px solid rgba(255,255,255,.55); padding-left: clamp(14px, 1.6vw, 22px); }
.promo-rate-txt b, .promo-rate-txt em { font-weight: 800; text-transform: uppercase; font-style: normal;
  font-size: clamp(1.2rem, 2.2vw, 2.3rem); letter-spacing: .5px; }
.promo-rate-txt small { text-transform: uppercase; letter-spacing: .35em; font-size: clamp(.7rem, .9vw, .9rem);
  margin: 4px 0 2px; opacity: .9; }
.promo-rate-txt em { color: #6aa8ff; }
.promo-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2vw, 28px); }
.promo-btn { display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 999px;
  background: var(--true-red); border: 2px solid var(--true-red); color: #fff; font-weight: 600;
  font-size: .95rem; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.promo-btn:hover { background: var(--true-red-d); border-color: var(--true-red-d); color: #fff; }
.promo-btn.ghost { background: transparent; border-color: rgba(255,255,255,.75); }
.promo-btn.ghost:hover { background: #fff; color: var(--red); border-color: #fff; }
.promo-contact { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: clamp(14px, 1.8vw, 24px);
  font-size: .92rem; color: rgba(255,255,255,.85); }
.promo-contact span, .promo-contact a { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.promo-contact a:hover { color: #fff; }
.promo-contact svg { width: 17px; height: 17px; flex: none; }
/* the inventory-page card: same banner, in a rounded box instead of full width */
.promo-card { position: relative; height: clamp(360px, 30vw, 460px); border-radius: var(--r); overflow: hidden; }
.promo-card .promo-copy { padding-left: clamp(28px, 4vw, 64px); }
@media (max-width: 1100px) {
  .promo-btn { padding: 11px 20px; font-size: .88rem; }
}
@media (max-width: 900px) {
  .hero .hero-arrow { top: calc((100% - 330px) / 2); }
  .hero .promo-media { left: 0; width: 100%; bottom: auto; height: calc(100% - 310px); }
  .promo-media { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .promo-media::before { background: linear-gradient(0deg, rgba(1,38,123,.45), transparent 40%); }
  .promo-copy { top: auto; right: 0; bottom: 0; width: 100%; height: auto;
    justify-content: flex-end; padding: 0 clamp(20px, 5vw, 44px) 24px; }
  .promo-title { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
  .promo-text { font-size: .92rem; margin-top: 8px; }
  .promo-big { font-size: clamp(3.6rem, 19vw, 5rem); letter-spacing: -1px; }
  .promo-rate-txt b, .promo-rate-txt em { font-size: clamp(1.1rem, 5.6vw, 1.5rem); }
  .promo-btns { width: 100%; }
  .promo-btn { flex: 1 1 auto; justify-content: center; padding: 11px 14px; font-size: .86rem; }
  .promo-contact { font-size: .82rem; gap: 4px 16px; }
  /* the card is not a fixed-height slider, so on a phone it simply flows */
  .promo-card { height: auto; }
  .promo-card .promo-media { position: relative; width: 100%; height: clamp(200px, 50vw, 340px); }
  .promo-card .promo-copy { position: relative; padding: 18px clamp(20px, 5vw, 44px) 26px; }
}
/* very small phones: the two buttons stack, so give the copy more room */
@media (max-width: 360px) {
  .hero { --hero-h: 640px; }
  .hero .promo-media { height: calc(100% - 400px); }
  .hero .hero-arrow { top: calc((100% - 400px) / 2); }
}
/* the photo bleeds in from both edges and dissolves into a white middle,
   so the heading always sits on plain white however busy the picture is */
.hero-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 13%,
                  rgba(255,255,255,.72) 29%, rgba(255,255,255,.93) 44%,
                  rgba(255,255,255,.93) 56%, rgba(255,255,255,.72) 71%,
                  rgba(255,255,255,.28) 87%, rgba(255,255,255,0) 100%); }

/* Each slide carries its own wording, so a plain cross-fade would show two
   headings on top of each other for the length of the transition. The outgoing
   text leaves first and the incoming one waits for it, so they never overlap. */
.hero-panel { position: relative; z-index: 2; text-align: center; padding: 0 clamp(70px, 9vw, 120px);
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hero-slide.active .hero-panel { opacity: 1; transform: none;
  transition: opacity .5s var(--ease) .45s, transform .5s var(--ease) .45s; }
.hero-title { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; color: var(--ink-2);
  font-size: clamp(1.6rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: 1px; margin: 0 0 22px; }
.hero-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ink);
  color: #fff; padding: 14px 30px; border-radius: 999px; font-size: .95rem; font-weight: 600;
  transition: background .22s var(--ease); }
.hero-btn:hover { background: var(--red); color: #fff; }

.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; background: #fff; border: 0; color: var(--red); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 14px rgba(21, 23, 28, .14);
  transition: color .2s var(--ease), background .2s var(--ease); }
.hero-arrow.prev { left: 0; border-radius: 0 var(--r) var(--r) 0; }
.hero-arrow.next { right: 0; border-radius: var(--r) 0 0 var(--r); }
.hero-arrow:hover { background: var(--red); color: #fff; }
.hero-arrow svg { width: 22px; height: 22px; }

/* page hero (interior) */
/* a slim grey strip carrying just the breadcrumbs, the same grey as the footer */
.crumb-bar { background: #0b1a3c; padding: 13px 0; }
.breadcrumb-x { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff;
  font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb-x a { color: rgba(255, 255, 255, .78); }
.breadcrumb-x a:hover { color: #fff; }
.breadcrumb-x .sep { color: rgba(255, 255, 255, .45); }
/* the page's own heading is kept for search engines and screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============================================================
   VEHICLE CARDS
   ============================================================ */
.inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1200px) { .inventory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .inventory-grid { grid-template-columns: repeat(2, 1fr); } }
.car-card { background: #fff; border: 1px solid var(--line-2); position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
  opacity: 0; transform: translateY(24px); }
.car-card.reveal { opacity: 1; transform: none; }
.car-card:hover { border-color: var(--red); box-shadow: 0 22px 44px -30px rgba(0,0,0,.5); }
.car-media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.car-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.car-card:hover .car-media img { transform: scale(1.06); }
.car-badges { position: absolute; top: 0; left: 0; z-index: 2; display: flex; }
.badge-x { font-family: var(--ff-head); font-size: .68rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 12px; }
.badge-gold { background: var(--red); color: #fff; }
.badge-dark { background: var(--ink); color: #fff; }
.badge-save { background: var(--ink); color: #fff; }
.badge-sold { background: #b3261e; color: #fff; }
.badge-reserved { background: var(--gold); color: var(--ink); }
/* A sold machine stays listed but reads as past tense: its photos lose their
   colour entirely. A reserved one keeps its colour, dimmed, with the word
   stamped across the middle. */
.car-card.is-sold .car-media img,
.vd-main.is-sold img,
.vd-thumbs.is-sold img { filter: grayscale(1); }

.car-media, .vd-main { position: relative; }
.car-card.is-reserved .car-media img,
.vd-main.is-reserved img { filter: brightness(.62); }
.vd-thumbs.is-reserved img { filter: brightness(.72); }

.media-stamp { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  pointer-events: none; color: #fff; font-family: var(--ff-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 4px; font-size: 1.3rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.vd-main .media-stamp { font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: 8px; }
.vd-status { display: inline-block; margin-top: 9px; padding: 3px 12px; font-family: var(--ff-body);
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
.vd-status.is-sold { background: #b3261e; color: #fff; }
.vd-status.is-reserved { background: var(--gold); color: var(--ink); }
.car-year-tag { position: absolute; bottom: 0; right: 0; z-index: 2; background: rgba(255,255,255,.94); color: var(--ink);
  font-family: var(--ff-head); font-weight: 600; font-size: 1.15rem; padding: 5px 14px; letter-spacing: 1px; }
.car-card { display: flex; flex-direction: column; }
.car-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }

.car-name { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 6px; font-weight: 600; line-height: 1.15;
  min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-name a { color: var(--ink); } .car-name a:hover { color: var(--red); }
.car-tagline { color: var(--muted); font-size: .82rem; margin: 0 0 14px; line-height: 1.6; min-height: 3.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-figs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: 4px 0 16px; margin-top: auto; }
.car-price { font-family: var(--ff-head); font-size: 1.72rem; font-weight: 700; color: var(--red);
  line-height: 1.15; min-width: 0; }
.car-hours { text-align: right; flex: none; line-height: 1.15; }
.car-hours span { display: block; font-size: .72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1px; }
.car-hours b { font-family: var(--ff-head); font-size: 1.72rem; font-weight: 700; color: var(--ink); }
.car-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 15px; border-top: 1px solid var(--line); }
.car-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 8px;
  border: 1px solid var(--red); border-radius: var(--r); font-weight: 600; font-size: .88rem;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.car-btn.primary { background: var(--red); color: #fff; }
.car-btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.car-btn.ghost { background: #fff; color: var(--red); }
.car-btn.ghost:hover { background: var(--red-soft); color: var(--red-dark); }
.car-price small { display: block; font-family: var(--ff-body); font-size: .64rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
/* machines listed before their price is set */
.car-price .car-call { font-size: .96rem; letter-spacing: .3px; }
.vd-price.vd-price-call { font-size: 1.5rem; }
.car-was.is-empty { visibility: hidden; }
.car-was { display: block; font-family: var(--ff-body); font-size: .74rem; font-weight: 500; color: var(--muted-2);
  text-decoration: line-through; line-height: 1.2; margin-bottom: 1px; }

/* ---------- Google reviews ---------- */
.reviews-section { background: var(--bg-2); border-top: 1px solid var(--line); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 22px; margin-bottom: 34px; }
.google-badge { display: flex; align-items: center; gap: 16px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 22px; }
.gb-stars { font-family: var(--ff-head); font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.gb-stars .stars { display: inline-flex; gap: 2px; color: #fbbc04; }
.gb-stars .stars svg { width: 17px; height: 17px; }
.gb-stars b { font-size: 1.15rem; }
.gb-sub { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; }
.reviews-slider { position: relative; }
.reviews-track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding-bottom: 6px;
  scrollbar-width: none; -ms-overflow-style: none;
  /* the fade widths are zero until the script says there is more to scroll to */
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent 100%); }
.reviews-slider.fade-l .reviews-track { --fade-l: clamp(40px, 7%, 90px); }
.reviews-slider.fade-r .reviews-track { --fade-r: clamp(40px, 7%, 90px); }
.reviews-track::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 clamp(270px, 31%, 370px); min-width: 0; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 20px 22px; }
.rc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1.05rem; }
.rc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.rc-src { color: var(--muted); font-size: .75rem; }
.rc-g { width: 20px; height: 20px; flex: none; }
.rc-g svg { width: 100%; height: 100%; display: block; }
.rc-stars { color: #fbbc04; letter-spacing: 2px; font-size: 1rem; margin-bottom: 10px; }
.rc-text { color: var(--ink-2); font-size: .92rem; line-height: 1.62; margin: 0; }
.rev-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2);
  color: var(--red); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 12px rgba(21, 23, 28, .12);
  transition: opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.rev-nav:hover { background: var(--red); color: #fff; border-color: var(--red); }
.rev-nav.prev { left: -20px; } .rev-nav.next { right: -20px; }
/* on a narrow screen the container gutter is thinner than the overhang,
   so the arrows tuck inside the row instead of poking past the page */
@media (max-width: 600px) { .rev-nav.prev { left: 0; } .rev-nav.next { right: 0; } }
.rev-nav svg { width: 20px; height: 20px; }
.rev-nav.is-off { opacity: 0; pointer-events: none; }
.rev-nav[hidden] { display: none; }
@media (hover: none) { .rev-nav { display: none; } }

/* ---------- Browse by category carousel ---------- */
.cat-section { position: relative; overflow: hidden; }
.cat-stripe { position: absolute; z-index: 1; height: 22px; width: 300px; background: var(--red); transform: skewX(-24deg); opacity: .85; }
.cat-stripe-tl { top: 52px; left: -96px; }
.cat-stripe-br { bottom: 34px; right: -96px; }
@media (max-width: 1100px) { .cat-stripe { display: none; } }
.cat-head { text-align: center; margin-bottom: 36px; }
.cat-sub { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: .9rem; color: var(--ink-2); margin: 0; }
.cat-carousel { position: relative; }
.cat-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.cat-track::-webkit-scrollbar { display: none; }
.cat-card { position: relative; flex: 0 0 clamp(160px, 15vw, 208px); height: clamp(260px, 24vw, 320px);
  overflow: hidden; scroll-snap-align: start; display: block; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,16,0) 50%, rgba(12,13,16,.78)); }
.cat-label { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; text-align: center; color: #fff;
  font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .96rem;
  padding: 14px 8px; border-bottom: 4px solid var(--red); transition: border-color .3s var(--ease); }
.cat-card:hover .cat-label { border-bottom-color: #fff; }
.cat-arrows { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.cat-arrows button { width: 54px; height: 46px; background: var(--red); border: 0; color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .2s var(--ease); }
.cat-arrows button:hover { background: var(--red-dark); }
.cat-arrows svg { width: 20px; height: 20px; }

/* ---------- Browse: Shop by Type + Shop by Make ---------- */
.browse-divider { border: 0; height: 1px; background: var(--line-2);
  margin: clamp(34px, 4.2vw, 52px) 0; }

/* category tiles — machine render, name and a live count */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
.type-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.type-card:hover { border-color: var(--red); transform: translateY(-5px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .42); }
.type-thumb { height: 186px; display: grid; place-items: center; padding: 18px;
  background: linear-gradient(160deg, var(--red-soft), #fff 72%); }
.type-thumb img { max-width: 100%; max-height: 146px; object-fit: contain;
  transition: transform .35s var(--ease); }
.type-card:hover .type-thumb img { transform: scale(1.07); }
.type-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; border-top: 1px solid var(--line); }
.type-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-name { font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  font-size: .95rem; color: var(--ink); }
.type-count { font-size: .76rem; color: var(--muted); font-weight: 500; }
.type-go { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bg-2); color: var(--red); transition: background .22s var(--ease), color .22s var(--ease); }
.type-go svg { width: 17px; height: 17px; }
.type-card:hover .type-go { background: var(--red); color: #fff; }

/* brand tiles — logo greys back until you point at it */
.make-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 560px) { .make-row { grid-template-columns: repeat(2, 1fr); } }
.make-tile { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 26px 18px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.make-tile:hover { border-color: var(--red); transform: translateY(-4px);
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .45); }
.make-tile img { max-width: 100%; max-height: 54px; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.make-tile:hover img { filter: none; opacity: 1; }
.make-tile span { font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); transition: color .2s var(--ease); }
.make-tile:hover span { color: var(--red); }
.make-tile:hover img { transform: scale(1.06); }

/* value / info cards */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 1px solid var(--line-2); }
.value-card { padding: 34px 30px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease); position: relative; }
.value-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.value-card:hover { background: var(--bg-2); } .value-card:hover::before { transform: scaleX(1); }
.value-ic { width: 52px; height: 52px; display: grid; place-items: center; background: var(--red-soft); margin-bottom: 20px; }
.value-ic svg { width: 25px; height: 25px; color: var(--red); }
.value-card h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; font-weight: 600; }
.value-card p { color: var(--muted); font-size: .9rem; margin: 0; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.info-card { padding: 32px; border: 1px solid var(--line-2); background: #fff; transition: all .25s var(--ease); display: block; }
.info-card:hover { border-color: var(--red); background: #fff; transform: translateY(-4px); }
.info-card .value-ic { margin-bottom: 18px; }
.info-card h3 { font-size: 1.18rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; color: var(--ink); font-weight: 600; }
.info-card p { color: var(--muted); font-size: .92rem; margin: 0; }
/* the variant with a photo across the top: the padding moves inside, so the
   picture can run edge to edge and get clipped by the card's rounded corners */
.info-card.has-photo { padding: 0; overflow: hidden; }
.info-card.has-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .4s var(--ease); }
.info-card.has-photo:hover img { transform: scale(1.05); }
.info-card .ic-body { padding: 24px 26px 28px; }

/* split */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
.split-media { position: relative; overflow: hidden; border: 1px solid var(--line-2); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split-media .frame-tag { position: absolute; bottom: 0; left: 0; background: var(--red); color: #fff; padding: 14px 20px; }
.split-media .frame-tag .n { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.split-media .frame-tag .l { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; opacity: .9; }
.check-list { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; color: var(--ink-2); }
.check-list li svg { width: 21px; height: 21px; color: var(--red); flex: none; margin-top: 2px; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 78px); text-align: center; border: 1px solid var(--line-2); background: var(--ink); }
.cta-band::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; z-index: 0; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,20,24,.7), rgba(18,20,24,.86)); z-index: 1; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band .section-title { color: #fff; }
.cta-band .lead-muted { color: #c8cace; }
.cta-band .eyebrow { color: #fff; } .cta-band .eyebrow.center::before, .cta-band .eyebrow.center::after { background: #fff; }

/* a promo image that is itself the link — sized to the content column */
/* the section above already ends with a full gap, so this one adds none of
   its own on top — otherwise the banner sits lower than it sits high */
.promo-section { padding-top: 0; }
.promo-banner { display: block; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.promo-banner picture, .promo-banner img { display: block; width: 100%; height: auto; }
.promo-banner:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -26px rgba(0, 0, 0, .45); }

/* full-width CTA band */
.cta-full { position: relative; overflow: hidden; background: var(--ink); text-align: center;
  padding: clamp(56px, 8vw, 108px) 0; border-block: 1px solid var(--line-2); }
.cta-full-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .34; }
.cta-full::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,20,24,.55), rgba(18,20,24,.72)); }
.cta-full .section-title { color: #fff; }
.cta-full .lead-muted { color: #c8cace; }
.cta-full .eyebrow { color: #fff; }
.cta-full .eyebrow.center::before, .cta-full .eyebrow.center::after { background: #fff; }
/* equal-size CTA buttons (desktop + mobile) */
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-actions a { min-width: 264px; justify-content: center; }
@media (max-width: 560px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions a { min-width: 0; width: 100%; }
}

/* stat band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band > div { text-align: center; padding: 20px; border-left: 1px solid var(--line); }
.stat-band > div:first-child { border-left: 0; }
.stat-band .n { font-family: var(--ff-head); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--red); font-weight: 600; }
.stat-band .l { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: 2px; }

/* Bootstrap rows carry negative side margins equal to their gutter, and expect
   to sit inside a Bootstrap container whose padding cancels them out. The site
   uses its own .container-x, whose padding is smaller than the g-5 gutter, so
   the row sticks out a few pixels each side and the page pans on a phone.
   Once the columns stack there is nothing for a horizontal gutter to do, so
   dropping it below the lg breakpoint fixes the overflow and changes nothing
   visually. The vertical gutter is untouched. */
@media (max-width: 991.98px) {
  .container-x > .row { --bs-gutter-x: 0; }
}

/* ============================================================
   SHIPPING ESTIMATOR (page section + modal)
   ============================================================ */
.ship-calc { background: var(--bg); border: 1px solid var(--line-2); padding: 30px 32px 26px; }
.ship-title { font-family: var(--ff-head); font-size: 1.45rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.ship-from { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; margin: 0 0 20px; }
.ship-from svg { width: 16px; height: 16px; color: var(--red); flex: none; }
.ship-field label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); margin-bottom: 8px; }
.ship-pick { position: relative; }
.ship-input { width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--bg-2);
  font-family: var(--ff-body); font-size: .95rem; color: var(--ink); border-radius: 0; }
.ship-input:focus { outline: none; border-color: var(--red); background: var(--bg); }
.ship-input::placeholder { color: var(--muted-2); }
.ship-list { position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 30; max-height: 260px;
  overflow-y: auto; background: var(--bg); border: 1px solid var(--line-2); border-top-color: var(--red);
  box-shadow: 0 18px 38px rgba(21,23,28,.14); }
.ship-opt { padding: 11px 16px; font-size: .92rem; cursor: pointer; }
.ship-opt + .ship-opt { border-top: 1px solid var(--line); }
.ship-opt:hover, .ship-opt.on { background: var(--red-soft); }
.ship-opt mark { background: none; color: var(--red); font-weight: 700; }
.ship-out { margin-top: 22px; }
.ship-empty { color: var(--muted); font-size: .9rem; padding: 18px 0; text-align: center; border-top: 1px solid var(--line); }
.ship-lines { border-top: 1px solid var(--line); }
.ship-line { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ship-line span { color: var(--muted); }
.ship-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding: 16px 18px; background: var(--ink); color: #fff; }
.ship-total span { font-size: .7rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.6); }
.ship-total b { font-family: var(--ff-head); font-size: 1.85rem; color: #fff; line-height: 1; }
.ship-note { font-size: .76rem; color: var(--muted-2); line-height: 1.6; margin: 18px 0 0; }

.ship-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(21,23,28,.62); backdrop-filter: blur(2px); }
.ship-modal.open { display: flex; }
.ship-modal-card { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: shipIn .22s var(--ease); }
.ship-modal-card .ship-calc { border: 0; }
.ship-close { position: absolute; top: 10px; right: 12px; z-index: 1; width: 34px; height: 34px; border: 0;
  background: transparent; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.ship-close:hover { color: var(--ink); }
@keyframes shipIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .ship-calc { padding: 24px 20px 20px; } }

/* ============================================================
   HOME — WHY BUY FROM US
   ============================================================ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* three machines from the lot, overlapped, with the warranty badge on top */
.why-collage { position: relative; aspect-ratio: 1 / .92; }
.why-collage img { position: absolute; object-fit: cover; border-radius: var(--r);
  box-shadow: 0 24px 50px -28px rgba(11, 26, 60, .55); }
.wc-main { top: 0; left: 0; width: 78%; height: 66%; }
.wc-a { right: 0; top: 40%; width: 52%; height: 38%; border: 6px solid #fff; }
.wc-b { left: 8%; bottom: 0; width: 44%; height: 30%; border: 6px solid #fff; }
.wc-badge { position: absolute; left: 58%; bottom: 2%; display: flex; align-items: center; gap: 12px;
  background: var(--true-red); color: #fff; padding: 14px 20px; border-radius: var(--r);
  box-shadow: 0 18px 36px -18px rgba(210, 1, 13, .7); }
.wc-badge b { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.wc-badge span { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; line-height: 1.3; }
@media (max-width: 600px) {
  .wc-badge { left: auto; right: 0; bottom: 0; padding: 10px 14px; gap: 9px; }
  .wc-badge b { font-size: 2rem; }
  .wc-badge span { font-size: .66rem; }
}
.why-copy .lead-muted { margin-bottom: 22px; }
.why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.why-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.why-ic { flex: none; color: var(--red); padding-top: 2px; }
.why-ic svg { width: 22px; height: 22px; display: block; }
.why-item h3 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 4px; color: var(--ink); }
.why-item p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.why-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 70px);
  background: linear-gradient(120deg, #0b1a3c 0%, #01267b 60%, #0a3aa8 100%); border-radius: var(--r); overflow: hidden; }
.ws { position: relative; display: flex; align-items: center; gap: 14px; padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 26px);
  color: #fff; transition: background .2s var(--ease); }
.ws:hover { background: rgba(255,255,255,.06); color: #fff; }
.ws + .ws::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.18); }
.ws-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; }
.ws-ic svg { width: 21px; height: 21px; }
.ws-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ws-txt small { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: #8fb6ff; }
.ws-txt b { font-size: 1.08rem; font-weight: 700; margin: 3px 0 2px; white-space: nowrap; }
.ws-txt em { font-style: normal; font-size: .82rem; color: rgba(255,255,255,.7); }
.ws-go { margin-left: auto; flex: none; opacity: .5; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.ws-go svg { width: 16px; height: 16px; display: block; }
.ws:hover .ws-go { opacity: 1; transform: translateX(3px); }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-collage { max-width: 560px; width: 100%; margin: 0 auto; }
  .why-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws:nth-child(3)::before { display: none; }
  .ws:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
}

/* ============================================================
   HOME — SERVICES (financing, warranty, delivery, consignment)
   ============================================================ */
.svc-sec { padding: clamp(58px, 7vw, 104px) 0; background: #0b1a3c; color: #fff; }
.svc-head { margin-bottom: clamp(32px, 4vw, 52px); max-width: 720px; }
.svc-head .section-title { color: #fff; }
.svc-head .section-title .accent { color: #8fb6ff; }
.svc-head .lead-muted { color: rgba(255,255,255,.75); margin: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc-card { display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--r); overflow: hidden; }
.svc-card:hover { color: var(--ink); }
.svc-media { aspect-ratio: 16 / 10; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-size: 1.08rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; }
.svc-body p { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; color: var(--red);
  text-transform: uppercase; letter-spacing: .6px; }
.svc-link svg { width: 15px; height: 15px; }
.svc-card:hover .svc-link { text-decoration: underline; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FINANCING PAGE
   ============================================================ */
.fx-hero { color: #fff; padding: clamp(48px, 6vw, 88px) 0;
  background:
    linear-gradient(115deg, transparent 56%, rgba(255,255,255,.05) 56%, rgba(255,255,255,.05) 63%, transparent 63%),
    linear-gradient(120deg, #0b1a3c 0%, #01267b 55%, #0a3aa8 100%); }
.fx-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.fx-hero-copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: .5px; margin: 0 0 18px; }
.fx-hero-copy h1 em { font-style: normal; color: #6aa8ff; }
.fx-hero-copy > p { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7; color: rgba(255,255,255,.85); max-width: 560px; margin: 0 0 30px; }
.fx-figs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-bottom: 32px; }
.fx-figs > div { padding: 0 clamp(18px, 2.4vw, 34px); border-left: 1px solid rgba(255,255,255,.25); }
.fx-figs > div:first-child { padding-left: 0; border-left: 0; }
.fx-figs b { display: block; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1; }
.fx-figs > div:first-child b { font-style: italic; }
.fx-figs span { display: block; margin-top: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.45; color: rgba(255,255,255,.75); }
.fx-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.fx-calc { background: #fff; color: var(--ink); border-radius: calc(var(--r) * 1.6); padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.fx-calc h2 { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.fx-calc-sub { margin: 0 0 22px; font-size: .9rem; color: var(--muted); }
.fx-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 18px 20px;
  background: var(--red-soft); border-radius: var(--r); }
.fx-result span { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--red); }
.fx-result b { font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.fx-break { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.fx-break div { background: var(--bg-2); border-radius: var(--r); padding: 12px 14px; }
.fx-break span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.fx-break b { display: block; margin-top: 4px; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-fine { margin: 14px 0 0; font-size: .76rem; color: var(--muted-2); line-height: 1.5; }
.fx-grey { background: var(--bg-2); }
.fx-head { text-align: center; max-width: 680px; margin: 0 auto clamp(32px, 4vw, 52px); }
.fx-head .lead-muted { margin: 0 auto; }
.fx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fx-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 34px 30px; text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.fx-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(1,38,123,.45); }
.fx-ic { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--red-soft); color: var(--red); flex: none; }
.fx-ic svg { width: 26px; height: 26px; }
.fx-card h3 { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 10px; }
.fx-card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.fx-steps::before { content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line-2); }
.fx-steps li { position: relative; text-align: center; padding: 0 8px; }
.fx-num { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 1.3rem; font-weight: 700; box-shadow: 0 0 0 8px var(--bg-2); }
.fx-steps h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 20px 0 8px; }
.fx-steps p { margin: 0 auto; max-width: 260px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.fx-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; margin: 0 auto; }
.fx-doc { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 30px 32px; }
.fx-doc-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.fx-doc-head .fx-ic { width: 48px; height: 48px; }
.fx-doc-head .fx-ic svg { width: 22px; height: 22px; }
.fx-doc h3 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.fx-doc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fx-doc li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.fx-doc li svg { flex: none; width: 18px; height: 18px; color: var(--red); margin-top: 2px; }
.fx-faq { max-width: 880px; margin: 0 auto; }
.fx-faq .acc-item { border-radius: var(--r); }
.fx-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: #fff;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px); border-radius: calc(var(--r) * 1.6);
  background:
    linear-gradient(115deg, transparent 62%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.06) 70%, transparent 70%),
    linear-gradient(120deg, #0b1a3c 0%, #01267b 55%, #0a3aa8 100%); }
.fx-cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 700; text-transform: uppercase; margin: 0 0 6px; }
.fx-cta p { margin: 0; color: rgba(255,255,255,.8); }
@media (max-width: 991px) {
  .fx-hero-grid { grid-template-columns: 1fr; }
  .fx-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .fx-steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .fx-steps::before { display: none; }
  .fx-docs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fx-figs { grid-template-columns: repeat(3, 1fr); }
  .fx-figs > div { padding: 0 12px; }
  .fx-figs b { font-size: 1.7rem; white-space: nowrap; }
  .fx-break { grid-template-columns: 1fr; }
  .fx-steps { grid-template-columns: 1fr; }
  .fx-btns .promo-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   LOAN APPLICATION
   ============================================================ */
.la-head { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-end;
  padding-bottom: 24px; margin-bottom: 32px; border-bottom: 2px solid var(--ink); }
.la-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; color: var(--ink); }
.la-head p { margin: 0; max-width: 680px; color: var(--ink-2); font-size: .97rem; }
.la-head-meta { display: flex; flex-direction: column; text-align: right; font-size: .82rem; color: var(--muted); line-height: 1.6; }
.la-head-meta span:first-child { font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .8px; }
.req { color: var(--true-red); font-weight: 600; }
.la-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.la-form { border: 1px solid var(--line-2); background: #fff; padding: clamp(22px, 3.5vw, 40px); }
.la-form .form-section { display: flex; align-items: baseline; gap: 14px; font-size: 1rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink); margin: 34px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.la-form .form-section:first-of-type { margin-top: 0; }
.la-form .form-section span { font-size: .72rem; letter-spacing: 1.4px; color: var(--red); }
.la-consent { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 16px 18px; background: var(--bg-2);
  border: 1px solid var(--line-2); font-size: .88rem; color: var(--ink-2); line-height: 1.55; cursor: pointer; }
.la-consent input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--red); }
.la-form input[readonly] { background: var(--bg-3); color: var(--ink-2); }
.la-submit { width: 100%; justify-content: center; margin-top: 6px; }
.la-note { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.la-note svg { width: 15px; height: 15px; flex: none; }
.la-aside { position: sticky; top: 24px; display: grid; gap: 16px; }
.la-box { border: 1px solid var(--line-2); background: #fff; padding: 20px 22px; }
.la-box h3 { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.la-box ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--ink-2); }
.la-box li { margin-bottom: 5px; }
.la-box p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.65; }
@media (max-width: 991px) {
  .la-grid { grid-template-columns: 1fr; }
  .la-aside { position: static; }
  .la-head-meta { text-align: left; }
}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.site-footer { background: #0b1a3c; color: rgba(255,255,255,.82); padding: 46px 0 0; }
.footer-basic { display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; padding-bottom: 34px; }
/* the dark footer uses the light variant of the logo (white lettering) */
.footer-logo { display: inline-block; }
.footer-logo img { height: 62px; width: auto; display: block; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.footer-links a { color: rgba(255,255,255,.88); font-size: .9rem; }
.footer-links a:hover { color: #fff; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .88rem; }
.footer-meta a { color: rgba(255,255,255,.82); }
.footer-meta a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.22); padding: 18px 0; text-align: center;
  color: rgba(255,255,255,.72); font-size: .82rem; }
@media (max-width: 900px) { .footer-logo img { height: 50px; } }

/* ============================================================
   INVENTORY toolbar
   ============================================================ */
.filter-bar { background: #fff; border: 1px solid var(--line-2); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 32px; }
.fb-group { display: flex; flex-direction: column; gap: 6px; }
.filter-bar label { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted-2); font-weight: 600; }
.select-x, .input-x { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); padding: 11px 14px; font-family: var(--ff-body); font-size: .9rem; min-width: 160px; border-radius: 0; }
.select-x:focus, .input-x:focus { outline: 0; border-color: var(--red); }
.result-count { color: var(--muted); font-size: .88rem; text-transform: uppercase; letter-spacing: 1px; }
.result-count b { color: var(--red); }
.chip-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { padding: 10px 16px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-family: var(--ff-head); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all .2s var(--ease); border-radius: 0; }
.chip-btn:hover { border-color: var(--red); color: var(--red); }
.chip-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

/* custom dropdown (replaces native select look) */
.cselect { position: relative; min-width: 168px; }
.cselect-btn { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink);
  padding: 11px 14px; font-family: var(--ff-body); font-size: .9rem; display: flex; align-items: center;
  justify-content: flex-start; gap: 10px; cursor: pointer; text-align: left; }
.cselect-btn .cs-arrow { width: 15px; height: 15px; color: var(--muted); transition: transform .2s var(--ease); flex: none; }
.cselect-btn:hover, .cselect.open .cselect-btn { border-color: var(--red); }
.cselect.open .cs-arrow { transform: rotate(180deg); color: var(--red); }
.cselect-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line-2); max-height: 300px; overflow-y: auto;
  z-index: 70; box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); display: none; }
.cselect.open .cselect-list { display: block; }
.cselect-opt { padding: 11px 15px; font-size: .9rem; color: var(--ink-2); cursor: pointer; border-left: 3px solid transparent; }
.cselect-opt:hover { background: var(--bg-2); color: var(--red); border-left-color: var(--red); }
.cselect-opt.sel { color: var(--red); font-weight: 600; }

/* mobile "Filters" toggle */
.filters-toggle { display: none; width: 100%; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; border: 0; padding: 14px; cursor: pointer; margin-bottom: 16px;
  font-family: var(--ff-head); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; font-size: .92rem; }
.filters-toggle svg { width: 18px; height: 18px; }
.filters-toggle .ft-caret { transition: transform .2s var(--ease); }
.filters-toggle.open .ft-caret { transform: rotate(180deg); }

/* ============================================================
   VEHICLE DETAIL
   ============================================================ */
.vd-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.vd-title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.vd-top-price { text-align: right; flex: none; }
.vd-top-price .vd-price { line-height: 1; }
.vd-top-price small { display: block; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; margin-top: 6px; }
.vd-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start; margin-top: 26px; }
.vd-cta-row > * { flex: 0 0 auto; padding: 11px 20px; font-size: .8rem; }
.vd-cta-row svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .vd-top-price { text-align: left; } }

/* vehicle detail two-column grid (no Bootstrap negative-margin overflow) */
.vd-row { display: grid; grid-template-columns: 1.42fr 1fr; gap: clamp(26px, 3.5vw, 48px); align-items: start; }
/* A grid track will not shrink below its content's minimum unless the item says
   it may. The thumbnail strip is a wide scroller, so without this the gallery
   column forces the whole page wider than the phone and it pans sideways. */
.vd-row > * { min-width: 0; }
/* The top row: the enquiry card is made to end level with the gallery beside
/* The top row: the gallery and the enquiry card end on the same line.
   Squeezing the form into the gallery's height was the wrong way round — it
   crushed the message box against the button. Instead the form keeps its
   natural height and the main photo grows to fill whatever the column has
   left, which also gives the picture more room. Below the stacking
   breakpoint neither applies. */
@media (min-width: 993px) {
  .vd-row-top { align-items: stretch; }
  .vd-row-top .vd-c7 { display: flex; flex-direction: column; }
  .vd-row-top .vd-main { flex: 1; aspect-ratio: auto; min-height: 320px; }
}
.vd-row + .vd-row { margin-top: 44px; }
@media (max-width: 992px) { .vd-row { grid-template-columns: 1fr; gap: 32px; } }

.vd-gallery { position: sticky; top: 90px; }
.vd-main { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--bg-2); border: 1px solid var(--line-2); }
.vd-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.vd-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: rgba(21,23,28,.72); border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease); }
.vd-nav:hover { background: var(--red); }
.vd-nav.prev { left: 0; } .vd-nav.next { right: 0; }
.vd-count { position: absolute; bottom: 0; right: 0; background: rgba(21,23,28,.8); color: #fff; padding: 6px 13px; font-size: .78rem; font-family: var(--ff-head); letter-spacing: 1px; }
/* One scrolling row of thumbnails. Seven fit on a desktop, fewer as the
   screen narrows; on a phone it is a plain swipe. */
.vd-strip { position: relative; margin-top: 12px; }
.vd-thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  /* swiping the strip to its end must not carry on and drag the page with it */
  overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  scrollbar-width: none; -ms-overflow-style: none; }
.vd-thumbs::-webkit-scrollbar { display: none; }
/* min-width:auto is the default on a flex item, and for an image it resolves to
   the picture's own width — which overrides flex-basis and blows each thumbnail
   up to the full strip. Pinning it to 0 lets the basis actually apply. */
.vd-thumbs img { flex: 0 0 calc((100% - 6 * 8px) / 7); min-width: 0; scroll-snap-align: start;
  aspect-ratio: 3/2; object-fit: cover; cursor: pointer; opacity: .5;
  border: 2px solid transparent; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.vd-thumbs img:hover { opacity: .85; }
.vd-thumbs img.active { opacity: 1; border-color: var(--red); }

.strip-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border: 0; background: rgba(21,23,28,.78); color: #fff;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: opacity .2s var(--ease), background .2s var(--ease); }
.strip-nav:hover { background: var(--red); }
.strip-nav svg { width: 17px; height: 17px; }
.strip-nav.prev { left: 0; } .strip-nav.next { right: 0; }
.strip-nav.is-off { opacity: 0; pointer-events: none; }
.strip-nav[hidden] { display: none; }
/* on a touch screen the strip is swiped, so the arrows only get in the way */
@media (hover: none) { .strip-nav { display: none; } }
@media (max-width: 992px) { .vd-thumbs img { flex-basis: calc((100% - 5 * 8px) / 6); } }
@media (max-width: 700px)  { .vd-thumbs img { flex-basis: calc((100% - 3 * 8px) / 4); } }
@media (max-width: 460px)  { .vd-thumbs img { flex-basis: calc((100% - 2 * 8px) / 3); } }
.vd-price-box { position: relative; background: var(--ink); padding: 18px 44px 20px; text-align: center;
  flex: none; align-self: center; overflow: hidden; }
.vd-price-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.vd-price-box .lbl { display: block; font-family: var(--ff-body); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.vd-price { font-family: var(--ff-head); font-size: 2.3rem; font-weight: 600; color: #fff; line-height: 1; }
.vd-was { font-family: var(--ff-body); font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.45);
  text-decoration: line-through; line-height: 1.2; margin-bottom: 3px; }
.vd-save { display: inline-block; margin-top: 9px; padding: 3px 10px; background: var(--red); color: #fff;
  font-family: var(--ff-body); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
.vd-spec-title { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--red); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 12px 0; font-size: .92rem; }
.spec-table td:first-child { color: var(--muted); width: 45%; text-transform: uppercase; letter-spacing: .5px; font-size: .82rem; }
.spec-table td:last-child { color: var(--ink); font-weight: 600; text-align: right; font-family: var(--ff-head); letter-spacing: .3px; }
.spec-table svg { width: 15px; height: 15px; color: var(--red); vertical-align: -2px; margin-right: 8px; }
.spec-sub { display: block; font-family: var(--ff-body); font-weight: 500; font-size: .72rem; color: var(--muted-2);
  text-transform: none; letter-spacing: 0; margin-top: 3px; }

.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(12,13,16,.95); display: none; place-items: center; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 84vh; }
.lb-close { position: absolute; top: 20px; right: 26px; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 0; color: #fff; width: 54px; height: 54px; cursor: pointer; font-size: 1.4rem; }
.lb-nav:hover { background: var(--red); } .lb-nav.prev { left: 24px; } .lb-nav.next { right: 24px; }

/* ============================================================
   PROSE / ACCORDION / STEPS / FORMS
   ============================================================ */
.prose { max-width: 780px; }
.prose p { color: var(--ink-2); margin-bottom: 18px; }
.prose h2 { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .5px; margin: 36px 0 14px; }
.prose h3 { font-size: 1.2rem; text-transform: uppercase; margin: 26px 0 12px; color: var(--red); }
.prose ul { padding: 0; list-style: none; margin: 0 0 22px; display: grid; gap: 11px; }
.prose ul li { display: flex; gap: 12px; color: var(--ink-2); }
.prose ul li::before { content: ""; width: 8px; height: 8px; background: var(--red); margin-top: 9px; flex: none; }

.acc-item { border: 1px solid var(--line-2); margin-bottom: 12px; background: #fff; transition: border-color .2s var(--ease); }
.acc-item.open { border-color: var(--red); }
.acc-head { width: 100%; text-align: left; background: none; border: 0; padding: 20px 24px; color: var(--ink); font-family: var(--ff-head); font-size: 1.06rem; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.acc-head .plus { width: 28px; height: 28px; border: 1px solid var(--red); display: grid; place-items: center; flex: none; position: relative; transition: all .25s var(--ease); }
.acc-head .plus::before, .acc-head .plus::after { content: ""; position: absolute; background: var(--red); }
.acc-head .plus::before { width: 12px; height: 2px; } .acc-head .plus::after { width: 2px; height: 12px; transition: transform .25s var(--ease); }
.acc-item.open .plus { background: var(--red); } .acc-item.open .plus::before, .acc-item.open .plus::after { background: #fff; }
.acc-item.open .plus::after { transform: rotate(90deg) scaleX(0); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc-body-inner { padding: 0 24px 22px; color: var(--muted); font-size: .95rem; }
.acc-body-inner a { text-decoration: underline; }

.steps { display: grid; gap: 0; border: 1px solid var(--line-2); }
.step { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: 26px 28px; border-bottom: 1px solid var(--line); background: #fff; transition: background .2s var(--ease); }
.step:last-child { border-bottom: 0; }
.step:hover { background: var(--bg-2); }
.step-num { counter-increment: step; width: 50px; height: 50px; background: var(--red); display: grid; place-items: center; font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600; color: #fff; }
.steps { counter-reset: step; }
.step-num::before { content: "0" counter(step); }
.step h3 { margin: 2px 0 8px; font-size: 1.14rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.step p { color: var(--muted); margin: 0; font-size: .92rem; }

.form-card { background: #fff; border: 1px solid var(--line-2); padding: clamp(26px, 4vw, 42px); }
.form-section { font-family: var(--ff-head); font-weight: 600; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink); margin: 30px 0 16px; padding-bottom: 9px; border-bottom: 2px solid var(--red); }
.form-section:first-of-type { margin-top: 0; }
.seg-toggle { display: inline-flex; max-width: 100%; border: 1px solid var(--line-2); margin-bottom: 20px; }
.seg-btn { padding: 12px clamp(14px, 5vw, 30px); min-width: 0; background: #fff; border: 0; border-right: 1px solid var(--line-2); cursor: pointer;
  font-family: var(--ff-head); font-weight: 500; font-size: .86rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease); }
.seg-btn:last-child { border-right: 0; }
.seg-btn.active { background: var(--red); color: #fff; }
.applicant-panel { animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f646d' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 38px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); padding: 13px 15px; font-family: var(--ff-body); font-size: .94rem; border-radius: 0; transition: border-color .2s var(--ease); }
/* phone field with fixed +1 prefix chip */
.phone-wrap { display: flex; align-items: stretch; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.phone-wrap:focus-within { border-color: var(--red); background: #fff; }
.phone-prefix { display: inline-flex; align-items: center; padding: 0 16px; background: var(--bg-3);
  border: 0; border-right: 1px solid var(--line-2);
  color: var(--ink-2); font-family: var(--ff-body); font-size: .94rem; font-weight: 600; white-space: nowrap; }
/* the frame belongs to the wrapper now, so the input inside carries none */
.phone-wrap input,
.phone-wrap input:focus { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--red); background: #fff; }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { color: var(--muted-2); font-size: .8rem; margin-top: 8px; }
.form-success { display: none; text-align: center; padding: 20px; }
.form-success.show { display: block; }
.form-success svg { width: 52px; height: 52px; color: var(--red); margin-bottom: 14px; }

.map-wrap { overflow: hidden; border: 1px solid var(--line-2); }
.map-wrap iframe { width: 100%; height: 420px; display: block; border: 0; }
.map-wrap.fill { height: 100%; }
.map-wrap.fill iframe { height: 100%; min-height: 380px; }
@media (max-width: 700px) { .map-wrap iframe, .map-wrap.fill iframe { height: 320px; min-height: 0; } }

/* contact tiles (uniform) */
.contact-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ct-tile { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line-2); padding: 20px; background: #fff; }
.ct-tile .value-ic { margin: 0; width: 44px; height: 44px; flex: none; }
.ct-tile .value-ic svg { width: 20px; height: 20px; }
.ct-tile h4 { font-family: var(--ff-head); text-transform: uppercase; letter-spacing: .5px; font-size: .92rem; margin: 0 0 3px; color: var(--ink); }
.ct-tile span, .ct-tile p { color: var(--muted); font-size: .84rem; margin: 0; }
.ct-tile a { color: var(--red); font-weight: 600; font-size: .84rem; word-break: break-word; }
@media (max-width: 820px) { .contact-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .contact-tiles { grid-template-columns: 1fr; } }

/* reveal */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }
.reveal-up.d1 { transition-delay: .07s; } .reveal-up.d2 { transition-delay: .14s; }
.reveal-up.d3 { transition-delay: .21s; } .reveal-up.d4 { transition-delay: .28s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .split, .split.rev { grid-template-columns: 1fr; }
  .split.rev .split-media { order: -1; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band > div:nth-child(3) { border-left: 0; }
  .vd-gallery { position: static; }
}

@media (max-width: 900px) {
  /* phone header: logo on its own line, four tiles, then a full-width search */
  .hdr-top { display: flex; flex-wrap: wrap; align-items: center; height: auto;
    padding: 14px 16px 16px; gap: 10px; }
  .hdr-nav, .hdr-mobile-phone { display: none; }
  .hdr-logo { order: 1; flex: 1 1 100%; text-align: center; }
  .hdr-logo img { height: 50px; margin: 0 auto; }
  /* the three links become direct children of the header row, so all four
     tiles are laid out by the same flex and end up exactly the same width */
  .hdr-actions { display: contents; }
  .hdr-actions a { order: 2; flex: 1 1 0; }
  .hdr-actions a:last-child { border-right: 1px solid var(--line-2); }
  /* a phone screen is short; a pinned header would eat a third of it */
  .site-header { position: static; }
  /* the slide-out menu covers the page, so the search results have to sit
     above it — otherwise typing with the menu open looks like nothing happens */
  .hdr-results { z-index: 1000; }
  .hdr-actions a { flex-direction: column; gap: 7px; padding: 13px 4px;
    border: 1px solid var(--line-2); border-right: 1px solid var(--line-2); border-radius: var(--r);
    font-size: .66rem; letter-spacing: .4px; text-transform: uppercase; text-align: center;
    line-height: 1.15; white-space: normal; }
  .hdr-actions svg { width: 22px; height: 22px; }
  /* one word per tile, so none of them wraps onto a second line */
  .hdr-actions .a-long { display: none; }
  .hdr-actions .a-short { display: inline; }
  .nav-toggle { order: 3; flex: 1 1 0; width: auto; height: auto; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 4px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; }
  .nt-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .4px;
    font-weight: 600; color: var(--ink-2); }
  .hdr-search { order: 4; flex: 1 1 100%; width: 100%; }
  .nav-toggle { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .vd-thumbs { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 640px) {
  .filters-toggle { display: flex; }
  .filter-bar { display: none; flex-direction: column; align-items: stretch; }
  .filter-bar.open { display: flex; }
  .fb-group { width: 100%; }
  .select-x, .input-x, .cselect { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .inventory-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .vd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(1.3rem, 6.6vw, 1.9rem); letter-spacing: .5px; margin-bottom: 16px; }
  .hero-panel { padding: 0 64px; }
  .hero-btn { padding: 12px 22px; font-size: .86rem; }
  .hero-arrow { width: 44px; height: 44px; }
  /* vehicle detail: title then full-width price banner, stacked buttons */
  .vd-top { flex-direction: column; align-items: stretch; }
  .vd-price-box { align-self: stretch; padding: 16px 24px; }
  .vd-cta-row { flex-direction: column; }
  .vd-cta-row > * { width: 100%; flex: none; }
  /* the actions move above the enquiry card, so the spacing flips sides —
     and the gap under them matches the grid gap that sits above them */
  #vdInquire .vd-cta-row { margin: 0 0 32px; }
  /* and the shipping estimate lands under the specification table */
  .vd-specs .vd-ship { width: 100%; margin-top: 20px; padding: 11px 20px; font-size: .8rem; }
  .vd-specs .vd-ship svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   SOFT CORNERS — one small radius, applied to the components
   that read as panels, controls or media. Anything flush to a
   container edge (corner badges, ribbons) is left square.
   ============================================================ */
.car-card, .form-card, .info-card, .value-card,
.type-card, .cat-card, .make-tile, .ct-tile, .acc-item, .filter-bar,
.select-x, .input-x, .cselect-btn, .cselect-list,
.field input, .field select, .field textarea,
.hdr-drop, .hdr-results, .sr-item img, .thumb,
.vd-main, .vd-thumbs img, .vd-price-box, .vd-nav, .strip-nav,
.ship-calc, .ship-input, .ship-list, .ship-total, .ship-modal-card,
.split-media, .map-wrap, .map-wrap iframe,
.step-num, .spark, .lb-img,
.price-pen, .pill-nav a { border-radius: var(--r); }

/* the media sits inside a rounded card, so the card must clip it */
.car-card, .cat-card, .type-card, .split-media, .vd-main, .map-wrap { overflow: hidden; }

/* anything you press is fully rounded, like the header pill and the hero button */
.btn-gold, .btn-outline-gold, .btn-ghost, .btn-dark, .btn-sm-x,
.btn-outline-accent, .btn-red,
.car-btn, .chip-btn, .seg-toggle { border-radius: var(--r-btn); }
/* the segments share one pill, so the wrapper clips their square corners */
.seg-toggle { overflow: hidden; }
/* icon-only arrows over a photo become round, matching the review arrows */
.vd-nav, .strip-nav { border-radius: 50%; }
.vd-nav.prev { left: 12px; } .vd-nav.next { right: 12px; }
.strip-nav.prev { left: 6px; } .strip-nav.next { right: 6px; }
@media (max-width: 560px) {
  .why-stats { grid-template-columns: minmax(0, 1fr); }
  .ws-txt b { white-space: normal; }
  .ws::before { display: none; }
  .ws + .ws { border-top: 1px solid rgba(255,255,255,.18); }
}