/* ================================================================
   Elkhorn Motor Company — Public Site  (v2 redesign)
   Design system:
     - Warm paper background (#F4F1EA) with near-black ink
     - Electric COBALT (#2348FF) as the single hot accent
     - Soft, rounded "bento" surfaces with hairline borders + soft shadow
     - American-muscle confidence: huge Space Grotesk display, bold caps
     - Space Grotesk (display) / Hanken Grotesk (body) / JetBrains Mono (data)
   Class + CSS-variable names are unchanged from v1 so every Flask
   template and JS hook keeps working; only the look is rebuilt.
   ================================================================ */

/* Fonts are loaded via <link> in base.html — see the note there. */

:root {
  --bg:#F6F5F9; --bg-2:#EBE9F2; --surface:#FFFFFF; --surface-2:#FAF9FC;
  --fg:#171528; --fg-2:#4E4A66; --accent:#3B3184; --accent-2:#2C2467; --accent-soft:#E7E4F4;
  --flag:#8A3F6B; --border:#DEDBE9; --border-2:#BFBAD4; --muted:#5F5B76;
  --r:8px; --r-sm:6px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(23,21,40,.06); --shadow:0 3px 10px rgba(23,21,40,.09); --shadow-lg:0 10px 28px rgba(23,21,40,.13);
  --ink:#171528; --ink-2:#FFFFFF; --ink-3:#EBE9F2; --bone:#171528; --bone-2:#4E4A66;
  --brass:#3B3184; --brass-2:#2C2467; --oxblood:#8A3F6B; --paper:#F6F5F9; --paper-2:#EBE9F2;
  --card:#FFFFFF; --line:#E6E3EF; --line-strong:#CDC8DE; --ink-soft:#4E4A66; --fg-3:#5F5B76;
  --plum:#3B3184; --plum-2:#2C2467; --navy:#171528; --navy-2:#28234A; --gold:#8A3F6B; --flag-soft:#F6E9F1;
  --font-disp:'Sora',system-ui,sans-serif; --font-body:'Rubik',system-ui,sans-serif; --font-mono:'Martian Mono',Menlo,monospace;
  --maxw:1200px; --gutter:clamp(18px,3.5vw,42px);
}

/* ─── Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  /* Warm paper base + a barely-there fractal grain so flat areas read like
     stock rather than a sterile flat fill. White surfaces sit on top and hide
     it, so only the paper gutters carry texture. */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: #fff; }

/* ─── Image protection ──────────────────────────────────────────── */
img,
.det-gallery img,
.inv-card-img img,
.feat-card-img img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-drag: none;
}

/* ─── Layout primitives ─────────────────────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: clamp(54px, 8vw, 104px) 0; }
.section--alt { background: var(--surface); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #D5DCFF;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.section-title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 62px);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--fg);
}
.section-title small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
  margin-top: 16px;
  max-width: 60ch;
  line-height: 1.6;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--accent-2), 0 10px 22px -12px rgba(35,72,255,.7);
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 4px 0 #1430b8, 0 16px 30px -12px rgba(35,72,255,.8); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 0 var(--accent-2); }
.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: var(--fg); color: #fff; border-color: var(--fg); box-shadow: var(--shadow); }
.btn--dark { background: var(--fg); color: #fff; border-color: var(--fg); box-shadow: var(--shadow-sm); }
.btn--dark:hover { background: #000; border-color: #000; }
.btn--wide { width: 100%; justify-content: center; padding: 16px 26px; }
.btn--sm { padding: 9px 16px; font-size: 11px; }

/* ─── Top bar (logo + nav) ──────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 241, 234, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.brand__dot { color: var(--accent); }
.brand img { max-height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg-2);
  transition: color 0.15s ease;
}
.nav a:hover, .nav a.active { color: var(--accent); }

.topbar__cta { display: inline-flex; align-items: center; gap: 12px; }
.topbar__phone {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.topbar__phone:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  width: 44px; height: 44px;
  padding: 0; position: relative;
  box-shadow: var(--shadow-sm);
}
.nav-toggle::before, .nav-toggle::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  height: 2px; border-radius: 2px;
  background: var(--fg);
}
.nav-toggle::before { top: 16px; }
.nav-toggle::after  { bottom: 16px; }
.nav-toggle::before, .nav-toggle::after, .nav-toggle span {
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span {
  position: absolute;
  left: 11px; right: 11px;
  top: 50%; height: 2px; border-radius: 2px;
  background: var(--fg);
  transform: translateY(-50%);
}
.nav-toggle.is-active::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle.is-active::after  { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
.nav-toggle.is-active span    { opacity: 0; }

@media (max-width: 900px) {
  .topbar__phone { display: none; }
  .nav { gap: 20px; }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav, .topbar__cta { display: none; }
  .nav-drawer.is-open { display: block; }
}
.nav-drawer {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--gutter) 24px;
}
.nav-drawer a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.nav-drawer a:last-child { border-bottom: 0; }
.nav-drawer .btn { margin-top: 16px; color: #fff; }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(460px, 66vh, 660px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(35,72,255,.16), transparent 55%),
    radial-gradient(90% 80% at 6% 110%, rgba(35,72,255,.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Faded source hero image (if any) — kept very subtle in the light theme */
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
  filter: grayscale(1) contrast(1.1);
  z-index: -2;
}
.hero__bg::after { content: none; }
/* Cobalt "blob" + grid art */
.hero::before {
  content: '';
  position: absolute;
  top: -18%; right: -8%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle at 35% 35%, #4f6bff, var(--accent) 55%, var(--accent-2) 100%);
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  filter: blur(2px);
  opacity: 0.92;
  box-shadow: 0 40px 120px -30px rgba(35,72,255,.5);
  z-index: -1;
  animation: blob-float 14s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(21,23,28,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,23,28,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
  z-index: -1;
  pointer-events: none;
}
@keyframes blob-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(26px) rotate(8deg); }
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 90px) 0;
  width: 100%;
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.hero__kicker::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(50px, 8.4vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  max-width: 16ch;
  color: var(--fg);
}
.hero__title span {
  display: block;
  color: var(--accent);
  font-style: normal;
}
/* First heading clause now takes the animated gradient (see .cursor-prox);
   the trailing span still pops solid cobalt. */
.hero__title .cursor-prox { color: transparent; }
.hero__sub {
  margin-top: 24px;
  max-width: 540px;
  font-size: 18px;
  color: var(--fg-2);
  line-height: 1.6;
}
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero pill checklist row */
.hero__pills { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.hero__pill svg { color: var(--accent); flex-shrink: 0; }

/* ─── Featured / inventory cards ────────────────────────────────── */
.feat {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.feat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.feat-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.feat-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 16px;
}
.feat-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.feat-card:hover .feat-card-img img { transform: scale(1.05); }
.feat-card-img img.feat-card-img__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s ease;
}
.feat-card:hover .feat-card-img img.feat-card-img__hover { opacity: 1; }
.feat-card-img__year {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  padding: 5px 12px;
  background: rgba(21,23,28,.62);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
}
.feat-card-img__sold {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.feat-card-img__pending {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-weight: 600;
}
.feat-card__body { padding: 18px 20px 22px; }
.feat-card__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg);
}
.feat-card__specs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.feat-card__specs span {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.feat-card__price {
  margin-top: 18px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 25px;
  color: var(--fg);
  letter-spacing: -0.02em;
}

/* ─── Inventory toolbar ─────────────────────────────────────────── */
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin: 28px 0 36px;
}
.inv-search {
  flex: 1 1 280px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 13px 18px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
}
.inv-search::placeholder { color: var(--muted); }
.inv-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.inv-select {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 13px 18px;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.inv-select:focus { outline: none; border-color: var(--accent); }
.inv-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .inv-toolbar { gap: 10px; }
  .inv-search, .inv-select { flex: 1 1 100%; }
  .inv-toolbar .btn { flex: 1 1 auto; justify-content: center; }
}
.inv-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}

/* ─── Car detail page ───────────────────────────────────────────── */
.det { padding-top: 36px; padding-bottom: 80px; }
.det-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 22px;
}
.det-breadcrumb a { color: var(--accent); }
.det-breadcrumb a:hover { color: var(--fg); }

.det-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

/* ─── Car detail hero header ─────────────────────────────────────────
   Lead photo as a full-width band with the year/title/price overlaid on a
   bottom gradient scrim. Keeps the gallery's #detMainImg/#detPrev/#detNext
   hooks so the existing gallery script still drives it. */
.det-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.det-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.det-hero__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
}
.det-hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: clamp(14px, 2vw, 22px) clamp(16px, 3vw, 28px);
  padding-top: 48px;
  background: linear-gradient(to top, rgba(15,17,21,.82) 0%, rgba(15,17,21,.3) 60%, transparent 100%);
  pointer-events: none;
}
/* Re-enable clicks for the interactive bits inside the scrim. */
.det-hero__scrim .btn,
.det-hero__scrim a { pointer-events: auto; }

.det-hero__meta { min-width: 0; }
/* Title sits on the photo — override the cobalt-gradient fill with solid white
   so it stays legible against any image. */
.det-hero .det-title,
.det-hero .det-title .cursor-prox {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  animation: none;
  font-size: clamp(20px, 2.6vw, 32px);
}
.det-hero .det-year { color: #fff; opacity: .92; font-size: clamp(20px, 2.6vw, 34px); line-height: 1; margin-bottom: 0; }

.det-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.det-hero .det-price { color: #fff; }
.det-hero .det-price small { color: rgba(255,255,255,.7); }
.det-hero__cta { white-space: nowrap; }

/* The hero photo is clickable to open the lightbox. */
.det-hero__img { cursor: zoom-in; }

/* ─── Photo lightbox ─────────────────────────────────────────────── */
.det-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 11, 14, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.det-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
}
.det-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  cursor: zoom-out;
}
.det-lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 30px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.det-lightbox__close:hover { background: rgba(255,255,255,.24); }
.det-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 34px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.det-lightbox__nav:hover { background: rgba(255,255,255,.24); }
.det-lightbox__nav--prev { left: clamp(8px, 2vw, 28px); }
.det-lightbox__nav--next { right: clamp(8px, 2vw, 28px); }
.det-lightbox__count {
  position: absolute;
  bottom: clamp(12px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,.12);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

@media (max-width: 560px) {
  .det-hero { aspect-ratio: 4 / 5; }
  .det-hero__scrim { flex-direction: column; align-items: flex-start; }
  .det-hero__aside { flex-direction: row; align-items: center; gap: 16px; }
}

.det-year {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.82;
  color: var(--accent);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 6px;
}
.det-title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--fg);
}
.det-price {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--fg);
  letter-spacing: -0.03em;
}
.det-price small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.det-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: 24px;
}
@media (max-width: 900px) { .det-cols { grid-template-columns: 1fr; } }

.det-gallery { display: flex; flex-direction: column; gap: 12px; }
.det-gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.det-gallery__main img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--surface-2);
}
.det-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.det-gallery__thumb {
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform .15s ease;
}
.det-gallery__thumb:hover { transform: translateY(-2px); }
.det-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.det-gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.det-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
  box-shadow: var(--shadow);
}
.det-gallery__nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.det-gallery__nav--prev { left: 12px; }
.det-gallery__nav--next { right: 12px; }
.det-gallery__count {
  position: absolute;
  bottom: 12px; right: 12px;
  padding: 5px 12px;
  background: rgba(21,23,28,.7);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  z-index: 2;
}

.det-secondary-cta { margin-top: 12px; }

.det-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}
.det-cta-banner::after {
  content: '';
  position: absolute;
  top: -60%; right: -6%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
  pointer-events: none;
}
.det-cta-banner__text h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #fff;
}
.det-cta-banner__text p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; }
.det-cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.det-cta-banner__actions .btn { background: #fff; color: var(--accent); border-color: #fff; box-shadow: var(--shadow); }
.det-cta-banner__actions .btn:hover { background: var(--fg); color: #fff; border-color: var(--fg); }
.det-cta-banner__actions .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.det-cta-banner__actions .btn--ghost:hover { background: #fff; color: var(--accent); border-color: #fff; }

/* Sticky inquiry bar */
.det-stickybar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 22px;
  padding-right: 100px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  transform: translateY(160%);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}
.det-stickybar.is-visible { transform: translateY(0); }
.det-stickybar__info { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.det-stickybar__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.det-stickybar__price { color: var(--accent); font-weight: 700; white-space: nowrap; font-family: var(--font-disp); }
.det-stickybar__actions { display: flex; gap: 10px; flex-shrink: 0; }

@media (max-width: 560px) {
  .det-cta-banner { padding: 22px; }
  .det-cta-banner__actions { width: 100%; }
  .det-cta-banner__actions .btn { flex: 1; justify-content: center; }
  .det-stickybar { padding: 10px 14px; padding-right: 84px; }
  .det-stickybar__info { flex-direction: column; gap: 0; }
  .det-stickybar__actions .det-stickybar__call { display: none; }
}

.det-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Stick the Specs / Inquire / call-us stack so it travels with you while the
     taller gallery and description scroll past. align-self:start anchors it to
     the top of the grid row rather than stretching the full row height. */
  position: sticky;
  top: 24px;
  align-self: start;
}
/* On narrow screens the columns stack, so sticky would just pin the sidebar
   awkwardly over the gallery — disable it there. */
@media (max-width: 900px) {
  .det-side { position: static; }
}
.det-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.det-card h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.det-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.det-spec { display: flex; flex-direction: column; gap: 4px; }
.det-spec__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.det-spec__value {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.det-form { display: flex; flex-direction: column; gap: 12px; }
.det-form input, .det-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  border-radius: 12px;
}
.det-form input::placeholder, .det-form textarea::placeholder { color: var(--muted); }
.det-form textarea { min-height: 100px; resize: vertical; }
.det-form input:focus, .det-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.det-desc { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--border); }
.det-desc h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.det-desc p { font-size: 16px; line-height: 1.7; color: var(--fg-2); max-width: 720px; }

.det-related { margin-top: 60px; }
.det-related h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ─── Testimonials ──────────────────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.testi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 30px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.testi:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.testi::before {
  content: '"';
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 80px;
  color: var(--accent-soft);
  line-height: 1;
}
.testi__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  margin-bottom: 20px;
  position: relative;
}
.testi__name {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
}
.testi__loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ─── Strip / 3-col splits ──────────────────────────────────────── */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
  background: var(--surface);
}
.strip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.strip-item {
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}
.strip-item h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--fg);
}
.strip-item p { margin: 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; }
@media (max-width: 720px) { .strip-row { grid-template-columns: 1fr; gap: 22px; } }

/* ─── About / split ─────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__img {
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__body p { font-size: 16.5px; line-height: 1.75; color: var(--fg-2); max-width: 540px; }

/* ─── Contact / page intro ──────────────────────────────────────── */
.page-head {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info__item {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.contact-info__item label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-info__item span {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 22px;
  color: var(--fg);
  line-height: 1.2;
}

/* ─── Footer ────────────────────────────────────────────────────── */
.footer {
  background: var(--fg);
  color: #C9CAD0;
  border-top: 1px solid var(--border);
  padding: 44px 0 20px;
}
.footer .brand { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.footer a, .footer p { color: #B7B8BF; font-size: 14px; line-height: 1.6; }
.footer a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8A8B92;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-legal { display: inline-flex; gap: 22px; }
.footer-legal a { color: #8A8B92; }
.footer-legal a:hover { color: var(--accent); }

/* ─── Flash messages ────────────────────────────────────────────── */
.flash {
  position: fixed;
  top: 90px;
  right: var(--gutter);
  z-index: 100;
  padding: 15px 22px;
  border: 1px solid var(--border-2);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
}
.flash--error { border-left-color: var(--red); }

/* ─── Lead modal ────────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(21,23,28,.45);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-bg.is-open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 440px;
  width: 100%;
  padding: 36px 32px;
  position: relative;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  background: var(--bg-2);
  border: 0;
  border-radius: 50%;
  color: var(--fg-2);
  font-size: 20px;
}
.modal__close:hover { background: var(--border-2); }
.modal h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.modal p { color: var(--fg-2); font-size: 14px; margin-bottom: 22px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal input, .modal textarea {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 13px 15px;
  font: inherit;
  color: var(--fg);
  border-radius: 12px;
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ─── Empty states ──────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--fg-2);
  font-size: 15px;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--r);
}
.empty h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 12px;
}

/* ─── Accessibility ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── Sold card styling ─────────────────────────────────────────── */
.feat-card--sold { cursor: default; pointer-events: auto; opacity: 0.95; }
.feat-card--sold:hover { border-color: var(--border); transform: none; box-shadow: var(--shadow-sm); }
.feat-card--sold .feat-card-img img { filter: grayscale(1) brightness(0.92); transition: none; }
.feat-card--sold:hover .feat-card-img img { transform: none; }
.feat-card--sold .feat-card-img::after { content: ''; position: absolute; inset: 0; background: rgba(244,241,234,.25); }
.feat-card--sold .feat-card-img__sold-large {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 64px);
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--red);
  padding: 8px 24px;
  border-radius: var(--r-pill);
  z-index: 3;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: var(--shadow-lg);
}
.feat-card--sold .feat-card__title, .feat-card--sold .feat-card__price { color: var(--muted); }
.feat-card--sold .feat-card__price { text-decoration: line-through; text-decoration-thickness: 1px; }

.sold-section { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--border); }
.sold-section .section-title { color: var(--fg-2); }

/* ─── Scroll reveal ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-stagger > .reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-in > .reveal-item { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > .reveal-item:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.is-in > .reveal-item:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-in > .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > .reveal-item:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.is-in > .reveal-item:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > .reveal-item:nth-child(6) { transition-delay: 0.34s; }
.reveal-stagger.is-in > .reveal-item:nth-child(7) { transition-delay: 0.40s; }
.reveal-stagger.is-in > .reveal-item:nth-child(8) { transition-delay: 0.46s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__kicker  { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both; }
.hero__title   { animation: hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.hero__sub     { animation: hero-rise 0.7s  cubic-bezier(0.22, 1, 0.36, 1) 0.42s both; }
.hero__cta, .hero__pills { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > .reveal-item,
  .hero__kicker, .hero__title, .hero__sub, .hero__cta, .hero__pills, .hero::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Shipping page
   ════════════════════════════════════════════════════════════════ */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--accent-soft);
  border: 1px solid #D5DCFF;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.section-title-underline {
  display: block;
  width: 64px; height: 4px;
  background: var(--accent);
  margin: 24px auto 16px;
  border-radius: 2px;
}

.tx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 900px) { .tx-cards { grid-template-columns: 1fr; } }
.tx-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease;
}
.tx-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tx-card__icon {
  width: 56px; height: 56px;
  background: var(--accent-soft);
  border: 1px solid #D5DCFF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 22px;
}
.tx-card__icon svg { width: 28px; height: 28px; }
.tx-card h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tx-card p { color: var(--fg-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.tx-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.tx-card ul li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 14px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border);
}
.tx-card ul li:last-child { border-bottom: 0; }
.tx-card ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 14px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.tx-card__price {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tx-card__price strong {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: 8px;
  text-transform: none;
}

.compare-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.compare-tbl th, .compare-tbl td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.compare-tbl th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.compare-tbl tbody tr:last-child td { border-bottom: 0; }
.compare-tbl tbody tr:hover td { background: var(--accent-soft); }
.compare-tbl .row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-family: var(--font-disp);
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.compare-tbl .row-label .pop {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.compare-note { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; font-style: italic; }
@media (max-width: 700px) {
  .compare-tbl, .compare-tbl thead, .compare-tbl tbody, .compare-tbl tr, .compare-tbl th, .compare-tbl td { display: block; }
  .compare-tbl thead { display: none; }
  .compare-tbl tr { border-bottom: 1px solid var(--border); padding: 16px 0; }
  .compare-tbl td { padding: 6px 18px; border-bottom: 0; font-size: 13px; }
  .compare-tbl td::before {
    content: attr(data-label) ":  ";
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
}

/* Why-choose-us */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease;
}
.why-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card__icon {
  width: 56px; height: 56px;
  background: var(--accent-soft);
  border: 1px solid #D5DCFF;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 20px;
}
.why-card h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.why-card p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 0; }

/* How-it-works */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; position: relative; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 34px 26px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 16px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 24px;
  box-shadow: 0 8px 18px -8px rgba(35,72,255,.7);
}
.step h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.step p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 0; }

/* CTA bar */
.cta-bar {
  background: var(--fg);
  color: #fff;
  border-radius: var(--r);
  padding: 44px clamp(28px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-bar::before {
  content: '';
  position: absolute;
  top: -50%; right: -8%;
  width: 56%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(35,72,255,.5) 0%, transparent 66%);
  pointer-events: none;
}
.cta-bar__text { position: relative; z-index: 1; }
.cta-bar h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 38px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #fff;
}
.cta-bar p { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; max-width: 480px; }
.cta-bar__actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }

/* Quote form card */
.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 48px);
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.quote-card__pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.quote-card__pills .hero__pill { background: var(--surface-2); }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form .full { grid-column: 1 / -1; }
.quote-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  border-radius: 12px;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
@media (max-width: 600px) { .quote-form { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq { max-width: 880px; margin: 40px auto 0; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--accent); box-shadow: var(--shadow); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div {
  padding: 0 24px 22px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.faq a { color: var(--accent); }

.stars { display: inline-flex; gap: 2px; color: var(--accent); margin-bottom: 14px; letter-spacing: 1px; }

/* ════════════════════════════════════════════════════════════════
   FINANCING PAGE
   ════════════════════════════════════════════════════════════════ */
.hero--fin { min-height: clamp(420px, 56vh, 580px); }
.hero--fin .hero__title { font-size: clamp(44px, 7vw, 96px); }

.fin-stats { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fin-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fin-stat {
  padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 36px);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-stat:first-child { border-left: 0; }
.fin-stat__num {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(42px, 5vw, 62px);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.fin-stat__num span { font-size: 0.42em; font-weight: 600; color: var(--fg-2); margin-left: 4px; letter-spacing: 0; }
.fin-stat__label {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.25;
}
.fin-stat__label small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
}
@media (max-width: 820px) {
  .fin-stats__row { grid-template-columns: 1fr 1fr; }
  .fin-stat:nth-child(odd) { border-left: 0; }
  .fin-stat:nth-child(even) { border-left: 1px solid var(--border); }
  .fin-stat:nth-child(3), .fin-stat:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 460px) {
  .fin-stats__row { grid-template-columns: 1fr; }
  .fin-stat { border-left: 0 !important; border-top: 1px solid var(--border); }
  .fin-stat:first-child { border-top: 0; }
}

/* Payment calculator */
.calc { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 3vw, 44px); margin-top: 48px; align-items: stretch; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }
.calc__controls, .calc__result { min-width: 0; }
.calc__controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: var(--shadow-sm);
}
.calc__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.calc__field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.calc__val { font-family: var(--font-disp); font-weight: 700; font-size: 22px; color: var(--fg); letter-spacing: -0.02em; }
.calc__scale { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
.calc input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill), var(--bg-2) var(--fill), var(--bg-2) 100%);
  outline: none;
  cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-soft); }
.calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: var(--shadow); cursor: pointer; }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--bg-2); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--accent); }

.calc__result {
  background: var(--fg);
  color: #fff;
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  display: flex;
}
.calc__result::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 70%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(35,72,255,.55) 0%, transparent 68%);
  pointer-events: none;
}
.calc__result-inner { position: relative; z-index: 1; width: 100%; align-self: center; }
.calc__result-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #9FB0FF; display: block; margin-bottom: 6px; }
.calc__payment { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-disp); font-weight: 700; color: #fff; line-height: 0.9; letter-spacing: -0.04em; }
.calc__payment #outMonthly { font-size: clamp(46px, 13vw, 92px); }
.calc__currency { font-size: clamp(24px, 6vw, 42px); color: #9FB0FF; }
.calc__per { font-family: var(--font-mono); font-weight: 400; font-size: 16px; letter-spacing: 0.04em; color: #9A9BA3; margin-left: 4px; }
.calc__breakdown { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.calc__brk { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: #C9CAD0; }
.calc__brk span { min-width: 0; }
.calc__brk strong { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: #fff; }
.calc__disclaimer { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #8A8B92; font-style: italic; }

/* Rate / term cards */
.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; align-items: start; }
@media (max-width: 880px) { .rate-cards { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
.rate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow .25s ease;
  position: relative;
}
.rate-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rate-card--feature { border-color: var(--accent); background: linear-gradient(165deg, var(--surface) 0%, var(--accent-soft) 100%); }
@media (min-width: 881px) { .rate-card--feature { transform: scale(1.04); } .rate-card--feature:hover { transform: scale(1.04) translateY(-4px); } }
.rate-card__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.rate-card__term { font-family: var(--font-disp); font-weight: 700; font-size: clamp(52px, 9vw, 64px); line-height: 0.85; color: var(--fg); letter-spacing: -0.04em; }
.rate-card__term small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.rate-card__apr { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin-top: 20px; }
.rate-card__pay { font-family: var(--font-disp); font-weight: 700; font-size: 38px; color: var(--fg); letter-spacing: -0.03em; margin-top: 6px; }
.rate-card__pay span { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.rate-card__list { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 0; }
.rate-card__list li { position: relative; padding: 11px 0 11px 26px; font-size: 14px; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.rate-card__list li:last-child { border-bottom: 0; }
.rate-card__list li::before { content: ''; position: absolute; left: 0; top: 16px; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.rate-card .btn { margin-top: auto; }

/* Requirements list */
.fin-reqs__title { font-family: var(--font-disp); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; margin: 32px 0 14px; color: var(--accent); }
.fin-reqs { list-style: none; padding: 0; margin: 0; }
.fin-reqs li { position: relative; padding: 11px 0 11px 30px; color: var(--fg-2); line-height: 1.5; border-bottom: 1px solid var(--border); }
.fin-reqs li:last-child { border-bottom: 0; }
.fin-reqs li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.fin-form-card { border-radius: var(--r); }
.fin-form-card__sub { color: var(--fg-2); font-size: 13.5px; margin: -8px 0 20px; line-height: 1.5; }
.fin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .fin-form-row { grid-template-columns: 1fr; } }
.fin-form-card__fine { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .rate-card--feature, .rate-card:hover, .rate-card--feature:hover { transform: none; }
}
@media (max-width: 600px) {
  .calc { margin-top: 32px; gap: 18px; }
  .calc__controls { padding: 24px 20px; gap: 24px; }
  .calc__result { padding: 26px 22px; }
  .calc__result-inner { align-self: flex-start; }
  .fin-stat { padding: 24px 20px; }
  .rate-cards { margin-top: 36px; gap: 30px; }
  .rate-card { padding: 30px 24px; }
  .cta-bar { flex-direction: column; align-items: flex-start; }
  .cta-bar__actions { width: 100%; }
  .cta-bar__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (pointer: coarse) {
  .calc input[type="range"] { height: 8px; }
  .calc input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  .calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
}
.calc, .calc__controls, .calc__result, .rate-cards, .rate-card, .fin-stats__row { max-width: 100%; }
.calc__val, .calc__brk strong, .rate-card__pay, .calc__payment { overflow-wrap: anywhere; }

/* ─── Legal pages ───────────────────────────────────────────────── */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 3vw, 30px);
  margin: 48px 0 16px;
  color: var(--fg);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; margin: 28px 0 10px; color: var(--fg); }
.legal p, .legal li { color: var(--fg-2); font-size: 16px; line-height: 1.75; }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 16px 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent); }
.legal a:hover { color: var(--accent-2); }
.legal__updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.legal__note { margin-top: 48px; padding: 18px 22px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--r-sm); font-size: 14px; color: var(--fg-2); }

/* ─── Animated gradient text ────────────────────────────────────────
   Ported from the React Bits <GradientText /> component to pure CSS.
   Applied site-wide to .cursor-prox (every main heading already carries
   that class), replacing the old cursor-proximity letter effect. The fill
   is the brand cobalt family and animates by sliding background-position.
   No JS — text-cursor-proximity.js is retired so the plain heading text
   stays in the DOM for this to paint. */
.cursor-prox {
  display: inline;
  /* High-contrast cobalt sweep: a tight bright highlight band (near-white sky
     blue) rides across deep cobalt so the motion clearly reads. First color is
     repeated at the end so the slide loops seamlessly. */
  background-image: linear-gradient(
    100deg,
    var(--accent-2) 0%,
    var(--accent) 18%,
    #7AA0FF 33%,
    #CFE0FF 42%,
    #FFFFFF 50%,
    #CFE0FF 58%,
    #7AA0FF 67%,
    var(--accent) 82%,
    var(--accent-2) 100%
  );
  background-size: 250% 100%;
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cursor-prox-gradient 9s linear infinite;
}

@keyframes cursor-prox-gradient {
  0%   { background-position: 100% 50%; }
  100% { background-position: -150% 50%; }
}

/* Leftover hooks from the retired letter-split script — harmless if they ever
   appear, kept so nothing breaks if the old script is re-enabled. */
.cursor-prox .cursor-prox__word { display: inline-block; white-space: nowrap; font-style: normal; }
.cursor-prox .cursor-prox__letter { display: inline-block; transform-origin: center; font-style: normal; will-change: transform, color; }
.cursor-prox .cursor-prox__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-prox { animation: none; background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Shipment tracking (public)
   ═══════════════════════════════════════════════════════════════════ */
.pv-track-search { max-width: 640px; margin: 28px auto 0; }
.track-form { display: flex; gap: 12px; }
.track-form input {
  flex: 1; background: var(--surface); border: 1px solid var(--border-2);
  padding: 16px 18px; font: inherit; font-size: 15px; color: var(--fg);
  border-radius: var(--r-pill); letter-spacing: 0.02em; box-shadow: var(--shadow-sm);
}
.track-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.track-form .btn { white-space: nowrap; }
.track-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }
@media (max-width: 540px) { .track-form { flex-direction: column; } .track-form .btn { width: 100%; justify-content: center; } }

.pv-track-card {
  position: relative; overflow: hidden;
  max-width: 760px; margin: 36px auto 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: clamp(26px, 4vw, 40px);
  min-height: 168px; box-shadow: var(--shadow-sm);
}
.pv-track-card--delivered, .pv-track-card--approved, .pv-track-card--completed { border-color: rgba(47,143,91,.55); }
.pv-track-card--delayed, .pv-track-card--cancelled, .pv-track-card--more_info { border-color: rgba(194,58,40,.5); }
.pv-track-card__main { position: relative; z-index: 1; max-width: 70%; }
.pv-track-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent-soft); border: 1px solid #D5DCFF;
  color: var(--accent); margin-bottom: 18px;
}
.pv-track-card--delivered .pv-track-card__icon, .pv-track-card--approved .pv-track-card__icon, .pv-track-card--completed .pv-track-card__icon { color: var(--green); background: #E4F2EA; border-color: #C6E4D2; }
.pv-track-card--delayed .pv-track-card__icon, .pv-track-card--cancelled .pv-track-card__icon, .pv-track-card--more_info .pv-track-card__icon { color: var(--red); background: #FBE7E3; border-color: #F2CcC4; }
.pv-track-card__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pv-track-card__title { font-family: var(--font-disp); font-weight: 700; font-size: clamp(24px, 3.5vw, 32px); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 10px; }
.pv-track-card__desc { color: var(--fg-2); margin: 0; max-width: 46ch; line-height: 1.6; }
.pv-track-card__illus { position: absolute; bottom: -8px; right: -6px; width: 168px; height: 140px; object-fit: contain; pointer-events: none; opacity: 0.9; z-index: 0; }
@media (max-width: 560px) { .pv-track-card__main { max-width: 100%; } .pv-track-card__illus { width: 110px; height: 92px; opacity: 0.3; } }

.track-banner { max-width: 760px; margin: 16px auto 0; border-radius: var(--r-sm); padding: 14px 18px; font-size: 14px; font-weight: 600; }
.track-banner--delayed { background: #FBE7E3; border: 1px solid rgba(194,58,40,.4); color: #A83321; }
.track-banner--cancelled { background: #FBE7E3; border: 1px solid rgba(194,58,40,.55); color: #A83321; }

.pv-track-steps { max-width: 760px; margin: 30px auto 0; display: flex; flex-wrap: wrap; }
.pv-track-step { position: relative; flex: 1 1 0; min-width: 96px; text-align: center; padding-top: 34px; }
.pv-track-step::before { content: ''; position: absolute; top: 13px; left: 50%; right: -50%; height: 2px; background: var(--border-2); }
.pv-track-step:last-child::before { display: none; }
.pv-track-step__dot {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.pv-track-step__label { font-size: 12px; color: var(--muted); line-height: 1.35; padding: 0 6px; }
.pv-track-step.is-done::before { background: var(--accent); }
.pv-track-step.is-done .pv-track-step__dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv-track-step.is-current .pv-track-step__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.pv-track-step.is-done .pv-track-step__label, .pv-track-step.is-current .pv-track-step__label { color: var(--fg); }
.pv-track-step.is-current .pv-track-step__label { font-weight: 700; }
@media (max-width: 620px) {
  .pv-track-steps { flex-direction: column; gap: 0; max-width: 360px; }
  .pv-track-step { flex: none; text-align: left; padding: 0 0 24px 38px; min-height: 44px; }
  .pv-track-step::before { top: 24px; left: 9px; right: auto; bottom: -2px; width: 2px; height: auto; }
  .pv-track-step__dot { top: 2px; left: 0; transform: none; }
  .pv-track-step__label { padding: 4px 0 0; }
}

.pv-track-meta { max-width: 760px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.pv-track-meta__item { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.pv-track-meta__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pv-track-meta__v { color: var(--fg); font-size: 14px; font-weight: 500; }
.pv-track-arrow { color: var(--accent); padding: 0 4px; }

.pv-track-history { max-width: 760px; margin: 36px auto 0; }
.pv-track-history__title { font-family: var(--font-disp); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 16px; }
.track-events { list-style: none; margin: 0; padding: 0; }
.pv-track-event { display: flex; gap: 16px; }
.pv-track-event__rail { position: relative; width: 12px; flex: none; }
.pv-track-event__rail::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--border-2); }
.pv-track-event:last-child .pv-track-event__rail::before { bottom: auto; height: 18px; }
.pv-track-event__node { position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-2); z-index: 1; }
.pv-track-event.is-latest .pv-track-event__node { background: var(--accent); border-color: var(--accent); }
.pv-track-event__content { padding: 6px 0 22px; flex: 1; }
.pv-track-event__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pv-track-event__status { color: var(--fg); font-weight: 700; font-size: 15px; }
.pv-track-event__time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.pv-track-event__loc { color: var(--accent); font-size: 13px; margin-top: 3px; }
.pv-track-event__note { color: var(--fg-2); font-size: 14px; margin-top: 5px; line-height: 1.55; }

.pv-track-empty { max-width: 560px; margin: 40px auto 0; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 44px 32px; box-shadow: var(--shadow-sm); }
.pv-track-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); margin-bottom: 18px; }
.pv-track-empty h3 { font-family: var(--font-disp); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 10px; }
.pv-track-empty p { color: var(--fg-2); line-height: 1.6; margin: 0 0 22px; }

/* ─── Merch ─────────────────────────────────────────────────────── */
.merch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.merch-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.merch-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.merch-card__img { aspect-ratio: 4 / 3; background: var(--ink-3); overflow: hidden; position: relative; margin: 10px 10px 0; border-radius: 16px; }
.merch-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.merch-card:hover .merch-card__img img { transform: scale(1.05); }
.merch-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-disp); font-size: 40px; letter-spacing: .04em; }
.merch-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.merch-card__name { font-family: var(--font-disp); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--fg); }
.merch-card__desc { font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.merch-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }




/* ═══════════════════════════════════════════════════════════════════════
   ELKHORN & SONS — design layer
   -----------------------------------------------------------------------
   Signature: OVERSIZED NUMBERED SECTIONS running down a soft page — each
   step of the purchase announced by a large numeral, so a reader always
   knows where they are in the sequence. Rounded, shadowed surfaces and a
   deep indigo accent; the friendliest of the ten in feel, while keeping the
   contrast and target sizes the audience needs.
   ═══════════════════════════════════════════════════════════════════════ */
body { background: var(--bg); color: var(--fg); font-family: var(--font-body);
  font-size: 18.5px; line-height: 1.72; }
h1,h2,h3,h4 { font-family: var(--font-disp); font-weight:700; color: var(--fg); letter-spacing:-.02em; }
.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background: var(--accent); color:#fff; border:2px solid var(--accent); font-weight:600; font-size:17px;
  padding:15px 28px; min-height:56px; border-radius: var(--r-pill); text-decoration:none; cursor:pointer; }
.btn:hover,.btn:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color:#fff; }
.btn--ghost { background:transparent; color: var(--accent); }
.btn--ghost:hover,.btn--ghost:focus-visible { background: var(--accent-soft); }
.btn--wide { width:100%; } .btn--sm { min-height:48px; font-size:16px; padding:11px 20px; }

.mw-head { background: var(--surface); border-bottom:1px solid var(--border); }
.mw-head__row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:84px; }
.mw-head__mark { font-family: var(--font-disp); font-size:clamp(21px,2.6vw,29px); color: var(--fg); text-decoration:none; }
.mw-head__mark span { color: var(--accent); }
.mw-head__tel { display:inline-flex; align-items:center; gap:10px; background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-pill); padding:11px 20px; min-height:52px; text-decoration:none; font-weight:600; }
.mw-head__tel:hover,.mw-head__tel:focus-visible { background: var(--accent); color:#fff; }
.mw-nav { background: var(--surface); border-bottom:1px solid var(--border); }
.mw-nav__row { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:12px; }
.mw-nav__row a { padding:10px 18px; font-size:16.5px; color: var(--fg-2); text-decoration:none;
  min-height:48px; display:inline-flex; align-items:center; border-radius: var(--r-pill); }
.mw-nav__row a:hover,.mw-nav__row a:focus-visible { background: var(--accent-soft); color: var(--accent); }
.mw-nav__row a.is-on { background: var(--accent); color:#fff; }
@media (max-width:1040px){ .mw-nav { display:none; } }
@media (min-width:1041px){ .mw-head .nav-toggle { display:none; } }

.mw-hero { padding: clamp(34px,5vw,70px) 0; }
.mw-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(24px,4vw,50px); align-items:center; }
.mw-hero h1 { font-size: clamp(32px,4.6vw,58px); line-height:1.1; margin:0 0 16px; }
.mw-hero p { font-size:20px; color: var(--fg-2); margin:0 0 26px; }
.mw-hero__acts { display:flex; flex-wrap:wrap; gap:14px; }
.mw-hero__photo img { width:100%; height:auto; display:block; border-radius: var(--r); box-shadow: var(--shadow-lg); }
@media (max-width:920px){ .mw-hero__grid { grid-template-columns:1fr; } }

/* Numbered steps — the signature */
.mw-step { padding: clamp(30px,4.5vw,62px) 0; border-top:1px solid var(--border); }
.mw-step__grid { display:grid; grid-template-columns:150px 1fr; gap: clamp(18px,3vw,42px); align-items:start; }
.mw-step__n { font-family: var(--font-disp); font-size: clamp(64px,10vw,130px); line-height:.85;
  color: var(--accent); opacity:.22; font-weight:700; }
.mw-step h2 { font-size: clamp(25px,3.2vw,38px); margin:0 0 12px; }
.mw-step p { color: var(--fg-2); font-size:18.5px; margin:0 0 18px; max-width:60ch; }
@media (max-width:760px){ .mw-step__grid { grid-template-columns:1fr; gap:8px; }
  .mw-step__n { font-size:56px; } }

.mw-sec { padding: clamp(30px,4.5vw,60px) 0; }
.mw-sec--alt { background: var(--bg-2); }
.mw-sec__head { margin-bottom:22px; }
.mw-sec__head h2 { font-size: clamp(25px,3vw,36px); margin:0 0 8px; }
.mw-sec__head p { margin:0; color: var(--fg-2); }
.mw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mw-grid > p { grid-column:1/-1; }
.mw-car { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow: var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease; }
.mw-car:hover { box-shadow: var(--shadow); transform:translateY(-2px); }
.mw-car__shot { display:block; aspect-ratio:4/3; background: var(--bg-2); position:relative; overflow:hidden; }
.mw-car__shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.mw-car__flag { position:absolute; top:10px; left:10px; background: var(--flag); color:#fff; font-size:13px;
  font-weight:600; padding:5px 13px; border-radius: var(--r-pill); }
.mw-car__body { padding:16px 18px 0; }
.mw-car__name { font-family: var(--font-disp); font-size:18px; color: var(--fg); text-decoration:none; display:block; line-height:1.3; }
.mw-car__name:hover,.mw-car__name:focus-visible { color: var(--accent); }
.mw-car__spec { list-style:none; margin:10px 0 0; padding:0; font-size:15.5px; color: var(--fg-2); }
.mw-car__spec li { padding:3px 0; }
.mw-car__foot { margin-top:auto; padding:14px 18px 16px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mw-car__price { font-family: var(--font-mono); font-size:18px; color: var(--accent); }
@media (max-width:1300px){ .mw-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .mw-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .mw-grid { grid-template-columns:1fr; } }
.mw-panel { background: var(--surface); border:1px solid var(--border); border-radius: var(--r);
  padding: clamp(20px,3vw,32px); box-shadow: var(--shadow-sm); }
.mw-three { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mw-three h3 { font-size:20px; margin:0 0 8px; } .mw-three p { margin:0; color: var(--fg-2); font-size:16.5px; }
@media (max-width:840px){ .mw-three { grid-template-columns:1fr; } }
.mw-qa details { background: var(--surface); border:1px solid var(--border); border-radius: var(--r); margin-bottom:10px; }
.mw-qa summary { cursor:pointer; padding:18px 22px; font-family: var(--font-disp); font-weight:700; font-size:19px;
  min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mw-qa summary::after { content:'+'; font-family: var(--font-mono); font-size:22px; color: var(--accent); }
.mw-qa details[open] summary::after { content:'–'; }
.mw-qa details > p { margin:0; padding:0 22px 20px; color: var(--fg-2); }
.mw-fld { margin-bottom:18px; }
.mw-fld .field-label { display:block; font-size:16.5px; font-weight:600; margin:0 0 7px; }
.mw-fld .field-hint { display:block; margin-top:6px; font-size:15px; color: var(--fg-2); }
.mw-foot { background: var(--surface); border-top:1px solid var(--border); padding: clamp(32px,4vw,58px) 0 24px; }
.mw-foot__cols { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; }
.mw-foot h4 { font-size:16px; margin:0 0 10px; }
.mw-foot__tel { display:inline-block; margin-top:10px; font-family: var(--font-mono); font-size:24px; color: var(--accent); text-decoration:none; }
.mw-foot address { font-style:normal; color: var(--fg-2); margin-top:10px; }
.mw-foot nav { display:flex; flex-direction:column; }
.mw-foot nav a { color: var(--fg-2); padding:8px 0; min-height:44px; display:flex; align-items:center; text-decoration:none; }
.mw-foot nav a:hover,.mw-foot nav a:focus-visible { color: var(--accent); text-decoration:underline; }
.mw-foot__base { margin-top:26px; padding-top:20px; border-top:1px solid var(--border); color: var(--muted); font-size:15.5px; }
@media (max-width:800px){ .mw-foot__cols { grid-template-columns:1fr; } }
/* Motion: a gentle zoom-out, matching the soft rounded surfaces. */
.reveal,.reveal-item { opacity:0; transform:scale(1.02); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in,.reveal-item.is-in { opacity:1; transform:none; }
/* Askbar */
.askbar { position:fixed; z-index:70; left:12px; right:12px; bottom:12px; display:flex; gap:10px; }
.askbar a,.askbar button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:58px; border-radius: var(--r-pill); font-size:17px; font-weight:600; border:1px solid var(--border);
  cursor:pointer; text-decoration:none; box-shadow: var(--shadow); }
.askbar__call { background: var(--surface); color: var(--fg); }
.askbar__ask { background: var(--accent); color:#fff; border-color: var(--accent); }
@media (min-width:861px){ .askbar { left:auto; right:104px; bottom:24px; flex-direction:column; }
  .askbar a,.askbar button { min-width:236px; justify-content:flex-start; padding:0 22px; } }
@media (max-width:860px){ body { padding-bottom:80px; } .lc-root { bottom:96px !important; } }

.mw-total { background: var(--accent-soft); border:2px solid var(--accent); border-radius: var(--r); padding: clamp(20px,3vw,30px); }
.mw-total > span { font-size:16px; color: var(--fg-2); }
.mw-total strong { display:block; font-size:clamp(40px,6vw,62px); color: var(--accent); line-height:1.05; }
.mw-total dl { display:grid; grid-template-columns:1fr auto; gap:8px 18px; margin:20px 0 14px; border-top:1px solid var(--border-2); padding-top:16px; font-size:16.5px; }
.mw-total dt { color: var(--fg-2); } .mw-total dd { margin:0; }
.mw-total p { font-size:15.5px; color: var(--fg-2); margin:0 0 16px; }
.mw-dial { padding:14px 0; border-bottom:1px solid var(--border); }
.mw-dial label { display:block; font-size:17px; font-weight:600; margin-bottom:8px; }
.mw-dial input[type=range] { width:100%; accent-color: var(--accent); height:36px; }
.mw-dial output { display:block; font-size:21px; color: var(--fg); }
@media (max-width:840px){ #finCalc { grid-template-columns:1fr !important; } .mw-sec form[style*="grid-template-columns:2fr"] { grid-template-columns:1fr !important; } }


/* ════════ CAR DETAIL — Elkhorn ════════
   Rounded, softly shadowed surfaces; the action card lifts slightly and stays with you. */
.mw-detail { padding: clamp(26px,4vw,52px) 0 clamp(40px,6vw,80px); }
.mw-detail > .wrap { display:grid; grid-template-columns:1.55fr 1fr; gap: clamp(22px,3.5vw,36px); align-items:start; }
.mw-cartop { grid-column:1/-1; }
.mw-back { display:inline-flex; align-items:center; min-height:44px; text-decoration:none;
  font-size:15.5px; color: var(--muted); }
.mw-back:hover, .mw-back:focus-visible { color: var(--accent); }
.mw-cartop h1 { font-size: clamp(28px,4.0vw,50px); line-height:1.1; margin:8px 0 0; }
.mw-flag { display:inline-block; margin-top:10px; background: var(--accent); color:#fff;
  font-size:14px; font-weight:700; padding:5px 14px; }

/* Gallery */
.mw-gal {  }
.mw-gal__main { position:relative; aspect-ratio:16/10; overflow:hidden; background: var(--bg-2);
  border:1px solid var(--border); border-radius: var(--r); }
.mw-gal__main img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.mw-gal__nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border:0; background: rgba(0,0,0,.62); color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.mw-gal__nav--prev { left:0; } .mw-gal__nav--next { right:0; }
.mw-gal__nav:hover, .mw-gal__nav:focus-visible { background: var(--accent); }
.mw-gal__count { position:absolute; right:12px; bottom:12px; background: rgba(0,0,0,.72); color:#fff;
  font-family: var(--font-mono); font-size:13.5px; padding:5px 11px; border-radius: var(--r-sm); }
.mw-gal__strip { display:flex; overflow-x:auto; gap:10px; margin-top:10px; }
.mw-gal__thumb { flex:0 0 100px; aspect-ratio:4/3; padding:0; border:2px solid transparent;
  background:none; cursor:pointer; overflow:hidden; }
.mw-gal__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.mw-gal__thumb.is-active { border-color: var(--accent); }

/* Conversion block — price, the two ways to make contact, and why to bother */
.mw-ask {  background: var(--surface); border:1px solid var(--border); padding: clamp(20px,3vw,28px);
  border-radius: var(--r); position:sticky; top:20px; box-shadow:0 8px 26px -18px rgba(23,21,40,.5); }
.mw-ask__price { font-family: var(--font-disp); font-size: clamp(30px,4vw,44px); line-height:1.05;
  color: var(--accent); margin-bottom:6px; }
.mw-ask__note { font-size:15.5px; color: var(--fg-2); margin:0 0 18px; }
.mw-ask .btn { margin-bottom:10px; }
.mw-ask__list { list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--border); }
.mw-ask__list li { position:relative; padding:6px 0 6px 26px; font-size:15.5px; color: var(--fg-2); }
.mw-ask__list li::before { content:'✓'; position:absolute; left:0; color: var(--accent); font-weight:700; }
.mw-ask__doc { display:inline-flex; align-items:center; min-height:44px; margin-top:10px; font-size:15.5px; }

/* Blocks */
.mw-block { grid-column:1/-1; margin-top: clamp(26px,4vw,44px); }
.mw-block h2 { font-size: clamp(22px,2.6vw,30px); margin:0 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--border); }
.mw-block p { color: var(--fg-2); }

/* Specification */
.mw-spec { width:100%; }
table.mw-spec { border-collapse:collapse; }
table.mw-spec th { text-align:left; font-weight:400; color: var(--muted); font-size:15.5px;
  padding:10px 18px 10px 0; width:150px; border-bottom:1px solid var(--border); vertical-align:top; }
table.mw-spec td { padding:10px 0; border-bottom:1px solid var(--border); font-size:17px; }
dl.mw-spec { display:grid; grid-template-columns:auto 1fr; gap:0 22px; margin:0; }
dl.mw-spec dt { color: var(--muted); font-size:15.5px; padding:10px 0; border-bottom:1px solid var(--border); }
dl.mw-spec dd { margin:0; padding:10px 0; font-size:17px; border-bottom:1px solid var(--border); }
ul.mw-spec { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px; }
ul.mw-spec li { padding:12px 0; border-bottom:1px solid var(--border); }
ul.mw-spec b { display:block; font-weight:400; font-size:13.5px; color: var(--muted);
  text-transform:uppercase; letter-spacing:.1em; }
ul.mw-spec span { font-size:17.5px; }

/* Video + related */
.mw-videos { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.mw-videos figure { margin:0; }
.mw-videos video, .mw-videos iframe { width:100%; aspect-ratio:16/9; border:1px solid var(--border);
  background:#000; display:block; }
.mw-videos figcaption { margin-top:8px; font-size:15.5px; color: var(--fg-2); }
.mw-rel { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mw-rel__item { text-decoration:none; border:1px solid var(--border); background: var(--surface);
  border-radius: var(--r); overflow:hidden; display:block; }
.mw-rel__item:hover, .mw-rel__item:focus-visible { border-color: var(--accent); }
.mw-rel__item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.mw-rel__item span { display:block; padding:12px 14px 0; font-size:16px; color: var(--fg); }
.mw-rel__item b { display:block; padding:4px 14px 14px; color: var(--accent); font-size:16px; }

/* Sticky bar */
.mw-sticky { position:fixed; left:0; right:0; bottom:0; z-index:60; background: var(--surface);
  border-top:2px solid var(--accent); padding:10px 0; display:none; }
.mw-sticky.is-on { display:block; }
.mw-sticky .wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mw-sticky__car { font-weight:700; color: var(--fg); }
.mw-sticky__price { font-family: var(--font-mono); color: var(--accent); margin-right:auto; }

@media (max-width:980px){
  .mw-detail > .wrap { grid-template-columns:1fr; }
  .mw-ask { position:static; }
  .mw-rel { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){ .mw-rel { grid-template-columns:1fr; } }


/* ════════ SHOP / PARTS / FILMS — Elkhorn ════════ */
.mw-shop { padding: clamp(34px,5vw,68px) 0; }
.mw-shop__eyebrow { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--accent); margin:0; }
.mw-shop__h { font-size: clamp(30px,4.4vw,48px); margin:8px 0 10px; }
.mw-shop__lead { color: var(--fg-2); font-size:18.5px; max-width:60ch; margin:0 0 clamp(24px,4vw,40px); }
.mw-shop__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mw-good { background: var(--surface); border:1px solid var(--border); display:flex; flex-direction:column;
  border-radius: var(--r); overflow:hidden; }
.mw-good:hover { border-color: var(--accent); }
.mw-good__img { position:relative; aspect-ratio:4/3; background: var(--bg-2);
  display:flex; align-items:center; justify-content:center; }
.mw-good__img img { width:100%; height:100%; object-fit:cover; display:block; }
.mw-good__img span { font-family: var(--font-disp); font-size:44px; color: var(--border-2); }
.mw-good__no { position:absolute; top:10px; left:10px; font-style:normal; background: var(--surface);
  border:1px solid var(--border); font-family: var(--font-mono); font-size:11.5px; padding:4px 10px; }
.mw-good__body { padding:16px 18px 0; display:flex; flex-direction:column; flex:1; }
.mw-good__body h2 { font-size:19px; margin:0 0 6px; }
.mw-good__body p { color: var(--fg-2); font-size:16px; margin:0 0 10px; }
.mw-good__fits b { font-weight:400; color: var(--muted); font-size:13.5px; text-transform:uppercase;
  letter-spacing:.1em; display:block; }
.mw-good__foot { margin-top:auto; padding:14px 0 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mw-good__price { font-family: var(--font-mono); font-size:19px; color: var(--accent); }
.mw-films { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.mw-film { margin:0; background: var(--surface); border:1px solid var(--border); border-radius: var(--r); overflow:hidden; }
.mw-film__frame { aspect-ratio:16/9; background:#000; }
.mw-film__frame video, .mw-film__frame iframe { width:100%; height:100%; border:0; display:block; }
.mw-film figcaption { padding:16px 18px 18px; }
.mw-film figcaption h2 { font-size:19px; margin:0 0 6px; }
.mw-film figcaption p { color: var(--fg-2); font-size:16px; margin:0 0 8px; }
@media (max-width:1100px){ .mw-shop__grid { grid-template-columns:repeat(2,1fr); } .mw-films { grid-template-columns:1fr; } }
@media (max-width:620px){ .mw-shop__grid { grid-template-columns:1fr; } }


/* ── Lookup + legal pages (Elkhorn) ─────────────────────────────────── */
.mw-lookup { padding: clamp(30px,5vw,60px) 0; }
.mw-lookup h1 { font-size: clamp(28px,4vw,46px); margin:0 0 10px; }
.mw-lookup__lead { color: var(--fg-2); font-size:18.5px; max-width:56ch; margin:0 0 26px; }
.mw-help { margin-top:28px; padding:22px; border:1px solid var(--border); background: var(--surface);
  border-left:3px solid var(--accent); border-radius: var(--r); }
.mw-help p { margin:0 0 14px; color: var(--fg-2); }
.mw-help__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; }
.mw-legal { padding: clamp(30px,5vw,60px) 0; }
.mw-legal h1 { font-size: clamp(28px,4vw,46px); margin:0 0 6px; }
.mw-legal__kicker { font-family: var(--font-mono); font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--accent); margin:0 0 8px; }


/* ── Recovery + legal capture (Elkhorn) ─────────────────────────────
   A visitor who reaches a dead end (no matching car, a stale link, or the
   small print) is still a buyer. Each of these ends with a way to leave a
   name and a number rather than nothing at all. ── */
.mw-wanted { padding: clamp(28px,4vw,52px) 0; background: var(--bg-2); border-top:1px solid var(--border); }
.mw-wanted h2 { font-size: clamp(24px,3vw,34px); margin:0 0 10px; }
.mw-wanted p { color: var(--fg-2); max-width:60ch; margin:0 0 22px; }
.mw-wanted__form { max-width:680px; }
.mw-wanted__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mw-wanted__f { margin-bottom:16px; }
.mw-wanted__f .field-label { display:block; font-size:16.5px; font-weight:600; margin:0 0 7px; }
.mw-wanted__f .field-hint { display:block; margin-top:6px; font-size:15px; color: var(--fg-2); }
@media (max-width:640px){ .mw-wanted__row { grid-template-columns:1fr; } }
.mw-legalhelp { padding: clamp(22px,3vw,38px) 0; border-top:1px solid var(--border); }
.mw-legalhelp p { color: var(--fg-2); margin:0 0 14px; }
.mw-legalhelp__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; }

/* ── Logo image in the header. Constrained so a wide wordmark cannot blow
      the header height out, and so it stays legible on a phone. ── */
.mw-head__mark img { max-height:44px; width:auto; display:block; }
@media (max-width:600px){ .mw-head__mark img { max-height:34px; } }

/* ── Gallery hardening. The strip can hold 60+ photographs, so the thumbs
      are fixed-size and the main image is capped by viewport height as well
      as by its column — otherwise a tall photograph pushes the price and the
      contact buttons below the fold on a laptop. ── */
.mw-gal__main { max-height:min(68vh,620px); }
.mw-gal__main img { max-height:min(68vh,620px); object-fit:cover; }
.mw-gal__strip { max-height:96px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; }
.mw-gal__thumb { flex:0 0 100px; height:76px; }
.mw-gal__thumb img { width:100%; height:100%; object-fit:cover; }
@media (max-width:600px){
  .mw-gal__main, .mw-gal__main img { max-height:52vh; }
  .mw-gal__strip { max-height:74px; } .mw-gal__thumb { flex:0 0 78px; height:58px; }
}


/* ── Car page layout fix ───────────────────────────────────────────────
   Grid children default to min-width:auto, so a full-width button inside the
   action panel was widening its column and pushing the page sideways — the
   price and the buttons ran off the right of the screen. Constrain the
   children, and place the panel explicitly beside the photograph instead of
   letting it fall below the specification table. ── */
.mw-detail > .wrap > * { min-width: 0; }
.mw-gal { grid-column: 1; grid-row: 1; }
.mw-ask { grid-column: 2; grid-row: 1; align-self: start; }
.mw-cartop { grid-column: 1 / -1; }
.mw-block { grid-column: 1 / -1; }
.mw-ask .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center;
  line-height: 1.3; padding-inline: 16px; }
.mw-ask__price { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .mw-detail > .wrap { grid-template-columns: 1fr; }
  .mw-gal, .mw-ask, .mw-cartop, .mw-block { grid-column: 1 !important; grid-row: auto !important; }
  .mw-ask { position: static !important; }
}


/* ── Sticky purchase bar vs the floating request control ───────────────
   Both offer the same two actions, and on a car page they were landing on
   top of each other in the bottom-right corner. Once the sticky bar appears
   the floating control is redundant, so it steps aside. The bar also keeps
   clear of the live-chat bubble. ── */
body:has(.mw-sticky.is-on) .askbar { display: none; }
.mw-sticky { padding-right: 0; }
.mw-sticky .wrap { padding-right: 84px; }   /* clear of the chat bubble */
.mw-sticky__car { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
@media (max-width: 860px) {
  .mw-sticky .wrap { padding-right: var(--gutter); gap: 10px; }
  .mw-sticky__car { max-width: 100%; flex: 1 1 100%; }
  .mw-sticky .btn { flex: 1 1 45%; }
  .lc-root { bottom: 92px !important; }
}
/* Older browsers without :has() — keep them usable by lifting the control. */
@supports not selector(:has(*)) {
  .mw-sticky.is-on ~ .askbar,
  .askbar { bottom: 92px; }
}

/* ── Delivery photographs. Our own trailer and our own customers' driveways,
      which does more for trust on this page than any stock picture. ── */
.mw-deliv { margin:0 0 18px; }
.mw-deliv img { width:100%; height:auto; display:block; border-radius: var(--r); border:1px solid var(--border); }
.mw-deliv figcaption { margin-top:10px; font-size:16px; color: var(--fg-2); }
.mw-deliv__pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .mw-deliv__pair { grid-template-columns:1fr; } }

/* ── Request control placement ─────────────────────────────────────────
   Sits tight to the edge normally. When live chat is switched on, the chat
   bubble occupies that corner, so the control steps left to clear it rather
   than stacking on top of it. ── */
@media (min-width:861px){
  .askbar { right:20px !important; bottom:20px; }
  body.chat-on .askbar { right:96px !important; }
}
@media (max-width:860px){
  body:not(.chat-on) .lc-root { display:none; }
}