/* Carvantage site styles. Tokens live in tokens.css.
   Layout idea: a dealer's spec sheet. Hairline rows, labels in a condensed
   utility face, prices in the display face, and the viewfinder brackets from
   the logo used as the one bold device: around the hero, on photos, on focus. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: var(--t1); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: var(--track-tight); line-height: var(--lh-tight); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(var(--t5), 4.8vw, var(--t7)); letter-spacing: var(--track-display); line-height: 1.1; }
h2 { font-size: clamp(var(--t4), 3.2vw, var(--t5)); line-height: var(--lh-snug); }
h3 { font-size: var(--t3); font-weight: 600; letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
h4 { font-size: var(--t2); font-weight: 600; letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r1); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 88px; } /* sticky header is 72px; anchors land clear of it */
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.small { font-size: var(--t0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand-accent); border-radius: var(--r2); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }

.wrap { max-width: var(--w-page); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.wrap.text { max-width: var(--w-text); }
.wrap.narrow { max-width: var(--w-narrow); }

/* Labels: the condensed utility face, uppercase, tracked */
.eyebrow, .label { font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); line-height: 1.4; }
.eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: -1px; border-left: 2.5px solid var(--coral); border-top: 2.5px solid var(--coral); }
.on-brand .eyebrow, .eyebrow.on-brand { color: var(--on-brand-3); }
.on-brand .eyebrow::before { border-color: var(--brand-accent); }
.lede { font-size: var(--t2); line-height: var(--lh-body); color: var(--text-2); max-width: 36em; }
.on-brand .lede { color: var(--on-brand-2); }

/* Viewfinder brackets: top-left and bottom-right, like the logo */
.vf { position: relative; }
.vf::before, .vf::after { content: ""; position: absolute; width: 28px; height: 28px; border: 3px solid var(--coral); pointer-events: none; z-index: 2; transition: opacity var(--slow), transform var(--slow); }
.vf::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.on-brand .vf::before, .on-brand .vf::after { border-color: var(--brand-accent); }

/* ---- Draft mode ---- */
body.draft .todo { outline: 2px dashed var(--coral); outline-offset: 3px; border-radius: var(--r1); cursor: help; }
.draft-note { background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--f-label); font-size: var(--t0); letter-spacing: .02em; color: var(--text-2); padding: 6px 0; }
.draft-note .wrap { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.draft-note i { display: inline-block; width: 18px; height: 12px; outline: 2px dashed var(--coral); outline-offset: 2px; border-radius: 2px; margin-inline: var(--s1); }

/* ---- Logo ---- */
.lockup { display: inline-flex; align-items: center; text-decoration: none; color: inherit; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-size: 1.65rem; white-space: nowrap; }
.wordmark { position: relative; display: inline-flex; padding: .2em .38em .16em; }
.wordmark::before, .wordmark::after { content: ""; position: absolute; width: .58em; height: .58em; border: .13em solid var(--coral); }
.wordmark::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.wordmark::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* ---- Header ---- */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(244, 244, 242, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s7); min-height: 72px; }
.site-nav { display: flex; gap: var(--s6); margin-left: auto; }
.site-nav a { font-family: var(--f-body); font-weight: 500; font-size: var(--t1); text-decoration: none; color: var(--text-2); padding: var(--s2) 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--coral); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong); border-radius: var(--r2); padding: var(--s2) var(--s3); min-height: 44px; cursor: pointer; font-family: var(--f-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 960px) {
  .site-head .wrap { gap: var(--s3); }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(244, 244, 242, .98); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: var(--s2) clamp(16px, 4vw, 32px) var(--s4); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: var(--s3) 0; border-bottom: 1px solid var(--line); min-height: 48px; display: flex; align-items: center; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .menu-btn { display: inline-flex; align-items: center; }
  .site-head .btn.wa .t { display: none; }
  .site-head .btn.wa { width: 44px; min-height: 44px; padding: 0; }
}

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s5); border-radius: var(--r2); border: 1px solid transparent; font-family: var(--f-body); font-weight: 600; font-size: var(--t1); text-decoration: none; cursor: pointer; transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast); white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent-bg); color: var(--accent-ink); }
.btn.primary:hover { background: #FF7D63; }
.btn.primary > span[aria-hidden] { margin-left: var(--s3); font-size: 1.4em; line-height: 1; }
.btn.dark { background: var(--inverse); color: var(--on-inverse); }
.btn.dark:hover { background: var(--inverse-hover); }
.btn.outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn.outline:hover { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
.on-brand .btn.outline, .btn.outline.on-brand { color: var(--on-brand); border-color: var(--on-brand-2); }
.on-brand .btn.outline:hover { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.btn.wa { background: var(--inverse); color: var(--on-inverse); border-radius: var(--r-pill); }
.btn.wa:hover { background: var(--inverse-hover); }
.btn.sm { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--t0); }
.btn.lg { min-height: 56px; padding: var(--s4) var(--s7); font-size: var(--t2); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid currentColor; border-color: var(--graphite) transparent var(--graphite) transparent; animation: spin .8s linear infinite; }
.btn.dark.loading::after, .btn.wa.loading::after { border-color: var(--on-inverse) transparent var(--on-inverse) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--text); }
.link.arrow::after { content: " →"; }

/* ---- Chips (filters) ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-family: var(--f-body); font-weight: 500; font-size: var(--t0); cursor: pointer; transition: background var(--fast), color var(--fast), border-color var(--fast); }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-pressed="true"], .chip.selected { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
.chip[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Sections ---- */
.section { padding-block: clamp(var(--s9), 7vw, var(--s12)); }
.section.tight { padding-block: clamp(var(--s7), 5vw, var(--s10)); }
.section.on-brand { background: var(--brand); color: var(--on-brand); border-block: 1px solid var(--brand-line); }
.section.on-surface { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s7); }
.sec-head > div { display: grid; gap: var(--s2); }
.sec-head h1, .sec-head h2 { max-width: 26ch; }
.sec-head p { color: var(--text-2); max-width: 40em; line-height: var(--lh-body); margin-top: var(--s1); }
.on-brand .sec-head p { color: var(--on-brand-2); }

/* Spec-sheet rows: label column, content column */
.sheet { display: grid; border-top: 1px solid var(--line); }
.on-brand .sheet { border-top-color: var(--brand-line); }
.sheet-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s4) var(--s8); padding-block: var(--s7); border-bottom: 1px solid var(--line); }
.on-brand .sheet-row { border-bottom-color: var(--brand-line); }
.sheet-row > .lbl { display: grid; gap: var(--s2); align-content: start; }
.sheet-row > .lbl h3 { font-size: var(--t3); line-height: var(--lh-snug); }
.sheet-row > .lbl p { color: var(--text-3); font-size: var(--t0); line-height: var(--lh-body); }
.on-brand .sheet-row > .lbl p { color: var(--on-brand-3); }
@media (max-width: 760px) { .sheet-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s5); } }

/* ---- Car cards ---- */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s5); }
.car-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; transition: border-color var(--slow), box-shadow var(--slow), transform var(--slow); }
.car-card:hover, .car-card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-4px); }
.car-card .shot { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.car-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.car-card:hover .shot img { transform: scale(1.03); }
.car-card .shot .mark { position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; background: var(--brand); border-radius: var(--r1); padding: 3px; }
.car-card .shot .placeholder { position: absolute; inset: 0; }
/* Branded temporary panel — silhouette only, no fake car photos */
.vehicle-placeholder {
  --placeholder-bg: var(--surface-2);
  --placeholder-ink: #5a6570;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--placeholder-ink);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--coral-bright) 7%, transparent) 0%, transparent 42%),
    linear-gradient(0deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 38%),
    var(--placeholder-bg);
}
.vehicle-placeholder .placeholder-art {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--s3) var(--s4) 0;
}
.vehicle-placeholder .placeholder-art svg {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  display: block;
}
.vehicle-placeholder .placeholder-copy {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  padding: var(--s2) var(--s4) var(--s4);
  z-index: 1;
}
.vehicle-placeholder .placeholder-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}
.vehicle-placeholder .placeholder-meta {
  margin: 0;
  font-family: var(--f-label);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vehicle-placeholder .placeholder-soon {
  margin: 4px 0 0;
  font-family: var(--f-label);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.car-card .shot .placeholder .car-shape { width: 52%; height: auto; opacity: .5; }
.placeholder svg .hub { fill: var(--brand-card); }
/* brackets appear on hover and keyboard focus: "see details" */
.car-card .shot::before, .car-card .shot::after { content: ""; position: absolute; width: 24px; height: 24px; border: 2px solid var(--coral); opacity: 0; transition: opacity var(--slow); pointer-events: none; }
.car-card .shot::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.car-card .shot::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.car-card:hover .shot::before, .car-card:hover .shot::after, .car-card:focus-within .shot::before, .car-card:focus-within .shot::after { opacity: 1; transform: none; }
.car-card .status { position: absolute; top: 10px; right: 10px; }
.car-card .body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); flex: 1; }
.car-card h3 { font-size: var(--t2); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
.car-card h3 a { text-decoration: none; }
.car-card h3 a::after { content: ""; position: absolute; inset: 0; }
.car-card .trim { color: var(--text-3); font-size: var(--t0); line-height: 1.4; margin-top: 5px; }
.car-card .card-heading { display: flex; justify-content: space-between; gap: var(--s3); align-items: start; }
.car-card .card-heading > div { min-width: 0; }
.car-card .card-year { font-family: var(--f-label); font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; line-height: 1.3; }
.car-card .price { flex: none; font-family: var(--f-display); font-weight: 700; font-size: var(--t3); letter-spacing: var(--track-tight); line-height: 1.15; }
.card-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.card-spec div { min-width: 0; }
.card-spec dt { font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
.card-spec dd { margin: 2px 0 0; color: var(--text-2); font-size: var(--t0); line-height: 1.35; overflow-wrap: anywhere; }
.card-spec dd.short { color: var(--warn); }
.car-card .tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.car-card.is-sold .shot img, .car-card.is-sold .shot .placeholder svg { filter: grayscale(1); opacity: .6; }
.car-card.is-sold .price { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.car-card.is-reserved .shot img, .car-card.is-reserved .shot .placeholder svg { opacity: .7; }
.tag { display: inline-flex; align-items: center; font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r1); padding: 3px var(--s2); color: var(--text-2); }
.tag.good { border-color: transparent; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: var(--t0); line-height: 1.4; color: var(--text-2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.card-open { font-weight: 600; color: var(--accent); }
.card-footer .short { color: var(--warn); }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; background: rgba(14, 16, 19, .85); border: 1px solid rgba(244, 244, 242, .08); border-radius: var(--r-pill); padding: 4px 10px 4px 8px; color: var(--text-2); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.available { color: var(--green-400); }
.status-pill.reserved { color: var(--amber-400); }
.status-pill.sold { color: var(--grey-200); }
.buybox > .status-pill { justify-self: start; background: #edf6f0; border-color: #d2e7da; color: var(--ok); }

.empty { grid-column: 1 / -1; border: 1px dashed var(--line-strong); border-radius: var(--r3); padding: var(--s7); display: grid; gap: var(--s4); justify-items: start; }
.empty p { color: var(--text-2); max-width: 40em; }

/* ---- Promises / steps / ticked list ---- */
.promises { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: promise; }
.promise { display: grid; grid-template-columns: 38px 1fr; gap: var(--s2) var(--s4); align-content: start; padding-block: var(--s4); border-top: 1px solid var(--line); }
.promise::before { counter-increment: promise; content: counter(promise, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--f-display); font-size: var(--t2); font-weight: 800; color: var(--coral); letter-spacing: var(--track-tight); }
.promise h3 { font-size: var(--t2); line-height: var(--lh-snug); }
.promise p { color: var(--text-2); font-size: var(--t1); line-height: var(--lh-body); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); counter-reset: step; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--line-strong); padding-top: var(--s4); display: grid; gap: var(--s2); align-content: start; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--f-display); font-weight: 800; font-size: var(--t5); letter-spacing: var(--track-display); line-height: 1; color: var(--coral); margin-bottom: var(--s2); }
.step h3 { font-size: var(--t2); line-height: var(--lh-snug); }
.step p { color: var(--text-2); font-size: var(--t1); line-height: var(--lh-body); }
.on-brand .step { border-top-color: var(--brand-line); }
.on-brand .step::before { color: var(--brand-accent); }
.on-brand .step p { color: var(--on-brand-2); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ticks li { display: flex; gap: var(--s3); align-items: flex-start; line-height: var(--lh-body); }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323262B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }

.law { display: grid; gap: var(--s4); align-items: start; background: var(--brand); color: var(--on-brand-2); border-radius: var(--r3); padding: clamp(var(--s5), 3vw, var(--s7)); margin-top: var(--s8); }
.law .badge { justify-self: start; font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; background: var(--on-brand); color: var(--brand); border-radius: var(--r1); padding: 6px 10px; white-space: nowrap; }
.law p { color: var(--on-brand-2); line-height: var(--lh-body); }
.law b { color: var(--on-brand); }
@media (max-width: 560px) { .law { grid-template-columns: 1fr; } }

/* ---- Panels ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: clamp(var(--s5), 3vw, var(--s7)); display: grid; gap: var(--s4); align-content: start; }
.panel h3 { line-height: var(--lh-snug); }
.panel p { line-height: var(--lh-body); }
.panel.on-brand { background: var(--brand-card); border-color: var(--brand-line); color: var(--on-brand); }
.panel.on-brand p { color: var(--on-brand-2); }
.on-brand .btn.wa { background: var(--on-brand); color: var(--brand); }
.on-brand .btn.wa:hover { background: var(--offwhite-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(var(--s7), 5vw, var(--s10)); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.bio { display: grid; grid-template-columns: 156px 1fr; gap: var(--s6); align-items: start; }
@media (max-width: 640px) { .bio { grid-template-columns: 1fr; } }
.bio .photo { aspect-ratio: 4/5; max-width: 100%; border-radius: var(--r2); background: var(--brand-card); color: var(--on-brand-3); display: grid; place-items: center; text-align: center; font-family: var(--f-label); font-size: var(--t0); letter-spacing: .08em; text-transform: uppercase; padding: var(--s3); overflow: hidden; }
.bio .photo.has-photo { padding: 0; }
.bio .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .bio .photo { max-width: 240px; } }
.bio blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(var(--t3), 2.4vw, var(--t4)); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.bio p { color: var(--text-2); line-height: var(--lh-body); }
.owner-card { display: grid; gap: var(--s2); padding: var(--s5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r2); font-weight: 600; }
.owner-card .small { color: var(--text-3); font-weight: 400; font-size: var(--t-1); }
.owner-monogram { font-family: var(--f-display); font-size: 4.5rem; line-height: 1; letter-spacing: -.08em; margin-block: var(--s3) var(--s5); }
.owner-monogram span { color: var(--coral); }
.bio-copy { display: grid; gap: var(--s4); }
.bio-copy .link { justify-self: start; }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-grid > div { display: grid; gap: var(--s3); align-content: start; padding: var(--s6) var(--s6) var(--s6) 0; border-right: 1px solid var(--line); }
.contact-grid > div + div { padding-left: var(--s6); }
.contact-grid > div:last-child { border-right: 0; }
.contact-grid .v { font-family: var(--f-display); font-weight: 700; font-size: clamp(var(--t2), 2.2vw, var(--t3)); letter-spacing: var(--track-tight); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.contact-grid p { color: var(--text-2); font-size: var(--t0); line-height: var(--lh-body); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .contact-grid > div { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s5) 0; } .contact-grid > div + div { padding-left: 0; } .contact-grid > div:last-child { border-bottom: 0; } }

/* ---- Forms ---- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label:not(.upload), .field > legend, .field > .field-label { font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); padding: 0; line-height: 1.35; }
.on-brand .field > label, .on-brand .field > .field-label { color: var(--on-brand-2); }
.field .hint { font-size: var(--t-1); color: var(--text-3); }
.field .error { display: none; font-size: var(--t-1); color: var(--error); font-weight: 600; }
.field.invalid .error { display: block; }
.field.invalid .input, .field.invalid .select, .field.invalid .textarea, .field.invalid .plate { border-color: var(--error); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r2); color: var(--text); transition: border-color var(--fast); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-2); }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--grey-500); }
.select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202327' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.textarea { min-height: 112px; resize: vertical; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--s2); }
.radio-card { position: relative; display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r2); background: var(--surface); cursor: pointer; min-height: 48px; }
.radio-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-card b { font-weight: 600; font-size: var(--t0); }
.radio-card span { font-size: var(--t-1); color: var(--text-3); }
.radio-card:hover { border-color: var(--text-2); }
.radio-card:has(input:checked) { border-color: var(--inverse); background: var(--inverse); color: var(--on-inverse); }
.radio-card:has(input:checked) span { color: var(--on-brand-2); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t0); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--coral-bright); flex: none; }
.plate { display: flex; align-items: stretch; max-width: 320px; background: #F6CF1A; border: 2px solid #111; border-radius: var(--r2); overflow: hidden; }
.plate .band { background: #1F4FA0; color: #fff; font-weight: 700; font-size: var(--t-1); display: grid; place-items: center; padding: 0 var(--s2); }
.plate input { flex: 1; min-width: 0; border: 0; background: transparent; color: #121212; font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: var(--s2) var(--s3); }
.plate input::placeholder { color: rgba(18, 18, 18, .35); }
.plate:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.upload { position: relative; border: 2px dashed var(--line-strong); border-radius: var(--r2); padding: var(--s5); display: grid; gap: var(--s2); justify-items: start; background: var(--surface-2); cursor: pointer; }
.upload:hover { border-color: var(--text-2); }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.upload b { font-weight: 600; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.photo-thumbs:empty { display: none; }
.photo-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r1); border: 1px solid var(--line); }
.msg { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--t0); border: 1px solid; }
.msg.error { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: color-mix(in srgb, var(--error) 10%, transparent); }
.msg.success { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.msg.info { color: var(--text-2); border-color: var(--line); background: var(--surface-2); }

/* ---- Sheet (bottom dialog) ---- */
.sheet-dialog { position: fixed; inset: 0; z-index: 50; background: transparent; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.sheet-dialog:not([open]) { display: none; }
.sheet-dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(5px); }
.sheet-dialog .box { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: var(--r4) var(--r4) 0 0; padding: var(--s6) clamp(16px, 4vw, 28px) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s4); }
@media (min-width: 700px) { .sheet-dialog { align-items: center; padding: var(--s6); } .sheet-dialog .box { border-radius: var(--r4); } }
.sheet-dialog .hd { display: flex; align-items: center; gap: var(--s3); }
.sheet-dialog .hd :is(h2, h3) { font-size: var(--t3); }
.sheet-dialog .close { margin-left: auto; background: none; border: 0; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--text-2); border-radius: var(--r-pill); }
.sheet-dialog .close:hover { background: var(--surface-2); color: var(--text); }
.sheet-dialog .preview { font-size: var(--t0); background: var(--surface-2); border-left: 3px solid var(--coral); padding: var(--s3) var(--s4); white-space: pre-wrap; color: var(--text-2); }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 60; background: var(--black-1); color: var(--offwhite); display: grid; grid-template-rows: auto 1fr auto; }
.lightbox .lb-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); font-family: var(--f-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-300); }
.lightbox .lb-stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--s4); }
.lightbox .lb-stage img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: var(--r1); }
.lightbox .lb-btn { background: rgba(244, 244, 242, .1); color: var(--offwhite); border: 0; border-radius: var(--r-pill); min-width: 48px; min-height: 48px; cursor: pointer; font-size: 1.75rem; line-height: 1; display: grid; place-items: center; }
.lightbox .lb-btn:hover { background: rgba(244, 244, 242, .2); }
.lightbox .lb-btn.close { font-size: 1.1rem; }
.lightbox .prev, .lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox .prev { left: var(--s3); } .lightbox .next { right: var(--s3); }
.lightbox .lb-cap { padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--grey-300); font-size: var(--t0); }
.gallery .main .zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery .main .zoom img { width: 100%; height: 100%; object-fit: cover; }
.notes .note-photo { display: block; margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent); font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.notes .note-photo:hover { color: var(--text); }
.buybox .trust { list-style: none; margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); color: var(--text-2); }

/* ---- Footer ---- */
.site-foot { background: var(--brand); color: var(--on-brand-3); border-top: 1px solid var(--brand-line); padding-block: var(--s8) var(--s9); font-size: var(--t0); }
.site-foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; }
.site-foot .lockup { color: var(--on-brand); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--on-brand-2); font-family: var(--f-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.site-foot nav a:hover { color: var(--on-brand); }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--brand-line); padding-top: var(--s5); }
@media (max-width: 640px) { .site-foot .wrap { grid-template-columns: 1fr; } }

/* ---- Homepage hero: the promise and a closer look ---- */
.hero { position: relative; background: var(--brand); color: var(--on-brand); overflow: hidden; border-bottom: 1px solid var(--brand-line); }
.hero .wrap { position: relative; padding-block: clamp(48px, 5vw, 72px) 32px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: var(--s5); }
.hero-copy .eyebrow { font-size: var(--t-1); letter-spacing: var(--track-label); }
.hero h1 { color: var(--on-brand); font-size: clamp(2rem, 5.2vw, 3.75rem); line-height: 1.12; letter-spacing: -0.035em; max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--brand-accent); }
.hero .lede { font-size: var(--t2); line-height: var(--lh-body); max-width: 28em; }
.hero .btn-row { margin-top: var(--s1); }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t0); line-height: 1.4; color: var(--on-brand-2); }
.hero-proof li::before { content: "✓"; color: var(--brand-accent); margin-right: 6px; }
.hero-media { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #343a40; background: #171c21; border-radius: var(--r3); overflow: hidden; }
.inspection-top, .inspection-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 22px 24px; font-family: var(--f-label); font-weight: 500; font-size: var(--t-1); letter-spacing: .09em; text-transform: uppercase; }
.inspection-top { border-bottom: 1px solid #2c3238; color: var(--on-brand-2); }
.inspection-index { color: var(--on-brand-3); white-space: nowrap; }
.inspection-art { position: relative; flex: 1; min-height: 300px; display: grid; align-items: center; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 32px 32px; }
.inspection-art img { position: relative; width: 100%; height: auto; margin-top: 38px; z-index: 1; }
.inspection-word { position: absolute; inset: 18px 0 auto; text-align: center; font-family: var(--f-display); font-size: clamp(48px, 5.3vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -.07em; color: #30373d; }
.inspection-point { position: absolute; z-index: 2; font-family: var(--f-label); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--on-brand-2); }
.point-history { top: 26%; left: 34%; }
.point-condition { bottom: 9%; right: 5%; }
.inspection-bottom { border-top: 1px solid #2c3238; color: var(--on-brand); padding-block: 16px; }
.inspection-bottom > span { display: flex; align-items: center; gap: var(--s3); }
.inspection-bottom i { width: 8px; height: 8px; background: var(--brand-accent); border-radius: 50%; box-shadow: 0 0 0 4px #ff6a4d16; }
.inspection-bottom a { display: grid; place-items: center; min-width: 44px; min-height: 44px; text-decoration: none; font-size: 1.75rem; color: var(--brand-accent); border: 1px solid #3a424a; border-radius: 50%; transition: background var(--fast); }
.inspection-bottom a:hover { background: #ffffff0c; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero h1 { font-size: clamp(1.875rem, 7vw, 3.25rem); max-width: none; } .hero-media { min-height: 350px; } .inspection-word { font-size: clamp(60px, 10vw, 90px); } .inspection-art { min-height: 250px; } .inspection-art img { width: min(100%, 560px); justify-self: center; margin-top: 24px; } .point-history { top: 20%; left: 34%; } .point-condition { bottom: 6%; } }
@media (max-width: 560px) {
  .hero .wrap { padding-top: 36px; }
  .hero-copy { gap: var(--s4); }
  /* Ease the three-line headline: smaller clamp, looser track, roomier leading */
  .hero h1 { font-size: clamp(1.625rem, 7.2vw, 2.15rem); letter-spacing: -0.02em; line-height: 1.2; }
  .hero .lede { font-size: var(--t1); }
  /* Full-width equal CTAs, stacked with a clearer gap */
  .hero .btn-row { flex-direction: column; align-items: stretch; gap: var(--s4); }
  .hero .btn-row .btn { width: 100%; }
  /* Quiet proof row: more space under CTAs, slightly smaller type */
  .hero-proof { gap: 6px 14px; font-size: 0.75rem; margin-top: var(--s3); }
  .hero-media { min-height: 280px; }
  .inspection-top, .inspection-bottom { padding: 14px 16px; }
  .inspection-art { min-height: 220px; }
  .inspection-word { font-size: 14vw; }
  .inspection-point { font-size: .65rem; }
  .point-history { top: 23%; left: 34%; }
  .point-condition { right: 4%; bottom: 7%; }
}

/* Search: a bright, simple place to start */
.search { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.7fr) auto; gap: var(--s5); align-items: end; margin-top: 40px; padding: var(--s5) var(--s6); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); }
.search > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search .row { display: grid; gap: var(--s2); align-items: center; }
.search .row > label, .search .row > .field-label { font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.search .chips { gap: 6px; }
.search .chip { min-height: 48px; padding-inline: 12px; font-size: var(--t-1); }
.search .go { display: grid; gap: var(--s2); justify-items: stretch; }
.search .count { font-size: var(--t-1); color: var(--text-2); }
.search .count:empty { display: none; }
@media (max-width: 1120px) { .search { grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr); } .search .go { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s4); } }
@media (max-width: 640px) { .search { grid-template-columns: 1fr; padding: var(--s5); margin-top: 28px; } .search .go { display: grid; gap: var(--s2); } .search .chips { gap: 8px; } .search .chip { padding-inline: 14px; } }

/* Fact strip under the hero */
.strip { background: var(--brand); border-bottom: 1px solid var(--brand-line); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3) var(--s7); padding-block: var(--s6); font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-brand-3); line-height: 1.35; }
.strip b { display: block; color: var(--on-brand); font-family: var(--f-display); font-weight: 700; letter-spacing: var(--track-tight); text-transform: none; font-size: clamp(var(--t3), 2.5vw, var(--t4)); line-height: 1.15; margin-bottom: 4px; }
@media (max-width: 560px) { .strip .wrap { grid-template-columns: repeat(2, 1fr); } }

/* ---- Browse page ---- */
.filterbar { display: grid; gap: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--s5); margin-bottom: var(--s7); }
.filter-rows { display: grid; gap: var(--s4); }
.filter-toggle { display: none; }
@media (max-width: 760px) {
  /* Phones: filters fold away behind one button so the first car is on screen */
  .filter-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r2); background: var(--surface); cursor: pointer; font-family: var(--f-label); font-weight: 600; font-size: var(--t0); letter-spacing: .06em; text-transform: uppercase; }
  .filter-toggle::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform var(--fast); }
  .filter-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
  .filter-rows { display: none; }
  .filter-rows.open { display: grid; }
}
.filterbar .row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); align-items: center; }
.filterbar .group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.filterbar .group > span, .filterbar .group > label > span { font-family: var(--f-label); font-size: var(--t0); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: var(--s2); }
.filterbar .select { min-height: 40px; padding-block: var(--s2); width: auto; background-color: transparent; }
.filterbar .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s4); }
.filterbar .meta p { font-family: var(--f-display); font-weight: 700; font-size: var(--t2); color: var(--text); }
.filterbar .meta .sort { display: flex; gap: var(--s2); align-items: center; font-family: var(--f-label); font-size: var(--t0); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sold-strip { margin-top: var(--s10); border-top: 1px solid var(--line); padding-top: var(--s6); }
.sold-strip h3 { font-size: var(--t2); line-height: var(--lh-snug); margin-bottom: var(--s2); }
.sold-strip .row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sold-strip .row span { font-size: var(--t0); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s3); }
.sold-strip b { color: var(--text); }

/* ---- Car page ---- */
.crumbs { display: flex; gap: var(--s2); font-family: var(--f-label); font-size: var(--t-1); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); padding-block: var(--s4); flex-wrap: wrap; line-height: 1.4; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* Three children: gallery, buy box, details. Desktop: gallery and details stack in the left column,
   buy box sticks on the right. Phones: one column, buy box straight after the photos. */
.car-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(var(--s6), 4vw, var(--s9)); align-items: start; padding-bottom: var(--s11); }
.car-layout > .gallery { grid-column: 1; }
.car-layout > .buybox { grid-column: 2; grid-row: 1 / span 2; }
.car-layout > .car-details { grid-column: 1; }
@media (max-width: 900px) {
  .car-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--s11) + 72px); }
  .car-layout > .gallery, .car-layout > .buybox, .car-layout > .car-details { grid-column: 1; grid-row: auto; }
  .car-layout > .buybox { position: static; }
}
/* Phone action bar */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(244, 244, 242, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .action-bar .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding-block: var(--s2); }
  .action-bar .price { font-family: var(--f-display); font-weight: 800; font-size: var(--t3); letter-spacing: -0.02em; line-height: 1.1; margin-right: auto; min-width: 0; }
  .action-bar .price small { display: block; font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .action-bar .btn.wa { width: 48px; padding: 0; flex: none; }
  .action-bar .btn.primary { flex: none; padding-inline: var(--s4); }
  .action-bar { transition: transform var(--slow); }
  .action-bar.is-hidden { transform: translateY(110%); }
}
.gallery { display: grid; gap: var(--s2); }
.gallery .main { position: relative; aspect-ratio: 4/3; max-width: 100%; border-radius: var(--r2); background: var(--brand-card); overflow: hidden; color: var(--on-brand-3); display: grid; place-items: center; }
.gallery .main::before, .gallery .main::after { content: ""; position: absolute; width: 32px; height: 32px; border: 3px solid var(--brand-accent); z-index: 2; pointer-events: none; }
.gallery .main::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.gallery .main::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gallery .main .mark { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; }
.gallery .main .placeholder { width: 100%; height: 100%; }
.gallery .main .placeholder b { font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand-2); }
.gallery .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.gallery .thumbs button { display: block; width: 100%; aspect-ratio: 4/3; border: 2px solid transparent; border-radius: var(--r1); background: var(--surface-2); padding: 0; overflow: hidden; cursor: pointer; font-size: var(--t-1); color: var(--text-3); }
.gallery .thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs button[aria-current="true"] { border-color: var(--coral); }
.buybox { position: sticky; top: 88px; display: grid; gap: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s6); }
.buybox h1 { font-size: clamp(var(--t3), 2.5vw, var(--t4)); letter-spacing: var(--track-tight); line-height: var(--lh-snug); }
.buybox .price { font-family: var(--f-display); font-weight: 800; font-size: clamp(var(--t5), 4vw, 2.75rem); letter-spacing: var(--track-display); line-height: 1.05; }
.buybox .price small { display: block; font-family: var(--f-label); font-weight: 600; font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); margin-top: var(--s3); line-height: 1.35; }
.buybox .btn { width: 100%; }
.buybox .px { font-size: var(--t0); color: var(--text-2); }
.keyfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .keyfacts { grid-template-columns: repeat(2, 1fr); } }
.keyfacts div { display: grid; gap: 2px; padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.keyfacts div:nth-child(n+5) { border-bottom: 0; }
@media (max-width: 560px) { .keyfacts div:nth-child(n+5) { border-bottom: 1px solid var(--line); } .keyfacts div:nth-child(n+7) { border-bottom: 0; } }
.keyfacts dt { font-family: var(--f-label); font-size: var(--t-1); color: var(--text-3); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.3; }
.keyfacts dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(var(--t2), 2.5vw, var(--t3)); letter-spacing: var(--track-tight); line-height: 1.2; overflow-wrap: anywhere; }
.keyfacts dd.short { color: var(--warn); }
.car-section { display: grid; gap: var(--s4); padding-block: var(--s8); border-top: 1px solid var(--line); }
.car-section h2 { font-size: clamp(var(--t3), 2.5vw, var(--t4)); line-height: var(--lh-snug); }
.car-section .sub { color: var(--text-2); max-width: 40em; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; }
.notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.notes li:last-child { border-bottom: 0; }
.notes li::before { content: ""; width: 12px; height: 12px; border-left: 2.5px solid var(--coral); border-top: 2.5px solid var(--coral); margin-top: 8px; }
.notes li small { display: block; color: var(--text-3); font-family: var(--f-label); font-size: var(--t-1); letter-spacing: var(--track-label); text-transform: uppercase; margin-top: 2px; line-height: 1.35; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { font-family: var(--f-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); font-size: var(--t-1); padding-top: 2px; line-height: 1.35; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.feature-list li { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--s2) var(--s4); font-size: var(--t0); line-height: 1.4; }
.spec-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--s7); margin: 0; }
.spec-table div { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t0); line-height: 1.4; }
.spec-table dt { color: var(--text-2); }
.spec-table dd { margin: 0; font-weight: 600; text-align: right; }
.banner { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r2); background: var(--surface-2); border-left: 3px solid var(--warn); }
.banner.sold { border-left-color: var(--sold); }

/* ---- Sell page ---- */
.sell-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(var(--s7), 5vw, var(--s10)); align-items: start; }
@media (max-width: 900px) { .sell-layout { grid-template-columns: minmax(0, 1fr); } }
.sell-aside { position: sticky; top: 88px; display: grid; gap: var(--s6); }
@media (max-width: 900px) { .sell-aside { position: static; } }
.sell-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: clamp(var(--s5), 3vw, var(--s7)); display: grid; gap: var(--s6); }
.sell-form h2 { font-size: var(--t3); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.sell-form .group { display: grid; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.sell-form .group:first-child { padding-top: 0; border-top: 0; }
.px-box { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r2); background: var(--surface-2); border-left: 3px solid var(--coral); }

/* ---- Homepage reference layout ---- */
.standard-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s8), 6vw, var(--s12)); align-items: start; }
.standard-intro .sec-head { margin-bottom: 0; }
.standard-intro .law { margin-top: var(--s7); }
#sell .two { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
#sell .two .panel { border: 0; border-radius: 0; }
#sell .two .panel + .panel { border-left: 1px solid var(--line); }
.about-contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(var(--s8), 6vw, var(--s12)); align-items: start; }
.contact-panel { background: var(--brand); color: var(--on-brand); border-radius: var(--r3); padding: clamp(var(--s5), 3vw, var(--s7)); }
.contact-panel .sec-head { margin-bottom: var(--s5); }
.contact-panel .contact-grid { grid-template-columns: 1fr; border-color: var(--brand-line); }
.contact-panel .contact-grid > div, .contact-panel .contact-grid > div + div { border: 0; border-bottom: 1px solid var(--brand-line); padding: var(--s5) 0; background: transparent; border-radius: 0; }
.contact-panel .contact-grid > div:last-child { border-bottom: 0; }
.contact-panel .contact-grid .v { color: var(--on-brand); }
.contact-panel .contact-grid p { color: var(--on-brand-2); }
.contact-panel .contact-grid .eyebrow { color: var(--on-brand-3); }
@media (max-width: 860px) {
  .standard-grid, .about-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #sell .two .panel + .panel { border-left: 0; border-top: 1px solid var(--line); }
}

/* Questions: native disclosure controls work with keyboard and without JS. */
.faq-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); }
.faq-layout > div:first-child { display: grid; gap: var(--s3); align-content: start; }
.faq-layout > div:first-child h2 { max-width: 16ch; }
.faq-layout > div:first-child .muted { line-height: var(--lh-body); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { position: relative; padding: 22px 44px 22px 0; list-style: none; font-family: var(--f-display); font-size: var(--t2); font-weight: 600; letter-spacing: var(--track-tight); line-height: var(--lh-snug); cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; font-weight: 400; color: var(--accent); line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-bottom: var(--s6); color: var(--text-2); font-size: var(--t1); line-height: var(--lh-body); max-width: 42em; }
@media (max-width: 760px) { .faq-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .owner-card { grid-template-columns: auto 1fr; align-items: end; } .owner-monogram { grid-row: 1 / 3; margin: 0 20px 0 0; font-size: 3.5rem; } .owner-card .small { align-self: start; } }

/* Stock tools stay compact, with removable and shareable filters. */
.filterbar { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); gap: var(--s5); }
.stock-search { display: flex; gap: var(--s4); align-items: center; }
.stock-search .input { max-width: 560px; padding-left: 44px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687078' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.clear-filters { border: 0; background: transparent; min-height: 44px; padding: 8px 0; color: var(--accent); font-weight: 600; font-size: var(--t0); cursor: pointer; margin-left: auto; white-space: nowrap; }
.clear-filters span { margin-left: 8px; }
.filter-fields { display: grid; gap: var(--s4); }
.filter-disclosure > summary { display: none; }
.filterbar .group > span, .filterbar .group > label > span { font-size: var(--t-1); }
.filterbar .select { min-height: 44px; }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--s2); }
.active-filter { display: flex; align-items: center; gap: 12px; min-height: 40px; max-width: 100%; background: #fdf0eb; color: #9d2c18; border: 1px solid #f1d5cc; border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--t-1); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.active-filter > span { font-size: 1.25rem; line-height: 1; }
.active-filter:hover { background: #fbe3da; }
.empty { border-style: solid; padding: clamp(28px, 5vw, 56px); background: var(--surface); justify-items: center; text-align: center; }
.empty-icon { width: 56px; height: 56px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 2rem; display: grid; place-items: center; color: var(--accent); }
.empty .btn-row { justify-content: center; }
.sold-strip .row > span { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); font-size: var(--t0); }
@media (max-width: 760px) {
  .filterbar { padding: var(--s5); gap: var(--s4); }
  .stock-search { flex-wrap: wrap; gap: var(--s2); }
  .stock-search .input { max-width: none; }
  .filter-disclosure > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-weight: 600; min-height: 44px; }
  .filter-disclosure > summary::-webkit-details-marker { display: none; }
  .filter-disclosure > summary > span { font-size: 1.5rem; color: var(--accent); }
  .filter-disclosure[open] > summary > span { transform: rotate(45deg); }
  .filter-fields { padding-top: var(--s4); }
  .filterbar .group > span { width: 100%; margin-bottom: 2px; }
  .filterbar .group { gap: var(--s2); }
  .filterbar .row { gap: var(--s4); }
  .filterbar .meta .sort { width: 100%; justify-content: space-between; }
  .filterbar .meta .sort .select { max-width: 72%; }
  .clear-filters { margin-left: 0; }
}

/* The enquiry follows the gallery on mobile, before the longer history. */
.gallery .main { background: var(--surface-2); }
.gallery .main .vehicle-placeholder {
  --placeholder-bg: var(--surface-2);
  padding: var(--s5);
}
.gallery .main .vehicle-placeholder .placeholder-art svg { max-width: 520px; }
.gallery .main .vehicle-placeholder .placeholder-title { font-size: clamp(1.15rem, 3vw, 1.5rem); }
.gallery .main .vehicle-placeholder .placeholder-soon { font-size: var(--t-1); letter-spacing: .1em; }
.gallery .main .mark { background: var(--brand); border-radius: var(--r1); padding: 4px; }
@media (max-width: 900px) {
  .car-layout { gap: var(--s6); }
  .car-layout > .gallery { order: 1; }
  .car-layout > .buybox { order: 2; position: static; }
  .car-layout > .car-details { order: 3; }
}
@media (max-width: 380px) { .lockup { font-size: 1.4rem; } .menu-btn { padding-inline: 10px; } .btn.lg { padding-inline: 20px; font-size: var(--t1); } }
.icon-arrow { display: inline-block; width: 20px; height: 20px; flex: none; }
.btn.primary > .icon-arrow { margin-left: var(--s3); }
.card-open { display: inline-flex; align-items: center; gap: 4px; }
.card-open .icon-arrow { width: 14px; height: 14px; }
.empty-icon > svg { width: 24px; height: 24px; }
.sheet-dialog .close { font-size: 1.75rem; }
.on-brand .link { color: var(--brand-accent); }
.on-brand .link:hover { color: var(--on-brand); }
.sell-aside .panel h2 { font-size: var(--t3); }
.hero-media.has-photo { padding: 0; }
.hero-media.has-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.owner-card.has-photo { padding: 0; overflow: hidden; }
.owner-card.has-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }