/* ==========================================================================
   KARVIO — shared stylesheet
   Design system per CLAUDE.md §4, calibrated against the reference captures
   in reference/mobile/*.png and reference/desktop/desktop-full-page.pdf.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Canvas — the reference reads as a warm charcoal-black, with alternating
     section bands a shade apart from each other rather than one flat colour. */
  --canvas:          #0d0d0d;
  --canvas-raised:   #111111;
  --canvas-panel:    #0f0f0f;

  /* Ink */
  --ink:             #ffffff;
  --body:            #9a9a9a;
  --muted:           #6a6a6a;

  /* Gold. Two values: the eyebrow/hairline gold is deeper than the fill gold
     used on buttons — confirmed off IMG_5147 (GET MY OFFER) vs the eyebrows. */
  --gold:            #c9a961;
  --gold-bright:     #d4b878;
  --gold-fill:       #dfc68d;
  --gold-ink:        #14110b; /* dark text sitting on a gold fill */

  /* WhatsApp brand green — the floating dock only. Deliberately outside the
     gold-only palette (departs from CLAUDE.md §12), by request. */
  --wa-green:        #25d366;
  --wa-green-dark:   #1da851; /* hover */

  /* Hairlines — quiet, low contrast against the canvas */
  --line:            rgba(255, 255, 255, 0.10);
  --line-soft:       rgba(255, 255, 255, 0.06);
  --line-gold:       rgba(201, 169, 97, 0.30);

  /* Type */
  --serif:  "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:   "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Helvetica, Arial, sans-serif;

  /* Rhythm */
  /* Motion — custom curves; the CSS built-ins are too weak to read as
     deliberate. --expo is the curve already inlined in the preloader and
     carousel; it now has a name. Never use ease-in on UI: it delays the
     first frame, which is exactly the frame the eye is on. */
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
  --expo:            cubic-bezier(0.16, 1, 0.30, 1);

  --dur-press:       140ms;  /* button press feedback   */
  --dur-hover:       220ms;  /* colour / hairline shifts */
  --dur-ui:          260ms;  /* focus, nav state         */
  --slow:            1150ms; /* section reveal           */

  --gutter:          24px;
  /* Measured off the desktop PDF: content spans ~1084px inside a 1440
     viewport, i.e. a noticeably narrower column than a default 1280 shell. */
  --measure:         1160px;
  --section-y:       clamp(80px, 12vw, 160px);
  --nav-h:           72px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button,
input {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;      /* regular even at hero sizes — CLAUDE.md §4 */
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

p { margin: 0; }

::selection {
  background: var(--gold);
  color: var(--gold-ink);
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
}

.section--raised { background: var(--canvas-raised); }

/* Small title — sans, used by the wordmark carousel's static fallback list */
.title-sm {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08px;
  color: var(--ink);
  margin: 0;
}

/* Eyebrow — sans, ~11px, uppercase, wide tracking, gold */
.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Italic serif — used deliberately as a voice shift, not decoration */
.italic-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
}

.lede {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}

.h-display {
  font-size: clamp(40px, 6.2vw, 68px);
}

.h-section {
  font-size: clamp(30px, 4.4vw, 48px);
  max-width: 24ch;
}

.caption {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* Short gold dash used above the Why-Choose-Us card headings */
.dash {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

/* --- Buttons — sharp corners, wide tracking, uppercase ------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: transparent;
  color: var(--gold-bright);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease;
}

.btn:hover {
  background: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--gold-ink);
}

/* Filled gold button — dark ink on the fill, never white (§4) */
.btn--fill {
  background: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--gold-ink);
}

.btn--fill:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--gold-ink);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. NAV — sticky across the whole scroll, bottom hairline
   Confirmed sticky: present at the top of all 12 mobile scroll captures.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

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

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__link {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body);
  transition: color 0.3s ease;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); }

.nav__cta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  transition: color 0.3s ease;
}

.nav__cta:hover { color: var(--gold-fill); }

/* The page-link row is our own addition: the reference Home page only shows
   the wordmark and TALK TO US, because it is a one-page capture. A four-page
   site needs page links — flagged in the build notes. */
@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(64px, 9vw, 130px);
  overflow: hidden;
}

/* Dark, moody car photograph — heavy shadow, warm gold rim light along the
   body, weighted right-of-frame on desktop so the headline sits in the
   shadowed left half, exactly as the reference does. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0b0b0b;
  /* The photograph, over a gradient stand-in of the same tonality. The
     gradients only ever show if the image fails to load, so the hero never
     falls back to flat black. Note the %20 — the folder name has a space. */
  background-image:
    url("../assets/Hero%20Bg/hero-car.jpg"),
    radial-gradient(120% 90% at 88% 62%,
      rgba(212, 184, 120, 0.16) 0%,
      rgba(150, 112, 56, 0.09) 26%,
      rgba(0, 0, 0, 0) 58%),
    radial-gradient(60% 40% at 74% 84%,
      rgba(223, 198, 141, 0.14) 0%,
      rgba(0, 0, 0, 0) 62%);
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  /* Bias right: keeps the car body and its rim light in the right half,
     behind and below the floating enquiry panel. */
  background-position: 72% 58%, center, center;
}

/* Scrim so the headline stays legible over the photograph on every width.
   Heavier on the left, where the copy sits; light over the car itself. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(13, 13, 13, 0.96) 0%,
      rgba(13, 13, 13, 0.88) 30%,
      rgba(13, 13, 13, 0.55) 58%,
      rgba(13, 13, 13, 0.34) 78%,
      rgba(13, 13, 13, 0.62) 100%),
    /* settle the photo into the canvas at both edges rather than
       cutting off against the next section */
    linear-gradient(
      to bottom,
      rgba(13, 13, 13, 0.55) 0%,
      rgba(13, 13, 13, 0) 26%,
      rgba(13, 13, 13, 0) 62%,
      rgba(13, 13, 13, 0.92) 100%);
}

/* Mobile: the photograph sits behind/beneath the content rather than beside
   it, so pull the framing in and lift the scrim to a mostly-vertical wash. */
@media (max-width: 1023px) {
  .hero__media {
    background-position: 66% 62%, center, center;
  }

  .hero__media::after {
    background: linear-gradient(
      to bottom,
      rgba(13, 13, 13, 0.94) 0%,
      rgba(13, 13, 13, 0.90) 42%,
      rgba(13, 13, 13, 0.72) 72%,
      rgba(13, 13, 13, 0.86) 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__copy { max-width: 620px; }

.hero__title {
  margin-top: 26px;
  font-size: clamp(42px, 6.4vw, 72px);
}

.hero__subline {
  margin-top: 22px;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.35;
}

.hero__body {
  margin-top: 28px;
  max-width: 42ch;
}

.hero__actions { margin-top: 40px; }

/* --------------------------------------------------------------------------
   6. ENQUIRY FORM PANEL
   Desktop: floats top-right, overlapping the hero media.
   Mobile:  full-width block stacked below the hero copy (§4).
   -------------------------------------------------------------------------- */

.enquiry {
  position: relative;
  margin-top: 56px;
}

/* Soft warm radial glow behind the panel — a gradient, not a box-shadow (§4) */
.enquiry::before {
  content: "";
  position: absolute;
  inset: -22% -14%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    58% 52% at 50% 50%,
    rgba(196, 148, 78, 0.20) 0%,
    rgba(150, 110, 58, 0.10) 42%,
    rgba(0, 0, 0, 0) 72%);
}

.enquiry__panel {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.enquiry__title {
  margin-top: 18px;
  font-size: clamp(25px, 2.6vw, 31px);
  line-height: 1.2;
}

.enquiry__fields {
  margin-top: 34px;
  display: grid;
  gap: 26px;
}

/* Name + Mobile sit side by side on desktop, stacked on mobile (§6) */
.field-row {
  display: grid;
  gap: 26px;
}

@media (min-width: 700px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: 12px;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--body);
}

/* Underline-only inputs, confirmed from IMG_5146 */
.field__input {
  width: 100%;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 300;
  transition: border-color 0.3s ease;
}

.field__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.enquiry__submit { margin-top: 38px; }

.enquiry__note {
  margin-top: 18px;
  max-width: 42ch;
}

/* Desktop hero: text left, form floating top-right over the media */
@media (min-width: 1024px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: start;
    gap: clamp(48px, 6vw, 96px);
  }

  .hero__copy { padding-block: clamp(24px, 4vw, 64px); }

  .enquiry { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   7. THE EXPERIENCE
   Each column is headed by a full-width hairline carrying a small gold
   diamond at its left end — observed on desktop PDF p.1, not a short dash.
   -------------------------------------------------------------------------- */

.experience__head { max-width: 780px; }

.experience__title { margin-top: 24px; max-width: 25ch; }

.steps {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  gap: clamp(44px, 5vw, 40px);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
  }
}

.step__rule {
  position: relative;
  height: 1px;
  margin-bottom: 26px;
  background: var(--line);
}

.step__rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

/* The rule only reads as a column marker on desktop; on mobile the reference
   shows the steps with no rule at all (IMG_5148 / IMG_5149). */
@media (max-width: 899px) {
  .step__rule { display: none; }
}

.step__name { letter-spacing: 0.17em; }

.step__title {
  margin-top: 16px;
  font-size: clamp(22px, 1.8vw, 24px);
}

.step__body {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. WHY PEOPLE CHOOSE US
   One outer border, hairline dividers between cells — not four boxes (§4).
   -------------------------------------------------------------------------- */

.reasons {
  margin-top: clamp(44px, 5vw, 64px);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .reasons { grid-template-columns: 1fr 1fr; }
}

.reason {
  padding: clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
}

.reason:last-child { border-bottom: 0; }

@media (min-width: 860px) {
  .reason { border-bottom: 1px solid var(--line); }
  .reason:nth-child(odd)  { border-right: 1px solid var(--line); }
  .reason:nth-child(n+3)  { border-bottom: 0; }
}

.reason__title {
  margin-top: 26px;
  /* Sized so the longest title ("We talk to you like a person") holds one
     line at desktop, as it does in the reference — not an orphan wrap. */
  font-size: clamp(23px, 1.7vw, 24px);
}

.reason__body {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   9. TESTIMONIALS — centered italic serif, hairline rules, no cards
   -------------------------------------------------------------------------- */

.voices { text-align: center; }

.voices__list {
  margin: clamp(44px, 5vw, 64px) auto 0;
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.voice {
  padding-block: clamp(44px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
}

.voice__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
}

.voice__by {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. CLOSING CTA
   -------------------------------------------------------------------------- */

.closing { text-align: center; }

.closing__title {
  margin: 24px auto 0;
  max-width: 30ch;
  font-size: clamp(31px, 4.4vw, 50px);
}

.closing__body {
  margin: 24px auto 0;
  max-width: 46ch;
}

.closing__actions { margin-top: 44px; }

.closing__alt {
  margin: clamp(46px, 5vw, 62px) auto 0;
  max-width: 46ch;
}

.closing__contacts {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 56px;
}

.closing__contacts a {
  color: var(--gold-bright);
  font-size: 15px;
  transition: color 0.3s ease;
}

.closing__contacts a:hover { color: var(--gold-fill); }

/* --------------------------------------------------------------------------
   11. FOOTER
   Desktop: wordmark + italic tagline left, copyright right (desktop PDF p.3).
   Mobile:  everything centered (IMG_5156).
   -------------------------------------------------------------------------- */

.footer {
  padding-block: clamp(52px, 6vw, 72px);
  border-top: 1px solid var(--line-soft);
  background: var(--canvas);
  text-align: center;
}

.footer__inner {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.footer__tagline { font-size: clamp(15px, 1.6vw, 17px); }

@media (min-width: 860px) {
  .footer { text-align: left; }

  .footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    justify-items: start;
    gap: 12px 32px;
  }

  .footer__mark     { grid-column: 1; grid-row: 1; }
  .footer__tagline  { grid-column: 1; grid-row: 2; }
  .footer__legal    { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* --------------------------------------------------------------------------
   12. WHATSAPP FLOATING PILL — outlined rectangle, sharp corners, gold only
   -------------------------------------------------------------------------- */

.wa-dock {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--wa-green);
  border-radius: 0;
  background: var(--wa-green);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease;
}

.wa-dock:hover {
  background: var(--wa-green-dark);
  border-color: var(--wa-green-dark);
  color: #ffffff;
}

.wa-dock svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: currentColor;
}

@media (max-width: 480px) {
  .wa-dock { padding: 12px 18px; }
}

/* --------------------------------------------------------------------------
   13. INTERIOR PAGES (About / How It Works / Contact)
   Same system, no reference capture — see build notes.
   -------------------------------------------------------------------------- */

.page-head {
  padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 120px));
  padding-bottom: clamp(56px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    70% 90% at 82% 20%,
    rgba(196, 148, 78, 0.13) 0%,
    rgba(0, 0, 0, 0) 62%);
}

.page-head__inner { position: relative; }

.page-head__title { margin-top: 24px; max-width: 17ch; }

.page-head__body { margin-top: 26px; }

/* Two-column prose: a serif heading left, body right */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.split__title { font-size: clamp(28px, 3.4vw, 40px); }

.prose {
  display: grid;
  gap: 22px;
  max-width: 60ch;
}

.prose p { font-size: 15px; line-height: 1.8; }

/* Numbered detail blocks on How It Works */
.detail {
  padding-block: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: clamp(20px, 3vw, 56px);
}

.detail:last-of-type { border-bottom: 0; }

@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
}

.detail__title {
  margin-top: 14px;
  font-size: clamp(26px, 2.6vw, 33px);
}

.detail__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.detail__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
}

.detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* FAQ accordion — How It Works only. ASSUMPTION, not in the reference. */
.faq {
  margin-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  padding: 26px 40px 26px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.3s ease;
}

.faq__q:hover { color: var(--gold-bright); }

.faq__q::after,
.faq__q::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--gold);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq__q::before {
  width: 13px;
  height: 1px;
  transform: translateY(-50%);
}

.faq__q::after {
  width: 1px;
  height: 13px;
  right: 10px;
  transform: translateY(-50%);
}

.faq__q[aria-expanded="true"]::after {
  opacity: 0;
  transform: translateY(-50%) rotate(90deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.faq__a > div { overflow: hidden; }

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a p {
  padding-bottom: 28px;
  max-width: 62ch;
  font-size: 15px;
}

/* Contact channel cards — single outer border, hairline dividers */
.channels {
  margin-top: clamp(44px, 5vw, 56px);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .channels { grid-template-columns: repeat(3, 1fr); }
}

.channel {
  padding: clamp(30px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.channel:last-child { border-bottom: 0; }

@media (min-width: 860px) {
  .channel { border-bottom: 0; border-right: 1px solid var(--line); }
  .channel:last-child { border-right: 0; }
}

.channel__value {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  color: var(--ink);
  transition: color 0.3s ease;
}

a.channel__value:hover { color: var(--gold-bright); }

.channel__note { margin-top: 12px; font-size: 14px; }

.map {
  margin-top: clamp(44px, 5vw, 64px);
  border: 1px solid var(--line);
  /* No min-height here: paired with aspect-ratio it forces the box wider than
     a 390px viewport. Height comes from the ratio, floored by padding. */
  aspect-ratio: 16 / 7;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 50% 50%,
      rgba(196, 148, 78, 0.10) 0%, rgba(0, 0, 0, 0) 66%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.045) 0 1px, transparent 1px 64px),
    var(--canvas-panel);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 24px;
}

.map__label { max-width: 34ch; }

/* --------------------------------------------------------------------------
   14. MOTION — restrained scroll reveal only (§4)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   BRAND PRELOADER — first load of a session only
   ========================================================================== */
html.is-preloading, html.is-preloading body { overflow: hidden; }
html.preloader-done .preloader { display: none; }

.preloader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--canvas);
  display: grid; place-items: center;
  /* --expo has no token yet — this is the old project's expo-out curve,
     inlined. Consider promoting to --ease-expo if you add more motion. */
  transition: opacity .55s cubic-bezier(0.16, 1, 0.30, 1);
}
.preloader .wordmark { align-items: center; }

.preloader .wordmark__name {
  font-family: var(--serif);
  font-size: 26px; font-weight: 400;
  letter-spacing: 11px; text-indent: 11px;
}
.preloader .wordmark__sub {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 4.4px; text-indent: 4.4px; margin-top: 12px;
}
.preloader__inner {
  text-align: center;
  transition: transform .55s cubic-bezier(0.16, 1, 0.30, 1);
}
.preloader__rule {
  width: 120px; height: 1px; background: var(--gold-bright);
  /* --s-sm has no token yet — 24px inlined, matches --gutter's value. */
  margin: 24px auto 0;
}
/* --slow has no token yet — 1.15s inlined from the old project. */
.preloader .draw { transition-duration: .6s; }

@keyframes preloader-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.26; }
}
.preloader__rule { animation: preloader-breathe 1.5s ease-in-out .65s infinite; }
.preloader.is-out .preloader__rule { animation: none; }

.preloader.is-out { opacity: 0; pointer-events: none; }
.preloader.is-out .preloader__inner { transform: scale(0.96); }
.preloader.is-out .draw {
  transition-duration: .5s;
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .preloader__rule { animation: none; }
}

/* Companion rules — add if styles.css doesn't already have equivalents */
.draw {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.30, 1); /* --slow, --expo inlined */
}
.is-in .draw, .draw.is-in { transform: scaleX(1); }

/* ==========================================================================
   WORDMARK CAROUSEL — "Any Make. Any Model."
   ========================================================================== */
.wordmarks { position: relative; }
.wordmarks__canvas {
  display: block;
  width: 100%;
  height: 104px;
}
.wordmarks__static {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px; /* --s-xs / --s-md inlined — no spacing scale exists yet,
                      matches the ~24px --gutter step used for --s-sm in the
                      preloader; adjust once/if a real scale gets added */
  list-style: none;
  margin: 0;
  padding: 0 24px; /* --s-sm inlined, same as preloader's margin value */
  color: var(--body); /* was --muted-soft — identical value (#9a9a9a) */
}
.wordmarks__static .wordmarks__item { color: var(--body); }

@media (max-width: 767px) {
  .wordmarks__canvas {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}

@media (min-width: 768px) {
  .wordmarks__canvas { height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmarks__canvas { display: none; }
  .wordmarks__static { display: flex; }
}

/* ==========================================================================
   16. MOTION REFINEMENTS
   Layered on top of section 14. Nothing here changes a resting state — only
   how the site gets there. Every rule is transform/opacity/filter so it
   stays off the layout and paint path, and every hover-transform is gated
   behind a real pointer so touch devices don't fire it on tap.
   ========================================================================== */

/* ---- Reveal: same 18px rise, better curve, plus a whisper of defocus -----
   The blur is what makes it read as "settling into place" rather than
   "sliding". Kept at 5px — one-shot, on section entry only, never on a
   rapidly-repeated element. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition: opacity var(--slow) var(--ease-out),
              transform var(--slow) var(--ease-out),
              filter var(--slow) var(--ease-out);
  will-change: opacity, transform, filter;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Drop the compositor hint once the element has arrived — holding
   will-change on every section for the life of the page is wasteful. */
.reveal.is-settled { will-change: auto; }

/* ---- Stagger --------------------------------------------------------------
   Children of an already-revealing group cascade in behind their parent.
   No HTML change needed: the group carries .reveal, the children ride its
   .is-in. 60ms apart — far enough to read as a cascade, close enough that
   the last item never feels late. */
.reasons .reason,
.voices__list .voice,
.steps .step {
  transition-delay: 0ms;
}

.reasons.is-in .reason {
  animation: rise-in var(--slow) var(--ease-out) backwards;
}
.reasons.is-in .reason:nth-child(1) { animation-delay:   0ms; }
.reasons.is-in .reason:nth-child(2) { animation-delay:  60ms; }
.reasons.is-in .reason:nth-child(3) { animation-delay: 120ms; }
.reasons.is-in .reason:nth-child(4) { animation-delay: 180ms; }

/* The steps and voices each carry their own .reveal, so they get a
   transition-delay rather than an animation — the IntersectionObserver
   fires them at slightly different times anyway, this just guarantees
   the order reads left-to-right instead of by scroll accident. */
.steps .step.reveal:nth-child(2) { transition-delay:  60ms; }
.steps .step.reveal:nth-child(3) { transition-delay: 120ms; }
.steps .step.reveal:nth-child(4) { transition-delay: 180ms; }

.voices__list .voice.reveal:nth-child(2) { transition-delay:  80ms; }
.voices__list .voice.reveal:nth-child(3) { transition-delay: 160ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: none;             filter: blur(0);   }
}

/* ---- The gold dash draws itself in --------------------------------------
   The dash above each reason heading is the one piece of pure ornament in
   the section, so it earns the flourish: it wipes out from its left edge
   as the card arrives. */
.reasons.is-in .reason .dash {
  animation: dash-draw 700ms var(--expo) backwards;
  transform-origin: left center;
}
.reasons.is-in .reason:nth-child(1) .dash { animation-delay: 180ms; }
.reasons.is-in .reason:nth-child(2) .dash { animation-delay: 240ms; }
.reasons.is-in .reason:nth-child(3) .dash { animation-delay: 300ms; }
.reasons.is-in .reason:nth-child(4) .dash { animation-delay: 360ms; }

@keyframes dash-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.step.reveal .step__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--expo) 220ms;
}
.step.reveal.is-in .step__rule { transform: scaleX(1); }

/* ---- Pressables ----------------------------------------------------------
   Every pressable element answers the press. 0.97 is enough to feel the
   interface listening and small enough that nobody consciously sees it. */
.btn,
.wa-dock {
  transition: background-color var(--dur-hover) ease,
              color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              transform var(--dur-press) var(--ease-out);
}

.btn:active,
.wa-dock:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .wa-dock:hover { transform: translateY(-2px); }
  .wa-dock:active { transform: scale(0.97) translateY(-2px); }
}

/* ---- Link underlines -----------------------------------------------------
   A gold hairline that wipes in from the left on hover and out to the
   right on leave, so the motion always travels with the reading direction
   rather than retracing itself. Sharp-edged, 1px — same language as every
   other rule on the site. */
.nav__link,
.nav__cta,
.closing__contacts a,
a.channel__value {
  position: relative;
}

.nav__link::after,
.nav__cta::after,
.closing__contacts a::after,
a.channel__value::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after,
  .nav__cta:hover::after,
  .closing__contacts a:hover::after,
  a.channel__value:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Keyboard users get the same affordance, without needing a pointer. */
.nav__link:focus-visible::after,
.nav__cta:focus-visible::after,
.closing__contacts a:focus-visible::after,
a.channel__value:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* The current page keeps its underline permanently. */
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0.35;
}

/* ---- Form fields ---------------------------------------------------------
   The existing border-color shift stays; a gold hairline now grows over it
   from the left on focus, so the active field announces itself with motion
   instead of only colour. */
.field { position: relative; }

.field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-ui) var(--ease-out);
  pointer-events: none;
}

.field:focus-within::after { transform: scaleX(1); }

.field__label {
  transition: color var(--dur-ui) ease;
}
.field:focus-within .field__label { color: var(--gold-bright); }

/* ---- Nav condenses on scroll --------------------------------------------
   At rest over the hero the bar is nearly weightless. Once the page has
   moved, it firms up: darker fill, deeper blur, a hairline that actually
   reads. Nothing moves — only the material changes. */
.nav {
  transition: background-color var(--dur-ui) ease,
              border-color var(--dur-ui) ease,
              backdrop-filter var(--dur-ui) ease;
}

.nav.is-scrolled {
  background: rgba(11, 11, 11, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---- Hero settle ---------------------------------------------------------
   The photograph eases out of a 1.05 scale once, on load. Slow enough
   (1.8s) to register as the image coming to rest rather than as a zoom. */
.hero__media {
  transform: scale(1.05);
  transition: transform 1800ms var(--ease-out);
  will-change: transform;
}
html.hero-ready .hero__media { transform: scale(1); }

/* ---- Card hover ----------------------------------------------------------
   The dash extends slightly. That is the whole effect — the cards share an
   outer border, so lifting or tinting one would break the single-panel
   construction the section depends on. */
@media (hover: hover) and (pointer: fine) {
  .reason .dash {
    transition: transform var(--dur-hover) var(--ease-out);
    transform-origin: left center;
  }
  .reason:hover .dash { transform: scaleX(1.35); }
}

/* ---- Reduced motion ------------------------------------------------------
   Reduced does not mean none: opacity still carries comprehension, so
   fades stay. Everything positional, scaled, or blurred is removed. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    filter: none;
  }

  .reasons.is-in .reason,
  .reasons.is-in .reason .dash {
    animation: none;
  }

  .step.reveal .step__rule,
  .step.reveal.is-in .step__rule,
  .reasons.is-in .reason .dash {
    transform: none;
  }

  .hero__media,
  html.hero-ready .hero__media {
    transform: none;
  }

  .btn:active,
  .wa-dock:active,
  .wa-dock:hover,
  .reason:hover .dash {
    transform: none;
  }
}

/* ==========================================================================
   17. HERO VIDEO
   Sits inside .hero__media, underneath the existing scrim. The gradients on
   .hero__media stay exactly as they were and now act as the underlay: they
   are what shows before the first frame paints, if the file fails, or when
   the visitor has asked for reduced motion.
   ========================================================================== */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same right-bias as the still it replaces, so the car body and its rim
     light stay in the right half, behind the floating enquiry panel. */
  object-position: 72% 58%;
  /* Fades up once it actually has a frame to show, rather than snapping
     from gradient to video. */
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  pointer-events: none;
}

.hero__video.is-playing { opacity: 1; }

/* Keep the scrim above the video — ::after would otherwise paint under a
   positioned child. */
.hero__media::after { z-index: 1; }

@media (max-width: 1023px) {
  .hero__video { object-position: 66% 62%; }
}

/* Reduced motion: no moving background at all. The gradient underlay is
   already there, so removing the video leaves a complete hero. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}