/* ==========================================================================
   Trade Classics — Sell a Classic Car
   Design tokens per handoff README (design_handoff_sell_page/README.md)
   ========================================================================== */

:root {
  --yellow: #ffbe35;
  --graphite: #2f3335;
  --graphite-dark: #23272a;
  --footer-dark: #1c2022;
  --gradient-top: #40474a;

  --brass: #c8933b;
  --brass-light: #e0b976;
  --on-brass: #16110a;

  --cream: #f3eee3;
  --cream-85: rgba(243, 238, 227, 0.85);
  --cream-82: rgba(243, 238, 227, 0.82);
  --cream-72: rgba(243, 238, 227, 0.72);
  --cream-65: rgba(243, 238, 227, 0.65);
  --cream-62: rgba(243, 238, 227, 0.62);
  --cream-55: rgba(243, 238, 227, 0.55);
  --cream-50: rgba(243, 238, 227, 0.5);
  --cream-16: rgba(243, 238, 227, 0.16);
  --cream-14: rgba(243, 238, 227, 0.14);
  --cream-08: rgba(243, 238, 227, 0.08);
  --cream-07: rgba(243, 238, 227, 0.07);

  --max: 1140px;
  --side-pad: 56px;

  --font-display: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--graphite);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

::selection { background: var(--brass); color: var(--graphite-dark); }

input, button { font-family: inherit; }
input::placeholder { color: rgba(243, 238, 227, 0.45); }

.serif-tight { letter-spacing: -0.015em; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn--outline {
  border: 1px solid rgba(243, 238, 227, 0.45);
  color: var(--cream);
  background: transparent;
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn--outline:hover { background: var(--yellow); color: var(--graphite); border-color: var(--yellow); }

.btn--brass {
  background: var(--brass);
  color: var(--on-brass);
  border-radius: 100px;
  font-size: 15px;
}
.btn--brass:hover { background: var(--brass-light); }

.btn--lg { padding: 16px 40px; font-size: 16px; }
.btn--block { width: 100%; }

.link-underline {
  font-size: 15px;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { position: relative; z-index: 100; }

.header-band {
  background: var(--yellow);
  padding: calc(34px + env(safe-area-inset-top, 0px)) var(--side-pad) 34px;
  display: flex;
  justify-content: center;
}
.header-band__logo { height: 46px; width: auto; }

.header-nav {
  background: var(--graphite);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s ease;
}
.header-nav.is-scrolled {
  background: var(--yellow);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.header-nav.is-scrolled .header-nav__links a,
.header-nav.is-scrolled .header-nav__links a.is-active,
.header-nav.is-scrolled .header-nav__phone {
  color: var(--graphite);
  border-bottom-color: var(--graphite);
}
.header-nav.is-scrolled .btn--outline {
  border-color: var(--graphite);
  color: var(--graphite);
}
.header-nav.is-scrolled .btn--outline:hover {
  background: var(--graphite);
  color: var(--yellow);
  border-color: var(--graphite);
}

.header-nav__inner {
  /* Kept at the original width — this bar's spacing was hand-tuned for it,
     so it stays unchanged even as the site's shared content width narrows. */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 calc(var(--side-pad) - 24px) 0 var(--side-pad);
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.header-nav__logo-link {
  display: none;
  grid-column: 1;
  justify-self: start;
}
.header-nav__logo-compact {
  height: 18px;
  width: auto;
}
.header-nav.is-scrolled .header-nav__logo-link { display: block; }
.header-nav.is-scrolled .header-nav__logo-compact {
  height: 26px;
}

.header-nav__phone {
  font-size: 15px;
  color: var(--cream-85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-nav__phone-mobile { display: none; }

.header-nav__links {
  display: flex;
  gap: 30px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  grid-column: 2;
  justify-self: center;
}
.header-nav__links a { color: var(--cream-85); }
.header-nav__links a.is-active {
  color: var(--yellow);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 4px;
}

.header-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  grid-column: 3;
  justify-self: end;
}
.header-nav__register {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-85);
}

.header-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  justify-self: end;
}
.header-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.header-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 18px;
  background: var(--graphite-dark);
  padding: 22px var(--side-pad) 28px;
  border-top: 1px solid var(--cream-08);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__phone { font-size: 14px; color: var(--cream-72); }
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mobile-menu__links a { color: var(--cream-85); }
.mobile-menu__links a.is-active { color: var(--yellow); }
.mobile-menu__register { font-size: 14px; color: var(--cream-85); text-transform: uppercase; letter-spacing: 0.06em; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--side-pad);
  overflow: hidden;
  background: linear-gradient(160deg, var(--gradient-top), var(--graphite));
}

/* True full-bleed — no width cap needed. These photos (sourced from the
   live homepage hero rotation) have calm/empty space on both the left
   (for text) and right (for the card) with no people in frame, so there's
   no "covers a face" risk for object-fit:cover's crop to drift into at any
   window width.
   .hero__visual wraps the media + scrim so mobile can turn it into a
   normal-flow, fixed-height band (see the 1399px query) instead of a
   full-bleed background stretched behind the whole stacked mobile layout —
   without this, the very tall mobile hero forces object-fit:cover to zoom
   in so far that the car itself is cropped out of frame entirely. */
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% center;
  transform: scale(1.08) translateX(-45px);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__media-img--aston {
  /* Same effective shift as before (95px * 1.1 ≈ 104.5px actual), just with
     more overhang (1.3x zoom instead of 1.1x) so the image still fully
     covers the section on very wide windows instead of leaving a gap on
     the right — car position on screen is unchanged. */
  transform: scale(1.15) translateX(-90.9px);
}
.hero__media-img.is-active {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(22,25,27,0.5) 0%, rgba(22,25,27,0.1) 42%, rgba(22,25,27,0) 70%),
    rgba(22,25,27,0.08);
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* Deliberately NOT var(--max) — the valuation card below is pixel-positioned
     against this container's width (see the 1399px breakpoint note), so this
     stays full-bleed/unchanged even as the site's shared content width narrows. */
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

.hero__content {
  min-height: 470px;
  display: flex;
  align-items: center;
}

.hero__copy { max-width: 660px; }

.hero__headline {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45);
}
.hero__headline span { display: block; }
.hero__headline--muted {
  font-style: italic;
  font-weight: 500;
  color: rgba(243, 238, 227, 0.5);
}

.hero__sub {
  margin-top: 28px;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-82);
}
.hero__sub--mobile { display: none; }

.rating {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.rating--mobile { display: none; }
.rating--pagebottom { display: none; }
.rating__score {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--brass-light);
  line-height: 1;
}
.rating__meta { display: flex; flex-direction: column; }
.rating__stars { letter-spacing: 3px; color: var(--brass); font-size: 15px; }
.rating__label { font-size: 14px; color: var(--cream-65); }

/* Hero CTA — small hairline link with an animated chevron, sitting above
   the mobile rating badge (mobile-only; desktop hero is untouched). */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(224, 185, 118, 0.8);
  color: var(--brass-light);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  gap: 16px;
  color: var(--cream);
  border-color: var(--cream);
}
.hero-cta__chevron {
  font-size: 18px;
  letter-spacing: 0;
  animation: heroCtaBounce 1.8s ease-in-out infinite;
}
@keyframes heroCtaBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta__chevron { animation: none; }
}
.hero-cta--mobile { display: none; }
.hero-cta--pagebottom { display: none; }
.hero-bottom-group { display: none; }

/* Used on the About / Sold / How It Works heroes, alongside the page's
   original big brass button — this small link only replaces that button
   on mobile (see .page-hero__actions rules), desktop keeps the big button. */
.hero-cta--page { display: none; }

/* Used on the About / Sold / How It Works heroes in place of .hero-cta__chevron
   (those pages don't have a form sitting directly below to point at) — a
   slow white-to-brass color cycle draws the eye instead. */
.hero-cta--glow {
  animation: heroCtaGlow 2.4s ease-in-out infinite;
}
@keyframes heroCtaGlow {
  0%, 100% { color: var(--cream); }
  50% { color: var(--brass-light); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta--glow { animation: none; color: var(--brass-light); }
}

/* Valuation card ---------------------------------------------------------- */

.valuation-card {
  position: absolute;
  left: 985px;
  top: 26px;
  width: 380px;
  scroll-margin-top: 76px;
  background: rgba(12, 32, 30, 0.46);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(243, 238, 227, 0.22);
  border-radius: 28px;
  padding: 30px 28px 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: riseIn 0.9s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.valuation-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
}
.valuation-card__sub {
  font-size: 14px;
  color: var(--cream-62);
  margin-top: 8px;
  line-height: 1.5;
}

#valuationForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}
.valuation-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.valuation-card__row--3 {
  grid-template-columns: 1fr 1fr 0.8fr;
}
.valuation-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.valuation-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-50);
}
.valuation-card input,
.valuation-card select {
  background: var(--cream-07);
  border: 1px solid var(--cream-14);
  border-radius: 12px;
  padding: 13px 14px;
  height: 48px;
  color: var(--cream);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.2;
  min-width: 0;
  width: 100%;
}
.valuation-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23f3eee3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.valuation-card select option {
  background: #16342f;
  color: var(--cream);
}
.valuation-card select:invalid,
.valuation-card select option[value=""] {
  color: #9a938a;
}
.valuation-card input::placeholder {
  color: rgba(243, 238, 227, 0.4);
}

.autocomplete-field { position: relative; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  background: #16342f;
  border: 1px solid var(--cream-14);
  border-radius: 12px;
  padding: 6px;
  list-style: none;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.autocomplete-list[hidden] { display: none; }
.autocomplete-option {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--cream);
  cursor: pointer;
}
.autocomplete-option:hover,
.autocomplete-option.is-active {
  background: var(--cream-07);
}
.valuation-card input:focus,
.valuation-card select:focus {
  outline: none;
  border-color: var(--brass);
}
.valuation-card .btn--brass {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
}

.valuation-card__reassurance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--cream-50);
}
.valuation-card__reassurance span { color: var(--brass); }
.valuation-card__error {
  margin-top: 12px;
  font-size: 13px;
  color: #e2685a;
}

.valuation-card__done-state { text-align: center; padding: 40px 6px; animation: riseIn 0.5s cubic-bezier(.2,.7,.2,1) both; }
.valuation-card__badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--graphite-dark);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.valuation-card__done-copy {
  font-size: 15px;
  color: var(--cream-72);
  margin-top: 10px;
  line-height: 1.55;
}

/* ==========================================================================
   Trust stat bar
   ========================================================================== */

.stats {
  background: var(--graphite-dark);
  padding: 44px var(--side-pad);
  border-top: 1px solid var(--cream-08);
}
.stats__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.stat__big {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  color: var(--brass-light);
  line-height: 1;
}
.stat__label {
  font-size: 15px;
  color: var(--cream-72);
  margin-top: 8px;
  line-height: 1.5;
}

/* ==========================================================================
   Selling made easy
   ========================================================================== */

.benefits { padding: 120px var(--side-pad); }
.benefits__inner { max-width: var(--max); margin: 0 auto; }
.benefits .eyebrow { margin-bottom: 16px; }
.benefits__heading {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.02;
  max-width: 760px;
  margin-bottom: 60px;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.benefit { border-top: 1px solid var(--cream-16); padding-top: 22px; }
.benefit__num {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 16px;
}
.benefit__title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  margin-bottom: 12px;
}
.benefit__body { font-size: 16px; line-height: 1.6; color: var(--cream-72); }

/* ==========================================================================
   How it works
   ========================================================================== */

.howto { padding: 120px var(--side-pad); }
.howto__inner { max-width: var(--max); margin: 0 auto; }
.howto .eyebrow { margin-bottom: 16px; }
.howto__heading {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.05;
  max-width: 760px;
  margin-bottom: 56px;
}
.howto__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.howto-step { border-top: 1px solid var(--cream-16); padding-top: 22px; }
.howto-step__num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 16px;
}
.howto-step__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 12px;
}
.howto-step__body { font-size: 15px; line-height: 1.6; color: var(--cream-72); }

.howto-note { padding: 0 var(--side-pad) 110px; background: var(--graphite); }
.howto-note__inner { max-width: 780px; margin: 0 auto; }
.howto-note .eyebrow { display: block; text-align: center; margin-bottom: 20px; }
.howto-note__list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.howto-note__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-72);
}
.howto-note__list li span { color: var(--brass); flex-shrink: 0; margin-top: 2px; }

.howto-faq { padding: 110px var(--side-pad); background: var(--graphite-dark); }
.howto-faq__inner { max-width: 820px; margin: 0 auto; }
.howto-faq .eyebrow { display: block; text-align: center; margin-bottom: 16px; }
.howto-faq__heading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 48px;
}
.faq-item { border-bottom: 1px solid var(--cream-16); padding: 22px 0; }
.faq-item:first-of-type { border-top: 1px solid var(--cream-16); }
.faq-item__q {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item__q::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--brass);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item.is-open .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream-72);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.is-open .faq-item__a { max-height: 240px; margin-top: 14px; }

/* ==========================================================================
   Recently sold
   ========================================================================== */

.sold { background: var(--graphite-dark); padding: 110px var(--side-pad); }
.sold__inner { max-width: var(--max); margin: 0 auto; }
.sold__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 20px;
}
.sold__heading { font-family: var(--font-display); font-size: 48px; font-weight: 500; }

.sold__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sold-card { display: block; color: var(--cream); }
.sold-card[hidden] { display: none; }
.sold-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gradient-top);
}
.sold-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sold-card__pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(22, 25, 27, 0.82);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brass-light);
}
.sold-card__title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  margin-top: 14px;
}
.sold-card__caption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream-65);
}

.sold-filter { display: flex; flex-direction: column; gap: 6px; }
.sold-filter__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-55);
}
.sold-filter select {
  background: var(--cream-07);
  border: 1px solid var(--cream-14);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--cream);
  font-size: 14px;
  min-width: 220px;
  cursor: pointer;
}
.sold-filter select:focus { outline: none; border-color: var(--brass); }

.sold-listing__more { display: flex; justify-content: center; margin-top: 56px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.reviews { padding: 110px var(--side-pad); }
.reviews__inner { max-width: var(--max); margin: 0 auto; }
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.reviews__heading { font-family: var(--font-display); font-size: 40px; font-weight: 500; margin-top: 12px; }
.reviews__trustpilot { display: flex; align-items: center; gap: 14px; color: var(--cream); }
.reviews__trustpilot-score { font-family: var(--font-display); font-size: 32px; font-weight: 600; }
.reviews__trustpilot-meta { font-size: 13px; color: var(--cream-65); line-height: 1.5; }
.reviews__trustpilot-meta .rating__stars { color: var(--brass); letter-spacing: 2px; font-size: 14px; }

.review-carousel { position: relative; max-width: 760px; margin: 0 auto; }
.review-carousel__track { min-height: 200px; display: flex; align-items: center; }
.review-slide { display: none; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.review-slide.is-active { display: flex; animation: reviewIn 0.45s ease; }
@keyframes reviewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.review-slide .review__stars { letter-spacing: 3px; color: var(--brass); font-size: 15px; margin-bottom: 20px; }
.review-slide blockquote {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 640px;
}
.review-slide figcaption { margin-top: 22px; font-size: 14px; color: var(--cream-65); }

.review-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }
.review-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cream-16);
  background: transparent;
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.review-carousel__arrow:hover { border-color: var(--brass); color: var(--brass-light); }
.review-carousel__dots { display: flex; align-items: center; gap: 8px; }
.review-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--cream-16);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.review-carousel__dot.is-active { background: var(--brass); transform: scale(1.3); }

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px var(--side-pad);
  overflow: hidden;
}
.final-cta__media { position: absolute; inset: 0; z-index: 0; }
.final-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (max-width: 900px) {
  .final-cta { min-height: 480px; }
  .final-cta__media img { object-position: 15% 42%; }
}
.final-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(22,25,27,0.9), rgba(22,25,27,0.6));
}
.final-cta__inner { position: relative; z-index: 2; max-width: 640px; }
.final-cta__inner h2 {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  line-height: 1.02;
}
.final-cta__inner p {
  margin: 20px auto 0;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-82);
}
.final-cta__inner .btn { margin-top: 32px; }

/* ==========================================================================
   About page
   ========================================================================== */

.page-hero {
  position: relative;
  /* Shared across About / Recently Sold / How It Works so all three read as
     the same size — tall enough that none of their copy needs to grow
     past it. (The homepage's own .hero is a separate component, untouched.) */
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  padding: var(--side-pad);
  padding-bottom: 72px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--gradient-top), var(--graphite));
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-hero--howto .page-hero__media img { object-position: 65% center; }
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(22,25,27,0.92) 0%, rgba(22,25,27,0.55) 55%, rgba(22,25,27,0.15) 100%);
}
/* Lighter than the shared default — the About page photo was reading as
   too dull/dark under the standard scrim. */
.page-hero--about .page-hero__scrim {
  background: linear-gradient(0deg, rgba(22,25,27,0.68) 0%, rgba(22,25,27,0.32) 55%, rgba(22,25,27,0.06) 100%);
}
.page-hero--howto .page-hero__scrim {
  background: linear-gradient(0deg, rgba(22,25,27,0.72) 0%, rgba(22,25,27,0.32) 55%, rgba(22,25,27,0.06) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  /* Kept at the site's original width, not the narrower shared --max —
     photo heroes stay exactly as they were. */
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}
.page-hero__headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.01em;
  max-width: 760px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45);
}
/* Two hand-authored versions of the same headline text: the desktop one
   wraps naturally, the mobile one is broken into fixed lines (matching the
   homepage hero's own hard-coded two-span headline) so the line breaks are
   guaranteed regardless of device width, instead of depending on text
   reflow at a given font-size/viewport combination. */
.page-hero__headline-mobile { display: none; }
.page-hero__sub {
  margin-top: 22px;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-82);
}
.page-hero__sub--mobile { display: none; }
.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.rating--hero { margin-top: 40px; }

/* Our story */
.our-story { padding: 120px var(--side-pad); background: var(--graphite-dark); }
.our-story__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 420px 1fr; gap: 80px; }
.our-story .eyebrow { margin-bottom: 16px; }
.our-story__heading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
}
.our-story__body { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.our-story__body p { font-size: 17px; line-height: 1.7; color: var(--cream-72); }

/* Team cards — translucent surface reads consistently on both the
   default graphite background and the darker graphite-dark sections. */
.team, .consignment { padding: 110px var(--side-pad); }
.team__inner, .consignment__inner { max-width: var(--max); margin: 0 auto; }
.team .eyebrow, .consignment .eyebrow { margin-bottom: 16px; }
.team__heading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 48px;
}
.team .eyebrow, .team .team__heading { text-align: center; }
.consignment { background: var(--graphite-dark); }
.consignment .eyebrow { text-align: center; }
.consignment .team__heading { text-align: center; }
.consignment__intro {
  margin: -32px auto 44px;
  max-width: 560px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-72);
}

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

.team__grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 980px;
  margin: 0 auto;
  gap: 28px;
}

.consignment__grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}

.team-card {
  background: var(--cream-07);
  border: 1px solid var(--cream-14);
  border-radius: 18px;
  padding: 40px;
}
.team-card--lead {
  background: var(--yellow);
  border-color: var(--yellow);
}
.team-card__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 22px;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
}
.team-card--lead .team-card__name { color: var(--graphite-dark); }
.team-card__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-top: 6px;
}
.team-card--lead .team-card__role { color: var(--graphite-dark); opacity: 0.65; }
.team-card__bio {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream-72);
}
.team-card--lead .team-card__bio { color: rgba(35,39,42,0.82); }

.team-card--compact { padding: 36px; }
.team-card--compact .team-card__photo { width: 68px; height: 68px; margin-bottom: 20px; }
.team-card--compact .team-card__name { font-size: 18px; }
.team-card--compact .team-card__role { font-size: 12px; margin-top: 4px; }
.team-card--compact .team-card__bio { font-size: 15px; line-height: 1.65; margin-top: 12px; }

@media (max-width: 980px) {
  .our-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .team__grid, .consignment__grid { grid-template-columns: repeat(2, 1fr); }
  .howto__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Same fix as the homepage hero: a photo this wide (landscape, people off
     to one side) gets crushed into an unreadable sliver if object-fit:cover
     has to fill a tall, flex-stacked mobile section. The photo is pinned
     full-bleed (inset:0) behind the copy instead, and the SECTION'S height
     is left to the copy's natural flow — so the photo (which just matches
     whatever height the section ends up being) can never fall short of it
     by a stray pixel the way two independently-sized siblings can. */
  .page-hero {
    min-height: 496px;
    display: block;
    padding: 0;
  }
  .page-hero__sub { display: none; }
  .page-hero__sub--mobile {
    display: block;
    margin: 24px var(--side-pad);
  }
  /* On these hero pages, the small hero-cta link replaces the big brass
     button on mobile only — desktop keeps showing the original button. */
  .page-hero__actions .btn.btn--brass.btn--lg { display: none; }
  /* The inline hero-cta--page link is superseded on mobile by the
     absolutely-positioned .hero-cta--pagebottom sibling below (mirrors
     .hero-cta--mobile on the homepage hero), so it stays hidden here. */
  .page-hero__actions .hero-cta--page { display: none; }

  /* Same treatment as .hero__copy on the homepage hero: the text-flow
     container becomes a flex column centering just the headline in the
     space above the absolutely-positioned CTA/rating overlaid on the
     photo, and .rating--hero (the inline desktop rating) is hidden since
     .rating--pagebottom replaces it visually on mobile. */
  .page-hero__inner .rating--hero { display: none; }
  .page-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 496px;
    box-sizing: border-box;
    padding: 32px var(--side-pad) 213px;
    pointer-events: none;
  }
  /* .page-hero__inner is now mostly empty space around the headline, so
     without this it silently blocks clicks from reaching the CTA/rating
     underneath. The actions row (with the still-visible outline button
     on About/Sold) needs its own clickability restored. */
  .page-hero__actions { pointer-events: auto; }
  .hero-cta--pagebottom { display: inline-flex; }
  .rating--pagebottom { display: flex; align-self: stretch; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
  .hero-bottom-group--page .rating--pagebottom { margin-top: 0; }
  .hero-bottom-group--page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    left: var(--side-pad);
    right: var(--side-pad);
    bottom: 28px;
    z-index: 2;
  }
  .page-hero__media {
    position: absolute;
    inset: 0;
  }
  .page-hero__media img { object-position: 65% center; }
  .page-hero__scrim {
    background:
      linear-gradient(0deg, rgba(22,25,27,0.85) 0%, rgba(22,25,27,0.35) 55%, rgba(22,25,27,0.05) 100%);
  }
  .page-hero--about .page-hero__scrim {
    background:
      linear-gradient(0deg, rgba(22,25,27,0.62) 0%, rgba(22,25,27,0.25) 55%, rgba(22,25,27,0.04) 100%);
  }
  .page-hero__headline { font-size: clamp(36px, 10vw, 48px); }
  .page-hero__headline-full { display: none; }
  .page-hero__headline-mobile { display: block; }
  .page-hero__headline-mobile span { display: block; }
  .our-story, .team, .consignment { padding: 72px var(--side-pad); }
  .our-story__heading { font-size: 30px; }

  /* The sold-vehicles car sits further right in its source photo than the
     about-page team photo, so it needs its own crop position to keep the
     nose recognizable while the copy still sits over the hedge/background. */
  .page-hero--sold .page-hero__media img { object-position: 60% center; }
  .page-hero--howto .page-hero__media img { object-position: 72% center; }
  .page-hero--howto .page-hero__scrim {
    background:
      linear-gradient(0deg, rgba(22,25,27,0.7) 0%, rgba(22,25,27,0.3) 55%, rgba(22,25,27,0.05) 100%);
  }

  .howto, .howto-note, .howto-faq { padding: 72px var(--side-pad); }
  .howto__heading, .howto-faq__heading { font-size: 32px; }
}

@media (max-width: 560px) {
  .team__grid, .consignment__grid { grid-template-columns: 1fr; }
  .howto__grid { grid-template-columns: 1fr; }
  .page-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Consultation page
   ========================================================================== */

.consult-hero {
  background: var(--graphite);
  padding: 120px var(--side-pad);
}
.consult-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  align-items: start;
}
.consult-hero__headline {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  margin-top: 16px;
  max-width: 560px;
}
.consult-hero__sub {
  margin-top: 24px;
  max-width: 480px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cream-82);
}
.consult-hero__points {
  list-style: none;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.consult-hero__points li {
  font-size: 15px;
  color: var(--cream-72);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.consult-hero__points span { color: var(--brass); }

.consult-card {
  position: static;
  width: 100%;
  max-width: 460px;
}
.consult-card__done-state {
  text-align: center;
  padding: 40px 6px;
  animation: riseIn 0.5s cubic-bezier(.2,.7,.2,1) both;
}

.valuation-card textarea {
  background: var(--cream-07);
  border: 1px solid var(--cream-14);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--cream);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 90px;
  width: 100%;
}
.valuation-card textarea::placeholder { color: rgba(243, 238, 227, 0.4); }
.valuation-card textarea:focus { outline: none; border-color: var(--brass); }

@media (max-width: 1100px) {
  .consult-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .consult-card { max-width: 100%; }
}

@media (max-width: 640px) {
  .consult-hero { padding: 72px var(--side-pad); }
  .consult-hero__headline { font-size: 36px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--yellow); color: var(--graphite-dark); padding: 64px var(--side-pad) 0; }
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer__brand { max-width: 320px; }
.site-footer__logo { height: 32px; width: auto; }
.site-footer__brand p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: rgba(35, 39, 42, 0.75); }

.site-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(35, 39, 42, 0.25);
  color: var(--graphite-dark);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-footer__social a:hover { background: var(--graphite-dark); color: var(--yellow); border-color: var(--graphite-dark); }

.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(35, 39, 42, 0.55);
  margin-bottom: 4px;
}
.site-footer__col a, .site-footer__col span {
  font-size: 14px;
  color: var(--graphite-dark);
}
.site-footer__col a { transition: opacity 0.15s ease; }
.site-footer__col a:hover { opacity: 0.6; }
.site-footer__address { color: rgba(35, 39, 42, 0.75); line-height: 1.5; }

.site-footer__bottom {
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(35, 39, 42, 0.2);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: rgba(35, 39, 42, 0.65);
  flex-wrap: wrap;
}
.site-footer__legal-links { display: flex; align-items: center; gap: 20px; }
.site-footer__legal-links a {
  color: rgba(35, 39, 42, 0.65);
  text-decoration: underline;
  text-decoration-color: rgba(35, 39, 42, 0.3);
}
.site-footer__legal-links a:hover { color: var(--graphite-dark); }

/* ==========================================================================
   Legal pages (Terms & Conditions / Privacy Policy)
   ========================================================================== */

.legal { padding: 160px var(--side-pad) 100px; }
.legal__inner { max-width: 720px; margin: 0 auto; }
.legal__inner .eyebrow { margin-bottom: 14px; }
.legal__title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
}
.legal__updated { margin-top: 12px; font-size: 14px; color: var(--cream-55); }
.legal__body { margin-top: 48px; }
.legal__body h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--brass-light);
  letter-spacing: 0.01em;
  margin: 52px 0 16px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
  margin: 34px 0 12px;
}
.legal__body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-72);
  margin-bottom: 14px;
}
.legal__body strong { color: var(--cream); font-weight: 700; }

@media (max-width: 900px) {
  .legal { padding: 140px var(--side-pad) 72px; }
  .legal__title { font-size: 32px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .benefits__heading { font-size: clamp(38px, 5vw, 56px); }
  .sold__heading { font-size: clamp(34px, 4.5vw, 48px); }
  .final-cta__inner h2 { font-size: clamp(38px, 6vw, 60px); }
}

@media (max-width: 980px) {
  .sold__grid { grid-template-columns: repeat(2, 1fr); }
}

/* The fixed left:1055/top:230/width:295 card (see hero-valuation-card.css)
   needs the 1320px content box to have ~30px of clearance to its right
   before `.hero`'s overflow:hidden starts clipping it — that only holds
   once the viewport is genuinely wide enough. Below 1400px, fall back to
   normal-flow stacking instead. */
@media (max-width: 1399px) {
  .hero {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 40px;
  }
  .hero__content {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }
  /* .hero__copy's max-width stays 660px at every width down to 900px (only
     the side padding shrinks below that), so above ~1000px viewport the old
     unbounded clamp(...,92px) plateaued at 92px the entire way up to 1399px
     — wide enough for both headline spans to wrap onto 2 sub-lines each,
     overflowing the fixed-height box below. Capping at 80px keeps every
     width in this range to at most 3 wrapped lines, which fits. */
  .hero__headline { font-size: clamp(56px, 8vw, 72px); }
  .hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 428px;
    padding-bottom: 177px;
    box-sizing: border-box;
    margin-top: 0;
  }
  /* .hero__inner sits in a higher stacking context (via .hero__inner's own
     z-index:2) than the CTA/rating overlaid on the photo below (z-index:2
     but inside .hero__visual, a lower z-index:0 context) — its own box is
     mostly empty space around the headline, so without this it silently
     blocks clicks from ever reaching the CTA underneath. Only the form
     itself needs pointer events back. */
  .hero__inner { pointer-events: none; }
  .valuation-card { pointer-events: auto; }
  .hero__copy .hero__sub { display: none; }
  .hero__copy .rating { display: none; }
  .hero-cta--mobile { display: inline-flex; }
  .rating--mobile { display: flex; align-self: stretch; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
  .hero-bottom-group--home .rating--mobile { margin-top: 0; }
  .hero-bottom-group--home {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    left: var(--side-pad);
    right: var(--side-pad);
    bottom: 28px;
    z-index: 2;
  }
  .hero__sub--mobile {
    display: block;
    max-width: none;
    margin: 16px 0 4px;
  }
  .valuation-card {
    position: static;
    left: auto;
    top: auto;
    width: calc(100% + 48px);
    max-width: none;
    margin: 16px -24px 0;
    box-sizing: border-box;
  }
  /* iOS Safari auto-zooms the whole page on focus for any input/select
     under 16px — that's the "page jumps/won't stay put" bug when tapping
     the form. Keeping these at 16px+ on mobile prevents it. */
  .valuation-card input,
  .valuation-card select,
  .valuation-card textarea,
  .autocomplete-option {
    font-size: 16px;
  }

  /* Give the photo its own normal-flow, landscape-ish height instead of a
     background stretched behind the whole (very tall, stacked) hero —
     otherwise object-fit:cover has to zoom in so far to cover that height
     that the car crops out of frame entirely. Break out of .hero's own
     horizontal padding so it still reads edge to edge, and out the top
     padding so it's flush with the header above. */
  .hero__visual {
    position: relative;
    inset: auto;
    height: 460px;
    margin: calc(-1 * var(--side-pad)) calc(-1 * var(--side-pad)) 0;
    width: calc(100% + (2 * var(--side-pad)));
  }
  .hero__media-img,
  .hero__media-img--aston {
    transform: none;
    object-position: 78% center;
  }
  /* Pull the headline back up to overlay the photo band (left-aligned,
     matching desktop) instead of sitting below it — the left-heavy scrim
     below keeps it legible while leaving the car clear on the right. The
     valuation card, further down inside .hero__inner, isn't tall enough
     itself to need special treatment; it simply flows naturally onto the
     solid background right after the copy block ends. */
  .hero__inner { margin-top: calc(var(--side-pad) - 460px); }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(22,25,27,0.78) 0%, rgba(22,25,27,0.4) 50%, rgba(22,25,27,0.08) 100%),
      linear-gradient(0deg, rgba(22,25,27,0.5) 0%, rgba(22,25,27,0.05) 60%);
  }
}

@media (max-width: 560px) {
  .valuation-card__row--3 {
    grid-template-columns: 1fr 1fr;
  }
  .valuation-card__row--3 .valuation-card__field:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  :root { --side-pad: 32px; }

  .header-nav__links,
  .header-nav__actions { display: none; }
  .header-nav__burger { display: flex; }
  .header-nav__inner { grid-template-columns: 1fr auto; }
  .header-nav__phone-mobile {
    display: block;
    grid-column: 1;
    justify-self: start;
    font-size: 15px;
    color: var(--cream-72);
    letter-spacing: 0.02em;
  }
  .header-nav.is-scrolled .header-nav__phone-mobile { display: none; }

  .benefits__grid,
  .stats__inner { grid-template-columns: 1fr; gap: 36px; }

  .benefits, .sold, .reviews { padding: 80px var(--side-pad); }
  .reviews__head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .sold__grid { grid-template-columns: 1fr; }
  .sold__head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; max-width: none; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero__headline { font-size: clamp(38px, 12vw, 50px); }
  .hero__sub { font-size: 16px; margin-top: 16px; }
  .hero__sub--mobile { font-size: 16px; margin-top: 16px; }
  .rating { margin-top: 20px; }
  .rating__score { font-size: 32px; }
  .benefits__heading { font-size: 30px; }
  .sold__heading { font-size: 30px; }
  .final-cta__inner h2 { font-size: 32px; }
  .review-slide blockquote { font-size: 21px; }
  .reviews__heading { font-size: 30px; }
  .header-band__logo { height: 36px; }
  .stat__big { font-size: 36px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
}

/* Large external monitors (2560px+): the hero sections were tuned around a
   ~1440px viewport, so their fixed padding/min-height reads as a thin,
   squished band once the window is much wider. Each hero already centers
   its own content in an inner max-width wrapper (.hero__inner,
   .page-hero__inner, .consult-hero__inner all cap out well under 1440px),
   so only extra vertical breathing room is needed here — adding horizontal
   padding too would just double up on that existing centering. */
@media (min-width: 1441px) {
  .hero {
    padding-top: 130px;
    padding-bottom: 150px;
  }
  .page-hero {
    padding-top: 130px;
    padding-bottom: 160px;
  }
  .consult-hero {
    padding-top: 160px;
    padding-bottom: 180px;
  }
}