/* Park Place LTD — homepage concept "Gallery" (build 2).
   Values come from design/tokens.json and design/mockup/*.dc.html (1440 px). */

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #FAF9F6; --vellum: #F1EEE8; --ink: #111A21; --graphite: #59616A; --hairline: #DCD8D0;
  --pennant: #CF202F; --park-red: #B52127; --oxblood: #8C1A22; --studio: #2B2A28;
  --display: "Marcellus", "Trajan Pro", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --g: 64px;                                   /* space-4, desktop gutter */
  --u: calc(min(100vw, 1440px) / 1440);         /* 1 mockup px, scaled below 1440 */
  --hdr: 88px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scroll-padding-top: calc(var(--hdr) + 16px); }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(181, 33, 39, .12); }
.h-56, .h-44, .h-34, .car-model .mv { text-wrap: balance; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
picture { display: block; }
a { color: var(--park-red); }
a:hover { color: var(--oxblood); }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--park-red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; color: var(--paper); }

/* ---------- type styles ---------- */
.mark { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink); }
.caption { font-size: 14px; line-height: 20px; color: var(--graphite); }
.caption .ink { color: var(--ink); }
.body { font-size: 16px; line-height: 26px; }
.grey { color: var(--graphite); }
.lead { font-size: 19px; line-height: 30px; font-weight: 300; }
.lead-17 { font-size: 17px; line-height: 28px; font-weight: 300; }
.h-hero, .h-56, .h-44, .h-34, .car-model, .price, .rv-q, .cons-num { font-family: var(--display); font-weight: 400; }
.h-hero { font-size: 96px; line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.h-56 { font-size: 48px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.h-44 { font-size: 38px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; }
.h-34 { font-size: 29px; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s;
}
.btn--outline { padding: 13px 26px; border: 1px solid var(--ink); color: var(--ink); letter-spacing: .16em; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--red { padding: 16px 18px; background: var(--park-red); color: #fff; }
.btn--red:hover { background: var(--oxblood); color: #fff; }
.btn--ink { padding: 16px 32px; background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #26323c; color: var(--paper); }
.btn--wide { padding: 17px 30px; }
.btn--tight { letter-spacing: .1em; }
/* FIX-01 §5: Collection buttons 52 px high, 0 28 px padding, single line */
.btn--outline.btn--tight, .btn--red.btn--tight { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; }
.btn-text { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.btn-text:hover { color: var(--park-red); }
.link-red {
  position: relative; display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--park-red); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--park-red);
}
.link-red:hover { color: var(--oxblood); }
/* FIX-01 §9: calm hover — underline grows from the left in 0.3 s (pointer devices only) */
.link-red::after, .btn-text::after, .hdr-tel::after, .ft-social a::after, .loc-addr a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.btn-text, .hdr-tel, .ft-social a, .loc-addr a { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .link-red::after, .btn-text::after, .hdr-tel::after, .ft-social a::after, .loc-addr a::after { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .link-red:hover::after, .btn-text:hover::after, .hdr-tel:hover::after, .ft-social a:hover::after, .loc-addr a:hover::after { transform: scaleX(1); }
}
@media not ((hover: hover) and (pointer: fine)) {
  .btn--outline:hover { background: none; color: var(--ink); }
  .btn--red:hover { background: var(--park-red); }
  .btn--ink:hover { background: var(--ink); }
  .arrow:hover { background: none; color: var(--ink); }
}

/* ---------- header (§4.0) ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr); padding: 0 var(--g);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid transparent;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .4s, border-color .4s;
}
.hdr.is-solid { background: var(--paper); border-bottom-color: var(--hairline); }
/* FIX-01 §9: hides on scroll down after the hero, shows on any scroll up */
.hdr.is-hidden { transform: translateY(-100%); }
.menu-btn { justify-self: start; width: 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center; cursor: pointer; color: var(--ink); }
.hdr-logo { display: block; height: 48px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 50%; }
.hdr-logo .lockup, .hdr-logo img { height: 100%; width: auto; }
/* FIX-04 §8.7: the lockup shrinks 48 -> 36 px with a transform (a height transition was a layout shift, CLS 0.001) */
.hdr.is-solid .hdr-logo { transform: scale(.75); }
.hdr-nav { justify-self: end; display: flex; align-items: center; gap: 32px; }
.hdr-tel { font-size: 14px; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
.hdr-tel:hover { color: var(--park-red); }
.intro-on .hdr-logo { visibility: hidden; }
/* FIX-05 §2: the header lockup stays hidden while the big hero lockup is visible; the hero timeline fades it in
   (0.18–0.26). Reduced motion: toggled by an IntersectionObserver on the hero lockup, without animation. */
.js:not(.rm) .hdr-logo { opacity: 0; visibility: hidden; }
.rm .hdr.lockup-off .hdr-logo { visibility: hidden; }

/* ---------- intro (§4.1) ---------- */
.intro { display: none; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro-curtain { position: absolute; inset: 0; background: var(--paper); will-change: transform; }
.intro-logo-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.intro-logo { width: 560px; transform-origin: 0 0; opacity: 0; }
.intro-logo img { width: 100%; height: auto; }

/* ---------- hero (FIX-05 §2): one DB12 drives past the camera; the Park Place LTD lockup large on the left ---------- */
.hl, .ex { position: relative; z-index: 2; --hw: min(100vw, calc(100vh * 1672 / 941)); }
/* the frame covers the hero (16:9, ≥ 640 px tall); when it is wider than the viewport it is centred, but never
   so far that the car (x 38.6–93 % of frame 1) passes the right edge: frame x 95 % stays inside the viewport */
.hl { --hh: max(100vh, 640px); --hw: max(100vw, calc(var(--hh) * 16 / 9)); }
.hl-inner { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--paper); }
.hl-stage { position: absolute; width: var(--hw); aspect-ratio: 16 / 9; left: min(calc((100% - var(--hw)) / 2), calc(100% - var(--hw) * .95));
  top: calc((100% - var(--hw) * 9 / 16) * .75); }
.hl-poster, .hl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-poster img { width: 100%; height: 100%; }
.hl-canvas { display: block; }
/* motion: poster (LCP) under the canvas; reduced motion / no JS: the poster (car parked) alone, no canvas */
.hl-canvas { display: none; }
.js:not(.rm) .hl-canvas { display: block; }
/* the frames are flat #FAF9F6 but AVIF decodes the paper ±1–3 levels off: a 1.5 % feather on the bottom edge only
   (the edge that meets the next section) keeps the step against the page at 0 */
.hl-stage { -webkit-mask-image: linear-gradient(to top, transparent .3%, #000 1.8%); mask-image: linear-gradient(to top, transparent .3%, #000 1.8%); }
/* lockup: left edge on the 64 px grid, 44 % of the viewport (max 820 px), its centre at 30 % of the hero height.
   The real logo already carries the red rules + "Bellevue | Boise" line under the name (mark style), so no second
   line is set under it (DECISIONS 140) */
.hl-text { position: absolute; z-index: 2; left: var(--g); top: calc(30% - min(44vw, 820px) * .1146); width: min(44vw, 820px); }
.hl-h1 { margin: 0; font-size: 0; line-height: 0; }
.hl-lockup, .hl-lockup img { width: 100%; height: auto; }
.intro-on .hl-lockup { visibility: hidden; }
/* FIX-06 §9: the paper veil that wipes the drive-155 remnant off the left edge (0 → 35 % of the width over hero
   progress 0.86–0.92, while the stage fades to 0); scaled from the left edge, transform only */
.hl-veil { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 35%; pointer-events: none;
  background: linear-gradient(to right, #FAF9F6, rgba(250, 249, 246, 0)); transform: scaleX(0); transform-origin: 0 50%; }
.rm .hl-veil, .no-js .hl-veil { display: none; }

/* stacked-scene feather (rear) */
.ex-scale {
  -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 7%, #000 92%, transparent 99%), linear-gradient(to right, transparent .5%, #000 3.5%, #000 96.5%, transparent 99.5%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 1%, #000 7%, #000 92%, transparent 99%), linear-gradient(to right, transparent .5%, #000 3.5%, #000 96.5%, transparent 99.5%);
          mask-composite: intersect;
}

.lamp { position: absolute; inset: 0; }
.lamp img { width: 100%; height: 100%; }

/* ---------- since 1987 (§4.4) ---------- */
.ex-inner { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--paper); }
.ex-frame { position: absolute; inset: 0; }
/* FIX-01 §4: same no-frame rule; the wrapper scales 0.72 -> 1 (cars' bottom, y 834 of 941, 6vh above the fold) */
.ex-scale { position: absolute; left: calc(50% - var(--hw) / 2); width: var(--hw); aspect-ratio: 1672 / 941; bottom: calc(6vh - var(--hw) * 107 / 1672); transform-origin: 50% 62%; }
.ex-text { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--hdr) + 24px); text-align: center; padding: 0 24px; }
.ex-text p { margin: 20px auto 0; max-width: 620px; }

/* ---------- the Collection (§4.6) ---------- */
.co { position: relative; }
.co-stage { position: relative; }
.co-head, .co-base { display: none; }
.co-note { display: none; }
.car { display: grid; grid-template-columns: calc(860 * var(--u)) 1fr; min-height: 100vh; background: var(--paper); }
.car-photo { position: relative; overflow: hidden; display: flex; align-items: center; background: var(--paper); }
/* FIX-01 §5: paper panel, contain, full panel width, vertically centred; one shared scale for all four */
.car-pic { width: 100%; }
.car-pic img { width: 100%; height: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .car-pic img { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
  .car-photo:hover .car-pic img { transform: scale(1.025); }
}
.car-photo .arrow--m { display: none; }
.car-text { padding: 56px max(40px, calc(64 * var(--u))) 40px; display: flex; flex-direction: column; min-width: 0; }
.car-head { display: flex; align-items: center; justify-content: space-between; }
.count { letter-spacing: .32em; }
.count-n { color: var(--park-red); }
.car-meta { margin-top: 48px; font-size: 14px; line-height: 20px; color: var(--graphite); }
.car-model { margin-top: 10px; font-size: 40px; line-height: 1.02; letter-spacing: .03em; text-transform: uppercase; }
.car-price { margin-top: 18px; }
.car-price .mv { display: flex; align-items: baseline; gap: 12px; }
.car-price .mark { color: var(--graphite); }
.price { font-size: 30px; line-height: 1.2; letter-spacing: .02em; }
.car-specs { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.spec dt .mv { border-top: 1px solid var(--hairline); padding-top: 14px; }
.spec dd .mv { padding: 4px 0 14px; }
.spec dt { font-size: 14px; line-height: 20px; color: var(--graphite); }
.spec dd { font-size: 17px; line-height: 24px; }
.car-hl { margin-top: 20px; }
.car-hl li { font-size: 14px; line-height: 22px; padding: 6px 0; }
.car-hl .lbl { color: var(--graphite); }
.car-actions { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 12px; align-items: center; }
.mk--actions .mv { display: flex; flex-wrap: wrap; gap: 12px; }
.arrows { margin-left: auto; display: flex; gap: 8px; flex: none; }
.arrow { width: 48px; height: 48px; border-radius: 9999px; border: 1px solid var(--ink); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background-color .3s, color .3s; }
.arrow:hover { background: var(--ink); color: var(--paper); }
.car-note { margin-top: 18px; font-size: 12px; line-height: 18px; color: var(--graphite); }
/* FIX-01 §5: with 52 px / 0 28 px buttons the arrows no longer fit beside them; they share the note's row instead */
@media (min-width: 769px) {
  .car-text { position: relative; }
  .car-actions .arrows { position: absolute; right: max(40px, calc(64 * var(--u))); bottom: 40px; }
  .car-note { padding-right: 128px; min-height: 48px; display: flex; align-items: center; }
}
@media (min-width: 769px) and (max-height: 880px) {
  .co--pinned .car-text { padding-top: calc(var(--hdr) + 20px); padding-bottom: 28px; }
  .co--pinned .co-head { padding-top: calc(var(--hdr) + 20px); }
  .car-meta { margin-top: 28px; }
  .car-specs { margin-top: 22px; }
  .car-hl { margin-top: 12px; }
  .car-hl li { padding: 4px 0; }
  .car-actions .arrows { bottom: 28px; }
}
@media (min-width: 769px) and (max-height: 820px) {
  .co--pinned .car-text, .co--pinned .co-head { padding-top: calc(var(--hdr) + 12px); }
  .car-meta { margin-top: 22px; }
  .car-price { margin-top: 12px; }
  .car-specs { margin-top: 16px; }
  .spec dt .mv { padding-top: 10px; }
  .spec dd .mv { padding-bottom: 10px; }
  .car-actions { padding-top: 16px; }
  .car-note { margin-top: 12px; }
}
.mk { display: block; overflow: hidden; }
.mv { display: block; }
.car-price .mk, .car-meta .mk { padding-bottom: 2px; }

/* pinned mode (desktop, JS, motion allowed) */
/* FIX-06 §11: every slide sits in the same grid cell (stacked), so the layout height never jumps; the text swaps
   strictly out → gap → in (JS), hidden slides are inert with pointer-events none */
.co--pinned .co-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); height: 100vh; min-height: 720px; overflow: hidden; }
.co--pinned .car { grid-area: 1 / 1; position: relative; min-height: 0; background: transparent; }
.co--pinned .car[inert] { pointer-events: none; }
.co--pinned .mk { overflow: visible; }
.co--pinned .car-text { background: transparent; }
.co--pinned .car-head { visibility: hidden; }
.co--pinned .co-head { display: flex; align-items: center; justify-content: space-between; position: absolute; z-index: 2;
  left: calc(860 * var(--u)); right: 0; top: 0; padding: calc(var(--hdr) + 32px) max(40px, calc(64 * var(--u))) 0; }
.co--pinned .car-text { position: relative; padding-top: calc(var(--hdr) + 32px); }
.co--pinned .car-photo { position: relative; z-index: 1; }

/* ---------- consignment (§4.7) ---------- */
.cons { background: var(--vellum); padding: 150px var(--g); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.cons-num { font-size: 220px; line-height: .85; color: var(--pennant); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cons-n { display: inline-block; min-width: 1.32em; text-align: right; position: relative; }
/* FIX-04 §8.7: the count-up never changes layout — a hidden "70" holds the box, the counting digits sit over it */
.cons-ph { visibility: hidden; }
.cons-v { position: absolute; inset: 0; text-align: right; }
.cons-text { max-width: 520px; }
.cons-text .lead { margin-top: 20px; }
.cons-text .body { margin-top: 12px; }
.cons-text .btn { margin-top: 32px; }

/* ---------- salon / service ---------- */
.ss { padding: 200px var(--g) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; max-width: 1440px; margin: 0 auto; }
.ss-col--low { margin-top: 120px; }
.ss-img { position: relative; height: 340px; overflow: hidden; }
.ss-img picture { position: absolute; left: 0; right: 0; top: -7%; height: 114%; }
.ss-pic { width: 100%; height: 100%; object-fit: cover; }
.ss-col:first-child .ss-pic { object-position: 50% 45%; }
.ss-col h3 { margin-top: 32px; }
.ss-col .body { margin-top: 12px; max-width: 560px; }
.ss-col .link-red { margin-top: 20px; }

/* ---------- review ---------- */
.rv { padding: 200px var(--g) 0; text-align: center; }
.rv-q { margin: 0 auto; max-width: 940px; font-size: 30px; line-height: 1.4; letter-spacing: .01em; }
.rv-by { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--graphite); }
.rv .link-red { margin-top: 20px; }

/* ---------- locations ---------- */
.loc { margin-top: 200px; border-top: 1px solid var(--hairline); padding: 90px var(--g); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.loc-addr { margin-top: 14px; font-size: 17px; line-height: 28px; }
.loc-addr a { color: var(--ink); text-decoration: none; }
.loc-addr a:hover { color: var(--park-red); }
.loc .link-red { margin-top: 16px; }

/* ---------- footer ---------- */
.ft { background: var(--vellum); padding: 70px var(--g); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ft-brand { display: flex; align-items: center; gap: 20px; }
.ft-brand img { width: 40px; height: auto; }
.ft-social { display: flex; gap: 28px; }
.ft-social a { font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: none; }
.ft-social a:hover { color: var(--park-red); }
.ft-credit { font-size: 12px; line-height: 18px; color: var(--graphite); }


/* ---------- reveal initial states (JS only, motion allowed) ---------- */
/* lamps start off when motion is allowed; reduced motion / no JS show the lit state (FIX-01 §10.5) */
.js:not(.rm) .lamp-on { opacity: 0; }
@media (min-width: 769px) { .js:not(.rm) .ex-scale { transform: scale(.72); } }

/* ---------- reduced motion ---------- */
.rm .reveal-fade { opacity: 0; }

/* ---------- 769–1200 desktop tightening ---------- */
@media (max-width: 1200px) and (min-width: 769px) {
  :root { --g: 48px; }
  .car-text { padding: 40px 40px 32px; }
  .co--pinned .co-head { padding: calc(var(--hdr) + 24px) 40px 0; }
  .co--pinned .car-text { padding-top: calc(var(--hdr) + 24px); }
  .car-model { font-size: 32px; }
  .car-meta { margin-top: 32px; }
  .h-hero { font-size: 82px; }
}

/* ---------- mobile (§4.8) ---------- */
@media (max-width: 768px) {
  :root { --g: 24px; --hdr: 64px; }
  .hdr { padding: 0 16px 0 8px; grid-template-columns: 44px 1fr auto; }
  .menu-btn { justify-content: center; }
  .menu-btn svg { width: 24px; height: 10px; }
  .hdr-logo, .hdr.is-solid .hdr-logo { height: 44px; padding: 7px 0; justify-self: center; transform: none; }
  .hdr-nav { gap: 0; }
  .hdr-nav .btn-text { min-height: 44px; display: flex; align-items: center; font-size: 11px; letter-spacing: .14em; }
  .hdr-tel { display: none; }

  .intro-logo { width: 280px; }

  .ex { --hw: 150vw; }
  /* FIX-05 §2 mobile: lockup on top (78 % wide, left on the 24 px grid), the car below; the canvas is 150vw wide,
     centred on the parked car (frame x 66 % → the canvas' right edge meets the viewport's). Lockup + car are centred
     as one group: the frame's empty top 30 % slides under the lockup (DECISIONS 141) */
  .hl { --hw: 150vw; }
  .hl-inner { height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr); }
  .hl-text { order: -1; position: relative; left: auto; top: auto; width: auto; flex: none; padding: 0 24px; }
  .hl-lockup { width: 78vw; }
  .hl-stage { position: relative; flex: none; left: auto; top: auto; margin: calc(var(--hw) * 9 / 16 * -.3) 0 0 calc(100% - var(--hw));
    -webkit-mask-image: linear-gradient(to bottom, transparent .5%, #000 12%, #000 88%, transparent 99.5%); mask-image: linear-gradient(to bottom, transparent .5%, #000 12%, #000 88%, transparent 99.5%); }

  .ex-inner { height: 100svh; min-height: 680px; }
  .ex-scale { bottom: auto; top: calc(var(--hdr) + 250px); }
  .ex-text { top: calc(var(--hdr) + 24px); }
  .h-hero { font-size: 52px; }

  .co { padding-top: 0; }
  .car { display: block; min-height: 0; padding-top: 40px; }
  /* FIX-02 §4: the closer S*_crop frames (car ≈ 86 % of the width, one shared scale) show whole at 100vw;
     the arrows sit on paper under the car */
  .car-photo { display: block; margin-top: 20px; padding: 12px 0 52px; background: var(--paper); }
  .car-pic { width: 100%; margin: 0; }
  .car-pic img { width: 100%; height: auto; }
  .car-photo .arrow--m { display: flex; position: absolute; bottom: 4px; width: 44px; height: 44px; background: var(--paper); }
  .arrow--m.arrow--prev { left: 12px; } .arrow--m.arrow--next { right: 12px; }
  .arrow--m svg { width: 12px; height: 12px; }
  .car-text { display: contents; }
  .car-head { padding: 0 24px; order: -1; }
  .car { display: flex; flex-direction: column; }
  .car-head .mark { font-size: 11px; letter-spacing: .3em; }
  .car-meta, .car-model, .car-price, .car-specs, .car-hl, .car-actions { padding: 0 24px; }
  .car-meta { margin-top: 28px; font-size: 14px; }
  .car-model { margin-top: 8px; font-size: 29px; line-height: 1.06; }
  .car-price { margin-top: 12px; }
  .car-price .mv { gap: 10px; }
  .car-price .mark { font-size: 11px; letter-spacing: .3em; }
  .price { font-size: 26px; }
  .car-specs { margin-top: 28px; column-gap: 20px; }
  .spec dt .mv { padding-top: 12px; }
  .spec dd .mv { padding-bottom: 12px; }
  .spec dt { font-size: 14px; }
  .spec dd { font-size: 15px; }
  .car-hl { margin-top: 16px; }
  .car-actions { margin-top: 28px; padding-top: 0; display: block; }
  .mk--actions .mv { flex-direction: column; gap: 12px; }
  .car-actions .btn { display: flex; letter-spacing: .2em; }
  .arrows { display: none; }
  .car-note { display: none; }
  .co-note { display: block; padding: 32px 24px 0; font-size: 12px; line-height: 18px; color: var(--graphite); }

  .cons { grid-template-columns: 1fr; padding: 96px 24px; gap: 32px; margin-top: 120px; }
  .cons-num { font-size: 128px; }
  .ss { grid-template-columns: 1fr; padding: 120px 24px 0; gap: 72px; }
  .ss-col--low { margin-top: 0; }
  .ss-img { height: 240px; }
  .h-34 { font-size: 24px; }
  .rv { padding: 120px 24px 0; }
  .rv-q { font-size: 22px; }
  .loc { margin-top: 120px; grid-template-columns: 1fr; gap: 48px; padding: 56px 24px; }
  .ft { flex-direction: column; align-items: flex-start; padding: 48px 24px; }
  .ft-brand { align-items: flex-start; }
  .ft-social { flex-wrap: wrap; gap: 4px 24px; }
  .ft-social a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }

  /* touch targets ≥ 44 px (ui-review must-fix) */
  .link-red { padding-top: 22px; margin-top: -16px !important; }
  .loc-addr a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .loc-addr { line-height: 28px; }
  .loc-addr a { line-height: 28px; }
  .loc-addr br + a { min-height: 44px; }
  /* FIX-06 (Lighthouse mobile target-size): "Get directions" no longer rides up over the phone number above it */
  .loc .link-red { margin-top: 4px !important; }

}

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr-logo, .btn, .arrow { transition: none; }
}

/* =====================================================================================================
   FIX-04 — New & used chapters, moving gallery, side menu, contact button, depth
   ===================================================================================================== */

/* §6 back plane: a barely visible grain — one fixed, composited layer (never repainted on scroll) */
/* desktop (fine pointer) only: on touch screens at DPR 2–3 a 2 % grain is invisible, and the extra full-screen layer
   cost the hero scrub a frame (scroll-review M5 3.05 % → 2.96 % without it) */
@media (hover: hover) and (pointer: fine) {
body::after {
  content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: url("../assets/grain.png") repeat; background-size: 160px 160px; opacity: .02; transform: translateZ(0);
}
}
.nu, .en { position: relative; z-index: 1; }

/* ---------- §2 New & used — FIX-06 §10: one centre axis for the intro and the three chapter heads ---------- */
.nu { --pad: calc(64 * var(--u)); max-width: 1440px; margin: 0 auto; padding: calc(120 * var(--u)) 0 calc(160 * var(--u)); }
.nu-intro { padding: 0 var(--pad); display: flex; flex-direction: column; align-items: center; text-align: center; }
.nu-h2 { font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; max-width: 16em; }
.nu-lead { margin-top: 24px; max-width: 600px; font-size: 18px; line-height: 30px; color: var(--graphite); text-wrap: balance; }
.nu-all { text-align: center; }
.nu-btn { padding: 18px 40px; letter-spacing: .2em; }

/* chapter head: emblem · 28 · 1 × 40 px park-red rule · 28 · heading · 24 · paragraph · 28 · link — all centred */
.ch { padding: 0 var(--pad); }
.ch-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ch-em { display: flex; justify-content: center; }
.ch-emblem { display: block; max-width: none; }
.ch-emblem--am { width: 132px; height: auto; }
.ch-emblem--lotus { width: auto; height: 64px; }
.ch-emblem--pennant { width: auto; height: 56px; }
.ch-rule { display: block; flex: none; width: 40px; height: 1px; background: var(--park-red); margin: 28px 0; }
.nu-rule { margin: 0 0 28px; }
.ch-h { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; color: var(--ink); }
.ch-body { margin-top: 24px; max-width: 48ch; font-size: 19px; line-height: 1.7; color: rgba(17, 26, 33, .86); text-wrap: balance; }
.ch-link { margin-top: 28px; }

/* photo row: big cols 1–8 + detail cols 9–12 on a 12-column grid (24 px gutter), same top and same bottom; Lotus
   mirrors it (detail 1–4, big 5–12). The detail frame stretches to the big frame's height (both captions are one line) */
.ch-row { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: stretch; }
.ch-big { grid-column: 1 / span 8; grid-row: 1; min-width: 0; }
.ch-small { grid-column: 9 / span 4; grid-row: 1; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.ch--r .ch-small { grid-column: 1 / span 4; }
.ch--r .ch-big { grid-column: 5 / span 8; }
.ch-clip { position: relative; overflow: hidden; background: var(--vellum); }
.ch-big .ch-clip { aspect-ratio: 3 / 2; }
.ch-small .ch-clip { min-height: 0; height: 100%; }
/* 3 % overscan above and below: the depth move happens inside the frame, so the frames stay aligned */
.ch-clip picture { position: absolute; left: 0; right: 0; top: -3%; height: 106%; }
.ch-clip img { width: 100%; height: 100%; object-fit: cover; }
.ch-cap { margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--graphite); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* spacing: intro → first chapter 140 px; photo row → next chapter head 180 px */
.nu-intro + .ch { margin-top: 140px; }
.ch + .ch { margin-top: 180px; }
.nu-all { margin-top: 150px; }
@media (min-width: 1181px) { .ch-h { font-size: calc(40 * var(--u)); } }
@media (max-width: 1180px) {
  .nu { --pad: var(--g); padding: 96px 0 120px; }
  .nu-all { margin-top: 120px; padding: 0 24px; }
}
@media (max-width: 768px) {
  .nu { padding: 8px 0 96px; }
  .nu-h2 { font-size: 34px; line-height: 1.06; }
  .nu-lead { margin-top: 20px; font-size: 16px; line-height: 26px; }
  .ch-emblem--am { width: 99px; }
  .ch-emblem--lotus { height: 48px; }
  .ch-emblem--pennant { height: 42px; }
  .ch-rule { margin: 24px 0; }
  .nu-rule { margin: 0 0 24px; }
  .ch-h { font-size: 30px; }
  .ch-body { margin-top: 20px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
  .ch-link { margin-top: 6px !important; } /* + the 22 px touch padding above the label = 28 px */
  .ch-row { margin-top: 48px; column-gap: 16px; }
  .nu-intro + .ch { margin-top: 96px; }
  .ch + .ch { margin-top: 120px; }
  .nu-all { margin-top: 96px; }
}
/* ≤ 640: big photo full width, detail 70 % wide under it (right-aligned; Lotus left-aligned), caption under each */
@media (max-width: 640px) {
  .ch-row { display: block; }
  .ch-small { display: block; width: 70%; margin: 32px 0 0 auto; }
  .ch--r .ch-small { margin: 32px auto 0 0; }
  .ch-small .ch-clip { height: auto; aspect-ratio: 4 / 5; }
  .ch-cap { margin-top: 12px; line-height: 20px; }
}
/* reveal initial states (JS, motion allowed) */
.js:not(.rm) .ch-clip { clip-path: inset(100% 0 0 0); }
.js:not(.rm) .ch-em, .js:not(.rm) .ch-body, .js:not(.rm) .ch-link { opacity: 0; }
.js:not(.rm) .ch .ch-rule { transform: scaleX(0); }

/* ---------- §3 A trusted enthusiast source — moving gallery ---------- */
.en { background: var(--vellum); padding: 72px 0 40px; overflow: hidden; }
.en-row { display: flex; overflow: hidden; justify-content: flex-start; }
.en-track { display: flex; gap: 16px; padding-right: 16px; flex: none; }
.en-tile { flex: none; width: 320px; height: 240px; background: var(--hairline); }
.en-tile picture, .en-tile img { width: 100%; height: 100%; }
.en-tile img { object-fit: cover; }
.en-tile--clean img { object-position: 50% 60%; }
.en-arrow { display: block; color: var(--graphite); }
.en-arrow--1 { margin: 18px 0 0 var(--g); }
.en-arrow--2 { margin: 16px var(--g) 0 auto; }
.en-panel { position: relative; width: 640px; max-width: calc(100% - 48px); margin: 0 auto; padding: 40px 48px; background: var(--paper); text-align: center; }
.en-h2 { font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1.02; letter-spacing: .03em; text-transform: uppercase; }
.en-panel .body { margin-top: 22px; }
.en-panel .btn { margin-top: 28px; }
.en-panel + .en-row { margin-top: 28px; }
/* without JS / reduced motion: one static set, centred on its middle tiles */
.no-js .en-dup, .rm .en-dup { display: none; }
.no-js .en-row, .rm .en-row { justify-content: center; }
.no-js .en-track, .rm .en-track { padding-right: 0; }
@media (max-width: 768px) {
  .en { padding: 56px 0 32px; }
  .en-tile { width: 200px; height: 150px; }
  .en-panel { padding: 32px 24px; }
  .en-h2 { font-size: 34px; }
  .en-panel + .en-row { margin-top: 24px; }
  .en-arrow--1 { margin-top: 14px; }
}

/* ---------- §4 menu — side panel ---------- */
.menu { position: fixed; inset: 0; z-index: 120; }
.menu[hidden] { display: none; }
.menu-veil { position: absolute; inset: 0; background: rgba(17, 26, 33, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* FIX-06 §8: the panel docks to the LEFT edge (the menu button is on the left); its close button sits exactly where
   the menu button is (same x, same y), so the eye doesn't travel. --mpad = panel side padding, --mbx = menu button x */
.menu { --mpad: 48px; --mbx: var(--g); }
.menu-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--paper);
  padding: 0 var(--mpad) 32px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.menu-top { display: flex; justify-content: space-between; align-items: center; flex: none; height: var(--hdr); }
.menu-logo { height: 32px; order: 2; }
.menu-logo img { height: 100%; width: auto; }
.menu-close, .menu-close-nojs { order: 1; width: 44px; height: 44px; margin-left: calc(var(--mbx) - var(--mpad)); border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.menu-close-nojs, .menu-nojs { display: none; }
.acc-list { margin-top: 8px; border-top: 1px solid var(--hairline); flex: none; }
.acc { border-bottom: 1px solid var(--hairline); }
.acc-h { margin: 0; font: inherit; }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; min-height: 62px; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-align: left; }
.acc-btn:hover { color: var(--park-red); }
.acc-btn svg { flex: none; }
.acc-btn[aria-expanded="true"] .acc-v { opacity: 0; }
.acc-p { overflow: hidden; }
.acc-p ul { padding-bottom: 14px; }
.acc-p a { display: block; padding: 9px 0; font-size: 15px; line-height: 26px; color: var(--graphite); text-decoration: none; }
.acc-p a:hover { color: var(--park-red); }
.js .acc-p[data-closed] { height: 0; visibility: hidden; }
.menu-foot { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; line-height: 20px; flex: none; }
.menu-city { font-weight: 600; }
.menu-addr { margin-top: 4px; color: var(--graphite); }
.menu-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--park-red); text-decoration: none; }
@media (max-width: 768px) { .menu { --mbx: 8px; } }
@media (max-width: 600px) {
  .menu { --mpad: 24px; }
  .menu-panel { width: 100%; padding: 0 var(--mpad) 24px; }
  .acc-list { margin-top: 12px; }
  .acc-btn { font-size: 22px; padding: 12px 0; min-height: 54px; }
}
/* no JS: the panel opens as a :target, every group expanded */
.no-js .menu-btn { display: none; }
.no-js .menu-nojs { display: flex; align-items: center; position: fixed; z-index: 60; top: 22px; left: var(--g); height: 44px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.no-js .menu:target { display: block !important; }
.no-js .menu-close { display: none; }
.no-js .menu-close-nojs { display: flex; }
@media (max-width: 768px) { .no-js .menu-nojs { top: 10px; left: 12px; } }

/* ---------- §5 contact button ---------- */
.cb { position: fixed; right: 24px; bottom: 24px; z-index: 90; visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .7s; }
.cb.is-shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.cb-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--park-red); color: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .3s; }
.cb-btn:hover { background: var(--oxblood); }
.cb-i--x, .cb-btn[aria-expanded="true"] .cb-i--phone { display: none; }
.cb-btn[aria-expanded="true"] .cb-i--x { display: block; }
.cb-card { position: absolute; right: 0; bottom: 80px; width: 320px; max-width: calc(100vw - 40px); background: var(--paper); box-shadow: 0 18px 48px rgba(17, 26, 33, .18); transform-origin: 100% 100%; }
.cb-card[hidden] { display: none; }
.cb-title { padding: 18px 20px 14px; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: .03em; text-transform: uppercase; }
.cb-card a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 45px; padding: 0 20px; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 20px; }
.cb-card a span { font-size: 13px; color: var(--graphite); }
.cb-card a:hover { color: var(--park-red); }
.no-js .cb { display: none; }
@media (max-width: 768px) { .cb { right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cb, .cb-btn { transition: none; } }
.rm .cb { transition: none; }

/* FIX-04 §8.4: headings never end on a single word — the last two words are bound (  in the HTML) and the
   long ones scale with their column so the bound pair always fits */
.cons-text .h-44 { font-size: clamp(22px, calc((50vw - 88px) / 13), 38px); }
@media (max-width: 768px) {
  .cons-text .h-44 { font-size: min(29px, calc((100vw - 52px) / 13)); }
  .en-panel { max-width: calc(100% - 32px); padding: 32px 16px; }
  .en-h2 { font-size: min(34px, calc((100vw - 68px) / 10.4)); }
}

/* FIX-04 §8.6: short (landscape-phone) viewports — the card opens beside the button and never reaches the header */
@media (max-height: 520px) {
  .cb-card { bottom: 0; right: 72px; max-height: calc(100vh - var(--hdr) - 48px); overflow-y: auto; overscroll-behavior: contain; transform-origin: 100% 100%; }
}

/* FIX-04 §8.5: short landscape screens — no pins (JS), scenes stacked: text, then the full frame */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --hdr: 64px; }
  .hdr { padding: 0 24px; }
  .menu { --mbx: 24px; }
  .hdr-logo, .hdr.is-solid .hdr-logo { height: 40px; transform: none; }
  .hl, .ex { --hw: min(100vw, 760px); }
  .hl-text { left: auto; width: min(44vw, 420px); margin: 0 auto; padding: 0; }
  .hl-stage {
    -webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 7%, #000 92%, transparent 99%), linear-gradient(to right, transparent .5%, #000 3.5%, #000 96.5%, transparent 99.5%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 1%, #000 7%, #000 92%, transparent 99%), linear-gradient(to right, transparent .5%, #000 3.5%, #000 96.5%, transparent 99.5%);
            mask-composite: intersect;
  }
  .hl-inner, .ex-inner { height: auto; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--hdr) + 16px) 0 24px; }
  .hl-text, .ex-text { position: relative; top: auto; flex: none; display: block; padding: 0 24px; }
  .hl-stage, .ex-scale { position: relative; flex: none; left: auto; bottom: auto; top: auto; margin: 8px auto 0; transform: none !important; }
  .ex-frame { position: relative; inset: auto; order: 2; }
  .ex-text { order: 1; }
  .h-hero { font-size: 52px; }
  .car { min-height: 0; }
  .car-photo { min-height: 60vh; }
}
@media (max-width: 1200px) and (min-width: 769px) {
  .car-model { font-size: min(32px, calc((100vw - 860 * var(--u) - 80px) / 8.8)); }
}

/* FIX-06b (owner): steady contact button with a slow, soft pulse along its outline */
.cb-btn { position: relative; box-shadow: 0 6px 18px rgba(17, 26, 33, .16); }
.cb-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(181, 33, 39, .30); animation: cbPulse 4.2s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes cbPulse { 0% { box-shadow: 0 0 0 0 rgba(181, 33, 39, .30); } 60% { box-shadow: 0 0 0 12px rgba(181, 33, 39, 0); } 100% { box-shadow: 0 0 0 12px rgba(181, 33, 39, 0); } }
.cb-btn[aria-expanded="true"]::after, .cb-btn:hover::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .cb-btn::after { animation: none; } }
.rm .cb-btn::after { animation: none; }