/* =====================================================================
   Lesmot Equipment — White / Green editorial theme
   Squared corners (no border-radius), bordered header, green accents.
   ===================================================================== */

/* ---------- 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:       #002f9e;   /* brand blue (logo) */
  --red-dark:  #001f73;
  --red-soft:  #e6ebf7;
  --gold:      #fdc701;   /* brand yellow (logo) */

  --footer-bg: #16181d;

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

  --header-h: 88px;
  --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 {
  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-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; border-bottom: 1px solid var(--line-2);
}
.hdr { display: flex; align-items: stretch; height: var(--header-h); }
/* 7 equal, divided cells so the logo sits exactly in the centre */
.hdr-cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 12px; position: relative; border-right: 1px solid var(--line); }
.hdr-cell:last-of-type { border-right: 0; }
.hdr-logo { flex: 1 1 0; padding: 0 16px; border-right: 1px solid var(--line); }
.hdr-logo img { height: 66px; width: auto; }

.hdr-icons { gap: 12px; }
.hdr-ic {
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink);
  transition: color .2s var(--ease);
}
.hdr-ic:hover { color: var(--red); }
.hdr-ic svg { width: 18px; height: 18px; }

.hdr-link {
  font-family: var(--ff-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.3px; font-size: .98rem; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; height: 100%; white-space: nowrap;
}
.hdr-cell > .hdr-link { padding: 0; }
.hdr-link:hover, .hdr-link.active { color: var(--red); }
.hdr-link .caret { width: 11px; height: 11px; opacity: .7; transition: transform .25s var(--ease); }
.hdr-cell.has-drop:hover .caret { transform: rotate(180deg); }
.hdr-cell.has-drop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--red); transform: scaleX(0); transition: transform .25s var(--ease);
}
.hdr-cell.has-drop:hover::after, .hdr-cell.active-cell::after { transform: scaleX(1); }
.hdr-cell.nav-cell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--red); transform: scaleX(0); transition: transform .25s var(--ease);
}
.hdr-cell.nav-cell:hover::after, .hdr-cell.active-cell::after { transform: scaleX(1); }

/* dropdown */
.hdr-drop {
  position: absolute; top: 100%; left: -1px; min-width: 250px; background: #fff;
  border: 1px solid var(--line-2); border-top: 3px solid var(--red);
  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 inline search */
.hdr-search { flex: 1 1 0; justify-content: flex-start; gap: 10px; padding-left: 18px; }
.hdr-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.hdr-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-family: var(--ff-body); font-size: .9rem; color: var(--ink);
}
.hdr-search input::placeholder { color: var(--muted-2); }

/* header search results dropdown */
.hdr-results {
  position: absolute; top: 100%; right: 0; width: min(460px, 92vw); background: #fff;
  border: 1px solid var(--line-2); border-top: 3px solid var(--red);
  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; }
.sr-head { padding: 10px 16px; font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--muted-2); background: var(--bg-2); border-bottom: 1px solid var(--line); }

/* 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 span { display: block; width: 22px; height: 2px; background: var(--ink); transition: .28s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 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); }
.mobile-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); margin: 16px 6% 8px; padding: 12px 16px; }
.mobile-search svg { width: 18px; height: 18px; color: var(--muted); }
.mobile-search input { border: 0; outline: 0; width: 100%; font-size: 1rem; }
.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-link-hl { color: var(--red); border-left: 4px solid var(--red); padding-left: calc(6% - 4px); }
.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 6%; }
.m-actions a { justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: clamp(520px, 76vh, 720px); display: flex; align-items: center; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-slide.active { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(12,13,16,.86) 0%, rgba(12,13,16,.6) 34%, rgba(12,13,16,.08) 66%, rgba(12,13,16,.2) 100%); }
.hero-content { position: relative; z-index: 2; width: min(1320px, 92%); margin-inline: auto; }
.hero-eyebrow { color: #fff; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: 3px; margin-bottom: 22px; }
.hero-eyebrow::before { content: ""; width: 40px; height: 2px; background: #fff; }
.hero-title { font-family: var(--ff-head); font-weight: 500; text-transform: uppercase; color: #fff;
  font-size: clamp(2.3rem, 5.6vw, 4.5rem); line-height: 1.02; letter-spacing: 3px; margin: 0 0 20px; max-width: 18ch; }
.hero-title .accent { color: #fff; }
.hero-sub { color: #d9dbe0; font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 46ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-arrows { position: absolute; bottom: 34px; right: max(4%, 24px); z-index: 3; display: flex; gap: 8px; }
.hero-arrows button { width: 52px; height: 46px; background: var(--red); border: 0; color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .2s var(--ease); }
.hero-arrows button:hover { background: var(--red-dark); }
.hero-arrows svg { width: 20px; height: 20px; }

/* page hero (interior) */
.page-hero { position: relative; padding: 74px 0; text-align: center; border-bottom: 1px solid var(--line-2); overflow: hidden; background: var(--ink); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .5; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,20,24,.5), rgba(18,20,24,.66)); }
.page-hero .container-x { position: relative; z-index: 2; }
.page-hero .eyebrow { color: #fff; } .page-hero .eyebrow::before, .page-hero .eyebrow.center::after { background: #fff; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; color: #fff; margin: 4px 0 14px; letter-spacing: 1px; }
.page-hero h1 .accent { color: #fff; }
.breadcrumb-x { display: flex; gap: 8px; justify-content: center; color: #b9bcc2; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
.breadcrumb-x a { color: #d7d9dd; } .breadcrumb-x a:hover { color: var(--red); } .breadcrumb-x span { color: var(--red); }

/* ============================================================
   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(--gold); color: var(--ink); }
.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-body { padding: 18px 18px 20px; }
.car-name { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 6px; font-weight: 600; line-height: 1.15; }
.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; min-height: 2.6em; }
.car-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.spec-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .71rem; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); padding: 5px 8px; }
.spec-chip svg { width: 12px; height: 12px; color: var(--red); }
.car-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.car-price { font-family: var(--ff-head); font-size: 1.32rem; font-weight: 600; color: var(--red); }
.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 { 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; }
.car-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--ff-head); font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px; font-size: .82rem; }
.car-cta svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.car-card:hover .car-cta { color: var(--red); }
.car-card:hover .car-cta svg { transform: translateX(4px); }

/* ---------- 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); padding: 14px 20px; }
.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-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: #fff; border: 1px solid var(--line-2); padding: 26px; display: flex; flex-direction: column; }
.review-card:hover { border-color: var(--red); }
.rc-stars { color: #fbbc04; font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 14px; }
.rc-text { color: var(--ink-2); font-size: .93rem; line-height: 1.62; margin: 0 0 20px; flex: 1; }
.rc-foot { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.rc-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-family: var(--ff-head); font-weight: 600; font-size: 1.1rem; flex: none; }
.rc-name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.rc-src { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .76rem; margin-top: 1px; }
.g-mini { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff; font-size: .6rem; font-weight: 700; font-family: var(--ff-body); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- 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-subhead { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.browse-subhead h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 1.02rem; color: var(--ink); white-space: nowrap; }
.browse-subhead::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* type cards — real machine photos */
.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); 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(-4px); box-shadow: 0 20px 40px -28px rgba(0,0,0,.5); }
.type-thumb { height: 180px; background: linear-gradient(180deg, #fbfbfb, #eef0f5); display: grid; place-items: center; padding: 16px; }
.type-thumb img { max-width: 100%; max-height: 148px; object-fit: contain; transition: transform .35s var(--ease); }
.type-card:hover .type-thumb img { transform: scale(1.06); }
.type-card span { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ff-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; font-size: 1.02rem; color: var(--ink); padding: 16px 10px; border-top: 1px solid var(--line);
  transition: color .2s var(--ease); }
.type-card:hover span { color: var(--red); }

/* make/brand tiles — official logos */
.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); height: 128px; display: grid; place-items: center; padding: 24px;
  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,.5); }
.make-tile img { max-width: 100%; max-height: 76px; object-fit: contain; transition: transform .3s var(--ease); }
.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; }

/* 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; }

/* 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); border-top: 3px solid var(--red); 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; border-top: 3px solid var(--red); }
.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; } }

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.site-footer { position: relative; overflow: hidden; background: var(--footer-bg); color: #c3c6cc; padding-top: 66px; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16;
  background: url("../assets/img/footer-mountain.webp") right bottom / auto 78% no-repeat;
  /* the artwork is a black silhouette on transparent — invert it to read on the dark footer */
  filter: invert(1);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 70%); }
.site-footer > .container-x { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .site-footer::before { opacity: .15;
    background: url("../assets/img/footer-mountain.webp") center bottom / 155% auto no-repeat;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(0deg, #000 0%, transparent 62%); }
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 42px; }
.footer-brand img { height: 62px; width: auto; margin-bottom: 22px; }
.footer-brand p { color: #9a9ea6; font-size: .9rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--ff-head); font-size: .82rem; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin: 0 0 20px; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a { color: #9a9ea6; font-size: .9rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 11px; color: #9a9ea6; font-size: .9rem; margin-bottom: 13px; }
.footer-contact svg { width: 17px; height: 17px; color: #fff; flex: none; margin-top: 3px; }
.footer-contact a { color: #9a9ea6; }
.footer-socials { display: flex; gap: 10px; margin-top: 22px; }
.footer-socials a { width: 40px; height: 40px; border: 1px solid #34373e; display: grid; place-items: center; color: #9a9ea6; }
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-socials svg { width: 17px; height: 17px; }
.footer-bottom { margin-top: 54px; border-top: 1px solid #2a2d34; padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #74777e; font-size: .82rem; }
.footer-bottom a { color: #74777e; } .footer-bottom a:hover { color: #fff; }

/* ============================================================
   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); border-top: 3px solid var(--red); 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-start; 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 a { flex: 0 0 auto; padding: 11px 20px; font-size: .8rem; }
.vd-cta-row a 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: 32px; height: 46px; border: 0; background: rgba(21,23,28,.78); color: #fff;
  display: grid; place-items: center; cursor: pointer; 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; border: 1px solid var(--line-2); margin-bottom: 20px; }
.seg-btn { padding: 12px 30px; 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; }
.phone-prefix { display: inline-flex; align-items: center; padding: 0 14px; background: var(--bg-3); border: 1px solid var(--line-2); border-right: 0;
  color: var(--ink-2); font-family: var(--ff-body); font-size: .94rem; font-weight: 600; white-space: nowrap; }
.phone-wrap input { flex: 1; min-width: 0; border-left: 0; }
.phone-wrap input:focus { border-left: 0; }
.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) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .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) {
  .hdr { justify-content: space-between; }
  .hdr-cell.hdr-icons, .hdr-cell.nav-cell, .hdr-cell.has-drop, .hdr-cell.hdr-search { display: none; }
  .hdr-logo { flex: 1; border-right: 0; justify-content: flex-start; padding-left: 6%; }
  .hdr-mobile-phone { display: grid; place-items: center; width: 58px; border-left: 1px solid var(--line); color: var(--ink); }
  .hdr-mobile-phone svg { width: 19px; height: 19px; }
  .hdr-mobile-phone:hover { color: var(--red); }
  .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; }
  .footer-grid { grid-template-columns: 1fr; }
  .vd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(1.9rem, 9.4vw, 2.6rem); letter-spacing: 2px; }
  .hero-eyebrow { font-size: .66rem; letter-spacing: 1.4px; gap: 9px; margin-bottom: 16px; }
  .hero-eyebrow::before { width: 24px; }
  /* on the narrowest phones the rule is what pushes the line over; drop it
     rather than let "OWNED" fall onto a row of its own */
  @media (max-width: 370px) {
    .hero-eyebrow::before { display: none; }
    .hero-eyebrow { letter-spacing: 1.1px; }
  }
  /* leave room under the buttons for the arrows instead of crowding them */
  .hero { padding: 34px 0 92px; }
  .hero-arrows { bottom: 24px; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  /* hero buttons: stack full-width, no wrapping */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions a { width: 100%; white-space: nowrap; padding: 15px 20px; }
  /* 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 a { width: 100%; flex: none; }
}

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