/* ==========================================================================
   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  { 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  { 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: 64px; } /* stacked mark: at 38px the wordmark fell to ~5px */
.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 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 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 a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.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 svg { width: var(--icon-md); height: var(--icon-md); }
.burger__b { display: none; }
.burger[aria-expanded="true"] .burger__a { display: none; }
.burger[aria-expanded="true"] .burger__b { display: block; }

/* ---------------------------------------------------------------- hero --- */
/* Fills the first screen below the header. Copy sits in the middle of the
   photograph's dark side; the fare finder runs along the bottom edge, where the
   photo is least busy, so it never covers the two people in the shot. */

.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__finder { 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); }


/* ------------------------------------------------------------- finder --- */
/* Reads the fares table, so the bar and the table can never disagree. Hidden
   until main.js has filled it: without scripting it would be an empty form. */

.hero__finder { padding-bottom: var(--space-xl); }
.finder {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.25fr) minmax(0, .95fr) auto;
  padding: var(--space-2xs); color-scheme: dark;
  background: var(--color-glass-dark); border: 1px solid var(--color-hairline-dark);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card-dark);
}
.finder__cell {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0;
  margin: 0; padding: var(--space-xs) var(--space-md); border: 0;
}
.finder__cell + .finder__cell { border-left: 1px solid var(--color-hairline-dark); }
.finder__label {
  float: left; width: 100%; padding: 0;
  color: var(--color-on-dark-muted); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
.finder__control { position: relative; display: block; clear: both; }
.finder__control svg { position: absolute; right: 0; top: 50%; width: var(--icon-sm); height: var(--icon-sm); margin-top: calc(var(--icon-sm) / -2); color: var(--color-accent); pointer-events: none; }
.finder__select {
  appearance: none; width: 100%; min-height: var(--tap); padding: 0 var(--space-lg) 0 0;
  border: 0; background: transparent; color: var(--color-on-dark);
  font: inherit; font-size: var(--text-base); font-weight: 600; text-overflow: ellipsis; cursor: pointer;
}
.finder__select:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 4px; }

.finder__seg { clear: both; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--color-hairline-dark); border-radius: var(--radius-sm); }
.finder__seg label { position: relative; flex: 1; }
.finder__seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.finder__seg span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap);
  border-radius: 2px; color: var(--color-on-dark-muted); font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--ease) var(--curve), color var(--ease) var(--curve);
}
.finder__seg small { font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.finder__seg input:hover + span { color: var(--color-on-dark); }
.finder__seg input:checked + span { background: var(--color-on-dark); color: var(--color-dark-deep); }
.finder__seg input:focus-visible + span { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.finder__price { display: block; clear: both; }
.finder__price b {
  display: block; color: var(--color-on-dark); font-size: var(--text-xl); font-weight: 700;
  font-stretch: var(--font-stretch-display); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.finder__price span { display: block; color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.finder__book { align-self: center; margin: var(--space-2xs); }

/* --------------------------------------------------------------- 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; font-variant-numeric: tabular-nums; letter-spacing: 0; }
@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 fare finder. */

.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); }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.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; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px;
  color: var(--color-accent); font-size: var(--text-lg); font-weight: 400; line-height: 1;
  transition: transform var(--ease-slow) var(--curve), background-color var(--ease) var(--curve), color var(--ease) var(--curve);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); background: var(--color-accent-surface); color: var(--color-on-accent); }
.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: 104px; margin-bottom: var(--space-sm); } /* stacked mark: at 42px the wordmark was ~6px */
.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); }

/* ----------------------------------------------------------------- fab --- */

/* A square icon button rather than a labelled pill: the pill was ~110px wide and
   sat on top of fleet figures and the last footer links. The number is still
   announced through the hidden label. */
.fab {
  position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: 60;
  display: none; place-items: center; width: 56px; height: 56px; padding: 0;
  border-radius: var(--radius-sm); background: var(--color-accent-surface); color: var(--color-on-accent);
  box-shadow: var(--shadow-lift);
}
.fab svg { width: var(--icon-md); height: var(--icon-md); }

/* The call button is fixed, so in the hero it lands on top of the last stat.
   Where scripting can move it, it stays out of the way until the hero has
   scrolled past; without scripting it is simply always there. */
.js .fab { 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 .fab { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* -------------------------------------------------------------- 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 .finder { animation: fade-up 700ms var(--curve) 440ms 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%);
  }

  .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finder__cell--route { grid-column: 1 / -1; }
  .finder__cell + .finder__cell { border-left: 0; border-top: 1px solid var(--color-hairline-dark); }
  .finder__cell--price { border-left: 1px solid var(--color-hairline-dark); }
  .finder__book { grid-column: 1 / -1; }

  .head { grid-template-columns: 1fr; align-items: 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); }
  .js .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-header);
  }
  .js .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: var(--space-2xs) var(--space-xl) var(--space-sm); }
  .nav li + li { border-top: 1px solid var(--color-border); }
  .nav a { display: flex; }
  .nav a::after { display: none; }
  .header__cta { display: none; }
  .js .burger { display: grid; }
  .fab { display: grid; }
  /* Room at the very end of the page so the button never covers the last links. */
  .footer__base { padding-bottom: calc(56px + var(--space-lg)); }
  .fleet, .posts, .steps { grid-template-columns: 1fr; }
  .steps { gap: var(--space-lg); }
  .steps li::after { display: none; }
  .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: 52px; }
  .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 .btn { flex: 1 1 100%; }
  .finder { grid-template-columns: minmax(0, 1fr); }
  .finder__cell--price { border-left: 0; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fab { transform: none; transition: none; }
  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; }
}