/* ============================================================
   P5 CHAUFFEURS — design system + components (PHP build)
   Ported from the Next.js app; framework-agnostic.
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────── */
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/assets/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/assets/fonts/dm-sans-400-normal-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/assets/fonts/dm-sans-500-normal-latin.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/assets/fonts/dm-sans-300-normal-latin.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }

/* ── DESIGN SYSTEM — TOKENS ────────────────────────────── */
:root {
  /* Grounds — warm, never jet-black (private-aviation dark) */
  --espresso:#17130f; --graphite:#211d18; --graphite-2:#2a251f; --slate:#35302a;
  /* Warm light surfaces — travertine / cashmere */
  --ivory:#d8d0c3; --stone:#cec5b8; --stone-2:#b1a68f;
  /* Accent — champagne gold, used with restraint */
  --champagne:#c9a96e; --champagne-soft:#ddc699; --champagne-ink:#a07f43;
  /* Ink on dark / on light — tuned for AA+ contrast */
  --on-dark:#f5f1ea; --on-dark-mid:rgba(245,241,234,0.80); --on-dark-dim:rgba(245,241,234,0.66);
  --on-dark-faint:rgba(245,241,234,0.16); --on-dark-line:rgba(245,241,234,0.14);
  --on-light:#191510; --on-light-mid:#4d4539; --on-light-dim:#5a5140; --on-light-line:rgba(25,21,16,0.16);

  /* Semantic aliases (design-system contract) */
  --color-background:var(--espresso); --color-surface:var(--graphite);
  --color-text:var(--on-dark); --color-muted:var(--on-dark-mid); --color-accent:var(--champagne);
  --font-heading:'Cormorant',Georgia,serif; --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --serif:var(--font-heading); --sans:var(--font-body);
  --container:1280px; --maxw:1280px; --measure:66ch;

  /* Spacing scale (8px base, luxury rhythm) */
  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem; --space-3xl:9rem;

  /* Radius — sharp editorial with a whisper of softness */
  --radius:2px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;

  /* Elevation — soft, warm-tinted shadows (never harsh black) */
  --shadow-xs:0 1px 2px rgba(10,7,4,0.16);
  --shadow-sm:0 4px 14px rgba(10,7,4,0.24);
  --shadow:0 12px 34px rgba(10,7,4,0.30);
  --shadow-md:0 18px 44px rgba(10,7,4,0.36);
  --shadow-lg:0 34px 70px rgba(10,7,4,0.46);
  --shadow-gold:0 10px 30px rgba(201,169,110,0.24);

  /* Motion — smooth, fast, professional */
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:0.55s; --t-fast:0.2s; --t:0.35s; --t-slow:0.7s;

  /* Layout rhythm */
  --pad-x:clamp(1.5rem,5vw,7rem); --sec-quiet:clamp(6rem,12vw,11rem); --sec-dense:clamp(3.75rem,7vw,6.25rem);
  --nav-h:76px;
}
/* Responsive breakpoints (reference): 520 · 640 · 768 · 900 · 1000 · 1280 */

/* ── RESET ─────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--espresso); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--espresso); color:var(--on-dark); font-family:var(--sans);
  font-size:clamp(16.5px,0.5vw + 15.5px,18px); font-weight:400; line-height:1.7; letter-spacing:0.003em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea { font:inherit; }
::selection { background:var(--champagne); color:var(--espresso); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;} }

/* ── TYPE ──────────────────────────────────────────────── */
.display { font-family:var(--serif); font-weight:400; line-height:0.92; letter-spacing:-0.022em; font-size:clamp(3.2rem,8vw,8.5rem); text-wrap:balance; }
.h1 { font-family:var(--serif); font-weight:400; line-height:1.0; letter-spacing:-0.018em; font-size:clamp(2.6rem,5.5vw,5rem); text-wrap:balance; }
.h2 { font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-0.013em; font-size:clamp(2rem,4vw,3.4rem); text-wrap:balance; }
.h3 { font-family:var(--serif); font-weight:400; line-height:1.18; letter-spacing:-0.006em; font-size:clamp(1.5rem,2.4vw,2rem); }
em,.italic { font-style:italic; }
.eyebrow { font-family:var(--sans); font-weight:500; font-size:0.7rem; letter-spacing:0.24em; text-transform:uppercase; }
.lede { font-size:clamp(1.12rem,0.6vw + 1rem,1.32rem); line-height:1.66; font-weight:400; letter-spacing:0.002em; }
.measure { max-width:var(--measure); }
/* Prose rhythm — generous, readable body copy inside .measure blocks */
.measure p { margin-bottom:1.4rem; }
.measure p:last-child { margin-bottom:0; }
.measure > p, .measure li { font-size:clamp(1.02rem,0.4vw + 0.95rem,1.15rem); line-height:1.78; }
/* Fine print. --measure (66ch) already existed and was simply never applied
   here: the fares disclaimer was styled inline at 0.8rem with no width cap,
   so it ran the full 1137px container — 171 characters a line at 12.8px,
   the worst measure on the site by some distance. */
.fineprint { font-size:0.8rem; color:var(--on-dark-dim); max-width:var(--measure); }
/* Long-form legal copy. Restoring .container.measure took these from 152
   characters to 92, but 66ch still over-runs because `ch` measures "0", which
   is about 1.4x the average lowercase glyph in this face. 52ch lands near 70
   real characters — the same line the rest of the site's prose renders. */
.prose p, .prose li { max-width:52ch; }
p { text-wrap:pretty; }

/* ── LAYOUT ────────────────────────────────────────────── */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
/* .measure is declared above .container and carries the same specificity, so
   for the 74 places written as class="container measure" the 1280px --maxw
   simply overwrote the reading measure and the constraint did nothing at all.
   Legal pages were running 152 characters a line as a result, and the same
   dead combination sits in hub-render, page-render and transfer-body, which
   render the generated families. Restoring the intent the markup already
   expresses, at a specificity that survives source order. */
.container.measure { max-width:var(--measure); }
.section { padding-top:var(--sec-quiet); padding-bottom:calc(var(--sec-quiet)*0.82); }
.section--dense { padding-top:var(--sec-dense); padding-bottom:calc(var(--sec-dense)*0.86); }
.on-light { background:var(--ivory); color:var(--on-light); }
.on-stone { background:var(--stone); color:var(--on-light); }
.on-dark { background:var(--espresso); color:var(--on-dark); }
.on-graphite { background:var(--graphite); color:var(--on-dark); }
.split { display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,6vw,7rem); align-items:start; }
.split--even { grid-template-columns:1fr 1fr; }
/* Hero split is even, not .split's 5fr/7fr. That ratio gave the copy the
   narrower column — 407px, about 37 characters a line at the lede's 21px.
   Flipping it to 7fr/5fr fixed the measure but squeezed the media to 407px
   wide against a 420px min-height, hard-cropping a landscape photograph into
   a near-square. Equal columns give 584px each: the measure lands near 53
   characters, which is comfortable for a three-line lede, and the photograph
   keeps a landscape box. Declared above the breakpoint below, which shares
   its specificity, so the single-column collapse still wins on small screens. */
.split-hero__grid { grid-template-columns:1fr 1fr; align-items:center; }
/* Grid items default to min-width:auto, so a track refuses to shrink below its
   content's intrinsic width. The booking widget's inputs carry a ~360px
   intrinsic size, which pushed the .split track to 424px and the document to
   448px inside a 375px viewport — the homepage, pricing, services and airports
   all scrolled sideways on a phone. min-width:0 lets the track shrink; the
   fields then follow their own width:100%. */
.split > *, .split--even > *, .split-hero__grid > * { min-width:0; }
@media (max-width:900px){ .split,.split--even,.split-hero__grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; font-family:var(--sans); font-size:0.74rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; padding:1.1rem 2.1rem; min-height:48px; border-radius:var(--radius-sm); transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease-out); white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--champagne); color:var(--espresso); box-shadow:var(--shadow-xs); }
.btn--primary:hover { background:var(--champagne-soft); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn--ghost { background:transparent; color:currentColor; padding:0 0 4px; border-radius:0; border-bottom:1px solid currentColor; letter-spacing:0.1em; opacity:0.72; min-height:0; box-shadow:none; }
/* .btn carries min-height:48px; --ghost resets it to 0 so the underline sits
   tight to the text, which collapses the control to about 18px tall. That is
   fine to look at and poor to tap — "See what we offer" and the compare link
   are real calls to action sitting well under the 24px WCAG 2.5.8 floor.
   Extending the hit area with a pseudo-element keeps the type exactly where
   it is and takes the touch target past 44px. .btn is already positioned. */
.btn--ghost::after { content:''; position:absolute; inset:-14px -10px; }
.btn--ghost:hover { opacity:1; transform:none; border-bottom-color:var(--champagne); color:var(--champagne); }
.btn[disabled], .btn:disabled { opacity:0.55; cursor:default; transform:none; box-shadow:none; pointer-events:none; }
.tel { display:inline-flex; flex-direction:column; transition:opacity var(--dur) var(--ease); }
.tel:hover { opacity:0.55; }
.tel__label { font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; opacity:0.5; margin-bottom:3px; }
.tel__num { font-family:var(--serif); font-size:1.6rem; letter-spacing:-0.01em; }

.rule { height:1px; background:var(--on-dark-line); border:0; }
.on-light .rule { background:var(--on-light-line); }

/* ── REVEAL / SKIP / A11Y ──────────────────────────────── */
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
.js .reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }
/* Page-load entrance — hero content rises in once, elegantly */
.js .enter { opacity:0; transform:translateY(20px); }
.js .enter.entered { opacity:1; transform:none; transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out); transition-delay:var(--enter-delay,0ms); }
@media (prefers-reduced-motion:reduce){ .js .enter,.js .enter.entered{ opacity:1; transform:none; } }
.skip { position:absolute; left:-9999px; top:0; z-index:999; background:var(--champagne); color:var(--espresso); padding:0.75rem 1.25rem; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; border-radius:0 0 var(--radius-md) 0; }
.skip:focus { left:1rem; top:1rem; }
:focus-visible { outline:2px solid var(--champagne); outline-offset:3px; border-radius:1px; }
.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; }
[id] { scroll-margin-top:calc(var(--nav-h) + 1.5rem); }

/* ── NAV ───────────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; background:rgba(23,19,15,0.55); backdrop-filter:blur(16px) saturate(1.1); border-bottom:1px solid transparent; transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.nav.is-scrolled { background:rgba(20,16,12,0.94); border-bottom-color:var(--on-dark-line); box-shadow:0 10px 30px rgba(0,0,0,0.28); }
.nav__toggle.is-open span { background:transparent; }
.nav__toggle.is-open span::before { transform:translateY(6px) rotate(45deg); }
.nav__toggle.is-open span::after { transform:translateY(-6px) rotate(-45deg); }
.nav__inner { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,2vw,2rem); }
.brand { font-family:var(--serif); font-size:1.5rem; letter-spacing:-0.01em; color:var(--on-dark); white-space:nowrap; flex:none; }
.brand span { color:var(--champagne); }
.nav__links { display:flex; align-items:center; gap:clamp(0.95rem,1.55vw,1.9rem); }
.nav__link { font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--on-dark-mid); transition:color 0.25s var(--ease); white-space:nowrap; }
.nav__link:hover,.nav__link[aria-current="page"] { color:var(--on-dark); }
.nav__cta { display:flex; align-items:center; gap:clamp(1rem,1.4vw,1.4rem); flex:none; }
.nav__cta select[name="set_lang"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(245,241,234,0.66)'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.3rem center; padding-right:1.2rem; -webkit-appearance:none; appearance:none; }

/* -- Account dropdown -- */
.nav__account-wrap{position:relative;display:inline-flex}
.nav__account{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mid,#8a8178);padding:.3rem .5rem;border-radius:4px;background:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:color .15s}
.nav__account:hover{color:var(--on-dark)}
.nav__account-wrap.open .nav__account{color:var(--champagne);border-color:var(--on-dark-line,#3a3530)}
.nav__account-drop{position:absolute;top:calc(100% + 4px);right:0;background:#1f1a16;border:1px solid var(--on-dark-line,#3a3530);border-radius:8px;padding:.35rem;min-width:170px;z-index:150;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.nav__account-wrap.open .nav__account-drop{display:block}
.nav__account-drop a{display:block;padding:.45rem .6rem;border-radius:5px;font-size:.75rem;color:var(--on-dark-mid,#8a8178);text-decoration:none;transition:background .1s var(--ease),color .1s var(--ease)}
.nav__account-drop a:hover{background:rgba(255,255,255,.06);color:var(--on-dark)}
.nav__account-drop a:first-child{border-bottom:1px solid var(--on-dark-line,rgba(255,255,255,.06));margin-bottom:.15rem;padding-bottom:.55rem}.nav__call{ font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--champagne); white-space:nowrap; }
.nav__toggle { display:none; width:40px; height:40px; align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content:''; display:block; width:22px; height:1.5px; background:var(--on-dark); position:relative; transition:transform 0.3s var(--ease); }
.nav__toggle span::before { position:absolute; top:-6px; } .nav__toggle span::after { position:absolute; top:6px; }
.nav__drawer { display:none; }
@media (max-width:1080px){
  /* Mobile nav bar: solid background so it never blends into the page.
     backdrop-filter is unreliable on mobile browsers, so don't depend on it. */
  .nav { background:var(--espresso); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:var(--on-dark-line); }
  .nav__links { display:none; }
  
  /* The account-dropdown rules that used to be repeated here were byte-identical
     to the ones outside this query, so they applied twice for no effect.
     Only .nav__call actually changes at this breakpoint. */
  .nav__call { display:none; }
  .nav__toggle { display:flex; }
  /* display stays flex (visibility gates it) so the slide-in actually animates,
     and overflow-y:auto keeps the long accordion reachable — body scroll is
     locked while the drawer is open, so the drawer must scroll itself. */
  .nav__drawer { position:fixed; inset:var(--nav-h) 0 0; background:var(--espresso); z-index:99; display:flex; flex-direction:column; padding:2rem var(--pad-x) 3rem; gap:0.4rem; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; visibility:hidden; transform:translateX(100%); transition:transform 0.4s var(--ease), visibility 0.4s; }
  .nav__drawer.open { visibility:visible; transform:none; }
  .nav__drawer a { padding:1rem 0; font-size:1.1rem; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); }
}

/* ── MEGA MENU ─────────────────────────────────────────── */
.nav__links { position:static; }
/* Full-bar-height hover box: without it there's a ~28px dead zone between the
   link and the mega panel and the menu flickers shut on the way down. */
.nav__item { position:static; display:flex; align-items:center; height:var(--nav-h); }
.nav__link.on { color:var(--on-dark); }
.nav__link--mega { display:inline-flex; align-items:center; gap:0.3rem; }
.nav__caret { font-size:0.6rem; transition:transform 0.25s var(--ease); opacity:0.7; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform:rotate(180deg); }
.mega {
  position:absolute; left:0; right:0; top:var(--nav-h);
  background:rgba(23,19,15,0.98); backdrop-filter:blur(18px);
  border-top:1px solid var(--on-dark-line); border-bottom:1px solid var(--on-dark-line);
  box-shadow:0 30px 60px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index:90;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity:1; visibility:visible; transform:none; }
.mega__inner { max-width:var(--maxw); margin-inline:auto; padding:2.4rem var(--pad-x) 2.6rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem 2.5rem; }
.mega__col { display:flex; flex-direction:column; gap:0.15rem; }
.mega__heading { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--champagne); margin-bottom:0.7rem; }
.mega__link { font-size:0.88rem; color:var(--on-dark-mid); padding:0.32rem 0; transition:color 0.2s var(--ease); }
.mega__link:hover { color:var(--on-dark); }
.mega__viewAll { margin-top:0.5rem; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--champagne); }
.mega__viewAll:hover { color:var(--champagne-soft); }
.nav__account { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-mid); }
.nav__account:hover { color:var(--on-dark); }
@media (max-width:1220px){ .nav__account { display:none; } }

/* Mobile drawer accordion */
.nav__drawerLink { padding:1rem 0; font-size:1.1rem; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark); }
.nav__drawerGroup { border-bottom:1px solid var(--on-dark-line); }
.nav__drawerGroup > summary { padding:1rem 0; font-size:1.1rem; color:var(--on-dark); cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.nav__drawerGroup > summary::after { content:'+'; color:var(--champagne); }
.nav__drawerGroup[open] > summary::after { content:'–'; }
.nav__drawerHeading { display:block; font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--champagne); margin:0.8rem 0 0.3rem; }
.nav__drawerGroup a { display:block; padding:0.5rem 0 0.5rem 0.8rem; font-size:0.95rem; color:var(--on-dark-mid); border:0; }

/* ── HERO ──────────────────────────────────────────────── */
.hero { min-height:94svh; display:flex; align-items:flex-end; padding-top:var(--nav-h); position:relative; overflow:hidden; background:var(--espresso); }
.hero .hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
/* Cinematic scrim — legibility on the lower-left, a warm gold wash top-left, grounded base */
.hero::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,16,12,0.88) 0%, rgba(20,16,12,0.56) 34%, rgba(20,16,12,0.12) 66%, transparent 100%),
    linear-gradient(180deg, rgba(20,16,12,0.42) 0%, transparent 26%, transparent 50%, rgba(15,11,8,0.94) 100%),
    radial-gradient(120% 90% at 10% 6%, rgba(201,169,110,0.13), transparent 52%); }
.hero > * { position:relative; z-index:2; }
.hero__inner { padding-bottom:clamp(3.5rem,7vw,6.5rem); text-shadow:0 2px 30px rgba(10,7,4,0.5); }
.hero__inner .btn { text-shadow:none; }
.hero .eyebrow { color:var(--champagne); margin-bottom:1.7rem; }
.hero__lede { color:var(--on-dark); opacity:0.92; max-width:50ch; margin:2rem 0 2.8rem; }
.hero__cta { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
@media (max-width:560px){ .hero__cta { gap:1.4rem; } .hero__cta .btn--primary { width:100%; } }

/* ── GENERIC SECTIONS / CARDS ──────────────────────────── */
.head { max-width:54ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.head .eyebrow { color:var(--champagne); margin-bottom:1.2rem; }
.head--center { margin-inline:auto; text-align:center; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:820px){ .grid3{ grid-template-columns:1fr; } .grid2{ grid-template-columns:1fr; } }
.card2 { position:relative; border:1px solid var(--on-dark-line); border-radius:var(--radius-md); padding:2rem 1.9rem; display:flex; flex-direction:column; gap:0.8rem; background:linear-gradient(180deg, rgba(255,255,255,0.012), transparent); transition:border-color var(--t) var(--ease),transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease); }
/* Only anchors get the lift and the arrow. 115 .card2 are genuine links, but
   19 are plain divs (chauffeurs, blog, index) — those were rising on hover
   and showing a "go here" arrow while doing nothing at all when clicked.
   Static cards now keep a quiet border warm-up so the row still feels alive. */
a.card2:hover { border-color:rgba(201,169,110,0.55); transform:translateY(-4px); box-shadow:var(--shadow); }
div.card2:hover { border-color:rgba(201,169,110,0.28); }
a.card2::after { content:'→'; position:absolute; top:1.4rem; right:1.5rem; color:var(--champagne); opacity:0; transform:translateX(-6px); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out); }
aa.card2:hover::after { opacity:1; transform:none; }
/* Fare-table links inside a card ("Heathrow -> Central London" and its
   reverse) sat at 21px, and they come in pairs, so two 21px targets stack
   close together on a phone. Vertical padding on an inline element grows the
   hit area without adding to the line box, so the tap target clears 32px and
   the fare list keeps its exact rhythm. */
div.card2 a { padding-block:7px; }
.card2__media { margin:-2rem -1.9rem 0.6rem; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-md) var(--radius-md) 0 0; background:#14100d; }
.card2__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.9s var(--ease-out); }
.card2:hover .card2__media img { transform:scale(1.04); }
.card2 .n { font-family:var(--serif); color:var(--champagne); font-size:1.2rem; }
.card2 h3 { font-family:var(--serif); font-size:1.45rem; font-weight:400; line-height:1.15; }
.card2 p { font-size:0.94rem; line-height:1.6; color:var(--on-dark-mid); }
.on-light .card2, .on-stone .card2 { border-color:var(--on-light-line); background:linear-gradient(180deg, rgba(0,0,0,0.015), transparent); }
.on-light .card2 p, .on-stone .card2 p { color:var(--on-light-mid); }
.on-light .card2 h3, .on-stone .card2 h3 { color:var(--on-light); }
.on-light .card2 .n, .on-stone .card2 .n { color:var(--champagne-ink); }
.on-light .card2:hover, .on-stone .card2:hover { box-shadow:0 16px 40px rgba(25,21,16,0.12); }

.stats { display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; gap:0.4rem; }
.stat b { font-family:var(--serif); font-size:clamp(2.1rem,3vw,2.6rem); font-weight:400; color:var(--champagne); line-height:1; }
.stat span { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-dim); }
/* On light grounds, champagne needs its ink variant for AA contrast */
.on-light .stat b, .on-stone .stat b { color:var(--champagne-ink); }
.on-light .stat span, .on-stone .stat span { color:var(--on-light-dim); }

/* ── FLEET CARDS (image + body) ────────────────────────── */
.fleetgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:820px){ .fleetgrid { grid-template-columns:1fr; } }
.fleetcard { display:flex; flex-direction:column; border:1px solid var(--on-dark-line); border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.014), transparent); transition:border-color var(--t) var(--ease),transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease); }
.fleetcard:hover { border-color:rgba(201,169,110,0.5); transform:translateY(-4px); box-shadow:var(--shadow); }
/* Every fleet photograph is 640x349 (ratio 1.834). The frame was 16/10 —
   1.600 — so object-fit:cover was trimming the sides off each vehicle, which
   on a car is exactly where the front and rear are. Matching the frame to the
   source shows the whole car and removes the crop. */
.fleetcard__media { position:relative; aspect-ratio:640/349; overflow:hidden; background:#14100d; }
.fleetcard__media img { width:100%; height:100%; object-fit:cover; transition:opacity 0.8s var(--ease), transform 0.9s var(--ease-out); }
.fleetcard:hover .fleetcard__media img { transform:scale(1.045); }
.fleetcard__tag { position:absolute; top:0.9rem; left:0.9rem; font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark); background:rgba(20,16,12,0.82); backdrop-filter:blur(6px); border:1px solid var(--on-dark-line); padding:0.4rem 0.7rem; border-radius:var(--radius-pill); }
.fleetcard__body { padding:1.5rem 1.7rem 1.75rem; display:flex; flex-direction:column; gap:0.55rem; }
.fleetcard__body h3 { font-family:var(--serif); font-size:1.5rem; font-weight:400; line-height:1.1; }
.fleetcard__specs { font-size:0.68rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--champagne); }
.fleetcard__body p { font-size:0.92rem; line-height:1.6; color:var(--on-dark-mid); }

/* ── STATEMENT BAND (full-bleed image + single line) ───── */
.statement { position:relative; overflow:hidden; padding-top:var(--sec-quiet); padding-bottom:var(--sec-quiet); background:var(--espresso); }
.statement__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.statement::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,14,10,0.95) 0%, rgba(18,14,10,0.74) 42%, rgba(18,14,10,0.30) 82%, rgba(18,14,10,0.12) 100%),
    linear-gradient(0deg, rgba(15,11,8,0.55), transparent 55%); }
.statement__inner { position:relative; z-index:2; }
.statement .eyebrow { color:var(--champagne); margin-bottom:1.2rem; }
.statement__lede { color:var(--on-dark); opacity:0.9; max-width:42ch; margin-top:1.6rem; }

/* ── FILM GRAIN — the signature texture that unifies all photography.
   Pre-baked PNG tile (alpha baked in): SVG feTurbulence here stalls
   Chrome's compositor on large surfaces — do not swap it back. ── */
.grain::after, .split-hero__media::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:url('/assets/img/site/grain.png'); }

/* ── INTERIOR PAGE HERO MEDIA — same cinematic treatment as the homepage ── */
.split-hero__media { border:1px solid var(--on-dark-line); box-shadow:var(--shadow-sm); background:#14100d; }
/* The scrim is decorative here — unlike the homepage statement block, no text
   is set over this media, so it carries no legibility duty. At 0.36 it was
   washing dark photography (the /chauffeurs dusk interior, for one) down to
   almost exactly the espresso page ground, so the image lost its edges and
   the hero read as an empty right-hand column. Halved, plus a small tonal
   lift on the image itself, so a dark photograph still reads as a photograph.
   Kept, not removed: it kills the flat pasted-on look on brighter shots. */
.split-hero__media::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(200deg, transparent 58%, rgba(15,11,8,0.17)),
    linear-gradient(0deg, rgba(23,19,15,0.09), transparent 34%); }
.split-hero__media img { filter:brightness(1.05) contrast(1.03) saturate(1.02); }
.split-hero__media img { transition:opacity 0.8s var(--ease), transform 1.2s var(--ease-out); }
.split-hero__media:hover img { transform:scale(1.025); }

/* ── IMAGE FADE-IN — media arrives on its espresso ground, no pop-in.
   site.js adds .imgwait to not-yet-loaded media images and removes it
   on load; the opacity transition on each media selector does the rest. ── */
.js img.imgwait { opacity:0; }
.hero__media img, .statement__bg { transition:opacity 0.8s var(--ease); }

/* ── SHARED PAGE PATTERNS — one source for every template.
   These replace per-template inline styles so all 5,000+ pages
   inherit the same treatment from a single place. ──────── */

/* First section under the fixed nav */
.section--head { padding-top:calc(var(--nav-h) + 3rem); }
.section--snug { padding-bottom:var(--sec-dense); }

/* Breadcrumb trail */
.crumbs { margin-bottom:1.5rem; font-size:.75rem; color:var(--on-dark-dim); }
.crumbs a { color:var(--on-dark-mid); transition:color var(--t-fast) var(--ease); }
.crumbs a:hover { color:var(--champagne); }

/* Eyebrows + lede links pick their ink from the section ground */
.on-light .head .eyebrow, .on-stone .head .eyebrow { color:var(--champagne-ink); }
.lede a { color:var(--champagne); }
.on-light .lede a, .on-stone .lede a { color:var(--champagne-ink); }

/* Split-hero media panel (interior page heroes) */
/* The 420px floor made the box taller than the photography wants. Against an
   even hero split the frame came out at 488x420 — a 1.16 ratio holding a 1.5
   landscape source, so cover-fit threw away the sides of every shot. On the
   /chauffeurs dusk interior that cropped out the bright windscreen entirely
   and left only the near-black dashboard, which is why the hero read as an
   empty column. 340px puts the frame near 1.43 and the photograph survives. */
.split-hero__media { position:relative; overflow:hidden; border-radius:var(--radius-md); min-height:clamp(260px,26vw,340px); }
.split-hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Split-hero text column rhythm */
.split-hero .eyebrow { color:var(--champagne); margin-bottom:1.6rem; }
.split-hero .display { font-size:clamp(2.8rem,5vw,5rem); }
.split-hero .lede { color:var(--on-dark-mid); max-width:44ch; margin-top:1.6rem; }

/* Section head lede rhythm (below the h1/h2) */
.head .lede { color:var(--on-dark-mid); margin-top:1rem; }
.on-light .head .lede, .on-stone .head .lede { color:var(--on-light-mid); }

/* Mini-booking bar sits above trust stats */
.mb-wrap { margin-bottom:3rem; }

/* Key-fact pairs under a hero lede */
.sh-facts { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 2rem; margin-top:2rem; max-width:34rem; }
.sh-facts > div { display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--on-dark-line); padding-top:.6rem; }
.sh-facts > div > span:first-child { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-dim); }
.sh-facts > div > span:last-child { font-size:.95rem; color:var(--on-dark); }

/* CTA button rows — flex gap survives wrapping (no margin hacks) */
.cta-row { display:flex; align-items:center; gap:1rem 1.5rem; flex-wrap:wrap; margin-top:2.2rem; }
.cta-row--center { justify-content:center; margin-top:0; }

/* Data tables — fleet, comparisons, routes */
.tablewrap { overflow-x:auto; margin-top:2.5rem; }
.table { width:100%; border-collapse:collapse; font-size:.9rem; color:var(--on-dark); }
.table th { text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark-dim); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.table td { padding:.7rem .8rem; border-bottom:1px solid var(--on-dark-line); color:var(--on-dark-mid); transition:background var(--t-fast) var(--ease); }
.table tbody tr:hover td { background:rgba(201,169,110,0.045); }
.table .t-lead { color:var(--on-dark); font-weight:600; }
.table th.t-center, .table td.t-center { text-align:center; }
.table th.t-price, .table td.t-price { text-align:right; }
.table td.t-price { font-family:var(--serif); font-size:1.02rem; color:var(--champagne); }
.table a { color:inherit; text-decoration:none; border-bottom:1px solid var(--champagne); }
.table .t-badge { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--champagne); border:1px solid var(--on-dark-line); padding:.1rem .4rem; border-radius:3px; margin-left:.4rem; white-space:nowrap; }
.on-light .table, .on-stone .table { color:var(--on-light); }
.on-light .table th, .on-stone .table th { border-color:var(--on-light-line); color:var(--on-light-dim); }
.on-light .table td, .on-stone .table td { border-color:var(--on-light-line); color:var(--on-light-mid); }
.on-light .table .t-lead, .on-stone .table .t-lead { color:var(--on-light); }
.on-light .table td.t-price, .on-stone .table td.t-price { color:var(--champagne-ink); }
.on-light .table a, .on-stone .table a { border-bottom-color:var(--champagne-ink); }

/* FAQ accordion rows */
.faq { border-bottom:1px solid var(--on-dark-line); padding:1.2rem 0; }
.faq > summary { font-family:var(--serif); font-size:1.2rem; cursor:pointer; list-style:none; position:relative; padding-right:2.2rem; transition:color var(--t-fast) var(--ease); }
.faq > summary::marker, .faq > summary::-webkit-details-marker { display:none; content:''; }
.faq > summary::after { content:'+'; position:absolute; right:0.3rem; top:50%; translate:0 -50%; font-family:var(--sans); font-weight:300; font-size:1.25rem; line-height:1; color:var(--champagne); transition:transform 0.3s var(--ease); }
.faq[open] > summary::after { transform:rotate(45deg); }
/* Answers were unconstrained at 813px — 87 characters a line. The question
   above is a heading and reads fine long; the answer is prose and does not.
   Deliberately not var(--measure) here. `ch` is the width of "0", which is
   0.68em in this face, and --measure (66ch) resolves against whichever
   element carries it. On .measure containers that is a smaller font-size and
   lands at 63-66 real characters; on an 18px answer it resolves to 812px and
   lands at 87. 52ch reproduces the same ~68-character line the rest of the
   site's prose actually renders. */
.faq p { max-width:52ch; }
.faq > p { color:var(--on-dark-mid); margin-top:.7rem; line-height:1.7; }
.on-light .faq, .on-stone .faq { border-bottom-color:var(--on-light-line); }
.on-light .faq > summary, .on-stone .faq > summary { color:var(--on-light); }
.on-light .faq > p, .on-stone .faq > p { color:var(--on-light-mid); }
.faq[open] > p { animation:faqIn 0.35s var(--ease-out); }
@keyframes faqIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
/* Smooth height on browsers with interpolate-size; others get the fade above */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size:allow-keywords; }
  .faq::details-content { height:0; overflow:clip; transition:height 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .faq[open]::details-content { height:auto; }
}

/* At-a-glance definition rows */
.glance { margin-top:2.5rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.4rem 2rem; }
.glance > div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--on-dark-line); }
.glance dt { color:var(--on-dark-dim); font-size:.82rem; }
.glance dd { margin:0; text-align:right; font-size:.9rem; }

/* Tick lists (what's included) */
.ticks { list-style:none; margin-top:2rem; display:grid; gap:.7rem; max-width:34rem; }
.ticks li { position:relative; padding-left:1.5rem; color:var(--on-dark-mid); line-height:1.55; }
.ticks li::before { content:'\2713'; position:absolute; left:0; color:var(--champagne); }
.on-light .ticks li, .on-stone .ticks li { color:var(--on-light-mid); }
.on-light .ticks li::before, .on-stone .ticks li::before { color:var(--champagne-ink); }

/* Numbered steps (how to book) */
.steps { margin-top:1.5rem; display:grid; gap:1.2rem; }
.steps > div { display:flex; gap:1rem; }
.steps .n { font-family:var(--serif); color:var(--champagne); font-size:1.2rem; }
.steps h3 { font-family:var(--serif); font-weight:400; line-height:1.2; font-size:1.2rem; }
.steps p { color:var(--on-dark-mid); margin-top:.3rem; line-height:1.6; }

/* Centred pull-quote (client review band, on stone) */
.pull { text-align:center; }
.pull blockquote { margin:0; }
.pull blockquote p { font-family:var(--serif); font-size:clamp(1.4rem,2.5vw,2rem); line-height:1.4; color:var(--on-light); }
.pull footer { margin-top:1.2rem; }
.pull cite { font-style:normal; color:var(--on-light-mid); }
.pull small { color:var(--on-light-dim); font-size:.85rem; }
/* …and its variant over a statement image (generated-page review band) */
.pull--dark blockquote p { color:var(--on-dark); }
.pull--dark cite { color:var(--on-dark-mid); }
.pull--dark small { color:var(--on-dark-dim); }

/* Longform prose — journal articles, legal pages, migrated stories.
   :where() keeps heading specificity at zero so explicit .h2/.h3
   classes in template markup still win where they're used. */
.prose { color:var(--on-dark-mid); line-height:1.85; }
:where(.prose) h2 { font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-0.01em; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--on-dark); margin:2rem 0 1rem; }
:where(.prose) h3 { font-family:var(--serif); font-weight:400; line-height:1.2; font-size:1.35rem; color:var(--on-dark); margin:1.6rem 0 .8rem; }
.prose h2.h2, .prose h3.h3 { color:var(--on-dark); }
.prose h2.h2 { margin:2rem 0 1rem; }
.prose h3.h3 { margin:1.6rem 0 .8rem; }
.prose p { margin-bottom:1.1rem; }
.prose p:last-child { margin-bottom:0; }
.prose ul, .prose ol { margin:0 0 1.1rem 1.35rem; }
.prose li { margin-bottom:.45rem; }
.prose a { color:var(--champagne); border-bottom:1px solid rgba(201,169,110,0.35); transition:border-color var(--t-fast) var(--ease); }
.prose a:hover { border-bottom-color:var(--champagne); }
.prose blockquote { border-left:2px solid var(--champagne); padding-left:1.2rem; margin:1.6rem 0; font-family:var(--serif); font-size:1.15rem; color:var(--on-dark); }
.prose strong { color:var(--on-dark); font-weight:500; }

/* ── FOOTER ────────────────────────────────────────────── */
.footer { background:var(--graphite); border-top:1px solid var(--on-dark-line); }
.footer__top { display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(2rem,6vw,5rem); padding:clamp(3.5rem,7vw,6rem) var(--pad-x) 3rem; max-width:var(--maxw); margin-inline:auto; }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr; } }
.footer__logo { font-family:var(--serif); font-size:1.6rem; margin-bottom:1rem; } .footer__logo span{ color:var(--champagne); }
.footer__line { color:var(--on-dark-mid); max-width:40ch; margin-bottom:1.4rem; font-size:0.9rem; }
.footer__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:520px){ .footer__cols{ grid-template-columns:1fr 1fr; } }
.footer__col h3 { font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:1rem; }
.footer__col a { display:block; padding:0.35rem 0; font-size:0.86rem; color:var(--on-dark-mid); transition:color 0.2s var(--ease); }
.footer__col a:hover { color:var(--champagne); }
.footer__bar { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.4rem var(--pad-x); border-top:1px solid var(--on-dark-line); max-width:var(--maxw); margin-inline:auto; font-size:0.76rem; color:var(--on-dark-dim); }
.footer__legal { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; } .footer__legal a:hover { color:var(--champagne); }
/* Eight legal links sat around 18px tall in a wrapped row — not prose, so the
   WCAG inline-link exception does not cover them. Vertical padding takes each
   past the 24px floor without moving the row apart, since the flex row gap
   already supplies the visual separation. */
.footer__legal a { display:inline-flex; align-items:center; min-height:32px; padding-block:2px; }

/* ── MOBILE STICKY ACTION BAR ──────────────────────────── */
/* Phone-only persistent booking access on long content pages. Suppressed
   on / and /book (the full widget is already the point there). Reveals past
   the hero and hides over the footer via site.js — utility, not pressure. */
.stickybar { position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; gap:0.55rem;
  padding:0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom,0px));
  background:rgba(23,19,15,0.90); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-top:1px solid var(--on-dark-line); transform:translateY(115%); transition:transform 0.45s var(--ease); will-change:transform; }
.stickybar.is-visible { transform:none; }
.stickybar a { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; min-height:50px;
  border-radius:var(--radius-sm); font-family:var(--sans); font-size:0.72rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; }
.stickybar__cta { flex:1 1 auto; background:var(--champagne); color:var(--espresso); }
.stickybar__call { flex:0 0 auto; padding:0 1.2rem; border:1px solid var(--on-dark-line); color:var(--on-dark); }
.stickybar__call svg { width:16px; height:16px; }
@media (max-width:720px){ .stickybar { display:flex; } }
@media (prefers-reduced-motion:reduce){ .stickybar { transition:none; } }

/* Trust strip — decision-point social proof */
.trust-strip{margin-top:1.2rem;padding:1rem 1.2rem;border:1px solid rgba(245,241,234,.14)}
.trust-strip__agg{font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-mid);margin:0 0 .6rem}
.trust-strip__agg strong{color:var(--champagne,#c9a96e);font-size:.95rem}
.trust-strip__quote{margin:.5rem 0 0;font-size:.85rem;line-height:1.5;color:var(--on-dark-mid);font-style:italic}
.trust-strip__quote cite{display:block;margin-top:.25rem;font-style:normal;font-size:.72rem;opacity:.7}
.trust-strip--result{margin-top:.9rem;padding:.7rem .9rem}
.trust-strip--result .trust-strip__agg{margin:0}

/* ── FORM FIXES ─────────────────────────────────────────── */
.bw__field textarea { background:transparent; border:1px solid var(--on-dark-line); color:var(--on-dark); padding:0.8rem; color-scheme:dark; resize:vertical; min-height:44px; border-radius:2px; }

/* ── WHATSAPP BUTTON MOBILE FIX ─────────────────────────── */
@media (max-width:720px) { body > a[aria-label*="WhatsApp"] { bottom: calc(5.2rem + 4rem) !important; } }