/* UHM Cars — the windscreen price card, set in road-sign type */
:root {
  --bg: #f4f6f7;
  --surface: #e6ebee;
  --ink: #14232b;
  --muted: #4f5e66;
  --card: #ffd23f;          /* the yellow price card on every windscreen */
  --card-ink: #14232b;
  --accent: #0d7480;
  --accent-ink: #ffffff;
  --field: #14232b;         /* night: the slate field */
  --field-ink: #f4f6f7;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Poppins", system-ui, sans-serif;

  --step-small: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* small text: 15px on phones, 16px on large screens */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);

  --margin: clamp(16px, 2.6vw, 40px);
  --gap: clamp(96px, 10vw, 160px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--text);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); line-height: 1; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--card); color: var(--card-ink); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--card); padding: 8px 14px; }

/* buttons: square corners, one fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--ink); color: var(--bg);
  font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { background: var(--accent); }
.btn:active { transform: scale(.97); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: var(--step-body); background: var(--card); color: var(--card-ink); }
.btn--small:hover { background: #fff; }
.btn--yellow { background: var(--card); color: var(--card-ink); }
.btn--yellow:hover { background: #fff; }
.link { text-underline-offset: 4px; text-decoration-thickness: 2px; font-weight: 600; }
.link:hover { color: var(--accent); }

/* top bar */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--margin);
  color: var(--field-ink);
}
.wordmark {
  font: 700 2rem/1 var(--display); text-transform: uppercase; letter-spacing: -0.01em; text-decoration: none;
}
.bar nav { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.bar nav a { text-decoration: none; font-weight: 500; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* HERO */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: 112px var(--margin) 64px;
  background: var(--field);
  overflow: hidden;
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72);
  animation: drift 24s var(--ease) both;
}
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1); } }

.card {
  background: var(--card); color: var(--card-ink);
  position: relative;
}
.hero__card {
  width: min(880px, 100%);
  padding: clamp(24px, 3vw, 44px);
  display: grid; gap: clamp(24px, 3vw, 40px);
  /* the corner cut where the card's tape would sit */
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.card__top {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase;
  padding-bottom: 18px;
  border-bottom: 6px dotted var(--card-ink);   /* perforation of round dots */
}
.hero h1 { font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem); line-height: .9; }
.hero__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.hero__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--step-body); font-weight: 500; }
.hero__facts li { padding-left: 24px; text-indent: -24px; }
.hero__facts li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 14px; background: currentColor; transform: translateY(-2px); }
.hero__lead { font-size: var(--step-body); max-width: 34ch; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.card__note { font-size: var(--step-small); max-width: 22ch; }

/* INVENTORY */
.stock { padding: var(--gap) var(--margin) 0; }
.stock__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: end;
  margin-bottom: 56px;
}
.budget { background: var(--surface); padding: 28px 32px; display: grid; gap: 14px; }
.budget label { font-weight: 600; }
.budget__row { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.budget output { font: 700 var(--step-lead)/1 var(--display); min-width: 6.4ch; }
.budget__result { font-weight: 500; }
input[type=range] { width: 100%; accent-color: var(--ink); height: 32px; cursor: pointer; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: 600 var(--step-body)/1 var(--text); padding: 12px 18px; border: 0; cursor: pointer;
  background: var(--bg); color: var(--ink); border-radius: 999px;
  transition: background-color .15s, transform .15s var(--ease);
}
.chip:hover { background: #fff; }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--ink); color: var(--bg); }

.lot {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px 24px;
}
.car { grid-column: span 4; position: relative; transition: opacity .3s var(--ease); }
.car:nth-child(5n+1) { grid-column: span 8; }
.car:nth-child(5n+1) + .car { grid-column: span 4; }
.car.is-out { opacity: .35; }
.car button {
  all: unset; display: block; width: 100%; cursor: pointer; position: relative;
}
.car__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.car:nth-child(5n+1) .car__photo { aspect-ratio: 16 / 9; }
.car__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.car button:hover img, .car button:focus-visible img { transform: scale(1.04); }
.car button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.car__tag {
  position: relative; margin: -56px 0 0 16px; width: min(330px, calc(100% - 32px));
  background: var(--card); color: var(--card-ink);
  padding: 16px 20px 18px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .25s var(--ease);
}
.car button:hover .car__tag { transform: translateY(-6px); }
.car__name { font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase; display: block; }
.car__meta { display: block; font-size: var(--step-small); margin: 6px 0 10px; }
.car__price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 4px dotted var(--card-ink); padding-top: 10px; }
.car__price strong { font: 700 var(--step-lead)/1 var(--display); }
.car__price span { font-size: var(--step-small); font-weight: 600; }
.lot__noscript, .stock__foot { margin-top: 48px; font-size: var(--step-small); color: var(--muted); max-width: 70ch; }

/* CAR OF THE WEEK */
.week {
  margin-top: var(--gap);
  background: var(--surface);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh;
}
.week__plate { position: relative; padding: 40px; display: grid; place-items: center; }
.week__plate img { aspect-ratio: 1; width: 100%; object-fit: cover; object-position: 40% 50%; }
.week__tag {
  position: absolute; right: 40px; bottom: 40px;
  background: var(--card); color: var(--card-ink); padding: 14px 22px;
  font: 700 var(--step-lead)/1 var(--display);
}
.week__text { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 56px var(--margin) 40px 40px; }
.tabs { display: flex; gap: 28px; }
.tabs button {
  all: unset; cursor: pointer; font-size: var(--step-body); font-weight: 500; color: var(--muted);
  padding-bottom: 6px; border-bottom: 4px solid transparent;
}
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--card); }
.tabs button:focus-visible { outline: 3px solid var(--accent); }
.week h2 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); margin-bottom: 40px; }
.pane p { max-width: 40ch; font-size: var(--step-body); }
.pane:not([hidden]) { animation: rise .45s var(--ease) both; }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cell {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 72px; padding: 0 16px;
  background: var(--card); color: var(--card-ink); text-decoration: none;
  font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase;
  transition: filter .15s, transform .15s var(--ease);
}
.cell--ink { background: var(--ink); color: var(--bg); }
.cell:hover { filter: brightness(1.1); }
.cell--ink:hover { background: var(--accent); filter: none; }
.cell:active { transform: scale(.98); }

/* HOW: drag row */
.how { padding: var(--gap) 0 0; }
.how__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--margin); }
.how__btns { display: flex; gap: 8px; }
.sq {
  width: 56px; height: 56px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font-size: var(--step-lead);
  transition: background-color .15s, transform .15s var(--ease);
}
.sq:hover { background: var(--accent); }
.sq:active { transform: scale(.94); }
.how__bar { margin: 28px var(--margin) 40px; height: 6px; background: var(--surface); }
.how__bar span { display: block; height: 100%; width: 20%; background: var(--ink); transform-origin: left; transition: width .2s; }
.how__row {
  list-style: none; margin: 0; padding: 0 var(--margin) 8px;
  display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab; scroll-padding-inline: var(--margin);
}
.how__row::-webkit-scrollbar { display: none; }
.how__row li { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.how__row h3 { font-size: var(--step-lead); }
.how__row p { margin-top: 12px; font-size: var(--step-body); min-height: 6.2em; }
.how__row img { margin-top: var(--gap); aspect-ratio: 4 / 5; width: 100%; object-fit: cover; pointer-events: none; }

/* MENU: the printed price list */
.menu {
  margin-top: var(--gap);
  background: var(--field); color: var(--field-ink);
  padding: 120px var(--margin);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center;
}
.menu__sheet {
  grid-column: 2 / span 5;
  background: var(--card); color: var(--card-ink);
  padding: 64px 48px;
  --s: 14px;
  /* scalloped top and bottom edges */
  -webkit-mask: radial-gradient(var(--s) at 50% var(--s), #0000 98%, #000) 50% calc(-1 * var(--s)) / calc(2 * var(--s)) 100% repeat-x, /* taste-skill-ignore */
                radial-gradient(var(--s) at 50% calc(100% - var(--s)), #0000 98%, #000) 50% calc(var(--s)) / calc(2 * var(--s)) 100% repeat-x; /* taste-skill-ignore */
  -webkit-mask-composite: source-in;
          mask: radial-gradient(var(--s) at 50% var(--s), #0000 98%, #000) 50% calc(-1 * var(--s)) / calc(2 * var(--s)) 100% repeat-x intersect, /* taste-skill-ignore */
                radial-gradient(var(--s) at 50% calc(100% - var(--s)), #0000 98%, #000) 50% calc(var(--s)) / calc(2 * var(--s)) 100% repeat-x; /* taste-skill-ignore */
}
.menu__sheet h2 { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); text-align: center; margin-bottom: 40px; }
.menu__group + .menu__group { margin-top: 44px; }
.menu__group h3 { font-size: var(--step-lead); margin-bottom: 14px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.item { display: flex; align-items: baseline; gap: 10px; }
.item__n { font-weight: 600; font-size: var(--step-body); }
.item__v { order: 2; font-weight: 600; white-space: nowrap; }
.item::after { content: ""; order: 1; flex: 1; border-bottom: 4px dotted var(--card-ink); transform: translateY(-5px); min-width: 24px; }
.menu__desc { display: block; font-size: var(--step-body); margin-top: 2px; max-width: 36ch; }
.menu__photo { grid-column: 8 / span 5; margin: 0; }
.menu__photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 30% 50%; }
.menu__photo figcaption { margin-top: 14px; font-size: var(--step-small); }

/* SELL: the coupon */
.sell { padding: var(--gap) var(--margin); }
.coupon {
  --notch: 16px;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 46fr 54fr;
  background: var(--accent); color: var(--accent-ink);
  -webkit-mask: radial-gradient(circle var(--notch) at 46% 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore */
                radial-gradient(circle var(--notch) at 46% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore */
          mask: radial-gradient(circle var(--notch) at 46% 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore */
                radial-gradient(circle var(--notch) at 46% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore */
}
.coupon__left {
  padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  border-right: 6px dotted var(--bg);
}
.coupon__left h2 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.coupon__left p { font-size: var(--step-body); max-width: 34ch; }
.coupon__right { padding: 48px; display: grid; gap: 10px; align-content: center; }
.coupon input, .coupon select {
  height: 54px; padding: 0 16px; border: 0; border-radius: 0;
  background: #e3f1f2; color: var(--ink); font: 400 var(--step-body) var(--text);
}
.coupon input::placeholder { color: #3f5a60; }
.coupon__go {
  height: 58px; border: 0; cursor: pointer; margin-top: 6px;
  background: var(--ink); color: var(--bg);
  font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase;
  transition: background-color .15s, transform .15s var(--ease);
}
.coupon__go:hover { background: var(--card); color: var(--card-ink); }
.coupon__go:active { transform: scale(.98); }

/* FAQ */
.faq { padding: 0 var(--margin) var(--gap); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.faq h2 { grid-column: 1 / span 4; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.faq__text { grid-column: 5 / span 8; columns: 2; column-gap: 56px; }
.faq__text p { break-inside: avoid; margin-bottom: 22px; font-size: var(--step-body); line-height: 1.55; }
.faq__text b { font-weight: 600; }

/* FOOTER */
.foot { background: var(--field); color: var(--field-ink); overflow: hidden; padding: 120px var(--margin) 0; min-height: 100svh; display: flex; flex-direction: column; }
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.foot__top > div { grid-column: 1 / span 8; display: grid; gap: 40px; justify-items: start; }
.foot h2 { font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem); }
.foot__links { grid-column: 10 / span 3; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; font-size: var(--step-lead); font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--card); }
.foot__legal { margin-top: auto; padding-top: 80px; display: grid; grid-template-columns: auto 1fr; gap: 40px; font-size: var(--step-small); }
.credits { max-width: 75ch; justify-self: end; text-align: right; }
.credits a { text-underline-offset: 3px; }
.foot__name {
  font: 700 clamp(7rem, 27vw, 30rem)/.8 var(--display);
  white-space: nowrap; letter-spacing: -0.03em; color: var(--card);
  transform: translateY(18%); margin-top: 24px;
  text-align: center;
}

/* phone dock */
.dock { display: none; }

/* car sheet */
.sheet { border: 0; padding: 0; width: min(1100px, calc(100% - 32px)); max-height: calc(100svh - 32px); background: var(--bg); color: var(--ink); }
.sheet::backdrop { background: rgba(10, 18, 22, .78); }
.sheet[open] { animation: rise .35s var(--ease) both; }
.sheet__inner { display: grid; grid-template-columns: 1.15fr 1fr; position: relative; }
.sheet__photo { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; align-self: start; position: sticky; top: 0; }
.sheet__body { padding: 40px; display: grid; gap: 20px; align-content: start; }
.sheet h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); padding-right: 48px; }
.sheet__price { font: 700 var(--step-lead)/1 var(--display); background: var(--card); justify-self: start; padding: 8px 14px; }
.sheet__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 48px; height: 48px; border: 0; background: var(--ink); color: var(--bg); font-size: 1.75rem; cursor: pointer; }
.sheet__specs { border-collapse: collapse; width: 100%; font-size: var(--step-body); }
.sheet__specs th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 0; }
.sheet__specs td { text-align: right; font-weight: 600; padding: 6px 0; }
.sheet__specs tr + tr { border-top: 1px solid var(--surface); }
.calc { background: var(--surface); padding: 20px 24px; display: grid; gap: 6px; }
.calc h3 { font-size: var(--step-lead); margin-bottom: 6px; }
.calc label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-weight: 500; }
.calc output { font-weight: 600; }
.calc__result { font-size: var(--step-body); margin-top: 6px; }
.calc__result span { font: 700 var(--step-lead)/1 var(--display); }
.calc__small { font-size: var(--step-small); color: var(--muted); }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal-item.is-in { opacity: 1; transform: none; }
.hero__card.reveal { animation: rise .8s .15s var(--ease) both; }

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

/* tablet */
@media (max-width: 1080px) {
  .bar nav { display: none; }
  .stock__head { grid-template-columns: 1fr; }
  .car, .car:nth-child(5n+1), .car:nth-child(5n+1) + .car { grid-column: span 6; }
  .car:nth-child(5n+1) .car__photo { aspect-ratio: 3 / 2; }
  .menu__sheet { grid-column: 1 / span 7; }
  .menu__photo { grid-column: 8 / span 5; }
  .faq h2 { grid-column: 1 / -1; }
  .faq__text { grid-column: 1 / -1; }
  .foot__top > div { grid-column: 1 / span 9; }
  .foot__links { grid-column: 10 / span 3; }
  .coupon { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .sheet__inner { grid-template-columns: 1fr; }
  .sheet__photo { position: static; aspect-ratio: 16 / 9; }
  .coupon__left { border-right: 0; border-bottom: 6px dotted var(--bg); }
}

/* phone */
@media (max-width: 720px) {
  .bar { padding: 14px 16px; }
  .wordmark { font-size: var(--step-lead); }
  .hero { padding: 84px 16px 96px; align-items: end; }
  .hero__card { padding: 22px 20px 24px; gap: 20px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
  .card__top { font-size: var(--step-body); padding-bottom: 12px; }
  .card__top { display: none; }
  .hero h1 { font-size: clamp(2.375rem, 11vw, 3.25rem); }
  .hero__body { grid-template-columns: 1fr; gap: 16px; }
  .card__foot { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .card__foot .btn { order: -1; }
  .card__note { max-width: none; }
  .stock { padding-top: 120px; }
  .budget { padding: 22px 20px; }
  .lot { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .car, .car:nth-child(5n+1), .car:nth-child(5n+1) + .car { grid-column: 1 / -1; }
  .car__tag { margin-left: 12px; }
  .week { grid-template-columns: 1fr; min-height: 0; }
  .week__plate { padding: 16px 16px 0; }
  .week__tag { right: 16px; bottom: 0; font-size: var(--step-lead); }
  .week__text { padding: 32px 16px 40px; gap: 28px; }
  .week h2 { margin-bottom: 20px; }
  .cells { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }
  .how__btns { display: none; }
  .how__row { gap: 16px; }
  .how__row li { flex-basis: 72vw; }
  .how__row img { margin-top: calc(var(--gap) / 2.5); }
  .menu { grid-template-columns: 1fr; padding: 96px 16px; gap: 40px; }
  .menu__sheet, .menu__photo { grid-column: 1; }
  .menu__sheet { padding: 48px 20px; }
  .item__n { font-size: var(--step-body); }
  .coupon { grid-template-columns: 1fr;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore */
                  radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore */
            mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore */
                  radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; } /* taste-skill-ignore */
  .coupon__left { border-right: 0; border-bottom: 6px dotted var(--bg); padding: 36px 20px 40px; }
  .coupon__right { padding: 36px 20px 28px; }
  .sell { padding-left: 16px; padding-right: 16px; }
  .faq { padding: 0 16px var(--gap); }
  .faq__text { columns: 1; }
  .foot { padding: 96px 16px 0; min-height: 0; }
  .foot__legal { padding-top: 64px; }
  .foot__top { grid-template-columns: 1fr; gap: 40px; }
  .foot__top > div, .foot__links { grid-column: 1; }
  .foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--step-lead); }
  .foot__legal { grid-template-columns: 1fr; gap: 12px; padding-bottom: 8px; }
  .credits { text-align: left; justify-self: start; }
  .foot__name { font-size: 27vw; transform: translateY(16%); }   /* whole name fits the phone width, so it can sit centred */
  .sheet { width: 100%; max-height: 100svh; height: 100svh; max-width: none; margin: 0; }
  .sheet__inner { grid-template-columns: 1fr; }
  .sheet__photo { min-height: 0; aspect-ratio: 3 / 2; height: auto; }
  .sheet__body { padding: 24px 16px 40px; }
  body { padding-bottom: 64px; }
  .dock {
    display: grid; grid-template-columns: 2fr 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 20; height: 64px;
    transform: translateY(100%); transition: transform .3s var(--ease);
  }
  .dock.is-on:not(.is-shy) { transform: none; }
  .dock a { display: grid; place-items: center; text-decoration: none; font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase; }
  .dock__wa { background: var(--card); color: var(--card-ink); }
  .dock__call { background: var(--ink); color: var(--bg); }
}

/* ===================== v2: car pages, report, Arabic ===================== */
.bar__end { display: flex; align-items: center; gap: 8px; }
.langbtn {
  min-height: 44px; padding: 0 14px; border: 0; cursor: pointer; background: transparent; color: inherit;
  font: 600 var(--step-body)/1 "Cairo", var(--text);
  transition: background-color .15s;
}
.langbtn:hover { background: rgba(255, 255, 255, .12); }
.bar--solid { position: relative; background: var(--field); }

/* list items are real links to each car's own page */
.car > a { display: block; color: inherit; text-decoration: none; }
.car > a:hover img, .car > a:focus-visible img { transform: scale(1.04); }
.car > a:hover .car__tag { transform: translateY(-6px); }
.car > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.car__photo { position: relative; }
.car__status {
  position: absolute; top: 16px; inset-inline-start: 16px;
  background: var(--ink); color: var(--bg); padding: 8px 14px;
  font: 700 var(--step-body)/1 var(--display); text-transform: uppercase;
}
.stock__updated { margin-top: 48px; font-size: var(--step-small); font-weight: 600; }
.stock__updated + .stock__foot { margin-top: 6px; }
.week__report { display: inline-block; margin-top: 28px; }

/* ---- car page ---- */
.buy {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start;
  padding: 40px var(--margin) 0;
}
.gal { display: grid; gap: 8px; }
.gal__main { background: var(--surface); }
.gal__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gal__thumb { padding: 0; border: 0; cursor: pointer; background: none; opacity: .55; transition: opacity .15s, transform .15s var(--ease); }
.gal__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gal__thumb:hover { opacity: .85; }
.gal__thumb.is-on { opacity: 1; outline: 4px solid var(--card); outline-offset: -4px; }
.gal__thumb:active { transform: scale(.96); }
.gal__video { width: 100%; background: #000; }
.gal__more {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 0 16px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600;
  transition: background-color .15s;
}
.gal__more:hover { background: var(--card); }
.buy__card {
  position: sticky; top: 24px;
  padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.buy__back { font-weight: 600; text-decoration: none; font-size: var(--step-small); }
.buy__back:hover { text-decoration: underline; }
.buy__badge { position: static; justify-self: start; }
.buy h1 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }
.buy__price { font: 700 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--display); border-top: 6px dotted var(--card-ink); padding-top: 18px; }
.buy__monthly { font-weight: 600; }
.buy__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.buy__facts li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 12px; background: currentColor; }
.buy__status { background: var(--ink); color: var(--bg); padding: 14px 18px; }
.cells--stack { grid-template-columns: 1fr; }
.cell--paper { background: #fff; color: var(--ink); }
.cell--paper:hover { background: var(--bg); filter: none; }
.buy__reserve, .buy__more { justify-self: start; }

.rep {
  padding: var(--gap) var(--margin) 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 40px; align-items: start;
}
.rep__head { grid-column: 1 / span 4; display: grid; gap: 20px; }
.rep__head h2 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.rep__sheet { grid-column: 5 / span 8; grid-row: 1 / span 2; background: var(--surface); padding: 12px 32px; }
.rep__table { width: 100%; border-collapse: collapse; }
.rep__table tr + tr { border-top: 2px solid var(--bg); }
.rep__table th, .rep__table td { text-align: start; padding: 20px 12px 20px 0; vertical-align: top; }
.rep__table th { font-weight: 600; width: 32%; }
.rep__res { width: 120px; }
.rep__res span { display: inline-block; padding: 6px 12px; font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.is-pass .rep__res span { background: var(--ink); color: var(--bg); }
.is-note .rep__res span { background: var(--card); color: var(--card-ink); }
.is-ask .rep__res span { background: var(--bg); color: var(--ink); }
.flaws { grid-column: 1 / span 4; background: var(--card); color: var(--card-ink); padding: 28px; display: grid; gap: 14px; }
.flaws h3 { font-size: var(--step-lead); }
.flaws__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.flaws__list li { padding-inline-start: 22px; text-indent: -22px; }
.flaws__list li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 12px; background: currentColor; }

.facts { padding: var(--gap) var(--margin) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.facts h2, .calc--page h2 { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); margin-bottom: 20px; }
.facts__table { width: 100%; border-collapse: collapse; }
.facts__table tr + tr { border-top: 2px solid var(--surface); }
.facts__table th { text-align: start; font-weight: 500; color: var(--muted); padding: 12px 16px 12px 0; width: 45%; }
.facts__table td { text-align: start; font-weight: 600; padding: 12px 0; }
.calc--page { background: var(--field); color: var(--field-ink); padding: clamp(24px, 3vw, 40px); gap: 12px; }
.calc--page h2 { margin-bottom: 0; }
.calc--page input[type=range] { accent-color: var(--card); }
.calc--page .calc__small { color: #b9c4ca; }
.calc__big { font: 700 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--display); color: var(--card); }
.calc--page .cell { margin-top: 12px; background: var(--card); color: var(--card-ink); }
.calc--page .cell:hover { background: #fff; }

.similar { padding: var(--gap) var(--margin) var(--gap); }
.similar h2 { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); margin-bottom: 40px; }
.lot--three .car, .lot--three .car:nth-child(5n+1), .lot--three .car:nth-child(5n+1) + .car { grid-column: span 4; }
.lot--three .car:nth-child(5n+1) .car__photo { aspect-ratio: 3 / 2; }
.foot--short { min-height: 0; padding-top: 64px; }

/* reviews (shown only when real reviews are filled in) */
.reviews { padding: var(--gap) var(--margin) 0; }
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 32px; margin-bottom: 40px; }
.reviews__head h2 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.reviews__score { font-size: var(--step-lead); }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.review img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; margin-bottom: 16px; }
.review blockquote { margin: 0; font-size: var(--step-lead); line-height: 1.3; }
.review__who { margin-top: 12px; font-weight: 600; }

/* ---- Arabic, right to left ---- */
[dir=rtl] { --display: "Cairo", system-ui, sans-serif; --text: "Cairo", system-ui, sans-serif; }
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3 { letter-spacing: 0; line-height: 1.25; }
[dir=rtl] .hero h1 { line-height: 1.2; font-size: clamp(2.125rem, 1.2rem + 3vw, 3.5rem); }
/* English car names and specs stay in English word order inside Arabic pages */
[dir=rtl] .car__name, [dir=rtl] .car__meta, [dir=rtl] .buy h1, [dir=rtl] .week h2, [dir=rtl] .buy__facts li, [dir=rtl] .flaws__list li, [dir=rtl] .rep__table td, [dir=rtl] .facts__table td { unicode-bidi: plaintext; text-align: right; }
[dir=rtl] .car__tag { margin-left: 0; margin-right: 16px; clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
[dir=rtl] .credits { text-align: start; justify-self: start; }
[dir=rtl] .foot__name, [dir=rtl] .wordmark { direction: ltr; font-family: "Barlow Condensed", sans-serif; }
[dir=rtl] .hero__card { clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); }
[dir=rtl] .buy__card { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
[dir=rtl] .langbtn { font-family: "Barlow", sans-serif; }
[dir=rtl] .rep__table th, [dir=rtl] .rep__table td { padding: 20px 0 20px 12px; }
[dir=rtl] .facts__table th { padding: 12px 0 12px 16px; }

@media (max-width: 1080px) {
  .buy { grid-template-columns: 1fr; }
  .buy__card { position: static; }
  .rep { grid-template-columns: minmax(0, 1fr); }
  .rep__head, .flaws, .rep__sheet { grid-column: 1 / -1; grid-row: auto; }
  .facts { grid-template-columns: 1fr; gap: 72px; }
  .lot--three .car, .lot--three .car:nth-child(5n+1), .lot--three .car:nth-child(5n+1) + .car { grid-column: span 6; }
  .reviews__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .buy { padding: 16px 16px 0; gap: 24px; }
  .gal__thumbs { grid-template-columns: repeat(3, 1fr); }
  .rep, .facts, .similar, .reviews { padding-left: 16px; padding-right: 16px; }
  .rep__sheet { padding: 4px 16px; }
  .rep__table th, .rep__table td { display: block; width: auto; padding: 0; }
  .rep__table tr { display: grid; gap: 8px; padding: 18px 0; }
  [dir=rtl] .rep__table th, [dir=rtl] .rep__table td { padding: 0; }
  [dir=rtl] .car__tag { margin-right: 12px; }
  .lot--three .car, .lot--three .car:nth-child(5n+1), .lot--three .car:nth-child(5n+1) + .car { grid-column: 1 / -1; }
  .reviews__list { grid-template-columns: 1fr; }
}

/* ===================== v3: hero with a real car, seal, stronger buttons ===================== */
.hero { padding: 120px var(--margin) 80px; }
.hero__photo { filter: brightness(.5); }
.hero__inner {
  position: relative; z-index: 1; width: min(1320px, 100%);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch;
}
.hero__card { width: auto; padding: clamp(28px, 3.5vw, 52px); gap: clamp(28px, 3vw, 44px); align-content: start; }
.hero__body { gap: 40px; }
.card__foot { justify-content: flex-start; gap: 12px; }
.card__note { margin-top: -12px; max-width: none; }

/* buttons */
.btn--big { min-height: 66px; padding: 0 34px; font-size: var(--step-lead); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--ink); color: #fff; }
.btn--wa { gap: 10px; }
.wa-ico { width: 1.15em; height: 1.15em; flex: none; }

/* the real car beside the card */
.herocar { position: relative; display: block; overflow: hidden; background: var(--field); color: var(--card-ink); text-decoration: none; min-height: 420px; }
.herocar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.herocar:hover img { transform: scale(1.04); }
.herocar__tag {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: end;
  background: var(--card); padding: 16px 20px 18px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .25s var(--ease);
}
.herocar:hover .herocar__tag { transform: translateY(-6px); }
.herocar__name { grid-column: 1 / -1; font: 700 var(--step-lead)/1 var(--display); text-transform: uppercase; }
.herocar__meta { font-size: var(--step-small); }
.herocar__price { grid-row: 3; font: 700 var(--step-lead)/1 var(--display); }
.herocar__go { grid-row: 3; grid-column: 2; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.herocar:focus-visible { outline: 3px solid var(--card); outline-offset: 4px; }

/* the inspection seal, stamped where card and car meet */
.seal {
  position: absolute; z-index: 2; top: 20px; right: 20px;
  width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--ink); color: var(--card);
  font: 700 var(--step-body)/1.05 var(--display); text-transform: uppercase;
  outline: 4px dotted var(--card); outline-offset: -12px;
  transform: rotate(-10deg);
  animation: stamp .6s .7s var(--ease) both;
}
.seal span:first-child { font-size: var(--step-lead); }
@keyframes stamp { from { opacity: 0; transform: rotate(-10deg) scale(1.6); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }

/* "150-point inspected" on cars whose report is filled in */
.car__checked {
  position: absolute; top: 16px; inset-inline-end: 16px;
  background: var(--card); color: var(--card-ink); padding: 8px 12px;
  font: 700 var(--step-small)/1 var(--display); text-transform: uppercase;
}

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .herocar { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .hero { padding: 84px 16px 48px; }
  .hero__inner { gap: 16px; }
  .card__foot .btn { width: 100%; }
  .card__note { margin-top: -4px; text-align: center; }
  .seal { width: 96px; height: 96px; top: 14px; right: 14px; outline-offset: -9px; }
  .hero__card { padding: 22px 20px 24px; gap: 22px; }
  .hero h1 { font-size: clamp(2.125rem, 9.4vw, 3rem); }
  .herocar { aspect-ratio: 4 / 5; }
  .bar .btn--wa span { display: none; }
  .bar .btn--wa { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .seal { animation: none; } }

/* ===================== v4: yellow band, showroom slideshow, even car grid ===================== */

/* ---- the yellow band ---- */
.top { background: var(--card); color: var(--card-ink); padding: 0 var(--margin); position: relative; }
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.top__logo img { height: 52px; width: auto; display: block; }
.top__bar nav { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.top__bar nav a { text-decoration: none; font-weight: 600; }
.top__bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); }
.top__main {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end;
  padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 88px);
  border-top: 6px dotted var(--card-ink);
}
.top h1 { font-size: clamp(3rem, 1rem + 6.2vw, 7.75rem); line-height: .88; letter-spacing: -0.02em; }
.top__tagline { margin-top: 28px; font: 700 var(--step-lead)/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.top__side { display: grid; gap: 32px; }
.top .hero__facts { font-size: var(--step-body); }
.top__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.top__cta .btn { flex: 1 1 auto; }

/* ---- the showroom slideshow ---- */
.show { position: relative; background: var(--field); color: #fff; overflow: hidden; }
.show__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.28) saturate(.8); }
.show__slides { list-style: none; margin: 0; padding: 0; position: relative; height: min(78svh, 760px); min-height: 560px; }
.slide {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s;
}
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; z-index: 1; }
.slide__photo { order: 2; position: relative; overflow: hidden; }
.slide__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.slide.is-on .slide__photo img { animation: kenburns 7.5s linear both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.slide__info {
  order: 1; align-self: center; display: grid; gap: 18px; justify-items: start;
  padding: 48px clamp(24px, 4vw, 64px) 140px var(--margin);
}
.slide.is-on .slide__info > * { animation: rise .7s var(--ease) both; }
.slide.is-on .slide__info > :nth-child(2) { animation-delay: .08s; }
.slide.is-on .slide__info > :nth-child(3) { animation-delay: .16s; }
.slide.is-on .slide__info > :nth-child(4) { animation-delay: .24s; }
.slide.is-on .slide__info > :nth-child(5) { animation-delay: .32s; }
.slide__status { position: absolute; top: 20px; left: 20px; right: auto; z-index: 1; }
.slide__name { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); color: #fff; }
.slide__meta { color: #e2e8eb; font-size: var(--step-body); max-width: 40ch; }
.slide__price { font: 700 clamp(2.25rem, 1.4rem + 2vw, 3.5rem)/1 var(--display); color: var(--card); }
.slide__price span { display: block; margin-top: 8px; font: 500 var(--step-body)/1.3 var(--text); color: #fff; }
.slide__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn--yellow:hover { background: #fff; }

.show__nav {
  position: absolute; z-index: 3; left: var(--margin); right: var(--margin); bottom: 24px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
}
.thumb {
  display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 6px 10px; align-items: center;
  padding: 8px; border: 0; cursor: pointer; text-align: start;
  background: rgba(20, 35, 43, .82); color: #c9d2d7; font: 600 var(--step-small)/1.2 var(--text);
  transition: background-color .2s, color .2s;
}
.thumb img { grid-row: span 2; width: 56px; height: 42px; object-fit: cover; }
.thumb__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb__bar { height: 4px; background: rgba(255, 255, 255, .2); }
.thumb__bar span { display: block; height: 100%; width: 0; background: var(--card); }
.thumb.is-on { background: var(--ink); color: #fff; }
.thumb.is-on .thumb__bar span { animation: fill var(--slide-ms, 6500ms) linear both; }
.show.is-paused .thumb.is-on .thumb__bar span { animation-play-state: paused; }
.thumb:hover { color: #fff; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.show__pause {
  position: absolute; z-index: 3; top: 20px; right: var(--margin);
  min-height: 40px; padding: 0 14px; border: 0; cursor: pointer;
  background: rgba(20, 35, 43, .82); color: #fff; font: 600 var(--step-small) var(--text);
}
.show__pause:hover { background: var(--ink); }

/* ---- the car list: one even grid ---- */
.lot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: stretch; }
.lot .car, .lot .car:nth-child(5n+1), .lot .car:nth-child(5n+1) + .car { grid-column: auto; }
.lot .car > a { display: flex; flex-direction: column; height: 100%; background: #fff; }
.lot .car__photo, .lot .car:nth-child(5n+1) .car__photo { aspect-ratio: 4 / 3; }
.lot .car__tag {
  margin: 0; width: auto; flex: 1; display: flex; flex-direction: column; gap: 6px;
  clip-path: none; padding: 18px 20px 20px; background: #fff; color: var(--ink);
  border-top: 6px solid var(--card);
}
.lot .car > a:hover .car__tag { transform: none; }
.lot .car__name { font-size: var(--step-lead); }
.lot .car__meta { margin: 0; color: var(--muted); }
.lot .car__price { margin-top: auto; border-top: 0; padding-top: 10px; }
.lot .car__price strong { font-size: var(--step-lead); }
.lot .car__price > span { color: var(--muted); }
.lot .car > a:hover { outline: 4px solid var(--card); outline-offset: 0; }

/* car pages: logo in the dark bar */
.bar .wordmark img { height: 44px; width: auto; display: block; }

/* ---- tablet ---- */
@media (max-width: 1080px) {
  .top__bar nav { display: none; }
  .top__main { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .lot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slide { grid-template-columns: 1fr 1fr; }
  .show__nav { grid-auto-columns: 120px; overflow-x: auto; scrollbar-width: none; }
  .thumb { grid-template-columns: 1fr; }
  .thumb img { grid-row: auto; width: 100%; height: 56px; }
  .thumb__name { display: none; }
}

/* ---- phone: its own layout ---- */
@media (max-width: 720px) {
  .top { padding: 0 16px; }
  .top__bar { padding: 14px 0; }
  .top__logo img { height: 40px; }
  .top__bar .btn--wa span { display: none; }
  .top__bar .btn--wa { padding: 0 14px; }
  .top__main { padding: 28px 0 32px; gap: 24px; }
  .top h1 { font-size: clamp(2.5rem, 12.5vw, 3.5rem); }
  .top__tagline { margin-top: 16px; font-size: 1.25rem; }
  .top__cta { flex-direction: column; }
  .top__cta .btn { width: 100%; }

  .show__slides { height: auto; min-height: 0; display: grid; }
  .slide { position: relative; grid-area: 1 / 1; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .slide__photo { order: 1; aspect-ratio: 4 / 3.4; }
  .slide__info { order: 2; padding: 22px 16px 120px; gap: 12px; }
  .slide__name { font-size: 2.25rem; }
  .slide__cta { width: 100%; }
  .slide__cta .btn { flex: 1 1 100%; min-height: 56px; }
  .show__nav { left: 16px; right: 16px; bottom: 16px; grid-auto-columns: 1fr; overflow: visible; }
  .thumb { padding: 0; background: none; }
  .thumb img { display: none; }
  .thumb__bar { height: 6px; }
  .thumb.is-on { background: none; }
  .show__pause { top: 12px; right: 12px; }

  .lot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lot .car__photo, .lot .car:nth-child(5n+1) .car__photo { aspect-ratio: 16 / 10; }
  .lot .car__tag { padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.is-on .slide__photo img { animation: none; transform: none; }
  .thumb.is-on .thumb__bar span { animation: none; width: 100%; }
}

/* ===================== v5: compact photo hero, quick slides, yellow tags back ===================== */
.hero--compact { min-height: 0; padding: 112px var(--margin) 56px; display: grid; place-items: center; }
.hero--compact .hero__photo { filter: brightness(.55); animation: drift 18s var(--ease) both; }
.hero__card--wide {
  width: min(1240px, 100%); padding: clamp(24px, 2.6vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px 40px; align-items: center;
}
.hero__card--wide h1 { font-size: clamp(2.5rem, 1rem + 4vw, 4.75rem); line-height: .9; }
.hero__tagline { margin-top: 14px; font: 700 var(--step-lead)/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.hero__ctas { display: grid; gap: 10px; }
.hero__ctas .btn { width: 100%; }
.hero__facts--row {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 32px;
  padding-top: 18px; border-top: 6px dotted var(--card-ink); font-weight: 600;
}
.hero__facts--row li { padding: 0; text-indent: 0; }
.hero__facts--row li::before { margin-right: 10px; }
.bar .btn--wa { gap: 8px; }

/* slideshow: about two seconds a car */
.slide { transition: opacity .45s var(--ease), visibility 0s .45s; }
.slide.is-on { transition: opacity .45s var(--ease), visibility 0s; }
.slide.is-on .slide__photo img { animation: kenburns 2.6s linear both; }
.slide.is-on .slide__info > * { animation-duration: .4s; }
.slide.is-on .slide__info > :nth-child(2) { animation-delay: .04s; }
.slide.is-on .slide__info > :nth-child(3) { animation-delay: .08s; }
.slide.is-on .slide__info > :nth-child(4) { animation-delay: .12s; }
.slide.is-on .slide__info > :nth-child(5) { animation-delay: .16s; }

/* car list: the yellow windscreen tag back on each photo, every card the same height */
.lot .car > a { background: none; }
.lot .car > a:hover { outline: none; }
.lot .car__tag {
  position: relative; margin: -52px 16px 0; padding: 16px 20px 18px; gap: 4px;
  background: var(--card); color: var(--card-ink); border-top: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: transform .25s var(--ease);
}
.lot .car > a:hover .car__tag { transform: translateY(-6px); }
.lot .car__name { min-height: 2em; display: flex; align-items: flex-end; }
.lot .car__meta { color: var(--card-ink); }
.lot .car__price { border-top: 4px dotted var(--card-ink); padding-top: 10px; margin-top: 8px; }
.lot .car__price > span { color: var(--card-ink); }

@media (max-width: 720px) {
  .hero--compact { padding: 80px 16px 32px; }
  .hero__card--wide { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px 24px; }
  .hero__card--wide h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .hero__tagline { font-size: 1.125rem; margin-top: 10px; }
  .hero__facts--row { flex-direction: column; gap: 6px; padding-top: 14px; }
  .bar .btn--wa span { display: none; }
  .bar .btn--wa { padding: 0 14px; }
  .lot .car__tag { margin: -40px 12px 0; }
  .lot .car__name { min-height: 0; }
}

/* ===================== v6: Netflix-style sliding showroom, stronger hero zoom ===================== */
/* the hero photo: first-build brightness, a zoom-out you can actually see */
.hero--compact { padding-top: 128px; padding-bottom: 72px; }
.hero--compact .hero__photo { filter: brightness(.72); animation: zoomout 14s cubic-bezier(.25, .1, .25, 1) both; transform-origin: 50% 60%; }
@keyframes zoomout { from { transform: scale(1.32); } to { transform: scale(1); } }
.hero__card--wide { width: min(1120px, 100%); }

/* the slides sit side by side and the whole row slides left */
.show__slides { display: flex; height: min(72svh, 700px); min-height: 520px; will-change: transform; }
.slide, .slide.is-on {
  position: relative; inset: auto; flex: 0 0 100%; height: 100%;
  opacity: 1; visibility: visible; transition: none; z-index: auto;
}
.slide__photo img { transform: scale(1.06); }
.slide.is-on .slide__photo img { animation: kenburns-soft var(--slide-ms, 2750ms) linear both; }
@keyframes kenburns-soft { from { transform: scale(1.08); } to { transform: scale(1); } }
.slide .slide__info > * { animation: none !important; }
.show__pause { display: none; }

@media (max-width: 720px) {
  .hero--compact { padding: 84px 16px 40px; }
  .show__slides { height: auto; min-height: 0; align-items: stretch; }
  .slide, .slide.is-on { height: auto; display: grid; grid-area: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--compact .hero__photo { animation: none; }
}

/* v6 tidy */
.slide__name { font-size: clamp(2.25rem, 1rem + 3vw, 4rem); }
.rep__table, .facts__table, .buy__facts, .flaws__list { font-size: var(--step-body); }
.calc__small, .foot--short .foot__legal, .buy__back { font-size: var(--step-body); }

/* ===================== v7: arrows, calmer zoom, tighter page ===================== */
/* slower Dubai zoom-out */
.hero--compact .hero__photo { animation: zoomout 26s cubic-bezier(.3, 0, .35, 1) both; }
@keyframes zoomout { from { transform: scale(1.25); } to { transform: scale(1); } }

/* slideshow: arrows bottom-right, no thumbnail bar */
.show__nav { display: none; }
.slide__info { padding-bottom: 56px; }
.slide.is-on .slide__photo img { animation-duration: 4s; }
.show__arrows { position: absolute; z-index: 3; right: var(--margin); bottom: 24px; display: flex; gap: 8px; }
.show__arrow {
  width: 56px; height: 56px; display: grid; place-items: center; cursor: pointer; border: 0;
  background: rgba(20, 35, 43, .85); color: #fff;
  transition: background-color .2s, color .2s, transform .15s var(--ease);
}
.show__arrow svg { width: 24px; height: 24px; }
.show__arrow:hover { background: var(--card); color: var(--card-ink); }
.show__arrow:active { transform: scale(.94); }
.show__slides { cursor: grab; }
.show__slides:active { cursor: grabbing; }
.slide__photo img { -webkit-user-drag: none; user-select: none; }

/* tighter page: sections closer together so it is clear there is more below */
:root { --gap: 50px; }   /* space between sections (user asked for 50px, 6 Nov 2026) */
.stock { padding-top: clamp(48px, 5vw, 72px); }
.stock__head { margin-bottom: 36px; }
.stock__updated { margin-top: 32px; }
.how__bar { margin: 20px var(--margin) 28px; }
.how__row img { margin-top: calc(var(--gap) * .6); }
.menu { padding-top: 80px; padding-bottom: 80px; }
.sell { padding-top: var(--gap); padding-bottom: var(--gap); }
.faq { padding-bottom: var(--gap); }
.foot { min-height: 0; padding-top: 80px; }
.foot__legal { padding-top: 56px; }

@media (max-width: 720px) {
  .slide__info { padding-bottom: 28px; }
  .show__arrows { right: 12px; bottom: auto; top: calc(100vw * 3.4 / 4 - 48px); gap: 6px; }
  .show__arrow { width: 36px; height: 36px; }   /* smaller on phones (user: looked too big) */
  .show__arrow svg { width: 18px; height: 18px; }
  .stock { padding-top: 48px; }
  .menu { padding-top: 56px; padding-bottom: 56px; }
  .foot { padding-top: 64px; }
}

/* v7b: hero card about 10% shorter, the four selling points on one even line */
.hero--compact { padding-top: 116px; padding-bottom: 60px; }
.hero__card--wide { padding: clamp(22px, 2.2vw, 32px) clamp(24px, 2.8vw, 40px); gap: 16px 40px; }
.hero__card--wide h1 { font-size: clamp(2.5rem, 1rem + 3.6vw, 4.25rem); }
.hero__tagline { margin-top: 10px; }
.hero__ctas .btn--big { min-height: 58px; }
.hero__facts--row {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between;
  gap: 8px 24px; padding-top: 14px; white-space: nowrap;
}
@media (max-width: 1080px) { .hero__facts--row { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 40px; } }
@media (max-width: 720px) { .hero__facts--row { grid-template-columns: 1fr; white-space: normal; } }

/* ===================== v8: five connected steps (no sideways scroll) ===================== */
.how { padding: var(--gap) var(--margin) 0; }
.how__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 32px; padding: 0; margin-bottom: 36px; }
.how__lead { font-size: var(--step-lead); color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
.step { display: flex; flex-direction: column; }
/* the numbered line that runs from step to step */
.step__track { position: relative; height: 56px; margin-bottom: 20px; }
.step__track::before {
  content: ""; position: absolute; left: 0; right: -24px; top: 50%; height: 4px; transform: translateY(-50%);
  background: var(--surface);
}
.step:last-child .step__track::before { right: 0; }
.step__track::after {   /* the filled part of the line, drawn in as the section appears */
  content: ""; position: absolute; left: 0; right: -24px; top: 50%; height: 4px; transform: translateY(-50%) scaleX(0);
  transform-origin: left; background: var(--card); transition: transform .6s var(--ease); transition-delay: var(--d, 0ms);
}
.step:last-child .step__track::after { right: 0; }
.step.is-in .step__track::after { transform: translateY(-50%) scaleX(1); }
.step__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--card); font: 700 var(--step-lead)/1 var(--display);
}
.step__photo { overflow: hidden; background: var(--surface); }
.step__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.step:hover .step__photo img { transform: scale(1.04); }
.step__label {
  margin-top: 18px; font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
}
.step h3 { margin-top: 8px; font-size: var(--step-lead); }
.step__text { margin-top: 10px; color: var(--ink); }

/* tablet: 3 + 2, the line only runs inside each row */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .step:nth-child(3) .step__track::before, .step:nth-child(3) .step__track::after { right: 0; }
}
/* phone: a vertical timeline, number on the left, line running down */
@media (max-width: 720px) {
  .how { padding-left: 16px; padding-right: 16px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding-bottom: 32px; position: relative; }
  .step > :not(.step__track) { grid-column: 2; }
  .step__track { grid-row: 1 / span 4; grid-column: 1; height: auto; margin: 0; }
  .step__track::before, .step__track::after { left: 22px; right: auto; width: 4px; height: auto; top: 0; bottom: -32px; transform: none; }
  .step__track::after { transform: scaleY(0); transform-origin: top; }
  .step.is-in .step__track::after { transform: scaleY(1); }
  .step:last-child .step__track::before, .step:last-child .step__track::after { bottom: 0; }
  .step__num { width: 48px; height: 48px; }
  .step__photo img { aspect-ratio: 16 / 9; }
  .step__label { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .step__track::after { transition: none; } }

/* ===================== v9: "What comes with the car" polish ===================== */
.items { gap: 22px; }
.menu__group + .menu__group { margin-top: 52px; }
.menu__group h3 { margin-bottom: 18px; }
.menu__desc { margin-top: 4px; }
.item { align-items: center; }
.item::after { border-bottom: 2px dotted rgba(20, 35, 43, .45); transform: none; align-self: center; }
.item__v--free {
  background: var(--ink); color: #fff; padding: 5px 12px 6px;
  font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.item__v--paid { font: 700 var(--step-lead)/1 var(--display); color: var(--ink); }
.menu__group:last-child h3::after { content: " — paid, only if you choose them"; font: 500 var(--step-body)/1 var(--text); text-transform: none; }
.menu__photo img { aspect-ratio: 16 / 10; object-position: 50% 55%; }
.menu__promise {
  grid-column: 1 / -1; margin: 40px 0 64px; text-align: center;   /* 64px below = the space above it (40px margin + 24px grid gap), so it sits centred */
  font: 700 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1.15 var(--display); text-transform: uppercase; color: var(--card);
}
@media (max-width: 720px) {
  .menu__promise { margin: 8px 0 48px; text-align: center; }   /* 48px = the space above it on phones */
  .menu__group:last-child h3::after { display: block; margin-top: 6px; content: "Paid, only if you choose them"; }
}

/* ===================== v10: organised footer, legal pages, full-height photo ===================== */
.foot__top { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; align-items: start; }
.foot__top > div { grid-column: auto; }
.foot__top > .foot__cta { display: grid; gap: 32px; justify-items: start; }
.foot h2 { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); }
.foot__col h3 { font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--card); margin-bottom: 18px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot__col a { color: #fff; text-decoration: none; font-size: var(--step-body); font-weight: 500; }
.foot__col a:hover { color: var(--card); text-decoration: underline; text-underline-offset: 4px; }
.foot__info li { color: #c9d2d7; font-size: var(--step-body); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 56px; margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, .12); color: #9fb0b8; font-size: var(--step-small); }
.foot__legalnav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__legalnav a { color: #c9d2d7; text-decoration: none; }
.foot__legalnav a:hover { color: var(--card); text-decoration: underline; }
.foot--short { padding-top: 64px; }
.foot--short .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }

/* simple pages: credits, privacy, terms */
.doc__main { max-width: 760px; margin: 0 auto; padding: 56px var(--margin) 80px; }
.doc__main h1 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-bottom: 20px; }
.doc__main h2 { font-size: var(--step-lead); margin: 36px 0 10px; }
.doc__main p { margin-top: 10px; }
.doc__lead { color: var(--muted); }
.doc__main a { text-underline-offset: 3px; }

/* "What comes with the car": the photo fills the full height beside the list */
.menu { align-items: stretch; }
.menu__photo { display: flex; flex-direction: column; align-self: stretch; }
.menu__photo img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 62% 50%; }

@media (max-width: 1080px) {
  .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__top > .foot__cta { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot__top > div { grid-column: auto; }
  .foot__top > .foot__cta { grid-column: 1 / -1; }
  .foot__col--info { grid-column: 1 / -1; }
  .foot--short .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__legal { flex-direction: column; margin-top: 40px; padding-top: 28px; }
  .menu__photo img { flex: none; height: auto; aspect-ratio: 16 / 10; }
}

/* v10b: footer group spacing, full-width "Visit us" on phones */
.foot .foot__col h3 { margin: 0 0 16px; line-height: 1; }
.foot .foot__col ul { margin: 0; gap: 10px; }
.foot .foot__col li { line-height: 1.35; }
@media (max-width: 720px) { .foot__top > .foot__col--info { grid-column: 1 / -1; } }
.foot__top > .foot__col { display: block; }

/* v11: "In the yard now" heading and budget filter balanced on one line */
.stock__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; margin-bottom: 28px; }
.stock__head h2 { font-size: clamp(2.75rem, 1.2rem + 3.6vw, 5rem); }
.stock__sub { margin-top: 10px; font-size: var(--step-lead); color: var(--muted); }
.budget { padding: 20px 28px; gap: 10px; }
.budget__row { gap: 20px; }
.budget output { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.budget input[type=range] { height: 24px; }
.budget__result { font-size: var(--step-small); }
.chip { padding: 9px 16px; font-size: var(--step-small); }
@media (max-width: 1080px) { .stock__head { grid-template-columns: 1fr; gap: 20px; } }

/* review fix: Car of the Week without the empty middle */
.week { min-height: 0; align-items: center; }
.week__plate { padding: 32px; }
.week__plate img { aspect-ratio: 4 / 3; }
.week__text { justify-content: center; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.week h2 { margin-bottom: 20px; }
.week__tag { right: 32px; bottom: 32px; }
@media (max-width: 720px) { .week__plate { padding: 16px 16px 0; } .week__tag { right: 16px; bottom: 0; } }

/* v12: Car of the week heading; Dubai photo keeps zooming gently */
.week { grid-template-rows: auto 1fr; padding-top: 48px; }
.week__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding: 0 var(--margin) 4px; }
.week__head h2 { font-size: clamp(2.75rem, 1.2rem + 3.6vw, 5rem); margin: 0; }
.week__sub { font-size: var(--step-lead); color: var(--muted); }
.week__name { font-size: clamp(2.25rem, 1.2rem + 2.6vw, 4rem); margin-bottom: 20px; }
.hero--compact .hero__photo { animation: zoomout-loop 18s ease-in-out infinite alternate; }
@keyframes zoomout-loop { from { transform: scale(1.3); } to { transform: scale(1); } }
@media (max-width: 720px) { .week { padding-top: 32px; } .week__head { padding: 0 16px 8px; } }
@media (prefers-reduced-motion: reduce) { .hero--compact .hero__photo { animation: none; } }

/* v13: brand line beside the name; a calmer, tidier hero card */
.wordmark { display: inline-flex; align-items: baseline; gap: 14px; }
.wordmark__tag { font: 500 var(--step-small)/1.2 var(--text); text-transform: none; letter-spacing: 0; color: var(--card); white-space: nowrap; }
.hero__card--wide { gap: 20px 48px; }
.hero__card--wide h1 { margin: 0; }
@media (max-width: 720px) {
  .wordmark { flex-direction: column; align-items: flex-start; gap: 3px; }
  .wordmark__name { font-size: 1.5rem; line-height: 1; }
  .wordmark__tag { font-size: var(--step-small); }
  .hero--compact { padding: 88px 16px 28px; }
  .hero__card--wide { gap: 18px; padding: 22px 18px 20px; }
  .hero__card--wide h1 { font-size: clamp(2.125rem, 10vw, 2.75rem); line-height: .98; }
  .hero__ctas { gap: 8px; }
  .hero__ctas .btn--big { min-height: 52px; font-size: 1.125rem; }
  .hero__facts--row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 14px; font-size: var(--step-small); line-height: 1.3; }
  .hero__facts--row li { display: flex; gap: 8px; align-items: baseline; }
  .hero__facts--row li::before { flex: none; width: 8px; height: 8px; margin: 0; transform: translateY(-1px); }
}
/* v13b: tagline stacked under the name everywhere; selling points as clean bullets */
.wordmark { flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.wordmark__tag { font-size: var(--step-small); }
@media (max-width: 720px) {
  .hero__facts--row li { display: block; position: relative; padding-left: 16px; }
  .hero__facts--row li::before { position: absolute; left: 0; top: .45em; margin: 0; transform: none; }
}

/* v14: "From message to keys" with icons, short catchy lines */
.how--icons .how__head { margin-bottom: 48px; }
.steps--icons { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
.steps--icons .step { position: relative; display: block; text-align: center; }
/* the dotted road between the icons */
.steps--icons .step:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; left: calc(50% + 64px); right: calc(-50% + 40px);
  border-top: 4px dotted var(--ink); opacity: .3;
}
.step__icon {
  position: relative; width: 104px; height: 104px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); color: var(--ink);
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.step__icon svg { width: 52px; height: 52px; }
.steps--icons .step__num {
  position: absolute; top: -4px; right: -6px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--card);
  font: 700 var(--step-body)/1 var(--display); border: 3px solid var(--bg);
}
.steps--icons .step:hover .step__icon { transform: translateY(-4px); background: var(--ink); color: var(--card); }
.steps--icons .step h3 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); }
.steps--icons .step__text { margin: 0 auto; max-width: 26ch; color: var(--muted); }

@media (max-width: 1080px) {
  .steps--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
  .steps--icons .step::after { display: none; }
}
@media (max-width: 720px) {
  .how--icons .how__head { margin-bottom: 28px; }
  .steps--icons { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps--icons .step { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; align-items: start; text-align: left; padding-bottom: 28px; }
  .steps--icons .step > * { grid-column: 2; }
  .steps--icons .step__icon { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; margin: 0; }
  .steps--icons .step__icon svg { width: 38px; height: 38px; }
  .steps--icons .step__num { width: 30px; height: 30px; top: -6px; right: -8px; font-size: 1rem; }
  .steps--icons .step h3 { margin-top: 10px; }
  .steps--icons .step__text { margin: 0; max-width: none; }
  /* the dotted road runs down between the icons */
  .steps--icons .step:not(:last-child)::after { display: block; top: 84px; bottom: 6px; left: 36px; right: auto; border-top: 0; border-left: 4px dotted var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .step__icon { transition: none; } .steps--icons .step:hover .step__icon { transform: none; } }
.step__icon svg { width: 58px; height: 58px; }
@media (max-width: 720px) { .steps--icons .step__icon svg { width: 42px; height: 42px; } }

/* breathing space between the Dubai hero and the car slideshow */
.show { margin-top: var(--gap); }

/* slider: no background photo, plain site bg */
.show__bg { display: none; }
.show { background: var(--bg); color: var(--ink); }

/* slider left panel: match the site background, full height so dark bg doesn't bleed */
.slide__info {
  background: var(--bg); color: var(--ink);
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
}
.slide__name  { color: var(--ink); }
.slide__meta  { color: var(--muted); }
.slide__price { color: var(--ink); }
.slide__price span { color: var(--muted); }

/* ===================== spacing normalization: uniform --gap between every section ===================== */
/* Each section provides its gap via padding-top only. No margin-top stacking, no padding-bottom on sections. */
/* Result: exactly one --gap from last content of section A to first content of section B, everywhere. */
.stock  { padding-top: var(--gap); }
.week   { margin-top: 0; padding-top: var(--gap); }
.menu   { margin-top: 0; padding-top: var(--gap); padding-bottom: 0; }
.sell   { padding-bottom: var(--gap); }   /* last section before the dark footer: needs its own gap below */
.foot   { padding-top: var(--gap); }

@media (max-width: 720px) {
  .stock { padding-top: var(--gap); }
  .menu  { padding-top: var(--gap); padding-bottom: 0; }
  .foot  { padding-top: var(--gap); }
}

/* ===== Our story & FAQ page (photo + overlapping card, alternating sides) ===== */
.story-hero { position: relative; min-height: clamp(460px, 62vh, 640px); display: flex; align-items: center; overflow: hidden; background: var(--field); }
.story-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.story-hero__text { position: relative; max-width: 720px; padding: 64px var(--margin); margin-left: max(var(--margin), calc((100vw - 1240px) / 2)); color: #fff; }
.story-hero__text h1 { font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem); line-height: .95; margin-bottom: 22px; color: #fff; }
.story-hero__text p { margin: 0 0 14px; font-size: var(--step-body); line-height: 1.6; color: #e8edef; }
.story-hero__text .btn { margin-top: 14px; }

.story-vision { max-width: 860px; margin: 0 auto; padding: 88px var(--margin) 40px; text-align: center; }
.story-vision h2 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); margin: 0; text-transform: uppercase; }
.story-vision__tag { margin: 8px 0 26px; font-weight: 600; color: var(--accent); font-size: var(--step-small); text-transform: lowercase; letter-spacing: .02em; }
.story-vision p { line-height: 1.7; margin: 0 auto 16px; }

.story-qa { max-width: 1240px; margin: 0 auto; padding: 32px var(--margin) 24px; display: grid; gap: 56px; scroll-margin-top: 24px; }
.qa { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.qa > img { grid-column: 1 / span 7; grid-row: 1; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: var(--surface); }
.qa__card { grid-column: 7 / span 6; grid-row: 1; position: relative; background: #fff; padding: clamp(28px, 3vw, 44px); box-shadow: 0 10px 40px rgba(20, 35, 43, .12); border-top: 5px solid var(--card); }
.qa--flip > img { grid-column: 6 / span 7; }
.qa--flip .qa__card { grid-column: 1 / span 6; }
.qa__card h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; margin: 0 0 14px; }
.qa__card p { margin: 0; line-height: 1.65; color: var(--muted); }
.qa__btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 0 20px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: var(--step-small); }
.qa__btn:hover { background: var(--accent); }

.story-close { max-width: 760px; margin: 0 auto; padding: 72px var(--margin) 96px; text-align: center; }
.story-close p { line-height: 1.7; margin: 0 0 26px; font-size: var(--step-lead); font-family: var(--text); }
.bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--card); text-decoration-thickness: 3px; }

@media (max-width: 860px) {
  .story-qa { gap: 40px; }
  .qa, .qa--flip { display: block; }
  .qa__card { margin: -48px 16px 0; padding: 24px; }
  .story-vision { padding-top: 64px; }
}
.faq__more a { font-weight: 600; color: var(--accent); text-underline-offset: 4px; }

/* ===== "Not found the one?" panel under the car list ===== */
.notfound {
  position: relative; overflow: hidden; isolation: isolate;
  margin: var(--gap) 0; padding: clamp(36px, 4vw, 64px) clamp(28px, 5vw, 80px);   /* same space above and below */
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px 56px;
  background: var(--field); color: var(--field-ink);
}
/* yellow road-lane marking down the left edge */
.notfound::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: repeating-linear-gradient(to bottom, var(--card) 0 28px, transparent 28px 46px);
}
/* soft headlight glow behind the buttons */
.notfound::after {
  content: ""; position: absolute; z-index: -1; right: -10%; top: 50%; width: 60%; aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(255, 210, 63, .16), transparent);
}
.notfound h2 { margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); line-height: .92; text-transform: uppercase; color: #fff; }
.notfound h2::first-line { color: #fff; }
.notfound p { margin: 14px 0 0; max-width: 46ch; font-size: var(--step-body); line-height: 1.6; color: #c9d3d8; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.notfound__btn { min-height: 60px; padding: 0 28px; white-space: nowrap; }
.notfound__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.notfound__btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: none; }
@media (max-width: 860px) {
  .notfound { grid-template-columns: 1fr; margin: 40px 0; }
  .notfound__actions { flex-direction: column; }
  .notfound__btn { width: 100%; justify-content: center; }
}

/* the five steps sit right above the dark "What comes with the car" band: give them their own gap below */
.how { padding-bottom: var(--gap); }

/* ===== Budget finder, v3: compact card, level with "In the yard now" ===== */
.stock__head { align-items: center; }
.budget {
  display: grid; gap: 14px; align-self: center;
  background: #fff; padding: 18px 24px 20px;
  border: 1px solid rgba(20, 35, 43, .1); border-top: 4px solid var(--card);
  box-shadow: 0 10px 30px -18px rgba(20, 35, 43, .3);
}
.budget__row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
.budget__value { display: grid; gap: 2px; }
.budget__label { font: 700 .9375rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.budget .budget__value output { font: 700 clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem)/1 var(--display); min-width: 5.6ch; color: var(--ink); }
/* the count still updates for screen readers, but is not shown */
.budget .budget__result { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* slider: navy fill up to a yellow handle */
.budget input[type=range] {
  --pct: 26.8%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.budget input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--ink) 0 var(--pct), var(--surface) var(--pct) 100%);
}
.budget input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--surface); }
.budget input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ink); }
.budget input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--ink); box-shadow: 0 2px 6px rgba(20, 35, 43, .3);
  transition: transform .15s var(--ease);
}
.budget input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--ink); box-shadow: 0 2px 6px rgba(20, 35, 43, .3);
}
.budget input[type=range]:hover::-webkit-slider-thumb,
.budget input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.budget input[type=range]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* body type: square tags, like the site's buttons */
.budget .chips { gap: 8px; }
.budget .chip {
  border-radius: 0; padding: 9px 14px; background: #fff; color: var(--ink);
  font: 600 var(--step-small)/1 var(--text);
  box-shadow: inset 0 0 0 1.5px rgba(20, 35, 43, .18);
}
.budget .chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.budget .chip.is-on { background: var(--ink); color: var(--card); box-shadow: none; }
@media (max-width: 720px) {
  .budget { padding: 16px 18px 18px; }
  .budget__row { gap: 20px; }
}

/* ===== Top menu: road-sign lettering, yellow underline that slides in ===== */
.bar nav { gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.bar nav a {
  position: relative; padding: 8px 0;
  font: 700 1.1875rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .86); text-decoration: none;
  transition: color .2s var(--ease);
}
.bar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--card); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.bar nav a:hover, .bar nav a[aria-current="page"] { color: #fff; text-decoration: none; }
.bar nav a:hover::after, .bar nav a[aria-current="page"]::after { transform: scaleX(1); }
.bar nav a:focus-visible { outline: 2px solid var(--card); outline-offset: 4px; }

/* hero photo (Burj Khalifa at dusk): crop low enough to keep the golden highways in the wide band */
.hero--compact .hero__photo { object-position: 50% 72%; transform-origin: 50% 72%; }

/* phones: hero WhatsApp button (header icon + bottom bar cover it) and the four facts hidden, so the hero is short */
@media (max-width: 720px) {
  .hero__ctas .btn--wa { display: none; }
  .hero__facts { display: none; }   /* the four short facts: hidden on phones to keep the hero short */
}

/* =====================================================================
   PHONE REDESIGN (6 Nov 2026) — everything below applies to phones only.
   Desktop is untouched. Goals: photo hero that actually shows the skyline,
   smaller type, 2-column car grid, no fade-in gaps, tighter sections.
   ===================================================================== */
@media (max-width: 720px) {
  :root {
    --step-body: 1rem;            /* 16px body text */
    --step-lead: 1.1875rem;       /* 19px */
    --step-small: .9375rem;       /* 15px */
  }
  body { font-size: 1rem; }

  /* no fade-ins on phones: content is simply there (no blank gaps while scrolling) */
  .js .reveal-item { opacity: 1; transform: none; transition: none; }

  /* section headings: one consistent phone size */
  #cars h2, #week h2, #how h2, #included h2, #sell h2, .foot__cta h2, .notfound h2 {
    font-size: 2rem; line-height: .95; letter-spacing: 0;
  }

  /* --- header --- */
  .bar { padding: 14px 16px; }
  .wordmark { font-size: 1.5rem; }
  .wordmark__tag { font-size: .8125rem; }
  .bar .btn--wa { min-height: 42px; padding: 0 12px; }

  /* --- hero: the photo is the hero; headline sits on a dark fade at the bottom --- */
  .hero.hero--compact {
    position: relative; overflow: hidden;
    min-height: 400px; padding: 88px 16px 24px;   /* shorter on phones (user: too long) */
    display: grid; place-items: end stretch;
  }
  .hero--compact .hero__photo {
    filter: brightness(.78); object-position: 50% 45%; transform-origin: 50% 45%;
    /* zoom-out you see straight away on a phone: fast start, slow finish, then back and forth */
    animation: zoomout-phone 12s cubic-bezier(.15, .55, .35, 1) infinite alternate;
  }
  .hero--compact::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,35,43,.55) 0%, rgba(20,35,43,0) 28%, rgba(20,35,43,0) 45%, rgba(20,35,43,.9) 100%);
  }
  .hero .hero__card--wide {
    position: relative; z-index: 1;
    background: transparent; clip-path: none; box-shadow: none;
    padding: 0; gap: 18px; color: #fff;
  }
  .hero .hero__card--wide h1 {
    color: #fff; font-size: 2.75rem; line-height: .92;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
  }
  .hero .hero__card--wide h1::after {
    content: ""; display: block; width: 56px; height: 5px; margin-top: 14px; background: var(--card);
  }
  .hero__ctas .btn { min-height: 52px; font-size: 1.125rem; }
  .hero__ctas .btn:first-child { background: var(--card); color: var(--card-ink); }

  /* --- showroom slideshow --- */
  .slide__info { padding: 20px 16px 24px; }
  .slide__name { font-size: 1.75rem; line-height: 1; }
  .slide__price { font-size: 1.5rem; margin-top: 6px; }
  .slide__meta { font-size: .9375rem; margin-top: 8px; }
  .slide__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .slide__cta .btn { min-height: 48px; padding: 0 10px; font-size: 1rem; }
  .slide__cta .btn .wa-ico { display: none; }

  /* --- car list: 2-column grid of compact cards --- */
  .lot { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .lot .car__photo, .lot .car:nth-child(5n+1) .car__photo { aspect-ratio: 4 / 3; }
  .lot .car__tag { margin: 0; padding: 10px 10px 12px; gap: 4px; clip-path: none; }
  .lot .car__name { font-size: 1rem; line-height: 1.05; min-height: 2.1em; }
  .lot .car__meta { display: none; }
  .lot .car__price { flex-direction: column; align-items: flex-start; gap: 2px; border-top-width: 3px; padding-top: 8px; margin-top: 6px; }
  .lot .car__price strong { font-size: 1.0625rem; }
  .lot .car__price > span { font-size: .9375rem; }
  .lot .car__checked { display: none; }   /* the badge is on the car page and the slideshow; too big for half-width cards */
  .notfound { padding: 26px 20px 26px 28px; gap: 18px; }
  .notfound p { font-size: 1rem; }
  .notfound__btn { min-height: 50px; font-size: 1.0625rem; }

  /* --- car of the week --- */
  .week__head { margin-bottom: 18px; }
  .week__sub { font-size: 1rem; }
  .week__plate img { aspect-ratio: 4 / 3; }
  .week__tag { font-size: 1.125rem; }
  .week__name { font-size: 1.75rem; line-height: 1; }
  .cells .cell { min-height: 52px; font-size: 1.125rem; }

  /* --- from message to keys --- */
  .how__lead { font-size: 1rem; }
  .how--icons .how__head { margin-bottom: 24px; }
  .steps--icons .step__icon { width: 52px; height: 52px; }
  .steps--icons .step__icon svg { width: 24px; height: 24px; }
  .steps--icons .step h3 { font-size: 1.25rem; }
  .steps--icons .step__text { font-size: .9375rem; }

  /* --- what comes with the car --- */
  .menu__sheet { padding: 22px 18px; }
  .menu__group h3 { font-size: 1.125rem; }
  .menu .items { font-size: .9375rem; }
  .menu__photo { display: none; }
  .menu__promise { font-size: 1.25rem; }

  /* --- sell or trade --- */
  .coupon__left { min-height: 0; padding: 24px 20px 8px; }
  .coupon__right { padding: 16px 20px 24px; }
  .coupon input, .coupon select { min-height: 50px; }
  .coupon__go { min-height: 52px; font-size: 1.125rem; }

  /* --- footer + bottom bar --- */
  .foot__cta .btn { min-height: 50px; font-size: 1.0625rem; }
  body { padding-bottom: 0; }
  .foot { padding-bottom: 56px; }   /* room for the bottom WhatsApp bar, in the footer's own dark colour */
  .dock { height: 56px; }
  .dock a { font-size: 1.125rem; }
}
@keyframes zoomout-phone { from { transform: scale(1.3); } to { transform: scale(1); } }
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .hero--compact .hero__photo { animation: none; } }

/* ===== Hero slideshow (6 Nov 2026): crossfade + gentle zoom-out per slide; desktop and phone ===== */
.hero__slides { position: absolute; inset: 0; overflow: hidden; background: var(--field); }
.hero--compact .hero__slides .hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%); transform-origin: var(--pos, 50% 50%);
  opacity: 0; transform: scale(1.12);
  transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
  animation: none;
}
.hero--compact .hero__slides .hero__photo.is-on {
  opacity: 1;
  animation: hero-slide-zoom 7.6s cubic-bezier(.2, .6, .35, 1) both;   /* zooms out while it is showing */
}
.hero--compact .hero__slides .hero__photo.was-on { opacity: 0; transform: scale(1); }   /* fades out without jumping back */
@keyframes hero-slide-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

/* progress bars, bottom right */
.hero__bars { position: absolute; z-index: 2; right: var(--margin); bottom: 18px; display: flex; gap: 6px; }
.hero__bars i { display: block; width: 28px; height: 3px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.hero__bars i::after { content: ""; position: absolute; inset: 0; background: var(--card); transform: scaleX(0); transform-origin: left; }
.hero__bars i.is-done::after { transform: scaleX(1); }
.hero__bars i.is-on::after { animation: hero-bar 6s linear both; }
@keyframes hero-bar { to { transform: scaleX(1); } }

@media (max-width: 720px) {
  .hero--compact .hero__slides .hero__photo { object-position: var(--pos-phone, 50% 50%); transform-origin: var(--pos-phone, 50% 50%); }
  .hero__bars { right: 16px; bottom: 12px; }
  .hero__bars i { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--compact .hero__slides .hero__photo.is-on { animation: none; transform: none; }
  .hero__bars i.is-on::after { animation: none; transform: scaleX(1); }
}
/* desktop: banner strip under the white top bar (like support.saffronalley.com), yellow card centred and see-through */
@media (min-width: 721px) {
  .hero.hero--compact { min-height: 460px; place-items: center; padding-top: 48px; padding-bottom: 56px; }
  .hero .hero__card--wide { background: rgba(255, 210, 63, .65); }   /* original wide card shape, 65% see-through */
  .hero__bars { top: auto; bottom: 20px; }
  /* people photos: shown a little larger and slid left, so the faces sit beside the card (per-slide --w / --l) */
  .hero--compact .hero__slides .hero__photo { right: auto; left: var(--l, 0%); width: calc(100% * var(--w, 1)); max-width: none; }
}

/* ===== White top bar on every page (like support.saffronalley.com): sits above the banner, contents held to the page width ===== */
.bar, .bar.bar--solid {
  position: relative; inset: auto; z-index: 5;
  background: #fff; color: var(--ink);
  border-bottom: 1px solid rgba(20, 35, 43, .08);
  padding-top: 10px; padding-bottom: 10px;   /* slimmer bar */
  padding-left: var(--margin); padding-right: var(--margin);   /* logo and WhatsApp at the edges, as before */
}
.bar .wordmark__name { color: var(--ink); }
.bar .wordmark__tag { color: var(--muted); }
.bar nav a { color: rgba(20, 35, 43, .78); }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }
.bar nav a:focus-visible { outline-color: var(--accent); }
@media (max-width: 720px) {
  .bar, .bar.bar--solid { padding: 8px 16px; }
  /* phone banner now starts below the white bar */
  .hero.hero--compact { min-height: 360px; padding-top: 28px; }
  .hero--compact::after { background: linear-gradient(180deg, rgba(20,35,43,0) 0%, rgba(20,35,43,0) 40%, rgba(20,35,43,.9) 100%); }
}

/* phone banner: a short strip like desktop (user: still too long) */
@media (max-width: 720px) {
  .hero.hero--compact { min-height: 260px; padding: 20px 16px 20px; }
  .hero .hero__card--wide { gap: 12px; }
  .hero .hero__card--wide h1 { font-size: 2.25rem; }
  .hero .hero__card--wide h1::after { margin-top: 10px; height: 4px; width: 44px; }
  .hero__ctas .btn { min-height: 46px; font-size: 1rem; }
  .hero__bars { top: 14px; bottom: auto; right: 16px; }
  .hero--compact::after { background: linear-gradient(180deg, rgba(20,35,43,.15) 0%, rgba(20,35,43,.25) 35%, rgba(20,35,43,.88) 100%); }
}


/* =====================================================================
   POLISH PASS (6 Nov 2026): 23 refinements from the research + audit.
   To undo everything: restore styles.css from _backups/2026-11-06-before-polish
   ===================================================================== */
/* ===================== POLISH PASS (6 Nov 2026) — refinement only, no identity change ===================== */
/* P01: yellow buttons no longer turn white (and disappear) on the white bar / light slide panel; white slide button gets an edge */
.bar .btn--small:hover { background: var(--ink); color: #fff; }
.slide__info .btn--yellow:hover, .story-close .btn--yellow:hover { background: var(--ink); color: var(--card); }
.slide__info .btn--white { box-shadow: inset 0 0 0 2px rgba(20, 35, 43, .22); }
.slide__info .btn--white:hover { background: var(--ink); color: #fff; box-shadow: none; }

/* P02: phone icon-only bar button keeps a spoken name (label visually hidden, not display:none) */
@media (max-width: 720px) {
  .bar .btn--wa { position: relative; }
  .bar .btn--wa span { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* P03: menu hover/current underline was yellow-on-white (1.4:1); teal matches the bar's focus ring. Links never wrap. */
.bar nav a::after { background: var(--accent); }
.bar nav a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1200px) {
  .bar nav { gap: 18px; }
  .bar nav a { letter-spacing: .03em; }
}

/* P04: tagline under UHM CARS was 13px on phones (owner rule: 15px minimum) */
@media (max-width: 720px) {
  .wordmark__tag { font-size: var(--step-small); line-height: 1.15; }
  .bar, .bar.bar--solid { gap: 12px; }
}
@media (max-width: 340px) { .wordmark__tag { white-space: normal; } }

/* P05: tabular figures for prices and live values; budget readout has a fixed width so the slider stops shifting */
.car__price, .slide__price, .buy__price, .buy__monthly, .week__tag, .item__v--paid, .herocar__price,
.calc output, .calc__big, .facts__table td, .rep__table td { font-variant-numeric: tabular-nums lining-nums; }
.budget .budget__value output { min-width: 9ch; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.foot__info .js-phone-text { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* P06: car cards — price row never breaks mid-figure, both photo badges share one size, balanced titles, no stuck hover on touch */
.lot .car__price { flex-wrap: wrap; row-gap: 2px; }
.lot .car__price > span { white-space: nowrap; }
.lot .car__name, .herocar__name, .menu__promise { text-wrap: balance; }
p { text-wrap: pretty; }
.lot .car__status, .lot .car__checked {
  top: 14px; padding: 7px 10px;
  font: 700 var(--step-small)/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.lot .car__status { inset-inline-start: 14px; }
.lot .car__checked { inset-inline-end: 14px; }
@media (max-width: 720px) {
  .lot .car__status { top: 8px; inset-inline-start: 8px; padding: 5px 8px; font-size: .9375rem; }
}
@media (hover: none) {
  .lot .car > a:hover .car__tag { transform: none; }
  .car > a:hover img { transform: none; }
}

/* P07: steps — tablet shows 3 + 2 centred with no stray dotted line; phone dotted road re-centred under the 52px icons; no stuck hover on touch */
@media (min-width: 721px) and (max-width: 1080px) {
  .steps--icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps--icons .step { grid-column: span 2; }
  .steps--icons .step:nth-child(4) { grid-column: 2 / span 2; }
  .steps--icons .step:not(:last-child)::after { display: none; }
}
@media (max-width: 720px) {
  .steps--icons .step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .steps--icons .step:not(:last-child)::after { top: 60px; bottom: 6px; left: 24px; }
}
.how__head h2 { font-size: clamp(2.75rem, 1.2rem + 3.6vw, 5rem); }
@media (hover: none) {
  .steps--icons .step:hover .step__icon { transform: none; background: var(--card); color: var(--ink); }
}

/* P08: Car of the week — visible active tab (yellow-on-grey was 1.3:1), no layout jump between tabs, tighter phone spacing, edge alignment, live hover on the yellow button */
.tabs { gap: 24px; border-bottom: 1px solid rgba(20, 35, 43, .14); }
.tabs button {
  font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  padding: 12px 0 10px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tabs button:hover { color: var(--ink); border-bottom-color: rgba(20, 35, 43, .3); }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (min-width: 721px) { .week .pane { min-height: 10.5em; } }
@media (min-width: 1081px) { .week__plate { padding-left: var(--margin); } }
.week__name { font-size: clamp(2rem, 1.2rem + 1.8vw, 3.25rem); line-height: .95; }
.week .cell { transition: background-color .15s var(--ease), transform .15s var(--ease); }
.week .cell:not(.cell--ink):hover { background: #fff; filter: none; }
@media (max-width: 720px) {
  .week__name { font-size: 1.5rem; }
  .week__head { margin-bottom: 0; }
  .week__text { padding: 24px 16px 32px; gap: 20px; }
  .week__report { margin-top: 16px; }
}

/* P09: included sheet — notes smaller than item names, paid values in caps, 'paid' note on its own line, phone padding clears the scallops */
.menu__desc { font-size: var(--step-small); font-weight: 400; color: rgba(20, 35, 43, .78); margin-top: 4px; }
.item__v--paid { text-transform: uppercase; }
@media (min-width: 721px) {
  .menu__group:last-child h3::after { display: block; margin-top: 8px; content: "Paid, only if you choose them"; font: 500 var(--step-small)/1.3 var(--text); text-transform: none; letter-spacing: 0; }
}
@media (max-width: 720px) { .menu__sheet { padding: 34px 18px 32px; } }

/* P10: sell form — visible focus on teal, flat custom select arrow, phone notches removed (they missed the perforation), tidy phone spacing and heights, desktop heading+copy grouped */
.coupon input:focus-visible { outline: 3px solid var(--card); outline-offset: 0; background: #fff; }
.coupon select:focus-visible { outline: 3px solid var(--card); outline-offset: 0; background-color: #fff; }
.coupon__go:focus-visible { outline: 3px solid var(--card); outline-offset: 3px; }
.coupon select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #e3f1f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314232b' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 16px center;
}
@media (min-width: 721px) { .coupon__left { justify-content: center; gap: 18px; padding: 48px; } }
@media (max-width: 720px) {
  .coupon { -webkit-mask: none; mask: none; }
  .coupon__left { gap: 12px; padding: 24px 20px 20px; }
  .coupon__right { padding-top: 20px; }
  .coupon input, .coupon select { height: 50px; }
  .coupon__go { height: 52px; letter-spacing: .01em; }
}

/* P11: teal focus ring is ~2.9:1 on navy; use the brand yellow on dark surfaces */
.foot :focus-visible, .notfound :focus-visible, .calc--page :focus-visible, .story-hero :focus-visible { outline-color: var(--card); }
.dock a:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.dock .dock__call:focus-visible { outline-color: var(--card); }
@media (max-width: 720px) { .hero :focus-visible { outline-color: var(--card); } }

/* P12: dock gets an edge + press feedback; footer drops the empty 56px band (the dock is always hidden over the footer); calmer Visit-us list */
@media (max-width: 720px) {
  .dock { box-shadow: 0 -8px 24px -10px rgba(20, 35, 43, .45); border-top: 1px solid rgba(20, 35, 43, .18); padding-bottom: env(safe-area-inset-bottom); transform: translateY(calc(100% + 28px)); }
  .dock a { letter-spacing: .02em; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
  .dock__wa:active { background: #f2c21f; }
  .dock__call:active { background: #0b171d; }
  .foot { padding-bottom: 0; }
}
.foot__info li, .foot__info a { color: #dfe5e8; font-weight: 400; }
.foot__info a:hover { color: var(--card); }

/* P13: showroom slides — info panel top-aligned with buttons pinned to the bottom (no up/down jump between cars), one 16px inset for overlays, 44px arrow hit area without enlarging the 36px arrows, no stuck yellow after a tap */
@media (max-width: 720px) {
  .slide, .slide.is-on { grid-template-rows: auto 1fr; }
  .slide__info { justify-content: flex-start; }
  .slide__cta { margin-top: auto; padding-top: 4px; }
  .show__arrows { right: 16px; top: calc(100vw * 3.4 / 4 - 52px); }
  .slide__status { top: 16px; left: 16px; }
  .hero__bars { top: 16px; }
}
.show__arrow { position: relative; }
.show__arrow::before { content: ""; position: absolute; inset: -4px -3px; }
@media (hover: none) { .show__arrow:hover { background: rgba(20, 35, 43, .85); color: #fff; } }

/* P14: monthly line sits under the price (style already exists at styles.css:732/1225) */
@media (max-width: 720px) { .slide__price span { margin-top: 4px; font-size: .9375rem; } }

/* P15: 721-960px — the wide card's button column is ~270px; keep 'See the cars in stock' on one line */
@media (min-width: 721px) and (max-width: 960px) {
  .hero__ctas .btn--big { padding: 0 16px; font-size: 1.25rem; white-space: nowrap; }
}

/* P16: inspection report — on phone the check name and its badge share one line (about 1/3 shorter); badges one width; 'Ask us' rows read as a status, not a result */
@media (max-width: 720px) {
  .rep__table tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 0; }
  .rep__table td:last-child { grid-column: 1 / -1; }
}
.rep__res span { min-width: 5.25em; text-align: center; }
.rep__table tr.is-ask .rep__res span { background: transparent; box-shadow: inset 0 0 0 2px rgba(20, 35, 43, .4); }
.rep__table tr.is-ask td:last-child { color: var(--muted); }

/* P17: thumbnails — desktop: fill the main photo's width for any count and wrap if there are many; phone: swipeable single row (~4.5 visible), 4:3 like the main photo */
.gal__thumbs { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.gal__thumb img { aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
  .gal__thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 4.5); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .gal__thumbs::-webkit-scrollbar { display: none; }
  .gal__thumb { scroll-snap-align: start; }
  .gal__thumb:focus-visible { outline-offset: -3px; }
  .gal__more { min-height: 48px; }
}

/* P18: car page — one heading scale, side-by-side headings aligned, no oversized stacked gap, no orphan 'similar' card */
.rep__head h2 { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
@media (min-width: 1081px) {
  .facts__col { padding-top: clamp(24px, 3vw, 40px); }
  .calc--page { position: sticky; top: 24px; }
}
@media (max-width: 1080px) {
  .facts { gap: 32px; }
  .similar .lot .car:nth-child(3) { display: none; }
}
@media (max-width: 720px) {
  .rep__head h2, .facts h2, .calc--page h2, .similar h2 { font-size: 2rem; line-height: .95; letter-spacing: 0; }
  .buy h1 { font-size: 2.25rem; line-height: .95; }
  .buy__price { font-size: 2.5rem; }
}

/* P19: calculator sliders styled like the home budget slider (track + fill + yellow handle), label/slider paired */
.calc--page input[type=range] { --pct: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0 0 10px; background: transparent; cursor: pointer; }
.calc--page input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--card) 0 var(--pct), rgba(255, 255, 255, .2) var(--pct) 100%); }
.calc--page input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.calc--page input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--card); }
.calc--page input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--card); border: 4px solid var(--field); box-shadow: 0 0 0 2px var(--card); }
.calc--page input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 4px solid var(--field); box-shadow: 0 0 0 2px var(--card); }

/* P20: buy card — white button inverts like other white buttons; links on yellow stay navy; wrapped facts hang under their text */
.buy__card .cell--paper:hover { background: var(--ink); color: #fff; }
.buy__card .link:hover, .buy__back:hover { color: var(--ink); text-decoration-thickness: 3px; }
.buy__facts li { padding-inline-start: 22px; text-indent: -22px; }

/* P21: owner's 50px section gap applied to Our story, legal pages and the Not-found panel; phone headings match home's 32px scale; Our story buttons match site buttons; Not-found buttons stay paired at tablet */
.story-vision { padding: var(--gap) var(--margin) 0; }
.story-qa { padding: var(--gap) var(--margin) 0; }
.story-close { padding: var(--gap) var(--margin); }
.doc__main { padding: var(--gap) var(--margin); }
.notfound { margin: var(--gap) 0; }
.qa__btn { justify-content: center; font: 700 var(--step-body)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; transition: background-color .18s var(--ease), transform .18s var(--ease); }
.qa__btn:active { transform: scale(.97); }
@media (min-width: 721px) and (max-width: 860px) {
  .notfound__actions { flex-direction: row; }
  .notfound__btn { flex: 1 1 0; width: auto; }
}
@media (max-width: 720px) {
  .story-hero__text h1, .doc__main h1 { font-size: 2.25rem; line-height: .95; }
  .story-vision h2, .reviews__head h2 { font-size: 2rem; line-height: .95; letter-spacing: 0; }
  .qa__card h2 { font-size: 1.5rem; }
  .story-hero { min-height: 0; }
  .story-hero__text { margin-left: 0; padding: 40px 16px; }
}

/* P22: reduced-motion visitors see the first hero photo held still; normal visitors unchanged */
@media (prefers-reduced-motion: reduce) { .hero__bars { display: none; } }

/* P23: fade-ins start before content reaches the screen and are shorter/subtler, so sections never look empty while scrolling */
.js .reveal-item { transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0ms); }