/* ================================================================
   ANTHONY UNDERWOOD AUTOMOTIVE — public site
   ----------------------------------------------------------------
   Design concept: THE DEALER'S DAY BOOK.

   A classic-car dealer keeps a stock book: ruled lines, one entry per
   car, the year written large because with a classic the year IS the
   identity. This site is that book, opened up.

   Structural decisions that follow from it:
     · Identity lives in a fixed left rail, not a stacked banner + nav
       strip. The phone number is pinned there and never scrolls away,
       because a phone call is the thing this site is for.
     · Cars are ruled LEDGER ROWS, not a grid of cards. Rows let the
       eye run down a column of years and prices and compare them.
       A card grid scatters those same figures across a page.
     · Photography is full-bleed "plate" work — a car is the argument,
       so it gets the full measure of the page rather than a 4:3 crop
       inside a bordered box.
     · Sections are ruled, with the label set in a narrow left column
       and the content beside it. No floating bordered panels.

   Palette: showroom concrete, bottle green, one amber signal.
   Type:    Familjen Grotesk (display / UI)
            Newsreader        (body prose — the catalogue voice)
            Spline Sans Mono  (years, prices, VINs, labels)
   ================================================================ */

:root {
  /* ── Surfaces ───────────────────────────────────────────────── */
  --paper:    #E7E5DE;   /* showroom concrete — the page itself      */
  --paper-2:  #DDDAD1;   /* recessed band                            */
  --card:     #F6F5F1;   /* raised surface (used sparingly)          */
  --card-2:   #FBFAF8;

  /* ── Ink ────────────────────────────────────────────────────── */
  --ink:      #15211C;   /* deep green-black                         */
  --ink-2:    #4B584F;   /* secondary prose                          */
  --ink-3:    #6B776E;   /* captions, hints                          */

  /* ── Structure ──────────────────────────────────────────────── */
  --green:    #14332A;   /* rail, footer, dark bands                 */
  --green-2:  #1D4A3B;   /* hover / raised dark                      */
  --green-3:  #2C6350;
  --on-green:   #DDE5E0;
  --on-green-2: #93A79C;

  /* ── Signal ─────────────────────────────────────────────────── */
  --amber:    #E3A52B;   /* prices on dark, active markers           */
  --amber-2:  #96660F;   /* amber that has to sit on light           */
  --rust:     #A63A1C;   /* reserved / sold — status only            */
  --rust-soft:#F0DDD5;

  /* ── Lines ──────────────────────────────────────────────────── */
  --rule:     #C6C1B5;
  --rule-2:   #A8A296;
  --rule-dark:#2B4A3E;

  /* Legacy aliases kept so any stray template class still resolves */
  --bg: #E7E5DE; --bg-2: #DDDAD1; --surface: #F6F5F1;
  --surface-2: #FBFAF8; --fg: #15211C; --fg-2: #4B584F;
  --fg-3: #6B776E; --muted: #6B776E; --accent: #1D4A3B;
  --accent-2: #14332A; --accent-soft: #DCE5E0; --border: #C6C1B5;
  --border-2: #A8A296; --navy: #14332A; --navy-2: #1D4A3B;
  --flag: #A63A1C; --flag-soft: #F0DDD5;

  --font-disp: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'Spline Sans Mono', 'SFMono-Regular', Menlo, monospace;

  --rail:   276px;        /* width of the fixed identity rail        */
  --maxw:   1180px;
  --gutter: clamp(20px, 3.6vw, 52px);

  --r: 0px;               /* the book is ruled, not rounded          */
  --r-sm: 0px;
  --r-pill: 999px;

  --shadow:    0 1px 0 #C6C1B5;
  --shadow-lg: 0 18px 44px -28px rgba(21,33,28,.55);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.68;
  -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; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
::selection { background: var(--green); color: #fff; }

img, .cx-plate img, .cx-lot__shot img {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
}

:focus-visible { outline: 3px solid var(--amber-2); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: 14px 22px;
  font-family: var(--font-disp); font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── Layout primitives ──────────────────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.cx-shell { min-height: 100vh; display: flex; flex-direction: column; }
.cx-shell > main { flex: 1 0 auto; }

.num, .fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cx-kicker, .eyebrow, .eyebrow-pill {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  display: inline-block; margin: 0 0 12px;
}

/* ════════════════════════════════════════════════════════════════
   THE RAIL — fixed identity column (desktop) / top bar (mobile)
   ════════════════════════════════════════════════════════════════ */
.cx-rail { background: var(--green); color: var(--on-green); }
.cx-rail__mark {
  display: block; font-family: var(--font-disp); font-weight: 700;
  font-size: 27px; letter-spacing: -0.03em; color: #fff; line-height: 1;
}
.cx-rail__mark span { color: var(--amber); }
.cx-rail__mark small {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .3em; color: var(--on-green-2);
}
.cx-rail__mark img { max-height: 46px; width: auto; }

.cx-rail__nav { display: flex; flex-direction: column; }
.cx-rail__nav a {
  position: relative; display: flex; align-items: center;
  min-height: 50px; padding: 9px 0 9px 20px;
  font-family: var(--font-disp); font-size: 17px; font-weight: 500;
  color: var(--on-green); border-top: 1px solid var(--rule-dark);
}
.cx-rail__nav a:last-child { border-bottom: 1px solid var(--rule-dark); }
.cx-rail__nav a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 0; height: 2px; background: var(--amber);
  transform: translateY(-50%); transition: width .18s ease;
}
.cx-rail__nav a:hover, .cx-rail__nav a:focus-visible { color: #fff; }
.cx-rail__nav a:hover::before, .cx-rail__nav a:focus-visible::before { width: 12px; }
.cx-rail__nav a.is-on { color: #fff; font-weight: 600; }
.cx-rail__nav a.is-on::before { width: 12px; }

.cx-rail__tel { display: block; color: #fff; }
.cx-rail__tel small {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-green-2);
  margin-bottom: 5px;
}
.cx-rail__tel strong {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 23px; letter-spacing: -0.02em; line-height: 1.2;
}
.cx-rail__tel:hover strong, .cx-rail__tel:focus-visible strong { color: var(--amber); }
.cx-rail__hours {
  margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.9; color: var(--on-green-2);
}

@media (min-width: 1100px) {
  .cx-rail {
    position: fixed; inset: 0 auto 0 0;
    width: var(--rail); z-index: 90;
    display: flex; flex-direction: column;
    padding: 34px 26px 28px;
    border-right: 1px solid var(--rule-dark);
    overflow-y: auto;
  }
  .cx-rail__nav { margin-top: 38px; }
  .cx-rail__foot { margin-top: auto; padding-top: 30px; }
  .cx-rail .nav-toggle, .cx-rail__bartel { display: none; }
  .cx-shell { margin-left: var(--rail); }
}

@media (max-width: 1099px) {
  .cx-rail {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 66px; padding: 12px var(--gutter);
    border-bottom: 1px solid var(--rule-dark);
  }
  .cx-rail__mark { font-size: 21px; }
  .cx-rail__mark small { font-size: 8.5px; letter-spacing: .26em; margin-top: 4px; }
  .cx-rail__nav, .cx-rail__foot { display: none; }
  .cx-rail__right { display: flex; align-items: center; gap: 14px; }
  .cx-rail__bartel {
    font-family: var(--font-mono); font-size: 16px; color: #fff;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .cx-rail__bartel:hover { color: var(--amber); }
}
@media (max-width: 560px) { .cx-rail__bartel { display: none; } }

.nav-toggle {
  width: 46px; height: 46px; border: 1px solid var(--rule-dark);
  background: transparent; display: grid; place-items: center; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2px;
  background: #fff; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle.is-active span { background: transparent; }
.nav-toggle.is-active span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 66px 0 auto 0; z-index: 85;
  background: var(--green); border-bottom: 1px solid var(--rule-dark);
  padding: 8px var(--gutter) 24px;
  display: none; flex-direction: column;
  max-height: calc(100vh - 66px); overflow-y: auto;
}
.nav-drawer.is-open { display: flex; }
.nav-drawer a {
  color: var(--on-green); font-family: var(--font-disp); font-size: 18px;
  padding: 13px 0; min-height: 50px; display: flex; align-items: center;
  border-bottom: 1px solid var(--rule-dark);
}
.nav-drawer a:hover { color: #fff; }
.nav-drawer .btn { margin-top: 18px; border-bottom: 0; justify-content: center; }
@media (min-width: 1100px) { .nav-drawer { display: none !important; } }

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 26px;
  font-family: var(--font-disp); font-weight: 600; font-size: 16px;
  background: var(--green); color: #fff;
  border: 1.5px solid var(--green); border-radius: 0;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
  text-align: center;
}
.btn:hover, .btn:focus-visible { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; font-size: 15px; padding: 10px 18px; }

.cx-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-disp); font-weight: 600; font-size: 16px;
  color: var(--green-2); border-bottom: 2px solid var(--rule-2);
  transition: border-color .16s ease, color .16s ease;
}
.cx-link:hover, .cx-link:focus-visible { color: var(--green); border-color: var(--amber); }

/* ════════════════════════════════════════════════════════════════
   SECTIONS — ruled, with the label in a narrow left column
   ════════════════════════════════════════════════════════════════ */
.cx-sec { padding: clamp(44px, 6vw, 84px) 0; }
.cx-sec--tight { padding: clamp(30px, 4vw, 52px) 0; }
.cx-sec--dark { background: var(--green); color: var(--on-green); }
.cx-sec--dark h2, .cx-sec--dark h3 { color: #fff; }
.cx-sec--sunk { background: var(--paper-2); }
.cx-sec + .cx-sec { border-top: 1px solid var(--rule); }
.cx-sec--dark + .cx-sec, .cx-sec + .cx-sec--dark { border-top: 0; }

.cx-head {
  display: grid; grid-template-columns: 190px 1fr auto;
  gap: 8px clamp(20px, 3vw, 46px); align-items: baseline;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.cx-sec--dark .cx-head { border-bottom-color: var(--amber); }
.cx-head__label {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  padding-top: 8px;
}
.cx-sec--dark .cx-head__label { color: var(--on-green-2); }
.cx-head h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; }
.cx-head p {
  grid-column: 2 / -1; margin: 10px 0 0;
  color: var(--ink-2); font-size: 17.5px; max-width: 62ch;
}
.cx-sec--dark .cx-head p { color: var(--on-green-2); }
.cx-head__more {
  font-family: var(--font-disp); font-weight: 600; font-size: 16px;
  color: var(--green-2); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
}
.cx-head__more:hover, .cx-head__more:focus-visible { border-color: var(--amber); }
.cx-sec--dark .cx-head__more { color: var(--amber); }
@media (max-width: 820px) {
  .cx-head { grid-template-columns: 1fr; }
  .cx-head__label { padding-top: 0; }
  .cx-head p { grid-column: 1; }
  .cx-head__more { justify-self: start; }
}

/* ════════════════════════════════════════════════════════════════
   THE OPENING PLATE — full-bleed photograph, headline over it
   ════════════════════════════════════════════════════════════════ */
.cx-open { position: relative; background: var(--green); overflow: hidden; }
.cx-open__img { position: absolute; inset: 0; }
.cx-open__img img { width: 100%; height: 100%; object-fit: cover; }
.cx-open__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,51,42,.95) 0%, rgba(20,51,42,.82) 38%, rgba(20,51,42,.36) 74%, rgba(20,51,42,.18) 100%);
}
.cx-open__body {
  position: relative;
  padding: clamp(56px, 9vw, 124px) 0 clamp(40px, 5vw, 68px);
  max-width: min(640px, 58%);
}
.cx-open h1 {
  color: #fff; font-size: clamp(38px, 6.2vw, 74px);
  letter-spacing: -0.042em; line-height: 0.98; text-wrap: balance;
}
.cx-open h1 em {
  font-family: var(--font-body); font-style: italic; font-weight: 400;
  color: var(--amber); letter-spacing: -0.01em;
}
.cx-open__lead {
  max-width: 46ch; margin: 22px 0 0;
  color: var(--on-green); font-size: 19px; line-height: 1.6;
}
@media (max-width: 820px) {
  .cx-open__body { max-width: none; }
  .cx-open__img::after {
    background: linear-gradient(180deg, rgba(20,51,42,.84) 0%, rgba(20,51,42,.90) 60%, rgba(20,51,42,.96) 100%);
  }
}

.cx-stockline {
  position: relative;
  border-top: 1px solid var(--rule-dark);
  background: rgba(9,25,20,.58);
}
.cx-stockline__row { display: flex; flex-wrap: wrap; gap: 0 clamp(22px, 4vw, 58px); padding: 18px 0; }
.cx-fig { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.cx-fig b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.03em;
  color: var(--amber); line-height: 1;
}
.cx-fig span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-green-2);
}

/* Page opener for interior pages */
.cx-title { background: var(--green); color: var(--on-green); padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 46px); }
.cx-title__kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 14px;
}
.cx-title h1 { color: #fff; font-size: clamp(32px, 4.8vw, 56px); letter-spacing: -0.035em; max-width: 18ch; }
.cx-title__lead { margin: 18px 0 0; max-width: 56ch; font-size: 18.5px; color: var(--on-green); }

/* ════════════════════════════════════════════════════════════════
   THE FIND BAR — search set as a ruled line, not a boxed widget
   ════════════════════════════════════════════════════════════════ */
.cx-find { background: var(--paper); border-bottom: 1px solid var(--rule); }
.cx-find__row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: clamp(20px, 3vw, 30px) 0 clamp(14px, 2vw, 20px); }
.cx-find__f { flex: 1 1 320px; min-width: 0; }
.cx-find label {
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.cx-find input[type="search"] {
  width: 100%; min-height: 54px; padding: 10px 2px;
  font-family: var(--font-disp); font-size: 21px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
}
.cx-find input[type="search"]::placeholder { color: var(--ink-3); }
.cx-find input[type="search"]:focus { outline: 0; border-bottom-color: var(--amber-2); }
.cx-find .btn { min-height: 54px; }
.cx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding-bottom: 20px; }
.cx-tags > span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 8px;
}
.cx-tags a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 4px 0;
  margin-right: 18px; font-family: var(--font-disp); font-weight: 500; font-size: 16px;
  color: var(--ink); border-bottom: 2px solid var(--rule);
}
.cx-tags a:hover, .cx-tags a:focus-visible { border-color: var(--amber); color: var(--green); }

/* ════════════════════════════════════════════════════════════════
   THE LEAD ENTRY — one car given the full measure of the page
   ════════════════════════════════════════════════════════════════ */
.cx-lead {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.cx-lead__shot { position: relative; display: block; background: var(--paper-2); order: 2; overflow: hidden; }
.cx-lead__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.cx-lead__shot:hover img { transform: scale(1.03); }
.cx-lead__body { order: 1; }
.cx-lead__year {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(46px, 7vw, 80px); line-height: .9;
  letter-spacing: -0.05em; color: var(--ink); display: block;
}
.cx-lead__name {
  display: block; margin-top: 10px;
  font-family: var(--font-disp); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 31px); letter-spacing: -0.025em; color: var(--ink);
}
.cx-lead__name:hover, .cx-lead__name:focus-visible { color: var(--green-2); }
.cx-lead__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }
.cx-lead__price {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em;
  color: var(--ink); margin-right: auto;
}
.cx-lead__price small {
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}
@media (max-width: 900px) {
  .cx-lead { grid-template-columns: 1fr; }
  .cx-lead__shot { order: 1; }
  .cx-lead__body { order: 2; }
}

.cx-run { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.cx-run li {
  padding: 4px 16px 4px 0; margin-right: 16px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 14.5px; color: var(--ink);
}
.cx-run li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cx-run b {
  display: block; font-weight: 400; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════
   THE LEDGER — the stock book itself. One ruled row per car.
   ════════════════════════════════════════════════════════════════ */
.cx-ledger { border-top: 1px solid var(--rule); }
.cx-ledger > p { padding: 34px 0; color: var(--ink-2); }
.cx-ledger > p a { color: var(--green-2); border-bottom: 1px solid var(--rule-2); }

.cx-lot {
  display: grid; grid-template-columns: 210px 106px minmax(0, 1fr) auto;
  gap: 0 clamp(18px, 2.6vw, 36px); align-items: center;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .16s ease;
}
.cx-lot:hover { background: rgba(255,255,255,.42); }
.cx-lot__shot { position: relative; display: block; background: var(--paper-2); overflow: hidden; }
.cx-lot__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.cx-lot:hover .cx-lot__shot img { transform: scale(1.035); }
.cx-lot__flag {
  position: absolute; top: 0; left: 0; background: var(--rust); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px;
}
.cx-lot__count {
  position: absolute; bottom: 0; right: 0;
  background: rgba(20,51,42,.86); color: #fff;
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
}
.cx-lot__year {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(26px, 3vw, 36px); line-height: 1;
  letter-spacing: -0.045em; color: var(--ink); align-self: center;
}
.cx-lot__name {
  display: block; font-family: var(--font-disp); font-weight: 600;
  font-size: 21px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.24;
}
.cx-lot__name:hover, .cx-lot__name:focus-visible { color: var(--green-2); }
.cx-lot__facts {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 3px 0;
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-2);
}
.cx-lot__facts li { padding-right: 13px; margin-right: 13px; border-right: 1px solid var(--rule-2); }
.cx-lot__facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cx-lot__end { text-align: right; display: grid; gap: 10px; justify-items: end; }
.cx-lot__price {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -0.03em;
  color: var(--ink); white-space: nowrap;
}
.cx-lot__price small {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
@media (max-width: 1000px) {
  .cx-lot { grid-template-columns: 160px minmax(0, 1fr) auto; }
  .cx-lot__shot { grid-column: 1; grid-row: 1 / span 2; }
  .cx-lot__year {
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 15px; letter-spacing: .04em; color: var(--ink-3);
  }
  .cx-lot__body { grid-column: 2; grid-row: 2; }
  .cx-lot__end { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 620px) {
  .cx-lot { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .cx-lot__shot, .cx-lot__year, .cx-lot__body, .cx-lot__end {
    grid-column: 1 !important; grid-row: auto !important;
  }
  .cx-lot__end { justify-items: stretch; text-align: left; }
  .cx-lot__end .btn { width: 100%; }
}

.cx-count {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px;
}
.cx-count b { color: var(--ink); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   THE FILTER LINE — inline ruled controls on one horizontal line
   ════════════════════════════════════════════════════════════════ */
.cx-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0 clamp(18px, 3vw, 38px); padding: 20px 0 22px;
  border-top: 1px solid var(--rule); border-bottom: 2px solid var(--ink);
  margin-bottom: 26px;
}
.cx-filter__f { flex: 1 1 190px; min-width: 0; padding: 6px 0; }
.cx-filter .btn { flex: 0 0 auto; margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════
   FORM CONTROLS — underline fields, no boxes
   ════════════════════════════════════════════════════════════════ */
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%; font-family: var(--font-disp); font-size: 17px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--rule-2);
  border-radius: 0; padding: 12px 2px; min-height: 50px;
  transition: border-color .16s ease; appearance: none; -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 11px center, right 5px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 28px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 0; border-bottom-color: var(--amber-2); border-bottom-width: 2px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.field-label {
  display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px;
}
.field-hint { display: block; margin-top: 7px; font-size: 15px; color: var(--ink-3); font-family: var(--font-body); }
.field-optional { font-weight: 400; letter-spacing: .1em; color: var(--ink-3); text-transform: none; }
.req { color: var(--rust); }
.cx-fld { margin-bottom: 20px; }
.cx-filter .cx-fld { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════
   THE STAGES — a genuine sequence, set on one ruled line
   ════════════════════════════════════════════════════════════════ */
.cx-stages { display: grid; grid-template-columns: repeat(3, 1fr); }
.cx-stage {
  padding-right: clamp(18px, 2.4vw, 34px); margin-right: clamp(18px, 2.4vw, 34px);
  border-right: 1px solid var(--rule);
}
.cx-stage:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cx-stage__when {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--amber-2);
}
.cx-sec--dark .cx-stage { border-color: var(--rule-dark); }
.cx-sec--dark .cx-stage__when { color: var(--amber); }
.cx-stage h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -0.02em; }
.cx-stage p { margin: 0; color: var(--ink-2); font-size: 17px; }
.cx-sec--dark .cx-stage p { color: var(--on-green-2); }
@media (max-width: 880px) {
  .cx-stages { grid-template-columns: 1fr; }
  .cx-stage {
    border-right: 0; margin-right: 0; padding: 0 0 22px;
    margin-bottom: 22px; border-bottom: 1px solid var(--rule);
  }
  .cx-sec--dark .cx-stage { border-bottom-color: var(--rule-dark); }
  .cx-stage:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════════
   THE INDEX — makes, sold cars, any catalogue-style list
   ════════════════════════════════════════════════════════════════ */
.cx-index { border-top: 1px solid var(--rule); }
.cx-index__item {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--rule); min-height: 56px;
}
.cx-index__item strong {
  font-family: var(--font-disp); font-weight: 600; font-size: 20px;
  letter-spacing: -0.02em; color: var(--ink);
}
.cx-index__dots {
  flex: 1; height: 1px; margin-bottom: 5px;
  background-image: linear-gradient(to right, var(--rule-2) 40%, transparent 40%);
  background-size: 6px 1px; background-repeat: repeat-x;
}
.cx-index__end { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); white-space: nowrap; }
a.cx-index__item:hover strong, a.cx-index__item:focus-visible strong,
a.cx-index__item:hover .cx-index__end, a.cx-index__item:focus-visible .cx-index__end { color: var(--green-2); }

/* ════════════════════════════════════════════════════════════════
   FAQ — ruled rows, no boxes
   ════════════════════════════════════════════════════════════════ */
.cx-faq { border-top: 1px solid var(--rule); }
.cx-faq details { border-bottom: 1px solid var(--rule); }
.cx-faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; min-height: 60px;
  font-family: var(--font-disp); font-weight: 600; font-size: 19.5px;
  letter-spacing: -0.015em; color: var(--ink);
}
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after {
  content: '+'; font-family: var(--font-mono); font-size: 24px; font-weight: 400;
  color: var(--amber-2); line-height: 1; flex: none;
}
.cx-faq details[open] summary::after { content: '–'; }
.cx-faq details > p { margin: 0; padding: 0 0 22px; max-width: 72ch; color: var(--ink-2); }

/* ════════════════════════════════════════════════════════════════
   QUOTES — customer words as pull-quotes, not boxed testimonials
   ════════════════════════════════════════════════════════════════ */
.cx-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); }
.cx-quote { border-top: 2px solid var(--ink); padding-top: 20px; }
.cx-quote p {
  font-family: var(--font-body); font-style: italic; font-size: 20px;
  line-height: 1.55; color: var(--ink); margin: 0 0 16px; text-wrap: pretty;
}
.cx-quote cite {
  font-family: var(--font-mono); font-style: normal; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 880px) { .cx-quotes { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   THE REGISTER — dark form band
   ════════════════════════════════════════════════════════════════ */
.cx-reg { background: var(--green); color: var(--on-green); padding: clamp(40px, 6vw, 76px) 0; }
.cx-reg__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 5vw, 70px); align-items: start;
}
.cx-reg h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.032em; max-width: 16ch; }
.cx-reg__lead { margin: 18px 0 0; color: var(--on-green-2); max-width: 46ch; font-size: 17.5px; }
.cx-reg .field-label { color: var(--on-green); }
.cx-reg .field-hint, .cx-reg .field-optional { color: var(--on-green-2); }
.cx-reg input, .cx-reg select, .cx-reg textarea { color: #fff; border-bottom-color: var(--rule-dark); }
.cx-reg input::placeholder, .cx-reg textarea::placeholder { color: #6C8579; }
.cx-reg input:focus, .cx-reg select:focus, .cx-reg textarea:focus { border-bottom-color: var(--amber); }
.cx-reg select option { color: var(--ink); background: #fff; }
.cx-reg .btn { background: var(--amber); border-color: var(--amber); color: var(--green); }
.cx-reg .btn:hover, .cx-reg .btn:focus-visible { background: #F0B441; border-color: #F0B441; color: var(--green); }
.cx-reg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cx-reg__note { margin: 16px 0 0; font-size: 15.5px; color: var(--on-green-2); }
.cx-reg__note a { color: var(--amber); border-bottom: 1px solid currentColor; }
@media (max-width: 900px) { .cx-reg__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cx-reg__row { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   CAR DETAIL — plate, action band, spec rail beside the prose
   ════════════════════════════════════════════════════════════════ */
.cx-plate { position: relative; background: var(--green); }
.cx-plate__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--green-2); }
.cx-plate__frame img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
@media (max-width: 820px) { .cx-plate__frame { aspect-ratio: 4 / 3; } }
/* The arrows sit over photographs of unknown brightness, so they carry
   their own solid ground rather than relying on a tint of the picture —
   a pale car used to swallow them completely. Inset from the edge and
   large enough to be an obvious control, not a hint. */
.cx-plate__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60px; height: 84px; border: 0; cursor: pointer;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(10, 20, 16, 0.42);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.cx-plate__nav svg { width: 26px; height: 26px; }
.cx-plate__nav--prev { left: 18px; }
.cx-plate__nav--next { right: 18px; }
.cx-plate__nav:hover, .cx-plate__nav:focus-visible {
  background: var(--amber); color: var(--green);
}
.cx-plate__nav--prev:hover, .cx-plate__nav--prev:focus-visible { transform: translateY(-50%) translateX(-3px); }
.cx-plate__nav--next:hover, .cx-plate__nav--next:focus-visible { transform: translateY(-50%) translateX(3px); }
.cx-plate__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .cx-plate__nav { width: 48px; height: 66px; }
  .cx-plate__nav svg { width: 21px; height: 21px; }
  .cx-plate__nav--prev { left: 10px; }
  .cx-plate__nav--next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-plate__nav, .cx-plate__nav:hover { transition: none; transform: translateY(-50%); }
}
.cx-plate__count {
  position: absolute; right: 18px; top: 18px;
  background: var(--green); color: #fff;
  font-family: var(--font-mono); font-size: 12.5px; padding: 6px 12px;
}
.cx-plate__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(15,38,31,.94), rgba(15,38,31,.55) 55%, transparent);
  padding: clamp(30px, 6vw, 64px) 0 clamp(16px, 2.4vw, 26px);
  pointer-events: none;
}
.cx-plate__caption .wrap { display: flex; align-items: flex-end; gap: 8px 22px; flex-wrap: wrap; }
.cx-plate__year {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(40px, 6.4vw, 76px); line-height: .86;
  letter-spacing: -0.055em; color: var(--amber);
}
.cx-plate__name {
  font-family: var(--font-disp); font-weight: 600;
  font-size: clamp(20px, 2.8vw, 33px); letter-spacing: -0.028em;
  color: #fff; padding-bottom: 5px;
}
.cx-plate__flag {
  display: inline-block; background: var(--rust); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; padding: 5px 11px; margin-bottom: 9px;
}

.cx-ask { background: var(--ink); color: #fff; border-bottom: 2px solid var(--amber); }
.cx-ask .wrap {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px);
  flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
.cx-ask__price {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.035em;
  color: var(--amber); line-height: 1;
}
.cx-ask__price small {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: #8E9A93; margin-top: 6px;
}
.cx-ask__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.cx-ask .btn { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.cx-ask .btn:hover, .cx-ask .btn:focus-visible { background: #F0B441; border-color: #F0B441; color: var(--ink); }
.cx-ask .btn--ghost { background: transparent; color: #fff; border-color: #56635B; }
.cx-ask .btn--ghost:hover, .cx-ask .btn--ghost:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 700px) {
  .cx-ask .wrap { flex-direction: column; align-items: stretch; }
  .cx-ask__acts { margin-left: 0; }
  .cx-ask__acts .btn { flex: 1 1 auto; }
}

.cx-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.cx-back:hover, .cx-back:focus-visible { color: var(--green-2); }

.cx-detail { padding: clamp(24px, 3.4vw, 44px) 0 clamp(46px, 6vw, 88px); }
.cx-detail__grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 64px); align-items: start;
}
.cx-detail__rail { position: sticky; top: 28px; }
@media (max-width: 980px) {
  .cx-detail__grid { grid-template-columns: 1fr; }
  .cx-detail__rail { position: static; }
}

.cx-spec { width: 100%; border-collapse: collapse; }
.cx-spec caption {
  text-align: left; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.cx-spec th {
  text-align: left; font-family: var(--font-mono); font-weight: 400;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: 13px 14px 13px 0; width: 40%;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.cx-spec td {
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 16px; color: var(--ink);
  overflow-wrap: anywhere;
}

.cx-assure { list-style: none; margin: 26px 0 0; padding: 0; }
.cx-assure li {
  position: relative; padding: 9px 0 9px 26px; font-size: 16px;
  color: var(--ink-2); border-bottom: 1px solid var(--rule);
}
.cx-assure li::before {
  content: '·'; position: absolute; left: 6px; top: 4px;
  font-family: var(--font-mono); font-size: 24px; color: var(--amber-2);
}
.cx-doc {
  display: inline-flex; align-items: center; min-height: 46px; margin-top: 16px;
  font-family: var(--font-disp); font-weight: 600; font-size: 16px;
  color: var(--green-2); border-bottom: 2px solid var(--amber);
}

.cx-block { margin-bottom: clamp(30px, 4vw, 50px); }
.cx-block:last-child { margin-bottom: 0; }
.cx-block > h2 {
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.022em;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 20px;
}
.cx-block p { color: var(--ink-2); max-width: 74ch; }

.cx-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cx-sheet button {
  padding: 0; border: 0; background: var(--paper-2);
  aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer; position: relative;
}
.cx-sheet button img { width: 100%; height: 100%; object-fit: cover; transition: opacity .16s ease; }
.cx-sheet button::after {
  content: ''; position: absolute; inset: 0;
  border: 3px solid transparent; transition: border-color .16s ease;
}
.cx-sheet button:hover img { opacity: .82; }
.cx-sheet button.is-active::after { border-color: var(--amber); }
@media (max-width: 620px) { .cx-sheet { grid-template-columns: repeat(3, 1fr); } }

.cx-films-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cx-films-inline figure { margin: 0; }
.cx-films-inline video, .cx-films-inline iframe { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; display: block; }
.cx-films-inline figcaption {
  margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

.cx-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink); border-top: 2px solid var(--amber); display: none;
}
.cx-sticky.is-on { display: block; }
.cx-sticky .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 11px; padding-bottom: 11px; padding-right: 84px;
}
.cx-sticky__car {
  font-family: var(--font-disp); font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw;
}
.cx-sticky__price {
  font-family: var(--font-mono); color: var(--amber); margin-right: auto;
  font-size: 18px; letter-spacing: -0.02em;
}
.cx-sticky .btn { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.cx-sticky .btn--ghost { background: transparent; color: #fff; border-color: #56635B; }
@media (min-width: 1100px) { .cx-sticky { left: var(--rail); } }
@media (max-width: 860px) {
  .cx-sticky .wrap { padding-right: var(--gutter); gap: 10px; }
  .cx-sticky__car { max-width: 100%; flex: 1 1 100%; }
  .cx-sticky .btn { flex: 1 1 45%; }
  .lc-root { bottom: 96px !important; }
}
/* superseded: the askbar is suppressed on any page with a sticky bar */

.det-lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(12,22,18,.96);
  display: none; align-items: center; justify-content: center; padding: 40px;
}
.det-lightbox.is-open { display: flex; }
.det-lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; cursor: pointer; }
.det-lightbox__close {
  position: absolute; top: 18px; right: 20px; width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,.28); background: transparent;
  color: #fff; font-size: 30px; line-height: 1;
}
.det-lightbox__close:hover { background: var(--amber); color: var(--green); border-color: var(--amber); }
.det-lightbox__count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 13px; color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   GOODS — parts and merchandise as ruled entries with a plate
   ════════════════════════════════════════════════════════════════ */
.cx-goods { border-top: 1px solid var(--rule); }
.cx-good {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 0 clamp(18px, 3vw, 38px); align-items: center;
  padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--rule);
}
.cx-good__img { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.cx-good__img img { width: 100%; height: 100%; object-fit: cover; }
.cx-good__img > span { font-family: var(--font-disp); font-size: 40px; color: var(--rule-2); }
.cx-good__no {
  position: absolute; top: 0; left: 0; font-style: normal;
  background: var(--ink); color: #fff; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .1em; padding: 4px 9px;
}
.cx-good h2 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.cx-good p { margin: 0 0 6px; color: var(--ink-2); font-size: 16.5px; max-width: 60ch; }
.cx-good__fits { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-3); }
.cx-good__fits b { font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.cx-good__end { text-align: right; display: grid; gap: 10px; justify-items: end; }
.cx-good__price { font-family: var(--font-mono); font-size: 20px; color: var(--ink); white-space: nowrap; }
@media (max-width: 820px) {
  .cx-good { grid-template-columns: 130px minmax(0, 1fr); }
  .cx-good__end { grid-column: 1 / -1; justify-items: start; text-align: left; margin-top: 12px; }
}
@media (max-width: 520px) {
  .cx-good { grid-template-columns: 1fr; gap: 14px; }
  .cx-good__end { justify-items: stretch; }
  .cx-good__end .btn { width: 100%; }
}

.cx-films { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 40px); }
.cx-film { margin: 0; }
.cx-film__frame { aspect-ratio: 16 / 9; background: #000; }
.cx-film__frame video, .cx-film__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cx-film figcaption { padding-top: 14px; border-top: 2px solid var(--ink); margin-top: 14px; }
.cx-film figcaption h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.cx-film figcaption p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 8px; }
.cx-film figcaption a { font-family: var(--font-disp); font-weight: 600; color: var(--green-2); border-bottom: 2px solid var(--amber); }
@media (max-width: 820px) { .cx-films { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   PROSE + LEGAL
   ════════════════════════════════════════════════════════════════ */
.cx-prose { max-width: 74ch; }
.cx-prose p { color: var(--ink-2); }
.cx-prose--lead p { font-size: 21px; line-height: 1.62; color: var(--ink); }
.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.022em;
  margin: 44px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a, .cx-prose a { color: var(--green-2); border-bottom: 1px solid var(--rule-2); }
.legal a:hover, .cx-prose a:hover { border-color: var(--amber); }
.legal__updated {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 34px;
}

.cx-recover { background: var(--paper-2); border-top: 1px solid var(--rule); padding: clamp(34px, 5vw, 60px) 0; }
.cx-recover h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; margin-bottom: 12px; }
.cx-recover p { color: var(--ink-2); max-width: 60ch; }
.cx-recover__form { max-width: 700px; margin-top: 22px; }
.cx-recover__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.cx-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 640px) { .cx-recover__row { grid-template-columns: 1fr; } }

.cx-void { padding: clamp(50px, 8vw, 96px) 0; text-align: center; }
.cx-void__code {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(70px, 14vw, 148px); line-height: .84;
  letter-spacing: -0.06em; color: var(--rule-2);
}
.cx-void h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.034em; margin: 22px 0 14px; }
.cx-void p { color: var(--ink-2); max-width: 48ch; margin: 0 auto 26px; }
.cx-void .cx-acts { justify-content: center; }

/* ════════════════════════════════════════════════════════════════
   CALCULATOR
   ════════════════════════════════════════════════════════════════ */
.cx-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .cx-calc { grid-template-columns: 1fr; } }
.cx-dial { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cx-dial__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cx-dial label {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.cx-dial output { font-family: var(--font-mono); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.cx-dial input[type=range] {
  width: 100%; height: 34px; accent-color: var(--green-2);
  background: transparent; padding: 0; border: 0; min-height: 0;
}
.cx-tally { background: var(--ink); color: #fff; padding: clamp(24px, 3.4vw, 34px); }
.cx-tally__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #8E9A93; }
.cx-tally strong {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(42px, 6.4vw, 66px); line-height: 1; letter-spacing: -0.05em;
  color: var(--amber); margin-top: 10px;
}
.cx-tally dl {
  display: grid; grid-template-columns: 1fr auto; gap: 9px 20px;
  margin: 26px 0 18px; padding-top: 18px; border-top: 1px solid #2E3A34;
  font-family: var(--font-mono); font-size: 14.5px;
}
.cx-tally dt { color: #8E9A93; }
.cx-tally dd { margin: 0; color: #fff; }
.cx-tally p { font-size: 15px; color: #8E9A93; margin: 0 0 20px; }
.cx-tally .btn { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.cx-tally .btn:hover, .cx-tally .btn:focus-visible { background: #F0B441; border-color: #F0B441; color: var(--ink); }

/* ════════════════════════════════════════════════════════════════
   TRACKING / STATUS LOOKUPS
   ════════════════════════════════════════════════════════════════ */
.cx-lookup { padding: clamp(34px, 5vw, 62px) 0; }
.track-form { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.track-form input {
  flex: 1 1 280px; min-height: 56px; font-family: var(--font-mono);
  font-size: 19px; letter-spacing: .04em; border-bottom: 2px solid var(--ink);
}
.track-form .btn { min-height: 56px; }
.cx-track-search { padding-bottom: 30px; border-bottom: 1px solid var(--rule); }

.track-banner {
  border-left: 3px solid var(--amber); background: var(--card);
  padding: 18px 22px; margin-bottom: 28px; color: var(--ink-2);
}
.track-banner strong { font-family: var(--font-mono); color: var(--ink); }

.cx-track-empty { padding: clamp(34px, 5vw, 58px) 0; max-width: 56ch; }
.cx-track-empty__icon { color: var(--ink-3); margin-bottom: 16px; }
.cx-track-empty h3 { font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.028em; margin-bottom: 12px; }
.cx-track-empty p { color: var(--ink-2); margin-bottom: 22px; }

.cx-track-card { padding: clamp(26px, 4vw, 42px) 0; border-bottom: 1px solid var(--rule); }
.cx-track-card__main { display: flex; align-items: flex-start; gap: 20px; }
.cx-track-card__icon { color: var(--amber-2); flex: none; padding-top: 6px; }
.cx-track-card__title { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.03em; margin-bottom: 10px; }
.cx-track-card__code {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.cx-track-card__desc { color: var(--ink-2); max-width: 62ch; margin: 0; }
.cx-track-card--delivered .cx-track-card__icon,
.cx-track-card--completed .cx-track-card__icon,
.cx-track-card--approved .cx-track-card__icon { color: var(--green-2); }
.cx-track-card--delayed .cx-track-card__icon,
.cx-track-card--cancelled .cx-track-card__icon,
.cx-track-card--more_info .cx-track-card__icon { color: var(--rust); }

.cx-track-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 28px; border-top: 1px solid var(--rule);
}
.cx-track-meta__item { padding: 16px 20px 16px 0; border-right: 1px solid var(--rule); }
.cx-track-meta__item:last-child { border-right: 0; }
.cx-track-meta__k {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.cx-track-meta__v { display: block; font-family: var(--font-mono); font-size: 16px; color: var(--ink); }

.cx-track-steps { display: flex; flex-wrap: wrap; margin: 30px 0; border-top: 2px solid var(--ink); }
.cx-track-step { flex: 1 1 130px; padding: 16px 16px 16px 0; border-right: 1px solid var(--rule); }
.cx-track-step:last-child { border-right: 0; }
.cx-track-step__dot { width: 11px; height: 11px; background: var(--rule-2); margin-bottom: 10px; }
.cx-track-step.is-done .cx-track-step__dot { background: var(--green-2); }
.cx-track-step.is-current .cx-track-step__dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(227,165,43,.3); }
.cx-track-step__label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cx-track-step.is-current .cx-track-step__label,
.cx-track-step.is-done .cx-track-step__label { color: var(--ink); }

.cx-track-history { margin-top: 34px; }
.cx-track-history__title { font-size: 22px; letter-spacing: -0.024em; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.cx-track-event {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 24px;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.cx-track-event__time { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.cx-track-event__status { font-family: var(--font-disp); font-weight: 600; font-size: 18px; color: var(--ink); display: block; }
.cx-track-event__loc { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.cx-track-event__note { color: var(--ink-2); margin: 8px 0 0; }
.cx-track-event.is-latest .cx-track-event__status { color: var(--green-2); }
@media (max-width: 640px) { .cx-track-event { grid-template-columns: 1fr; gap: 6px; } }

/* ════════════════════════════════════════════════════════════════
   CALL-BACK BAND (shared partial)
   ════════════════════════════════════════════════════════════════ */
.cta-band { background: var(--green); color: var(--on-green); padding: clamp(40px, 6vw, 76px) 0; }
.cta-band__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 5vw, 70px); align-items: start;
}
.cta-band__head { color: #fff; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.032em; margin: 0 0 16px; max-width: 16ch; }
.cta-band__sub { color: var(--on-green-2); max-width: 50ch; }
.cta-band__phone {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em;
  color: var(--amber); border-bottom: 2px solid transparent;
}
.cta-band__phone:hover, .cta-band__phone:focus-visible { border-color: var(--amber); }
.cta-band__hours { font-family: var(--font-mono); font-size: 13px; color: var(--on-green-2); margin-top: 10px; }
.cta-band__formhead {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber); padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-dark); margin-bottom: 20px;
}
.cta-band .field-label { color: var(--on-green); }
.cta-band .field-hint, .cta-band .field-optional { color: var(--on-green-2); }
.cta-band input, .cta-band textarea { color: #fff; border-bottom-color: var(--rule-dark); }
.cta-band input::placeholder { color: #6C8579; }
.cta-band input:focus { border-bottom-color: var(--amber); }
.cta-band .btn { background: var(--amber); border-color: var(--amber); color: var(--green); margin-top: 8px; }
.cta-band .btn:hover, .cta-band .btn:focus-visible { background: #F0B441; border-color: #F0B441; color: var(--green); }
.form-field { margin-bottom: 20px; }
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   FOOTER — a colophon, not four equal columns
   ════════════════════════════════════════════════════════════════ */
.cx-foot { background: var(--green); color: var(--on-green-2); padding: clamp(44px, 6vw, 74px) 0 26px; }
.cx-foot__mast {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px;
  align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--rule-dark);
}
.cx-foot__mark {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 74px); letter-spacing: -0.045em;
  color: #fff; line-height: .9;
}
.cx-foot__mark span { color: var(--amber); }
.cx-foot__tel {
  display: block; text-align: right; color: #fff;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.028em;
}
.cx-foot__tel:hover, .cx-foot__tel:focus-visible { color: var(--amber); }
.cx-foot__tel small {
  display: block; font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-green-2); margin-bottom: 6px;
}
.cx-foot__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px clamp(20px, 3vw, 44px); padding: 30px 0;
}
.cx-foot h4 {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px;
}
.cx-foot nav { display: flex; flex-direction: column; }
.cx-foot nav a {
  color: var(--on-green); padding: 6px 0; min-height: 38px;
  display: flex; align-items: center; font-size: 16.5px;
}
.cx-foot nav a:hover, .cx-foot nav a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.cx-foot address { font-style: normal; font-size: 16.5px; color: var(--on-green); line-height: 1.7; }
.cx-foot__mail { display: inline-block; margin-top: 10px; color: var(--amber); border-bottom: 1px solid currentColor; word-break: break-word; }
.cx-foot__hours { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-family: var(--font-mono); font-size: 14px; }
.cx-foot__hours dt { color: var(--on-green-2); }
.cx-foot__hours dd { margin: 0; color: #fff; }
.cx-foot__base {
  padding-top: 22px; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 14.5px; color: var(--on-green-2);
}
.cx-foot__base a { color: var(--on-green); margin-left: 18px; }
@media (max-width: 900px) {
  .cx-foot__cols { grid-template-columns: repeat(2, 1fr); }
  .cx-foot__mast { grid-template-columns: 1fr; align-items: start; }
  .cx-foot__tel { text-align: left; }
}
@media (max-width: 520px) { .cx-foot__cols { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   ALWAYS-ON REQUEST CONTROL
   ════════════════════════════════════════════════════════════════ */
.askbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; }
.askbar a, .askbar button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; border: 0; cursor: pointer;
  font-family: var(--font-disp); font-size: 16px; font-weight: 600;
}
.askbar__call { background: var(--ink); color: #fff; }
.askbar__ask { background: var(--amber); color: var(--green); }
.askbar__ask:hover, .askbar__ask:focus-visible { background: #F0B441; }
.askbar__call:hover, .askbar__call:focus-visible { background: var(--green-2); }
@media (min-width: 861px) {
  /* One right-hand column: chat bubble at the corner, then the two request
     controls stacked above it. Previously the askbar was pushed sideways to
     dodge the bubble, which put it over the middle of the page — on the car
     page it landed squarely on the price and its buttons. Sharing a single
     column means they cannot collide with each other whatever is switched on,
     and only one narrow strip of the page is ever covered. */
  .askbar {
    left: auto; right: 24px; bottom: 24px;
    flex-direction: column; align-items: flex-end;
    box-shadow: var(--shadow-lg);
  }
  .askbar a, .askbar button { min-width: 232px; width: 100%; justify-content: flex-start; padding: 0 22px; }
  /* Clear the bubble (60px) plus its own bottom offset and a gap. */
  body.chat-on .askbar { right: 24px; bottom: 100px; }
}

/* The car page carries its own Call and Ask buttons in the action band, and a
   sticky bar that takes over once they scroll away. A floating copy on top of
   that is both a duplicate and the thing that was covering the price. */
body:has(.cx-sticky) .askbar { display: none; }
@media (max-width: 860px) { body { padding-bottom: 60px; } .lc-root { bottom: 76px !important; } }

/* ════════════════════════════════════════════════════════════════
   MODAL + FLASH
   ════════════════════════════════════════════════════════════════ */
.modal-bg {
  position: fixed; inset: 0; z-index: 130; background: rgba(12,22,18,.74);
  display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 18px; overflow-y: auto;
}
.modal-bg.is-open { display: flex; }
.modal {
  background: var(--paper); width: 100%; max-width: 520px;
  padding: clamp(26px, 4vw, 40px); position: relative;
  border-top: 4px solid var(--amber);
}
.modal h3 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.03em; margin-bottom: 10px; }
.modal > p { color: var(--ink-2); margin-bottom: 24px; }
.modal__close {
  position: absolute; top: 10px; right: 10px; width: 46px; height: 46px;
  border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--ink-3);
}
.modal__close:hover { color: var(--ink); }
.modal textarea { margin-bottom: 20px; }

.flash {
  background: var(--ink); color: #fff; padding: 15px var(--gutter);
  font-family: var(--font-disp); font-weight: 500;
  border-bottom: 2px solid var(--amber);
}
.flash--error { border-bottom-color: var(--rust); }

/* ════════════════════════════════════════════════════════════════
   MOTION — a quiet rise; the page settles rather than performs
   ════════════════════════════════════════════════════════════════ */
.reveal, .reveal-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in, .reveal-item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal, .reveal-item { opacity: 1; transform: none; }
}

@media print {
  .cx-rail, .askbar, .cx-sticky, .nav-drawer, .cx-foot, .lc-root { display: none !important; }
  .cx-shell { margin-left: 0; }
  body { background: #fff; color: #000; }
}

/* ── Figures docked to the bottom of a page opener ─────────────────
   Used on Paying for it, where the four numbers people actually want
   (rate, term, deposit, credit check) belong to the headline rather
   than to a separate section further down. ── */
.cx-title--figs { padding-bottom: 0; }
.cx-title--figs .cx-stockline { margin-top: clamp(26px, 3.4vw, 40px); }

/* Contact routes carry a link at display size inside a stage column. */
.cx-stage .cx-link { border-bottom-width: 2px; }
.cx-stage p:last-child { margin-bottom: 0; }

/* ── Small screens: the year keeps its billing ─────────────────────
   Once the row stacks there is no year column to run the eye down, so
   the year goes back to display size above the model name rather than
   shrinking into a label. ── */
@media (max-width: 620px) {
  .cx-lot__year {
    font-size: 34px; letter-spacing: -0.045em; color: var(--ink);
    line-height: 1; margin-bottom: -4px;
  }
}

/* Anchored sections clear the sticky bar on small screens. */
[id] { scroll-margin-top: 78px; }
@media (min-width: 1100px) { [id] { scroll-margin-top: 24px; } }

/* Leader dots need a run of space to read as leader dots; below that
   the name and the figure sit at either end of the line on their own. */
@media (max-width: 560px) {
  .cx-index__dots { display: none; }
  .cx-index__item { gap: 12px; }
  .cx-index__item strong { flex: 1 1 auto; font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   THE RACK — coverflow for the latest arrivals

   The stock book is a ruled list because a list is how you compare.
   This is the opposite job: one car at a time, held up to be looked
   at, the rest waiting behind it. So the cards get depth and the
   facts sit underneath in the same ledger form used everywhere else.

   No JS: a plain horizontal scroll strip. The 3D switches on with
   `is-ready`, so nothing depends on the script arriving.
   ══════════════════════════════════════════════════════════════════ */
.cx-flow {
  --cf-card: clamp(215px, 25vw, 355px);
  --cf-h: calc(var(--cf-card) * 0.68);
}

/* ── Fallback: a scroll strip ── */
.cx-flow__frame { overflow-x: auto; overflow-y: hidden; padding: 22px 0 30px; }
.cx-flow__track { display: flex; gap: 14px; }
.cx-flow__card {
  flex: 0 0 var(--cf-card); width: var(--cf-card); height: var(--cf-h);
  display: block; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--rule); text-decoration: none;
}

/* ── With script: the rake ── */
.cx-flow.is-ready .cx-flow__frame {
  overflow: hidden;
  padding: 26px 0 34px;
  cursor: grab;
  outline: none;
  touch-action: pan-y;          /* sideways is ours, the page keeps vertical */
  perspective: calc(var(--cf-card) * 3);
}
.cx-flow.is-ready .cx-flow__frame:active { cursor: grabbing; }
.cx-flow.is-ready .cx-flow__frame:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.cx-flow.is-ready .cx-flow__track {
  display: block; position: relative;
  height: var(--cf-h);
  transform-style: preserve-3d;
  -webkit-user-select: none; user-select: none;
}
.cx-flow.is-ready .cx-flow__card {
  position: absolute; left: 50%; top: 0;
  border: 0;
  will-change: transform, opacity;
  box-shadow: 0 18px 40px rgba(21, 33, 28, 0.28);
}
.cx-flow__card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* The year rides on the photograph, as it does on the car page. */
.cx-flow__stamp {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
  padding: 26px 14px 10px; width: 100%;
  background: linear-gradient(to top, rgba(10, 20, 16, 0.82), transparent);
  font-family: var(--font-mono); color: #fff;
  font-size: clamp(19px, 2.4vw, 30px); letter-spacing: -0.02em;
}
.cx-flow__stamp span {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); opacity: 0; transition: opacity 0.25s ease;
}
.cx-flow__card.is-centre .cx-flow__stamp span { opacity: 1; }

/* Reserved and sold still have to read from three cards out. */
.cx-flow__flag {
  position: absolute; top: 0; left: 0; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 5px 9px;
  background: var(--rust); color: #fff;
}

/* ── The facts, underneath, in ledger form ──────────────────────────
   The captions stack in a single grid cell rather than being absolutely
   positioned: the container then takes the height of the tallest one at
   any width — no magic min-height to keep in step — and the captions
   still sit inside the wrap gutter, which `inset: 0` would have ignored. */
.cx-flow__caps { display: grid; }
.cx-flow__cap {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s ease;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 0 clamp(24px, 5vw, 64px);
  align-items: start;
  border-top: 1px solid var(--rule-2); padding-top: 18px;
}
.cx-flow__cap.is-on { opacity: 1; visibility: visible; }

.cx-flow__cap h3 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.03em; }
.cx-flow__cap h3 a { color: inherit; text-decoration: none; }
.cx-flow__cap h3 a:hover { color: var(--green-2); }
.cx-flow__note { margin: 8px 0 0; color: var(--ink-2); max-width: 46ch; font-size: 15px; }

.cx-flow__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.cx-flow__spec { margin: 0; font-family: var(--font-mono); font-size: 12.5px; }
.cx-flow__spec > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--rule);
}
.cx-flow__spec dt { color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
.cx-flow__spec dd { margin: 0; color: var(--ink); }
.cx-flow__spec .cx-flow__ask { color: var(--amber-2); font-size: 15px; }

/* ── Rack controls ── */
.cx-flow__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 4px;
}
.cx-flow__dots { display: flex; gap: 7px; flex-wrap: wrap; }
.cx-flow__dot {
  width: 22px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--rule-2); transition: background 0.2s ease;
}
.cx-flow__dot.is-on { background: var(--green-2); }
.cx-flow__dot:hover { background: var(--ink-3); }

.cx-flow__step { display: flex; gap: 8px; }
.cx-flow__step button {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-2); cursor: pointer;
  color: var(--ink); transition: background 0.16s ease, color 0.16s ease;
}
.cx-flow__step button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.cx-flow__step svg { width: 17px; height: 17px; }

@media (max-width: 860px) {
  .cx-flow__cap { grid-template-columns: 1fr; gap: 18px; }
  .cx-flow__spec { max-width: 100%; }
}
@media (max-width: 560px) {
  .cx-flow { --cf-card: 74vw; }
  .cx-flow__acts .btn { width: 100%; }
  /* Eight markers plus two arrows will not sit on one line here, and
     swiping is the obvious gesture on a touchscreen anyway. */
  .cx-flow__dots { display: none; }
  .cx-flow__bar { justify-content: flex-end; }
}

/* Stillness for anyone who asked for it: no rake, no throw, just a strip. */
@media (prefers-reduced-motion: reduce) {
  .cx-flow__cap { transition: none; }
}

/* Photo count, bottom-right of the card, opposite the year. */
.cx-flow__count {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 9px;
  background: rgba(10, 20, 16, 0.72); color: #fff;
}

/* ── Rack corrections ──────────────────────────────────────────────
   The rake runs the full width of the content column so cards fade
   out rather than being sliced at the wrap edge. Bar and captions
   keep their own `.wrap`, so only the photography breaks out. ── */
.cx-sec--rack { overflow-x: clip; }
.cx-flow__frame { margin-inline: 0; width: 100%; }
.cx-flow:not(.is-ready) .cx-flow__frame { padding-inline: var(--gutter); }
.cx-flow__bar { margin-top: 2px; }
.cx-flow__caps { margin-top: 22px; }

/* The a11y layer gives every button a 48px touch target, which turned
   the markers into slabs. Keep the target, shrink the mark. */
.cx-flow__dot {
  width: 26px; height: auto; min-height: 44px;
  background: transparent; display: grid; place-items: center;
}
.cx-flow__dot::after {
  content: ""; display: block; width: 20px; height: 3px;
  background: var(--rule-2); transition: background 0.2s ease, height 0.2s ease;
}
.cx-flow__dot.is-on::after { background: var(--green-2); height: 5px; }
.cx-flow__dot:hover::after { background: var(--ink-3); }
.cx-flow__dot.is-on { background: transparent; }

/* Soften both ends so the rake recedes out of view instead of being
   guillotined by the frame edge. */
.cx-flow.is-ready .cx-flow__frame {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* The photo count is a detail for the card you are actually looking at. */
.cx-flow__count { opacity: 0; transition: opacity 0.25s ease; }
.cx-flow__card.is-centre .cx-flow__count { opacity: 1; }