/* ponytail: one stylesheet for the whole v8 preview — no per-page CSS,
   every page composes the same section/card/button primitives. */
:root {
  --v8-font-display: 'Fraunces', Georgia, serif;
  --v8-font-body: 'Manrope', system-ui, sans-serif;

  --v8-ink: #14110f;
  --v8-ink-raise: #1d1815;
  --v8-charcoal: #2a2420;
  --v8-on-dark: #f3ede2;
  --v8-on-dark-muted: #cfc4b4;

  --v8-gold: #c8973f;
  --v8-gold-ink: #14110f;
  /* ponytail: darker gold for text/outline ON light grounds — --v8-gold itself
     only clears WCAG contrast on dark grounds (buttons, dark sections). */
  --v8-gold-deep: #866019;

  --v8-cream: #f6f1e7;
  --v8-cream-raise: #efe7d8;
  --v8-cream-ink: #221c16;
  --v8-cream-ink-muted: #5c5248;

  --v8-radius: 18px;
  --v8-radius-sm: 10px;
  --v8-shadow: 0 18px 40px -20px rgba(20, 17, 15, 0.45);
  --v8-max: 1180px;

  /* ponytail: the header is position:fixed, so it takes up no space in the
     layout and nothing below it knows how tall it is. This token is that
     height, so the hero can reserve room for it instead of relying on
     flex-end slack that runs out on short viewports and long headlines --
     that slack running out is the logo-over-eyebrow collision.
     The value here is a deliberate over-estimate used before JS runs (and
     if JS never runs). v8-site.js measures the real header and overwrites
     it: the height is set by the logo's width times its aspect ratio, so
     any number written by hand here goes stale the moment the logo or its
     clamp() changes. Too much clearance looks fine; too little overlaps. */
  --v8-hdr-h: 132px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--v8-font-body);
  background: var(--v8-cream);
  color: var(--v8-cream-ink);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--v8-font-display); font-weight: 500; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--v8-gold-deep); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- header / overlay menu --- */
.v8-hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  transition: background-color .25s ease;
}
.v8-hdr.solid { background: var(--v8-ink); }
.v8-hdr-inner {
  max-width: var(--v8-max); margin: 0 auto; padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.v8-hdr .v8-logo {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; width: clamp(150px, 13vw, 186px); min-height: 68px;
  color: var(--v8-on-dark); text-decoration: none;
}
.v8-logo-monogram-img {
  display: block; width: 44%; height: auto; margin-bottom: -.16rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .44));
}
.v8-logo-script {
  font-family: "Snell Roundhand", "Apple Chancery", "Bickham Script Pro", "Brush Script MT", cursive;
  color: var(--v8-on-dark);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem); font-weight: 400; line-height: 1;
  text-shadow: 0 8px 16px rgba(0, 0, 0, .48);
  white-space: nowrap;
}
.v8-menu-btn {
  margin-left: auto;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08); cursor: pointer; position: relative;
}
.v8-menu-icon, .v8-menu-icon::before, .v8-menu-icon::after {
  content: ''; display: block; width: 18px; height: 2px; background: var(--v8-on-dark);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.v8-menu-icon::before { transform: translate(-50%, -6px); }
.v8-menu-icon::after { transform: translate(-50%, 4px); }

.v8-menu {
  position: fixed; inset: 0; z-index: 50; background: var(--v8-ink); color: var(--v8-on-dark);
  overflow-y: auto; padding: 5rem 1.5rem 3rem;
}
.v8-menu[hidden] { display: none; }
html.v8-menu-open { overflow: hidden; }
.v8-menu-close {
  position: absolute; top: 1.2rem; right: 1.4rem; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent;
  color: var(--v8-on-dark); font-size: 1.6rem; cursor: pointer;
}
.v8-menu-list { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.v8-menu-list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.v8-menu-list a {
  display: block; padding: .85rem 0; text-decoration: none; font-family: var(--v8-font-display);
  font-size: 1.5rem;
}
.v8-menu-parent {
  padding: 1.4rem 0 .3rem; color: var(--v8-gold); text-transform: uppercase;
  letter-spacing: .12em; font-size: .8rem; font-weight: 700;
}

/* --- desktop nav: flat links + Tours/Services dropdowns --- */
.v8-nav { display: none; margin-left: auto; align-items: center; gap: 1.7rem; }
.v8-nav > a {
  color: var(--v8-on-dark); text-decoration: none; font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  text-shadow: 0 8px 16px rgba(0, 0, 0, .48);
}
.v8-nav-drop { position: relative; }
.v8-nav-drop-btn {
  background: none; border: none; color: var(--v8-on-dark); font: inherit; font-size: .92rem;
  font-weight: 600; letter-spacing: .02em; cursor: pointer; padding: .3rem 0;
  display: inline-flex; align-items: center; gap: .35rem;
  text-shadow: 0 8px 16px rgba(0, 0, 0, .48);
}
.v8-nav-drop-btn::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.v8-nav-drop.is-open .v8-nav-drop-btn::after,
.v8-nav-drop:focus-within .v8-nav-drop-btn::after,
.v8-nav-drop:hover .v8-nav-drop-btn::after { transform: rotate(-135deg) translateY(1px); }

.v8-nav-drop-panel {
  position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--v8-cream-raise); border-radius: var(--v8-radius-sm); box-shadow: var(--v8-shadow);
  padding: .6rem; display: flex; flex-direction: column; min-width: 230px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.v8-nav-drop.is-open .v8-nav-drop-panel,
.v8-nav-drop:focus-within .v8-nav-drop-panel,
.v8-nav-drop:hover .v8-nav-drop-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.v8-nav-drop-panel a {
  color: var(--v8-cream-ink); text-decoration: none; font-size: .92rem; font-weight: 600;
  padding: .65rem .8rem; border-radius: var(--v8-radius-sm);
}
.v8-nav-drop-panel a:hover, .v8-nav-drop-panel a:focus-visible { background: rgba(20,17,15,.06); }

.v8-hdr-inner .v8-nav-cta { display: none; }

@media (min-width: 960px) {
  .v8-nav { display: flex; }
  .v8-hdr-inner .v8-nav-cta { display: inline-block; }
  .v8-menu-btn { display: none; }
}

@media (max-width: 520px) {
  .v8-hdr .v8-logo { width: 128px; min-height: 56px; }
  .v8-logo-monogram-img { width: 42%; }
}
@media (max-width: 520px) { :root { --v8-hdr-h: 100px; } }

/* --- hero --- */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(20,17,15,.35), rgba(20,17,15,.85)), var(--hero-image) center/cover no-repeat;
  color: var(--v8-on-dark);
}
/* ponytail: top padding must clear the fixed header, not just look roomy.
   calc() keeps the 3rem breathing space and adds the header's height on top,
   so hero text can never slide under the logo however long the headline is or
   however short the viewport gets. */
.hero-inner {
  max-width: var(--v8-max); margin: 0 auto; width: 100%;
  padding: calc(var(--v8-hdr-h) + 3rem) 1.5rem 4rem;
}
.eyebrow {
  color: var(--v8-gold-deep); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem;
  font-weight: 700; margin: 0 0 .6em;
}
/* hero always sits on a dark gradient regardless of section tone */
.hero .eyebrow { color: var(--v8-gold); }
.hero-sub { max-width: 46ch; font-size: 1.1rem; color: var(--v8-on-dark-muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }

/* --- cinematic scroll-pin hero (home page only), ported from index.html:
   pins for 260vh of scroll while a letterbox aperture opens over the first
   ~30%, the photo grades from desaturated/over-zoomed to full colour/rest
   scale on the same timeline, then the headline builds word by word. The
   html:not(.js) block below is the no-JS fallback -- content must never
   depend on JS to become visible. */
/* ponytail: wrapper and pin must be measured in the SAME viewport unit. It was
   260vh (static, ignores the mobile address bar) against a 100dvh pin (shrinks
   and grows with it), so on mobile the scroll distance changed under the
   animation mid-scroll -- that is the "scroll down and back up and it looks
   wrong" bug. Both dvh now, so they move together. */
.v8-hero-pin-wrap { position: relative; height: 260dvh; }
.v8-hero-pin {
  position: sticky; top: 0; height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.v8-hero-pin img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
  /* ponytail: transform only. This used to animate filter() as well, which
     forces the browser to re-paint the full-screen photo from scratch on every
     scroll frame -- the single most expensive thing here. The darkening is now
     the ::before wash below, which animates opacity and stays on the GPU. */
  will-change: transform;
  transform: scale(calc(1.22 - .22 * var(--p, 0)));
}
/* The grade that used to be filter: brightness(). Opacity is a compositor
   property, so this costs nothing per frame. */
.v8-hero-pin::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--v8-ink);
  opacity: calc(.5 - .42 * var(--p, 0));
}
.v8-hero-pin::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 55%, rgba(20,17,15,0), rgba(20,17,15,.75));
}
/* ponytail: the bars keep a fixed height and animate scaleY instead. Animating
   height is a layout change -- the browser re-runs layout for the whole pinned
   hero every scroll frame, and `will-change: height` cannot make a layout
   property cheap. scaleY is compositor-only and looks identical here because
   the bars are flat blocks of one colour. */
.v8-hero-bar {
  position: absolute; left: 0; right: 0; height: 15vh;
  background: var(--v8-ink); z-index: 3; pointer-events: none;
  will-change: transform;
  transform: scaleY(clamp(0, calc(1 - var(--p, 0) / .3), 1));
}
.v8-hero-bar-top { top: 0; transform-origin: top; }
.v8-hero-bar-bottom { bottom: 0; transform-origin: bottom; }
.v8-hero-pin-body {
  position: relative; z-index: 5; text-align: center; max-width: 760px;
  /* ponytail: the plain .hero (every other page) sets this once and every
     child inherits it, including .btn-secondary's `color: inherit`. This
     pinned hero (home page only) never set it, so that inherit fell through
     to body's dark ink colour meant for the cream background -- dark text and
     a dark border on a dark photo, i.e. the invisible "Send an enquiry"
     button. One line, matches .hero. */
  color: var(--v8-on-dark);
  /* This body is centred in a full-height flex box, so top padding shifts the
     content down by half its value -- the header height here buys ~65px of
     clearance, which is what keeps the h1 off the logo on short viewports.
     Live overlaps by 38px at 1440x580 without it. */
  padding: var(--v8-hdr-h) 1.5rem 0;
}
.v8-hero-pin .eyebrow { color: var(--v8-gold); }
.v8-hero-pin-body h1 { color: var(--v8-on-dark); margin: 0 0 1.2rem; }
.v8-hero-pin-body h1 .w {
  display: inline-block;
  opacity: clamp(0, calc((var(--p, 0) - var(--t, 0)) * 9), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) - var(--t, 0)) * 9), 1)) * 14px));
}
.v8-hero-pin-sub {
  max-width: 46ch; margin: 0 auto 1.7rem; color: var(--v8-on-dark-muted); font-size: 1.1rem;
  opacity: clamp(0, calc((var(--p, 0) - .62) * 6), 1);
}
.v8-hero-pin-ctas {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  opacity: clamp(0, calc((var(--p, 0) - .74) * 6), 1);
}
.v8-hero-progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--v8-gold); z-index: 41;
  transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .05s linear;
}
@media (max-width: 760px) {
  .v8-hero-pin img { object-position: 70% 34%; }
  .v8-hero-pin-ctas .btn { flex: 1 1 100%; justify-content: center; }
}
html:not(.js) .v8-hero-pin-body h1 .w,
html:not(.js) .v8-hero-pin-sub,
html:not(.js) .v8-hero-pin-ctas { opacity: 1 !important; transform: none !important; }
html:not(.js) .v8-hero-pin img { transform: none !important; filter: none !important; }
html:not(.js) .v8-hero-pin::before { opacity: .08 !important; }
html:not(.js) .v8-hero-bar { transform: scaleY(0) !important; }

/* --- buttons --- */
.btn {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600;
  text-decoration: none; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--v8-gold); color: var(--v8-gold-ink); }
.btn-secondary { background: transparent; border-color: currentColor; color: inherit; }

/* --- sections / tone --- */
.section { padding: 4.5rem 1.5rem; }
.section-inner { max-width: var(--v8-max); margin: 0 auto; }
.tone-dark { background: var(--v8-ink); color: var(--v8-on-dark); }
.tone-dark .eyebrow { color: var(--v8-gold); }
.tone-light { background: var(--v8-cream); color: var(--v8-cream-ink); }
.section-body { max-width: 68ch; font-size: 1.05rem; }
.section-intro { max-width: 68ch; }

/* --- homepage about image --- */
.section-about-image .section-intro { margin-top: 1rem; max-width: 72ch; }
.section-about-image .section-intro p + p { margin-top: 1rem; }
.about-image-frame {
  width: min(100%, 900px); margin: 2.4rem auto 0; border-radius: var(--v8-radius);
  overflow: hidden; box-shadow: var(--v8-shadow);
}
.about-image-frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 800 / 551; object-fit: cover;
}

/* --- Google reviews trust section --- */
.section-google-reviews { background: var(--v8-ink-raise); }
.google-reviews-layout {
  display: grid; grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr);
  gap: 2rem 4rem; align-items: center; margin-top: 2rem;
}
.google-review-rating { display: flex; flex-direction: column; gap: .35rem; }
.google-review-rating strong { font-family: var(--v8-font-display); font-size: clamp(3rem, 7vw, 5rem); line-height: .9; color: var(--v8-on-dark); }
.google-review-stars { color: var(--v8-gold); font-size: 1.35rem; letter-spacing: .12em; }
.google-review-rating > span:last-child { color: var(--v8-on-dark-muted); font-size: .85rem; }
.google-reviews-copy { max-width: 56ch; }
.google-reviews-copy p { color: var(--v8-on-dark-muted); }
@media (max-width: 620px) {
  .google-reviews-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- review page wall --- */
.section-review-wall .section-intro { max-width: 64ch; margin-top: 1rem; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.review-card { margin: 0; padding: 1.8rem; background: var(--v8-cream-raise); border-radius: var(--v8-radius); box-shadow: var(--v8-shadow); }
.review-card-stars { color: var(--v8-gold-deep); letter-spacing: .12em; font-size: 1rem; }
.review-card blockquote { margin: 1.3rem 0 1.5rem; font-family: var(--v8-font-display); font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.25; }
.review-card figcaption { color: var(--v8-cream-ink-muted); font-size: .85rem; }
.review-wall-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-top: 2.5rem; padding: 2rem; border: 1px solid rgba(20,17,15,.16); border-radius: var(--v8-radius); }
.review-wall-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #4285f4; color: #fff; font-family: Arial, sans-serif; font-size: 1.5rem; font-weight: 700; }
.review-wall-empty h3 { margin: 0; }
.review-wall-empty p { max-width: 60ch; margin: .5rem 0 0; color: var(--v8-cream-ink-muted); }
@media (max-width: 620px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-wall-empty { grid-template-columns: 1fr; }
}

/* --- cards --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.card {
  background: var(--v8-cream-raise); border-radius: var(--v8-radius); overflow: hidden;
  box-shadow: var(--v8-shadow); display: flex; flex-direction: column;
}
.tone-dark .card { background: var(--v8-charcoal); color: var(--v8-on-dark); }
.card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card-label {
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700;
  color: var(--v8-gold-deep); margin: 0;
}
.tone-dark .card-label { color: var(--v8-gold); }
.card-duration { font-size: .85rem; color: var(--v8-cream-ink-muted); margin: 0; }
.tone-dark .card-duration { color: var(--v8-on-dark-muted); }
.card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .3rem 0; }
.card-tags li {
  background: rgba(20,17,15,.08); border-radius: 999px; padding: .25rem .7rem; font-size: .78rem;
}
.tone-dark .card-tags li { background: rgba(255,255,255,.1); }
.card-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; padding: 0; margin: .3rem 0; font-size: .85rem; }
.card-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .6rem; }

/* card-cards-router: the 5 big "what would you like to book" cards */
.section-cards-router .card-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* section-cards-fleet: three vehicle choices with room for each card CTA. */
.section-cards-fleet .card-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* --- FAQ --- */
.faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; max-width: 72ch; }
.faq-item {
  background: var(--v8-cream-raise); border-radius: var(--v8-radius-sm); padding: 1rem 1.2rem;
}
.tone-dark .faq-item { background: var(--v8-charcoal); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-answer { margin-top: .6rem; }

/* --- steps --- */
.steps-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps-list li { counter-increment: step; position: relative; padding-top: 2.2rem; }
.steps-list li::before {
  content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  font-family: var(--v8-font-display); font-size: 1.3rem; color: var(--v8-gold-deep);
}
.tone-dark .steps-list li::before { color: var(--v8-gold); }
/* step items with a text tag (e.g. "Step one") show the tag instead of the counter */
.steps-list li[data-tag]::before { content: none; }
.step-tag {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--v8-gold-deep); margin: 0 0 .8em;
}
.tone-dark .step-tag { color: var(--v8-gold); }

/* --- services grid (home page, ported from v1) --- */
.section-lede { max-width: 60ch; font-size: 1.05rem; margin-top: .3em; }
.section-lede a { color: var(--v8-gold); }
.svc-grid {
  display: grid; gap: 1px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem;
}
@media (min-width: 760px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
.svc-item { background: var(--v8-ink); display: flex; flex-direction: column; }
.svc-pic { overflow: hidden; aspect-ratio: 16/10; }
.svc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.svc-item:hover .svc-pic img { transform: scale(1.045); }
.svc-txt { padding: clamp(1.6rem, 3vw, 2.4rem); flex: 1; display: flex; flex-direction: column; }
.svc-txt h3 { margin-bottom: .7em; }
.svc-txt p { color: var(--v8-on-dark-muted); font-size: .9375rem; }
.svc-tags {
  margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v8-on-dark-muted);
}
.route-go {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--v8-gold);
  white-space: nowrap; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  margin-top: 1.4rem;
}
.route-go svg { width: 14px; height: 14px; flex: none; transition: transform .25s ease; }
.svc-item:hover .route-go svg { transform: translateX(4px); }

/* --- cta band (home page, ported from v1) --- */
.section-cta-band { background: var(--v8-ink-raise); padding-block: clamp(2.5rem, 5vw, 3.6rem); }
.section-cta-band-inner {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.5rem; align-items: center; justify-content: space-between;
}
.section-cta-band h2 { max-width: 24ch; margin: 0; }
.section-cta-band p { color: var(--v8-on-dark-muted); font-size: .9375rem; margin-top: .7rem; max-width: 46ch; }
.section-cta-band-actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.section-cta-band .btn-secondary { color: var(--v8-on-dark); }
@media (max-width: 560px) { .section-cta-band-actions .btn { flex: 1 1 100%; text-align: center; } }

/* --- coverage band (home page, ported from v1) --- */
.section-coverage { position: relative; overflow: hidden; color: var(--v8-on-dark); }
.section-coverage-bg { position: absolute; inset: 0; }
.section-coverage-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.section-coverage-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--v8-ink) 97%, transparent) 30%, color-mix(in srgb, var(--v8-ink) 72%, transparent) 70%, color-mix(in srgb, var(--v8-ink) 55%, transparent));
}
.section-coverage-in { position: relative; z-index: 2; padding-block: 4.5rem; }
.section-coverage-in .section-lede { color: var(--v8-on-dark-muted); }

/* --- final CTA --- */
.section-final-cta { text-align: center; }
.section-final-cta .hero-ctas { justify-content: center; }

/* --- footer --- */
.v8-footer { background: var(--v8-ink); color: var(--v8-on-dark); padding: 3.5rem 1.5rem 1.5rem; }
.v8-footer-inner {
  max-width: var(--v8-max); margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
}
.v8-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--v8-gold); font-family: var(--v8-font-body); }
.v8-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.v8-footer a { text-decoration: none; }
.v8-footer-brand a { color: var(--v8-gold); }
.v8-footer-brand-links { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; gap: 1rem; }
.v8-footer-brand-links a { color: var(--v8-on-dark-muted); }
.v8-footer-legal {
  max-width: var(--v8-max); margin: 2.5rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between;
  font-size: .85rem; color: var(--v8-on-dark-muted);
}

/* --- WhatsApp float, ported from v1's circular icon button --- */
.v8-wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; background: #1f7a4d; color: #f4f1ec;
  display: grid; place-items: center; box-shadow: var(--v8-shadow);
  transition: transform .25s ease;
}
.v8-wa-float:hover { transform: scale(1.06); }
.v8-wa-float svg { width: 27px; height: 27px; }

/* --- booking stepper --- */
.booking-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.booking-card, .booking-map-card {
  background: var(--v8-cream-raise); border-radius: var(--v8-radius); padding: 2rem; box-shadow: var(--v8-shadow);
}
.booking-map-card { background: var(--v8-ink); color: var(--v8-on-dark); min-height: 320px; }
.booking-card label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; font-weight: 600; font-size: .92rem; }
.booking-card input, .booking-card select, .booking-card textarea {
  font: inherit; padding: .7rem .8rem; border-radius: var(--v8-radius-sm); border: 1px solid rgba(20,17,15,.2);
}
.booking-step-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1rem; }
.booking-route-metrics p { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); padding: .5rem 0; margin: 0; }
.booking-note { font-size: .85rem; color: var(--v8-cream-ink-muted); }

/* --- responsive --- */
@media (max-width: 1024px) {
  .v8-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .booking-split { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .v8-footer-inner { grid-template-columns: 1fr; }
  .hero-inner { padding: calc(var(--v8-hdr-h) + 2rem) 1.2rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}