@charset "UTF-8";

/* ==========================================================================
   AVAVA — Alpine car marketplace
   Home page stylesheet

   TABLE OF CONTENTS
   -----------------------------------------------------------------------
   00. Design tokens
   01. Reset & base
   02. Helpers
   03. Buttons, chips, pills
   04. Section heads & typography
   05. Header — utility strip, nav, dropdowns
   06. Hero — stage, copy, live card
   07. Hero — search bar
   08. Why AVAVA
   09. Featured listings
   10. How it works
   11. Finance
   12. Trade in
   13. Testimonials
   14. Locations
   15. CTA panel
   16. Our brands
   17. Footer
   18. Booking dialogs
   19. Inner pages — light header, page title, header divider
   20. Inner pages — page header block and intro
   21. Preloader
   22. Auth dialogs — sign in / sign up
   23. Responsive — 1700px and wider
   24. Responsive — 1280px
   25. Responsive — 1180px, where the menu stops fitting
   26. Responsive — 1024px
   27. Responsive — 780px
   28. Responsive — 560px
   29. Responsive — 430px
   30. Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   00. Design tokens
   ========================================================================== */

:root {
  /* Colour. The accent is the season: winter lime by default, autumn larch
     when the document carries data-accent="autumn". The head script sets that
     attribute before first paint from the URL, then from what the visitor was
     last looking at, then from the page's own default — so the colour travels
     with them from page to page. */
  --ink: #14161A;
  --ink-2: #71757B;
  --ink-3: #4C5157;
  --ink-4: #9BA0A6;
  --page: #FFFFFF;
  --accent: #C6E63B;
  --accent-hi: #D3EF5C;
  --accent-deep: #7A9A12;   /* the accent as text on white: the lime itself is 1.4:1 */
  --surface: #F5F6F7;
  --image-bed: #EDEDE9;
  --panel-ink: #F7F7F5;

  /* Alphas */
  --line: rgba(20, 22, 26, .12);
  --line-faint: rgba(20, 22, 26, .09);
  --control: rgba(20, 22, 26, .16);
  --line-10: rgba(20, 22, 26, .1);
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-border: rgba(255, 255, 255, .2);
  --on-dark-body: rgba(255, 255, 255, .72);
  --on-dark-muted: rgba(255, 255, 255, .42);

  /* Type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "BBH Bartle", "Archivo", sans-serif;

  /* Rhythm */
  --gutter: 40px;
  --rhythm: 60px;

  /* Radii */
  --r-plate: 6px;
  --r-badge: 12px;
  --r-dd: 18px;
  --r-card: 22px;
  --r-glass: 26px;
  --r-panel: 30px;

  /* Shadows */
  --sh-dd: 0 26px 54px -22px rgba(20, 22, 26, .45);
  --sh-card: 0 34px 70px -22px rgba(20, 22, 26, .6);
  --sh-search: 0 34px 72px -24px rgba(20, 22, 26, .6);
  --sh-plan: 0 24px 48px -28px rgba(20, 22, 26, .4);

  /* Hero units.
     The prototype sizes the hero in container-query units (cqw/cqh). Container
     queries are not part of the CSS the W3C validator accepts, so the hero is
     driven by two custom properties instead:
       --u  = 1% of the hero width   (1cqw)
       --uh = 1% of the hero height  (1cqh)
     The values below are the no-JS fallback — 1vw counts the scrollbar, so
     assets/js/main.js overwrites --u with the hero's measured width/100 and
     keeps both in sync on resize. */
  --u: 1vw;
  --uh: max(6.8px, var(--u) * .488294);
  --hdr-h: calc(var(--u) * 3.48 + 82px);
}

:root[data-accent="winter"] {
  --accent: #C6E63B;
  --accent-hi: #D3EF5C;
  --accent-deep: #7A9A12;
}

/* Larch — the gold of the larches in the autumn photograph. Warmer and darker
   than the lime, so it reads as a brand colour rather than a highlighter. */
:root[data-accent="autumn"] {
  --accent: #C4832F;
  --accent-hi: #D4913C;
  --accent-deep: #9A6320;
}

@font-face {
  font-family: "BBH Bartle";
  src: url("../fonts/BBHBartle-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   01. Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: var(--ink); text-decoration: none; }

a:hover { color: #5A5F65; }

button,
input,
select { font-family: inherit; font-size: 100%; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.hero :focus-visible,
.ctapanel :focus-visible,
.foot :focus-visible { outline-color: var(--accent); }


/* ==========================================================================
   02. Helpers
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  transition: top .18s ease;
}

.skip-link:focus { top: 16px; color: #FFFFFF; }

.dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.dot--accent { background: var(--accent); }
.dot--ink { background: var(--ink); }
.dot--grey { background: var(--ink-2); }
.dot--faint { background: rgba(20, 22, 26, .3); }
.dot--6 { width: 6px; height: 6px; }
.dot--7 { width: 7px; height: 7px; }
.dot--8 { width: 8px; height: 8px; }

.pulse { animation: pulse 2.4s ease-out infinite; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.ticker .pulse {
  animation-name: pulse-ink;
}

@keyframes pulse-ink {
  0% { box-shadow: 0 0 0 0 rgba(20, 22, 26, .5); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Section rhythm: 60px of white, a hairline, 60px of white. */
.rule {
  height: 1px;
  margin: var(--rhythm) var(--gutter);
  border: 0;
  background: var(--line);
}


.sec {
  padding: 0 var(--gutter);
  background: var(--page);
  color: var(--ink);
}

.sec--why { padding-top: var(--rhythm); }
.sec--flush { padding-left: 0; padding-right: 0; }


/* ==========================================================================
   03. Buttons, chips, pills
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}

.btn__arrow--28 { width: 28px; height: 28px; }
.btn__arrow--30 { width: 30px; height: 30px; }
.btn__arrow--32 { width: 32px; height: 32px; }
.btn__arrow--34 { width: 34px; height: 34px; }
.btn__arrow--36 { width: 36px; height: 36px; }
.btn__arrow--ink { background: var(--ink); color: var(--accent); }

.btn--ink { background: var(--ink); color: #FFFFFF; }
.btn--ink:hover { background: #23262C; color: #FFFFFF; }

.btn--white { background: #FFFFFF; color: var(--ink); transition: background .2s ease; }
.btn--white:hover { background: var(--accent); color: var(--ink); }

/* On hover the button takes the accent, so the arrow circle has to leave it —
   accent on accent is an invisible circle. They swap: white on brown. */
.btn--white:hover .btn__arrow { background: #FFFFFF; color: var(--ink); }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-hi); color: var(--ink); }

.btn--glass {
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(20, 22, 26, .22);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--glass:hover { background: rgba(20, 22, 26, .42); color: #FFFFFF; }

.btn--pill {
  padding: 15px 15px 15px 28px;
  gap: 13px;
  font-size: 15px;
  white-space: nowrap;
}

.btn--add {
  gap: 10px;
  height: 44px;
  padding: 0 34px;
  border: 1px solid var(--ink);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14.5px;
  transition: background .2s ease, color .2s ease;
}

.btn--add:hover { background: var(--accent); color: var(--ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.chip--accent { background: var(--accent); color: var(--ink); }

.chip--glass {
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(20, 22, 26, .3);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chip--outline {
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 10.5px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--control);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
}

.eyebrow--soft { border-color: rgba(20, 22, 26, .14); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.textlink__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--control);
}


/* ==========================================================================
   04. Section heads & typography
   ========================================================================== */

.h2 {
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}

.h2--60 { font-size: 60px; }
.h2--tight { line-height: .98; }
.h2--fluid { font-size: clamp(34px, 3.3vw, 62px); line-height: 1.02; letter-spacing: -.032em; }
.h2--fin { font-size: clamp(30px, 3.3vw, 58px); line-height: 1.02; letter-spacing: -.032em; }
.h2--cta { font-size: clamp(36px, 3.7vw, 60px); line-height: .96; letter-spacing: -.042em; }
.h2--brands { font-size: clamp(30px, 2.7vw, 50px); line-height: 1.05; }
.h2--nowrap { white-space: nowrap; }
/* The heading scale inside a card in a column, rather than a section of a page. */
.h2--block { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.032em; }

.sechead--center { text-align: center; margin-bottom: 44px; }
.sechead--center .eyebrow { margin-bottom: 22px; }
.sechead--pad { padding: 0 56px; }
.sechead--brands { margin-bottom: 0; }

.sechead__sub {
  margin: 18px auto 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
}

.sechead--brands .sechead__sub {
  margin-top: 14px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
}

.sechead--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 2.8vw, 52px);
}

.sechead--split .h2 { margin-top: 22px; }
.sechead--wide { gap: 48px; margin-bottom: 52px; }
.sechead--fin { margin-bottom: 38px; }
.sechead--loc { margin-bottom: clamp(28px, 2.6vw, 48px); }
.sechead--trade { margin-bottom: 34px; }
.sechead--trade .eyebrow { margin-bottom: 22px; }

.sechead__lead {
  margin: 16px 0 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
}

.sechead__aside {
  max-width: 400px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
}

.secfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.secfoot__text {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
}

.secfoot--fin { margin-top: 32px; padding-top: 26px; }

.minifacts {
  display: flex;
  align-items: baseline;
  gap: 34px;
}

.minifact__num {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.minifact__num--30 { font-size: 30px; }
.minifact__num--accent { color: var(--accent); }

.minifact__lbl {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.minifact__sep {
  width: 1px;
  height: 42px;
  background: var(--line);
}

.minifact__sep--38 { height: 38px; }


/* ==========================================================================
   05. Header — utility strip, nav, dropdowns
   ========================================================================== */

.hdr {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  color: #FFFFFF;
}

.hdr__utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 10px;
  margin: 0 var(--gutter);
  padding: calc(var(--u) * .66) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.util {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
}

.util__item { display: inline-flex; align-items: center; gap: 8px; }

.util__sep {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, .26);
}

.util__link { color: rgba(255, 255, 255, .82); }
.util__link:hover { color: #FFFFFF; }

.util__link--mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
}

/* The currency switch. It replaces the old EN · EUR label: whichever half is
   pressed is the currency every price on the site is shown in. */
.cur { display: inline-flex; align-items: center; gap: 7px; }

.cur__btn {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .5);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .18s ease;
}

.cur__btn:hover { color: rgba(255, 255, 255, .85); }

.cur__btn--on { color: #FFFFFF; font-weight: 700; }

.cur__sep { color: rgba(255, 255, 255, .32); font-family: var(--mono); font-size: 11px; }

/* On the light inner-page header the strip is ink, not white. */
.hdr--light .cur__btn { color: var(--ink-2); }
.hdr--light .cur__btn:hover { color: var(--ink); }
.hdr--light .cur__btn--on { color: var(--ink); }
.hdr--light .cur__sep { color: var(--ink-4); }

.hdr__utility-right { display: flex; align-items: center; gap: 18px; }

.social { display: flex; align-items: center; gap: 10px; }

.social--bare { gap: 13px; }

.social--bare a { color: rgba(255, 255, 255, .82); }
.social--bare a:hover { color: #FFFFFF; }

.hdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--u) * 1.08) var(--gutter);
}

.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { height: 42px; width: auto; }

.nav { margin-left: auto; }

.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
}

.nav__link:hover { color: var(--accent); }

.nav__chev { flex: none; }

/* The chevron button only exists for touch and keyboard; on the desktop
   layout the panels open on hover and focus-within instead. */
.nav__toggle { display: none; }

.dd,
.flyout {
  position: absolute;
  z-index: 60;
  min-width: 210px;
  padding: 10px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-dd);
  background: #FFFFFF;
  box-shadow: var(--sh-dd);
  opacity: 0;
  visibility: hidden;
}

.dd {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.dd--wide { min-width: 250px; }

.nav__item:hover > .dd,
.nav__item:focus-within > .dd {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Invisible bridge so the pointer can cross the gap to the panel. */
.dd::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.sub { position: relative; }

.flyout {
  top: -10px;
  left: calc(100% + 10px);
  transition: opacity .16s ease;
}

.sub:hover > .flyout,
.sub:focus-within > .flyout { opacity: 1; visibility: visible; }

.flyout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}

.drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background .16s ease;
}

.drow:hover { background: rgba(20, 22, 26, .06); color: var(--ink); }

.drow__tag {
  padding: 3px 8px;
  border-radius: var(--r-plate);
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
}

.hdr__actions { display: flex; align-items: center; gap: 12px; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(20, 22, 26, .18);
  color: #FFFFFF;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease;
}

.iconbtn:hover { background: rgba(20, 22, 26, .42); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   The cart

   It is not in the header until there is something in it: an empty cart is a
   promise the template cannot keep, and the shop is the only place that can
   fill one. Once filled it stays — the count lives in the browser, so walking
   from one shop layout to another does not empty it.
   -------------------------------------------------------------------------- */

.cartbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(20, 22, 26, .18);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease;
}

.cartbtn:hover { background: rgba(20, 22, 26, .42); color: #FFFFFF; }

.cartbtn[hidden] { display: none; }

/* The count is the whole point of the icon, so it sits on the rim in the
   accent rather than inside where the bag would crowd it. */
.cartbtn__n {
  position: absolute;
  right: -3px;
  top: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.hdr--light .cartbtn {
  border-color: rgba(20, 22, 26, .18);
  background: #FFFFFF;
  color: var(--ink);
}

.hdr--light .cartbtn:hover { background: var(--surface); color: var(--ink); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(20, 22, 26, .18);
  cursor: pointer;
}

.burger__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
}


/* ==========================================================================
   06. Hero — stage, copy, live card
   ========================================================================== */

/* The stage keeps the design's 1794:876 proportion — expressed as a
   min-height rather than aspect-ratio, so that on screens where the copy
   needs more room the hero grows instead of hiding its own buttons under
   the search bar. (In the design file the two hero CTAs are covered by the
   search panel at every width; that is the one thing here that is not a
   faithful copy.) */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: max(680px, var(--u) * 48.8294);
  background: var(--page);
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 66%;
  background: linear-gradient(180deg, rgba(20, 22, 26, .74) 0%, rgba(20, 22, 26, .42) 55%, rgba(20, 22, 26, 0) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 15;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--hdr-h);
}

.hero__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 1.6) var(--gutter) calc(var(--u) * .9);
}

.hero__copy {
  flex: 1 1 440px;
  min-width: 440px;
  max-width: max(440px, var(--u) * 40);
}

.hero__chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hero__title {
  margin: calc(var(--u) * 1.85) 0 0;
  font-size: calc(min(var(--u) * 5.08, var(--uh) * 10.4) + 5px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #FFFFFF;
  text-shadow: 0 2px 40px rgba(20, 22, 26, .55);
}

.hero__title-out {
  color: transparent;
  -webkit-text-stroke: 2px #FFFFFF;
}

.hero__lead {
  display: inline;
  position: relative;
  top: 15px;
  padding: .35em .6em .55em;
  border-radius: var(--r-plate);
  background-image: repeating-linear-gradient(135deg, rgba(20, 22, 26, .34) 0 6px, rgba(20, 22, 26, .18) 6px 12px);
  font-size: max(14px, var(--u) * .92);
  line-height: 2.2;
  color: rgba(255, 255, 255, .96);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
  margin-top: calc(var(--u) * 1);
  padding-top: calc(var(--u) * .9);
  border-top: 1px solid rgba(20, 22, 26, .22);
}

.hstat__num {
  font-size: max(17px, var(--u) * 1.25);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}

.hstat__num--glow { text-shadow: 0 1px 16px rgba(20, 22, 26, .78); }

.hstat__lbl {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: max(9px, var(--u) * .56);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
}

.hstat__sep {
  width: 1px;
  height: max(30px, var(--u) * 2.4);
  background: rgba(20, 22, 26, .26);
}

.hero__cta {
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * .85);
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-top: calc(var(--u) * 1.2);
}

.btn--hero {
  min-height: max(42px, var(--u) * 2.7);
  font-size: max(14px, var(--u) * .95);
}

.btn--hero.btn--white {
  gap: calc(var(--u) * .85);
  padding: calc(var(--u) * .7) calc(var(--u) * 1) calc(var(--u) * .7) calc(var(--u) * 1.8);
}

.btn--hero.btn--glass {
  gap: calc(var(--u) * .7);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6);
}

.btn--hero .btn__arrow {
  width: max(26px, var(--u) * 1.85);
  height: max(26px, var(--u) * 1.85);
}

/* --- Live inventory card ------------------------------------------------ */

.livecard {
  flex: 0 1 480px;
  min-width: 0;
  border-radius: var(--r-glass);
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--sh-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.livecard__head {
  position: relative;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.45);
  background: var(--ink);
  overflow: hidden;
}

.livecard__ghost {
  position: absolute;
  right: -40px;
  top: -46px;
  font-family: var(--display);
  font-size: calc(var(--u) * 9);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, .12);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.livecard__live {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: max(9.5px, var(--u) * .58);
  font-weight: 700;
  letter-spacing: .13em;
  color: #FFFFFF;
}

.livecard__count {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: clamp(9px, 1vw, 14px);
}

.livecard__num {
  font-size: max(24px, var(--u) * 2);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
  color: #FFFFFF;
}

.livecard__sub {
  padding-bottom: 5px;
  font-size: max(13px, var(--u) * .84);
  line-height: 1.35;
  color: rgba(255, 255, 255, .7);
}

.livecard__body { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.45) calc(var(--u) * 1.2); }

.livecard__row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: calc(var(--u) * .45) 0;
  border-bottom: 1px solid var(--line-faint);
}

.livecard__row--last { border-bottom: 0; }

.livecard__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(24px, var(--u) * 1.9);
  height: max(24px, var(--u) * 1.9);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--ink);
}

.livecard__title {
  font-size: max(13.5px, var(--u) * .9);
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--ink);
}

.livecard__note {
  margin-top: 3px;
  font-size: max(12px, var(--u) * .75);
  line-height: 1.5;
  color: var(--ink-3);
}

.livecard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: calc(var(--u) * 1.1);
  padding-top: calc(var(--u) * .9);
  border-top: 1px solid var(--line);
}

.livecard__from {
  font-family: var(--mono);
  font-size: max(9px, var(--u) * .56);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-4);
}

.livecard__price {
  margin-top: 4px;
  font-size: max(21px, var(--u) * 1.5);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}

.btn--browse {
  gap: 11px;
  height: max(40px, var(--u) * 2.8);
  padding: 0 14px 0 22px;
  font-size: max(13.5px, var(--u) * .88);
  white-space: nowrap;
}

.btn--browse .btn__arrow {
  width: max(26px, var(--u) * 1.85);
  height: max(26px, var(--u) * 1.85);
}


/* ==========================================================================
   07. Hero — search bar
   ========================================================================== */

.hero__searchwrap {
  position: relative;
  z-index: 30;
  flex: none;
  padding: 0 var(--gutter) calc(var(--u) * 1.6);
}

.search {
  border-radius: var(--r-glass);
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--sh-search);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.search__quick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
  padding: clamp(11px, 1vw, 16px) clamp(18px, 1.6vw, 28px);
  border-bottom: 1px solid var(--line-10);
}

.search__quicklbl {
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.qp {
  padding: 9px 17px;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: clamp(12px, .85vw, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.qp:hover { border-color: var(--ink); }

.qp--on {
  border-color: var(--ink);
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 700;
}

.search__fresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.search__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  padding: clamp(16px, 1.4vw, 24px) 8px clamp(16px, 1.4vw, 24px) 0;
}

.bsel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 clamp(16px, 1.5vw, 28px);
}

.bsel + .bsel { border-left: 1px solid var(--line); }

.bsel__lbl {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.bsel__sel {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0 20px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
}

.bsel__chev {
  position: absolute;
  right: clamp(16px, 1.5vw, 28px);
  bottom: 3px;
  color: var(--ink);
  pointer-events: none;
}

.search__go {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 0 18px;
}

.btn--show {
  gap: 13px;
  height: clamp(48px, 3.6vw, 62px);
  padding: 0 clamp(13px, 1.1vw, 18px) 0 clamp(22px, 1.9vw, 32px);
  font-size: 16px;
  white-space: nowrap;
}


/* ==========================================================================
   08. Why AVAVA
   ========================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wcard {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-card);
  background: #FFFFFF;
  transition: transform .22s ease, box-shadow .22s ease;
}

.wcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -24px rgba(20, 22, 26, .34); }

.wcard--ink {
  border: 0;
  background: var(--ink);
  color: #FFFFFF;
}

.wcard--ink:hover { box-shadow: 0 22px 44px -24px rgba(20, 22, 26, .5); }

.wcard__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}

.wcard__badge--circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
}

.wcard__badge--diamond {
  width: 46px;
  height: 46px;
  margin-bottom: 29px;
  background: var(--accent);
  transform: rotate(45deg);
}

.wcard__badge--diamond svg { transform: rotate(-45deg); }

.wcard__badge--ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--ink);
}

.wcard__badge--square {
  width: 52px;
  height: 52px;
  border-radius: var(--r-badge);
  background: var(--ink);
  color: var(--accent);
}

.wcard__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.wcard__text {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.wcard--ink .wcard__text { color: inherit; opacity: .72; }

.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.numbers__cell {
  padding: 30px 34px;
  border-right: 1px solid var(--line);
}

.numbers__cell:last-child { border-right: 0; }

.numbers__num { font-size: 44px; font-weight: 800; letter-spacing: -.03em; }

.numbers__accent { color: var(--accent); }

.numbers__lbl {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}


/* ==========================================================================
   09. Featured listings
   ========================================================================== */

.feat {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 290px 290px;
  gap: 20px;
}

/* The big card is the one that opens the listing; the four beside it choose
   which car it shows, so they are buttons, not links. */
.fcard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--image-bed);
  color: #FFFFFF;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.fcard:hover { color: #FFFFFF; }

.fcard--tall { grid-row: span 2; }

.fcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

/* A short fade tells the eye that the big card has just changed car. */
@keyframes fcard-swap {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

.fcard--swapped .fcard__img,
.fcard--swapped .fcard__meta,
.fcard--swapped .fcard__flag { animation: fcard-swap .32s ease both; }

.fcard:hover .fcard__img { transform: scale(1.04); }

.fcard__flag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
}

.fcard__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 26px;
  background: linear-gradient(0deg, rgba(20, 22, 26, .86) 0%, rgba(20, 22, 26, .34) 58%, rgba(20, 22, 26, 0) 100%);
}

.fcard__name {
  display: block;
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.fcard__spec {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  opacity: .82;
}


/* ==========================================================================
   10. How it works
   ========================================================================== */

.steps { position: relative; padding-top: 64px; }

.steps__track,
.steps__fill {
  position: absolute;
  top: 64px;
  height: 3px;
  border-radius: 999px;
}

.steps__track { left: 0; right: 0; background: var(--line); }

.steps__fill {
  left: 0;
  width: 12.5%;
  background: var(--accent);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.step { position: relative; }

/* The day pill is the control for its step: click it, or arrow across them
   from the keyboard, and the rail moves to that day. */
.step__day {
  position: absolute;
  left: 0;
  top: -64px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.step__day:hover { background: rgba(20, 22, 26, .1); transform: translateY(-1px); }

.step--on .step__day { background: var(--accent); }

.step__node {
  position: absolute;
  left: 0;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--control);
  background: #FFFFFF;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.step--on .step__node {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}

.step__body { padding-top: 36px; }

.step__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-2);
}

.step__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.step__title {
  margin-top: 16px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.024em;
}

.step__text {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.step__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 13px;
  border: 1px solid var(--control);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--ink);
}


/* ==========================================================================
   11. Finance
   ========================================================================== */

/* Two controls side by side: the deposit on the left, the rate on the right,
   each in its own panel with 20px between them. Both feed the same
   recalculation. */
.depbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}

.depbar__row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 26px);
  flex-wrap: wrap;
  row-gap: 14px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.depbar__value { flex: 0 0 auto; }

.depbar__lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.depbar__amount {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.028em;
}

.depbar__slider { flex: 1 1 190px; min-width: 150px; }

.depbar__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-2);
}

.depbar__shortcuts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.depbar__or {
  margin-right: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.dep-btn {
  padding: 9px 15px;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.dep-btn--trade { border-color: var(--ink); font-weight: 700; }

.dep-btn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

.range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--control);
  outline-offset: 6px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: var(--ink);
  box-shadow: 0 2px 6px -1px rgba(20, 22, 26, .4);
  cursor: pointer;
}

.range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: var(--ink);
  cursor: pointer;
}

.range--cond { background: rgba(255, 255, 255, .24); }

.range--cond::-webkit-slider-thumb { border-color: var(--ink); background: var(--accent); }
.range--cond::-moz-range-thumb { border-color: var(--ink); background: var(--accent); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: #FFFFFF;
}

.plan--picked { border-color: var(--ink); box-shadow: var(--sh-plan); }

.plan__flag {
  position: absolute;
  top: -11px;
  left: 30px;
  display: none;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.plan--popular .plan__flag { display: block; }

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.plan__term,
.plan__who {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--ink-2);
}

.plan__term { font-size: 10px; }
.plan__who { font-size: 9px; font-weight: 600; letter-spacing: .1em; }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
}

.plan__monthly {
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -.036em;
  line-height: .94;
}

.plan__per { font-size: 14px; color: var(--ink-2); }

.plan__tradeoff { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }

.plan__interest { margin-top: 22px; }

.plan__interest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}

.plan__interest-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.plan__interest-val { font-size: 13.5px; font-weight: 700; }

.plan__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line-10);
  overflow: hidden;
}

.plan__barfill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}

.plan--picked .plan__barfill { background: var(--accent); }

.plan__foot { margin-top: auto; padding-top: 24px; }

.plan__total {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--line-10);
  font-size: 13.5px;
  color: var(--ink-2);
}

.plan__total-val { font-weight: 700; color: var(--ink); }

.plan__cta {
  display: flex;
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}

.plan__cta:hover { background: #E9EBED; color: var(--ink); }

.plan--picked .plan__cta { background: var(--ink); color: #FFFFFF; }
.plan--picked .plan__cta:hover { background: #23262C; color: #FFFFFF; }

.finnotes { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.finnote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-3);
}

.finnote__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}


/* ==========================================================================
   12. Trade in
   ========================================================================== */

.trade {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
}

.trade__panel {
  position: relative;
  min-height: 460px;
  padding: 38px;
  border: 1px solid var(--ink);
  border-radius: var(--r-card);
  background: #FFFFFF;
  overflow: hidden;
}

.trade__quote { position: relative; z-index: 2; }

.trade__lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.trade__range {
  margin: 10px 0 4px;
  font-size: 66px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.trade__dash { opacity: .35; }

.trade__desc { font-size: 15px; color: var(--ink-3); }

.trade__car {
  position: absolute;
  left: 4%;
  bottom: 7%;
  z-index: 1;
  width: 88%;
  opacity: .96;
}

.btn--accept {
  position: absolute;
  left: 38px;
  bottom: 30px;
  z-index: 3;
  gap: 14px;
  padding: 16px 16px 16px 30px;
  font-size: 15px;
  font-weight: 700;
}

.trade__form { display: flex; flex-direction: column; gap: 22px; }

.trade__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field__lbl {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-2);
}

.field__in {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--control);
  border-radius: var(--r-badge);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}

.field__in:focus { border-color: var(--ink); }

.gaugebox {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px;
  border-radius: 20px;
  background: var(--ink);
  color: #FFFFFF;
}

.gauge {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0deg 180deg, rgba(255, 255, 255, .18) 180deg 360deg);
}

.gauge__hole {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
}

.gauge__num { font-size: 22px; font-weight: 800; }

.gauge__lbl {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .6;
}

.gaugebox__control { flex: 1; min-width: 0; }

.gaugebox__title { margin-bottom: 10px; font-size: 16px; font-weight: 700; }

.gaugebox__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  opacity: .5;
}

.drivers {
  padding: 24px;
  border: 1px solid var(--line-10);
  border-radius: 20px;
  background: #FFFFFF;
}

.drivers__lbl {
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.driver { margin-bottom: 14px; }
.driver--last { margin-bottom: 0; }

.driver__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
}

.driver__val { font-weight: 700; }

.driver__bar { height: 6px; border-radius: 999px; background: var(--line-10); }

.driver__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}

.driver__fill--accent { background: var(--accent); }
.driver__fill--86 { width: 86%; }


/* ==========================================================================
   13. Testimonials
   ========================================================================== */

.stars {
  margin-top: 16px;
  color: var(--accent);
  font-size: 26px;
  letter-spacing: 3px;
}

.revcount {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rev {
  flex: none;
  width: 340px;
  padding: 24px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-dd);
  background: #FFFFFF;
}

.rev--ink { border: 0; background: var(--ink); color: #FFFFFF; }

.rev__stars {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 2px;
}

.rev__quote { margin-bottom: 18px; font-size: 15px; line-height: 1.5; }

.rev__by { display: flex; align-items: center; gap: 10px; }

.rev__av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}

.rev__name { display: block; font-size: 13px; font-weight: 700; }

.rev__car { display: block; font-size: 11.5px; color: var(--ink-2); }

.rev--ink .rev__car { color: inherit; opacity: .6; }


/* ==========================================================================
   14. Locations
   ========================================================================== */

.mapbox {
  position: relative;
  height: clamp(300px, 26vw, 460px);
  margin-bottom: 20px;
  border-radius: var(--r-glass);
  overflow: hidden;
  background: var(--image-bed);
}

/* Leaflet canvas. The filter drains OpenStreetMap's blue-green tiles to a
   neutral grey so the accent pins are the only colour on the map. */
.mapbox__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--image-bed);
  filter: grayscale(1) contrast(.9) brightness(1.06);
}

/* Leaflet numbers its own layers from 400 to 1000, and its container carries
   no z-index of its own — so on every page with a map those layers climbed
   into the page's stacking context and painted over the top menu, its
   dropdowns and the preloader. Isolating the container keeps the map's
   layers inside the map, where they belong. */
.leaflet-container { isolation: isolate; }

.mapbox__canvas .leaflet-container {
  background: var(--image-bed);
  font-family: var(--font);
}

.mapbox__canvas .leaflet-top .leaflet-control { margin-top: 22px; }
.mapbox__canvas .leaflet-right .leaflet-control { margin-right: 22px; }

.mapbox__canvas .leaflet-control-zoom a {
  border-color: var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}

.mapbox__canvas .leaflet-control-zoom a:hover { background: #FFFFFF; }

.mapbox__canvas .leaflet-control-attribution {
  background: rgba(255, 255, 255, .8);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-2);
}

.mapbox__canvas .leaflet-control-attribution a { color: var(--ink-2); }

.mapbox__canvas .leaflet-popup-content-wrapper {
  border-radius: var(--r-badge);
  background: #FFFFFF;
  color: var(--ink);
}

.mapbox__canvas .leaflet-popup-content {
  margin: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.mapbox__canvas .leaflet-popup-tip { background: #FFFFFF; }

/* The marker wrapper is only a positioning box — the pin itself is .lpin. */
.lpin-wrap { border: 0; background: none; }
.lpin-wrap .lpin { position: relative; transform: none; }
.lpin-wrap .lpin--active { transform: rotate(-45deg); }

.lpin {
  display: block;
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 6px -1px rgba(20, 22, 26, .4);
  transform: translate(-50%, -50%);
}

/* Selected showroom: a teardrop pointing at the coordinate, lifted a few
   pixels clear of the point so the tile's own city label stays readable. */
.lpin--active {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 5px 10px -4px rgba(20, 22, 26, .45);
}

.lpin--active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--ink);
}

.mapbox__flag {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Seven showrooms on one rail: four fit the row, the rest scroll sideways.
   Each card is a control for the map above it. */
.shops {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}

/* The rail scrolls, but the bar itself would cut a grey line across the
   design — the cards peeking out of the row are the affordance. */
.shops::-webkit-scrollbar { width: 0; height: 0; }

.shop {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line-10);
  border-radius: 20px;
  background: #FFFFFF;
  transition: transform .22s ease, box-shadow .22s ease;
}

.shop:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(20, 22, 26, .34); }

.shop--ink { border: 0; background: var(--ink); color: #FFFFFF; }
.shop--ink:hover { color: #FFFFFF; }

.shop__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shop__city { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.shop__flag {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}

.shop__addr {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

.shop--ink .shop__addr { color: inherit; opacity: .72; }

.shop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-10);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--ink-2);
}

.shop--ink .shop__foot {
  border-top-color: rgba(247, 247, 245, .18);
  color: inherit;
  opacity: .66;
}


/* ==========================================================================
   15. CTA panel
   ========================================================================== */

.ctapanel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--ink);
  color: var(--panel-ink);
}

.ctapanel__wordmark {
  position: absolute;
  left: 44px;
  bottom: -38px;
  font-family: var(--display);
  font-size: 190px;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(247, 247, 245, .07);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.ctapanel__car {
  position: absolute;
  right: 34px;
  bottom: 34px;
  width: min(64%, 1100px);
  max-width: 1120px;
  pointer-events: none;
}

.ctapanel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 26, .96) 0%, rgba(20, 22, 26, .82) 38%, rgba(20, 22, 26, 0) 66%);
  pointer-events: none;
}

.ctapanel__inner {
  position: relative;
  max-width: 660px;
  padding: 52px;
}

.ctapanel__chips { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.ctapanel__free {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .42;
}

.ctapanel .h2 { margin-top: 24px; color: var(--panel-ink); }

.ctapanel__lead {
  margin-top: 16px;
  max-width: 420px;
  font-size: 16.5px;
  line-height: 1.6;
  opacity: .7;
}

.slots { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 30px; }

.slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 18px;
  border: 1px solid rgba(247, 247, 245, .2);
  border-radius: 14px;
  background: transparent;
  color: var(--panel-ink);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.slot:hover { border-color: var(--accent); }

.slot__city { font-size: 14.5px; font-weight: 500; letter-spacing: -.012em; }
.slot__time {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .45;
}

.slot--on {
  border-color: transparent;
  background: #FFFFFF;
  color: var(--ink);
}

.slot--on .slot__city { font-weight: 700; }
.slot--on .slot__time { opacity: .6; }

.ctapanel__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.btn--book {
  gap: 14px;
  padding: 16px 16px 16px 30px;
  font-size: 16px;
  font-weight: 700;
}

.ctapanel__alt {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(247, 247, 245, .3);
  color: var(--panel-ink);
  font-size: 15px;
  font-weight: 600;
  opacity: .66;
}

.ctapanel__alt:hover { color: var(--accent); opacity: 1; }

.ctapanel__stats {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 247, 245, .14);
}

.cstat__num { font-size: 21px; font-weight: 800; letter-spacing: -.026em; }
.cstat__num--accent { color: var(--accent); }

.cstat__lbl {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .46;
}

.cstat__sep { width: 1px; height: 32px; background: rgba(247, 247, 245, .16); }


/* ==========================================================================
   16. Our brands
   ========================================================================== */

.brands {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 2.6vw, 44px);
}

.brand {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 92px;
  padding: 0 16px;
  border: 1px solid var(--line-10);
  border-radius: var(--r-dd);
  background: #FFFFFF;
  color: var(--ink);
  transition: border-color .22s ease, transform .22s ease;
}

.brand__mark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand__name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.brand:hover { border-color: var(--ink); transform: translateY(-3px); }


/* ==========================================================================
   17. Footer
   ========================================================================== */

.foot {
  margin-top: var(--rhythm);
  background: var(--ink);
  color: #FFFFFF;
  overflow: hidden;
}

.ticker {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: var(--accent);
  color: var(--ink);
}

.ticker__open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  white-space: nowrap;
}

.ticker__shop {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.ticker__city { font-size: 14.5px; font-weight: 700; }

.ticker__time {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .62;
}

.ticker__phone {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ticker__phone:hover { background: #23262C; color: var(--accent); }

.ticker__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.footstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-bottom: 1px solid var(--on-dark-line);
}

.footstat {
  padding: 24px 30px;
  border-right: 1px solid var(--on-dark-line);
}

.footstat:last-child { border-right: 0; }

.footstat__num { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.footstat__num--accent { color: var(--accent); }

.footstat__lbl {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .44);
}

.footmain { padding: 52px var(--gutter) 0; }

.footgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 46px;
}

.footbrand img { height: 36px; width: auto; }

.footbrand__text {
  margin-top: 18px;
  max-width: 330px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}

.subscribe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

.subscribe__in {
  flex: 1 1 190px;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--on-dark-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  outline: none;
}

.subscribe__in::placeholder { color: rgba(255, 255, 255, .4); }
.subscribe__in:focus { border-color: var(--accent); }

.subscribe__btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.subscribe__btn:hover { background: var(--accent-hi); }

.foot .social { gap: 10px; margin-top: 26px; }

.foot .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--on-dark-line);
  color: rgba(255, 255, 255, .7);
  transition: border-color .2s ease, color .2s ease;
}

.foot .social a:hover { border-color: var(--accent); color: var(--accent); }

.footcol__title {
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--on-dark-muted);
}

.footlink {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
  transition: color .18s ease;
}

.footlink:hover { color: #FFFFFF; }

.wordmarkbox {
  position: relative;
  height: max(110px, var(--u) * 14);
  padding: 0 var(--gutter);
  overflow: hidden;
}

.wordmark {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--u) * -3.2);
  display: block;
  width: 100%;
  font-family: var(--display);
  font-size: calc((var(--u) * 100 - 80px) / 5.26);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: -webkit-text-stroke-color .3s ease;
}

.wordmark:hover { -webkit-text-stroke-color: var(--accent); }

.footbottom { padding: 0 var(--gutter) 34px; }

.footbottom__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--on-dark-line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  color: var(--on-dark-muted);
}


/* ==========================================================================
   18. Booking dialogs
   ========================================================================== */

/* Native <dialog>: Esc, focus handling and the backdrop come from the
   browser, so the only JS needed is what fills in the slot and chains the
   two steps together. */
.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-glass);
  background: transparent;
  color: var(--ink);
  overflow: auto;
}

.modal::backdrop {
  background: rgba(20, 22, 26, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal__box {
  padding: 38px 36px 32px;
  border-radius: var(--r-glass);
  background: #FFFFFF;
  box-shadow: 0 40px 90px -30px rgba(20, 22, 26, .7);
}

.modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 14px;
  border: 1px solid var(--control);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
}

.modal__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.modal__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.modal__text {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

.modal__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.modal__fact dt {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.modal__fact dd {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.014em;
}

.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.modal__btn {
  flex: 1 1 auto;
  padding: 15px 22px;
  border: 1px solid var(--control);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.modal__btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.modal__btn--ok {
  border-color: var(--ink);
  background: var(--ink);
  color: #FFFFFF;
}

.modal__btn--ok:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.modal__actions--single .modal__btn { flex: 0 0 auto; margin-left: auto; padding-left: 34px; padding-right: 34px; }


/* ==========================================================================
   19. Inner pages — light header, page title, header divider
   ========================================================================== */

/* The home pages lay their header over the hero photograph; every other page
   of the template sits it on white above a hairline. Same markup, same
   dropdowns — only the palette and the spacing change. */
.hdr--light {
  position: relative;
  background: #FFFFFF;
  color: var(--ink);
}

.hdr--light .hdr__utility {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.hdr--light .util { color: var(--ink-2); }
.hdr--light .util__sep { background: rgba(20, 22, 26, .18); }
.hdr--light .util__link { color: var(--ink-2); }
.hdr--light .util__link:hover { color: var(--ink); }
.hdr--light .social--bare a { color: var(--ink-2); }
.hdr--light .social--bare a:hover { color: var(--ink); }

.hdr--light .hdr__bar { padding: 18px var(--gutter); }

.hdr--light .nav__link { color: var(--ink); }
.hdr--light .nav__link:hover { color: var(--ink-3); }

.hdr--light .iconbtn {
  border-color: rgba(20, 22, 26, .18);
  background: #FFFFFF;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hdr--light .iconbtn:hover { background: var(--surface); color: var(--ink); }

.hdr--light .burger { border-color: rgba(20, 22, 26, .18); background: #FFFFFF; }
.hdr--light .burger__bar { background: var(--ink); }

/* A sibling of the header, not a child — inside the nav row it would sit
   above the buttons instead of under the whole bar. */
.hdr__rule {
  height: 1px;
  margin: 0 var(--gutter);
  background: var(--line);
}

/* The page-title rule: one word carries the accent with a 1px ink stroke, so
   the colour reads as ink-drawn rather than highlighted. */
.accentword {
  color: var(--accent);
  -webkit-text-stroke: 1px var(--ink);
}

/* The header block is visually tighter than the rest, so its divider keeps
   60px below but only 20px above. */
.rule--head { margin-top: 20px; }


/* ==========================================================================
   20. Inner pages — page header block and intro
   ========================================================================== */

.pagehead {
  position: relative;
  overflow: hidden;
  padding: 5px var(--gutter) 0;
}

/* Bleeds off the top of the block. Everything else in here needs its own
   stacking position, or this paints over it. */
.pagehead__wordmark {
  position: absolute;
  z-index: 0;
  right: var(--gutter);
  top: 5px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 220px;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(20, 22, 26, .07);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.crumbs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.crumbs__list { display: flex; align-items: center; gap: 9px; }

.crumbs__list li + li::before { content: "/ "; color: var(--ink-2); }

.crumbs__list a { color: var(--ink-2); }
.crumbs__list a:hover { color: var(--ink); }
.crumbs__list [aria-current] { color: var(--ink); }

.crumbs__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.crumbs__ready { display: inline-flex; align-items: center; gap: 8px; }

.crumbs__sep { width: 1px; height: 12px; background: rgba(20, 22, 26, .18); }

.pagehead__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: nowrap;
  margin-top: 40px;
}

/* The padding and the negative margin are a pair: they keep descenders clear
   of the block's overflow without moving the type off its line. */
.pagehead__title {
  margin: 12px 0 -.1em;
  padding-bottom: .14em;
  font-size: clamp(38px, 4vw, 68px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.pagefacts {
  display: flex;
  align-items: baseline;
  gap: 30px;
  margin-bottom: 6px;
}

.pagefact { text-align: right; }

.pagefact__num { font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }

.pagefact__num--accent { color: var(--accent); }

.pagefact__lbl {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.pagefact__sep { width: 1px; height: 36px; background: var(--control); }


.intro {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 56px;
  align-items: start;
  margin-bottom: 44px;
}

.intro__text { font-size: 16px; line-height: 1.65; color: var(--ink-3); }

/* Between the intro and the block below it the design wants the rhythm but
   not the line — 60px of air, no hairline. */
.gap60 { height: var(--rhythm); }

/* The listings page keeps a shorter beat between its filter panel and the
   sort bar than the project's standard block rhythm. */
.gap28 { height: 28px; }

/* A pair of figures on a dark panel — the FAQ desk and the contact desk both
   close their panel head with it. */
.askfig { text-align: right; }

.askfig__num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.askfig__num--accent { color: var(--accent); }

.askfig__lbl {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .44);
}

.askfig__sep { width: 1px; height: 34px; background: rgba(255, 255, 255, .16); }


/* Some inner pages close the title row with a sentence instead of figures. */
/* The measure is fixed, not negotiable: the sentence is written to fall in two
   lines and a shrinking column re-breaks it into three or four. The title
   yields instead — it is allowed to take a second line. */
.pagehead__lede {
  flex: 0 0 560px;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: right;
  text-wrap: pretty;
}

/* The other half of the page-title rule: a word carried by its outline alone. */
.outlineword {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

/* Some page headers must let the figures drop below the title rather than
   squeeze it. */
.pagehead__row--wrap { flex-wrap: wrap; }

/* Two page headers close with figures rather than a sentence. Nothing beside
   the title needs a guaranteed measure there, so the title keeps its single
   line — the rule the sentence pages had to give up. */
.pagehead__row--figs .pagehead__title { white-space: nowrap; }


/* ==========================================================================
   21. Preloader
   ========================================================================== */

/* The wordmark starts as a hairline outline and fills from the bottom with
   the page's accent, so the same markup reads lime on the winter pages and
   larch on the autumn ones. It is visible from the first paint and removed
   on load; with JavaScript off the noscript rule in the head takes it out
   before it can ever block the page. */
.preloader {
  position: fixed;
  inset: 0;
  /* Above everything, Leaflet included: the map's own controls sit at 1000 in
     its stylesheet, and on a full-bleed map page they were painting straight
     over the preloader — the page read as having none at all. */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  transition: opacity .45s ease, visibility .45s ease;
}

.preloader--done { opacity: 0; visibility: hidden; }

body.is-loading { overflow: hidden; }

.preloader__inner { text-align: center; }

.preloader__logo {
  display: block;
  width: min(260px, 62vw);
  height: auto;
}

.preloader__outline {
  fill: none;
  stroke: rgba(255, 255, 255, .42);
  stroke-width: .7;
}

.preloader__fill { fill: var(--accent); }

/* The rect is what rises; main.js moves its y from the baseline to zero. */
#pl-rect { transition: y .3s linear; }

.preloader__pct {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .38);
}

@media (prefers-reduced-motion: reduce) {
  #pl-rect { transition: none; }
}


/* ==========================================================================
   22. Auth dialogs — sign in / sign up
   ========================================================================== */

.modal--auth { width: min(940px, calc(100vw - 32px)); }

.auth {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  border-radius: var(--r-glass);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 40px 90px -30px rgba(20, 22, 26, .7);
}

/* --- Left panel -------------------------------------------------------- */

.auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 32px 34px;
  background: var(--ink);
  color: var(--panel-ink);
  overflow: hidden;
}

.auth__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.auth__pitch {
  position: relative;
  margin-top: 26px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.3;
}

.auth__list {
  position: relative;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.auth__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
}

.auth__proof {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: auto;
  padding-top: 26px;
}

.auth__proof-num { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.auth__proof-lbl {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--on-dark-muted);
}

.auth__proof-sep { width: 1px; height: 30px; background: rgba(247, 247, 245, .16); }

.auth__wordmark {
  position: absolute;
  right: -18px;
  bottom: -30px;
  font-family: var(--display);
  font-size: 104px;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(247, 247, 245, .09);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Form -------------------------------------------------------------- */

.auth__form { position: relative; padding: 38px 40px 34px; }

.auth__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.auth__close:hover { border-color: var(--ink); color: var(--ink); }

.auth__kicker {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-2);
}

.auth__title {
  margin-top: 12px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.05;
}

.auth__sub {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.auth__social {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

/* Named .provider, not .social — .social is already the icon row in the top
   strip and the footer, and it would have picked this up on every page. */
.provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 10px;
  border: 1px solid var(--control);
  border-radius: var(--r-badge);
  background: #FFFFFF;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.provider:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-2px); }

.provider__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.auth__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-4);
}

.auth__or::before,
.auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth__form .field { margin-top: 16px; }

.auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field--pw { position: relative; }
.field--pw .field__in { padding-right: 48px; }

.field__peek {
  position: absolute;
  top: 31px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color .18s ease;
}

.field__peek:hover,
.field__peek[aria-pressed="true"] { color: var(--ink); }

.meter {
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--line-10);
  overflow: hidden;
}

.meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .2s ease, background .2s ease;
}

.meter__fill--weak { background: #E0674A; }
.meter__fill--fair { background: #E0A73F; }

.meter__lbl {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-2);
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.auth__row--terms { align-items: flex-start; }

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
  cursor: pointer;
}

.check__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.check__mark {
  position: relative;
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid var(--control);
  border-radius: 6px;
  background: #FFFFFF;
  transition: border-color .16s ease, background .16s ease;
}

.check__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
  transition: opacity .16s ease;
}

.check__box:checked + .check__mark { border-color: var(--ink); background: var(--accent); }
.check__box:checked + .check__mark::after { opacity: 1; }
.check__box:focus-visible + .check__mark { outline: 2px solid var(--ink); outline-offset: 3px; }

.auth__link { font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; }
.auth__link:hover { color: var(--ink-3); }

.auth__error {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(224, 103, 74, .34);
  border-radius: var(--r-badge);
  background: rgba(224, 103, 74, .08);
  font-size: 13.5px;
  color: #A8402A;
}

.auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  padding: 13px 13px 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}

.auth__submit:hover { background: #23262C; }
.auth__submit .btn__arrow { background: var(--accent); color: var(--ink); }

.auth__swap {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-3);
  text-align: center;
}

.auth__swap-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.auth__swap-btn:hover { color: var(--ink-3); }


/* ==========================================================================
   23. Responsive — 1700px and wider
   ========================================================================== */

/* No max-width container by design — the gutter is the only inset, so it
   grows on wide screens to keep the logo and the menu from drifting apart. */
@media (min-width: 1700px) {
  /* The page gutter stays at the design's 40px on every width — only the
     menu gets a little more room between the items and the action buttons. */
  .hdr__bar { gap: 48px; }
  .nav__list { gap: 10px; }
}

/* Screens of the 1920 class only. The stage goes to 52% of the viewport
   width instead of the design's 48.8%, so the photo gets more room and the
   search panel drops with it, clear of the hero buttons. Wider than this the
   design proportion is already tall enough and is left alone. */
@media (min-width: 1700px) and (max-width: 2100px) {
  .hero { min-height: max(680px, var(--u) * 52); }
}


/* ==========================================================================
   24. Responsive — 1280px
   ========================================================================== */

@media (max-width: 1280px) {
  .pagehead__wordmark { font-size: 170px; }
  .intro { gap: 34px; }
  .h2--nowrap { white-space: normal; }

  /* Not enough width for two control columns — the panels stack, still 20px apart. */
  .depbar { grid-template-columns: minmax(0, 1fr); }
  .depbar__row { gap: clamp(20px, 2.4vw, 44px); }

  .hero__copy { min-width: 380px; flex-basis: 380px; }

  .why__grid { grid-template-columns: repeat(2, 1fr); }

  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers__cell { border-bottom: 1px solid var(--line); }
  .numbers__cell:nth-child(2n) { border-right: 0; }
  .numbers__cell:nth-last-child(-n+2) { border-bottom: 0; }

  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 54px; }
  .steps__fill { width: 25%; }

  .footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}


/* ==========================================================================
   25. Responsive — 1180px, where the menu stops fitting
   ========================================================================== */

/* The logo, six nav items and three actions need about 1180px in one row.
   Below that the row was squeezing the logo — down to nothing by 900px — so
   the menu becomes a drawer here rather than waiting for phone width. */
@media (max-width: 1180px) {
  .hdr__bar { position: relative; }

  .burger { display: inline-flex; }

  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 60;
    display: none;
    max-height: 70vh;
    padding: 10px;
    border: 1px solid var(--line-10);
    border-radius: var(--r-dd);
    background: #FFFFFF;
    box-shadow: var(--sh-dd);
    overflow-y: auto;
  }

  .nav.is-open { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item { border-bottom: 1px solid var(--line-faint); }
  .nav__item:last-child { border-bottom: 0; }

  .nav__link {
    justify-content: space-between;
    padding: 13px 12px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
  }

  .nav__link:hover { color: var(--ink); }

  .nav__chev { display: none; }

  .nav__toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    display: block;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }

  .nav__toggle::before,
  .nav__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform: translate(-50%, -50%);
  }

  .nav__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .18s ease; }
  .nav__toggle[aria-expanded="true"]::after { opacity: 0; }

  .nav__toggle--sub { top: 0; }

  .dd,
  .flyout {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 10px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__toggle[aria-expanded="true"] + .dd,
  .nav__toggle[aria-expanded="true"] + .flyout { display: block; }

  .nav__item:hover > .dd,
  .nav__item:focus-within > .dd { transform: none; }

  .dd::before,
  .flyout::before { display: none; }

  .sub { position: relative; }

  /* In the drawer the +/- button is the affordance, so the row's own chevron
     would only collide with it. */
  .sub > .drow svg { display: none; }

  .drow { padding: 9px 12px; font-size: 14.5px; }
}


/* ==========================================================================
   26. Responsive — 1024px
   ========================================================================== */

@media (max-width: 1024px) {
  .pagehead__title { white-space: normal; }
  .pagehead__row { flex-wrap: wrap; gap: 24px; }
  .pagefacts { margin-bottom: 0; }
  .intro { grid-template-columns: 1fr 1fr; }
  .intro .btn { grid-column: 1 / -1; justify-self: start; }
  .pagehead__lede { flex-basis: 100%; text-align: left; }
  /* The page gutter stays 40px here too — it only drops on the phone layout
     below. --hdr-h is measured by main.js; this is the no-JS fallback. */
  :root { --rhythm: 44px; --hdr-h: 100px; }

  /* Below this width the hero stops being a fixed-ratio stage: the photo
     becomes a background layer and the content sets the height. The top menu
     keeps sitting on top of the photo, as it does on the desktop layout —
     the photo starts at the very top of the page, not under a white band. */
  .hero {
    min-height: 0;
    padding-bottom: 28px;
  }

  .hero__photo { height: 100%; }

  .hero__scrim { height: 100%; background: linear-gradient(180deg, rgba(20, 22, 26, .82) 0%, rgba(20, 22, 26, .54) 46%, rgba(20, 22, 26, .72) 100%); }

  .hero__body {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 26px var(--gutter) 26px;
  }

  .hero__copy { flex: 0 1 auto; min-width: 0; max-width: none; }

  .hero__title { font-size: clamp(40px, 6.4vw, 74px); margin-top: 22px; }

  .hero__lead { font-size: 15px; line-height: 2; top: 12px; }

  .hero__stats { gap: 24px; margin-top: 26px; padding-top: 18px; border-top-color: rgba(255, 255, 255, .3); }

  .hstat__num,
  .hstat__lbl { color: #FFFFFF; }

  .hstat__sep { height: 34px; background: rgba(255, 255, 255, .3); }

  .hero__cta { flex-wrap: wrap; white-space: normal; gap: 10px; margin-top: 24px; margin-bottom: 0; }

  .btn--hero { min-height: 46px; font-size: 15px; }
  .btn--hero.btn--white { gap: 12px; padding: 10px 12px 10px 24px; }
  .btn--hero.btn--glass { gap: 10px; padding: 10px 24px; }
  .btn--hero .btn__arrow { width: 28px; height: 28px; }

  .livecard { flex: 0 1 auto; }
  .livecard__head { padding: 20px 22px; }
  .livecard__ghost { font-size: 118px; }
  .livecard__body { padding: 18px 22px 20px; }
  .livecard__row { padding: 12px 0; }
  .livecard__foot { margin-top: 16px; padding-top: 14px; }
  .btn--browse { height: 44px; }

  .hero__searchwrap { padding: 0 var(--gutter); }

  .search__row { flex-wrap: wrap; row-gap: 18px; padding: 18px 18px 20px; }

  .bsel { flex: 1 1 40%; padding: 0 14px; }
  .bsel:nth-child(odd) { border-left: 0; }
  .bsel__chev { right: 14px; }

  .search__go { flex: 1 1 100%; padding: 0 14px; }
  .btn--show { width: 100%; }

  .feat {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 240px);
  }

  .fcard--tall { grid-row: span 1; }

  .shop { flex-basis: calc((100% - 32px) / 3); }

  .plans { grid-template-columns: 1fr; }

  .trade { grid-template-columns: 1fr; }
  .trade__panel { min-height: 420px; }
  .trade__range { font-size: clamp(38px, 6vw, 66px); }

  .h2--60 { font-size: clamp(34px, 5vw, 60px); }

  .sechead--pad { padding: 0 var(--gutter); }

  .ctapanel__inner { max-width: none; padding: 38px 32px; }
  .ctapanel__car { width: 78%; right: 0; bottom: 0; opacity: .5; }
  .ctapanel__scrim { background: linear-gradient(90deg, rgba(20, 22, 26, .96) 0%, rgba(20, 22, 26, .88) 54%, rgba(20, 22, 26, .5) 100%); }
  .ctapanel__wordmark { font-size: 130px; }
}


/* ==========================================================================
   27. Responsive — 780px
   ========================================================================== */

@media (max-width: 780px) {
  .pagehead__wordmark { font-size: 108px; }
  .crumbs { gap: 12px; }
  .crumbs__live { margin-left: 0; }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  :root { --gutter: 20px; --hdr-h: 142px; }

  /* Header collapses into a drawer. */
  .hdr__utility { gap: 12px; }
  .util { gap: 14px; font-size: 10px; }
  .util__item:nth-child(n+3) { display: none; }
  .hdr__utility-right { gap: 12px; }

  .hdr__bar { gap: 12px; padding: 14px var(--gutter); }

  .hdr__logo img { height: 34px; }

  .hdr__actions .iconbtn:first-child { display: none; }
  .btn--add { padding: 0 18px; font-size: 13.5px; }

  /* On a phone the sign-in panel is the form: the dark marketing column
     would push it a full screen down. */
  .modal--auth { width: min(520px, calc(100vw - 24px)); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { display: none; }
  .auth__form { padding: 30px 22px 26px; }
  .auth__title { font-size: 26px; }
  .auth__close { top: 14px; right: 14px; width: 34px; height: 34px; }

  .hero__title { font-size: clamp(38px, 9vw, 56px); }

  .hero__chips { gap: 8px; }
  .chip { padding: 8px 13px; font-size: 10px; }
  .chip--glass { font-size: 9.5px; }

  .hero__stats { gap: 18px; }

  .search__quick { gap: 8px; }
  .search__fresh { margin-left: 0; }

  .bsel { flex: 1 1 100%; padding: 0; }
  .bsel + .bsel { border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .bsel__chev { right: 2px; }

  .why__grid { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr; }
  .numbers__cell { border-right: 0; }

  .feat { grid-template-columns: 1fr; grid-template-rows: none; }
  .fcard { height: 240px; }

  .steps { padding-top: 0; }
  .steps__track,
  .steps__fill { display: none; }
  .steps__grid { grid-template-columns: 1fr; gap: 34px; }

  .step__day { position: static; margin-bottom: 12px; }
  .step__node { display: none; }
  .step__body { padding-top: 0; }

  .sechead--split { align-items: flex-start; gap: 24px; }

  .minifacts { gap: 20px; flex-wrap: wrap; }
  .minifact__num { font-size: 28px; }

  .depbar__row { gap: 18px; padding: 18px; }
  .depbar__slider { flex: 1 1 100%; }
  .depbar__shortcuts { flex: 1 1 100%; }
  .dep-btn { flex: 1 1 auto; }

  .trade__fields { grid-template-columns: 1fr; }
  .trade__panel { padding: 26px; min-height: 380px; }
  .btn--accept { left: 26px; bottom: 22px; }
  .trade__car { width: 96%; left: 2%; bottom: 12%; }

  .gaugebox { flex-direction: column; align-items: stretch; gap: 18px; }
  .gauge { align-self: center; }

  .ctapanel__inner { padding: 30px 22px; }
  .ctapanel__wordmark { font-size: 92px; left: 22px; bottom: -20px; }
  .ctapanel__car { display: none; }
  .ctapanel__scrim { background: rgba(20, 22, 26, .2); }

  .brand { flex: 1 1 150px; height: 76px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 13.5px; }

  .shop { flex-basis: calc((100% - 16px) / 2); }

  .ticker { gap: 14px; padding: 16px var(--gutter); }
  .ticker__phone { margin-left: 0; }

  .footstat { padding: 20px; border-right: 0; border-bottom: 1px solid var(--on-dark-line); }

  .footmain { padding: 36px var(--gutter) 0; }
  .footgrid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }

  .footbottom__inner { font-size: 9px; }
}


/* ==========================================================================
   28. Responsive — 560px
   ========================================================================== */

@media (max-width: 560px) {
  .askfig__num { font-size: 26px; }
  .pagehead__title { font-size: clamp(30px, 8.4vw, 40px); }
  .pagefacts { gap: 18px; }
  .pagefact__num { font-size: 24px; }
  .util__item:nth-child(n+2) { display: none; }
  .util__sep { display: none; }
  .social--bare li:nth-child(n+3) { display: none; }

  /* Keep the top row a single line on a phone: the account icon lives in the
     menu anyway, and below 400px the Add Listing pill drops to its plus. */
  .hdr__bar { flex-wrap: nowrap; gap: 10px; }
  .hdr__logo img { height: 30px; }
  .hdr__actions { gap: 8px; }
  .btn--add { height: 40px; padding: 0 16px; font-size: 13.5px; gap: 8px; }

  .hero__title { font-size: clamp(34px, 10vw, 46px); }
  .hero__lead { font-size: 14px; line-height: 1.9; }

  .hero__cta .btn { width: 100%; justify-content: space-between; }

  .hstat__sep { display: none; }
  .hero__stats { gap: 14px 26px; }

  .livecard__ghost { font-size: 92px; right: -20px; top: -30px; }

  .qp { padding: 8px 13px; }

  .h2--60 { font-size: clamp(30px, 8.4vw, 40px); }
  .h2--fluid { font-size: clamp(30px, 8.4vw, 40px); }
  .h2--fin { font-size: clamp(28px, 8vw, 38px); }
  .h2--cta { font-size: clamp(30px, 8.6vw, 40px); }
  .h2--brands { font-size: clamp(26px, 7.6vw, 36px); }

  .stars { font-size: 22px; }

  .rev { width: 260px; }

  .trade__range { font-size: clamp(30px, 9vw, 40px); }
  .trade__panel { padding: 22px; }
  .btn--accept { left: 22px; bottom: 18px; padding: 13px 13px 13px 22px; font-size: 14px; }

  .mapbox { height: 220px; }

  .shop { flex-basis: 78%; }

  .brand { flex: 1 1 100%; }

  .wordmarkbox { height: 64px; }
  .wordmark { font-size: 16vw; bottom: -2vw; }

  .ctapanel__stats { gap: 16px; }
  .cstat__sep { display: none; }

  .auth__social { grid-template-columns: minmax(0, 1fr); }
  .provider { justify-content: flex-start; padding-left: 18px; }
  .auth__pair { grid-template-columns: minmax(0, 1fr); }

  .modal__box { padding: 28px 22px 24px; }
  .modal__title { font-size: 23px; }
  .modal__facts { gap: 14px 24px; }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions--single .modal__btn { margin-left: 0; }
}


/* ==========================================================================
   29. Responsive — 430px
   ========================================================================== */

@media (max-width: 430px) {
  /* On a phone the pill drops to its plus so the whole top row stays on one
     line — account, add, menu, all the same size. The label is kept for
     screen readers through aria-label. */
  .btn--add { width: 40px; padding: 0; }
  .btn--add .btn__label { display: none; }

  .iconbtn { width: 40px; height: 40px; }

  /* The cart is a fourth control in a row that was already at its limit, so
     below this width the row gives ground evenly rather than pushing the
     burger off the edge: a little less padding, a tighter gap, and every
     control down to 38. The badge comes down with it. */
  .hdr__bar { padding-left: 14px; padding-right: 14px; }
  .hdr__actions { gap: 6px; }

  .iconbtn,
  .cartbtn,
  .btn--add { width: 38px; height: 38px; }
  .cartbtn__n { min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; }
  .burger { width: 38px; height: 38px; }
}


/* ==========================================================================
   30. Reduced motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track { animation: none; }
}

@media print {
  .hdr,
  .hero__searchwrap,
  .marquee,
  .foot { display: none; }

  body { color: #000000; }
}