/* ═══════════════════════════════════════════════════════════════
   AURUM EXECUTIVE TRANSFERS — prototype stylesheet
   Ivory + champagne gold, taken from the business card.

   LIGHT THEME with one dark element: the hero video panel. Bright daytime
   footage cannot carry dark text — whitening it enough to do so destroys the
   picture — so the hero keeps its light-on-dark treatment and reads as a
   cinematic panel at the top. Everything below it is ivory.

   Two golds, and they are not interchangeable:
     --gold        #7E632C  small text on ivory. 4.9:1, clears WCAG AA.
     --gold-lit    #E4CF9B  only ever on the dark hero, where it is legible.
   The champagne #C8A860 from the card is far too pale for text on ivory
   (about 2:1) so it survives as --gold-mid, for button fills and rules only.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* surfaces (light) */
  --ink:        #FBFAF8;   /* page                                        */
  --ink-2:      #F2EFE9;   /* alternating section                         */
  --ink-3:      #FFFFFF;   /* cards                                       */
  --line:       rgba(23,24,28,.13);
  --line-gold:  rgba(126,99,44,.30);

  /* gold */
  --gold:       #7E632C;   /* accent TEXT on ivory — 4.9:1 on alt sections */
  --gold-deep:  #6A5325;
  --gold-mid:   #C8A860;   /* decorative only: button fills, hairlines    */
  --gold-lit:   #E4CF9B;   /* on the dark hero only                       */

  /* the booking card (ivory on the dark hero) */
  --paper:      #F7F5F1;
  --paper-2:    #EFEBE3;

  /* ink */
  --tx:         #17181C;
  --tx-dim:     #5C5D66;
  --tx-dark:    #16171B;   /* inside the booking card                     */
  --tx-dark-dim:#5F6068;

  /* the dark hero panel */
  --hero-ink:   #0B0B0C;
  --tx-on-dark: #F4F3F0;
  --dim-on-dark:#CDCCC7;

  /* type */
  --ff-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ff-ui:      "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* metrics */
  --wrap:       1200px;
  --r:          4px;
  --r-lg:       8px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

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

/* the [hidden] attribute must beat our own display rules (.grid2 is display:grid) */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--ff-ui);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

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

.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;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#FBFAF8; padding:12px 20px; font-size:14px;
}
.skip-link:focus{ left:12px; top:12px }

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}
/* …but inside the dark hero the pale gold is the visible one */
.hero :where(a,button,input,select,textarea,summary,details):focus-visible{
  outline-color:var(--gold-lit);
}

/* icons ───────────────────────────────────────────────────────── */
.ic, .card__ic svg, .inputwrap__ic, .swapbtn svg, .social svg{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic{ width:1em; height:1em; flex:0 0 auto }

/* ─────────────────────────── TYPE ─────────────────────────── */
/* Cormorant defaults to old-style figures — force lining digits so numbers in
   display type read correctly ("1 to 19", not "ı to ıɥ"). */
.h1, .h2, .card h3, .sendstep__h, .rev__q{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "onum" 0;
}

.h1{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0 0 20px;
}
.h1 em{ display:block; font-style:italic; color:var(--gold-lit) }

.h2{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 16px;
}

.eyebrow{
  font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.eyebrow::before{
  content:""; display:inline-block;
  width:22px; height:1px; background:currentColor;
  vertical-align:middle; margin-right:12px; opacity:.7;
}

.lede{ font-size:1.06rem; color:var(--tx-dim); max-width:52ch; margin:0 0 28px }

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 26px;
  border:1px solid transparent; border-radius:var(--r);
  font-family:var(--ff-ui); font-size:.86rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn--sm{ --bh:42px; padding:0 20px; font-size:.76rem }
.btn--full{ width:100%; }

.btn--gold{
  background:linear-gradient(135deg,var(--gold-lit),var(--gold-mid) 55%,#A98A45);
  color:#231B08;   /* 7.5:1 on the mid stop, 5.2:1 on the darkest */
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.btn--gold:hover{ background:linear-gradient(135deg,#F5E7C4,var(--gold-lit) 55%,var(--gold-mid)) }

.btn--outline{ border-color:var(--line-gold); color:var(--gold); background:transparent }
.btn--outline:hover{ background:rgba(126,99,44,.08); border-color:var(--gold) }

.btn--ghost{ border-color:var(--line); color:var(--tx); background:transparent }
.btn--ghost:hover{ border-color:var(--tx-dim); background:rgba(23,24,28,.05) }

/* WhatsApp's bright green gives white text only 3.1:1. This darker green keeps
   the brand read while clearing AA at 5.6:1 (their own palette goes darker
   still — #075E54 — so this is in keeping). */
.btn--wa{ background:#10783C; color:#fff }
.btn--wa:hover{ background:#0C6532 }
.btn--wa .ic{ width:1.15em; height:1.15em }

/* ─────────────────────────── UTILITY BAR ─────────────────────────── */
.utilbar{
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  font-size:.76rem; letter-spacing:.04em;
  color:var(--tx-dim);
}
.utilbar__in{ display:flex; align-items:center; justify-content:space-between; min-height:38px; gap:16px }
.utilbar__item{ display:inline-flex; align-items:center; gap:8px }
.utilbar__item .ic{ color:var(--gold) }
.utilbar__right{ display:flex; align-items:center; gap:20px }
.utilbar a:hover{ color:var(--gold) }

.langsw{ display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.langsw__b{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--tx-dim); font-family:var(--ff-ui); font-size:.72rem;
  font-weight:500; letter-spacing:.1em; padding:5px 11px;
  transition:background .2s, color .2s;
}
.langsw__b:hover{ color:var(--tx) }
.langsw__b.is-on{ background:var(--gold); color:#FBFAF8 }

@media (max-width:720px){
  .utilbar__item span[data-i18n]{ display:none }
  .utilbar__in{ justify-content:space-between }
}

/* ─────────────────────────── HEADER ─────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,248,.82);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.hdr.is-stuck{ background:rgba(251,250,248,.95); border-bottom-color:var(--line) }
.hdr__in{ display:flex; align-items:center; gap:28px; min-height:76px }

.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto }
/* Official logo (brand kit), drawn from the <symbol>s at the top of each page.
   .brand__mark is the WhatsApp avatar — gold A on a navy disc, colours baked into
   the symbol. .brand__word is the kit's AURUM lettering and takes currentColor.
   display:block matters — inline, the SVGs ride the text baseline and width/height
   misbehave (the old footer overlap bug). */
.brand__mark{ display:block; width:44px; height:44px; flex:0 0 auto }
.brand__word{ display:block; width:78px; height:15px; color:var(--tx); fill:currentColor }

.brand__txt{ display:flex; flex-direction:column; line-height:1 }
.brand__txt i{
  font-style:normal; font-size:.56rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-top:6px;
}

.nav{ display:flex; align-items:center; gap:28px; margin-left:auto }
.nav a{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-dim); position:relative; padding:4px 0;
  transition:color .22s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--gold); transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--tx) }
.nav a:hover::after{ right:0 }

.hdr__cta{ display:flex; align-items:center; gap:12px; flex:0 0 auto }

.burger{
  display:none; width:44px; height:44px; padding:11px;
  background:transparent; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer;
}
.burger span{ display:block; height:1.5px; background:var(--tx); margin:4px 0; transition:transform .3s, opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

@media (max-width:1040px){
  .burger{ display:block }
  /* .nav goes position:fixed below, so its margin-left:auto no longer
     pushes the CTA group right — move that job onto .hdr__cta */
  .hdr__cta{ margin-left:auto }
  .nav{
    position:fixed; inset:114px 0 auto; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-block:1px solid var(--line);
    padding:8px 24px 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s, transform .22s var(--ease);
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:.95rem }
  .nav a:last-child{ border-bottom:0 }
  .nav a::after{ display:none }
}
@media (max-width:560px){
  .hdr__in{ min-height:66px; gap:12px }
  .hdr__cta .btn{ display:none }
  .brand__mark{ width:40px; height:40px }
  .brand__word{ width:68px; height:13px }
  .nav{ inset:104px 0 auto }
}

/* ─────────────────────────── HERO ─────────────────────────── */
/* height of the fixed chrome above the hero (utility bar + header) */
:root{ --chrome:114px; --hero-pad:clamp(20px,3.4vh,52px) }
@media (max-width:560px){ :root{ --chrome:104px } }

.hero{
  position:relative; overflow:hidden;
  min-height:calc(100vh - var(--chrome));
  min-height:calc(100svh - var(--chrome));
  display:flex; align-items:center;
  padding-block:var(--hero-pad);
  /* the one dark panel on a light page — also the floor if the poster fails */
  background:var(--hero-ink);
  color:var(--tx-on-dark);
}
/* Everything in the hero is light-on-dark, so it must not inherit the page ink.
   These are the exact values the contrast measurements were taken against. */
.hero .h1{ color:var(--tx-on-dark) }
.hero .h1 em{ color:var(--gold-lit) }
.hero .chips .ic{ color:var(--gold-lit) }

/* ══ HERO BACKGROUND ════════════════════════════════════════════════════════
   Three stacked layers, all pinned to the hero box so the background begins
   and ends exactly with the section — no gap, no bleed into what follows:
     .hero__media   poster image (CSS) with the looping video on top
     .hero__scrim   gradient wash that keeps type readable
     .hero__in      the content
   The grade and the slight blur are baked into the video file itself (see
   build-hero-video.sh), not applied as a CSS filter — a filter on a playing
   video costs GPU on every frame and hurts on cheap phones.
--------------------------------------------------------------------------- */
.hero__media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:#0B0B0C url("../assets/hero-poster.jpg") center 42% / cover no-repeat;
}
.hero__video{
  display:block; width:100%; height:100%;
  object-fit:cover;          /* fills the hero box at any aspect ratio */
  object-position:50% 42%;   /* bias upward — keeps the Acropolis in frame */
  opacity:0; transition:opacity .9s var(--ease);
}
/* set by app.js once the video can actually play, so it dissolves out of the
   poster instead of popping in or flashing black */
.hero__video.is-ready{ opacity:1 }

/* The footage runs at ~90% — a flat 10% mute, nothing more. Legibility is not
   handled by dimming the picture any more; it is handled by the glass panel the
   copy sits on (.hero__copy below). That is the only way to have both: a bright
   video AND readable text over it.

   Measured against the brightest frame of the clip, worst pixel under any
   glyph. Panel 0.60 over scrim 0.10 leaves 36% of the picture showing through
   the glass and still clears AA (tightest element ~5.2:1). At 0.50 the lede
   drops to 3.8:1 and fails, so 0.60 is close to the practical floor. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(6,6,8,.10);
}

/* ── the copy panel ────────────────────────────────────────────────────────
   Dark glass, mirroring the ivory booking card opposite it — same radius, same
   hairline logic — so the hero reads as two deliberate cards over the footage
   rather than text floating on a photo. The blur is cosmetic; every contrast
   number above assumes it does nothing, so the panel is safe without it. */
.hero__copy{
  position:relative;
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,42px);
  border-radius:var(--r-lg);
  background:rgba(6,6,8,.60);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
          backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(200,168,96,.22);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
}
/* the panel does the work now, so the shadows can be light again */
.hero__copy .lede{ text-shadow:0 1px 10px rgba(4,4,6,.5) }
.hero__copy .h1{ text-shadow:0 2px 16px rgba(4,4,6,.45) }
.hero__copy .chips li{ text-shadow:none }
.hero__copy .eyebrow{ text-shadow:none }

/* Over moving footage the dim grey used elsewhere is too weak — lift the hero
   copy and add a soft shadow so it holds up against a bright frame.
   Keep these ABOVE the stacked @media block: same specificity, so the later rule
   wins. Placed after it, they silently cancelled the mobile colour lifts. */
.hero__copy .lede{ color:#DCDBD7; text-shadow:0 1px 22px rgba(4,4,6,.7) }
.hero__copy .h1{ text-shadow:0 2px 30px rgba(4,4,6,.6) }
.hero__copy .chips li{ color:#CDCCC7; text-shadow:0 1px 16px rgba(4,4,6,.75) }
/* the darker --gold measures only 3.8:1 against the brightest frame here;
   the lighter tone clears 4.5:1 and reads better over the footage anyway */
.hero__copy .eyebrow{ color:var(--gold-lit); text-shadow:0 1px 16px rgba(4,4,6,.8) }

/* ── stacked (tablet / phone) ──────────────────────────────────────────────
   On a stacked hero the booking form comes first — it is what people open the
   page for — and the copy panel follows it.

   The footage is anchored behind the copy panel rather than the top of the
   hero, where the opaque form card would hide it completely. app.js measures
   where the panel starts (--copy-top), because that moves with the language
   and the screen width. The band fades in just above the panel and runs to the
   bottom of the hero. It deliberately does not cover the whole stacked hero:
   stretching 16:9 over ~1300px of height crops away most of the frame and the
   Acropolis disappears.
------------------------------------------------------------------------- */
@media (max-width:960px){
  .bookcard{ order:-1 }

  .hero__media{
    inset:auto 0 0 0;
    top:var(--copy-top, 45%);
    height:auto;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 90px, #000 100%);
  }
  /* full height is visible at this aspect, so only the horizontal centre matters */
  .hero__video{ object-position:50% 50% }

  /* Same story as desktop: the picture stays bright and the panel carries the
     text. That also fixes what banding could not — on a stacked hero the copy
     covers the whole video band, so there was nowhere to put a light band. */
  .hero__scrim{ background:rgba(6,6,8,.12) }

  /* a touch more opaque than desktop: the mobile copy sits over the busiest,
     brightest part of the frame, with no protected column to fall back on */
  .hero__copy{
    background:rgba(6,6,8,.62);
    padding:clamp(22px,5vw,30px) clamp(20px,5vw,26px);
  }
  .hero__copy .lede{ color:#FFFFFF }
  .hero__copy .h1 em{ color:#F2E2B4 }
  .hero__copy .chips li{ color:#EAE9E5 }
}

.hero__in{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1fr minmax(374px, 438px);
  gap:clamp(28px,4vw,64px); align-items:center;
}
.hero__copy{ max-width:640px }
.hero__copy .lede{ margin-bottom:22px }

.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px 20px }
.chips li{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--tx-dim) }
.chips .ic{ color:var(--gold); stroke-width:2 }

@media (max-width:960px){
  .hero{ min-height:0; padding-block:clamp(28px,6vw,56px) }
  .hero__in{ grid-template-columns:1fr }
}
/* short laptop screens: pull the hero copy in so it still clears the fold */
@media (min-width:961px) and (max-height:820px){
  .h1{ font-size:clamp(2.2rem,3.4vw,3.1rem) }
  .hero__copy .lede{ font-size:.98rem; margin-bottom:18px }
  .chips li{ font-size:.8rem }
}

/* ─────────────────────────── BOOKING CARD ─────────────────────────── */
.bookcard{
  background:var(--paper);
  color:var(--tx-dark);
  border-radius:var(--r-lg);
  box-shadow:0 32px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(200,168,96,.22);
  overflow:hidden;
  scroll-margin-top:120px;
  display:flex; flex-direction:column;
}

/* On the two-column desktop layout the card is capped to the viewport and
   scrolls INSIDE itself, so the page never has to scroll to reach the button. */
@media (min-width:961px){
  .bookcard{ max-height:calc(100svh - var(--chrome) - (2 * var(--hero-pad))) }
  .bookform__body, .sendstep{ overflow-y:auto; overscroll-behavior:contain }
  /* NOTE: deliberately no `scrollbar-width` / `scrollbar-color` here. Setting
     the standard properties makes Chrome ignore ::-webkit-scrollbar and fall
     back to a macOS overlay scrollbar that is invisible until you drag. The
     -webkit rules below give a real, always-visible, gold-tinted bar. */
  .bookform__body::-webkit-scrollbar{ width:9px }
  .bookform__body::-webkit-scrollbar-track{ background:var(--paper-2) }
  .bookform__body::-webkit-scrollbar-thumb{
    background:#C4B48A; border-radius:99px;
    border:2px solid var(--paper-2);
  }
  .bookform__body::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep) }
}

.bookcard__tabs{ display:flex; border-bottom:1px solid var(--paper-2); flex:0 0 auto }
.tab{
  flex:1; appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--ff-ui); font-size:.76rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-dark-dim); padding:14px 8px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s;
}
.tab:hover{ color:var(--tx-dark) }
.tab.is-on{ color:var(--tx-dark); border-bottom-color:var(--gold-deep) }

/* The card is a flex column: scrolling body + pinned footer, so the submit
   button is always on screen no matter how short the viewport is. */
.bookform{ display:flex; flex-direction:column; min-height:0; padding:0; position:relative }
.bookform__body{ padding:18px 22px 6px; min-height:0 }
.bookform__foot{
  flex:0 0 auto; padding:13px 22px 18px; position:relative;
  border-top:1px solid var(--paper-2);
  background:linear-gradient(180deg, #FBFAF7, var(--paper));
}
/* app.js adds .is-scrollable only when the fields actually overflow, so the
   scrollbar is a real, always-visible one rather than a macOS overlay that
   only appears mid-gesture — and there is never an empty track. */
.bookform__body.is-scrollable{ overflow-y:scroll }
/* soft fade above the pinned footer: signals there is more to scroll */
.bookform__body.is-scrollable + .bookform__foot::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:24px;
  background:linear-gradient(rgba(247,245,241,0), rgba(247,245,241,.97));
  pointer-events:none;
}

.field{ margin-bottom:11px }
.field label{
  display:block; font-size:.63rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-dark-dim); margin-bottom:5px;
}
.field .opt{ text-transform:none; letter-spacing:.02em; font-weight:400; opacity:.7 }

.field input, .field textarea, .field select{
  width:100%; font-family:var(--ff-ui); font-size:.95rem; font-weight:300;
  color:var(--tx-dark); background:#fff;
  border:1px solid #DDD8CE; border-radius:var(--r);
  padding:11px 13px; min-height:46px;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:auto; resize:vertical; line-height:1.5 }
.field input::placeholder, .field textarea::placeholder{ color:#A9A49A }
.field input:hover, .field textarea:hover{ border-color:#C6BFB1 }
.field input:focus, .field textarea:focus{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(200,168,96,.2);
  outline:none;
}
.field input[aria-invalid="true"]{ border-color:#C2453C; box-shadow:0 0 0 3px rgba(194,69,60,.14) }

.inputwrap{ position:relative }
.inputwrap__ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--gold-deep); pointer-events:none;
}
.inputwrap input{ padding-left:40px }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
@media (max-width:420px){ .grid2{ grid-template-columns:1fr } }

/* Pick-up + drop-off share a relative wrapper so the swap button can sit on
   the seam between them regardless of how tall the fields are. */
.routefields{ position:relative }
.swapbtn{
  position:absolute; right:12px; top:50%; z-index:2;
  transform:translateY(-50%);
  width:32px; height:32px; padding:7px;
  background:#fff; color:var(--gold-deep);
  border:1px solid #DDD8CE; border-radius:50%;
  cursor:pointer; transition:transform .3s var(--ease), border-color .2s;
}
.swapbtn:hover{ transform:translateY(-50%) rotate(180deg) }
.swapbtn:hover{ border-color:var(--gold-deep) }
.swapbtn svg{ width:100%; height:100% }

.stepper{ display:flex; align-items:stretch; border:1px solid #DDD8CE; border-radius:var(--r); background:#fff; overflow:hidden }
.stepper button{
  width:46px; flex:0 0 auto; appearance:none; background:#fff; border:0;
  cursor:pointer; font-size:1.15rem; color:var(--tx-dark-dim);
  transition:background .18s, color .18s;
}
.stepper button:hover{ background:var(--paper-2); color:var(--tx-dark) }
.stepper input{
  border:0; border-radius:0; text-align:center; padding:13px 0;
  -moz-appearance:textfield; appearance:textfield;
}
.stepper input:focus{ box-shadow:none }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* vehicle suggestion — capacity, never a price */
.vehhint{
  margin:2px 0 0; padding:9px 12px;
  background:#FFFDF7; border:1px solid #E6DCC2; border-radius:var(--r);
  font-size:.78rem; letter-spacing:.02em; color:#7A6740;
}

/* validation message */
.bookform__err{
  margin:0 0 10px; padding:9px 12px;
  background:#FBEFEE; border:1px solid #E2B7B2; border-radius:var(--r);
  font-size:.8rem; color:#8E3A32;
}

/* collapsible details */
.more{ border-top:1px solid var(--paper-2); margin:12px 0 2px }
.more summary{
  cursor:pointer; list-style:none; padding:12px 0 11px;
  font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); display:flex; align-items:center; gap:9px;
}
.more summary::-webkit-details-marker{ display:none }
.more summary::before{
  content:"+"; font-size:1.05rem; line-height:1; width:18px; text-align:center;
  transition:transform .25s var(--ease);
}
.more[open] summary::before{ content:"−" }
.more__in{ padding-bottom:6px }

.bookform__fine{ margin:10px 0 0; font-size:.73rem; line-height:1.5; color:var(--tx-dark-dim); text-align:center }

/* send step */
.sendstep{ padding:20px 22px 24px }
.sendstep__back{
  appearance:none; background:transparent; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font-family:var(--ff-ui); font-size:.74rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx-dark-dim);
}
.sendstep__back:hover{ color:var(--tx-dark) }
.sendstep__h{ font-family:var(--ff-display); font-weight:500; font-size:1.5rem; margin:0 0 14px }
.sendstep__pre{
  margin:0 0 18px; padding:15px; max-height:230px; overflow:auto;
  background:#fff; border:1px solid #DDD8CE; border-radius:var(--r);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.78rem; line-height:1.6; color:var(--tx-dark);
  white-space:pre-wrap; word-break:break-word;
}
.sendstep__acts{ display:grid; gap:10px }
.sendstep__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sendstep .btn--ghost{ border-color:#DDD8CE; color:var(--tx-dark) }
.sendstep .btn--ghost:hover{ background:var(--paper-2); border-color:#C6BFB1 }

/* ─────────────────────────── SECTIONS ─────────────────────────── */
.sec{ padding:clamp(64px,8vw,116px) 0; position:relative }
.sec--alt{ background:var(--ink-2); border-block:1px solid var(--line) }

.sechead{ max-width:720px; margin:0 auto clamp(36px,4vw,58px); text-align:center }
.sechead .eyebrow::before{ display:none }
.sechead__lede{ font-size:1rem; color:var(--tx-dim); margin:0 }
.sechead--left{ text-align:left; margin-inline:0 }
.sechead--left .eyebrow::before{ display:inline-block }

/* cards */
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.cards3--tight{ margin-top:20px }
@media (max-width:900px){ .cards3{ grid-template-columns:1fr } }

.card{
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 28px;
  box-shadow:0 1px 2px rgba(23,24,28,.04), 0 8px 24px -18px rgba(23,24,28,.18);
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.card:hover{
  border-color:var(--line-gold); transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(23,24,28,.05), 0 18px 40px -22px rgba(23,24,28,.26);
}
.card__ic{ display:block; width:34px; height:34px; color:var(--gold); margin-bottom:18px }
.card__ic svg{ width:100%; height:100% }
.card h3{ font-family:var(--ff-display); font-weight:500; font-size:1.35rem; margin:0 0 10px }
.card p{ margin:0; font-size:.94rem; color:var(--tx-dim) }
.card--flat{ background:transparent; padding:24px 26px; box-shadow:none }
.card--flat h3{ font-size:1.15rem }

/* why */
.why{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,6vw,80px); align-items:start }
@media (max-width:940px){ .why{ grid-template-columns:1fr } }
.why__lede{ font-size:1.02rem; color:var(--tx-dim); margin:0 0 28px }
.why__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.why__list li{ padding:22px 0; border-bottom:1px solid var(--line) }
.why__list li:first-child{ border-top:1px solid var(--line) }
.why__list h3{
  font-size:.82rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin:0 0 8px;
}
.why__list p{ margin:0; font-size:.94rem; color:var(--tx-dim) }

/* reviews */
.reviews{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  max-width:920px; margin-inline:auto }
@media (max-width:900px){ .reviews{ grid-template-columns:1fr } }
/* real reviews now, so a solid card rather than the dashed placeholder */
.rev{
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:0 1px 2px rgba(23,24,28,.04), 0 8px 24px -18px rgba(23,24,28,.18);
  display:flex; flex-direction:column;
}
/* the stars carry the rating, so they are content, not decoration — they use
   the text gold. --gold-mid on white measures 2.3:1 and fails. */
.rev__stars{ margin:0 0 14px; color:var(--gold); font-size:.95rem; letter-spacing:.18em }
.rev__q{
  margin:0 0 18px; font-family:var(--ff-display); font-size:1.12rem;
  font-style:italic; line-height:1.5; color:var(--tx); flex:1 1 auto;
}
.rev__by{ margin:0; font-size:.8rem; letter-spacing:.08em; color:var(--gold) }
.rev__by i{
  display:block; font-style:normal; margin-top:4px;
  font-size:.72rem; letter-spacing:.04em; color:var(--tx-dim);
}
.reviews__more{ margin:26px 0 0; text-align:center; font-size:.88rem }
.reviews__more a{
  color:var(--gold); border-bottom:1px solid var(--line-gold); padding-bottom:2px;
  transition:border-color .2s;
}
.reviews__more a:hover{ border-bottom-color:var(--gold) }

/* faq */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start }
@media (max-width:940px){ .faq{ grid-template-columns:1fr } }
.faq__list{ border-top:1px solid var(--line) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-size:1rem; color:var(--tx); transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover{ color:var(--gold) }
.qa summary::after{
  content:""; position:absolute; right:8px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .28s var(--ease);
}
.qa[open] summary::after{ transform:translateY(-30%) rotate(225deg) }
.qa[open] summary{ color:var(--gold) }
.qa > div{ padding:0 40px 24px 0; font-size:.94rem; color:var(--tx-dim) }

/* contact */
.contact{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(36px,6vw,80px); align-items:start }
@media (max-width:940px){ .contact{ grid-template-columns:1fr } }
.contact__lede{ font-size:1.02rem; color:var(--tx-dim); margin:0 0 32px; max-width:46ch }
.contact__list{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line) }
.contact__list li{
  display:grid; grid-template-columns:150px 1fr; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
@media (max-width:560px){ .contact__list li{ grid-template-columns:1fr; gap:4px } }
.contact__k{ font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-dim) }
.contact__v{ font-size:1rem; color:var(--tx) }
a.contact__v:hover{ color:var(--gold) }

.social{ display:flex; gap:10px }
.social a{
  width:42px; height:42px; padding:11px;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--tx-dim); transition:color .2s, border-color .2s;
}
.social a:hover{ color:var(--gold); border-color:var(--line-gold) }
.social svg{ width:100%; height:100% }

.contact__card{
  background:var(--ink-3); border:1px solid var(--line-gold);
  box-shadow:0 1px 2px rgba(23,24,28,.04), 0 16px 40px -24px rgba(23,24,28,.22);
  border-radius:var(--r-lg); padding:26px; display:grid; gap:10px;
}
.contact__cardk{
  margin:0 0 4px; font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.contact__cardfine{ margin:4px 0 0; font-size:.78rem; color:var(--tx-dim); text-align:center }

/* ─────────────────────────── FOOTER ─────────────────────────── */
.ftr{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(48px,6vw,76px) 0 0 }
.ftr__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px }
@media (max-width:940px){ .ftr__in{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .ftr__in{ grid-template-columns:1fr } }

.ftr__brand .brand__mark{ width:52px; height:52px; margin-bottom:16px }
.ftr__name .brand__word{ width:73px; height:14px }
.ftr__name{ margin:0 0 6px; font-size:.9rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase }
.ftr__name span{ display:block; font-size:.6rem; letter-spacing:.2em; color:var(--gold); margin-top:7px; font-weight:400 }
.ftr__tag{ margin:0 0 16px; font-size:.86rem; color:var(--tx-dim); max-width:34ch }
.ftr__legal{ margin:0; font-size:.74rem; line-height:1.8; color:var(--tx-dim) }

.ftr__col{ display:flex; flex-direction:column; gap:9px }
.ftr__col h4{
  margin:0 0 6px; font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx);
}
.ftr__col a, .ftr__col p{ font-size:.86rem; color:var(--tx-dim); margin:0 }
.ftr__col a{ transition:color .2s }
.ftr__col a:hover{ color:var(--gold) }

.ftr__bar{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  justify-content:space-between; align-items:center;
  margin-top:clamp(36px,5vw,56px); padding-block:22px;
  border-top:1px solid var(--line);
  font-size:.78rem; color:var(--tx-dim);
}
.ftr__bar p{ margin:0 }

/* ─────────────────────────── MOBILE ACTION BAR ─────────────────────────── */
.mobar{
  position:fixed; left:0; right:0; bottom:0; z-index:99;
  display:none; grid-template-columns:repeat(3,1fr);
  background:rgba(251,250,248,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobar__b{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:11px 4px; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-dim); border-right:1px solid var(--line);
}
.mobar__b:last-child{ border-right:0 }
.mobar__b .ic{ width:19px; height:19px }
.mobar__b--wa{ color:#12833F }
.mobar__b--gold{ color:var(--gold) }
@media (max-width:720px){
  .mobar{ display:grid }
  body{ padding-bottom:66px }
}

/* ─────────────────────────── REVEAL ON SCROLL ─────────────────────────── */
.rv-in{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.rv-in.is-vis{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rv-in{ opacity:1; transform:none; transition:none }
  .btn, .card, .veh, .swapbtn{ transition:none }
}

/* ─────────────────────────── BOOKING FORM: LEGAL LINE ─────────────────────────── */
/* Points to the terms and privacy policy at the moment details are collected,
   which is where GDPR expects people to be told. 5.8:1 on the card. */
.bookform__legal{
  margin:6px 0 0; font-size:.7rem; line-height:1.45;
  color:var(--tx-dark-dim); text-align:center;
}
.bookform__legal a{ color:var(--tx-dark); text-decoration:underline; text-underline-offset:2px }

/* ─────────────────────────── LEGAL PAGES ─────────────────────────── */
.legal{ padding:clamp(40px,6vw,84px) 0 clamp(64px,8vw,110px) }
.legal__doc{ max-width:760px; margin-inline:auto }

.legal__draft{
  margin:0 0 34px; padding:14px 18px; border-radius:var(--r);
  background:#FBF3DC; border:1px solid rgba(126,99,44,.35);
  font-size:.86rem; line-height:1.55; color:var(--tx);
}
.legal__h1{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:1.1; letter-spacing:-.01em;
  margin:0 0 10px;
}
.legal__meta{ margin:0 0 30px; font-size:.84rem; color:var(--tx-dim) }

.legal__toc{
  margin:0 0 44px; padding:20px 24px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-lg);
}
.legal__toch{
  margin:0 0 8px; font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.legal__toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; font-size:.9rem }
.legal__toc li{ break-inside:avoid; padding:2px 0 }
.legal__toc a{ color:var(--tx) }
.legal__toc a:hover{ color:var(--gold) }
@media (max-width:560px){ .legal__toc ol{ columns:1 } }

.legal__sec{ scroll-margin-top:100px; margin:0 0 34px }
.legal__sec h2{
  font-family:var(--ff-display); font-weight:500; font-size:1.55rem; line-height:1.25;
  margin:0 0 12px;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1, "onum" 0;
}
.legal__sec p, .legal__sec li{ font-size:.98rem; line-height:1.7; color:var(--tx) }
.legal__sec p{ margin:0 0 12px }
.legal__sec ul, .legal__sec ol{ margin:0 0 14px; padding-left:22px }
.legal__sec li{ margin:0 0 6px }
.legal__sec a{ color:var(--gold); border-bottom:1px solid var(--line-gold) }
.legal__sec a:hover{ border-bottom-color:var(--gold) }
.legal__sec code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em;
  background:var(--ink-2); padding:1px 5px; border-radius:3px;
}

.legal__tablewrap{
  overflow-x:auto; margin:4px 0 16px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-3);
}
.legal__table{ width:100%; min-width:620px; border-collapse:collapse; font-size:.9rem }
.legal__table th, .legal__table td{
  text-align:left; vertical-align:top; padding:12px 14px;
  border-bottom:1px solid var(--line); line-height:1.55;
}
.legal__table th{
  font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-dim); background:var(--ink-2);
}
.legal__table tr:last-child td{ border-bottom:0 }

/* Details still to be supplied or confirmed by Aurum. Delete the <mark> when
   the real value goes in — `grep -c 'class="todo"'` shows what is left. */
mark.todo{ background:#F6E3A6; color:var(--tx); padding:0 3px; border-radius:2px }