/* ============================================================
   HUNT VALLEY DRIVE CO.
   Stylesheet

   Palette note: the green-and-brass direction comes from Hunt
   Valley's own equestrian history — hunt green, aged brass tack
   hardware, linen. It deliberately avoids the black-and-gold
   look every other car service in the region uses.
   ============================================================ */

:root {
  /* Colour */
  --ink:         #16211C;   /* deep green-black — primary text, dark sections */
  --field:       #1F3A2E;   /* hunt green — secondary dark */
  --field-deep:  #121E19;   /* footer, deepest panel */
  --brass:       #B08D4F;   /* accent, DARK backgrounds only (5.7:1 on --ink) */
  --brass-deep:  #7A5F2E;   /* accent, LIGHT backgrounds only (5.4:1 on --linen) */
  --linen:       #F3F4F0;   /* page background */
  --paper:       #FFFFFF;   /* raised panels */
  --stone:       #5A625D;   /* secondary text (5.7:1 on --linen) */
  --rule:        #D6D9D1;   /* hairlines on light */
  --rule-dark:   #33443B;   /* hairlines on dark */
  --focus:       #C8A968;   /* focus ring */

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --measure: 66ch;
  --gutter: 1.5rem;
  --max: 1180px;
}

/* ---------- Reset ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }

p { margin: 0 0 1.15em; max-width: var(--measure); }

a { color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Visible keyboard focus everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */

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

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

.skip-link {
  position: absolute; left: 0.5rem; top: -100px;
  z-index: 200; background: var(--brass); color: var(--ink);
  padding: 0.7rem 1.1rem; font-weight: 600; border-radius: 3px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark { background: var(--field); color: var(--linen); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--brass); }
.section--dark p { color: #D9DED9; }

.lede { font-size: 1.2rem; color: var(--stone); max-width: 58ch; }
.section--dark .lede { color: #C6CEC7; }

/* ---------- Header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
}

.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-right: auto;
  padding-block: 0.5rem;
}
.brand:hover { color: var(--brass); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule-dark);
  color: var(--linen); font: inherit; font-size: 0.95rem;
  padding: 0.6rem 0.95rem; min-height: 44px; border-radius: 3px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brass); }

.nav { display: flex; align-items: center; gap: 1.6rem; }

.nav a {
  color: #C6CEC7; text-decoration: none;
  font-size: 0.97rem; padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav a:hover { color: var(--paper); border-bottom-color: var(--brass); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--brass); }

.nav__call {
  background: var(--brass); color: var(--ink) !important;
  padding: 0.7rem 1.15rem; min-height: 44px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.32em;   /* flex collapses the space between "Call" and the number */
  font-weight: 600; border-bottom: 0 !important;
  white-space: nowrap;
}
.nav__call:hover { background: #C8A968; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 0.85rem 0; border-bottom: 1px solid var(--rule-dark);
  }
  .nav__call { margin-top: 0.9rem; text-align: center; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--ink);
  color: var(--linen);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 { color: var(--paper); margin-bottom: 0.4em; }

.hero__tagline {
  font-family: var(--serif);
  font-size: 1.3rem; font-style: italic;
  color: var(--brass);
  margin-bottom: 1.4rem;
}

.hero p { color: #C6CEC7; max-width: 46ch; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 2rem;
}

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

.btn {
  display: inline-block;
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 3px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn--primary:hover { background: #C8A968; border-color: #C8A968; }

.btn--ghost { background: transparent; color: var(--paper); border-color: #4A5C52; }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

.btn--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--dark:hover { background: var(--field); border-color: var(--field); }

/* ---------- Photo placeholder ----------
   TO ADD A REAL PHOTO: replace the whole <div class="photo">…</div>
   block in the HTML with:
       <img src="assets/photos/your-photo.jpg"
            alt="Describe the photo here for screen readers">
   Keep the alt text meaningful — it is required for accessibility. */

.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      -45deg,
      #1D2B25 0 14px,
      #1A2721 14px 28px
    );
  border: 1px solid var(--rule-dark);
  border-radius: 4px;
  display: grid; place-content: center; text-align: center;
  padding: 1.5rem;
}
.photo__label {
  font-size: 0.9rem; color: #93A199;
  max-width: 26ch; margin: 0;
}
.photo__label strong { color: var(--brass); display: block; margin-bottom: 0.3rem; font-weight: 600; }
.photo--light { background: repeating-linear-gradient(-45deg, #E8EAE4 0 14px, #E2E5DE 14px 28px); border-color: var(--rule); }
.photo--light .photo__label { color: var(--stone); }
.photo--light .photo__label strong { color: var(--brass-deep); }
.photo--wide { aspect-ratio: 16 / 9; }

/* ---------- Route ledger (the page's signature element) ---------- */

.ledger { margin-top: 2.5rem; }

.ledger__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

.ledger__table caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  padding-bottom: 0.9rem;
}
.section--dark .ledger__table caption { color: var(--paper); }

.ledger__table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--stone);
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--brass-deep);
}
.ledger__table th:last-child { text-align: right; }

.ledger__table td {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.ledger__table td:last-child { text-align: right; }

.ledger__route {
  font-family: var(--serif);
  font-size: 1.2rem;
}
.ledger__detail {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--stone);
  margin-top: 0.15rem;
}

.ledger__rate { font-weight: 600; white-space: nowrap; }
.rate--quote {
  font-weight: 500;
  color: var(--brass-deep);
  font-size: 0.98rem;
}

/* ---------- Content grids ---------- */

.grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--two { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 880px) { .grid--two { grid-template-columns: 1fr 1fr; } }

/* For sets of four, so the last item doesn't sit alone on its own row */
.grid--pairs { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--pairs { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }

.stack > * + * { margin-top: 1.1rem; }

.entry h3 { margin-bottom: 0.35em; }
.entry p { color: var(--stone); margin-bottom: 0; }
.section--dark .entry p { color: #C6CEC7; }

.entry--ruled {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
}
.section--dark .entry--ruled { border-top-color: var(--rule-dark); }

/* ---------- Spec list ---------- */

.specs { margin: 0; padding: 0; }
.specs div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.section--dark .specs div { border-bottom-color: var(--rule-dark); }
.specs dt { color: var(--stone); font-size: 0.95rem; }
.section--dark .specs dt { color: #A9B5AD; }
.specs dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Callout ---------- */

.callout {
  background: var(--paper);
  border-left: 4px solid var(--brass-deep);
  padding: 1.5rem 1.75rem;
  border-radius: 0 4px 4px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */

.form { max-width: 44rem; }

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.97rem;
  margin-bottom: 0.4rem;
}

.field .hint {
  display: block;
  font-size: 0.9rem;
  color: var(--stone);
  font-weight: 400;
  margin-top: 0.15rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  padding: 0.75rem 0.85rem;
  /* 3.17:1 against white — meets WCAG 1.4.11 for component boundaries */
  border: 1px solid #8A938C;
  border-radius: 3px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--stone); }
.field textarea { min-height: 8rem; resize: vertical; }

.field--check {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.1rem;
}
.field--check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.28rem; flex-shrink: 0;
  accent-color: var(--field);
}
.field--check label { font-weight: 400; font-size: 0.97rem; margin: 0; }

.required { color: #8C2F1D; font-weight: 700; }

.form__note {
  font-size: 0.93rem;
  color: var(--stone);
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

.notice {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass-deep);
  padding: 1.5rem 1.75rem;
  border-radius: 0 4px 4px 0;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- Legal pages ---------- */

.legal { max-width: 72ch; }
.legal h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 2.5rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.legal ul { padding-left: 1.25rem; max-width: var(--measure); }
.legal li { margin-bottom: 0.55rem; }
.legal__meta {
  font-size: 0.95rem; color: var(--stone);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem; margin-bottom: 0.5rem;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--field-deep);
  color: #B4BEB7;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.96rem;
}
.footer h2 { color: var(--paper); font-size: 1.3rem; }
.footer a { color: #D3DAD4; }
.footer a:hover { color: var(--brass); }
.footer p { max-width: 40ch; }

.footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0; }

/* Footer links are navigation, not inline prose — they get real touch targets */
.footer__list a,
.footer__list li {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer__list a { text-decoration-thickness: 1px; transition: color 0.18s ease; }

.footer__heading {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 0.9rem;
}

.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.9rem;
  color: #94A198;
}
.footer__bottom p { max-width: none; }

/* ============================================================
   v2 — route cards, booking modal, motion, photo frames
   ============================================================ */

/* ---------- Photo frames ---------- */

.frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--rule-dark);
  background: var(--ink);
}
.frame img { width: 100%; display: block; }
.frame--light { border-color: var(--rule); }

/* Thin brass edge on the top-left corner, echoing the ledger rules */
.frame::after {
  content: "";
  position: absolute; inset: 0;
  border-top: 2px solid var(--brass);
  border-left: 2px solid var(--brass);
  border-radius: 6px 0 0 0;
  width: 46px; height: 46px;
  pointer-events: none;
}

.frame__caption {
  font-size: 0.86rem;
  color: var(--stone);
  padding: 0.7rem 0.9rem 0;
  margin: 0;
}

/* ---------- Route cards ---------- */

.routes {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 720px)  { .routes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .routes { grid-template-columns: repeat(3, 1fr); } }

.route {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass-deep);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex; flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.route:hover {
  border-color: var(--brass-deep);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -14px rgba(22, 33, 28, 0.45);
}
@media (prefers-reduced-motion: reduce) { .route:hover { transform: none; } }

.route__pair {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.route__arrow {
  color: var(--brass-deep);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0 0.35rem;
}
.route__note {
  color: var(--stone);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
  flex-grow: 1;
}
.route__rate {
  font-weight: 600;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* ---------- Hourly panel ---------- */

.hourly {
  background: linear-gradient(160deg, #22402F 0%, #17291F 100%);
  border: 1px solid #35503F;
  border-radius: 6px;
  padding: clamp(2rem, 5vw, 3.25rem);
  color: var(--linen);
}
.hourly h2 { color: var(--paper); margin-bottom: 0.35em; }
.hourly p { color: #C6CEC7; }

.hourly__figure {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  color: var(--brass);
  line-height: 1.1;
  margin: 0.4rem 0 0.2rem;
}
.hourly__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.hourly__list li {
  padding: 0.7rem 0 0.7rem 1.75rem;
  border-bottom: 1px solid #35503F;
  position: relative;
  color: #D9DED9;
}
.hourly__list li::before {
  content: "";
  position: absolute; left: 0; top: 1.15rem;
  width: 9px; height: 9px;
  border-top: 2px solid var(--brass);
  border-right: 2px solid var(--brass);
  transform: rotate(45deg);
}

/* ---------- Included list ---------- */

.included { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 640px)  { .included { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .included { grid-template-columns: repeat(3, 1fr); } }

.included__item {
  border-top: 2px solid var(--brass-deep);
  padding-top: 1.1rem;
}
.included__item h3 { font-size: 1.18rem; margin-bottom: 0.3em; }
.included__item p { color: var(--stone); margin: 0; font-size: 0.99rem; }

/* ---------- Closing call band ---------- */

.callband {
  background: var(--ink);
  color: var(--linen);
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.callband h2 { color: var(--paper); }
.callband p { color: #C6CEC7; margin-inline: auto; }
.callband__number {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--brass);
  text-decoration: none;
  margin: 0.6rem 0 1.5rem;
  border-bottom: 2px solid transparent;
}
.callband__number:hover { border-bottom-color: var(--brass); color: #C8A968; }
.callband .hero__actions { justify-content: center; }

/* ---------- Booking modal ---------- */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(10, 17, 14, 0.72);
  overflow-y: auto;
}

.modal__panel {
  background: var(--linen);
  border-radius: 6px;
  border-top: 4px solid var(--brass-deep);
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.75rem clamp(1.25rem, 4vw, 2.25rem) 2rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

.modal__head {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 0.5rem;
}
.modal__head h2 { margin: 0; font-size: 1.7rem; flex-grow: 1; }

.modal__close {
  /* --stone gives 5.69:1 against the panel, clearing WCAG 1.4.11 */
  background: none; border: 1px solid var(--stone);
  border-radius: 3px; cursor: pointer;
  font: inherit; font-size: 1.4rem; line-height: 1;
  color: var(--ink);
  width: 44px; height: 44px; flex-shrink: 0;
}
.modal__close:hover { border-color: var(--ink); background: var(--paper); }

.modal__intro { color: var(--stone); font-size: 0.99rem; margin-bottom: 1.5rem; }

.modal .field { margin-bottom: 1.15rem; }

.modal__row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .modal__row { grid-template-columns: 1fr 1fr; } }

.modal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.modal__success {
  border-left: 4px solid var(--brass-deep);
  background: var(--paper);
  padding: 1.5rem 1.6rem;
  border-radius: 0 4px 4px 0;
}
.modal__success h2 { font-size: 1.5rem; margin-bottom: 0.4em; }
.modal__success p:last-child { margin-bottom: 0; }

/* ---------- One page-load reveal, hero only ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: rise 0.6s ease forwards; }
  .reveal:nth-child(2) { animation-delay: 0.08s; }
  .reveal:nth-child(3) { animation-delay: 0.16s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ============================================================
   v3 — track record stats and rider reviews
   ============================================================ */

.stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 2.5rem;
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--field);
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.stat__figure {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1;
  color: var(--brass);
  display: block;
  margin-bottom: 0.45rem;
}
.stat__label {
  font-size: 0.92rem;
  color: #C6CEC7;
  margin: 0;
  max-width: none;
}

/* ---------- Reviews ---------- */

.reviews {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 700px)  { .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column;
}

.review__stars {
  color: var(--brass-deep);
  letter-spacing: 0.16em;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

.review blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.45;
  flex-grow: 1;
}

.review__tag {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
}

.reviews__note {
  font-size: 0.93rem;
  color: var(--stone);
  margin-top: 1.75rem;
  max-width: 62ch;
}

/* ---------- Driver intro band ---------- */

.driver {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .driver { grid-template-columns: 0.62fr 1fr; }
}
.driver .frame { max-width: 380px; }
@media (max-width: 819px) { .driver .frame { max-width: 300px; } }

/* ============================================================
   v4 — editorial rebuild: full-bleed imagery, display type,
   far less copy. Images and numbers carry the page now.
   ============================================================ */

/* ---------- Full-bleed hero ---------- */

.cover {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.cover__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 62%;
}
.cover__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,17,14,0.95) 0%, rgba(12,20,16,0.72) 34%, rgba(16,26,21,0.30) 68%, rgba(16,26,21,0.42) 100%);
}
.cover__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: 0.85rem;
  max-width: none;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 130px;
  background: linear-gradient(to right, var(--brass), transparent);
}

.display {
  font-family: var(--serif);
  font-size: clamp(3rem, 8.5vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 1.5rem;
  max-width: 15ch;
  text-wrap: balance;
}

.cover__sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #DCE3DD;
  max-width: 38ch;
  margin-bottom: 2.2rem;
}

/* ---------- Section headings, bigger and quieter ---------- */

.headline {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin-bottom: 0.5em;
  max-width: 18ch;
}

.section--dark .headline { color: var(--paper); }

/* ---------- Route list (replaces the wordy cards) ---------- */

.routelist { margin-top: 3rem; border-top: 1px solid var(--rule); }

.routelist__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.2s ease, border-color 0.2s ease;
}
.routelist__row:hover { padding-left: 0.75rem; border-bottom-color: var(--brass-deep); }
@media (prefers-reduced-motion: reduce) { .routelist__row:hover { padding-left: 0; } }

.routelist__name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.015em;
}
.routelist__note {
  display: block;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--stone);
  margin-top: 0.3rem;
  letter-spacing: 0;
}
.routelist__rate {
  font-size: 0.95rem;
  color: var(--brass-deep);
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}

/* ---------- Full-bleed image band ---------- */

.band {
  position: relative;
  min-height: min(70vh, 620px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.band__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,17,14,0.94) 0%, rgba(12,20,16,0.55) 45%, rgba(16,26,21,0.15) 100%);
}
.band__inner { position: relative; width: 100%; padding-block: clamp(2.5rem, 6vw, 4rem); }
.band h2 { color: var(--paper); }
.band p { color: #D2DAD3; max-width: 44ch; }

/* Spec row under a band */
.specrow {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(255,255,255,0.14);
  margin-top: 2rem;
  border-radius: 4px; overflow: hidden;
}
@media (min-width: 760px) { .specrow { grid-template-columns: repeat(4, 1fr); } }
.specrow div { background: rgba(14,23,19,0.86); padding: 1.15rem 1rem; text-align: center; }
.specrow dt { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9DAAA1; margin-bottom: 0.35rem; }
.specrow dd { margin: 0; font-family: var(--serif); font-size: 1.22rem; color: var(--paper); }

/* ---------- Oversized stats ---------- */

.bignums {
  display: grid; gap: 2.5rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 3rem;
}
@media (min-width: 900px) { .bignums { grid-template-columns: repeat(4, 1fr); } }

.bignum__figure {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.bignum__label {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A9B5AD;
  margin: 0;
  max-width: none;
}

/* ---------- Pull quotes (replaces review cards) ---------- */

.quotes {
  display: grid; gap: 2.5rem 3rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 780px) { .quotes { grid-template-columns: 1fr 1fr; } }

.quote { border-top: 2px solid var(--brass-deep); padding-top: 1.4rem; }
.quote blockquote {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
}
.quote figcaption {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- Split: image left, text right ---------- */

.split {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

.split__media { position: relative; min-height: 340px; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.split__body {
  padding: clamp(2.25rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--field);
  color: var(--linen);
}
.split__body h2 { color: var(--paper); }
.split__body p { color: #C9D2CB; }

/* ---------- Tight feature list ---------- */

.ticks { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.ticks li {
  padding: 0.95rem 0 0.95rem 2rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 1.03rem;
}
.ticks li:first-child { border-top: 1px solid var(--rule); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.42rem;
  width: 9px; height: 9px;
  border-top: 2px solid var(--brass-deep);
  border-right: 2px solid var(--brass-deep);
  transform: rotate(45deg);
}
.ticks strong { font-weight: 600; }

@media (min-width: 700px) {
  .ticks { columns: 2; column-gap: 3rem; }
  .ticks li { break-inside: avoid; }
}

/* ============================================================
   v5 — black and white theme

   The brass and green are gone. Hierarchy is now carried by
   weight, scale and solid blocks rather than colour. The two
   accent tokens are kept (so earlier rules keep working) but
   remapped: --brass is the light accent used on dark grounds,
   --brass-deep is the dark accent used on light grounds.
   ============================================================ */

:root {
  --ink:        #0F0F0F;
  --field:      #1A1A19;
  --field-deep: #080808;
  --brass:      #E8E5DE;   /* light accent, dark grounds only */
  --brass-deep: #2B2B29;   /* dark accent, light grounds only */
  --linen:      #F7F6F3;
  --paper:      #FFFFFF;
  --stone:      #5C5C59;   /* 6.2:1 on --linen */
  --rule:       #DFDEDA;
  --rule-dark:  #2E2E2B;
  --focus:      #6E6E6B;   /* 5.1:1 on white, 3.8:1 on ink */
}

/* ---------- The plate block logo ---------- */

.brand {
  background: #F4F2EC;
  color: #0F0F0F;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.62rem 0.85rem 0.58rem;
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.brand:hover { background: #FFFFFF; color: #0F0F0F; }

@media (max-width: 420px) {
  .brand { font-size: 0.68rem; letter-spacing: 0.14em; padding: 0.55rem 0.6rem 0.52rem; }
}

/* Footer gets the inverse plate */
.footer .brand-block {
  display: inline-block;
  background: #F4F2EC; color: #0F0F0F;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.62rem 0.85rem 0.58rem;
  border-radius: 2px; line-height: 1;
  margin-bottom: 1rem;
}

/* ---------- Eyebrows need opposite colours by context ---------- */

.eyebrow { color: var(--brass-deep); }
.eyebrow::after { background: linear-gradient(to right, var(--brass-deep), transparent); }

.section--dark .eyebrow,
.cover .eyebrow,
.band .eyebrow,
.split__body .eyebrow,
.callband .eyebrow { color: var(--brass); }
.section--dark .eyebrow::after,
.cover .eyebrow::after,
.band .eyebrow::after,
.split__body .eyebrow::after,
.callband .eyebrow::after { background: linear-gradient(to right, var(--brass), transparent); }

/* ---------- Buttons invert by context ---------- */

.btn--primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn--primary:hover { background: #2B2B29; border-color: #2B2B29; }

.cover .btn--primary,
.section--dark .btn--primary,
.callband .btn--primary,
.split__body .btn--primary,
.band .btn--primary {
  background: #F4F2EC; color: #0F0F0F; border-color: #F4F2EC;
}
.cover .btn--primary:hover,
.section--dark .btn--primary:hover,
.callband .btn--primary:hover,
.split__body .btn--primary:hover,
.band .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--ghost { color: #F4F2EC; border-color: #7C7C75; }
.btn--ghost:hover { border-color: #F4F2EC; color: #FFFFFF; }

.nav__call {
  background: transparent; color: #F4F2EC !important;
  border: 1px solid #7C7C75;
}
.nav__call:hover { border-color: #F4F2EC; background: transparent; color: #FFFFFF !important; }

/* ---------- Accent details ---------- */

.callband__number { color: #F4F2EC; }
.callband__number:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.bignum__figure { color: #F4F2EC; }
.hero__tagline { color: var(--brass); }
.rate--quote, .routelist__rate { color: var(--stone); }
.specrow dd { color: #F4F2EC; }
.stat__figure { color: #F4F2EC; }
.review__stars { color: var(--ink); }
.quote { border-top-color: var(--ink); }
.included__item { border-top-color: var(--ink); }
.route { border-top-color: var(--ink); }
.hourly { background: var(--field); border-color: var(--rule-dark); }
.hourly__figure { color: #F4F2EC; }
.frame::after { border-color: #F4F2EC; }
.callout { border-left-color: var(--ink); }
.notice { border-left-color: var(--ink); }
.modal__panel { border-top-color: var(--ink); }
.legal a, .reviews__note a { color: var(--ink); }
a { color: var(--ink); }
.section--dark a, .footer a, .band a { color: #F4F2EC; }

/* ============================================================
   v5.1 — crop and motion fixes
   ============================================================ */

/* The portrait is 4:5 but the split panel is wide, so cover was
   centring the crop and cutting the top of his head off. Bias the
   crop upward so the face sits in frame. */
.split__media img { object-position: 44% 42%; }

@media (max-width: 899px) {
  .split__media { min-height: 420px; }
  .split__media img { object-position: 44% 38%; }
}

/* ---------- Motion ----------
   Animating padding-left forced a layout recalculation on every
   frame, which is what made the route rows feel like they were
   juddering. Transform is composited instead, so it's smooth. */

.routelist__row {
  transition: transform 0.22s var(--ease-out),
              border-color 0.22s ease;
  will-change: transform;
}
.routelist__row:hover,
.routelist__row:focus-within {
  padding-left: 0;
  transform: translateX(10px);
}
@media (prefers-reduced-motion: reduce) {
  .routelist__row:hover, .routelist__row:focus-within { transform: none; }
}

/* One easing curve and a slightly longer duration across the board —
   0.15s reads as a snap rather than a transition. */
.btn {
  transition: background-color 0.22s var(--ease-out),
              color 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out);
}

.route {
  transition: border-color 0.24s var(--ease-out),
              transform 0.24s var(--ease-out),
              box-shadow 0.24s var(--ease-out);
}

.nav a, .footer__list a, .callband__number, .brand {
  transition: color 0.22s var(--ease-out),
              background-color 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out);
}

/* Native smooth scrolling is slow and linear; it was making anchor
   jumps feel heavy. Let the browser do an instant jump instead. */
html { scroll-behavior: auto; }

/* Sticky header was clipping headings that sit at the top of a
   full-bleed band mid-scroll. */
.band__inner, .cover__inner { scroll-margin-top: 80px; }
.band { padding-top: 72px; }

/* Softer entrance */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(10px);
    animation: rise 0.55s var(--ease-out) forwards;
  }
}

/* ============================================================
   v6 — motion, reworked against Emil Kowalski's rules

   Three real problems with what was here before:

   1. The curve. var(--ease-out) has a flat start —
      that is ease-in behaviour, and ease-in delays movement at the
      exact moment the user is watching hardest. Replaced with a
      strong ease-out.
   2. No :active states. A button that does nothing when pressed
      feels dead.
   3. The booking dialog appeared from nothing, instantly. Things
      in the real world do not do that.
   ============================================================ */

:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Buttons ----------
   Hover is seen constantly, so it stays quick. Press feedback sits
   in the 100–160ms band. */

.btn {
  transition: background-color 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              transform 0.12s var(--ease-out);
}
.btn:active { transform: scale(0.975); }

.nav-toggle, .modal__close, .brand {
  transition: background-color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              transform 0.12s var(--ease-out);
}
.nav-toggle:active, .modal__close:active, .brand:active { transform: scale(0.97); }

/* ---------- Frequent hovers: faster, lighter ---------- */

.nav a, .footer__list a, .callband__number {
  transition: color 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}

.routelist__row {
  transition: transform 0.16s var(--ease-out),
              border-color 0.16s var(--ease-out);
}

.route {
  transition: border-color 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out);
}

/* ---------- The booking dialog ----------
   Occasional, so it earns a proper entrance. Scales from 0.96
   rather than 0, because nothing appears from nothing. */

@keyframes hvdVeil { from { opacity: 0; } }
@keyframes hvdPanel {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
}

@media (prefers-reduced-motion: no-preference) {
  .modal:not([hidden]) { animation: hvdVeil 0.2s var(--ease-out); }
  .modal:not([hidden]) .modal__panel { animation: hvdPanel 0.26s var(--ease-out); }
}

/* ---------- Page entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(10px);
    animation: rise 0.5s var(--ease-out) forwards;
  }
  .reveal:nth-child(2) { animation-delay: 0.06s; }
  .reveal:nth-child(3) { animation-delay: 0.12s; }
}

/* ---------- Photo frames ---------- */

.frame { transition: transform 0.22s var(--ease-out); }

/* ============================================================
   v7 — rebuilt against researched patterns from working
   chauffeur sites and mobile local-service conversion data.

   Changes: gold accent returns (category convention), trust
   signals moved above the fold, sticky call bar on mobile,
   fleet gallery near the top, copy cut hard.
   ============================================================ */

:root {
  --ink:        #0B0B0C;
  --field:      #141416;
  --field-deep: #060607;
  --gold:       #C9A961;   /* accent on dark */
  --gold-deep:  #7A6026;   /* accent on light — 5.6:1 on --linen */
  --brass:      #C9A961;
  --brass-deep: #7A6026;
  --linen:      #FAFAF8;
  --paper:      #FFFFFF;
  --stone:      #5C5C59;
  --rule:       #E2E1DC;
  --rule-dark:  #2A2A2C;
  --focus:      #C9A961;
}

/* The two-parallel-lines motif seen across premium chauffeur sites */
.rule2 {
  border: 0; height: 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  height: 4px;
  width: 54px;
  margin: 0 0 1.6rem;
  opacity: 0.85;
}
.rule2--center { margin-inline: auto; }

/* ---------- Trust strip, above the fold ---------- */

.trustbar {
  display: flex; flex-wrap: wrap;
  gap: 0.9rem 2.2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 169, 97, 0.3);
}
.trustbar div { display: flex; flex-direction: column; }
.trustbar dt {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  color: var(--gold);
  line-height: 1;
}
.trustbar dd {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #B9BFB9;
  max-width: none;
}

/* ---------- Fleet gallery ---------- */

.gallery {
  display: grid; gap: 3px;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
}
@media (min-width: 860px) { .gallery { grid-template-columns: 2fr 1fr 1fr; } }

.gallery figure { margin: 0; position: relative; overflow: hidden; min-height: 190px; }
@media (min-width: 860px) { .gallery figure { min-height: 340px; } }
.gallery figure:first-child { grid-column: 1 / -1; min-height: 250px; }
@media (min-width: 860px) {
  .gallery figure:first-child { grid-column: auto; grid-row: span 1; }
}
.gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.gallery figure:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gallery figure:hover img { transform: none; } }

.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.1rem 0.9rem;
  font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(6,6,7,0.85), transparent);
}

/* ---------- Sticky call bar, phones only ---------- */

.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--ink);
    border-top: 1px solid var(--rule-dark);
    padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom));
    gap: 0.5rem;
  }
  .callbar a, .callbar button {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px;
    font: inherit; font-weight: 600; font-size: 0.97rem;
    border-radius: 4px; cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .callbar__call { background: var(--gold); color: #0B0B0C; }
  .callbar__book { background: transparent; color: #F2EFE7; border-color: #7E7E7A; }

  /* Stop the bar covering the footer */
  body { padding-bottom: 74px; }
}

/* ---------- Accent remaps for the gold theme ---------- */

.brand { background: var(--gold); color: #0B0B0C; }
.brand:hover { background: #D9BE7E; }
.footer .brand-block { background: var(--gold); color: #0B0B0C; }

.eyebrow { color: var(--gold-deep); }
.section--dark .eyebrow, .cover .eyebrow, .band .eyebrow,
.split__body .eyebrow, .callband .eyebrow { color: var(--gold); }

.btn--primary { background: var(--gold); color: #0B0B0C; border-color: var(--gold); }
.btn--primary:hover { background: #D9BE7E; border-color: #D9BE7E; }
.cover .btn--primary, .section--dark .btn--primary, .callband .btn--primary,
.split__body .btn--primary, .band .btn--primary {
  background: var(--gold); color: #0B0B0C; border-color: var(--gold);
}
.cover .btn--primary:hover, .section--dark .btn--primary:hover,
.callband .btn--primary:hover, .split__body .btn--primary:hover,
.band .btn--primary:hover { background: #D9BE7E; border-color: #D9BE7E; }

.nav__call { background: var(--gold); color: #0B0B0C !important; border-color: var(--gold); }
.nav__call:hover { background: #D9BE7E; color: #0B0B0C !important; border-color: #D9BE7E; }

.callband__number { color: var(--gold); }
.callband__number:hover { color: #D9BE7E; border-bottom-color: #D9BE7E; }
.bignum__figure, .stat__figure, .hourly__figure, .specrow dd { color: var(--gold); }
.review__stars { color: var(--gold-deep); }
.quote { border-top-color: var(--gold-deep); }
.included__item { border-top-color: var(--gold-deep); }
.routelist__rate { color: var(--gold-deep); font-weight: 600; }
.frame::after { border-color: var(--gold); }
.hourly__list li::before { border-color: var(--gold); }
.ticks li::before { border-top-color: var(--gold-deep); border-right-color: var(--gold-deep); }

/* ---------- Mobile hero tuning ----------
   The sticky call bar takes ~70px, so the hero has to give some
   height back or the trust numbers fall below the fold — which
   defeats the point of putting them above it. */

@media (max-width: 760px) {
  .cover { min-height: calc(100svh - 140px); }
  .cover__inner { padding-block: 1.5rem 1.1rem; }
  .display { font-size: clamp(2.3rem, 10vw, 3rem); margin-bottom: 1rem; }
  .cover__sub { font-size: 1rem; margin-bottom: 1.5rem; }
  .cover .hero__actions { gap: 0.55rem; margin-top: 1.25rem; }
  .cover .btn { padding: 0.8rem 1.3rem; }

  .trustbar {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem; margin-top: 1.2rem; padding-top: 0.95rem;
  }
  .trustbar dt { font-size: 1.22rem; }
  .trustbar dd { font-size: 0.7rem; letter-spacing: 0.08em; }
}

/* Older browsers that don't know svh */
@supports not (height: 100svh) {
  @media (max-width: 760px) { .cover { min-height: calc(100vh - 140px); } }
}

/* ============================================================
   v8 — gold removed.

   Monochrome, but not the flat black-and-white from before. The
   blacks are cool, the papers are warm, and there are real tonal
   steps between them. That contrast is what gives depth without
   an accent colour. The car photography is the only colour on
   the page, which is the point.
   ============================================================ */

:root {
  --ink:        #101113;
  --field:      #191A1D;
  --field-deep: #0A0B0C;

  --gold:       #E8E6E1;   /* light accent — dark grounds only */
  --gold-deep:  #1A1B1E;   /* dark accent — light grounds only */
  --brass:      #E8E6E1;
  --brass-deep: #1A1B1E;

  --linen:      #F6F5F2;
  --paper:      #FFFFFF;
  --stone:      #5A5A58;
  --rule:       #E0DFDA;
  --rule-dark:  #2C2E31;
  --focus:      #8C8C88;
}

/* The double-rule motif stays, in bone rather than brass */
.rule2 { border-top-color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.section--dark .rule2, .cover .rule2, .band .rule2,
.split__body .rule2, .callband .rule2 {
  border-top-color: var(--gold); border-bottom-color: var(--gold);
}

/* ---------- Logo plate ---------- */

.brand { background: #F2F0EB; color: #101113; }
.brand:hover { background: #FFFFFF; }
.footer .brand-block { background: #F2F0EB; color: #101113; }

/* ---------- Buttons: solid on both grounds ---------- */

.btn--primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn--primary:hover { background: #2C2E31; border-color: #2C2E31; }

.cover .btn--primary, .section--dark .btn--primary, .callband .btn--primary,
.split__body .btn--primary, .band .btn--primary {
  background: #F2F0EB; color: #101113; border-color: #F2F0EB;
}
.cover .btn--primary:hover, .section--dark .btn--primary:hover,
.callband .btn--primary:hover, .split__body .btn--primary:hover,
.band .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--ghost { color: #F2F0EB; border-color: #75757040; border-color: #797974; }
.btn--ghost:hover { border-color: #F2F0EB; color: #FFFFFF; }

.nav__call {
  background: #F2F0EB; color: #101113 !important; border-color: #F2F0EB;
}
.nav__call:hover { background: #FFFFFF; border-color: #FFFFFF; color: #101113 !important; }

/* ---------- Accents ---------- */

.eyebrow { color: var(--stone); }
.section--dark .eyebrow, .cover .eyebrow, .band .eyebrow,
.split__body .eyebrow, .callband .eyebrow { color: #B6B6B0; }

.trustbar { border-top-color: rgba(232, 230, 225, 0.22); }
.trustbar dt { color: #F2F0EB; }
.trustbar dd { color: #A9A9A3; }

.callband__number { color: #F2F0EB; }
.callband__number:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.bignum__figure, .stat__figure, .hourly__figure, .specrow dd { color: #F2F0EB; }
.review__stars { color: var(--ink); }
.quote { border-top-color: var(--ink); }
.included__item { border-top-color: var(--ink); }
.routelist__rate { color: var(--stone); font-weight: 600; }
.frame::after { border-color: #F2F0EB; }
.hourly__list li::before { border-color: #F2F0EB; }
.ticks li::before { border-top-color: var(--ink); border-right-color: var(--ink); }
.route { border-top-color: var(--ink); }

/* ---------- Mobile call bar ---------- */

@media (max-width: 760px) {
  .callbar__call { background: #F2F0EB; color: #101113; }
  .callbar__book { background: transparent; color: #F2F0EB; border-color: #797974; }
}

/* ---------- Pricing disclaimer ---------- */

.ratenote {
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--paper);
  border-left: 3px solid var(--ink);
  border-radius: 0 3px 3px 0;
  font-size: 0.96rem;
  color: var(--stone);
  max-width: 62ch;
}
.ratenote strong { color: var(--ink); }

/* Prices read as prices, not as links */
.routelist__rate { font-size: 1.05rem; color: var(--ink); }