/* ================================================================
   Auto Alley — Public Site
   Design system:
     - Deep blue-black background (#0F1115) with warm bone foreground
     - "Aged brass" (#C49B5B) as the single accent, used with restraint
     - "Big Shoulders Display" for condensed display type (years, hero)
     - "Inter" for body
     - "JetBrains Mono" for spec data (HP/mileage/year)
   Signature element: the year-number used as a structural device throughout.
   ================================================================ */

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

:root {
  --ink:        #0F1115;
  --ink-2:      #1A1D24;
  --ink-3:      #252932;
  --bone:       #F3EFE5;
  --bone-2:     #DDD6C6;
  --muted:      #8A8B92;
  --brass:      #C49B5B;
  --brass-2:    #A88248;
  --oxblood:    #6E1F2B;
  --border:     #2A2D36;
  --border-2:   #3B3F49;

  --font-disp:  'Big Shoulders Display', 'Inter', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* ── Compatibility aliases ──────────────────────────────────────
     The later "Ironvale" layer in this file was written against a
     second set of token names that were never defined here. Every
     one of those `var()` calls was invalid at computed-value time
     and silently dropped — 45 declarations in total, which is why
     hover states, active-thumbnail borders and several text colours
     had no effect. Mapped to the canonical palette above rather
     than introducing new colours. Prefer the names above in new
     code; these exist so the Ironvale layer resolves. */
  --accent:     var(--brass);   /* brand accent: borders, prices, ticks */
  --fg:         var(--bone);    /* primary text */
  --fg-2:       var(--bone-2);  /* secondary / body text */
  --surface:    var(--ink-2);   /* raised card surface */
  --bg-2:       var(--ink-2);   /* recessed well behind media */
  --paper-2:    var(--ink-2);   /* card surface (videos grid) */
  --rule:       var(--border);  /* hairline rules and grid gaps */
  --ox:         var(--oxblood); /* oxblood, for fills only — see note */
  /* "Ledger rules, no rounded corners" — panels are square by intent. */
  --r:          0;
  --r-sm:       2px;

  --maxw:       1280px;
  --gutter:     clamp(20px, 4vw, 56px);
}

/* ─── Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The header is pinned, so anchor targets (the skip link, in-page jumps)
     would otherwise land underneath it. */
  scroll-padding-top: 132px;
}
@media (max-width:640px){ html { scroll-padding-top: 110px; } }
/* `overflow-x: hidden` makes html/body a scroll container, which silently
   disables `position: sticky` on their children — the header was declared
   sticky but scrolled away on every page. `clip` does the same clipping
   without establishing a scroll container, so sticky works again.
   (Safari < 16 ignores `clip`; there it simply falls back to no clipping,
   and the audit found no real horizontal overflow to clip.) */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--bone);
  font-size: 16px;
  line-height: 1.55;
  -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: 600; line-height: 1.1; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

/* ─── 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(56px, 9vw, 112px) 0;
}
.section--alt { background: var(--ink-2); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '— ';
  color: var(--brass);
}

.section-title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 64px);
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}
.section-title small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-top: 12px;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  background: var(--brass);
  color: var(--ink);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--brass-2); border-color: var(--brass-2); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--dark { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn--wide { width: 100%; justify-content: center; padding: 16px 26px; }

/* ─── Top bar (logo + nav) ──────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 17, 21, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand__dot { color: var(--brass); }
.brand img { max-height: 40px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bone-2);
  transition: color 0.15s ease;
}
.nav a:hover, .nav a.active { color: var(--brass); }

.topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar__phone {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brass);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  position: relative;
}
.nav-toggle::before, .nav-toggle::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--bone);
}
.nav-toggle::before { top: 14px; }
.nav-toggle::after  { bottom: 14px; }
.nav-toggle::before, .nav-toggle::after,
.nav-toggle span {
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  top: 50%; height: 1.5px;
  background: var(--bone);
  transform: translateY(-50%);
}
/* Burger → X when open */
.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: 22px; }
}
@media (max-width: 720px) {
  .nav, .topbar__cta { display: none; }
}
/* The header nav collapses at 1050px, so the burger and the drawer it opens
   have to appear at the same width. They were tied to 720px, which left every
   viewport between 721px and 1050px — most tablets — with no navigation at
   all: no links, no menu button, no way through the site but the footer. */
@media (max-width: 1050px) {
  .nav-toggle { display: block; }
  .nav-drawer.is-open { display: block; }
}
.nav-drawer {
  display: none;
  background: var(--ink-2);
  border-bottom: 1px solid var(--border);
  padding: 16px var(--gutter) 24px;
}
.nav-drawer a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--bone);
}
.nav-drawer a:last-child { border-bottom: 0; }
.nav-drawer .btn { margin-top: 16px; }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 800px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.65) saturate(0.95);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,17,21,0.45) 0%, rgba(15,17,21,0.0) 35%, rgba(15,17,21,0.92) 100%);
}

/* ── Home hero: let the photograph read ──────────────────────────────
   The headline sits at the bottom, so the lower gradient still has to do
   real work — but the top two thirds no longer need to be dimmed to keep
   it legible. Brighter filter, and the veil is pulled down so the image is
   near-untouched where there is no text over it. */
.hero__bg--bright {
  background-color: var(--ink);   /* fallback while the photograph loads */
  filter: brightness(0.92) saturate(1.02) contrast(1.03);
}
.hero__bg--bright::after {
  /* Two scrims instead of one flat dim: a soft wedge down the left where the
     headline and body copy sit, and the vertical veil that anchors the bottom
     edge. The right two thirds — where the car is — stay close to the original
     exposure. */
  background:
    linear-gradient(90deg,
      rgba(15,17,21,0.78) 0%,
      rgba(15,17,21,0.46) 34%,
      rgba(15,17,21,0.00) 66%),
    linear-gradient(180deg,
      rgba(15,17,21,0.34) 0%,
      rgba(15,17,21,0.00) 30%,
      rgba(15,17,21,0.00) 46%,
      rgba(15,17,21,0.70) 78%,
      rgba(15,17,21,0.93) 100%);
}

/* ── Section heroes for pages built without a photograph ─────────────
   Financing, About and Contact lead with a text block rather than a .hero
   band. A single shared treatment gives them artwork without restructuring
   their markup: the photograph sits behind the section, dimmed enough that
   body copy stays readable. */
.has-photo { position: relative; isolation: isolate; }
.has-photo > .wrap { position: relative; z-index: 1; }
.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--photo);
  background-size: cover;
  background-position: var(--photo-pos, center);
  filter: var(--photo-filter, brightness(0.62) saturate(0.95));
}
/* Rather than dimming the whole section — which buried the photograph to keep
   long body copy readable — the image is allowed to read behind the heading and
   then dissolves into the page colour before the content starts. All three of
   these sections sit on --ink, so the gradient ends fully opaque on the same
   colour and the seam is invisible. */
.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(15,17,21,0.42) 0%,
    rgba(15,17,21,0.55) 38%,
    rgba(15,17,21,0.90) 68%,
    var(--ink) 86%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(48px, 7vw, 96px);
  width: 100%;
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__kicker::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--brass);
}
.hero__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(54px, 9vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 980px;
}
.hero__title span {
  display: block;
  color: var(--brass);
  font-style: italic;
}
.hero__sub {
  margin-top: 22px;
  max-width: 540px;
  font-size: 17px;
  color: var(--bone-2);
  line-height: 1.55;
}
.hero__cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ─── Featured slider / grid ────────────────────────────────────── */
.feat {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.feat-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feat-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.feat-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  overflow: hidden;
}
.feat-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.feat-card:hover .feat-card-img img { transform: scale(1.04); }
/* Secondary "hover" photo — stacked over the main photo, crossfaded in on
   card hover. Selector includes the img tag to out-rank .feat-card-img img. */
.feat-card-img img.feat-card-img__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.feat-card:hover .feat-card-img img.feat-card-img__hover { opacity: 1; }
.feat-card-img__year {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.feat-card-img__sold {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--oxblood);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 5px 10px;
  text-transform: uppercase;
}
.feat-card-img__pending {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--brass);
  color: #1a1306;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 5px 10px;
  text-transform: uppercase;
  font-weight: 600;
}
.feat-card__body { padding: 20px 22px 24px; }
.feat-card__title {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--bone);
}
.feat-card__specs {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.feat-card__specs span { display: inline-flex; align-items: center; gap: 6px; }
.feat-card__specs span::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--brass);
  border-radius: 50%;
  flex-shrink: 0;
}
.feat-card__price {
  margin-top: 18px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 26px;
  color: var(--brass);
  letter-spacing: -0.005em;
}

/* ─── Inventory grid ────────────────────────────────────────────── */
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}
.inv-search {
  flex: 1 1 280px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 16px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
}
.inv-search:focus { outline: none; border-color: var(--brass); }
.inv-select {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 16px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
.inv-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .inv-toolbar { gap: 12px; }
  .inv-search { flex: 1 1 100%; }
  .inv-select { flex: 1 1 100%; }
  .inv-toolbar .btn { flex: 1 1 auto; justify-content: center; }
}
.inv-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}

/* ─── Car detail page ───────────────────────────────────────────── */
.det {
  padding-top: 40px;
  padding-bottom: 80px;
}
.det-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 24px;
}
.det-breadcrumb a { color: var(--brass); }
.det-breadcrumb a:hover { color: var(--bone); }

.det-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.det-year {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(80px, 14vw, 180px);
  line-height: 0.85;
  color: var(--brass);
  letter-spacing: -0.025em;
  display: block;
  margin-bottom: 8px;
}
.det-title {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--bone);
}
.det-price {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 58px);
  color: var(--brass);
  letter-spacing: -0.01em;
}
.det-price small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  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(28px, 4vw, 56px);
  margin-top: 28px;
}
@media (max-width: 900px) { .det-cols { grid-template-columns: 1fr; } }

.det-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.det-gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.det-gallery__main img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--ink);
}
.det-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.det-gallery__thumb {
  aspect-ratio: 1;
  background: var(--ink-2);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.det-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.det-gallery__thumb.is-active { border-color: var(--brass); }

.det-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.55);
  color: var(--bone);
  border: 1px solid var(--border);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.det-gallery__nav:hover { background: rgba(13, 13, 13, 0.85); color: var(--brass); }
.det-gallery__nav--prev { left: 10px; }
.det-gallery__nav--next { right: 10px; }
.det-gallery__count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 10px;
  background: rgba(13, 13, 13, 0.65);
  color: var(--bone);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  z-index: 2;
}

/* Low-commitment secondary action under the sidebar inquiry form */
.det-secondary-cta { margin-top: 12px; }

/* Second CTA banner below the vehicle description */
.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(--ink-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brass);
}
.det-cta-banner__text h2 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
}
.det-cta-banner__text p { margin: 0; color: var(--bone-2); font-size: 15px; }
.det-cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Sticky inquiry bar — revealed on scroll once the sidebar form is gone */
.det-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  /* Reserve clearance on the right so buttons never sit under the live-chat
     bubble (60px wide at right:24px → ~84px footprint). */
  padding-right: 100px;
  background: rgba(13, 13, 13, 0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 0.28s ease;
}
.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: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.det-stickybar__price { color: var(--brass); font-weight: 600; white-space: nowrap; }
.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; text-align: center; }
  .det-stickybar { padding: 10px 14px; padding-right: 88px; }
  .det-stickybar__info { flex-direction: column; gap: 0; }
  .det-stickybar__actions .det-stickybar__call { display: none; }
}

.det-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.det-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  padding: 24px;
}
.det-card h3 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  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.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.det-spec__value {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bone);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.det-form { display: flex; flex-direction: column; gap: 14px; }
.det-form input, .det-form textarea {
  background: var(--ink);
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--bone);
  border-radius: 2px;
}
.det-form textarea { min-height: 100px; resize: vertical; }
.det-form input:focus, .det-form textarea:focus { outline: none; border-color: var(--brass); }

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

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

/* ─── Testimonials ──────────────────────────────────────────────── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.testi {
  background: var(--ink-2);
  border: 1px solid var(--border);
  padding: 28px 26px;
  position: relative;
}
.testi::before {
  content: '"';
  position: absolute;
  top: 6px; left: 18px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 72px;
  color: var(--brass);
  line-height: 1;
  opacity: 0.4;
}
.testi__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-2);
  margin-bottom: 18px;
  margin-top: 18px;
}
.testi__name {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
}
.testi__loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ─── Strip / banner / 3-col splits ─────────────────────────────── */
.strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
  background: var(--ink-2);
}
.strip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.strip-item h4 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--brass);
}
.strip-item p {
  margin: 0;
  font-size: 14px;
  color: var(--bone-2);
  line-height: 1.55;
}
@media (max-width: 720px) { .strip-row { grid-template-columns: 1fr; gap: 24px; } }

/* ─── About / page intro split ──────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  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);
  overflow: hidden;
}
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--bone-2);
  max-width: 540px;
}

/* ─── Contact / Shipping / Financing pages ──────────────────────── */
.page-head {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.contact-info__item {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  border-left: 2px solid var(--brass);
}
.contact-info__item label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-info__item span {
  font-family: var(--font-disp);
  font-weight: 500;
  font-size: 22px;
  color: var(--bone);
  line-height: 1.2;
}

/* ─── Footer ────────────────────────────────────────────────────── */
.footer {
  background: #08090C;
  border-top: 1px solid var(--border);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.footer a, .footer p { color: var(--bone-2); font-size: 14px; line-height: 1.8; }
.footer a:hover { color: var(--brass); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  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: var(--muted); }
.footer-legal a:hover { color: var(--brass); }

/* ─── Flash messages ────────────────────────────────────────────── */
.flash {
  position: fixed;
  top: 88px;
  right: var(--gutter);
  z-index: 100;
  padding: 14px 22px;
  border-left: 3px solid var(--brass);
  background: var(--ink-2);
  color: var(--bone);
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  max-width: 360px;
}
.flash--error { border-left-color: var(--oxblood); }

/* ─── Lead modal ────────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 12, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  /* Was `align-items: center` with no overflow handling, so a form taller than
     the viewport was clipped at BOTH ends at once — the heading cut off above
     the top edge, the submit button below the bottom one, and no way to reach
     either. Top alignment plus `margin: auto` on the dialog keeps it centred
     when there is room and lets it scroll when there is not. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vh, 28px) clamp(12px, 4vw, 20px);
}
.modal-bg.is-open { display: flex; }
.modal {
  background: var(--ink-2);
  border: 1px solid var(--border);
  max-width: 440px;
  width: 100%;
  margin: auto;   /* centres vertically while it fits; collapses when it does not */
  padding: clamp(26px, 5vw, 36px) clamp(20px, 5vw, 32px);
  position: relative;
  border-radius: 4px;
}
.modal__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;   /* was 36px — under the comfortable tap size */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}
.modal__close:hover, .modal__close:focus-visible { color: var(--bone); }
.modal h3 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-right: 44px;   /* clear of the close button */
}
.modal p { color: var(--bone-2); font-size: 14px; margin-bottom: 22px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal input, .modal textarea {
  background: var(--ink);
  border: 1px solid var(--border);
  padding: 12px 14px;
  font: inherit;
  color: var(--bone);
  border-radius: 2px;
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--brass); }

/* ─── Small / empty states ──────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--muted);
  font-size: 15px;
}
.empty h3 {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 12px;
}

/* ─── Accessibility ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brass); 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.85;
}
.feat-card--sold:hover {
  border-color: var(--border);
  transform: none;
}
.feat-card--sold .feat-card-img img {
  filter: grayscale(1) brightness(0.7);
  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(15, 17, 21, 0.4);
}
.feat-card--sold .feat-card-img__year {
  color: var(--bone-2);
  opacity: 0.6;
}
.feat-card--sold .feat-card-img__sold-large {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 76px);
  letter-spacing: 0.08em;
  color: var(--bone);
  background: var(--oxblood);
  padding: 8px 22px;
  border: 2px solid var(--bone);
  z-index: 3;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.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 header */
.sold-section {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.sold-section .section-title { color: var(--muted); }

/* ─── Scroll reveal animations ──────────────────────────────────────
   NOTE: the reveal system now lives in ONE place — see
   "Motion: Ironvale" near the end of this file. It used to be defined
   both here and there with conflicting rules, which left every
   staggered item permanently invisible. Do not re-add rules here. */

/* ─── Hero entrance ─────────────────────────────────────────────── */
@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.15s both; }
.hero__title   { animation: hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.hero__sub     { animation: hero-rise 0.7s  cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.hero__cta     { animation: hero-rise 0.7s  cubic-bezier(0.22, 1, 0.36, 1) 0.70s both; }

/* Slow ambient zoom on hero background */
@keyframes hero-bg-drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}
.hero__bg { animation: hero-bg-drift 20s ease-out forwards; }

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

/* ─── Shipping page — extends design system with transport-page sections ──── */

/* Hero pill checklist row below CTAs */
.hero__pills {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  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.1em;
  color: var(--bone);
  background: rgba(15, 17, 21, 0.6);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  backdrop-filter: blur(8px);
}
.hero__pill svg { color: var(--brass); flex-shrink: 0; }

/* Eyebrow as a pill (transport-page style) — alternative variant */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}
.section-title-underline {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--brass);
  margin: 24px auto 16px;
  border-radius: 2px;
}

/* Transport-options 3-card grid */
.tx-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) { .tx-cards { grid-template-columns: 1fr; } }
.tx-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.tx-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.tx-card__icon {
  width: 56px;
  height: 56px;
  background: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  margin-bottom: 22px;
}
.tx-card__icon svg { width: 28px; height: 28px; }
.tx-card h3 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tx-card p {
  color: var(--bone-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.tx-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.tx-card ul li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 14px;
  color: var(--bone-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: 0;
  top: 14px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  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.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tx-card__price strong {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 22px;
  color: var(--brass);
  letter-spacing: 0;
  margin-left: 8px;
  text-transform: none;
}

/* Comparison table */
.compare-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.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(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.compare-tbl tbody tr:last-child td { border-bottom: 0; }
.compare-tbl tbody tr:hover td { background: rgba(196,155,91,0.04); }
.compare-tbl .row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-family: var(--font-disp);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.compare-tbl .row-label .pop {
  display: inline-block;
  padding: 3px 9px;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  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.15em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
}

/* Why-choose-us 4-col with icons */
.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(--ink-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.why-card:hover { border-color: var(--brass); transform: translateY(-3px); }
.why-card__icon {
  width: 56px;
  height: 56px;
  background: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  margin-bottom: 18px;
}
.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(--bone-2);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* How-it-works numbered process */
.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(--ink-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 24px 28px;
  text-align: center;
  position: relative;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border: 2px solid var(--brass);
  border-radius: 50%;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 26px;
  color: var(--brass);
  background: var(--ink);
}
.step h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.step p { color: var(--bone-2); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* CTA bar */
.cta-bar {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border: 1px solid var(--brass);
  border-radius: 12px;
  padding: 40px 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: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(196,155,91,0.10) 0%, transparent 70%);
  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, 36px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cta-bar p {
  margin: 0;
  color: var(--bone-2);
  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(--ink-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 48px);
  max-width: 760px;
  margin: 0 auto;
}
.quote-card__pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.quote-card__pills .hero__pill { background: var(--ink); }
.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.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--border);
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--bone);
  border-radius: 6px;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none;
  border-color: var(--brass);
}
@media (max-width: 600px) { .quote-form { grid-template-columns: 1fr; } }

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

/* Star rating */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--brass);
  margin-bottom: 14px;
  letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════════
   FINANCING PAGE
   Builds on the brass/ink system: payment calculator, rate cards,
   stat strip, requirement list, application form.
   ════════════════════════════════════════════════════════════════ */

/* Financing hero — a touch shorter than the home hero */
.hero--fin { min-height: clamp(440px, 64vh, 620px); }
.hero--fin .hero__title { font-size: clamp(46px, 7.5vw, 104px); }

/* ─── Trust stat strip ──────────────────────────────────────────── */
.fin-stats {
  background: var(--ink-2);
  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(--brass);
  letter-spacing: -0.02em;
}
.fin-stat__num span {
  font-size: 0.42em;
  font-weight: 600;
  color: var(--bone-2);
  margin-left: 4px;
  letter-spacing: 0;
}
.fin-stat__label {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  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(3) { border-left: 0; }
  .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(--ink-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.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.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc__val {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 22px;
  color: var(--bone);
  letter-spacing: 0.01em;
}
.calc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Range slider — brass fill, custom thumb */
.calc input[type="range"] {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(to right,
    var(--brass) 0%, var(--brass) var(--fill),
    var(--ink-3) var(--fill), var(--ink-3) 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: var(--bone);
  border: 3px solid var(--brass);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  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 rgba(196,155,91,0.22);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bone);
  border: 3px solid var(--brass);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  cursor: pointer;
}
.calc input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 100px;
  background: var(--ink-3);
}
.calc input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 100px;
  background: var(--brass);
}

/* Result panel */
.calc__result {
  background: linear-gradient(155deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border: 1px solid var(--brass);
  border-radius: 12px;
  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(196,155,91,0.14) 0%, transparent 70%);
  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.2em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 6px;
}
.calc__payment {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-disp);
  font-weight: 800;
  color: var(--bone);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.calc__payment #outMonthly { font-size: clamp(46px, 13vw, 92px); }
.calc__currency { font-size: clamp(24px, 6vw, 42px); color: var(--brass); }
.calc__per {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-left: 4px;
}
.calc__breakdown {
  margin-top: 26px;
  border-top: 1px solid var(--border-2);
  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: var(--bone-2);
}
.calc__brk span { min-width: 0; }
.calc__brk strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  color: var(--bone);
}
.calc__disclaimer {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}

/* ─── Rate / term cards ─────────────────────────────────────────── */
.rate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  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(--ink-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
  position: relative;
}
.rate-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.rate-card--feature {
  border-color: var(--brass);
  background: linear-gradient(165deg, var(--ink-2) 0%, rgba(196,155,91,0.06) 100%);
}
@media (min-width: 881px) { .rate-card--feature { transform: scale(1.04); } }
@media (min-width: 881px) { .rate-card--feature:hover { transform: scale(1.04) translateY(-4px); } }
.rate-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.rate-card__term {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(52px, 9vw, 64px);
  line-height: 0.85;
  color: var(--bone);
  letter-spacing: -0.02em;
}
.rate-card__term small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.rate-card__apr {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-top: 20px;
}
.rate-card__pay {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 38px;
  color: var(--bone);
  letter-spacing: -0.01em;
  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(--bone-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(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}
.rate-card .btn { margin-top: auto; }

/* ─── Requirements list ─────────────────────────────────────────── */
.fin-reqs__title {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 32px 0 14px;
  color: var(--brass);
}
.fin-reqs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fin-reqs li {
  position: relative;
  padding: 11px 0 11px 30px;
  color: var(--bone-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(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

/* ─── Application form card ─────────────────────────────────────── */
.fin-form-card { border-radius: 12px; }
.fin-form-card__sub {
  color: var(--bone-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);
}

/* Reduced-motion: keep feature card from animating scale */
@media (prefers-reduced-motion: reduce) {
  .rate-card--feature, .rate-card:hover, .rate-card--feature:hover { transform: none; }
}

/* ─── Financing: small-screen refinements ───────────────────────── */
@media (max-width: 600px) {
  /* Calculator stacks; tighten padding so it doesn't feel cramped */
  .calc { margin-top: 32px; gap: 18px; }
  .calc__controls { padding: 24px 20px; gap: 24px; }
  .calc__result { padding: 26px 22px; }
  /* On a stacked layout the result reads better top-aligned */
  .calc__result-inner { align-self: flex-start; }

  /* Stat numbers shrink a hair so the unit suffix never wraps awkwardly */
  .fin-stat { padding: 24px 20px; }

  /* Rate cards: feature card has no scale on mobile, give badge room */
  .rate-cards { margin-top: 36px; gap: 30px; }
  .rate-card { padding: 30px 24px; }

  /* CTA bar: stack text above buttons, buttons go full width */
  .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; }
}

/* Larger touch targets for the sliders on coarse pointers */
@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; }
}

/* Hard guarantee: nothing in the financing flow forces horizontal scroll */
.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 (privacy / terms) ─────────────────────────────── */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 3vw, 30px);
  margin: 48px 0 16px;
  color: var(--bone);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  margin: 28px 0 10px;
  color: var(--bone);
}
.legal p, .legal li {
  color: var(--bone-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(--brass); }
.legal a:hover { color: var(--brass-2); }
.legal__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}
.legal__note {
  margin-top: 48px;
  padding: 18px 22px;
  border-left: 3px solid var(--border-2);
  background: var(--ink-2);
  font-size: 14px;
  color: var(--muted);
}

/* ─── Text cursor proximity ─────────────────────────────────────── */
/* Selectors are deliberately scoped under .cursor-prox so they win over
   broad rules like `.hero__title span { display:block; ... }`.          */
.cursor-prox { display: inline; }

.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;
}

/* Visually-hidden full label for screen readers (letters are aria-hidden). */
.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;
}

/* ═══════════════════════════════════════════════════════════════════
   Shipment tracking (public)
   ═══════════════════════════════════════════════════════════════════ */
.iv-track-search { max-width: 640px; margin: 28px auto 0; }
.track-form { display: flex; gap: 12px; }
.track-form input {
  flex: 1; background: var(--ink-2); border: 1px solid var(--border);
  padding: 16px 18px; font: inherit; font-size: 15px; color: var(--bone);
  border-radius: 8px; letter-spacing: 0.02em;
}
.track-form input:focus { outline: none; border-color: var(--brass); }
.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; }
}

/* Status card — icon + title + description + illustration */
.iv-track-card {
  position: relative; overflow: hidden;
  max-width: 760px; margin: 36px auto 0;
  background: var(--ink-2); border: 1px solid var(--border);
  border-radius: 16px; padding: clamp(26px, 4vw, 40px);
  min-height: 168px;
}
.iv-track-card--delivered { border-color: rgba(94,142,90,0.5); }
.iv-track-card--delayed, .iv-track-card--cancelled { border-color: rgba(196,118,43,0.5); }
.iv-track-card--approved, .iv-track-card--completed { border-color: rgba(94,142,90,0.5); }
.iv-track-card--more_info { border-color: rgba(196,118,43,0.5); }
.iv-track-card__main { position: relative; z-index: 1; max-width: 70%; }
.iv-track-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--ink); border: 1px solid var(--border);
  color: var(--brass); margin-bottom: 18px;
}
.iv-track-card--delivered .iv-track-card__icon { color: #7FB07A; }
.iv-track-card--delayed .iv-track-card__icon, .iv-track-card--cancelled .iv-track-card__icon { color: #D98C3D; }
.iv-track-card--approved .iv-track-card__icon, .iv-track-card--completed .iv-track-card__icon { color: #7FB07A; }
.iv-track-card--more_info .iv-track-card__icon { color: #D98C3D; }
.iv-track-card__code {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.iv-track-card__title {
  font-family: var(--font-disp); font-size: clamp(24px, 3.5vw, 32px);
  line-height: 1.1; color: var(--bone); margin: 0 0 10px;
}
.iv-track-card__desc { color: var(--bone-2); margin: 0; max-width: 46ch; line-height: 1.6; }
.iv-track-card__illus {
  position: absolute; bottom: -8px; right: -6px; width: 168px; height: 140px;
  object-fit: contain; pointer-events: none; opacity: 0.95; z-index: 0;
}
@media (max-width: 560px) {
  .iv-track-card__main { max-width: 100%; }
  .iv-track-card__illus { width: 110px; height: 92px; opacity: 0.35; }
}

.track-banner {
  max-width: 760px; margin: 16px auto 0; border-radius: 8px;
  padding: 14px 18px; font-size: 14px; font-weight: 500;
}
.track-banner--delayed { background: rgba(196,118,43,0.14); border: 1px solid rgba(196,118,43,0.5); color: #E5A968; }
.track-banner--cancelled { background: rgba(110,31,43,0.18); border: 1px solid rgba(110,31,43,0.6); color: #D98A95; }

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

/* Details grid */
.iv-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: 10px; overflow: hidden;
}
.iv-track-meta__item { background: var(--ink-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.iv-track-meta__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.iv-track-meta__v { color: var(--bone); font-size: 14px; }
.iv-track-arrow { color: var(--brass); padding: 0 4px; }

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

/* Not-found / empty card */
.iv-track-empty {
  max-width: 560px; margin: 40px auto 0; text-align: center;
  background: var(--ink-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 44px 32px;
}
.iv-track-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--border); color: var(--muted); margin-bottom: 18px;
}
.iv-track-empty h3 { font-family: var(--font-disp); font-size: 22px; color: var(--bone); margin: 0 0 10px; }
.iv-track-empty p { color: var(--bone-2); line-height: 1.6; margin: 0 0 22px; }

/* ─── Merch (quiet homepage shop strip) ─────────────────────────────── */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.merch-card {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--bone);
  transition: border-color .2s ease, transform .2s ease;
}
.merch-card:hover { border-color: var(--brass); transform: translateY(-3px); }
.merch-card__img {
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  position: relative;
  overflow: hidden;
}
.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.04); }
.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 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.merch-card__name {
  font-family: var(--font-disp);
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--bone);
}
.merch-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.merch-card__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* ── Parts counter (ported feature — styled to this theme) ─────── */
.part-no {
  position: absolute; top: 12px; left: 12px;
  background: rgba(10,10,10,.72); color: var(--brass);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  padding: 4px 10px; border: 1px solid var(--brass-2); border-radius: var(--r-sm, 2px);
  backdrop-filter: blur(2px);
}
.part-fits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.part-fits span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: var(--brass); }
.part-fits em {
  font-style: normal; font-family: var(--font-mono); font-size: 10px;
  color: var(--bone-2); border: 1px solid var(--border); padding: 2px 8px;
}

.merch-card__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brass);
}
.merch-card__price--muted { color: var(--muted); }
.merch-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.merch-card:hover .merch-card__cta { color: var(--brass); }

@media (max-width: 900px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .merch-grid { grid-template-columns: 1fr; }
}

/* ─── Merch page + waitlist (sold-out / notify-me) ──────────────────── */
.btn--sm { padding: 9px 16px; font-size: 11px; }

.merch-card__img { position: relative; }
.merch-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(15, 17, 21, 0.78);
  border: 1px solid var(--border-2);
  padding: 5px 9px;
  border-radius: 3px;
  backdrop-filter: blur(2px);
}
/* Static (non-link) cards on the shop page shouldn't lift like the
   clickable homepage cards, but the image still gets a gentle zoom. */
.merch-card--static:hover { transform: none; border-color: var(--border); }
.merch-card--static:hover .merch-card__img img { transform: scale(1.03); }
.merch-card--static .merch-card__foot { align-items: center; }

.merch-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  color: var(--muted);
}
.merch-empty__mark { color: var(--brass); font-size: 26px; margin-bottom: 12px; }
.merch-empty p { max-width: 460px; margin: 0 auto; line-height: 1.6; }
.merch-empty a { color: var(--brass); }

.merch-modal__err {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #E5897B;
  background: rgba(110, 31, 43, 0.18);
  border: 1px solid var(--oxblood);
  border-radius: 4px;
  padding: 9px 11px;
}
.merch-done__mark {
  width: 54px;
  height: 54px;
  margin: 4px auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--ink);
  background: var(--brass);
}

/* ─── Merch sizes (card labels + modal picker) ──────────────────────── */
.merch-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.merch-card__sizes span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
}

.merch-size__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.merch-size__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.merch-size__pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--bone-2);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 8px 14px;
  min-width: 44px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.merch-size__pill:hover { border-color: var(--brass); color: var(--bone); }
.merch-size__pill.is-sel {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}


/* ── Videos (film room) ──────────────────────────────────────────── */
.vid-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.vid-card { margin:0; background:var(--paper-2); display:flex; flex-direction:column; }
.vid-card__frame { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.vid-card__frame video, .vid-card__frame iframe { width:100%; height:100%; display:block; border:0; object-fit:cover; }
.vid-card__body { padding:16px 18px 20px; }
.vid-card__title { font-family:var(--font-disp); font-style:italic; font-weight:800; text-transform:uppercase; font-size:19px; line-height:1.05; color:var(--ink); }
.vid-card__caption { margin-top:7px; color:var(--ink-2); font-size:14px; line-height:1.6; }
/* Oxblood is a fill colour — as text on ink it lands at 1.7:1, so links use brass. */
.vid-card__link { display:inline-block; margin-top:11px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--brass); }
@media (max-width:760px){ .vid-grid { grid-template-columns:1fr; } }


/* ════════ FOOTER — "shop counter" (Ironvale) ════════
   Left-weighted and typographic: the phone number is the largest thing on
   the page, hours set as a small ledger table, links in one rule-separated
   row. No card grid, no columns of equal weight. */
.ftr-shop { background: var(--ink-2); border-top: 3px solid var(--brass); padding: clamp(48px,7vw,86px) 0 28px; }
.ftr-shop__top { display: grid; grid-template-columns: 1.25fr .9fr auto; gap: clamp(28px,5vw,72px); align-items: start; }

/* ── Review scores ───────────────────────────────────────────────────
   Number first, one star beside it. Deliberately not five rounded-up
   stars: 4.9 should not read as a perfect score. ── */
.rated { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rated__item { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rated__item > a { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.rated__score { font-family: var(--font-disp); font-weight: 700; font-size: 26px;
  line-height: 1; color: var(--bone); }
.rated__star { color: var(--brass); font-size: 17px; line-height: 1; }
.rated__src { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.rated__item > a:hover .rated__score,
.rated__item > a:focus-visible .rated__score { color: var(--brass); }
.ftr-shop__lbl { display:block; font-family: var(--font-mono); font-size: 12px; letter-spacing:.24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ftr-shop__num { display:block; font-family: var(--font-disp); font-weight:700; letter-spacing:-.02em;
  font-size: clamp(38px,6.4vw,80px); line-height:1; color: var(--bone); text-decoration:none; }
.ftr-shop__num:hover, .ftr-shop__num:focus-visible { color: var(--brass); }
.ftr-shop__mail { display:inline-block; margin-top:14px; font-size:17px; color: var(--brass);
  border-bottom:1px solid var(--brass-2); text-decoration:none;
  /* Was a 31px-tall tap target; padded to clear the 44px guideline. */
  padding:7px 0; }
.ftr-shop__where address { font-style:normal; font-size:17px; line-height:1.6; color: var(--bone-2); margin:0 0 18px; }
/* The address links to the map when one is set — give it an affordance so it
   does not read as plain text. */
.ftr-shop__where address a { color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border-2); transition: color .15s ease, border-color .15s ease; }
.ftr-shop__where address a:hover,
.ftr-shop__where address a:focus-visible { color: var(--brass); border-color: var(--brass); }
.ftr-shop__hours { border-collapse:collapse; font-size:15px; }
.ftr-shop__hours th { text-align:left; font-weight:500; color: var(--muted); padding:3px 22px 3px 0; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; }
.ftr-shop__hours td { color: var(--bone-2); padding:3px 0; }
.ftr-shop__links { display:flex; flex-wrap:wrap; gap:0; margin: clamp(34px,5vw,56px) 0 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ftr-shop__links a { padding:16px 22px 16px 0; margin-right:22px; font-size:15px; color: var(--bone-2);
  text-decoration:none; border-right:1px solid var(--border); min-height:48px; display:inline-flex; align-items:center; }
.ftr-shop__links a:last-child { border-right:0; }
.ftr-shop__links a:hover, .ftr-shop__links a:focus-visible { color: var(--brass); }
.ftr-shop__base { display:flex; flex-wrap:wrap; align-items:baseline; gap:18px; padding-top:22px;
  font-size:14px; color: var(--muted); }
.ftr-shop__mark { font-family: var(--font-disp); font-weight:700; font-size:20px; letter-spacing:.16em; color: var(--bone); }
/* Three columns need room; drop the reviews to a second row before the
   whole footer stacks. */
@media (max-width:1040px){
  .ftr-shop__top { grid-template-columns: 1.25fr .9fr; }
  .ftr-shop__rated { grid-column: 1 / -1; }
  .rated { flex-direction: row; gap: clamp(20px,4vw,44px); flex-wrap: wrap; }
}
@media (max-width:820px){
  .ftr-shop__top { grid-template-columns:1fr; }
}


/* ════════ CONTACT — "counter" (Ironvale) ════════ */
.ctc-counter { padding: clamp(52px,8vw,104px) 0 clamp(48px,7vw,96px); background: var(--ink); }
.ctc-counter__head { margin-bottom: clamp(30px,4vw,48px); }
.ctc-counter__eyebrow { display:block; font-family: var(--font-mono); font-size:12.5px; letter-spacing:.26em;
  text-transform:uppercase; color: var(--brass); margin-bottom:12px; }
.ctc-counter__h1 { font-family: var(--font-disp); font-weight:700; font-size: clamp(40px,7vw,92px);
  line-height:.95; letter-spacing:-.02em; color: var(--bone); margin:0; }
.ctc-counter__body { display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(26px,4vw,64px); align-items:start; }
.ctc-counter__panel { background: var(--ink-2); border:1px solid var(--border); border-left:3px solid var(--brass);
  padding: clamp(24px,3.4vw,38px); }
.ctc-counter__num { display:block; font-family: var(--font-disp); font-weight:700; letter-spacing:-.02em;
  font-size: clamp(32px,4.6vw,56px); line-height:1; color: var(--brass); text-decoration:none; }
.ctc-counter__num:hover, .ctc-counter__num:focus-visible { color: var(--bone); }
.ctc-counter__note { margin:14px 0 24px; color: var(--bone-2); font-size:15.5px; max-width:38ch; }
.ctc-counter__dl { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0;
  border-top:1px solid var(--border); padding-top:20px; }
.ctc-counter__dl dt { font-family: var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
.ctc-counter__dl dd { margin:0; color: var(--bone-2); font-size:15.5px; line-height:1.5; }
.ctc-counter__dl a { color: var(--brass); text-decoration:none; }
.ctc-counter__map { display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:13px;
  letter-spacing:.1em; color: var(--brass); }
.ctc-counter__form h2 { font-family: var(--font-disp); font-size: clamp(24px,2.6vw,32px); color: var(--bone); margin:0 0 6px; }
.ctc-counter__formnote { color: var(--muted); margin:0 0 22px; font-size:15px; }
@media (max-width:900px){ .ctc-counter__body { grid-template-columns:1fr; } }


/* ════════ HEADER — two-tier (Ironvale) ════════ */
.hdr-tier { position:sticky; top:0; z-index:80; }
.hdr-tier__strip { background: var(--brass); color:#1B1508; }
.hdr-tier__strip .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px;
  min-height:40px; font-family: var(--font-mono); font-size:12.5px; letter-spacing:.1em; }
.hdr-tier__tel { color:#1B1508; font-weight:700; text-decoration:none; min-height:40px; display:inline-flex; align-items:center; }
/* Call and enquire sit together on the right of the strip, so the two ways of
   reaching the shop are in the same place on every page. */
.hdr-tier__acts { display:flex; align-items:center; gap:clamp(10px,1.6vw,18px); }
/* The enquiry action lives in the main header row rather than the brass strip.
   As a dark slab on brass, ending short of the viewport edge where the wrap
   stops, it read as a misalignment rather than a control — people did not see
   it as a button. Filled brass on the dark row is unmistakable, and because
   the header is sticky it stays on screen for the whole visit. */
.hdr-tier__ask {
  font-family: var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1B1508;
  background: var(--brass);
  border:0;
  cursor:pointer;
  margin-left:12px;
  padding:0 18px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  transition: background .15s ease, transform .15s ease;
}
.hdr-tier__ask:hover, .hdr-tier__ask:focus-visible { background: var(--brass-2); }
.hdr-tier__ask svg { flex-shrink:0; }
.hdr-tier__row .hdr-tier__ask { margin-left:auto; margin-right:12px; }
@media (min-width:1051px){ .hdr-tier__row .hdr-tier__ask { margin-left:12px; margin-right:0; } }
@media (max-width:560px){ .hdr-tier__ask { display:none; } }
/* The hours are the least urgent thing in the strip — they give way first so
   the phone number and the enquiry button always fit. */
@media (max-width:640px){
  .hdr-tier__open { display:none; }
  .hdr-tier__strip .wrap { justify-content:flex-end; }
}
@media (max-width:380px){
  .hdr-tier__strip .wrap { font-size:11.5px; }
}
.hdr-tier__main { background: var(--ink); border-bottom:1px solid var(--border); }
.hdr-tier__row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; }
/* Now that the header is pinned it occupies its height for the whole visit, so
   the logo row tightens on phones — 123px of permanent chrome on an 844px
   screen was too much to give up. Declared after the base rule: an earlier
   media query loses to a later rule of equal specificity. */
@media (max-width:640px){ .hdr-tier__row { min-height:60px; } }
.hdr-tier__mark { font-family: var(--font-disp); font-weight:700; font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.2em; color: var(--bone); text-decoration:none; }
.hdr-tier__mark img { max-height:44px; width:auto; display:block; }
.hdr-tier__nav { display:flex; align-items:center; gap:4px; }
.hdr-tier__nav a { font-family: var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--bone-2); text-decoration:none; padding:12px 14px; min-height:48px; display:inline-flex; align-items:center; }
.hdr-tier__nav a:hover, .hdr-tier__nav a:focus-visible { color: var(--brass); }
.hdr-tier__nav a.is-on { color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }

.hdr-tier__cta:hover { background: var(--brass); color: var(--ink) !important; }
@media (max-width:1050px){ .hdr-tier__nav { display:none; } }
@media (min-width:1051px){ .hdr-tier .nav-toggle { display:none; } }


/* ════════ LAYOUT SHAPE — ledger rows (Ironvale) ════════
   The inventory reads like a workshop ledger rather than a card grid: one
   full-width row per car, photo left, specs centre, price right. */
.inv-grid { display:flex !important; flex-direction:column; gap:0 !important;
  border-top:1px solid var(--border); }
.inv-grid .feat-card { display:grid !important; grid-template-columns: 300px 1fr auto;
  gap:clamp(18px,3vw,40px); align-items:center; border:0 !important; border-bottom:1px solid var(--border) !important;
  padding:20px 0; background:transparent !important; }
.inv-grid .feat-card:hover { background: var(--ink-2) !important; }
.inv-grid .feat-card-img { aspect-ratio:16/10 !important; border-radius:2px; overflow:hidden; }
.inv-grid .feat-card__body { padding:0 !important; display:flex; flex-direction:column; gap:6px; }
.inv-grid .feat-card__title { font-size:clamp(20px,2.4vw,28px) !important; }
.inv-grid .feat-card__specs { display:flex; flex-wrap:wrap; gap:6px 18px; }
.inv-grid .feat-card__price { font-size:clamp(22px,2.6vw,32px) !important; white-space:nowrap;
  align-self:center; padding-left:clamp(12px,2vw,28px); border-left:1px solid var(--border); }
@media (max-width:820px){
  .inv-grid .feat-card { grid-template-columns:1fr; }
  .inv-grid .feat-card__price { border-left:0; padding-left:0; }
}
/* Car page: gallery full width on top, specs in a wide band beneath. */
.det-cols { grid-template-columns:1fr !important; }
.det-side { position:static !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px; align-items:start; }


/* ════════ HOME SHAPE — full-bleed slab (Ironvale) ════════
   Hero runs edge to edge and tall; the featured strip below is a horizontal
   scroll rail rather than a grid, so the homepage reads nothing like a
   card-grid template. */
.hero { min-height: clamp(560px, 82vh, 860px); }
.hero__inner { padding-bottom: clamp(40px,7vw,90px); }
.hero__title { font-size: clamp(58px, 10vw, 150px) !important; }
.feat { display:flex !important; gap:18px !important; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; -webkit-overflow-scrolling:touch; }
.feat > .feat-card { flex:0 0 clamp(280px, 34vw, 420px); scroll-snap-align:start; }
.feat::-webkit-scrollbar { height:6px; }
.feat::-webkit-scrollbar-thumb { background: var(--border-2); }


/* ════════ FINANCING — ledger + instrument panel (Ironvale) ════════ */
.fin-ledger { background: var(--ink); padding: clamp(48px,7vw,96px) 0; }
.fin-ledger__eyebrow { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brass); }
.fin-ledger__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(36px,6vw,84px);
  line-height:.98; letter-spacing:-.02em; color:var(--bone); margin:12px 0 16px; }
.fin-ledger__head p { color:var(--bone-2); max-width:56ch; }
.fin-ledger__terms { width:100%; border-collapse:collapse; margin-top:clamp(30px,4vw,52px); }
.fin-ledger__terms caption { text-align:left; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding-bottom:14px; }
.fin-ledger__terms th { text-align:left; width:200px; padding:16px 20px 16px 0; vertical-align:top;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); border-top:1px solid var(--border); font-weight:500; }
.fin-ledger__terms td { padding:16px 0; border-top:1px solid var(--border); color:var(--bone-2); font-size:16.5px; }
/* The 200px label column left values about 150px on a phone — three or four
   words a line. Below 620px the rows stack: label, then value beneath it. */
@media (max-width:620px){
  .fin-ledger__terms, .fin-ledger__terms tbody, .fin-ledger__terms tr { display:block; width:100%; }
  .fin-ledger__terms th, .fin-ledger__terms td { display:block; width:auto; }
  .fin-ledger__terms th { padding:16px 0 0; border-top:1px solid var(--border); }
  .fin-ledger__terms td { padding:4px 0 16px; border-top:0; }
}
.fin-instrument { background: var(--ink-2); border-top:3px solid var(--brass); padding: clamp(44px,6vw,84px) 0; }
.fin-instrument__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:start; }
.fin-instrument__dials h2, .fin-apply__intro h2 { font-family:var(--font-disp); font-size:clamp(26px,3.2vw,40px); color:var(--bone); margin:0 0 22px; }
.fin-dial { margin-bottom:22px; }
.fin-dial label { display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fin-dial input[type=range] { width:100%; accent-color: var(--brass); height:34px; }
.fin-dial output { display:block; font-family:var(--font-disp); font-size:22px; color:var(--bone); margin-top:4px; }
.fin-instrument__readout { background: var(--ink); border:1px solid var(--border); border-left:3px solid var(--brass); padding:clamp(22px,3vw,34px); }
.fin-instrument__lbl { font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.fin-instrument__big { font-family:var(--font-disp); font-weight:700; font-size:clamp(46px,7vw,86px);
  line-height:1; color:var(--brass); margin:6px 0 18px; }
.fin-instrument__readout dl { display:grid; grid-template-columns:1fr auto; gap:8px 16px; margin:0 0 16px;
  border-top:1px solid var(--border); padding-top:16px; }
.fin-instrument__readout dt { color:var(--muted); font-size:14.5px; }
.fin-instrument__readout dd { margin:0; color:var(--bone-2); font-family:var(--font-mono); }
.fin-instrument__readout p { font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.fin-apply { background: var(--ink); padding: clamp(44px,6vw,84px) 0; }
.fin-apply__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,60px); align-items:start; }
.fin-apply__intro p { color:var(--bone-2); }
.fin-apply__call { margin-top:20px; font-family:var(--font-mono); font-size:14px; }
.fin-apply__call a { color:var(--brass); }
.fin-fine { font-size:13.5px; color:var(--muted); margin-top:14px; }
@media (max-width:900px){ .fin-instrument__grid, .fin-apply__grid { grid-template-columns:1fr; } }


/* ════════ SHIPPING — run sheet (Ironvale) ════════ */
.ship-run { background: var(--ink); padding: clamp(46px,6vw,88px) 0; }
.ship-run__h { font-family:var(--font-disp); font-size:clamp(28px,3.6vw,46px); color:var(--bone); margin:0 0 30px; }
.ship-run__list { list-style:none; margin:0; padding:0; }
.ship-run__list li { display:grid; grid-template-columns:110px 1fr; gap:clamp(14px,3vw,36px);
  padding:26px 0; border-top:1px solid var(--border); align-items:start; }
.ship-run__n { font-family:var(--font-disp); font-weight:700; font-size:clamp(34px,4.6vw,58px);
  color:var(--brass); line-height:1; }
.ship-run__list h3 { font-family:var(--font-disp); font-size:22px; color:var(--bone); margin:0 0 6px; }
.ship-run__list p { margin:0; color:var(--bone-2); max-width:62ch; }
.ship-slip { background:var(--ink-2); border-top:3px solid var(--brass); padding:clamp(44px,6vw,84px) 0; }
.ship-slip__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,60px); align-items:start; }
.ship-slip__intro h2 { font-family:var(--font-disp); font-size:clamp(26px,3.2vw,40px); color:var(--bone); margin:0 0 12px; }
.ship-slip__intro p { color:var(--bone-2); }
.ship-slip__tel { margin-top:18px; font-family:var(--font-mono); font-size:14px; }
.ship-slip__tel a { color:var(--brass); }
.ship-slip__form { background:var(--ink); border:1px solid var(--border); border-left:3px solid var(--brass); padding:clamp(22px,3vw,34px); }
.ship-track { background:var(--ink); padding:clamp(36px,5vw,64px) 0; border-top:1px solid var(--border); }
.ship-track h2 { font-family:var(--font-disp); font-size:clamp(22px,2.6vw,32px); color:var(--bone); margin:0 0 6px; }
.ship-track p { color:var(--muted); margin:0 0 18px; }
.ship-track__form { max-width:460px; }
@media (max-width:900px){ .ship-slip__grid { grid-template-columns:1fr; }
  .ship-run__list li { grid-template-columns:1fr; } }


/* ════════ SMALL PAGES — shapes (Ironvale) ════════
   Shop-floor language: hard rules, mono labels, left-weighted blocks. */
.merch-page .merch-grid { display:flex !important; flex-direction:column; gap:0 !important;
  border-top:1px solid var(--border); }
.merch-page .merch-card { display:grid !important; grid-template-columns:180px 1fr auto; gap:24px;
  align-items:center; border:0 !important; border-bottom:1px solid var(--border) !important; padding:18px 0; }
.merch-page .merch-card__img { aspect-ratio:1 !important; }
.merch-page .merch-card__body { padding:0 !important; }
.merch-page .merch-card__foot { flex-direction:column; align-items:flex-end; gap:10px; }
.vid-grid { grid-template-columns:1fr !important; }
.vid-card { display:grid !important; grid-template-columns:1.4fr 1fr; align-items:center; }
.about-grid, .zig { border-top:1px solid var(--border); }
@media (max-width:820px){ .merch-page .merch-card, .vid-card { grid-template-columns:1fr !important; } }


/* 404 — Ironvale */
.e404-shop { background:var(--ink); padding:clamp(60px,11vw,150px) 0; }
.e404-shop__code { font-family:var(--font-mono); font-size:13px; letter-spacing:.34em; color:var(--brass); }
.e404-shop h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(38px,7vw,96px);
  line-height:.95; color:var(--bone); margin:14px 0 16px; max-width:16ch; }
.e404-shop p { color:var(--bone-2); max-width:52ch; }
.e404-shop__acts { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }


/* ABOUT — statement (Ironvale) */
.ab-statement { background:var(--ink); padding:clamp(52px,8vw,110px) 0 clamp(30px,4vw,50px); }
.ab-statement__eyebrow { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.ab-statement h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(38px,7vw,96px);
  line-height:.95; color:var(--bone); margin:14px 0 20px; max-width:18ch; }
.ab-statement__lead { color:var(--bone-2); font-size:19px; line-height:1.75; max-width:62ch; }
.ab-promises { background:var(--ink-2); border-top:3px solid var(--brass); padding:clamp(44px,6vw,84px) 0; }
.ab-promises h2 { font-family:var(--font-disp); font-size:clamp(24px,3vw,38px); color:var(--bone); margin:0 0 26px; }
.ab-promise { display:grid; grid-template-columns:90px 1fr;
  column-gap:clamp(14px,3vw,32px); row-gap:4px;
  padding:24px 0; border-top:1px solid var(--border); }
/* Three children in a two-column grid: auto-placement dropped the paragraph
   back into the 90px number column, so the body text wrapped two words per
   line. Number spans both rows on the left; title and body stack on the right. */
.ab-promise > span { grid-column:1; grid-row:1 / span 2; }
.ab-promise h3, .ab-promise p { grid-column:2; }
.ab-promise span { font-family:var(--font-disp); font-weight:700; font-size:clamp(28px,4vw,48px); color:var(--brass); line-height:1; }
.ab-promise h3 { font-family:var(--font-disp); font-size:21px; color:var(--bone); margin:0 0 6px; }
.ab-promise p { margin:0; color:var(--bone-2); max-width:62ch; }
@media (max-width:760px){
  .ab-promise { grid-template-columns:1fr; gap:6px; }
  .ab-promise > span, .ab-promise h3, .ab-promise p { grid-column:1; grid-row:auto; }
}


/* ════════ ALWAYS-ON REQUEST CONTROL (Ironvale) ════════ */
/* Stacked at every width — the two actions read as one column on a phone the
   same way they do in the floating card on desktop. */
.askbar { position:fixed; z-index:70; left:0; right:0; bottom:0; display:flex; flex-direction:column;
  border-top:2px solid var(--brass); background:var(--ink-2); }
.askbar a, .askbar button { flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; font-family:var(--font-mono); font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  border:0; cursor:pointer; text-decoration:none; }
/* The divider sits on whichever action comes first, so reordering the two in
   the markup can never strand it on the wrong edge. */
.askbar > :first-child { border-bottom:1px solid var(--border); }
.askbar__call { background:var(--ink-2); color:var(--bone); }
.askbar__ask { background:var(--brass); color:#1B1508; font-weight:700; }
@media (min-width:861px){
  .askbar { left:auto; right:26px; bottom:26px; border:1px solid var(--border);
    border-top:2px solid var(--brass); box-shadow:0 18px 40px -20px rgba(0,0,0,.8); }
  .askbar a, .askbar button { min-width:210px; justify-content:flex-start; padding:0 20px; }
}
/* Two stacked 56px rows plus the top rule. */
@media (max-width:860px){ body { padding-bottom:116px; } }


/* ════════ INVENTORY — floor board (Ironvale) ════════ */
.iv-board { background:var(--ink); padding:clamp(40px,6vw,80px) 0; }
.iv-board__head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.iv-board__eyebrow { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
.iv-board__head h1 { font-family:var(--font-disp); font-weight:700; font-size:clamp(32px,5vw,66px); color:var(--bone); margin:10px 0 0; }
.iv-board__tel { font-family:var(--font-mono); font-size:13.5px; color:var(--brass);
  /* A phone number is a primary action on a dealership site — it was a 24px
     tap target. Padded to a comfortable size without changing the type. */
  display:inline-block; padding:10px 0; }
.iv-board__filter { display:grid; grid-template-columns:1.6fr 1fr 1.1fr 1fr auto; gap:14px; align-items:end;
  background:var(--ink-2); border:1px solid var(--border); border-left:3px solid var(--brass); padding:18px; margin-bottom:8px; }
.iv-board__filter .form-field { margin:0; }
.iv-board__list { border-top:1px solid var(--border); }
.iv-row { display:grid; grid-template-columns:260px 1fr auto; gap:clamp(16px,3vw,36px); align-items:center;
  padding:18px 0; border-bottom:1px solid var(--border); }
.iv-row:hover { background:var(--ink-2); }
.iv-row__shot { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); }
.iv-row__shot img { width:100%; height:100%; object-fit:cover; }
.iv-row__noshot { display:flex; align-items:center; justify-content:center; height:100%;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--muted); }
.iv-row__flag { position:absolute; top:10px; left:10px; background:var(--brass); color:#1B1508;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; padding:3px 9px; }
.iv-row__name { display:block; font-family:var(--font-disp); font-weight:700; font-size:clamp(20px,2.4vw,30px);
  color:var(--bone); text-decoration:none; }
.iv-row__name:hover { color:var(--brass); }
.iv-row__spec { display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:8px 0 0; padding:0;
  font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.iv-row__money { display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  padding-left:clamp(12px,2vw,28px); border-left:1px solid var(--border); }
.iv-row__price { font-family:var(--font-disp); font-weight:700; font-size:clamp(20px,2.4vw,30px); color:var(--brass); white-space:nowrap; }
.iv-board__empty { color:var(--bone-2); padding:40px 0; }
.iv-sold { background:var(--ink-2); border-top:3px solid var(--brass); padding:clamp(34px,5vw,64px) 0; }
.iv-sold h2 { font-family:var(--font-disp); font-size:clamp(22px,2.8vw,34px); color:var(--bone); margin:0 0 18px; }
.iv-sold__row { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; }
.iv-sold__item { flex:0 0 200px; opacity:.55; }
.iv-sold__item img { width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(1); }
.iv-sold__item span { display:block; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.iv-sold__note { margin-top:16px; color:var(--bone-2); }
@media (max-width:900px){ .iv-board__filter { grid-template-columns:1fr 1fr; }
  .iv-row { grid-template-columns:1fr; } .iv-row__money { align-items:flex-start; border-left:0; padding-left:0; } }


/* ════════ INVENTORY GRID — ledger cards (Ironvale) ════════
   The ledger row worked at desktop width but wasted the page: one car per
   screenful means scrolling past four cars to see five. Same visual language
   — hard rules, mono specs — now stacked into a four-across grid. */
/* A fixed `repeat(4, 1fr)` meant the track count ignored how many cars were
   actually on the floor: a single listing (or a filter matching one or two)
   got crushed into a quarter-width card beside three empty columns. Sizing
   by track width instead lets the row settle at 3–4 across on desktop and
   step down on its own, and keeps a lone card at a proper size. */
.iv-board__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 22px;
  border-top: 0;
  align-items: start;
}
.iv-row { display:flex !important; flex-direction:column; align-items:stretch !important; gap:0; padding:0 !important;
  border:1px solid var(--border); border-bottom:1px solid var(--border) !important; background:var(--ink-2); }
.iv-row:hover { background:var(--ink-3) !important; border-color:var(--brass); }
.iv-row__shot { aspect-ratio:4/3; }
.iv-row__name { padding:16px 16px 0; font-size:20px !important; }
.iv-row__spec { padding:0 16px 18px; margin-top:8px !important; font-size:12.5px; }

/* Price and the way to act on it ride the photograph itself — bigger, bolder,
   and impossible to miss, the same treatment already used on the car detail
   page's hero photo. The card no longer needs a separate footer row (and its
   own background) just to hold two small elements. */
.iv-row__shotlink { position:absolute; inset:0; z-index:1; }
.iv-row__price {
  position:absolute; top:10px; right:10px; z-index:2;
  padding:8px 14px;
  background:var(--brass); color:var(--ink);
  font-family:var(--font-disp); font-weight:700;
  font-size:22px; line-height:1; letter-spacing:0.01em;
  box-shadow:0 8px 20px -10px rgba(0,0,0,0.9);
  pointer-events:none;
}
.iv-row__ask {
  position:absolute; bottom:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 16px;
  background:rgba(15,17,21,0.82);
  border:1px solid var(--brass); color:var(--brass);
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.iv-row__ask:hover, .iv-row__ask:focus-visible { background:var(--brass); color:var(--ink); }

.iv-board__empty { grid-column:1/-1; max-width:60ch; }
.iv-board__empty p { color: var(--bone-2); margin:0 0 14px; }
.iv-board__emptyacts { display:flex; gap:10px; flex-wrap:wrap; }

/* Price range: two fields reading as one control. */
.iv-board__pricerow { display:flex; align-items:center; gap:8px; }
.iv-board__pricerow input { width:100%; min-width:0; }
.iv-board__pricedash { color: var(--muted); flex:0 0 auto; }

/* A filtered view must always offer a way back to the full floor. */
.iv-board__active { margin:14px 0 0; font-size:14.5px; color: var(--muted); }
.iv-board__clear { color: var(--brass); text-decoration:none;
  border-bottom:1px solid var(--brass-2); padding-bottom:1px; }
.iv-board__clear:hover, .iv-board__clear:focus-visible { color: var(--bone); border-color: var(--bone); }


/* ── Keep the always-on request control clear of the live-chat bubble,
      which sits at bottom-right 24px. On desktop the bar moves left of it;
      on phones the chat bubble lifts above the bar. ── */
@media (min-width:861px){
  .askbar { right: 104px !important; }
}
@media (max-width:860px){
  /* Clears the stacked request bar (114px) when live chat is switched on. */
  .lc-root { bottom: 130px !important; }
}


/* ── Motion: Ironvale — nothing floats. Elements arrive by wiping up from
      behind a rule, like a card being slid onto a workbench.

   Two hard rules, learned the hard way:

   1. NEVER put clip-path on an element that IntersectionObserver watches.
      A fully-clipped element reports a zero-area intersection rect, so the
      observer never fires, so `is-in` is never added, so the clip is never
      released — the element hides itself permanently. Observed elements
      (.reveal and .reveal-stagger) therefore animate with opacity+transform
      only. The clip-path wipe is applied to .reveal-item, which is a *child*
      of an observed element and never observed itself.

   2. The JS adds `is-in` to the CONTAINER (.reveal / .reveal-stagger), never
      to individual items. Item rules must therefore key off the parent
      (.reveal-stagger.is-in > .reveal-item), not off .reveal-item.is-in. ── */

/* Observed directly → no clip-path. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Children of an observed container → safe to wipe. */
.reveal-stagger > .reveal-item {
  opacity: 0;
  transform: translateY(14px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .5s ease,
              transform .5s cubic-bezier(.2,.7,.3,1),
              clip-path .5s cubic-bezier(.2,.7,.3,1);
}
.reveal-stagger.is-in > .reveal-item {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
.reveal-stagger.is-in > .reveal-item:nth-child(1) { transition-delay: .04s; }
.reveal-stagger.is-in > .reveal-item:nth-child(2) { transition-delay: .10s; }
.reveal-stagger.is-in > .reveal-item:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-in > .reveal-item:nth-child(4) { transition-delay: .22s; }
.reveal-stagger.is-in > .reveal-item:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-in > .reveal-item:nth-child(6) { transition-delay: .34s; }
.reveal-stagger.is-in > .reveal-item:nth-child(7) { transition-delay: .40s; }
.reveal-stagger.is-in > .reveal-item:nth-child(8) { transition-delay: .46s; }

/* Safety net: if JS is disabled or fails, content must still be readable.
   `.js-on` is set on <html> by main.js the moment it runs. */
html:not(.js-on) .reveal,
html:not(.js-on) .reveal-stagger > .reveal-item {
  opacity: 1;
  transform: none;
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}
.btn { transition:background .18s linear, border-color .18s linear; }


/* Fullscreen photo lightbox.
   This markup previously had NO styles at all, so it rendered inline in the
   page — a stray ×, a broken <img> and the counter sat between the gallery
   and the car title, and it consumed a grid cell that disordered the layout.
   Hidden by default; the JS toggles `.is-open`. */
.det-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;   /* above the lead modal (1000) and chat widget (900) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(9, 10, 13, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.det-lightbox.is-open { display: flex; }
.det-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;      /* clicking the photo steps forward */
  user-select: none;
}
.det-lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--bone);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.det-lightbox__close:hover,
.det-lightbox__close:focus-visible { background: var(--brass); color: var(--ink); }
.det-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  color: var(--bone);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.det-lightbox__nav:hover,
.det-lightbox__nav:focus-visible { background: var(--brass); color: var(--ink); }
.det-lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.det-lightbox__nav--next { right: clamp(8px, 2vw, 24px); }
@media (max-width: 560px) {
  .det-lightbox__nav { width: 46px; height: 46px; font-size: 26px; }
}

.det-lightbox__count {
  position: absolute;
  bottom: clamp(12px, 2.5vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--bone);
}

/* ════════ CAR DETAIL — Ironvale ════════
   Photo leads, then the price panel hard beside it. Ledger rules, no rounded corners. */
.iv-detail { padding: clamp(26px,4vw,52px) 0 clamp(40px,6vw,80px); }
.iv-detail > .wrap { display:grid; grid-template-columns:1fr; gap: clamp(22px,3.5vw,40px); align-items:start; }
.iv-cartop { grid-column:1/-1; }
/* The heading is the first thing in this block now that the back link is gone,
   so it no longer needs the top margin that cleared it. */
.iv-cartop h1 { font-size: clamp(28px,4.4vw,58px); line-height:1.1; margin:0; }
.iv-flag { display:inline-block; margin-top:10px; background: var(--accent); color: var(--ink);
  font-size:14px; font-weight:700; padding:5px 14px; }

/* Gallery */
.iv-gal {  }
/* Full page width now, so a slightly wider crop and a viewport cap keep the
   photograph large without pushing everything else off the screen. */
.iv-gal__main { position:relative; aspect-ratio:16/9; max-height:76vh; overflow:hidden;
  background: var(--bg-2); border:1px solid var(--border); border-radius: var(--r); }
@media (max-width:700px){ .iv-gal__main { aspect-ratio:4/3; max-height:none; } }
.iv-gal__main img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.iv-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; }
.iv-gal__nav--prev { left:0; } .iv-gal__nav--next { right:0; }
.iv-gal__nav:hover, .iv-gal__nav:focus-visible { background: var(--accent); }
.iv-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); }
/* The strip scrolls, so it shows a scrollbar — the platform default renders
   light on this dark panel and read as a stray white bar under the thumbnails.
   Styled to match, and kept visible so the strip still signals it scrolls. */
.iv-gal__strip { display:flex; overflow-x:auto; gap:10px; margin-top:10px;
  scrollbar-width:thin; scrollbar-color: var(--brass-2) var(--ink-2);
  padding-bottom:6px; overscroll-behavior-x:contain; }
.iv-gal__strip::-webkit-scrollbar { height:8px; }
.iv-gal__strip::-webkit-scrollbar-track { background: var(--ink-2); }
.iv-gal__strip::-webkit-scrollbar-thumb { background: var(--border-2); border-radius:4px; }
.iv-gal__strip::-webkit-scrollbar-thumb:hover { background: var(--brass-2); }
.iv-gal__thumb { flex:0 0 104px; aspect-ratio:4/3; padding:0; border:2px solid transparent;
  background:none; cursor:pointer; overflow:hidden; }
.iv-gal__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.iv-gal__thumb.is-active { border-color: var(--accent); }

/* Conversion block — price, the two ways to make contact, and why to bother */
.iv-ask { background: var(--ink-2); border:1px solid var(--border); border-left:3px solid var(--brass);
  padding: clamp(22px,3.5vw,38px); border-radius: var(--r);
  /* Price and the two actions run down the left in a single readable column;
     the reassurances sit beside them so the full width is not wasted. */
  display:grid; grid-template-columns: minmax(0, 480px) 1fr;
  column-gap: clamp(28px,5vw,72px); row-gap:0; align-items:start; }
.iv-ask > * { grid-column:1; }
.iv-ask__price { font-family: var(--font-disp); font-size: clamp(46px,6.5vw,76px); line-height:1;
  color: var(--brass); margin-bottom:10px; }
.iv-ask__note { font-size:15.5px; color: var(--fg-2); margin:0 0 18px; }
.iv-ask .btn { margin-bottom:10px; }
.iv-ask__list { list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--border); }
.iv-ask__list li { position:relative; padding:6px 0 6px 26px; font-size:15.5px; color: var(--fg-2); }
.iv-ask__list li::before { content:'✓'; position:absolute; left:0; color: var(--accent); font-weight:700; }
.iv-ask__doc { display:inline-flex; align-items:center; min-height:44px; margin-top:10px; font-size:15.5px; }

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

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

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

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

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


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


/* ── Lookup + legal pages (Ironvale) ─────────────────────────────────── */
.iv-lookup { padding: clamp(30px,5vw,60px) 0; }
.iv-lookup h1 { font-size: clamp(28px,4vw,46px); margin:0 0 10px; }
.iv-lookup__lead { color: var(--fg-2); font-size:18.5px; max-width:56ch; margin:0 0 26px; }
.iv-help { margin-top:28px; padding:22px; border:1px solid var(--border); background: var(--surface);
  border-left:3px solid var(--accent); border-radius: var(--r); }
.iv-help p { margin:0 0 14px; color: var(--fg-2); }
.iv-help__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; }
.iv-legal { padding: clamp(30px,5vw,60px) 0; }
.iv-legal h1 { font-size: clamp(28px,4vw,46px); margin:0 0 6px; }
.iv-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 (Ironvale) ─────────────────────────────
   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. ── */
.iv-wanted { padding: clamp(28px,4vw,52px) 0; background: var(--bg-2); border-top:1px solid var(--border); }
.iv-wanted h2 { font-size: clamp(24px,3vw,34px); margin:0 0 10px; }
.iv-wanted p { color: var(--fg-2); max-width:60ch; margin:0 0 22px; }
.iv-wanted__form { max-width:680px; }
.iv-wanted__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.iv-wanted__f { margin-bottom:16px; }
.iv-wanted__f .field-label { display:block; font-size:16.5px; font-weight:600; margin:0 0 7px; }
.iv-wanted__f .field-hint { display:block; margin-top:6px; font-size:15px; color: var(--fg-2); }
@media (max-width:640px){ .iv-wanted__row { grid-template-columns:1fr; } }
.iv-legalhelp { padding: clamp(22px,3vw,38px) 0; border-top:1px solid var(--border); }
.iv-legalhelp p { color: var(--fg-2); margin:0 0 14px; }
.iv-legalhelp__acts { display:flex; flex-wrap:wrap; gap:12px; margin:0 !important; }


/* ── 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. ── */
.iv-detail > .wrap > * { min-width: 0; }
/* Explicit rows: the title leads, then the photograph and the price panel
   sit side by side beneath it. Without pinning .iv-cartop to row 1 it lands
   *below* the gallery — the page showed a photo and a price before naming
   the car it belonged to. */
/* Single column: the photograph gets the full width of the page and the
   purchase block sits directly beneath it, rather than the two competing for
   room side by side. Nothing here is sticky any more — the bottom purchase bar
   already keeps the price and both actions available once you scroll past. */
.iv-cartop { grid-column: 1 / -1; grid-row: 1; }
.iv-gal    { grid-column: 1 / -1; grid-row: 2; }
.iv-askcol { grid-column: 1 / -1; grid-row: 3; }
.iv-ask    { position: static; }
.iv-block { grid-column: 1 / -1; }
.iv-ask .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center;
  line-height: 1.3; padding-inline: 16px; }
.iv-ask__price { overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .iv-gal, .iv-askcol, .iv-cartop, .iv-block { grid-column: 1 !important; grid-row: auto !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(.iv-sticky.is-on) .askbar { display: none; }
.iv-sticky { padding-right: 0; }
.iv-sticky .wrap { padding-right: 84px; }   /* clear of the chat bubble */
.iv-sticky__car { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
@media (max-width: 860px) {
  .iv-sticky .wrap { padding-right: var(--gutter); gap: 8px 10px; }
  /* Was `flex: 1 1 100%`, which pushed the name onto its own row and made the
     bar three rows / ~170px tall — a fifth of a phone screen. Name and price
     now share one row, the two actions share the next. */
  .iv-sticky__car { flex: 1 1 auto; min-width: 0; max-width: 100%; font-size: 15px; }
  .iv-sticky__price { flex: 0 0 auto; margin-right: 0; }
  /* `flex: 1 1 45%` still left min-width:auto at the label's intrinsic width,
     so the two actions could not share a row and each stretched to full width
     — that is what made the bar three rows tall. Sizing to content instead,
     with a shortened secondary label, fits both on one row at 390px. */
  .iv-sticky .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 14px;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}
/* Secondary action carries a full label where there is room and a short one
   where there is not, so neither button has to be dropped on a phone. */
.iv-sticky .btn__short { display: none; }
@media (max-width: 560px) {
  .iv-sticky .btn__full { display: none; }
  .iv-sticky .btn__short { display: inline; }
}
/* The live-chat bubble must clear the purchase bar. This was a hard-coded
   92px, which assumed a bar height that no longer held once the bar wrapped —
   the bubble landed on top of "Ring the shop", the primary action on the page.
   The bar's real height is published as --iv-sticky-h by the script on the car
   page, so the clearance follows the bar at any breakpoint. */
body:has(.iv-sticky.is-on) .lc-root {
  bottom: calc(var(--iv-sticky-h, 0px) + 24px) !important;
}
/* Older browsers without :has() — keep them usable by lifting the control. */
@supports not selector(:has(*)) {
  /* Clears the stacked request bar (114px) on browsers without :has(). */
  .iv-sticky.is-on ~ .askbar,
  .askbar { bottom: 130px; }
}

/* ── Request control placement: tight to the edge, unless live chat is on
      and its bubble needs the corner. ── */
@media (min-width:861px){
  .askbar { right:20px !important; bottom:20px; }
  body.chat-on .askbar { right:96px !important; }
}

/* ════════ PAYMENT ESTIMATE — car page ════════
   Reuses the financing page's language (dials on the left, a readout panel on
   the right) so the two feel like one tool rather than two calculators. */
.pay-est { border-top:1px solid var(--border); padding-top: clamp(24px,3vw,36px); }
.pay-est__eyebrow { font-family: var(--font-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color: var(--brass); display:block; margin-bottom:8px; }
.pay-est__head h2 { font-family: var(--font-disp); font-size: clamp(24px,3vw,34px);
  color: var(--bone); margin:0 0 10px; }
.pay-est__head p { color: var(--bone-2); max-width:62ch; margin:0 0 clamp(20px,3vw,30px); }
.pay-est__grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px,3vw,40px);
  align-items:start; }
.pay-est__dial { margin-bottom:22px; }
.pay-est__dial label { display:block; font-family: var(--font-mono); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin-bottom:10px; }
.pay-est__dial input[type=range] { width:100%; accent-color: var(--brass); }
.pay-est__dial output { display:block; margin-top:8px; font-family: var(--font-mono);
  font-size:17px; color: var(--bone); }
.pay-est__apr { font-size:14px; color: var(--muted); margin:0; }
.pay-est__readout { background: var(--ink-2); border:1px solid var(--border);
  border-left:3px solid var(--brass); padding: clamp(18px,2.5vw,26px); }
.pay-est__lbl { font-family: var(--font-mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color: var(--muted); }
.pay-est__big { font-family: var(--font-disp); font-weight:700; font-size: clamp(40px,6vw,60px);
  line-height:1; color: var(--brass); margin:8px 0 18px; }
.pay-est__readout dl { display:grid; grid-template-columns: 1fr auto; gap:8px 14px;
  margin:0 0 20px; padding-top:16px; border-top:1px solid var(--border); }
.pay-est__readout dt { color: var(--bone-2); font-size:15px; }
.pay-est__readout dd { margin:0; font-family: var(--font-mono); font-size:15px;
  color: var(--bone); text-align:right; }
.pay-est__more { display:inline-flex; align-items:center; min-height:44px; margin-top:6px;
  font-size:14.5px; color: var(--brass); text-decoration:none; }
.pay-est__more:hover, .pay-est__more:focus-visible { text-decoration:underline; }
@media (max-width:860px){ .pay-est__grid { grid-template-columns:1fr; } }

/* "By appointment" is only useful if there is a way to make one. */
.ftr-shop__book { display:inline-flex; align-items:center; min-height:44px; margin-top:10px;
  padding:0; background:none; border:0; cursor:pointer;
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brass); }
.ftr-shop__book:hover, .ftr-shop__book:focus-visible { color: var(--bone); }
.ctc-counter__appt { color: var(--bone-2); font-size:15px; margin:18px 0 14px; }

/* Standalone links need a comfortable target; inline prose links are exempt. */
.ctc-counter__map { display:inline-flex; align-items:center; min-height:44px; }

/* Reassurances sit in the second column, level with the price. */
.iv-ask .btn { width:100%; }
.iv-ask__note { max-width:46ch; }
@media (max-width:860px){
  .iv-ask { grid-template-columns:1fr; }
}

/* ════════ PHOTO OVERLAYS ════════
   The price rides the photograph so it is readable the moment the car is, and
   the enquiry action sits opposite it. Both are pulled clear of the stepper
   arrows (mid-height) and the frame counter (bottom-right). */
.iv-gal__price {
  position: absolute;
  top: clamp(10px, 1.6vw, 20px);
  right: clamp(10px, 1.6vw, 20px);
  z-index: 3;
  padding: 10px 18px;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.9);
  pointer-events: none;
}
.iv-gal__inquire {
  position: absolute;
  bottom: clamp(10px, 1.6vw, 20px);
  left: clamp(10px, 1.6vw, 20px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  background: rgba(15, 17, 21, 0.82);
  border: 1px solid var(--brass);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease, color 0.15s ease;
}
.iv-gal__inquire:hover,
.iv-gal__inquire:focus-visible { background: var(--brass); color: var(--ink); }
@media (max-width: 560px) {
  .iv-gal__inquire { min-height: 42px; padding: 0 16px; font-size: 11.5px; letter-spacing: 0.12em; }
  .iv-gal__price { padding: 7px 12px; }
}

/* ════════ INLINE ENQUIRY (car page) ════════ */
.iv-inquire { grid-column: 2; grid-row: 1 / span 20; align-self: start; }
.iv-inquire__head { font-family: var(--font-disp); font-size: clamp(22px, 2.4vw, 30px);
  color: var(--bone); margin: 0 0 6px; }
.iv-inquire__note { color: var(--bone-2); font-size: 15px; margin: 0 0 18px; max-width: 52ch; }
.iv-inquire__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iv-inquire .form-field { margin-bottom: 14px; }
.iv-inquire textarea { min-height: 92px; resize: vertical; }
@media (max-width: 860px) {
  .iv-inquire { grid-column: 1; grid-row: auto; margin-top: 26px;
    padding-top: 24px; border-top: 1px solid var(--border); }
  .iv-inquire__row { grid-template-columns: 1fr; gap: 0; }
}

/* The number broke mid-digits on a narrow button; the label alone is enough
   there, and the number is in the header strip and footer regardless. */
.iv-ask__ring .btn__short { display: none; }
@media (max-width: 520px) {
  .iv-ask__ring .btn__full { display: none; }
  .iv-ask__ring .btn__short { display: inline; }
}

/* ════════ COMPACT SPEC (car panel) ════════
   Two columns of label-over-value pairs, sized to sit under the price without
   pushing the enquiry form down. VIN takes a full row since it is long. */
.iv-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(16px, 2.5vw, 32px);
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.iv-facts > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.iv-facts__wide { grid-column: 1 / -1; }
.iv-facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.iv-facts dd {
  margin: 0;
  font-size: 16.5px;
  color: var(--bone);
  overflow-wrap: anywhere;   /* VINs and long engine codes */
}
/* The values are short ("1967", "Automatic", "427 V8"), so two columns still
   fit on a phone — collapsing them made the panel needlessly tall and pushed
   the enquiry form far down the page. Only the narrowest screens go single. */
@media (max-width: 340px) {
  .iv-facts { grid-template-columns: 1fr; }
}