/* OSPIPO — built 2026-08-09. Edit src/styles/*.css, not this file. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src:url('/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src:url('/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display:swap;
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ==========================================================================
   OSPIPO — design tokens
   "Precision luxury": dark, warm, editorial, numerically dominant.

   Every value here has been checked against WCAG 2.2 AA on the surface it is
   meant to sit on. The measured ratios are noted inline; if you change a value,
   re-run `node test/run.mjs` — the contrast test reads these tokens directly and
   will fail the build rather than let a low-contrast pair ship.
   ========================================================================== */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --ink-900: #0e1114; /* page base */
  --ink-800: #151a20; /* raised surface */
  --ink-700: #1d242c; /* card */
  --ink-600: #2a333d; /* hairline / divider */
  --paper: #f4f1ea; /* document surface: fare table, receipt, ledger */
  --paper-sunk: #eae6dc; /* recessed rows inside a document surface */
  --paper-line: #d9d3c4; /* hairline on paper */

  /* ---- Text on ink ---------------------------------------------------- */
  --text-hi: #f3f1ed; /* 16.4:1 on ink-900 */
  --text-mid: #b6bdc6; /* 10.1:1 on ink-900 — body copy, passes AA comfortably */
  --text-low: #7e8894; /*  5.3:1 on ink-900 — labels and decoration only */

  /* ---- Text on paper -------------------------------------------------- */
  --paper-text: #0e1114; /* 16.9:1 on paper */
  --paper-text-mid: #4c5560; /*  6.7:1 on paper */
  --paper-text-low: #656e78; /*  5.0:1 on paper — the floor, comfortably AA */

  /* ---- Accent --------------------------------------------------------- */
  --champagne: #d8b876; /* 10.0:1 on ink-900 — prices, primary action, focus */
  --champagne-dim: #a8894f; /* hover / pressed */
  --champagne-ink: #7a5e1e; /*  5.4:1 on paper — the accent, darkened for light surfaces */
  --champagne-wash: rgba(216, 184, 118, 0.08);
  --champagne-hair: rgba(216, 184, 118, 0.2); /* replaces the old gradient rule */

  /* ---- Brand mark ----------------------------------------------------- */
  --brand-ivory: #f4eee4; /* 16.5:1 on ink-900 — the wordmark */
  --brand-gold: #c9a85c; /*  8.4:1 on ink-900 — the two accented letters */
  --brand-strap: #9aa0aa; /*  7.2:1 on ink-900 — the strapline, 9px so AA matters */
  --brand-rule: rgba(201, 168, 92, 0.18); /* hairline between the mark and the strapline */

  /* ---- Semantic ------------------------------------------------------- */
  --signal: #4fa97a; /* 6.6:1 on ink-900 — available, confirmed */
  --signal-ink: #1f6b45; /* 5.6:1 on paper */
  --signal-wash: rgba(79, 169, 122, 0.1);
  --alert: #c4703a; /* 5.2:1 on ink-900 — genuine exceptions only */
  --alert-ink: #8a4515; /* 6.1:1 on paper */
  --alert-wash: rgba(196, 112, 58, 0.1);

  /* ---- Type families --------------------------------------------------
     Display  Bebas Neue      heavy condensed grotesque, all caps, H1/H2 only
     Accent   Instrument Serif italic, one word or short phrase per headline
     Sans     Inter           everything else, incl. tabular figures
     Mono     JetBrains Mono  eyebrows and micro-labels only, one per section
     -------------------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-accent: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Numerals: one declaration, applied to every fare, distance and time. */
  --numeric: 'Inter', sans-serif;
  --numeric-features: 'tnum' 1, 'cv05' 1, 'ss03' 1;

  /* ---- Type scale — fluid between 360px and 1440px --------------------- */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); /* 16 → 17px body */
  --step-1: clamp(1.18rem, 1.10rem + 0.36vw, 1.38rem);
  --step-2: clamp(1.42rem, 1.26rem + 0.70vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.42rem + 1.45vw, 2.60rem);
  --step-4: clamp(2.20rem, 1.55rem + 2.90vw, 3.90rem);
  --step-5: clamp(2.80rem, 1.60rem + 5.30vw, 5.60rem);
  --step-6: clamp(3.40rem, 1.40rem + 8.90vw, 8.00rem);

  --leading-body: 1.65;
  --leading-body-lg: 1.7;
  --leading-tight: 1.12;
  --tracking-display: -0.02em;
  --tracking-mono: 0.16em;

  /* Body measure, capped at 68 characters. */
  --measure: 68ch;
  --measure-tight: 54ch;

  /* ---- Space — 8px base grid ------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --section-y: 72px; /* mobile */
  --gutter: 20px;
  --shell: 1240px;
  --shell-wide: 1480px;

  /* ---- Radius — 4px on data, 14px on media. Never mixed in a component. */
  --r-data: 4px;
  --r-media: 14px;
  --r-pill: 999px;

  /* ---- Motion — 240ms ceiling, ease-out ------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 240ms;

  /* ---- Elevation ------------------------------------------------------
     There are no shadows in this design system. Separation is carried by a
     surface change and a 1px hairline, nothing else. */
  --hair: 1px solid var(--ink-600);
  --hair-champagne: 1px solid var(--champagne-hair);
  --hair-paper: 1px solid var(--paper-line);

  --focus-ring: 2px solid var(--champagne);
  --focus-offset: 3px;

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-y: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: 120px;
    --gutter: 40px;
  }
}

/* Light-surface sections flip the text tokens rather than overriding every rule. */
.surface-paper {
  --text-hi: var(--paper-text);
  --text-mid: var(--paper-text-mid);
  --text-low: var(--paper-text-low);
  --champagne: var(--champagne-ink);
  --signal: var(--signal-ink);
  --alert: var(--alert-ink);
  --hair: var(--hair-paper);
  --ink-600: var(--paper-line);
  --ink-700: var(--paper-sunk);
  --ink-800: var(--paper-sunk);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}


/* ==========================================================================
   OSPIPO — reset, elements, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body {
    line-height: var(--leading-body-lg);
  }
}

/* The hidden attribute outranks every layout rule in this stylesheet. Without this,
   any component with a display value ignores it — which is how a confirmation screen
   ends up visible before anything has been booked. */
[hidden] {
  display: none !important;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--ink-700);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

hr {
  border: 0;
  border-top: var(--hair);
  margin: var(--s-7) 0;
}

/* ---- Typography -------------------------------------------------------- */

.display,
h1.display,
h2.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-hi);
  text-wrap: balance;
}

.display em,
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--champagne);
}

.h1 {
  font-size: var(--step-5);
}
.h2 {
  font-size: var(--step-4);
}
.h3 {
  font-size: var(--step-2);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-hi);
  text-transform: none;
}
.h4 {
  font-size: var(--step-1);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text-hi);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  margin: 0 0 var(--s-4);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-hi);
  max-width: var(--measure-tight);
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-5);
}

.prose p {
  text-wrap: pretty;
}

.prose strong {
  color: var(--text-hi);
  font-weight: 600;
}

.prose a {
  color: var(--champagne);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: var(--champagne-dim);
}

/* Numerals. Applied wherever a fare, a distance or a time is rendered. */
.num,
.fare,
td.num,
.tabular {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Focus ------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--champagne);
  color: var(--ink-900);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-data);
  font-weight: 600;
  transition: transform var(--t-base) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---- Layout ------------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-wide {
  max-width: var(--shell-wide);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.62);
}

.surface-900 {
  background: var(--ink-900);
}
.surface-800 {
  background: var(--ink-800);
}
.surface-700 {
  background: var(--ink-700);
}
.surface-paper {
  background: var(--paper);
  color: var(--paper-text-mid);
}

.rule {
  border-top: var(--hair-champagne);
}

.stack > * + * {
  margin-top: var(--s-5);
}
.stack-lg > * + * {
  margin-top: var(--s-7);
}
.stack-sm > * + * {
  margin-top: var(--s-3);
}

.grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-9);
    align-items: start;
  }
  .grid-aside {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: var(--s-8);
    align-items: start;
  }
}

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--s-7);
}

.section-head .h2 {
  margin-bottom: var(--s-4);
}

/* The alternative opening. Nine sections that all begin eyebrow → headline → lede is what
   makes a long page read as a brochure; this one sets the headline and the lede side by
   side under a champagne rule, so the eye meets a different shape on the way down. */
@media (min-width: 1024px) {
  .section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--s-9);
    align-items: end;
    border-top: var(--hair-champagne);
    padding-top: var(--s-6);
  }

  .section-head--split .eyebrow {
    grid-column: 1 / -1;
  }

  .section-head--split .h2 {
    margin-bottom: 0;
  }

  .section-head--split .lede {
    max-width: var(--measure);
    padding-bottom: 0.4em;
  }
}

/* ---- Reveal on scroll --------------------------------------------------- */

/* The attribute is added by ui.js and only when IntersectionObserver exists, so a
   failed or blocked script can never leave a section permanently invisible. */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

[data-reveal='in'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Wide content never scrolls the page sideways — it scrolls inside itself. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-600) transparent;
}

.scroll-x::-webkit-scrollbar {
  height: 6px;
}
.scroll-x::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--r-pill);
}

@media print {
  /* The receipt is meant to be printed and filed, so its rules and surfaces have to
     survive the browser's default of dropping backgrounds. */
  .receipt,
  .receipt * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff;
    color: #000;
  }
  .site-header,
  .site-footer,
  .sticky-book,
  .concierge-launcher,
  .no-print {
    display: none !important;
  }
  .receipt {
    border: 1px solid #000;
    break-inside: avoid;
  }

  .section {
    padding-block: var(--s-6);
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #444;
  }
}


/* ==========================================================================
   OSPIPO — component library
   Every component here is built once and reused everywhere. No page invents a
   section. States are exhaustive: default, hover, focus, active, loading,
   empty, error, unavailable.
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-data);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--champagne);
  color: #0e1114;
  border-color: var(--champagne);
}
.btn--primary:hover {
  background: var(--champagne-dim);
  border-color: var(--champagne-dim);
}
.btn--primary:active {
  background: #96793f;
  border-color: #96793f;
}

.btn--ghost {
  background: transparent;
  color: var(--text-hi);
  border-color: var(--ink-600);
}
.btn--ghost:hover {
  border-color: var(--champagne);
  color: var(--champagne);
}

.btn--quiet {
  background: transparent;
  color: var(--champagne);
  min-height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--champagne-hair);
  border-radius: 0;
}
.btn--quiet:hover {
  border-bottom-color: var(--champagne);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-loading='true'] {
  pointer-events: none;
  color: transparent;
  position: relative;
}
.btn[data-loading='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: #0e1114;
  border-radius: 50%;
  color: rgba(14, 17, 20, 0.35);
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ----------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 17, 20, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hair);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 72px;
}

/* The mark and the strapline sit side by side, divided by a gold hairline — this is the
   live logo, not a stack. The accessible name is on the anchor, so both spans are
   aria-hidden and the split letters never reach a screen reader as "O S PIP O". */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
  padding-block: var(--s-3);
}

.brand__mark {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--brand-ivory);
}

/* Colour carries the emphasis, not weight — the display face has one weight. */
.brand__mark b {
  color: var(--brand-gold);
  font-weight: 400;
}

.brand__strap {
  font-family: var(--font-sans);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-strap);
  max-width: 150px;
  border-left: 1px solid var(--brand-rule);
  padding-left: 12px;
}

/* On a narrow phone the strapline competes with the menu button for room. The mark
   alone carries the brand there. */
@media (max-width: 420px) {
  .brand__mark {
    font-size: 28px;
  }
  .brand__strap {
    display: none;
  }
}

/* The full navigation appears at 1100px, but between 1100 and 1280 there is not room for
   it and the strapline together: the strapline broke to three lines and three nav items
   wrapped to two. Below 1100 the menu is collapsed and there is plenty of room, so the
   strapline is dropped only inside that band. */
@media (min-width: 1152px) and (max-width: 1279px) {
  .brand__strap {
    display: none;
  }
}

.nav {
  display: none;
  align-items: stretch;
  gap: var(--s-1);
}

/* 1152, not 1100. At 1100 the full nav fits only by wrapping three of its labels onto
   two lines. The drawer stays until there is genuinely room. */
@media (min-width: 1152px) {
  .nav {
    display: flex;
  }
}

.nav__item {
  position: relative;
  display: flex;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  background: transparent;
  border: 0;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-mid);
  border-bottom: 2px solid transparent;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.nav__link:hover,
.nav__link[aria-expanded='true'] {
  color: var(--text-hi);
  border-bottom-color: var(--champagne);
}

.nav__link[aria-current='page'] {
  color: var(--champagne);
}

.nav__link .chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base) var(--ease);
}

.nav__link[aria-expanded='true'] .chev {
  transform: rotate(-135deg) translateY(-2px);
}

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  background: var(--ink-800);
  border: var(--hair);
  border-radius: var(--r-data);
  padding: var(--s-6);
  display: none;
}

.mega[data-open='true'] {
  display: block;
}

.mega__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.mega__title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: var(--hair);
}

.mega__list {
  list-style: none;
  display: grid;
  gap: 2px;
}

.mega__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-data);
  font-size: var(--step--1);
  color: var(--text-mid);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.mega__row:hover {
  background: var(--champagne-wash);
  color: var(--text-hi);
}

.mega__row .t {
  color: var(--text-low);
  font-size: var(--step--2);
}

.mega__row .f {
  color: var(--champagne);
  font-weight: 600;
}

.mega__foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--hair);
  border-radius: var(--r-data);
  color: var(--text-mid);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.header__phone:hover {
  color: var(--champagne);
  border-color: var(--champagne);
}

.header__cta {
  display: none;
}

@media (min-width: 720px) {
  .header__cta {
    display: inline-flex;
    min-height: 44px;
    font-size: var(--step--1);
    padding-inline: var(--s-5);
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding-inline: var(--s-4);
  background: transparent;
  border: var(--hair);
  border-radius: var(--r-data);
  color: var(--text-hi);
  font-size: var(--step--1);
  font-weight: 500;
}

@media (min-width: 1152px) {
  .nav-toggle {
    display: none;
  }
}

.drawer {
  position: fixed;
  inset: 72px 0 0;
  z-index: 99;
  background: var(--ink-900);
  overflow-y: auto;
  padding: var(--s-6) 0 var(--s-9);
  display: none;
}

.drawer[data-open='true'] {
  display: block;
}

.drawer__group + .drawer__group {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--hair);
}

/* ----------------------------------------------------------- Fare engine */

.engine {
  background: var(--ink-800);
  border: var(--hair);
  border-radius: var(--r-data);
  overflow: hidden;
}

.engine__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: var(--hair);
}

.engine__title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.engine__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--2);
  color: var(--signal);
}

.engine__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.engine__status[data-state='unavailable'] {
  color: var(--alert);
}
.engine__status[data-state='loading'] {
  color: var(--text-low);
}

.engine__body {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}

.engine__row {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 560px) {
  .engine__row--split {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: var(--s-2);
  position: relative;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-data);
  color: var(--text-hi);
  font-size: var(--step-0);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.field__input::placeholder {
  color: var(--text-low);
}

.field__input:hover {
  border-color: #3a4550;
}

.field__input:focus-visible {
  border-color: var(--champagne);
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.field[data-invalid='true'] .field__input {
  border-color: var(--alert);
}

.field__error {
  display: none;
  font-size: var(--step--2);
  color: var(--alert);
}

.field[data-invalid='true'] .field__error {
  display: block;
}

.field__hint {
  font-size: var(--step--2);
  color: var(--text-low);
}

textarea.field__input {
  min-height: 132px;
  padding-block: var(--s-3);
  line-height: 1.55;
  resize: vertical;
}

/* Autocomplete */
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-data);
  max-height: 264px;
  overflow-y: auto;
  display: none;
}

.suggest[data-open='true'] {
  display: block;
}

.suggest__item {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--step--1);
  color: var(--text-mid);
}

.suggest__item[aria-selected='true'],
.suggest__item:hover {
  background: var(--champagne-wash);
  color: var(--text-hi);
}

.suggest__item .region {
  color: var(--text-low);
  font-size: var(--step--2);
}

.suggest__empty {
  padding: var(--s-4);
  font-size: var(--step--1);
  color: var(--text-low);
}

/* Trip-type toggle */
.toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-data);
}

.toggle__btn {
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-low);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.toggle__btn[aria-pressed='true'] {
  background: var(--champagne);
  color: #0e1114;
}

/* ---------------------------------------------------------------- Receipt */

.receipt {
  background: var(--paper);
  color: var(--paper-text-mid);
  border-radius: var(--r-data);
  border: 1px solid var(--paper-line);
  overflow: hidden;
}

.receipt--onink {
  border-color: var(--paper-line);
}

.receipt__head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: space-between;
}

.receipt__route {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--paper-text);
  line-height: 1.1;
}

.receipt__tag {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--paper-text-low);
}

.receipt__lines {
  list-style: none;
  padding: var(--s-4) var(--s-6);
  display: grid;
  gap: 0;
}

.receipt__line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  font-size: var(--step--1);
  border-bottom: 1px dotted var(--paper-line);
}

.receipt__line:last-child {
  border-bottom: 0;
}

.receipt__line .label {
  color: var(--paper-text-mid);
}

.receipt__line .detail {
  display: block;
  color: var(--paper-text-low);
  font-size: var(--step--2);
}

.receipt__line .amount {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  color: var(--paper-text);
  font-weight: 500;
}

.receipt__line[data-kind='included'] .amount {
  color: var(--signal-ink);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.receipt__line[data-kind='adjust'] .amount {
  color: var(--paper-text-low);
}

.receipt__line[data-kind='subtotal'] {
  border-top: 1px solid var(--paper-line);
  border-bottom: 0;
  margin-top: var(--s-2);
  padding-top: var(--s-4);
}

.receipt__total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-top: 2px solid var(--paper-text);
  background: var(--paper-sunk);
}

.receipt__total .label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--paper-text);
}

.receipt__total .amount {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--paper-text);
}

.receipt__foot {
  padding: var(--s-4) var(--s-6) var(--s-5);
  font-size: var(--step--2);
  color: var(--paper-text-mid);
  border-top: 1px solid var(--paper-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
}

.receipt__saving {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border: 1px solid var(--signal-ink);
  border-radius: var(--r-data);
  color: var(--signal-ink);
  font-size: var(--step--2);
  font-weight: 500;
}

/* States */
.receipt[data-state='loading'] .receipt__lines,
.receipt[data-state='loading'] .receipt__total {
  opacity: 0.35;
}

.receipt[data-state='empty'] .receipt__lines {
  display: none;
}

.receipt__notice {
  display: none;
  padding: var(--s-4) var(--s-6);
  font-size: var(--step--1);
  border-top: 1px solid var(--paper-line);
}

.receipt[data-notice] .receipt__notice {
  display: block;
}

.receipt[data-notice='outside-area'] .receipt__notice {
  background: var(--champagne-wash);
  color: var(--champagne-ink);
}

.receipt[data-notice='unavailable'] .receipt__notice,
.receipt[data-notice='short-notice'] .receipt__notice {
  background: var(--alert-wash);
  color: var(--alert-ink);
}

/* ------------------------------------------------------------ Fare ladder */

.ladder {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.ladder caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  padding-bottom: var(--s-4);
}

.ladder th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--ink-600);
  white-space: nowrap;
}

.ladder td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--ink-600);
  color: var(--text-mid);
  vertical-align: baseline;
}

.ladder tbody tr:hover td {
  background: var(--champagne-wash);
}

.ladder .dest {
  color: var(--text-hi);
  font-weight: 500;
}

.ladder .num {
  text-align: right;
  white-space: nowrap;
}

.ladder .fare {
  text-align: right;
  color: var(--champagne);
  font-weight: 600;
  font-size: var(--step-0);
  white-space: nowrap;
}

.ladder__region th {
  background: var(--ink-700);
  color: var(--text-hi);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  padding-top: var(--s-4);
  padding-bottom: var(--s-3);
}

.both-ways {
  display: inline-block;
  margin-left: var(--s-2);
  color: var(--text-low);
  font-size: var(--step--2);
}

/* ------------------------------------------------------------ Route cards */

.card {
  display: block;
  background: var(--ink-700);
  border: var(--hair);
  border-radius: var(--r-media);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

a.card:hover {
  border-color: var(--champagne-hair);
  background: var(--ink-800);
}

.card--data {
  border-radius: var(--r-data);
}

.route-card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.route-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.route-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-hi);
  line-height: 1;
}

.route-card__fare {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--champagne);
}

.route-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--step--2);
  color: var(--text-low);
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Vehicle spec */

.spec {
  display: grid;
  gap: 1px;
  background: var(--ink-600);
  border: var(--hair);
  border-radius: var(--r-data);
  overflow: hidden;
}

@media (min-width: 560px) {
  .spec {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .spec--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spec__cell {
  background: var(--ink-800);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.spec__k {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.spec__v {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.25;
}

.spec__n {
  font-size: var(--step--2);
  color: var(--text-low);
}

/* ------------------------------------------------------ Reliability ledger */

.ledger {
  background: var(--paper);
  color: var(--paper-text-mid);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-data);
  overflow: hidden;
}

.ledger__head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.ledger__title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--paper-text);
}

.ledger__rows {
  list-style: none;
}

.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px dotted var(--paper-line);
}

.ledger__row:last-child {
  border-bottom: 0;
}

.ledger__k {
  font-size: var(--step--1);
}

.ledger__k small {
  display: block;
  color: var(--paper-text-low);
  font-size: var(--step--2);
}

.ledger__v {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper-text);
}

.ledger__foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--paper-line);
  background: var(--paper-sunk);
  font-size: var(--step--2);
  color: var(--paper-text-low);
}

/* ----------------------------------------------------------- Policy strip */

.policies {
  display: grid;
  gap: 1px;
  background: var(--ink-600);
  border-block: var(--hair);
}

@media (min-width: 768px) {
  .policies {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .policies--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Beside the fare engine the four guarantees run down, not across. */
.policies--stacked {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .policies--stacked {
    grid-template-columns: 1fr;
  }
}

.policy {
  background: var(--ink-900);
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.policy__n {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  color: var(--champagne);
}

.policy__t {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-hi);
  line-height: 1;
}

.policy__b {
  font-size: var(--step--1);
  color: var(--text-mid);
}

/* ------------------------------------------------------------ Data tables */

.table-wrap {
  border: var(--hair);
  border-radius: var(--r-data);
  overflow: hidden;
}

.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 560px;
}

.dtable caption {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  font-size: var(--step--1);
  color: var(--text-mid);
  background: var(--ink-800);
  border-bottom: var(--hair);
}

.dtable th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink-600);
  background: var(--ink-800);
  vertical-align: bottom;
}

.dtable td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink-600);
  color: var(--text-mid);
  vertical-align: top;
}

.dtable tbody tr:last-child td {
  border-bottom: 0;
}

.dtable td.num,
.dtable th.num {
  text-align: right;
  white-space: nowrap;
}

.dtable .win {
  color: var(--signal);
}

.dtable .lose {
  color: var(--alert);
}

.dtable .strong {
  color: var(--text-hi);
  font-weight: 600;
}

.dtable tbody tr[data-highlight='true'] td {
  background: var(--champagne-wash);
}

.dtable tbody tr[data-highlight='true'] td:first-child {
  box-shadow: inset 3px 0 0 var(--champagne);
}

/* ---------------------------------------------------------- Two-column lists */

.twocol {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 768px) {
  .twocol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8);
  }
}

.checklist {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  font-size: var(--step--1);
  align-items: start;
}

.checklist li::before {
  content: '';
  width: 14px;
  height: 8px;
  margin-top: 7px;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}

.checklist--out li::before {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border: 0;
  transform: none;
  background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat;
  color: var(--alert);
}

/* --------------------------------------------------------------- Accordion */

.faq {
  border-top: var(--hair);
}

.faq__item {
  border-bottom: var(--hair);
}

.faq__q {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: var(--s-4);
  align-items: center;
  width: 100%;
  padding: var(--s-5) 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--text-hi);
  transition: color var(--t-base) var(--ease);
}

.faq__q:hover {
  color: var(--champagne);
}

.faq__q::after {
  content: '';
  width: 12px;
  height: 12px;
  justify-self: end;
  border-right: 1.5px solid var(--champagne);
  border-bottom: 1.5px solid var(--champagne);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease);
}

.faq__q[aria-expanded='true']::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__a {
  display: none;
  padding: 0 0 var(--s-6);
  max-width: var(--measure);
  font-size: var(--step-0);
}

.faq__a > * + * {
  margin-top: var(--s-4);
}

.faq__item[data-open='true'] .faq__a {
  display: block;
}

.faq__anchor {
  margin-left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-low);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.faq__item:hover .faq__anchor,
.faq__anchor:focus-visible {
  opacity: 1;
}

.faq__rail {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 2px;
}

.faq__rail a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-data);
  font-size: var(--step--1);
  color: var(--text-mid);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.faq__rail a:hover,
.faq__rail a[aria-current='true'] {
  background: var(--champagne-wash);
  color: var(--champagne);
}

.faq__rail .count {
  color: var(--text-low);
  font-variant-numeric: tabular-nums;
}

.filter {
  position: relative;
}

.filter__input {
  padding-left: var(--s-7);
}

.filter__icon {
  position: absolute;
  left: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-low);
  pointer-events: none;
}

.faq__empty {
  display: none;
  padding: var(--s-7) 0;
  color: var(--text-low);
}

.faq[data-empty='true'] .faq__empty {
  display: block;
}

/* -------------------------------------------------------------- Case study */

.case {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--ink-800);
  border: var(--hair);
  border-radius: var(--r-media);
  align-content: start;
}

.case__nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--hair);
}

.case__num {
  display: grid;
  gap: 2px;
}

.case__num .v {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--numeric-features);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--champagne);
  line-height: 1;
}

.case__num .k {
  font-size: var(--step--2);
  color: var(--text-low);
}

/* ----------------------------------------------------------------- Reviews */

.review {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: var(--hair);
  border-radius: var(--r-media);
  background: var(--ink-800);
  align-content: start;
}

.review__stars {
  color: var(--champagne);
  letter-spacing: 0.18em;
  font-size: var(--step--1);
}

.review__text {
  font-size: var(--step-0);
  color: var(--text-hi);
}

.review__by {
  font-size: var(--step--2);
  color: var(--text-low);
}

/* ------------------------------------------------------------- Chauffeur */

.chauffeur {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 1024px) {
  .chauffeur {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: var(--s-8);
    align-items: start;
  }
}

.portrait {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--ink-700);
  position: relative;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait figcaption {
  padding: var(--s-4) var(--s-5);
  font-size: var(--step--2);
  color: var(--text-low);
  border-top: var(--hair);
}

.quote {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-hi);
  max-width: var(--measure-tight);
}

.credential {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-low);
}

.credential span::after {
  content: '·';
  margin-left: var(--s-4);
  color: var(--ink-600);
}

.credential span:last-child::after {
  content: '';
}

/* ------------------------------------------------------------- Connector */

/* ---- Hero fares ---------------------------------------------------------- */

.hero-fares {
  border: var(--hair);
  border-radius: var(--r-data);
  background: var(--ink-800);
  padding: var(--s-5) var(--s-5) var(--s-4);
}

.hero-fares .eyebrow {
  margin-bottom: var(--s-4);
}

.hero-fares__list {
  list-style: none;
}

.hero-fares__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: var(--hair);
  transition: color var(--t-base) var(--ease);
}

.hero-fares__list li:first-child a {
  border-top: 0;
}

.hero-fares__name {
  color: var(--text-hi);
  font-weight: 500;
}

.hero-fares__t {
  color: var(--text-low);
  font-size: var(--step--1);
}

.hero-fares__f {
  color: var(--champagne);
  font-weight: 600;
  min-width: 4.5ch;
  text-align: right;
}

.hero-fares__list a:hover .hero-fares__name {
  color: var(--champagne);
}

.hero-fares__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--hair-champagne);
  font-size: var(--step--1);
}

.hero-fares__all {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hero-fares__ask {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-low);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-600);
}

.hero-fares__ask:hover {
  color: var(--text-hi);
}

.hero-fares__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--hair);
  font-size: var(--step--1);
  color: var(--text-low);
}

.hero-fares__stars {
  color: var(--champagne);
  letter-spacing: 0.12em;
}

.hero-fares__rating .num {
  color: var(--text-hi);
  font-weight: 600;
}

.hero-fares__rating:hover {
  color: var(--text-mid);
}

/* The engine beside this column is far taller than the image and the card together. Rather
   than pad the gap out, the card travels down it, so the visitor's own route and its fare
   stay on screen while they fill the form. */
@media (min-width: 1024px) {
  .hero-aside {
    align-self: stretch;
  }

  .hero-fares {
    position: sticky;
    top: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fares {
    position: static;
  }
}

/* ---- Analytics opt-out --------------------------------------------------- */

.optout {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding: var(--s-6);
  border: var(--hair);
  border-left: 2px solid var(--champagne);
  border-radius: var(--r-data);
  background: var(--ink-800);
}

.optout[data-state='off'] {
  border-left-color: var(--signal);
}

.optout__state {
  margin: 0;
  color: var(--text-hi);
  font-weight: 600;
}

.optout__note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-low);
}

/* ---- Fare ladder filter ------------------------------------------------- */

.ladder-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.ladder-filter__input {
  flex: 1 1 260px;
  max-width: 380px;
  padding: var(--s-3) var(--s-4);
  background: var(--paper-sunk);
  color: var(--paper-text);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-data);
}

.ladder-filter__input::placeholder {
  color: var(--paper-text-low);
}

.ladder-filter__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--champagne-ink);
}

.ladder-filter__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--paper-text-low);
}

.ladder-filter__empty {
  margin-top: var(--s-5);
  max-width: var(--measure);
  color: var(--paper-text-mid);
}

/* A column, not a grid, so the action sits on the card's floor. Paired with the taller
   connector card these two were leaving a block of dead space beside the shorter one. */
.connector {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  border: var(--hair);
  border-radius: var(--r-media);
  background: var(--ink-800);
}

.connector > .btn {
  margin-top: auto;
  align-self: start;
}

.endpoint {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-data);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--champagne);
  overflow-x: auto;
  white-space: nowrap;
}

.endpoint button {
  margin-left: auto;
  flex: none;
  padding: var(--s-1) var(--s-3);
  background: transparent;
  border: 1px solid var(--ink-600);
  border-radius: 2px;
  color: var(--text-mid);
  font-size: var(--step--2);
  font-family: var(--font-sans);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.endpoint button:hover {
  color: var(--champagne);
  border-color: var(--champagne);
}

.tool-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.tool-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
  font-size: var(--step--1);
}

.tool-list code {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--champagne);
  background: var(--champagne-wash);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------- Concierge */

.concierge-launcher {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 52px;
  padding: 0 var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--champagne-hair);
  border-radius: var(--r-pill);
  color: var(--text-hi);
  font-size: var(--step--1);
  font-weight: 500;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.concierge-launcher:hover {
  border-color: var(--champagne);
  background: var(--ink-700);
}

.concierge-launcher .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}

/* Out of the way while the fare engine is on screen — see initSticky in ui.js. Not
   display:none, so it can fade rather than snap, and so the panel it controls keeps its
   relationship to it. */
.concierge-launcher[data-hidden='true'] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}

/* The bar is 80px tall. At 76px the launcher sat 4px inside it. */
@media (max-width: 720px) {
  .concierge-launcher {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

.panel {
  position: fixed;
  inset: auto var(--gutter) calc(var(--gutter) + 64px) auto;
  z-index: 95;
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  max-height: min(640px, calc(100vh - 140px));
  display: none;
  grid-template-rows: auto 1fr auto;
  background: var(--ink-800);
  border: var(--hair);
  border-radius: var(--r-media);
  overflow: hidden;
}

.panel[data-open='true'] {
  display: grid;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--hair);
}

.panel__body {
  padding: var(--s-5);
  overflow-y: auto;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.panel__foot {
  padding: var(--s-4) var(--s-5);
  border-top: var(--hair);
}

.msg {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-data);
  font-size: var(--step--1);
  max-width: 88%;
}

.msg--bot {
  background: var(--ink-700);
  color: var(--text-hi);
  justify-self: start;
}

.msg--you {
  background: var(--champagne);
  color: #0e1114;
  justify-self: end;
}

/* --------------------------------------------------------- Sticky book bar */

.sticky-book {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(21, 26, 32, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--champagne-hair);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease);
}

.sticky-book[data-show='true'] {
  transform: translateY(0);
}

@media (min-width: 721px) {
  .sticky-book {
    display: none;
  }
}

/* Room at the foot of the page so the fixed bar never sits on top of the last line. */
@media (max-width: 720px) {
  body:has(.sticky-book) .site-footer {
    padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom, 0px));
  }
}

.sticky-book__fare {
  display: grid;
  gap: 0;
  margin-right: auto;
}

.sticky-book__fare .k {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}

.sticky-book__fare .v {
  font-family: var(--numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--champagne);
  line-height: 1.1;
}

/* -------------------------------------------------------------- Map / area */

.area-map {
  border: var(--hair);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--ink-800);
}

.area-map svg {
  width: 100%;
  height: auto;
  display: block;
}

.area-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: var(--hair);
  font-size: var(--step--2);
  color: var(--text-low);
}

.area-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.area-map__legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

/* ------------------------------------------------------------------ Footer */

.site-footer {
  background: var(--ink-800);
  border-top: var(--hair);
  padding-block: var(--s-9) var(--s-7);
  font-size: var(--step--1);
}

.site-footer__cols {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 640px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__cols {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-6);
  }
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--s-4);
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.site-footer a {
  color: var(--text-mid);
  transition: color var(--t-base) var(--ease);
}

.site-footer a:hover {
  color: var(--champagne);
}

.site-footer__legal {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--hair);
  display: grid;
  gap: var(--s-4);
  color: var(--text-low);
  font-size: var(--step--2);
}

@media (min-width: 900px) {
  .site-footer__legal {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.site-footer__id {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------- Breadcrumbs */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--step--2);
  color: var(--text-low);
  padding-block: var(--s-5) 0;
}

.crumbs a:hover {
  color: var(--champagne);
}

.crumbs li {
  list-style: none;
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}

.crumbs li + li::before {
  content: '/';
  color: var(--ink-600);
}

/* ----------------------------------------------------------------- Notices */

.notice {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-data);
  border-left: 3px solid var(--champagne);
  background: var(--champagne-wash);
  font-size: var(--step--1);
}

.notice--alert {
  border-left-color: var(--alert);
  background: var(--alert-wash);
}

.notice--signal {
  border-left-color: var(--signal);
  background: var(--signal-wash);
}

.notice strong {
  color: var(--text-hi);
}

/* -------------------------------------------------------------- Suburb tags */

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
}

.taglist a {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: var(--hair);
  border-radius: var(--r-data);
  font-size: var(--step--2);
  color: var(--text-mid);
  transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.taglist a:hover {
  border-color: var(--champagne);
  color: var(--champagne);
}

/* --------------------------------------------------------------- Media grid */

.media-grid {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .media-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.media {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--ink-700);
}

.media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media figcaption {
  padding: var(--s-4);
  font-size: var(--step--2);
  color: var(--text-low);
}

/* ----------------------------------------------------------- Number counter */

.countup {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Confirmation */

.confirm {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--signal);
  border-radius: var(--r-data);
  background: var(--signal-wash);
  text-align: center;
}

.confirm__ref {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  letter-spacing: 0.08em;
  color: var(--text-hi);
}

.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ---------------------------------------------------------------- Steps */

.steps {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
  flex-wrap: wrap;
}

.steps li[aria-current='step'] {
  color: var(--champagne);
}

.steps li + li::before {
  content: '→';
  margin-right: var(--s-2);
  color: var(--ink-600);
}