/* ==========================================================================
   Taxi Service Paris

   Every colour, space, radius, size and type step comes from
   assets/design-tokens.css (primitive -> semantic -> component), generated from
   assets/design-tokens.json, which follows docs/brand-guidelines.md.
   The only literals here are media-query breakpoints, which cannot use var().
   ========================================================================== */

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

/* The UA rule for [hidden] loses to any author `display`, and `svg` is set to
   block below. Without this the icon sprite renders as an empty band. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-sm));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-muted);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
/* Without this the width/height attributes fix the used height, so aspect-ratio
   and object-fit are ignored: the journal photos rendered 941px tall at every
   width. The attributes still reserve space before the image loads. */
img, video { height: auto; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg .is-filled, symbol.is-filled { fill: currentColor; stroke: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3 { margin: 0; color: var(--color-ink); font-weight: 700; text-wrap: balance; }
/* Same family, wider cut: Archivo's width axis gives the display sizes presence
   without a second typeface. Tracking tightens as the width opens. */
h1, h2 { font-stretch: var(--font-stretch-display); }
h1 { font-size: var(--text-h1); line-height: 1; letter-spacing: -.04em; }
h2 { font-size: var(--text-h2); line-height: 1.04; letter-spacing: -.03em; }
h3 { font-size: var(--text-lg); line-height: 1.3;  letter-spacing: -.01em; font-weight: 600; }
p  { margin: 0; text-wrap: pretty; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: var(--space-sm); top: calc(-1 * var(--control-lg) - var(--space-sm));
  z-index: 100; display: inline-flex; align-items: center;
  min-height: var(--tap); padding-inline: var(--space-sm);
  background: var(--color-accent-surface); color: var(--color-on-accent);
  font-size: var(--text-sm); font-weight: 600;
  transition: top var(--ease) var(--curve);
}
.skip:focus { top: var(--space-sm); }

.wrap {
  width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* Film grain over the whole page breaks the flatness of large fills. It sits on
   one fixed, non-interactive layer, so nothing repaints it while scrolling. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none;
  opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Every section is a filled slab. The page alternates light grey, white and two
   darks in a fixed rhythm, so a dark band reads as a deliberate beat rather than
   an accident. */
.section { padding-block: var(--space-4xl); }
.section--tight { padding-block: var(--space-3xl); }
.section--muted { background: var(--color-muted); }
.section--dark  { background: var(--color-dark); }
.section--deep  { background: var(--color-dark-deep); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-on-dark); }
/* Zero specificity on purpose: as `.section--dark p` this outranked every
   classed paragraph, so the red eyebrows in dark sections came out grey. */
:where(.section--dark) p { color: var(--color-on-dark-muted); }

/* Ambient brand light on dark slabs: two soft red pools, top right and bottom
   left. Behind the content, never under small text at full strength. */
.section--glow { position: relative; isolation: isolate; }
.section--glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 60% at 92% 0%, var(--color-glow), transparent 72%),
    radial-gradient(40% 50% at 0% 100%, var(--color-glow), transparent 72%);
}

.eyebrow {
  display: flex; align-items: center; gap: var(--space-2xs);
  margin-bottom: var(--space-sm); color: var(--color-accent-text);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.4;
}
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: currentColor; }
.eyebrow--onDark { color: var(--color-accent-text-on-dark); }

.head {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-2xl); align-items: end;
  margin-bottom: var(--space-2xl);
}
.head__note { max-width: var(--measure); color: var(--color-ink-muted); font-size: var(--text-sm); }
.section--dark .head__note { color: var(--color-on-dark-muted); }
.head--rated { align-items: center; }

.note {
  max-width: var(--measure-lg); margin-top: var(--space-lg);
  padding-left: var(--space-sm); border-left: 2px solid var(--color-accent);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: var(--btn-min-h); padding-inline: var(--btn-pad-x);
  border: 1px solid transparent; border-radius: var(--btn-radius);
  font-family: inherit; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .02em; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--ease) var(--curve), color var(--ease) var(--curve),
              border-color var(--ease) var(--curve), transform var(--ease-fast) var(--curve);
}
.btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; transition: transform var(--ease) var(--curve); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: var(--control-lg); padding-inline: var(--space-lg); font-size: var(--text-base); }

.btn--accent { background: var(--btn-accent-bg); color: var(--btn-accent-fg); }
.btn--accent:hover { background: var(--btn-accent-hover); }
/* --dark sits on light surfaces and inverts with the theme; --light only ever
   sits on dark surfaces and stays white in both. In dark mode the old pair
   both rendered as dark boxes on dark backgrounds. Hovers mix toward the page
   so they move the right way in either theme. */
.btn--dark   { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn--dark:hover { background: color-mix(in srgb, var(--btn-dark-bg) 82%, var(--color-paper)); }
.btn--light  { background: var(--btn-light-bg); color: var(--btn-light-fg); }
.btn--light:hover { background: color-mix(in srgb, var(--btn-light-bg) 84%, var(--color-dark-deep)); }
.btn--glass  { background: transparent; border-color: color-mix(in srgb, var(--color-on-dark) 34%, transparent); color: var(--color-on-dark); }
.btn--glass:hover { background: var(--color-hairline-dark); border-color: var(--color-on-dark); }

/* Trailing arrow in its own square chip, flush with the button's right edge:
   the arrow moves inside it on hover while the label stays put. */
.btn--chip { gap: var(--space-sm); padding-right: 6px; }
.btn__chip {
  display: grid; place-items: center; flex: none;
  width: calc(var(--btn-min-h) - 12px); height: calc(var(--btn-min-h) - 12px);
  border-radius: 2px; background: color-mix(in srgb, currentColor 16%, transparent);
  transition: background-color var(--ease) var(--curve);
}
.btn--lg .btn__chip { width: calc(var(--control-lg) - 12px); height: calc(var(--control-lg) - 12px); }
.btn--chip:hover .btn__chip { background: color-mix(in srgb, currentColor 26%, transparent); }
.btn--ghost  { background: transparent; border-color: var(--btn-ghost-border); color: var(--btn-ghost-fg); }
.btn--ghost:hover { background: var(--btn-ghost-hover); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--btn-disabled-bg); color: var(--btn-disabled-fg);
  cursor: not-allowed; pointer-events: none; transform: none;
}

/* -------------------------------------------------------------- topbar --- */

.topbar { background: var(--color-dark-deep); color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--topbar-h); }
.topbar p { margin: 0; }
.topbar ul { display: flex; align-items: center; gap: var(--space-sm); }
.topbar li { position: relative; }
.topbar li + li::before { content: ""; position: absolute; left: calc(-1 * var(--space-2xs)); top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--color-dark-border); }
.topbar a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  transition: color var(--ease) var(--curve);
}
.topbar a:hover { color: var(--color-on-dark); }
.topbar__tel { color: var(--color-on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- header --- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--ease) var(--curve);
}
.header.is-stuck { box-shadow: var(--shadow-header); }
.header__inner { position: relative; display: flex; align-items: center; gap: var(--space-lg); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; min-height: var(--tap); flex: none; }
.brand img { width: auto; height: 56px; } /* horizontal lock-up: "PARIS" stays ~9px tall */
.brand__dark { display: none; }
/* Dark theme: the colour logo's black wordmark vanished on the dark header. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__light { display: none; }
  :root:not([data-theme="light"]) .brand__dark { display: block; }
}
:root[data-theme="dark"] .brand__light { display: none; }
:root[data-theme="dark"] .brand__dark { display: block; }

.nav { margin-inline: auto; }
.nav ul { display: flex; gap: var(--space-md); }
.nav li > a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--ease) var(--curve);
}
.nav li > a::after {
  /* Anchored to the text, not to the 44px tap box: bottom:18px put the line
     through the letters. .75em below the centre clears descenders by ~4px. */
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% + .75em); height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease) var(--curve);
}
.nav li > a:hover::after, .nav li > a[aria-current="page"]::after { transform: scaleX(1); }
/* Index numbers, arrows and the contact block belong to the phone panel. */
.nav__n, .nav__go, .nav__extra { display: none; }
.nav li > a { white-space: nowrap; }
/* Narrow desktops: the horizontal logo is 209px wide, so it and the link
   gaps tighten until the burger takes over at 900px. */
@media (min-width: 901px) and (max-width: 1100px) {
  .brand img { height: 46px; }
  .nav ul { gap: var(--space-sm); }
  .header__inner { gap: var(--space-md); }
}

.header__cta { flex: none; }

.burger {
  display: none; place-items: center; width: var(--tap); height: var(--tap);
  margin-left: auto; padding: 0; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-ink); cursor: pointer;
}
.burger__lines { position: relative; display: block; width: 20px; height: 14px; }
.burger__lines span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 360ms var(--curve), opacity 200ms var(--curve), width 360ms var(--curve);
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6px; width: 70%; }
.burger__lines span:nth-child(3) { top: 12px; }
.burger:hover .burger__lines span:nth-child(2) { width: 100%; }
/* The outer lines meet in the middle, then turn: one motion, no icon swap. */
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger[aria-expanded="true"] { background: var(--color-dark-deep); border-color: var(--color-dark-deep); color: var(--color-on-dark); }

/* ---------------------------------------------------------------- hero --- */
/* Fills the first screen below the header. On the homepage the copy sits on
   the photograph's dark side and the booking card takes the right column;
   inner pages (.hero--page) use .hero__inner on its own. */

.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(640px, calc(100dvh - var(--topbar-h) - var(--header-h)), 940px);
  background: var(--color-dark); color: var(--color-on-dark); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* .88 at 48%: at Archivo's wider cut "dread" reaches further right, over
       the brighter part of the photo, and measured 2.86:1 against .82. */
    linear-gradient(90deg, var(--color-dark) 8%, rgba(19,19,19,.88) 48%, rgba(19,19,19,.18) 80%),
    linear-gradient(0deg, var(--color-dark) 2%, transparent 38%);
}
.hero__inner, .hero__grid { position: relative; z-index: 1; }
.hero__inner { margin-block: auto; padding-block: var(--space-3xl) var(--space-xl); }
.hero h1 { color: var(--color-on-dark); margin-bottom: var(--space-md); font-size: var(--text-display); }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero__lead { max-width: var(--measure); color: var(--color-on-dark-muted); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }


/* ------------------------------------------------------------ booking --- */
/* The booking card in the homepage hero's right column. Three steps with
   scripting (journey, passengers, details), one long form without it; all
   of it posts to booking.php. Fields are 44px with the label inside the top
   of the box. Motion: steps slide in the direction of travel and the card
   height follows; the tab bar, the return / hourly / child-seat blocks, the
   counters and the vehicle check all animate on transform and opacity. */

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--space-3xl); align-items: center; flex: 1;
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero__grid .hero__inner { margin: 0; padding: 0; }
/* Below 1080 the copy sits over the photo with a lighter vertical scrim, and
   the on-dark red eyebrow measured 4.1:1; the raised-card red clears 4.5. */
.hero__grid .eyebrow--onDark { color: var(--color-accent-text-on-raised); }
.hero__points { display: grid; gap: .75rem; margin: var(--space-xl) 0 var(--space-lg); }
.hero__points li { display: flex; align-items: center; gap: .7rem; font-size: var(--text-sm); color: var(--color-on-dark); }
.hero__points svg { flex: none; width: 18px; height: 18px; color: var(--color-accent-text-on-dark); }
.hero__contact { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-hairline-dark); max-width: 32rem; }
.hero__contact a { display: flex; align-items: center; gap: .75rem; color: var(--color-on-dark); font-weight: 600; }
.hero__contact small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-on-dark-muted); }
.hero__contact-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-hairline-dark); transition: background-color var(--ease) var(--curve), border-color var(--ease) var(--curve); }
.hero__contact a:hover .hero__contact-icon { background: var(--color-accent-surface); border-color: var(--color-accent-surface); }
.hero__contact svg { width: 20px; height: 20px; }

.bk {
  --bk-h: 44px; --bk-field: var(--color-muted); --bk-pad: var(--space-lg);
  position: relative; color: var(--color-ink); background: var(--color-surface);
  border-radius: var(--radius-sm); overflow: hidden; color-scheme: light;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
}
.bk fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bk__top { padding: 20px var(--bk-pad) 0; }
.bk__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk__title h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; }
.bk__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-ink-muted); white-space: nowrap; }
.bk__live i { width: 7px; height: 7px; border-radius: 50%; background: #1d8f4e; box-shadow: 0 0 0 0 rgba(29,143,78,.5); animation: bk-pulse 2.4s var(--curve) infinite; }

/* tabs: real radios, one sliding bar */
.bk__tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-bottom: 1px solid var(--color-border); }
.bk__tabs label { position: relative; cursor: pointer; }
.bk__tabs input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bk__tabs span { display: grid; place-items: center; height: 42px; font-size: 13px; font-weight: 600; color: var(--color-ink-muted); transition: color var(--ease) var(--curve); }
.bk__tabs input:checked + span { color: var(--color-ink); }
.bk__tabs input:focus-visible + span { outline: 2px solid var(--color-ring); outline-offset: -4px; }
.bk__tabs label:hover span { color: var(--color-ink); }
html:not(.js) .bk__tabs input:checked + span { box-shadow: inset 0 -2px 0 var(--color-accent); }
.bk__tabbar { position: absolute; left: 0; bottom: -1px; width: calc(100% / 3); height: 2px; background: var(--color-accent); transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform 420ms var(--curve); }

/* stepper */
.bk__steps { display: flex; align-items: center; gap: 8px; padding: 14px var(--bk-pad) 0; margin: 0; list-style: none; counter-reset: none; }
.bk__steps li { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-muted); white-space: nowrap; transition: color var(--ease) var(--curve); }
.bk__steps li + li::before { content: ""; width: 26px; height: 2px; margin-right: 2px; background: linear-gradient(var(--color-accent), var(--color-accent)) left / 0% 100% no-repeat, var(--color-border); transition: background-size 500ms var(--curve); }
.bk__steps li.is-done + li::before, .bk__steps li.is-on:not(:first-child)::before { background-size: 100% 100%; }
.bk__steps b { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--color-border); border-radius: 50%; font-size: 11px; letter-spacing: 0; transition: background-color var(--ease) var(--curve), border-color var(--ease) var(--curve), color var(--ease) var(--curve); }
.bk__steps .is-on, .bk__steps .is-done { color: var(--color-ink); }
.bk__steps .is-on b, .bk__steps .is-done b { background: var(--color-accent-surface); border-color: transparent; color: #fff; }

.bk__alert { margin: 14px var(--bk-pad) 0; padding: 10px 12px; border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, #fff); font-size: 13px; font-weight: 600; }
.bk__alert a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* steps viewport: height animates between steps */
.bk__viewport { position: relative; }
.bk .bk__step, .bk__done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px var(--bk-pad) 22px; }
.js .bk__step:not(.is-current), .js .bk__done[hidden] { display: none; }

/* fields: label inside the box */
.f { position: relative; min-width: 0; }
.f > label { position: absolute; left: 12px; top: 6px; z-index: 1; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); pointer-events: none; }
.f > label em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.f--icon > label { left: 40px; max-width: calc(100% - 52px); }
.f--icon > svg:first-child { position: absolute; left: 13px; top: 14px; width: 16px; height: 16px; color: var(--color-ink-muted); pointer-events: none; transition: color var(--ease) var(--curve); }
.f input, .f select, .f textarea {
  display: block; width: 100%; height: var(--bk-h); padding: 17px 12px 3px; margin: 0;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--color-ink);
  background: var(--bk-field); border: 1px solid transparent; border-radius: 3px; appearance: none;
  transition: background-color var(--ease) var(--curve), border-color var(--ease) var(--curve), box-shadow var(--ease) var(--curve);
}
.f--icon input, .f--icon select, .f--icon textarea { padding-left: 40px; }
.f input::placeholder, .f textarea::placeholder { color: #8a8a8a; font-weight: 400; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: var(--color-border); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; background: #fff; border-color: var(--color-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.f:focus-within > svg:first-child { color: var(--color-accent-text); }
.f input[type="date"], .f input[type="time"] { padding-right: 6px; }
.f input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.f--select select { padding-right: 34px; cursor: pointer; }
.f__chev { position: absolute; right: 12px; top: 15px; width: 14px; height: 14px; pointer-events: none; color: var(--color-ink-muted); }
.f--area textarea { height: 70px; padding-top: 22px; resize: none; font-weight: 500; font-size: 14px; line-height: 1.4; }
.f [aria-invalid="true"] { border-color: var(--color-danger); background: #fff; box-shadow: inset 3px 0 0 var(--color-danger); }
.f__error { margin-top: -6px; font-size: 12px; font-weight: 600; color: var(--color-accent-text); }
.bk__hint { margin-top: -4px; font-size: 12px; color: var(--color-ink-muted); line-height: 1.45; }
.bk__hint:empty { display: none; }
.bk__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-muted); padding: 0; margin-bottom: -4px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.f .f__error, .row2 .f__error { margin-top: 4px; }

/* route: pickup and drop-off joined by a dashed line, swap between */
.route { position: relative; display: grid; gap: 6px; }
.route .f input { padding-left: 34px; padding-right: 50px; }
.route input::-webkit-calendar-picker-indicator { display: none !important; }
.route .f > label { left: 34px; }
.route::before { content: ""; position: absolute; left: 16px; top: 28px; bottom: 28px; border-left: 1.5px dashed #b4b4b4; z-index: 1; }
.route .f::before { content: ""; position: absolute; left: 12px; top: 18px; z-index: 2; width: 9px; height: 9px; border: 2px solid var(--color-ink); border-radius: 50%; background: #fff; }
.route .f--b::before { border: 0; border-radius: 1px; background: var(--color-accent); width: 9px; height: 9px; left: 12px; }
.route__swap { position: absolute; right: 10px; top: 50%; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform 420ms var(--curve), border-color var(--ease) var(--curve); }
.route__swap:hover { border-color: var(--color-ink); }
.route__swap.is-spin { transform: rotate(180deg); }
.route__swap svg { width: 15px; height: 15px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -2px; }
.chips__lead { font-size: 12px; color: var(--color-ink-muted); margin-right: 2px; }
.chips button { min-height: 28px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: 2px; background: #fff; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--color-ink-muted); cursor: pointer; transition: color var(--ease) var(--curve), border-color var(--ease) var(--curve), background-color var(--ease) var(--curve); }
.chips button:hover { color: var(--color-ink); border-color: var(--color-ink); }
.chips button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

/* blocks that open and close: return and hourly */
.bk__reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 380ms var(--curve), opacity 300ms var(--curve); }
.bk__reveal > * { min-height: 0; overflow: hidden; }
.bk__reveal-in > * + * { margin-top: 12px; }
.bk__reveal.is-closed { grid-template-rows: 0fr; opacity: 0; margin-top: -12px; visibility: hidden; transition: grid-template-rows 320ms var(--curve), opacity 200ms var(--curve), margin 320ms var(--curve), visibility 0s 320ms; }
.return-row { padding: 10px; border-left: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 5%, #fff); }
.return-row .f input { background: #fff; }

/* counters: real number inputs, buttons with scripting */
.cnt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cnt__item--wide { grid-column: 1 / -1; }
.cnt__item { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: var(--bk-h); padding: 0 6px 0 12px; background: var(--bk-field); border-radius: 3px; }
.cnt__item label { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.15; }
.cnt__item small { display: block; font-size: 10px; font-weight: 500; color: var(--color-ink-muted); white-space: nowrap; }
.cnt__ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.cnt__ctl button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--color-border); border-radius: 2px; background: #fff; font: inherit; font-size: 15px; line-height: 1; color: var(--color-ink); cursor: pointer; transition: border-color var(--ease) var(--curve), transform 120ms var(--curve); }
.cnt__ctl button:hover:not(:disabled) { border-color: var(--color-ink); }
.cnt__ctl button:active:not(:disabled) { transform: scale(.92); }
.cnt__ctl button:disabled { color: #c4c4c4; cursor: default; }
.cnt__ctl input { width: 40px; height: 30px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; text-align: center; color: var(--color-ink); -moz-appearance: textfield; }
.cnt__ctl input::-webkit-inner-spin-button, .cnt__ctl input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.js .cnt__ctl input { width: 24px; pointer-events: none; }
.cnt__ctl input.is-bump { animation: bk-bump 260ms var(--curve); }

/* vehicle cards */
.veh__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.veh legend, .veh__opt { position: relative; display: grid; gap: 2px; padding: 10px 10px 9px; border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; transition: border-color var(--ease) var(--curve), box-shadow var(--ease) var(--curve), background-color var(--ease) var(--curve), opacity var(--ease) var(--curve); }
.veh__opt:hover { border-color: var(--color-ink); }
.veh__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.veh__opt b { font-size: 13px; }
.veh__opt small { font-size: 11px; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh__cap { display: flex; gap: 10px; margin-top: 4px; font-size: 11px; font-weight: 600; }
.veh__cap span { display: inline-flex; align-items: center; gap: 3px; }
.veh__cap svg { width: 12px; height: 12px; }
.veh__opt:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 4%, #fff); }
.veh__opt::after { content: ""; position: absolute; top: 8px; right: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-accent-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; transform: scale(0); transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.veh__opt:has(input:checked)::after { transform: scale(1); }
.veh__opt:has(input:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.veh__opt.is-small { opacity: .45; }

/* toggle, segmented choice, consent */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bk-field); border-radius: 3px; cursor: pointer; position: relative; }
.toggle b { display: block; font-size: 13px; }
.toggle small { font-size: 11px; color: var(--color-ink-muted); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 22px; background: #c9c9c9; transition: background-color var(--ease) var(--curve); }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 300ms var(--curve); }
.toggle input:checked + i { background: var(--color-accent-surface); }
.toggle input:checked + i::after { transform: translateX(16px); }
.toggle input:focus-visible + i { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.phone { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.consent { position: relative; display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--color-ink-muted); cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent i { flex: none; width: 18px; height: 18px; margin-top: 0; border: 1.5px solid #9a9a9a; border-radius: 3px; background: #fff center / 11px no-repeat; transition: background-color var(--ease) var(--curve), border-color var(--ease) var(--curve); }
.consent input:checked + i { border-color: var(--color-accent-surface); background-color: var(--color-accent-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.consent input:focus-visible + i { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.consent input[aria-invalid="true"] + i { border-color: var(--color-danger); }

/* summary of earlier steps */
.bk__summary { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 12px; background: var(--bk-field); border-radius: 3px; font-size: 12px; color: var(--color-ink-muted); }
.bk__summary:empty { display: none; }

/* the fixed fare, shown only when the route and party are priced in the database */
.bk__price { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; background: var(--bk-field); border-left: 3px solid var(--color-accent); border-radius: 3px; }
.bk__price[hidden] { display: none; }
.bk__price-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink); }
.bk__price-l small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); }
.bk__price strong { font-size: 26px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.bk__price.is-in { animation: bk-fare 320ms var(--curve) both; }
@keyframes bk-fare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bk__summary b { color: var(--color-ink); font-weight: 600; }

/* actions */
.bk__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 2px; }
.bk__actions--one { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .bk__actions { grid-template-columns: minmax(0, 1fr); }
.bk__go { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; padding: 0 7px 0 18px; border: 0; border-radius: 3px; background: var(--color-accent-surface); color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color var(--ease) var(--curve), transform 120ms var(--curve); }
.bk__go:hover { background: var(--color-accent-surface-hover); }
.bk__go:active { transform: translateY(1px); }
.bk__go:focus-visible, .bk__back:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.bk__chip { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 2px; background: rgba(255,255,255,.16); transition: transform var(--ease) var(--curve); }
.bk__go:hover .bk__chip { transform: translateX(3px); }
.bk__chip svg { width: 16px; height: 16px; }
.bk__go[aria-busy="true"] { cursor: progress; }
.bk__go[aria-busy="true"] .bk__chip svg { display: none; }
.bk__go[aria-busy="true"] .bk__chip::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bk-spin 700ms linear infinite; }
.bk__back { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 3px; background: #fff; color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--ease) var(--curve); }
.bk__back:hover { border-color: var(--color-ink); }
.bk__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 12px var(--bk-pad); border-top: 1px solid var(--color-border); background: #fafafa; font-size: 11px; color: var(--color-ink-muted); }
.bk__foot span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bk__foot svg { width: 13px; height: 13px; color: #1d8f4e; }
.bk__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* confirmation */
.bk__done { padding-top: 26px; }
.bk__done-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e8f6ee; }
.bk__done-mark svg { width: 28px; height: 28px; fill: none; stroke: #1d8f4e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.bk__done.is-in .bk__done-mark { animation: bk-pop 500ms cubic-bezier(.34, 1.56, .64, 1) both; }
.bk__done.is-in .bk__done-mark svg { animation: bk-draw 520ms var(--curve) 220ms both; }
.bk__done h3 { font-size: 1.4rem; line-height: 1.2; }
.bk__done p { font-size: 13px; color: var(--color-ink-muted); line-height: 1.55; }
.bk__done p b { color: var(--color-ink); overflow-wrap: anywhere; }
.bk__ref { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--color-border); border-radius: 3px; font-size: 12px; color: var(--color-ink-muted); }
.bk__ref b { font-size: 16px; color: var(--color-ink); letter-spacing: .04em; }

/* shake on a step that will not advance */
.bk__step.is-shake { animation: bk-shake 360ms var(--curve); }

@keyframes bk-in { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bk-pulse { 0% { box-shadow: 0 0 0 0 rgba(29,143,78,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(29,143,78,0); } }
@keyframes bk-bump { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bk-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes bk-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Hourly hire has no fixed drop-off, so that field reads as optional. */
.bk.is-hourly .route__swap { display: none; }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-2xl); }
  .bk { width: 100%; max-width: 560px; }
}
@media (max-width: 680px) {
  .hero__grid { padding-block: var(--space-xl) var(--space-2xl); gap: var(--space-xl); }
  .hero__points { margin-block: var(--space-lg) 0; }
  .hero__contact { display: none; }
  .bk { --bk-pad: 16px; }
  .bk__title { flex-direction: column; gap: 4px; }
  .bk__steps li:not(.is-on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bk__steps li + li::before { width: 18px; }
  .bk__foot { gap: 6px 12px; font-size: 10.5px; }
  .phone { grid-template-columns: 100px minmax(0, 1fr); }
  .chips__lead { display: none; }
}

/* --------------------------------------------------------------- stats --- */
/* Figures in the story band (the hero no longer carries them). */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.stats > div { display: flex; flex-direction: column; gap: var(--space-3xs); }
.stats dd {
  color: var(--color-on-dark); font-size: var(--text-stat); font-weight: 700;
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stats dt { order: 2; color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.stats--inline { margin-top: var(--space-xl); gap: var(--space-sm); }

/* -------------------------------------------------------------- ticker --- */

.ticker { background: var(--ticker-bg); color: var(--ticker-fg); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker var(--ticker-time) linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; }
.ticker__set li {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ticker__set li + li { border-left: 1px solid rgba(255,255,255,.28); }
.ticker b { font-weight: 700; }
.ticker__set svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.ticker__set li { gap: .55rem; }
@keyframes ticker { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ------------------------------------------------------------ promises --- */
/* Five reasons as raised cards on the light grey band. Each icon sits in a
   square red-tinted chip: square, because the brand is square. */

.promises { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.promises li {
  display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0;
  padding: var(--space-md); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: var(--shadow-card);
  transition: transform var(--ease) var(--curve), box-shadow var(--ease) var(--curve);
}
.promises li:hover { transform: translateY(-4px); }
.promises__icon {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-bottom: var(--space-2xs);
  border-radius: var(--radius-sm); color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.promises__icon svg { width: 22px; height: 22px; }
.promises h2 { font-size: var(--text-base); font-stretch: 100%; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.promises p { font-size: var(--text-sm); line-height: 1.55; }

/* --------------------------------------------------------------- tiles --- */
/* An asymmetric bento on the deep band: airports, the main business, takes the
   big square; the rest share the right-hand column. The text scrim belongs to
   the text box, not the tile, so it covers the words whatever the tile's shape. */

.tiles {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(240px, 21vw, 300px); gap: var(--space-sm);
}
.tile { grid-column: span 3; }
.tile--feature { grid-column: span 6; grid-row: span 2; }
.tile--wide { grid-column: span 6; }
.tile {
  position: relative; display: flex; align-items: flex-end; min-width: 0;
  overflow: hidden; border-radius: var(--radius-sm);
  background: var(--color-dark); isolation: isolate;
  box-shadow: 0 0 0 1px var(--color-hairline-dark);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--ease-slow) var(--curve); }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(13,14,16,.5) 0%, rgba(13,14,16,0) 60%);
}
.tile:hover img, .tile:focus-within img { transform: scale(1.05); }
/* The wide tile is landscape: words on the left, the castle left visible on the right. */
.tile--wide img { object-position: 80% 30%; }
.tile--wide .tile__body {
  align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(90deg, rgba(13,14,16,.94) 0%, rgba(13,14,16,.9) 50%, rgba(13,14,16,0) 82%);
}
.tile--wide .tile__body > * { max-width: 44%; }
.tile__body {
  position: relative; width: 100%; color: var(--color-on-dark);
  padding: var(--space-3xl) var(--space-md) var(--space-md);
  /* near-opaque under the words, fading out above them */
  background: linear-gradient(0deg, rgba(13,14,16,.94) 0%, rgba(13,14,16,.9) 55%, rgba(13,14,16,0) 100%);
}
.tile__body h3 { color: var(--color-on-dark); margin-bottom: var(--space-3xs); }
.tile--feature .tile__body { padding: var(--space-4xl) var(--space-lg) var(--space-lg); }
.tile--feature h3 { font-size: var(--text-xl); font-stretch: var(--font-stretch-display); letter-spacing: -.02em; }
.tile__body p { max-width: 40ch; color: var(--color-on-dark-muted); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.tile__cta {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.tile__cta svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-accent); transition: transform var(--ease) var(--curve); }
.tile:hover .tile__cta svg { transform: translateX(4px); }
.tile__link { position: absolute; inset: 0; }

/* --------------------------------------------------------------- fares --- */
/* A printed rate card on the light band: white sheet, soft shadow, prices set
   large at display width. With scripting, each row gains a Choose button that
   loads the route into the booking form. */

.table-scroll {
  /* position:relative is load-bearing: overflow only clips absolutely
     positioned descendants whose containing block is inside it. Without it,
     the visually hidden "Choose" header label escaped to x=752 and gave the
     whole page a sideways scroll on phones. */
  position: relative; overflow-x: auto; padding: var(--space-2xs) var(--space-md);
  background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
}
.table-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.fares { width: 100%; min-width: 46rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fares th, .fares td { padding: var(--space-sm) var(--space-md); text-align: right; }
.fares th:first-child, .fares td:first-child,
.fares th:nth-child(2), .fares td:nth-child(2) { text-align: left; }
.fares th:first-child, .fares td:first-child { padding-left: 0; }
.fares thead th {
  padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.fares tbody th { color: var(--color-ink); font-weight: 600; font-size: var(--text-data); }
.fares tbody td { color: var(--color-ink-muted); font-size: var(--text-data); }
.fares tbody td:nth-child(3), .fares tbody td:nth-child(4) {
  color: var(--color-ink); font-size: var(--text-lg); font-weight: 700;
  font-stretch: var(--font-stretch-display); letter-spacing: -.02em;
}
.fares tbody tr { border-bottom: 1px solid var(--color-border); transition: background-color var(--ease) var(--curve); }
.fares tbody tr:last-child { border-bottom: 0; }
.fares tbody tr:hover { background: var(--color-muted); }
.fares__pick-cell { width: 1%; padding-right: 0 !important; }
.fares__pick {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--space-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent;
  color: var(--color-ink); font: inherit; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ease) var(--curve), color var(--ease) var(--curve), border-color var(--ease) var(--curve);
}
.fares__pick svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-accent); transition: transform var(--ease) var(--curve); }
.fares tbody tr:hover .fares__pick, .fares__pick:focus-visible { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-on-dark); }
.fares__pick:hover svg { transform: translateY(-2px); }

/* --------------------------------------------------------------- fleet --- */
/* Dark showroom: raised charcoal cards, each car on a light studio plate. */

.fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.car {
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-md);
  border: 1px solid var(--color-hairline-dark); border-radius: var(--radius-sm);
  background: var(--color-dark-raised); box-shadow: var(--shadow-card-dark);
  transition: border-color var(--ease) var(--curve), transform var(--ease) var(--curve);
}
.car:hover { border-color: color-mix(in srgb, var(--color-on-dark) 32%, transparent); transform: translateY(-4px); }
.car__art {
  margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-xs);
  background: var(--car-plate); border-radius: 2px; isolation: isolate; overflow: hidden;
}
/* The photos' backdrop is rgb(254,254,254) with no alpha: a faint box on white
   and a hard white rectangle in dark mode. Multiplied onto the plate it vanishes. */
.car__art img { width: 100%; height: auto; mix-blend-mode: multiply; transition: transform var(--ease-slow) var(--curve); }
.car:hover .car__art img { transform: translateX(8px); }
.car h3, .car .car__tier, .car .car__specs, .car .car__price { margin-inline: var(--space-sm); }
.car h3 { margin-bottom: var(--space-3xs); color: var(--color-on-dark); font-size: var(--text-xl); font-stretch: var(--font-stretch-display); letter-spacing: -.02em; }
.car .car__tier { color: var(--color-accent-text-on-raised); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.car__specs { margin-top: var(--space-sm); }
.car__specs > div { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-2xs); border-top: 1px solid var(--color-hairline-dark); font-size: var(--text-sm); }
.car__specs dt { color: var(--color-on-dark-muted); }
.car__specs dd { color: var(--color-on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.car .car__price { display: flex; align-items: baseline; gap: var(--space-2xs); margin-top: auto; padding-top: var(--space-md); }
.car__price span { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.car__price b { color: var(--color-on-dark); font-size: var(--text-xl); font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- steps --- */
/* Outlined numerals at display width, joined by a red rule that draws itself
   from one step to the next as the row arrives. */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.steps li { position: relative; min-width: 0; }
.steps__n {
  display: block; margin-bottom: var(--space-md);
  font-size: var(--text-h1); font-weight: 700; font-stretch: var(--font-stretch-display);
  line-height: 1; letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.5px var(--color-ink);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--text-h1) / 2); left: calc(var(--text-h1) * 1.85); right: calc(-1 * var(--space-xl) + var(--space-sm));
  height: 2px; background: var(--color-accent); transform-origin: left;
}
.steps h3 { margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
.steps p { font-size: var(--text-sm); max-width: 34ch; }

/* --------------------------------------------------------------- story --- */
/* The photograph sits on a red block offset down and right: a square, printed
   gesture rather than a soft shadow. Figures sit in a ruled 2 x 2 grid. */

.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: center; }
.story__media { position: relative; margin: 0 var(--space-lg) var(--space-lg) 0; isolation: isolate; }
.story__media::before {
  content: ""; position: absolute; inset: var(--space-lg) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-lg);
  z-index: -1; background: var(--color-accent-surface); border-radius: var(--radius-sm);
}
.story__media img { width: 100%; height: 100%; max-height: 34rem; object-fit: cover; object-position: 40% 18%; border-radius: var(--radius-sm); }
.story__media figcaption {
  position: absolute; left: 0; bottom: var(--space-md);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-dark-deep); color: var(--color-on-dark);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.story__copy h2 { margin-bottom: var(--space-sm); }
.story__copy > p { max-width: var(--measure-lg); }
.story .stats--inline {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--space-xl);
  border-top: 1px solid var(--color-hairline-dark);
}
.story .stats--inline > div { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-hairline-dark); }
.story .stats--inline > div:nth-child(odd) { border-right: 1px solid var(--color-hairline-dark); }
.story .stats--inline > div:nth-child(even) { padding-left: var(--space-md); }
.story .stats--inline dd { font-size: var(--text-stat); font-stretch: var(--font-stretch-display); }

/* ------------------------------------------------------------- reviews --- */
/* One feature card in charcoal carries the strongest quote; two white cards
   stack beside it. Initials stand in for photographs we do not have. */

.rating {
  display: flex; align-items: center; gap: var(--space-2xs); justify-self: end;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.rating b { color: var(--color-ink); font-size: var(--text-xl); font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.02em; }
.rating__stars, .stars { display: flex; gap: 2px; color: var(--color-accent); }
.rating__stars svg, .stars svg { width: 14px; height: 14px; }
.rating__meta { color: var(--color-ink-muted); font-size: var(--text-xs); }

.reviews { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-sm); }
.quote-lead, .quote { margin: 0; min-width: 0; border-radius: var(--radius-sm); }
.quote-lead {
  grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl);
  padding: var(--space-xl); background: var(--color-dark-deep); color: var(--color-on-dark); box-shadow: var(--shadow-card);
  border: 1px solid var(--color-hairline-dark);
}
.quote-lead__mark { width: 40px; height: 40px; color: var(--color-accent); }
.quote-lead blockquote { margin: 0; }
.quote-lead blockquote p {
  color: var(--color-on-dark); font-size: var(--text-xl); font-weight: 600; font-stretch: var(--font-stretch-display);
  line-height: 1.25; letter-spacing: -.02em;
}
.quote { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p { color: var(--color-ink); font-size: var(--text-base); line-height: 1.6; }

.quote-lead figcaption, .quote figcaption { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); }
.quote-lead figcaption > span:last-child, .quote figcaption > span:last-child { display: flex; flex-direction: column; color: var(--color-ink-muted); }
.quote-lead figcaption > span:last-child { color: var(--color-on-dark-muted); }
.quote-lead figcaption b { color: var(--color-on-dark); font-size: var(--text-sm); }
.quote figcaption b { color: var(--color-ink); font-size: var(--text-sm); }
.avatar {
  display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap);
  border-radius: var(--radius-sm); background: var(--color-accent-surface); color: var(--color-on-accent);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
}

/* ------------------------------------------------------------ business --- */
/* The four account features as a 2 x 2 of hairline cells, numbered in red. */

.business { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: center; }
.business__copy h2 { margin-bottom: var(--space-sm); }
.business__copy .btn { margin-top: var(--space-lg); }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; counter-reset: ledger;
  background: var(--color-hairline-dark); border: 1px solid var(--color-hairline-dark); border-radius: var(--radius-sm); overflow: hidden; }
.ledger > div { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg); background: var(--color-dark-deep); counter-increment: ledger;
  transition: background-color var(--ease) var(--curve); }
.ledger > div:hover { background: var(--color-dark); }
.ledger > div::before { content: "0" counter(ledger); color: var(--color-accent-text-on-dark); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; }
.ledger dt { color: var(--color-on-dark); font-size: var(--text-base); font-weight: 600; }
.ledger dd { color: var(--color-on-dark-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------- posts --- */

/* Asymmetric: the newest piece runs large on the left with a standfirst; the
   other two sit as compact rows on the right. */
.posts { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--space-lg) var(--space-2xl); }
.post { position: relative; min-width: 0; }
.post--feature { grid-row: 1 / -1; }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-sm); transition: transform var(--ease-slow) var(--curve); }
.post:hover img { transform: scale(1.02); }
.post:not(.post--feature) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-md); align-content: start;
  padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
/* the two side pieces share the feature's height, so the column has no hole */
.post:not(.post--feature) img { grid-row: 1 / -1; margin-bottom: 0; height: 100%; min-height: 10rem; aspect-ratio: auto; }
.post.post--feature h3 { font-size: var(--text-xl); font-stretch: var(--font-stretch-display); letter-spacing: -.02em; line-height: 1.2; }
.post__dek { margin-top: var(--space-xs); max-width: 60ch; font-size: var(--text-sm); }
.post__meta { color: var(--color-accent-text); font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--space-3xs); }
.post h3 { font-size: var(--text-base); font-weight: 600; }
/* A real underline, not a background-image rule: the drawn line ran straight
   through the descenders of "really happens" and "flight". text-decoration
   skips ink, and the colour fades in instead. */
.post h3 a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-skip-ink: auto; text-decoration-color: transparent;
  transition: text-decoration-color var(--ease) var(--curve);
}
.post h3 a:hover, .post h3 a:focus-visible { text-decoration-color: currentColor; }
.post h3 a::after { content: ""; position: absolute; inset: 0; } /* card-sized tap target */

/* ----------------------------------------------------------------- faq --- */

.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-3xl); align-items: start; }
.faq-grid__intro { position: sticky; top: calc(var(--header-h) + var(--space-xl)); }
.faq { padding: var(--space-xs) var(--space-lg); background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.faq details:first-child { border-top: 0; }
.faq details:last-child { border-bottom: 0; }
.faq-grid__intro h2 { margin-block: var(--space-3xs) var(--space-sm); }
.faq-grid__intro p { font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.faq details { position: relative; border-top: 1px solid var(--color-border); }
/* The open item's divider fills with red from the left: it marks which answer
   is showing, not decoration. */
.faq details::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease-slow) var(--curve);
}
.faq details[open]::before { transform: scaleX(1); }
/* The first item has no divider above it (the card's edge is there), so its
   red line floated over the top of the card. The red × already marks it open. */
.faq details:first-child::before { display: none; }
.faq summary {
  position: relative; display: flex; align-items: center; min-height: var(--control-lg);
  padding: var(--space-xs) var(--space-xl) var(--space-xs) 0;
  color: var(--color-ink); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Open/close mark. The square stays upright and fills red when open; only the
   two strokes inside turn 45deg, so + becomes x. Rotating the whole 28px box
   made a diamond about 40px across that pushed past the card edge. */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px;
}
.faq summary::before {
  border-radius: 2px; background: transparent;
  transition: background-color var(--ease) var(--curve);
}
.faq summary::after {
  background:
    linear-gradient(var(--faq-mark, var(--color-accent)), var(--faq-mark, var(--color-accent))) center / 10px 1.5px no-repeat,
    linear-gradient(var(--faq-mark, var(--color-accent)), var(--faq-mark, var(--color-accent))) center / 1.5px 10px no-repeat;
  transition: transform var(--ease-slow) var(--curve);
}
.faq details[open] summary::before { background: var(--color-accent-surface); }
.faq details[open] summary::after { --faq-mark: var(--color-on-accent); transform: rotate(45deg); }
.faq summary { transition: color var(--ease) var(--curve); }
.faq summary:hover { color: var(--color-accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq details > div { overflow: hidden; }
.faq details p { padding-bottom: var(--space-md); font-size: var(--text-sm); max-width: var(--measure-lg); }

/* ----------------------------------------------------------------- cta --- */
/* Red band with a duotone photograph bleeding in from the right. The words sit
   on solid red; the photo only reaches full strength away from them. */

.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--color-accent-surface); color: var(--color-on-accent); }
.cta__media { position: absolute; inset: 0 0 0 45%; z-index: -1; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .55; }
.cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-accent-surface) 0%, transparent 55%); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) var(--space-2xl); align-items: center; padding-block: var(--space-4xl); }
.cta h2 { color: var(--color-on-accent); margin-bottom: var(--space-sm); font-size: var(--text-display); }
.cta p { max-width: var(--measure); color: var(--color-on-accent); font-size: var(--text-base); }
.cta__actions {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm);
  padding: var(--space-lg); border-radius: var(--radius-sm);
  background: var(--color-dark-deep); box-shadow: var(--shadow-card-dark);
}
.cta__tel { color: var(--color-on-dark); font-size: var(--text-xl); font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cta__actions .btn { justify-content: space-between; }

/* -------------------------------------------------------------- footer --- */

.footer { background: var(--color-dark-deep); color: var(--color-on-dark-muted); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-3xl) var(--space-xl); }
.footer__about img { width: auto; height: 64px; margin-bottom: var(--space-sm); }
.footer__about p { max-width: 30ch; font-size: var(--text-sm); }
.footer h2 { color: var(--color-on-dark); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-2xs); }
.footer li a, .footer__base a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--text-sm); transition: color var(--ease) var(--curve); }
.footer a:hover { color: var(--color-accent); }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-2xs) var(--space-sm); border-top: 1px solid var(--color-footer-border); font-size: var(--text-xs); }
.footer__base ul { display: flex; flex-wrap: wrap; column-gap: var(--space-md); }

/* ---------------------------------------------------------------- dock --- */
/* Call and WhatsApp, fixed bottom right on every screen size. Square, like the
   rest of the brand: red for the call, charcoal for WhatsApp, so the page keeps
   one accent. The label slides out on hover or keyboard focus and is the link's
   accessible name the rest of the time. The dock waits until the hero has
   gone and steps aside over the call-to-action band and the footer, which
   carry the same number. */
.dock { position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2xs); }
.dock__btn {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lift);
  transition: transform var(--ease) var(--curve), background-color var(--ease) var(--curve);
}
.dock__btn svg { width: 24px; height: 24px; }
.dock__btn--call { background: var(--color-accent-surface); color: var(--color-on-accent); }
.dock__btn--call:hover { background: var(--color-accent-surface-hover); }
.dock__btn--wa { background: var(--color-dark-deep); color: var(--color-on-dark); border: 1px solid color-mix(in srgb, var(--color-on-dark) 28%, transparent); }
.dock__btn--wa:hover { background: var(--color-dark); }
.dock__btn:hover { transform: translateY(-2px); }
.dock__label {
  position: absolute; right: calc(100% + 10px); top: 50%; padding: 8px 12px; white-space: nowrap;
  border-radius: var(--radius-sm); background: var(--color-dark-deep); color: var(--color-on-dark);
  font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translate(8px, -50%); pointer-events: none;
  transition: opacity var(--ease) var(--curve), transform var(--ease) var(--curve);
}
.dock__btn:hover .dock__label, .dock__btn:focus-visible .dock__label { opacity: 1; transform: translate(0, -50%); }

.js .dock { opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--ease) var(--curve), transform var(--ease) var(--curve), visibility 0s linear var(--ease); }
.js.is-past-hero:not(.is-near-end) .dock { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.cta__actions .cta__wa { justify-content: flex-start; gap: var(--space-xs); }
.cta__actions .cta__wa svg { width: var(--icon-md); height: var(--icon-md); }

/* -------------------------------------------------------------- reveal --- */
/* Resting state is visible. .js-motion is added by the inline guard in
   index.html only when motion is wanted, and dropped if main.js never runs.

   Three states: hidden (no .is-in), revealing (.is-in), settled (.is-settled,
   added by main.js once the reveal has finished). The reveal transition only
   exists while revealing. Left in place it outranked each card's own
   transition, so a fleet card's hover lift took 620ms plus its stagger delay. */

.js-motion .reveal:not(.is-in),
.js-motion .reveal-group:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
.js-motion .reveal.is-in:not(.is-settled),
.js-motion .reveal-group.is-in:not(.is-settled) > * {
  transition: opacity var(--ease-slow) var(--curve), transform var(--ease-slow) var(--curve), clip-path 900ms var(--curve);
}
.js-motion .reveal-group.is-in:not(.is-settled) > :nth-child(2) { transition-delay: 70ms; }
.js-motion .reveal-group.is-in:not(.is-settled) > :nth-child(3) { transition-delay: 140ms; }
.js-motion .reveal-group.is-in:not(.is-settled) > :nth-child(4) { transition-delay: 210ms; }
.js-motion .reveal-group.is-in:not(.is-settled) > :nth-child(5) { transition-delay: 280ms; }
.js-motion .reveal-group.is-in:not(.is-settled) > :nth-child(6) { transition-delay: 350ms; }

/* Curtain reveals: photographs open like a blind as they arrive. clip-path
   cannot interpolate to `none`, so the revealing state names inset(0) and the
   settled state drops the property, which changes nothing on screen. */
.js-motion .tiles:not(.is-in) > .tile { clip-path: inset(24% 0 0 0 round var(--radius-sm)); }
.js-motion .tiles.is-in:not(.is-settled) > .tile { clip-path: inset(0 0 0 0 round var(--radius-sm)); }

.js-motion .fleet .car__art,
.js-motion .posts .post img { transition: clip-path 900ms var(--curve); transition-delay: inherit; }
.js-motion .fleet:not(.is-in) .car__art { clip-path: inset(0 100% 0 0 round var(--radius-sm)); }
.js-motion .fleet.is-in:not(.is-settled) .car__art { clip-path: inset(0 0 0 0 round var(--radius-sm)); }
.js-motion .posts:not(.is-in) .post img { clip-path: inset(100% 0 0 0 round var(--radius-sm)); }

/* The step connectors draw left to right once the row is in. */
.js-motion .steps li::after { transition: transform 900ms var(--curve) 350ms; }
.js-motion .steps:not(.is-in) li::after { transform: scaleX(0); }
.js-motion .posts.is-in:not(.is-settled) .post img { clip-path: inset(0 0 0 0 round var(--radius-sm)); }

/* ----------------------------------------------------------- hero entrance */
/* Runs once on load, in reading order: label, headline line by line, lead,
   actions, figures. The headline lines rise out of a mask rather than fading,
   so the largest text is never transparent. */

.hero h1 .line { display: block; }
.hero h1 em { position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .06em;
  background: currentColor; transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .hero h1 .line { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
  .js-motion .hero h1 .line > span { display: block; animation: rise 700ms var(--curve) both; }
  .js-motion .hero h1 .line + .line > span { animation-delay: 90ms; }
  .js-motion .hero h1 em::after { animation: draw 600ms var(--curve) 650ms both; }
  .js-motion .hero .eyebrow { animation: fade-up 600ms var(--curve) both; }
  .js-motion .hero__lead { animation: fade-up 600ms var(--curve) 240ms both; }
  .js-motion .hero__actions { animation: fade-up 600ms var(--curve) 340ms both; }
  .js-motion .bk { animation: bk-in 800ms var(--curve) 420ms both; }
  .js-motion .hero__media img { animation: settle 1400ms var(--curve) both; }
}

@keyframes rise    { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle  { from { transform: scale(1.07); } to { transform: none; } }
@keyframes draw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------ scroll-linked motion */
/* CSS scroll-driven animations: no JavaScript, run off the main thread, and
   simply absent in browsers that do not support them. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* reading progress along the bottom edge of the sticky header */
    .header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--color-accent); transform-origin: left; transform: scaleX(0);
      animation: progress linear both; animation-timeline: scroll(root);
    }
    /* The hero photograph drifts slower than the page as it leaves. The
       timeline is named on .hero itself: an anonymous view() on the photo
       would bind to .hero, whose overflow:hidden makes it a scroll container
       that never scrolls, and the drift would never move. */
    .hero { view-timeline: --hero block; }
    .hero__media {
      animation: drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes progress { to { transform: scaleX(1); } }
@keyframes drift    { to { transform: translateY(22%); } }

/* ---------------------------------------------------------- responsive --- */
/* Breakpoints stay literal: a media query resolves before custom properties.
   Checked at 375 / 768 / 1024 / 1440px. */

@media (max-width: 1280px) { .wrap { padding-inline: var(--space-xl); } }

@media (max-width: 1080px) {
  /* The 90deg scrim only darkens the left column, which works while the text
     sits there. Below 1080 the text runs full width over the bright part of
     the photograph: measured, the red word in the h1 fell to 1.5:1 and the
     lead to 3.1:1. Narrow screens get a near-opaque vertical scrim instead;
     the photograph stays as texture. */
  .hero::after {
    background: linear-gradient(0deg, var(--color-dark) 14%, rgba(19,19,19,.95) 58%, rgba(19,19,19,.92) 100%);
  }


  .head { grid-template-columns: 1fr; align-items: start; }
  .rating { justify-self: start; }
  .promises { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .promises li { grid-column: span 2; }
  .promises li:nth-child(n+4) { grid-column: span 3; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 38vw, 340px); }
  .tile, .tile--feature, .tile--wide { grid-column: span 1; grid-row: span 1; }
  .tile--feature, .tile--wide { grid-column: span 2; }
  .tile--feature .tile__body { padding: var(--space-3xl) var(--space-md) var(--space-md); }
  .story, .business, .faq-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .story__media img { max-height: 24rem; }
  .ledger > div { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-lead { grid-column: 1 / -1; grid-row: auto; }
  .faq-grid__intro { position: static; }
  .story__media { max-width: 36rem; }
  .cta__inner { grid-template-columns: 1fr; padding-block: var(--space-3xl); }
  .cta__media { inset: 48% 0 0 0; }
  .cta__media::after { background: linear-gradient(0deg, transparent 0%, var(--color-accent-surface) 100%); }
  .cta__actions { max-width: 28rem; }
}

@media (max-width: 900px) {
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  /* Phone menu: a dark sheet under the header. It wipes down (clip-path),
     then the links rise in one after another. Transitions, not keyframes,
     so a second tap mid-animation reverses from where it is. */
  .js .nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, var(--header-h)); bottom: 0; z-index: 40;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: var(--space-sm) var(--space-md) var(--space-lg);
    background:
      radial-gradient(60% 40% at 100% 0%, var(--color-glow), transparent 70%),
      radial-gradient(50% 35% at 0% 100%, var(--color-glow), transparent 70%),
      var(--color-dark-deep);
    color: var(--color-on-dark);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 520ms var(--curve-io), visibility 0s linear 520ms;
  }
  .js .nav[data-open="true"] {
    clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path 560ms var(--curve), visibility 0s;
  }
  .js .nav ul { flex-direction: column; gap: 0; padding: 0; }
  .js .nav li { border-bottom: 1px solid var(--color-hairline-dark); }
  .js .nav li > a {
    display: flex; align-items: center; gap: var(--space-sm); min-height: 60px;
    color: var(--color-on-dark); font-size: clamp(1.375rem, 5.6vw, 1.75rem); font-weight: 700;
    font-stretch: var(--font-stretch-display); letter-spacing: -.01em;
  }
  .js .nav li > a::after { display: none; }
  .js .nav__n { display: inline-block; width: 2.2em; color: var(--color-accent-text-on-dark); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; font-stretch: 100%; }
  .js .nav__go { display: block; width: var(--icon-md); height: var(--icon-md); margin-left: auto; color: var(--color-on-dark-muted); transition: transform var(--ease) var(--curve), color var(--ease) var(--curve); }
  .js .nav li > a:hover .nav__go, .js .nav li > a:focus-visible .nav__go { transform: translateX(4px); color: var(--color-on-dark); }
  .js .nav li > a[aria-current="page"] .nav__go { color: var(--color-accent-text-on-dark); }
  .js .nav__extra { display: grid; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-lg); }
  .js .nav__extra .btn--chip { justify-content: space-between; padding-left: var(--space-md); }
  .js .nav__contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
  /* Without JS there is no sheet: the links wrap in a row under the logo. */
  html:not(.js) .header__inner { flex-wrap: wrap; }
  html:not(.js) .nav { order: 3; width: 100%; margin: 0; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: 0 var(--space-sm); }
  /* Stagger: each row waits --i x 45ms after the sheet starts to open. */
  .js .nav li, .js .nav__extra {
    opacity: 0; transform: translateY(14px);
    transition: opacity 200ms var(--curve), transform 200ms var(--curve);
  }
  .js .nav[data-open="true"] li, .js .nav[data-open="true"] .nav__extra {
    opacity: 1; transform: none;
    transition: opacity 420ms var(--curve) calc(140ms + var(--i, 0) * 45ms), transform 520ms var(--curve) calc(140ms + var(--i, 0) * 45ms);
  }
  html.nav-open { overflow: hidden; }
  html.nav-open .dock { opacity: 0; visibility: hidden; }
  .header__cta { display: none; }
  .js .burger { display: grid; }
  .fleet, .posts, .steps { grid-template-columns: 1fr; }
  .steps { gap: var(--space-lg); }
  .steps li::after { display: none; }
  /* Stacked steps: the outlined number sits in its own column beside the
     text, as a timeline, instead of each step using half the width. */
  .steps li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); align-items: start; }
  .steps__n { grid-row: span 2; margin: 0; font-size: 3.25rem; }
  .steps h3 { margin-top: .35rem; }
  .steps p { max-width: 52ch; }
  .posts { grid-template-rows: none; }
  .post--feature { grid-row: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding-block: var(--space-3xl) var(--space-xl); }
  .hero::after { background: linear-gradient(0deg, var(--color-dark) 14%, rgba(19,19,19,.95) 58%, rgba(19,19,19,.92) 100%); }
}

/* Tablet: one column of full-width cards made the fleet 2,391px tall and the
   journal 1,849px, each car photo 622px wide. Between phone and desktop the
   cards turn sideways instead: picture left, content right. */
/* 681-1080: the story stacks, and its portrait photo was cut to a 384px strip
   that showed the chauffeur from the neck down. A 3:2 frame focused on the
   face keeps him in the picture. */
@media (min-width: 681px) and (max-width: 1080px) {
  .story__media img { height: auto; max-height: none; aspect-ratio: 3 / 2; }
}

@media (min-width: 681px) and (max-width: 900px) {
  .fleet, .posts { gap: var(--space-md); }
  .car {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr auto; column-gap: var(--space-lg); align-items: start;
  }
  .car__art { grid-row: 1 / -1; align-self: stretch; display: grid; place-items: center; margin: 0; }
  .car { padding: var(--space-xs); }
  .car h3, .car__tier, .car__specs, .car__price { grid-column: 2; }
  .car__specs { margin-top: var(--space-2xs); }
  .post {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: 1fr auto auto 1fr; column-gap: var(--space-md);
  }
  .post img { grid-row: 1 / -1; margin-bottom: 0; }
  .post__meta { grid-column: 2; grid-row: 2; }
  .post h3 { grid-column: 2; grid-row: 3; font-size: var(--text-lg); }
  .post__dek { grid-column: 2; grid-row: 4; }
  .post:not(.post--feature) { padding-bottom: 0; border-bottom: 0; }
  .post:not(.post--feature) img { aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
  /* Up to tablet width a sideways-scrolling table hid the prices (and cut off
     the Choose buttons), which are the point. Each route becomes a card with
     both fares side by side; two cards a row on tablets. */
  .table-scroll { overflow: visible; padding: 0; background: none; box-shadow: none; }
  .fares { display: block; min-width: 0; }
  .fares thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fares tbody { display: grid; gap: var(--space-sm); }
  .fares tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xs) var(--space-md);
    padding: var(--space-md); border: 0; border-radius: var(--radius-sm);
    background: var(--color-surface); box-shadow: var(--shadow-card);
  }
  .fares tbody tr:hover { background: var(--color-surface); }
  .fares tbody th, .fares tbody td { display: block; padding: 0; text-align: left; }
  .fares tbody th { grid-column: 1 / -1; font-size: var(--text-base); }
  .fares tbody td[data-label="To"] { grid-column: 1 / -1; margin-bottom: var(--space-xs); }
  .fares tbody td[data-label="To"]::before { content: "\2192\00a0"; color: var(--color-accent-text); }
  .fares tbody td[data-label="Berline"]::before,
  .fares tbody td[data-label="Van"]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: 600; font-stretch: 100%;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .fares tbody td[data-label="Journey"] { grid-column: 1 / -1; margin-top: var(--space-2xs); font-size: var(--text-xs); }
  .fares tbody td[data-label="Journey"]::before { content: "Journey\00a0\00b7\00a0"; }
  .fares__pick-cell { grid-column: 1 / -1; width: auto; margin-top: var(--space-xs); }
  .fares__pick { width: 100%; justify-content: center; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .fares tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .brand img { height: 46px; }
  .wrap { padding-inline: var(--space-sm); }
  .topbar p { display: none; }
  .topbar__inner { justify-content: center; }
  .promises, .reviews, .ledger { grid-template-columns: 1fr; }
  .quote-lead { padding: var(--space-lg); }
  .post:not(.post--feature) { display: block; }
  .post:not(.post--feature) img { height: auto; min-height: 0; aspect-ratio: 16 / 10; margin-bottom: var(--space-sm); }


  .story .stats--inline > div:nth-child(even) { padding-left: var(--space-sm); }
  .story__media { margin: 0 var(--space-sm) var(--space-sm) 0; }
  .story__media::before { inset: var(--space-sm) calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) var(--space-sm); }
  .promises li, .promises li:nth-child(n+4) { grid-column: auto; }
  .promises li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); }
  .promises__icon { grid-row: span 2; margin-bottom: 0; }
  .tiles { grid-template-columns: 1fr; grid-auto-rows: 360px; }
  .tile--feature, .tile--wide { grid-column: auto; }
  .tile--wide .tile__body {
    align-self: auto; padding: var(--space-3xl) var(--space-md) var(--space-md);
    background: linear-gradient(0deg, rgba(13,14,16,.94) 0%, rgba(13,14,16,.9) 55%, rgba(13,14,16,0) 100%);
  }
  .tile--wide .tile__body > * { max-width: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-md); }
  .footer__about { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .hero__actions { gap: var(--space-2xs); }
  .hero__actions .btn { flex: 1 1 100%; }
  /* Full-width chip buttons: label left, chip on the right edge. A centred
     label with the chip glued to it read as a misaligned button. */
  .btn--chip { justify-content: space-between; padding-left: var(--space-md); }
  .hero__actions .btn--glass { min-height: var(--tap); border-color: transparent; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .hero__actions .btn--glass:hover { background: transparent; border-color: transparent; text-decoration-color: currentColor; }
  .dock { right: var(--space-xs); bottom: var(--space-xs); }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* =============================================================== about --- */
/* about.html. Built from the approved mockup in design-source/mockups/.
   Classes are prefixed .ab- so nothing here reaches the homepage; the hero
   reuses the homepage .hero with the .hero--page modifier. */

.ab h1, .ab h2 { font-stretch: var(--font-stretch-display); letter-spacing: -.025em; }
.ab h2 { font-size: var(--text-h2); line-height: 1.05; }
.ab .eyebrow { color: var(--color-accent-text); }
.ab .eyebrow--onDark { color: var(--color-accent-text-on-dark); }
/* Over the photo scrim the on-dark red measured 4.3:1; the raised-card red clears 4.5. */
.hero--page .eyebrow--onDark { color: var(--color-accent-text-on-raised); }
.ab .eyebrow::before { background: var(--color-accent); }
.ab-head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.ab-head__note { color: var(--color-ink-muted); max-width: 40ch; justify-self: end; }
.ab-flag { margin-top: var(--space-xl); display: inline-flex; gap: .5rem; align-items: center; font-size: var(--text-xs); color: var(--color-ink-muted); border: 1px dashed var(--color-border); padding: .4rem .7rem; border-radius: var(--radius-sm); }
.ab-flag::before { content: ""; width: 6px; height: 6px; background: var(--color-accent); }

/* 1. Hero: the homepage .hero, shorter for an inner page */
.hero--page { min-height: clamp(520px, 74dvh, 700px); }
/* "same people" gets a line of its own so the red stays over the dark
   side of the scrim rather than the bright terminal glass. */
.hero--page .hero__media img { object-position: 50% 28%; }
/* This photo is brighter than the homepage banner: measured on the glyphs,
   "people" fell to 1.3:1 over the terminal glass and the red eyebrow to
   2.9:1, so the scrim holds near-black further across. */
.hero--page::after { background:
  linear-gradient(90deg, rgba(19,19,19,.97) 0%, rgba(19,19,19,.94) 58%, rgba(19,19,19,.55) 82%, rgba(19,19,19,.3) 100%),
  linear-gradient(0deg, var(--color-dark) 2%, transparent 38%); }
@media (max-width: 1080px) {
  .hero--page::after { background: linear-gradient(0deg, var(--color-dark) 10%, rgba(19,19,19,.97) 55%, rgba(19,19,19,.95) 100%); }
}
.hero--page .hero__actions .btn--glass { gap: .6rem; }
.crumbs { display: flex; gap: .6rem; align-items: center; margin-bottom: var(--space-lg); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-on-dark); }
.crumbs [aria-current] { color: var(--color-on-dark-muted); }

/* 2. Proof */
/* White, not translucent white: at .88 the labels measured 4.1:1 on the red. */
.ab-proof { background: radial-gradient(50% 140% at 100% 0, rgba(255,255,255,.06), transparent 70%), var(--color-accent-surface); color: #fff; }
.ab-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ab-proof__grid > div { padding: var(--space-2xl) var(--space-lg); border-left: 1px solid rgba(255,255,255,.22); }
.ab-proof__grid > div:first-child { border-left: 0; padding-left: 0; }
.ab-proof b { display: block; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1; font-stretch: var(--font-stretch-display); letter-spacing: -.04em; }
.ab-proof b small { font-size: .38em; margin-left: .2em; letter-spacing: 0; color: #fff; }
.ab-proof span { display: block; margin-top: .75rem; font-size: var(--text-sm); color: #fff; max-width: 22ch; }


/* 3. Timeline */
.ab-time { background: var(--color-muted); padding-block: var(--space-4xl); }
.ab-time__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); position: relative; counter-reset: t; }
.ab-time__list::before { content: ""; position: absolute; left: 0; right: 0; top: 3.15rem; height: 2px; background: linear-gradient(90deg, var(--color-ink) 0 80%, var(--color-accent) 80% 100%); }
.ab-time__list li { position: relative; padding-top: 4.6rem; }
.ab-time__list li::before { content: ""; position: absolute; left: 0; top: 2.65rem; width: 16px; height: 16px; background: var(--color-paper); border: 3px solid var(--color-ink); }
.ab-time__list li.is-now::before { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.ab-time__year { position: absolute; top: 0; left: 0; font-size: 2rem; font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px var(--color-ink); }
.ab-time__list li.is-now .ab-time__year { color: var(--color-accent-text); -webkit-text-stroke: 0; }
.ab-time h3 { font-size: var(--text-lg); margin-bottom: .4rem; }
.ab-time p { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.6; }

/* 4. Quote */
.ab-quote { position: relative; background: var(--color-dark); color: var(--color-on-dark); overflow: hidden; }
.ab-quote__media { position: absolute; inset: 0 50% 0 0; }
.ab-quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.ab-quote__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--color-dark) 100%); }
.ab-quote__inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; align-items: center; }
.ab-quote figure { margin: 0; grid-column: 2; padding: var(--space-3xl) 0 var(--space-3xl) var(--space-2xl); }
.ab-quote__mark { width: 44px; height: 44px; color: var(--color-accent); }
.ab-quote blockquote { margin: var(--space-md) 0 var(--space-xl); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.25; font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.02em; }
.ab-quote figcaption { display: flex; align-items: center; gap: .9rem; }
.ab-quote figcaption b { display: block; }
.ab-quote figcaption span:last-child { font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.ab-avatar { display: grid; place-items: center; width: 48px; height: 48px; background: var(--color-accent-surface); font-weight: 700; font-size: var(--text-sm); color: #fff; }

/* 6. Team */
.ab-team { background: var(--color-muted); padding-block: var(--space-4xl); }
.ab-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.ab-person { background: var(--color-surface); box-shadow: var(--shadow-card); }
.ab-team__grid { align-items: start; }
.ab-person:nth-child(2) { margin-top: var(--space-xl); }
.ab-person__photo { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--color-dark); }
.ab-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.05); }
.ab-person__photo--initials { display: grid; place-items: center; background:
  radial-gradient(60% 60% at 70% 20%, var(--color-glow), transparent 70%), var(--color-dark-deep); }
.ab-person__photo--alt { background: radial-gradient(60% 60% at 20% 90%, var(--color-glow), transparent 70%), var(--color-dark); }
.ab-person__photo--initials span { font-size: 5rem; font-weight: 700; font-stretch: var(--font-stretch-display); color: transparent; -webkit-text-stroke: 1.5px var(--color-on-dark); letter-spacing: -.03em; }
.ab-person__body { padding: var(--space-lg); border-top: 4px solid var(--color-accent); }
.ab-person h3 { font-size: var(--text-xl); font-stretch: var(--font-stretch-display); }
.ab-person__role { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); margin: .3rem 0 .8rem; }
.ab-person p:last-child { color: var(--color-ink-muted); font-size: var(--text-sm); line-height: 1.6; }

/* 8. CTA */
.ab-cta { background:
  radial-gradient(50% 140% at 0 100%, rgba(0,0,0,.28), transparent 70%), var(--color-accent-surface); color: var(--color-on-accent); padding-block: var(--space-3xl); }
.ab-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.ab-cta h2 { color: inherit; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.ab-cta p { margin-top: .6rem; color: rgba(255,255,255,.88); font-size: var(--text-lead); }
.ab-cta__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.ab-cta .btn--glass svg { width: 20px; height: 20px; }
.ab-cta .btn--glass { gap: .6rem; border-color: rgba(255,255,255,.6); }

/* 3. Company */
.ab-company { padding-block: var(--space-4xl); }
.ab-company__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-3xl); align-items: center; }
.ab-company__media { position: relative; margin: 0; isolation: isolate; }
.ab-company__media img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-lift); }
.ab-company__media::before { content: ""; position: absolute; z-index: -1; right: -24px; top: 48px; bottom: -24px; width: 55%; background: var(--color-accent-surface); }
.ab-card--wide { margin-top: var(--space-4xl); }
.ab-card--wide .ab-card__list { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; }
.ab-card--wide .ab-card__list > div { grid-template-columns: 1fr; gap: .35rem; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.ab-card--wide .ab-card__list > div:nth-child(5n) { border-right: 0; }
.ab-card--wide .ab-card__list > div:nth-last-child(-n+5) { border-bottom: 0; }
.ab-card--wide .ab-card__list dt { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.ab-company h2 { margin: var(--space-sm) 0 var(--space-lg); }
.ab-company__copy > p:not(.eyebrow) { color: var(--color-ink-muted); line-height: 1.7; max-width: 56ch; margin-bottom: var(--space-md); }
.ab-company__copy > p.ab-company__lead { color: var(--color-ink); font-size: var(--text-lead); line-height: 1.6; }
.ab-company__services { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-lg); }
.ab-company__services li { padding: .5rem .85rem; border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; background: var(--color-surface); }
.ab-company__services li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; background: var(--color-accent); vertical-align: middle; }
.ab-card { position: relative; background: var(--color-surface); box-shadow: var(--shadow-lift); border-top: 4px solid var(--color-accent); }
.ab-card::after { content: ""; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; background: var(--color-muted); }
.ab-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-dark-deep); }
.ab-card__head img { height: 40px; width: auto; }
.ab-card__head span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.ab-card__list { padding: var(--space-xs) var(--space-lg); }
.ab-card__list > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-md); padding: .8rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.ab-card__list > div:last-child { border-bottom: 0; }
.ab-card__list dt { color: var(--color-ink-muted); }
.ab-card__list dd { font-weight: 600; color: var(--color-ink); }
.ab-ph { font-style: normal; font-weight: 600; font-size: .78rem; padding: .1rem .45rem; border: 1px dashed var(--color-accent); color: var(--color-accent-text); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.ab-card__contact { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); }
.ab-card__contact a { display: flex; align-items: center; gap: .55rem; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.ab-card__contact a + a { border-left: 1px solid var(--color-border); }
.ab-card__contact svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; }

/* 5. Why choose us */
.ab-why { padding-block: var(--space-4xl); color: var(--color-on-dark); background:
  radial-gradient(45% 60% at 100% 0, var(--color-glow), transparent 70%),
  radial-gradient(40% 50% at 0 100%, var(--color-glow), transparent 70%), var(--color-dark-deep); }
.ab-why h2 { color: var(--color-on-dark); }
.ab-why .eyebrow { color: var(--color-accent-text-on-dark); }
.ab-why .ab-head__note { color: var(--color-on-dark-muted); }
.ab-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.ab-why__card { position: relative; padding: var(--space-xl) var(--space-lg); background: var(--color-dark-raised); border: 1px solid var(--color-hairline-dark); }
.ab-why__card svg { width: 30px; height: 30px; color: var(--color-accent-text-on-raised); margin-bottom: var(--space-xl); }
.ab-why__n { position: absolute; top: var(--space-md); right: var(--space-lg); font-size: 3.2rem; line-height: 1; font-weight: 700; font-stretch: var(--font-stretch-display); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); }
.ab-why__card h3 { font-size: var(--text-lg); color: var(--color-on-dark); margin-bottom: .55rem; }
.ab-why__card p { color: var(--color-on-dark-muted); font-size: var(--text-sm); line-height: 1.65; }
.ab-why__card--feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2xl);
  background: radial-gradient(70% 80% at 100% 0, rgba(255,255,255,.12), transparent 60%), var(--color-accent-surface); border-color: transparent; }
.ab-why__card--feature svg { width: 44px; height: 44px; color: #fff; margin-bottom: auto; }
.ab-why__card--feature .ab-why__n { font-size: 7rem; -webkit-text-stroke: 1.5px rgba(255,255,255,.45); top: var(--space-lg); right: var(--space-xl); }
.ab-why__card--feature h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.05; font-stretch: var(--font-stretch-display); letter-spacing: -.02em; margin: var(--space-2xl) 0 var(--space-sm); max-width: 16ch; }
.ab-why__card--feature p { color: rgba(255,255,255,.9); font-size: var(--text-base); max-width: 48ch; }
.ab-why__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--space-lg); font-weight: 700; font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ab-why__card--feature .ab-why__link svg { width: 18px; height: 18px; margin: 0; }

/* Phone */
@media (max-width: 900px) {
  .ab-head { grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-xl); }
  .ab-head__note { justify-self: start; }
  .ab-proof__grid { grid-template-columns: 1fr 1fr; }
  .ab-proof__grid > div { padding: var(--space-xl) var(--space-md); border-left: 0; border-top: 1px solid var(--color-hairline-dark); }
  .ab-proof__grid > div:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--color-hairline-dark); }
  .ab-proof__grid > div:nth-child(-n+2) { border-top: 0; }
  .ab-time { padding-block: var(--space-3xl); }
  .ab-time__list { grid-template-columns: 1fr; gap: var(--space-lg); padding-left: 2.2rem; }
  .ab-time__list::before { left: 7px; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-ink) 0 80%, var(--color-accent) 80% 100%); }
  .ab-time__list li { padding-top: 2.6rem; }
  .ab-time__list li::before { left: -2.2rem; top: .55rem; }
  .ab-quote__media { position: relative; inset: auto; height: 300px; }
  .ab-quote__media::after { background: linear-gradient(180deg, transparent 50%, var(--color-dark) 100%); }
  .ab-quote__inner { grid-template-columns: 1fr; min-height: 0; }
  .ab-quote figure { grid-column: 1; padding: 0 0 var(--space-2xl); }
  .ab-company { padding-block: var(--space-3xl); }
  .ab-company__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .ab-card::after { inset: 12px -8px -12px 12px; }
  .ab-card__head { padding: var(--space-sm) var(--space-md); }
  .ab-card__head img { height: 34px; }
  .ab-card__list { padding: var(--space-2xs) var(--space-md); }
  .ab-card__list > div { grid-template-columns: 1fr; gap: .2rem; }
  .ab-company__media::before { right: -12px; top: 32px; bottom: -12px; }
  .ab-card--wide { margin-top: var(--space-2xl); }
  .ab-card--wide .ab-card__list { grid-template-columns: 1fr 1fr; }
  .ab-card--wide .ab-card__list > div { padding: var(--space-sm) var(--space-md); border-right: 0; border-bottom: 1px solid var(--color-border) !important; }
  .ab-card--wide .ab-card__list > div:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .ab-card--wide .ab-card__list > div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .ab-proof__grid > div { border-color: rgba(255,255,255,.22) !important; }
  .ab-card__contact { grid-template-columns: 1fr; }
  .ab-card__contact a { padding: var(--space-sm) var(--space-md); }
  .ab-card__contact a + a { border-left: 0; border-top: 1px solid var(--color-border); }
  .ab-why { padding-block: var(--space-3xl); }
  .ab-why__grid { grid-template-columns: 1fr; }
  .ab-why__card--feature { grid-column: auto; grid-row: auto; padding: var(--space-xl) var(--space-lg); }
  .ab-why__card--feature .ab-why__n { font-size: 4.5rem; }
  .ab-why__card--feature h3 { margin-top: var(--space-xl); }
  .ab-team { padding-block: var(--space-3xl); }
  .ab-team__grid { grid-template-columns: 1fr; }
  .ab-person:nth-child(2) { margin-top: 0; }
  .ab-person { display: grid; grid-template-columns: 120px 1fr; }
  .ab-person__photo { aspect-ratio: auto; }
  .ab-person__photo--alt { background: radial-gradient(60% 60% at 20% 90%, var(--color-glow), transparent 70%), var(--color-dark); }
.ab-person__photo--initials span { font-size: 2.6rem; }
  .ab-person__body { border-top: 0; border-left: 4px solid var(--color-accent); padding: var(--space-md); }
  .ab-cta__actions, .ab-cta__actions .btn { width: 100%; }
  .ab-cta__actions .btn--chip { justify-content: space-between; padding-left: var(--space-md); }
}

/* Tablet: the portrait image at full width was 840px tall, and six reasons
   in one column read as a list. */
@media (min-width: 681px) and (max-width: 900px) {
  .ab-company__media { max-width: 480px; margin-inline: auto; }
  .ab-why__grid { grid-template-columns: 1fr 1fr; }
  .ab-why__card--feature, .ab-why__card:last-child { grid-column: 1 / -1; }
}

/* ============================================================= contact --- */
/* contact.html, from the approved mockup in design-source/mockups/. Builds on
   the about page's .ab base and .hero--page. */

.hero--contact .hero__media img { object-position: 50% 55%; }
.hero--contact { min-height: clamp(520px, 70dvh, 660px); padding-bottom: var(--space-3xl); }
.ct-live { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-on-dark); font-weight: 600; }
.ct-live li { display: flex; align-items: center; gap: .55rem; }
.ct-live li + li { color: var(--color-on-dark-muted); font-weight: 400; }
.ct-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #3ccf6e; box-shadow: 0 0 0 5px rgba(60,207,110,.18); }

/* 2. Ways */
.ct-ways { position: relative; z-index: 2; margin-top: calc(var(--space-3xl) * -1); padding-bottom: var(--space-2xl); background: linear-gradient(180deg, transparent 0 var(--space-3xl), var(--color-muted) var(--space-3xl)); }
.ct-ways__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.ct-way { position: relative; display: flex; flex-direction: column; padding: var(--space-lg); min-height: 236px; background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-lift); border-top: 3px solid transparent; transition: transform var(--ease) var(--curve), border-color var(--ease) var(--curve); }
.ct-way:hover { transform: translateY(-4px); border-top-color: var(--color-accent); }
.ct-way__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; background: var(--color-muted); color: var(--color-accent-text); }
.ct-way__icon svg { width: 24px; height: 24px; }
.ct-way__label { margin-top: var(--space-lg); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-muted); }
.ct-way b { margin-top: .35rem; font-size: 1.15rem; font-stretch: var(--font-stretch-display); letter-spacing: -.01em; overflow-wrap: break-word; }
.ct-way__note { margin-top: .35rem; font-size: var(--text-sm); color: var(--color-ink-muted); }
.ct-way__go { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 20px; height: 20px; color: var(--color-ink-muted); transition: transform var(--ease) var(--curve); }
.ct-way:hover .ct-way__go { transform: translateX(4px); color: var(--color-accent-text); }
.ct-way--call { background: var(--color-accent-surface); color: #fff; }
.ct-way--call .ct-way__icon { background: rgba(255,255,255,.14); color: #fff; }
.ct-way--call .ct-way__label, .ct-way--call .ct-way__note, .ct-way--call .ct-way__go { color: #fff; }
.ct-way--call b { font-size: 1.45rem; }
.ct-way--call:hover { border-top-color: #fff; }

/* 3. Form */
.ct-form-band { background: var(--color-muted); padding-bottom: var(--space-4xl); }
.ct-form-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; }
.ct-form-card { padding: var(--space-2xl); background: var(--color-surface); box-shadow: var(--shadow-card); border-top: 4px solid var(--color-accent); }
.ct-form-card h2 { margin: var(--space-sm) 0 var(--space-sm); font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.ct-form-card__intro { color: var(--color-ink-muted); max-width: 58ch; margin-bottom: var(--space-xl); line-height: 1.6; }
.ct-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.ct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }
.ct-field label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink); }
.ct-field label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-ink-muted); }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ct-field textarea { padding-block: 12px; resize: vertical; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 2px solid var(--color-ring); outline-offset: 1px; border-color: transparent; }
.ct-field ::placeholder { color: var(--color-ink-muted); }
.ct-select { position: relative; }
.ct-select select { appearance: none; padding-right: 40px; }
.ct-select svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.ct-form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); }
.ct-form__foot p { font-size: var(--text-xs); color: var(--color-ink-muted); max-width: 40ch; }
.ct-side { display: grid; gap: var(--space-sm); }
.ct-side__block { padding: var(--space-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.ct-side__block h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.ct-side__block p { font-size: var(--text-sm); line-height: 1.6; }
.ct-side__muted { color: var(--color-ink-muted); margin-top: .5rem; }
.ct-side__block--dark { background: radial-gradient(70% 90% at 100% 0, var(--color-glow), transparent 70%), var(--color-dark-deep); color: var(--color-on-dark); }
.ct-side__block--dark h3 { color: var(--color-on-dark); }
.ct-hours li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: .75rem 0; border-top: 1px solid var(--color-hairline-dark); font-size: var(--text-sm); }
.ct-hours li:first-child { border-top: 0; padding-top: 0; }
.ct-hours span { color: var(--color-on-dark-muted); }
.ct-hours b { text-align: right; }

/* 4. Airports */
.ct-airports { padding-block: var(--space-4xl); color: var(--color-on-dark); background:
  radial-gradient(45% 60% at 100% 0, var(--color-glow), transparent 70%), var(--color-dark-deep); }
.ct-airports h2 { color: var(--color-on-dark); }
.ct-airports .ab-head__note { color: var(--color-on-dark-muted); }
.ct-airports .eyebrow--onDark { color: var(--color-accent-text-on-dark); }
.ct-airports__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-hairline-dark); }
.ct-airports article { padding: var(--space-xl) var(--space-lg) var(--space-lg); border-right: 1px solid var(--color-hairline-dark); }
.ct-airports article:first-child { padding-left: 0; }
.ct-airports article:last-child { border-right: 0; }
.ct-code { display: block; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; font-weight: 700; font-stretch: var(--font-stretch-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--color-on-dark); margin-bottom: var(--space-lg); }
.ct-airports article:first-child .ct-code { color: var(--color-accent-text-on-dark); -webkit-text-stroke: 0; }
.ct-airports h3 { font-size: var(--text-lg); color: var(--color-on-dark); }
.ct-airports p { margin-top: .3rem; font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.ct-airports article b { display: inline-block; margin-top: var(--space-md); padding: .4rem .7rem; font-size: var(--text-sm); border: 1px solid var(--color-hairline-dark); }

/* 5. FAQ */
.ct-faq .faq-grid__intro { position: static; }

@media (max-width: 1080px) {
  .ct-ways__grid { grid-template-columns: 1fr 1fr; }
  .ct-form-grid { grid-template-columns: 1fr; }
  .ct-side { grid-template-columns: repeat(3, 1fr); }
  .ct-airports__grid { grid-template-columns: 1fr 1fr; }
  .ct-airports article:nth-child(2) { border-right: 0; }
  .ct-airports article:nth-child(3) { padding-left: 0; }
  .ct-airports article:nth-child(n+3) { border-top: 1px solid var(--color-hairline-dark); }
}
@media (max-width: 680px) {
  .hero--contact { padding-bottom: var(--space-2xl); }
  .ct-ways { margin-top: calc(var(--space-xl) * -1); background: linear-gradient(180deg, transparent 0 var(--space-xl), var(--color-muted) var(--space-xl)); }
  .ct-ways__grid { grid-template-columns: 1fr; }
  .ct-way { min-height: 0; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-md); padding: var(--space-md); }
  .ct-way__icon { grid-row: span 3; margin: 0; }
  .ct-way__label { margin-top: 0; }
  .ct-way__go { top: var(--space-md); right: var(--space-md); }
  .ct-form-card { padding: var(--space-lg) var(--space-md); }
  .ct-form { grid-template-columns: 1fr; }
  .ct-form__foot { flex-direction: column; align-items: stretch; }
  .ct-form__foot .btn { justify-content: space-between; padding-left: var(--space-md); }
  .ct-side { grid-template-columns: 1fr; }
  .ct-airports { padding-block: var(--space-3xl); }
  .ct-airports__grid { grid-template-columns: 1fr; }
  .ct-airports article { padding: var(--space-lg) 0; border-right: 0 !important; border-top: 1px solid var(--color-hairline-dark); display: grid; grid-template-columns: 6.5rem 1fr; column-gap: var(--space-md); }
  .ct-airports article:first-child { border-top: 0; }
  .ct-code { grid-row: span 3; margin: 0; font-size: 2.6rem; }
  .ct-airports article b { justify-self: start; margin-top: .6rem; }
}

/* Form states */
#message, .ct-done { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.ct-field [aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 3px 0 0 var(--color-danger); }
.ct-error { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-text); }
.ct-alert { grid-column: 1 / -1; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-paper)); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.ct-alert a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ct-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form { position: relative; }
.ct-form [type="submit"][aria-busy="true"] { opacity: .75; cursor: progress; }
.ct-done { padding: var(--space-xl) 0 var(--space-sm); }
.ct-done__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-md); background: var(--color-accent-surface); color: #fff; }
.ct-done__icon svg { width: 28px; height: 28px; }
.ct-done h3 { font-size: var(--text-xl); font-stretch: var(--font-stretch-display); margin-bottom: var(--space-sm); }
.ct-done p { color: var(--color-ink-muted); max-width: 52ch; line-height: 1.6; }
.ct-done p b { color: var(--color-ink); }
.ct-done__urgent { margin: var(--space-sm) 0 var(--space-lg); }
.ct-done__urgent a { color: var(--color-accent-text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .js .nav, .js .nav[data-open="true"], .js .nav li, .js .nav__extra, .burger__lines span, .bk *, .bk *::before, .bk *::after { transition: none !important; animation: none !important; }
  .js .dock, .dock__label { transform: none; transition: none; }
  .dock__btn:hover .dock__label, .dock__btn:focus-visible .dock__label { transform: translate(0, -50%); }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .ticker__track { animation: none; }
  .btn:active, .car:hover, .tile:hover img { transform: none; }
  .js-motion .reveal, .js-motion .reveal-group > *, .reveal, .reveal-group > * { opacity: 1; transform: none; }
  .tile, .car__art, .post img { clip-path: none !important; }
}