/* L.M. Motors. One stylesheet for every page.

   Bill Griffin Motors is the reference for how it works (the stock sheet,
   the full screen menu). The look is L.M.'s own: deep ink, soft white, and
   the blue of their logo. Quiet and grounded: nothing shouts.

   The logo is a car with two swooshes sweeping round it. The site uses
   those swooshes in four places, and nowhere else:

   1. Round the car. On the home page they sweep round the featured car,
      and on a car's own page round its main photo, as they do in the logo.
      On a phone the home page has no featured car, so they sweep round
      the headline instead.
   2. Behind everything. Two very large, very faint copies turn slowly and
      never stop, so the page is always gently moving.
   3. Under the title. Every page title is signed with a single stroke.
   4. As the logo itself: in the header, the menu, the footer, and in any
      photo slot that is still waiting for its photo. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #06080d;
  --surface: #0d1016;
  --surface-2: #151921;
  --line: #222730;
  --line-2: #38404c;
  --text: #eef1f6;
  --mute: #9a9fa8;
  --blue: #3a88f2;
  --blue-hi: #62a1f6;
  --plate: #f4f5f7;
  --ink: #05070a;
  --wrap: 1240px;
  --gutter: 20px;
  --r: 12px;
  --r-sm: 8px;
  --top: 72px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* The two swooshes from the L.M. logo, redrawn: a blue one over the top
     right, a blue one under the bottom left, a fine white one inside it. */
  --swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233a88f2' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%234f96f5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a88f2' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%234f96f5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M119.7 27.8A190 190 0 0 1 389.3 183.4 214 214 0 0 0 119.7 27.8Z'/%3E%3Cpath fill='url(%23b)' d='M295 364.5A190 190 0 0 1 10.7 216.6 214 214 0 0 0 295 364.5Z'/%3E%3Cpath fill='%23fff' opacity='.75' d='M243.5 362.3A168 168 0 0 1 54.5 284 184 184 0 0 0 243.5 362.3Z'/%3E%3C/svg%3E");
  /* One stroke of it, for under a page title. */
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%233a88f2' d='M0 17C60 3 140 0 200 6 140 6 60 9 0 17Z'/%3E%3C/svg%3E");
  --swoosh-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233a88f2' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%234f96f5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a88f2' stop-opacity='.25'/%3E%3Cstop offset='.75' stop-color='%234f96f5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M119.7 27.8A190 190 0 0 1 389.3 183.4 198 198 0 0 0 119.7 27.8Z'/%3E%3Cpath fill='url(%23b)' d='M295 364.5A190 190 0 0 1 10.7 216.6 198 198 0 0 0 295 364.5Z'/%3E%3Cpath fill='%23fff' opacity='.75' d='M243.5 362.3A168 168 0 0 1 54.5 284 175 175 0 0 0 243.5 362.3Z'/%3E%3C/svg%3E");
}

@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: .25s; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 16px); background: var(--bg); color-scheme: dark; }
body { margin: 0; color: var(--text); background: var(--bg) radial-gradient(120% 70% at 85% 0%, #0b1730 0%, rgba(11,23,48,0) 60%) fixed; font-family: var(--sans); font-size: 17px; line-height: 1.55; font-feature-settings: "cv11", "ss03"; }
main, .foot { position: relative; z-index: 1; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, dl, dd, figure, blockquote { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: var(--ink); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 12px; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.star { fill: currentColor; stroke: none; }

/* ── The swoosh, always moving ─────────────────────── */
/* The logo's two swooshes, very large and very soft, turning slowly behind
   every page and never stopping. Soft on purpose: broad shapes at low
   strength, so they give the page depth without pulling the eye off the
   words. Only "transform" is animated, so a phone handles it easily. */
.flow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.flow i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); will-change: transform;
  background: var(--swoosh-fine) center / 100% 100% no-repeat; opacity: var(--o); animation: orbit var(--t) linear infinite; }
.flow i:nth-child(1) { --x: 72vw; --y: 38vh; --s: 118vmax; --t: 120s; --o: .2; }
.flow i:nth-child(2) { --x: 18vw; --y: 96vh; --s: 176vmax; --t: 190s; --o: .12; animation-direction: reverse; }
.flow i:nth-child(3) { display: none; }
@keyframes orbit { to { transform: rotate(1turn); } }

/* ── Things ease in as you reach them ──────────────── */
/* Only while the script is running (it adds "js" to <html>), and only until
   each piece has arrived, so nothing is ever left invisible. */
.js [data-rv] { opacity: 0; transform: translateY(16px); }
.js [data-rv].in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.hero-say > *, .finder, .page-head .wrap > * { animation: rise-in .7s var(--ease) both; }
.hero-say > :nth-child(2), .page-head .wrap > :nth-child(2) { animation-delay: .07s; }
.hero-say > :nth-child(3), .page-head .wrap > :nth-child(3) { animation-delay: .14s; }
.finder, .page-head .wrap > :nth-child(4) { animation-delay: .21s; }
.spot { animation: rise-in .8s .2s var(--ease) both; }

/* ── Type ──────────────────────────────────────────── */
h1, h2 { font-weight: 800; margin: 0; letter-spacing: -.04em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.08; }
h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.015em; }
.h-sm { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 16px; }
.h-sm.gap { margin-top: 36px; }
.lede { color: var(--mute); font-size: 1.08rem; max-width: 54ch; }
.lede.sm { font-size: 1rem; margin: 8px 0 18px; }
.small { color: var(--mute); font-size: .86rem; margin-top: 24px; max-width: 76ch; }
.small a, .prose a, .hint a, .rows a, .deal-foot a { text-decoration-color: var(--blue); text-underline-offset: 4px; }
.prose > p { color: #d0d3d9; max-width: 62ch; margin-bottom: 16px; }

/* ── Buttons ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r-sm);
  border: 1px solid transparent; font: 600 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s; }
.btn .ico { width: 18px; height: 18px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 1rem; }
.btn-fill { background: var(--blue); color: var(--ink); }
.btn-fill:hover { background: var(--blue-hi); }
.btn-glass, .btn-line { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-glass:hover, .btn-line:hover { border-color: var(--text); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #dfe6f1; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-col { display: grid; gap: 10px; }
.round { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; transition: border-color .15s; }
.round:hover { border-color: var(--line-2); }
.bare { align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.bare .ico { width: 28px; height: 28px; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: var(--ink); font: 700 .72rem/20px var(--sans); text-align: center; font-style: normal; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mute); font-weight: 500; cursor: pointer; }
.link:hover, .link[aria-pressed="true"] { color: var(--blue-hi); }

/* ── Header ────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; background: rgba(6,8,13,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: var(--top); }
.brand { flex: none; }
.brand img { height: 56px; width: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { padding: 8px 0; text-decoration: none; color: var(--mute); font-weight: 500; font-size: .95rem; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s; }
.nav a:hover { color: var(--text); }
.nav a[aria-current] { color: var(--text); border-bottom-color: var(--blue); }
.top-end { display: flex; align-items: center; gap: 8px; flex: none; }
.top .call { min-height: 44px; padding: 0 16px; }
.menu-btn, .phone-btn { display: none; }
.phone-btn { color: var(--blue-hi); }

/* ── Home hero ─────────────────────────────────────── */
.hero { position: relative; overflow: clip; border-bottom: 1px solid var(--line); }
.hero-say { position: relative; isolation: isolate; }
h1 em { position: relative; font-style: normal; color: var(--blue-hi); white-space: nowrap; }
h1 em::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: -.14em; height: .2em; pointer-events: none;
  background: var(--stroke) center / 100% 100% no-repeat; }
.hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(6,8,13,.92) 0%, rgba(6,8,13,.7) 45%, rgba(6,8,13,.25) 80%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.proof { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-weight: 500; font-size: .92rem; color: #d0d3d9; }
.stars { display: inline-flex; gap: 2px; color: var(--blue-hi); }
.stars .ico { width: 16px; height: 16px; }
.hero .lede { margin: 20px 0 30px; }

/* The search box */
.finder { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.finder label { display: grid; gap: 6px; }
.finder label > span { font-size: .8rem; font-weight: 500; color: var(--mute); }
.finder .btn { min-height: 50px; }

/* The featured car */
.spot { position: relative; isolation: isolate; container-type: inline-size; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: end; text-decoration: none; }
/* As in the logo: the car in the middle, the swooshes sweeping round it. */
.spot::before { content: ""; position: absolute; z-index: -1; left: -9%; right: -9%; top: -52px; height: calc(62.5cqw + 52px + 46px); opacity: .5; background: var(--swoosh) center / 100% 100% no-repeat; pointer-events: none; }
.spot .photo { grid-column: 1 / -1; aspect-ratio: 16 / 10; margin-bottom: 54px; }
.spot-text { display: grid; gap: 2px; min-width: 0; }
.spot-text small { color: var(--mute); font-size: .84rem; }
.spot-text strong { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.spot-text span { color: var(--blue-hi); font-size: .9rem; font-weight: 500; }
.spot-price { text-align: right; }
.spot-price b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.spot-price small { color: var(--mute); }
.spot:hover strong { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }

/* ── Photos ────────────────────────────────────────── */
.photo { position: relative; display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--surface-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo.blank { border: 1px solid var(--line); background: var(--surface); }
.photo.blank { background: radial-gradient(90% 90% at 50% 100%, rgba(58,136,242,.14), transparent 70%), var(--surface); }
.photo .slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; padding: 8px; text-align: center; font-size: .8rem; color: #7d838c; }
.photo .slot::before { content: ""; width: 44%; aspect-ratio: 16 / 9; background: url("/assets/img/logo.png") center / contain no-repeat; opacity: .5; }
.photo .count { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.7); font-size: .8rem; font-weight: 600; }
.photo .count .ico { width: 15px; height: 15px; }

/* ── Trust row ─────────────────────────────────────── */
.trust { border-bottom: 1px solid var(--line); }
.trust ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust li { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border-left: 1px solid var(--line); }
.trust .ico { width: 26px; height: 26px; color: var(--blue-hi); }
.trust li:first-child { border-left: 0; padding-left: 0; }
.trust strong { display: block; font-weight: 600; line-height: 1.3; }
.trust span { color: var(--mute); font-size: .9rem; }

/* ── Bands ─────────────────────────────────────────── */
.band { padding: 80px 0; }
.band.tight { padding: 44px 0; }
.band.first { padding-top: 36px; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.band-head .lede { margin-top: 8px; font-size: 1rem; }
.band-foot { margin-top: 22px; }
.band .lede + .btn-row { margin-top: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split .lede { margin: 14px 0 24px; }
.split.form-first { grid-template-columns: 1.1fr .9fr; }
.phone-only { display: none; }

/* ── Cars ──────────────────────────────────────────── */
.cars.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.cars.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.results .cars.grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.car { position: relative; display: flex; flex-direction: column; }
.cars.grid .car { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .2s, transform .3s var(--ease); }
.cars.grid .car:hover { border-color: rgba(58,136,242,.6); transform: translateY(-3px); }
.cars.grid .car .photo { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.cars.grid .car-body { padding: 16px 16px 18px; }
.car:hover .photo img { transform: scale(1.03); }
.car-pic { position: relative; }
.car-photo { display: block; text-decoration: none; }
.car-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "line line" "spec spec" "price pm"; grid-template-rows: auto auto 1fr auto; gap: 3px 12px; flex: 1; padding: 14px 0 0; min-width: 0; align-items: end; }
.car h3 { grid-area: title; }
.car h3 a { text-decoration: none; }
.car h3 a::after { content: ""; position: absolute; inset: 0; }      /* the whole card is the link */
.car:hover h3 a { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.car-line { color: var(--blue-hi); font-size: .9rem; font-weight: 500; }
.car .car-line { grid-area: line; }
.car-spec { grid-area: spec; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 10px 0 14px; color: var(--mute); font-size: .9rem; }
.car-spec li { position: relative; padding-left: 13px; }
.car-spec li::before { content: ""; position: absolute; left: 0; top: .66em; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
.price { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.car .price, .spot-price b { color: var(--blue-hi); }
.car .price { grid-area: price; }
.car .pm { grid-area: pm; }
.pm { color: var(--mute); font-size: .88rem; white-space: nowrap; text-align: right; }
.save-btn { position: absolute; z-index: 2; top: 8px; right: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; transition: background-color .15s; }
.save-btn:hover { background: rgba(0,0,0,.85); }
.save-btn[aria-pressed="true"] { background: var(--blue); color: var(--ink); }
@keyframes pop { from { opacity: 0; } }
.results .car { animation: pop .3s var(--ease) both; }

/* List layout: the stock sheet the client liked on Bill Griffin.
   Photo on the left, name and price on one line, the variant in blue,
   four short specs. */
.list-head { display: none; grid-template-columns: 280px 1fr auto; gap: 24px; padding: 0 0 12px; border-bottom: 1px solid var(--line-2); font-weight: 700; }
[data-view="list"] .list-head { display: grid; }
.cars.list { display: block; }
.cars.list .car { flex-direction: row; align-items: flex-start; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cars.list .car-pic { flex: 0 0 280px; }
.cars.list .car-body { grid-template-areas: "title price" "line pm" "spec spec"; grid-template-rows: auto auto auto; padding: 2px 0 0; align-items: baseline; }
.cars.list .car h3 { font-size: 1.3rem; }
.cars.list .price { color: var(--blue-hi); }
.cars.list .car-spec { max-width: 440px; margin-bottom: 0; }

/* ── Selling, finance, finding ─────────────────────── */
.sell-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 56px; align-items: center; padding: 44px; border: 1px solid rgba(58,136,242,.26); border-radius: var(--r); background: linear-gradient(120deg, #0c1c3d 0%, #0b1424 45%, var(--surface) 100%); }
.sell-band .lede { color: #c3cbd9; }
.sell-band .how, .sell-band .how li { border-color: rgba(255,255,255,.14); }
.sell-band .lede { margin: 12px 0 22px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.tile { display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none; transition: border-color .15s; }
.tile:hover { border-color: rgba(58,136,242,.6); }
.tile h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.tile p { color: var(--mute); max-width: 44ch; }
.go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--blue-hi); font-weight: 600; font-size: .95rem; }
.go .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.tile:hover .go .ico { transform: translateX(4px); }

/* The reg plate you type into */
.reg { display: flex; flex-wrap: wrap; gap: 10px; }
.reg-plate { display: flex; align-items: stretch; flex: 1 1 240px; max-width: 360px; height: 54px; border-radius: var(--r-sm); overflow: hidden; background: var(--plate); }
.reg-plate i { display: flex; align-items: flex-end; justify-content: center; width: 40px; padding-bottom: 8px; background: #1f4fd6; color: #fff; font: 700 .66rem/1 var(--sans); letter-spacing: .06em; font-style: normal; }
.reg .reg-plate input { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 800 1.3rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.reg .reg-plate input::placeholder { color: #a3a8b1; }
.reg .reg-plate input:focus { box-shadow: none; outline: 0; border: 0; }
.reg-plate:focus-within { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.reg .btn { min-height: 54px; }

/* ── Reviews ───────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quotes blockquote { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--line); border-top: 2px solid var(--blue); border-radius: var(--r); background: var(--surface); }
.quotes p { font-size: 1.1rem; line-height: 1.5; }
.quotes footer { margin-top: auto; color: var(--mute); font-size: .92rem; }

/* ── Questions ─────────────────────────────────────── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px 56px; align-items: start; }
.faq-wrap .band-head { margin: 0; }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 18px; height: 18px; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--blue-hi); }
.faq summary i::after { transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 20px; color: #d0d3d9; max-width: 62ch; }

/* ── Cards, lists, rows ────────────────────────────── */
.card, .panel { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.card { padding: 4px 24px; }
.panel { padding: 28px; }
.rows div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.rows div:first-child { border-top: 0; }
.rows dt { color: var(--mute); }
.rows dd { font-weight: 500; overflow-wrap: anywhere; }
.how { counter-reset: how; border-top: 1px solid var(--line-2); }
.how li { counter-increment: how; display: grid; grid-template-columns: 36px 1fr; padding: 15px 0; border-bottom: 1px solid var(--line); }
.how li::before { content: counter(how); color: var(--blue-hi); font-weight: 700; }
.ticks { border-top: 1px solid var(--line-2); }
.ticks li { padding: 12px 0; border-bottom: 1px solid var(--line); color: #d0d3d9; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.prose .perks { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.perks li { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.perks strong { display: block; font-weight: 600; line-height: 1.3; }
.perks span { color: var(--mute); font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-2); font-size: .86rem; font-weight: 500; }

/* ── Inner page heading ────────────────────────────── */
.page-head { padding: 44px 0 36px; border-bottom: 1px solid var(--line); }
/* Every page title is signed with one stroke of the swoosh. */
.page-head h1::after { content: ""; display: block; width: 128px; height: 9px; margin-top: 18px; background: var(--stroke) center / 100% 100% no-repeat; }
.page-head.slim { padding: 20px 0 18px; border-bottom: 0; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.page-head .lede { margin-top: 16px; }
.page-head .btn-row { margin-top: 24px; }
.page-head .count { color: var(--mute); margin-top: 10px; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--mute); font-size: .88rem; margin-bottom: 18px; }
.page-head.slim .crumb { margin-bottom: 0; }
.crumb a { text-decoration: none; }
.crumb a:hover, .crumb [aria-current] { color: var(--text); }

/* ── Search tools ──────────────────────────────────── */
.toolbar { position: sticky; top: var(--top); z-index: 30; padding: 12px 0; background: rgba(6,8,13,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.toolbar .wrap { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); font-weight: 500; font-size: .92rem; white-space: nowrap; cursor: pointer; transition: border-color .15s; }
.pill:hover { border-color: #666b74; }
.pill select { min-height: 42px; border: 0; background-color: transparent; padding: 0 34px 0 14px; font-weight: 500; font-size: .92rem; }
.pill.on { border-color: var(--blue); }
.pill.toggle, .pill.clear { padding: 0 14px 0 12px; }
.pill.toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill.toggle:has(input:checked) { border-color: var(--blue); color: var(--blue-hi); }
.pill.toggle:has(input:focus-visible) { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.pill .ico { width: 17px; height: 17px; }
.pill.clear { color: var(--mute); border-color: transparent; background: none; }
.views { display: inline-flex; gap: 6px; }
.views button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.views button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.sheet-head, .sheet-done, .filter-btn { display: none; }
.results { padding-top: 28px; padding-bottom: 80px; }
.empty { padding: 48px 0; border-bottom: 1px solid var(--line); }
.empty p { color: var(--mute); margin: 12px 0 22px; max-width: 48ch; }

/* ── One car ───────────────────────────────────────── */
.car-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 36px; }
.gallery { position: relative; isolation: isolate; container-type: inline-size; display: grid; gap: 8px; }
.gallery::before { content: ""; position: absolute; z-index: -1; left: -4.5%; right: -4.5%; top: -32px; height: calc(66.667cqw + 64px); background: var(--swoosh) center / 100% 100% no-repeat; opacity: .42; pointer-events: none; }
.gallery .photo { aspect-ratio: 3 / 2; }
.shot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r); overflow: hidden; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumbs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.more-shots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); font-weight: 700; font-size: 1.2rem; }
.deal { position: sticky; top: calc(var(--top) + 20px); display: grid; gap: 14px; }
.deal h1 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.08; }
.deal .car-line { font-size: 1.02rem; }
.deal-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.deal-price .price { font-size: clamp(2.2rem, 3.6vw, 2.8rem); }
.deal-rows { border-top: 1px solid var(--line-2); }
.deal-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.deal-rows dt { color: var(--mute); }
.deal-rows dd { font-weight: 600; }
.deal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--mute); }
.deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deal-head h1 { min-width: 0; }
.share-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.share-pill:hover { border-color: currentColor; }
.share-pill .ico { width: 18px; height: 18px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--line-2); }
.specs div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--mute); }
.specs dd { font-weight: 600; text-align: right; }

/* Pick a day to view */
.viewing { display: grid; gap: 12px; margin-top: 8px; }
.viewing h3 { font-size: 1rem; }
.days, .times { display: flex; flex-wrap: wrap; gap: 6px; }
.days button, .times button { min-height: 44px; padding: 6px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); font-weight: 500; font-size: .9rem; cursor: pointer; text-align: center; line-height: 1.2; transition: border-color .15s; }
.days button small { display: block; color: var(--mute); font-size: .76rem; }
.days button:hover, .times button:hover { border-color: var(--text); }
.days button[aria-pressed="true"], .times button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.days button[aria-pressed="true"] small { color: #4a4f57; }
.viewing .btn { justify-self: start; }

/* Photos, full screen */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.96); color: #fff; }
.lightbox::backdrop { background: #000; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(94vw, 1500px); max-height: 86dvh; border-radius: var(--r-sm); object-fit: contain; }
.lightbox .round { background: rgba(0,0,0,.6); }
.lb-close { position: absolute; top: 18px; right: 18px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; } .lb-prev .ico { transform: rotate(180deg); }
.lb-next { right: 14px; }
.lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--mute); }

/* ── Forms ─────────────────────────────────────────── */
select, input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; min-height: 50px; padding: 0 14px; font: 500 1rem var(--sans); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .15s; }
textarea { padding: 13px 14px; min-height: 104px; resize: vertical; line-height: 1.45; }
select { appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9fa8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px 7px; }
select option { background: #131518; color: var(--text); }
input::placeholder, textarea::placeholder { color: #666b74; font-weight: 400; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-hi); outline: none; box-shadow: 0 0 0 1px var(--blue-hi); }
input[aria-invalid="true"] { border-color: #ff8a8a; }
.lead { display: grid; gap: 16px; }
.lead label { display: block; }
.lab { display: block; margin-bottom: 7px; font-weight: 500; font-size: .92rem; }
.opt { color: var(--mute); font-weight: 400; font-size: .84rem; }
.lead .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead fieldset { display: grid; gap: 16px; }
.lead legend { padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.lead .btn { width: 100%; }
.hint { color: var(--mute); font-size: .85rem; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-weight: 600; }
.form-note:empty { display: none; }
.form-note.bad { color: #ffa3a3; }
.sent { display: grid; gap: 10px; }
.sent h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.sent p { color: var(--mute); }

/* The sell form in three steps (only when JavaScript is running) */
.step-bar { display: none; }
.lead.stepping .step-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: sb; margin-bottom: 6px; }
.step-bar li { counter-increment: sb; padding-top: 10px; border-top: 2px solid var(--line-2); color: var(--mute); font-weight: 500; font-size: .84rem; transition: border-color .3s, color .3s; }
.step-bar li::before { content: counter(sb) ". "; }
.step-bar li.done, .step-bar li.now { border-top-color: var(--blue); color: var(--text); }
.lead.stepping fieldset:not(.now) { display: none; }
.lead.stepping legend { display: none; }
.step-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.step-nav [data-step-back][disabled] { visibility: hidden; }

/* ── Footer ────────────────────────────────────────── */
.foot { padding: 0 0 36px; color: var(--mute); font-size: .95rem; border-top: 1px solid var(--line); }
.foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 44px; margin: 0 0 56px; border: 1px solid rgba(58,136,242,.26); border-radius: var(--r); background: linear-gradient(120deg, #0c1c3d 0%, #0b1424 45%, var(--surface) 100%); }
.foot { padding-top: 56px; }
.foot-cta h2 { color: var(--text); }
.foot-cta p { margin-top: 10px; max-width: 48ch; }
.is-home .foot-cta { display: none; }
.foot-menu { display: none; }

.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot img { height: 88px; width: auto; margin-bottom: 12px; }
.foot-grid h2 { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--text); margin-bottom: 12px; }
.foot ul { display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .86rem; }
.legal span { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }

/* ── The menu on phones: a full screen list ────────── */
.dock { display: none; }
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.menu-top { display: flex; justify-content: flex-end; padding: 14px var(--gutter) 6px; }
.rowmenu li > a, .rowmenu summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px var(--gutter); border-bottom: 1px solid var(--line); text-decoration: none; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu li > a > .ico, .rowmenu summary > .ico { width: 20px; height: 20px; color: var(--mute); transition: transform .25s var(--ease); }
.rowmenu details[open] summary > .ico { transform: rotate(90deg); }
.rowmenu details > a { display: block; padding: 15px var(--gutter) 15px calc(var(--gutter) + 16px); border-bottom: 1px solid var(--line); text-decoration: none; color: #d0d3d9; }
.rowmenu [aria-current] { color: var(--blue-hi); }
.rowmenu b { position: relative; display: inline-flex; color: var(--blue-hi); }
.rowmenu b .ico { width: 26px; height: 26px; }
.rowmenu b .badge { top: -8px; right: -12px; }
.menu-foot { padding: 36px var(--gutter) 40px; margin-top: auto; }
.menu-logo { height: 100px; width: auto; margin: 0 auto; }
.menu li { animation: rise-in .4s var(--ease) both; }
.menu li:nth-child(2) { animation-delay: .03s; } .menu li:nth-child(3) { animation-delay: .06s; } .menu li:nth-child(4) { animation-delay: .09s; }
.menu li:nth-child(5) { animation-delay: .12s; } .menu li:nth-child(6) { animation-delay: .15s; } .menu li:nth-child(7) { animation-delay: .18s; } .menu li:nth-child(8) { animation-delay: .21s; }
body.sheet-open { overflow: hidden; }

/* ── The "back shortly" page (maintenance, switched in /admin) ── */
.closed-in { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-top: 40px; padding-bottom: 40px; text-align: center; }
.closed-in img { height: 150px; width: auto; }
.closed-in h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.closed-in .btn-row { justify-content: center; margin-top: 8px; }
.prose.terms h2:first-child { margin-top: 0; }

/* ── Smaller screens ───────────────────────────────── */
@media (max-width: 1180px) {
  .nav { gap: 18px; }
  .cars.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cars.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perks { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: 1fr 1fr; }
  .finder { grid-template-columns: 1fr 1fr 1fr; }
  .finder .btn { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  :root { --top: 64px; --gutter: 16px; }
  body { font-size: 16px; }
  .has-dock { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Phone header, as on Bill Griffin: menu left, logo in the middle, call on the right */
  .nav, .top-end .round, .top .call { display: none; }
  .menu-btn, .phone-btn { display: inline-flex; }
  .top .wrap { justify-content: space-between; gap: 8px; padding: 0 8px; }
  .brand img { height: 50px; }

  .hero-in { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
  .spot { display: none; }
  .hero-say { padding-bottom: 62px; }
  .hero .lede { margin-bottom: 0; }
  .hero-say::before { content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; top: -28px; bottom: 0; background: var(--swoosh) center / 100% 100% no-repeat; opacity: .3; pointer-events: none; }
  .finder { grid-template-columns: 1fr 1fr; }
  .finder label:nth-of-type(3) { grid-column: 1 / -1; }
  .trust ul { grid-template-columns: 1fr 1fr; }
  .trust li { padding: 14px 12px; gap: 10px; border-left: 0; border-top: 1px solid var(--line); }
  .trust .ico { display: none; }
  .trust li:nth-child(-n+2) { border-top: 0; }
  .trust li:nth-child(odd) { padding-left: 0; }
  .band { padding: 52px 0; }
  .band.tight { padding: 34px 0; }
  .split, .split.form-first, .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .faq-wrap { gap: 16px; }
  .quotes { grid-template-columns: 1fr; gap: 12px; }
  .quotes blockquote { padding: 20px; }
  .sell-band { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; }
  .pair { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .tile { padding: 22px 20px; }
  .foot-cta { padding: 26px 20px; margin-bottom: 40px; }
  /* The foot of every page on a phone, as on Bill Griffin: the same row
     menu as the full screen one, edge to edge, then the logo under it. */
  .foot-menu { display: block; margin: 0 calc(var(--gutter) * -1) 32px; border-top: 1px solid var(--line); color: var(--text); }
  .foot { padding-top: 40px; border-top: 0; }
  .is-home .foot { padding-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-grid > .foot-brand { grid-column: 1 / -1; text-align: center; }
  .foot-brand img { height: 100px; margin: 0 auto 10px; }
  .foot-links { display: none; }
  .foot-menu ul { display: block; }
  .legal { justify-content: center; text-align: center; }
  .legal span { justify-content: center; }
  .rows div { grid-template-columns: 96px 1fr; }
  .card { padding: 2px 18px; }
  .panel { padding: 20px; }
  .see-all { display: none; }
  .phone-only { display: block; }
  .phone-only .btn { width: 100%; }

  /* Every list of cars becomes the stock sheet on a phone */
  .results .cars.grid { grid-template-columns: 1fr; }
  .cars.swipe { display: block; border-top: 1px solid var(--line-2); }
  .list-head { grid-template-columns: 34% 1fr auto; gap: 14px; }
  .cars.list .car, .cars.swipe .car { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .cars.list .car-pic, .cars.swipe .car-pic { flex: 0 0 34%; }
  .cars.list .car-body, .cars.swipe .car-body { grid-template-areas: "title price" "line line" "spec spec"; grid-template-rows: auto auto auto; gap: 3px 10px; padding: 0; align-items: baseline; }
  .cars.list .car h3, .cars.swipe .car h3 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cars.list .price, .cars.swipe .price { font-size: 1.05rem; color: var(--blue-hi); }
  .cars.list .car-line, .cars.swipe .car-line { font-size: .78rem; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cars.list .car-spec, .cars.swipe .car-spec { margin: 6px 0 0; gap: 2px 10px; font-size: .82rem; }
  .cars.list .pm, .cars.swipe .pm { display: none; }
  .cars.swipe .car, .cars.swipe .car:hover { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; overflow: visible; transform: none; }
  .cars.swipe .car-body { padding: 0; }
  .cars.list .car .photo, .cars.swipe .car .photo { border-radius: 6px; border: 1px solid var(--line); }
  .cars.list .photo .slot::before, .cars.swipe .photo .slot::before { width: 62%; }
  .cars.list .photo .slot, .cars.swipe .photo .slot { font-size: .64rem; gap: 2px; }
  .cars.list .save-btn, .cars.swipe .save-btn { top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 6px; }
  .cars.list .save-btn .ico, .cars.swipe .save-btn .ico { width: 19px; height: 19px; }
  .page-head:has(+ .toolbar) { text-align: center; padding: 22px 0 18px; border-bottom: 0; }
  .page-head:has(+ .toolbar) .crumb { display: none; }
  .page-head:has(+ .toolbar) h1 { font-size: 1.6rem; max-width: none; }
  .page-head:has(+ .toolbar) h1::after { width: 96px; height: 7px; margin: 12px auto 0; }

  /* Search tools, as on Bill Griffin: Search, sort, list or grid */
  .toolbar { padding: 10px 0; border-top: 1px solid var(--line); }
  .tools { width: 100%; gap: 8px; margin: 0; }
  .filter-btn { display: inline-flex; position: relative; min-height: 48px; padding: 0 14px; gap: 8px; flex: none; }
  .filter-btn .badge { background: #fff; }
  .tools .sort { flex: 1 1 0; min-width: 0; min-height: 48px; }
  .tools .sort select { width: 100%; min-height: 46px; font-size: .88rem; padding: 0 28px 0 12px; background-position: right 10px center; text-overflow: ellipsis; }
  .views button { width: 46px; height: 48px; }
  /* The filters themselves open as a full screen sheet */
  .pills { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; overflow-y: auto; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom)); background: var(--bg); }
  .pills.open { display: flex; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .sheet-head strong { font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; }
  .pills .pill { display: grid; gap: 6px; min-height: 0; border: 0; background: none; white-space: normal; }
  .pills .pill .sr { position: static; width: auto; height: auto; clip-path: none; color: var(--mute); font-size: .86rem; }
  .pills .pill select { min-height: 50px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background-color: var(--surface); font-size: 1rem; }
  .pills .pill.on select { border-color: var(--blue); }
  .pills .pill.toggle { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
  .pills .pill.clear { display: none; }
  .sheet-done { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: sticky; bottom: 0; margin-top: auto; padding-top: 12px; background: var(--bg); }
  .results { padding-top: 14px; padding-bottom: 44px; }

  .car-page { grid-template-columns: 1fr; gap: 20px; padding-bottom: 16px; }
  .gallery::before { left: -3.6%; right: -3.6%; top: -20px; height: calc(66.667cqw + 40px); }
  .deal { position: static; }
  .specs { grid-template-columns: 1fr; }
  .has-dock .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(6,8,13,.94); border-top: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .dock .btn { min-height: 46px; padding: 0 8px; font-size: .93rem; }
}

@media (max-width: 620px) {
  .lead .f2 { grid-template-columns: 1fr; }
  .perks, .prose .perks { grid-template-columns: 1fr; }
  .btn-row .btn-lg { flex: 1 1 100%; }
  .page-head { padding: 28px 0 24px; }
  .foot-cta .btn-row { width: 100%; }
  .reg .btn { flex: 1 1 100%; }
  .reg-plate { max-width: none; }
  .legal { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .flow, .flow i, .spot, .hero-say > *, .finder, .page-head .wrap > *, .menu li, .results .car { animation: none; }
  .js [data-rv] { opacity: 1; transform: none; }
  .btn, .photo img { transition: none; }
}

/* ── Floating WhatsApp button ──────────────────────── */
/* Part of the site, not a plugin parked on it. Not the green circle every
   other dealer has: a quiet pill in the site's own ink (inverted against
   the page, the quietest way to be easy to find), the WhatsApp mark as an
   outline, the label in the site's type, and the brand colour on hover.
   It waits until the visitor has scrolled past the top, so it never covers
   the first thing they see. On a car page it already names the car. On a
   phone's car page it steps aside for the bar that has WhatsApp in it.
   A brand can change it with --wa-bg, --wa-fg, --wa-font, --wa-case. */
.wa-float { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; height: 52px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--wa-bg, var(--text)); color: var(--wa-fg, var(--bg)); border: 1px solid var(--wa-border, var(--wa-bg, var(--text)));
  text-decoration: none; box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
  transition: opacity .22s ease, transform .22s ease, background-color .2s, border-color .2s, color .2s; }
.js .wa-float:not(.on) { opacity: 0; transform: translateY(10px); pointer-events: none; }
.wa-float:hover, .wa-float:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.wa-float .wa-ico { width: 21px; height: 21px; flex: none; }
.wa-float span { font: 600 .88rem/1 var(--wa-font, var(--sans)); text-transform: var(--wa-case, none); letter-spacing: var(--wa-track, 0);
  white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .26s ease, opacity .2s ease, margin-left .26s ease; }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 240px; opacity: 1; margin-left: 10px; }
@media (max-width: 920px) {
  .wa-float { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 48px; padding: 0 14px; }
  .wa-float span { max-width: 240px; opacity: 1; margin-left: 9px; }   /* no hover on a phone: the label just shows */
  .has-dock .wa-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float span { transition: none; } }