/* ===========================================================================
   Richee Safari & Transfer — design system
   ---------------------------------------------------------------------------
   Palette is drawn from the road itself: the ink of pre-dawn departures, the
   sand of the Namib, and the clay-red of the escarpment. One accent, used
   sparingly, so it still means something when it appears.

   Type is Manrope throughout — the brand face, self-hosted so there is no
   third-party request and no flash of a fallback on a slow Namibian
   connection. Five weights, 13 KB each.
   =========================================================================== */

/* --- fonts --------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- tokens -------------------------------------------------------------- */

:root {
  /* neutrals — warm, never grey-blue */
  --ink-950: #17120f;
  --ink-900: #221b16;
  --ink-800: #322820;
  --ink-700: #4a3c31;
  --ink-600: #6b5a4c;
  --ink-500: #8b7868;
  --ink-400: #ab9887;
  --ink-300: #cbbdae;
  --ink-200: #e4dbd0;
  --ink-100: #f1eae1;
  --ink-050: #f9f5f0;
  --white: #fffdfb;

  /* accents */
  --clay-700: #96301c;
  --clay-600: #b53c23;
  --clay-500: #c9482c;
  --clay-400: #dd6a4f;
  --clay-100: #fbe9e3;

  --dune-600: #b8873a;
  --dune-500: #d4a24c;
  --dune-100: #faf0dc;

  --sky-600: #2f6b7a;
  --sky-100: #e3f0f3;

  --green-600: #2e7d52;
  --green-100: #e6f4ec;

  --red-600: #c0392b;
  --red-100: #fbeae8;

  /* semantic — a clean white-grey page with white cards on top */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-sunk: #f0f1f4;
  --border: #e3e5ea;
  --border-strong: #d2d5dc;
  --text: #171a1f;
  --text-soft: #5b616e;
  --text-faint: #858b98;
  --accent: var(--clay-600);
  --accent-hover: var(--clay-700);
  --on-accent: #fff;

  /* type — one family, five weights. The system stack after Manrope is not
     decoration: Manrope has no arrow glyphs, so "Windhoek → Walvis Bay"
     borrows its → from whatever the platform provides. */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* scale — fluid, clamped so it never gets silly on either end */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.65rem, 1.4rem + 1.2vw, 2.4rem);
  --step-4: clamp(2rem, 1.55rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.5rem, 1.7rem + 3.8vw, 5rem);

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-sm: 0 1px 2px rgb(16 18 23 / 0.05), 0 1px 3px rgb(16 18 23 / 0.04);
  --shadow: 0 1px 3px rgb(16 18 23 / 0.06), 0 8px 24px -10px rgb(16 18 23 / 0.14);
  --shadow-lg: 0 4px 10px rgb(16 18 23 / 0.06), 0 24px 48px -18px rgb(16 18 23 / 0.22);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --page: 1180px;
  --nav-h: 68px;
}


/* --- reset --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Manrope has a tall x-height, so headings want a touch more leading than a
   serif would and noticeably tighter tracking to stop wide settings drifting. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { letter-spacing: -0.04em; }
p { text-wrap: pretty; }

::selection { background: var(--accent); color: var(--on-accent); }

/* --- layout -------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

/* Most visitors arrive on a phone, where generous section padding and a full
   size lede push the actual controls below the fold. Tighten both — the
   breathing room is a desktop luxury, not a mobile one. */
@media (max-width: 700px) {
  .section { padding-block: var(--sp-6); }
  .lede { font-size: 1rem; }
  .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--page)); }
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede { font-size: var(--step-1); color: var(--text-soft); line-height: 1.6; max-width: 56ch; }
.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); font-size: var(--step--1); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- navigation ---------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--border); }
.nav .wrap { display: flex; align-items: center; gap: var(--sp-5); width: min(100% - 2rem, var(--page)); }

.brand { display: flex; align-items: center; gap: 0.65rem; margin-right: auto; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(145deg, var(--clay-500), var(--clay-700) 60%, var(--ink-800));
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 21px; height: 21px; }
.brand__text { line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.035em; }
.brand__sub { font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

.nav__links { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  padding: 0.5rem 0.85rem; border-radius: 99px;
  font-size: 0.92rem; font-weight: 500; color: var(--text-soft);
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--text); background: var(--surface-sunk); }
.nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }

.nav__phone {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; font-weight: 500; color: var(--text-soft);
  padding-right: var(--sp-2);
}
.nav__phone svg { width: 15px; height: 15px; opacity: .7; }

.nav__toggle {
  /* flex:none — as a flex child it was being squeezed to 33px wide, under the
     44px a thumb needs, even though the width here says otherwise. */
  display: none; flex: none; width: 44px; height: 44px;
  border: 1px solid var(--border);
  background: var(--surface); border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: flex; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; inset: var(--nav-h) 1rem auto 1rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-3); box-shadow: var(--shadow-lg);
  }
  .nav__links.is-open .nav__link { padding: 0.75rem 0.9rem; }
}

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

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.78rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 11px;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, opacity .2s;
  box-shadow: var(--shadow-sm);
}
/* Every control a finger has to hit gets at least 44px of height. */
@media (pointer: coarse) {
  .btn { min-height: 44px; font-size: 1rem; }
  /* Small buttons stay small — they sit in dense admin tables where 44px
     everywhere would push rows off the screen. The one exception is the CTA
     pinned in the header, which is the most-tapped control on the site. */
  .btn--sm { min-height: 40px; font-size: 0.95rem; }
  .nav .btn--sm { min-height: 44px; }
}

.btn:hover { --btn-bg: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 17px; height: 17px; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--border-strong); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--surface-sunk); }

.btn--quiet { --btn-bg: var(--surface-sunk); --btn-fg: var(--text); box-shadow: none; }
.btn--quiet:hover { --btn-bg: var(--border); }

.btn--dark { --btn-bg: var(--ink-900); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--ink-800); }

.btn--lg { padding: 0.95rem 1.7rem; font-size: 1.02rem; border-radius: 13px; }
.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.85rem; border-radius: 9px; }
.btn--block { width: 100%; }

.btn--glass {
  --btn-bg: rgb(255 255 255 / 0.12); --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.3); backdrop-filter: blur(10px);
}
.btn--glass:hover { --btn-bg: rgb(255 255 255 / 0.22); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  /* Sized to leave the next section visible on a laptop: a first screen that
     is nothing but a picture asks the visitor to scroll before they can act. */
  min-height: min(60svh, 520px);
  display: flex; align-items: flex-end;
  padding-block: var(--sp-7) var(--sp-6);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__scene { position: absolute; inset: 0; z-index: -2; }
.hero__scene svg { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 15% 100%, rgb(23 18 15 / .82), transparent 62%),
    linear-gradient(to top, rgb(23 18 15 / .9) 4%, rgb(23 18 15 / .28) 46%, rgb(23 18 15 / .48) 100%);
}

.hero__inner { display: grid; gap: var(--sp-4); max-width: 680px; }
.hero h1 {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--dune-500); }
.hero__swap {
  display: inline-block; vertical-align: -0.06em;
  width: 0.72em; height: 0.72em; color: var(--dune-500);
}
.hero__swap svg { width: 100%; height: 100%; }
.hero p { font-size: var(--step-1); color: rgb(255 255 255 / 0.86); max-width: 42ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* The four stat cards this replaces cost ~120px of height to say what fits on
   one line. Facts belong under the call to action, not competing with it. */
.hero__facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-1);
  list-style: none; padding: 0;
  font-size: 0.88rem; color: rgb(255 255 255 / 0.72);
}
.hero__facts li { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.hero__facts li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: rgb(255 255 255 / 0.4); margin-right: calc(var(--sp-2) + 0.05rem);
}
.hero__facts b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Narrow screens cannot hold the row, and a separator that survives the wrap
   dangles at the start of the next line. Stack instead, and drop the dots. */
@media (max-width: 560px) {
  .hero__facts { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .hero__facts li + li::before { display: none; }
  /* Two equal, full-width targets read as one clear choice plus an alternative,
     rather than two buttons of arbitrary different importance. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; width: 100%; }
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: var(--sp-4); border-radius: var(--radius); }

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* service cards */
.service {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position: relative; overflow: hidden;
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.service--feature {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800) 70%, var(--clay-700));
  color: #fff; border-color: transparent;
}
.service--feature .service__desc { color: rgb(255 255 255 / .74); }
.service--feature .service__icon { background: rgb(255 255 255 / .14); color: #fff; }
.service--feature .chip { background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .9); border-color: rgb(255 255 255 / .18); }
@media (max-width: 720px) { .service--feature { grid-column: span 1; } }

.service__icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: var(--clay-100); color: var(--clay-600);
}
.service__icon svg { width: 23px; height: 23px; }
.service__title { font-size: var(--step-1); }
.service__desc { color: var(--text-soft); font-size: 0.94rem; flex: 1; }
.service__price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: auto; }
.service__price b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.035em; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.65rem; border-radius: 99px;
  background: var(--surface-sunk); border: 1px solid var(--border);
  font-size: 0.78rem; font-weight: 500; color: var(--text-soft);
}

/* --- badges -------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.6rem; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  background: var(--surface-sunk); color: var(--text-soft);
  border: 1px solid var(--border);
}
.badge--ok { background: var(--green-100); color: var(--green-600); border-color: transparent; }
.badge--warn { background: var(--dune-100); color: var(--dune-600); border-color: transparent; }
.badge--bad { background: var(--red-100); color: var(--red-600); border-color: transparent; }
.badge--info { background: var(--sky-100); color: var(--sky-600); border-color: transparent; }
.badge--accent { background: var(--clay-100); color: var(--clay-600); border-color: transparent; }

/* --- timetable ----------------------------------------------------------- */

.timeline { display: grid; gap: 0; position: relative; }
.timeline__stop {
  display: grid; grid-template-columns: 62px 26px 1fr; align-items: center;
  gap: var(--sp-3); padding: 0.42rem 0;
}
.timeline__time { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline__dot { display: grid; place-items: center; position: relative; height: 100%; }
.timeline__dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 99px;
  background: var(--surface); border: 2px solid var(--border-strong); z-index: 1;
}
.timeline__stop:first-child .timeline__dot::before,
.timeline__stop:last-child .timeline__dot::before { background: var(--accent); border-color: var(--accent); }
.timeline__dot::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border);
}
.timeline__stop:first-child .timeline__dot::after { top: 50%; }
.timeline__stop:last-child .timeline__dot::after { bottom: 50%; }
.timeline__name { font-weight: 500; font-size: 0.95rem; }
.timeline__stop:first-child .timeline__name,
.timeline__stop:last-child .timeline__name { font-weight: 600; }

/* --- forms --------------------------------------------------------------- */

/* The HTML `hidden` attribute must beat any layout rule that follows. Without
   this, `.field { display: grid }` re-shows a hidden field — which is how the
   return-date picker and the sign-in code box ended up permanently visible. */
[hidden] { display: none !important; }

.field { display: grid; gap: 0.38rem; }
.field > label, .label {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 0.35rem;
}
.field__hint { font-size: 0.78rem; color: var(--text-faint); }
.field__error { font-size: 0.78rem; color: var(--red-600); font-weight: 500; }

.input, .select, .textarea {
  width: 100%; padding: 0.72rem 0.9rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 11px;
  font-size: 0.95rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
/* Safari on iOS zooms the whole page when a focused field is under 16px, and
   never zooms back out. On a booking form that means the layout jumps on every
   tap. 0.95rem is the density the design wants on a mouse; touch gets 16px. */
@media (pointer: coarse) {
  .input, .select, .textarea { font-size: 16px; }
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--red-600); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a4c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 17px;
  padding-right: 2.4rem;
}

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.field-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row--2 { grid-template-columns: 1fr; } }

/* segmented choice */
.choices { display: grid; gap: var(--sp-2); }
.choices--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 560px) { .choices--row { grid-auto-flow: row; } }

.choice {
  position: relative; display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 1rem; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px;
  transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.choice:hover { border-color: var(--ink-400); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark {
  width: 19px; height: 19px; flex: none; margin-top: 1px; border-radius: 99px;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
  transition: border-color .18s, background .18s;
}
.choice__mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--white);
  transform: scale(0); transition: transform .18s var(--ease);
}
.choice__body { display: grid; gap: 0.1rem; min-width: 0; }
.choice__title { font-weight: 600; font-size: 0.94rem; }
.choice__sub { font-size: 0.82rem; color: var(--text-soft); }
.choice__meta { margin-left: auto; text-align: right; font-weight: 600; font-size: 0.94rem; white-space: nowrap; }

.choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
}
.choice:has(input:checked) .choice__mark { border-color: var(--accent); background: var(--accent); }
.choice:has(input:checked) .choice__mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { box-shadow: var(--ring); }
.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* --- seat map ------------------------------------------------------------ */
/* Four columns matching the real vehicle: the gangway is column two, closed
   off by the back bench. The driver is drawn so passengers can orient
   themselves. Colours follow the operator's own key — green available, red
   occupied, purple reserved, amber driver. */

.bus {
  --seat: 54px;
  width: fit-content; margin-inline: auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-5);
  /* Four seats + gaps + padding is 306px at 54px, which does not fit a 320px
     phone. The page hides horizontal overflow, so it did not scroll — the
     right-hand window seats were simply clipped off and untappable. 46px keeps
     every seat above the 44px a thumb needs while fitting the narrowest
     screens still in use. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow-sm);
}
.bus__end {
  text-align: center; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint);
}
.bus__end--front { margin-bottom: var(--sp-4); }
.bus__end--back { margin-top: var(--sp-4); }

.bus__rows { display: grid; gap: 0.5rem; }
.bus__row {
  display: grid;
  grid-template-columns: repeat(4, var(--seat));
  gap: 0.5rem;
  align-items: center;
}
.bus__gap { width: var(--seat); height: var(--seat); }

@media (max-width: 430px) {
  .bus { --seat: 46px; padding-inline: var(--sp-4); }
  .bus__row { gap: 0.4rem; }
}

.seat {
  width: var(--seat); height: var(--seat);
  border: 1.5px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font-size: 0.8rem; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center; cursor: pointer; position: relative;
  transition: transform .16s var(--ease), background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.seat:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.seat:disabled { cursor: not-allowed; }

/* available */
.seat[data-status="available"] {
  background: #eefbf3; border-color: #7fd6a4; color: #16603a;
}
.seat[data-status="available"]:hover { border-color: var(--green-600); }

/* the passenger's own pick */
.seat[data-status="selected"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -5px color-mix(in oklab, var(--accent) 65%, transparent);
}

/* sold or held by someone else */
.seat[data-status="booked"],
.seat[data-status="held"] {
  background: #ef4444; border-color: #dc2626; color: #fff; opacity: .95;
}
.seat[data-status="held"] { background: #f87171; border-color: #ef4444; }

/* held for pensioners and passengers with a disability */
.seat[data-status="reserved"] {
  background: #f5edff; border-color: #c4a6f5; color: #6b3fa0;
}

/* taken out of sale by the operator */
.seat[data-status="blocked"],
.seat[data-status="unavailable"] {
  background: var(--surface-sunk); border-color: var(--border);
  color: var(--text-faint); border-style: dashed;
}

.seat__driver {
  width: var(--seat); height: var(--seat);
  border-radius: 12px; display: grid; place-items: center;
  background: #fcd34d; border: 1.5px solid #f0b429; color: #6b4c05;
}
.seat__driver svg { width: 22px; height: 22px; }

.seat-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-5); }
.seat-legend__item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-soft); }
.seat-legend__swatch { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #7fd6a4; background: #eefbf3; }
.seat-legend__swatch--taken { background: #ef4444; border-color: #dc2626; }
.seat-legend__swatch--sel { background: var(--accent); border-color: var(--accent); }
.seat-legend__swatch--reserved { background: #f5edff; border-color: #c4a6f5; }
.seat-legend__swatch--driver { background: #fcd34d; border-color: #f0b429; }
.seat-legend__swatch--out { background: var(--surface-sunk); border-color: var(--border); border-style: dashed; }

.seat-counts { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.seat-count {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.8rem; border-radius: 99px;
  font-size: 0.82rem; font-weight: 600;
}
.seat-count--free { background: var(--green-600); color: #fff; }
.seat-count--taken { background: #ef4444; color: #fff; }
.seat-count--reserved { background: #ede9fe; color: #6b3fa0; }

/* --- wizard -------------------------------------------------------------- */

/* --- booking page -------------------------------------------------------- */

.book { padding-top: 2.5rem; }
.book__head { max-width: 52ch; margin-bottom: var(--sp-6); }
.book__head h1 { font-size: var(--step-4); margin-bottom: .4rem; }

/* On a phone the header was eating half the screen before the customer could
   see a single field. Most of them arrived by tapping "Book a seat", so they
   already know what page this is — trim the preamble and get to the form. */
@media (max-width: 700px) {
  .book { padding-top: var(--sp-5); }
  .book__head { margin-bottom: var(--sp-4); }
  .book__head h1 { font-size: var(--step-3); }
  .book__head .lede { font-size: 0.95rem; }
  .book__head .eyebrow { display: none; }

  /* Steps 2–5: the intro has done its job. Keep the h1 as a landmark, drop the
     rest, and the next question sits near the top of the screen instead of
     behind a scroll. */
  .book:not([data-step="0"]) .book__head .lede { display: none; }
  .book:not([data-step="0"]) .book__head { margin-bottom: var(--sp-3); }
  .book:not([data-step="0"]) .book__head h1 { font-size: var(--step-2); }
}

.steps { display: flex; align-items: center; gap: 0; margin-bottom: var(--sp-6); overflow-x: auto; padding-bottom: 2px; }
@media (max-width: 700px) { .steps { margin-bottom: var(--sp-4); } }
.step { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.step__num {
  width: 27px; height: 27px; border-radius: 99px; flex: none;
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-faint);
  border: 1.5px solid var(--border);
  transition: all .25s var(--ease);
}
.step__tick { display: grid; place-items: center; }
.step__tick svg { width: 13px; height: 13px; }
.step__label { font-size: 0.86rem; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.step__line { width: 28px; height: 1.5px; background: var(--border); margin-inline: 0.6rem; flex: none; }

.step[data-state="active"] .step__num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.step[data-state="active"] .step__label { color: var(--text); font-weight: 600; }
.step[data-state="done"] .step__num { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.step[data-state="done"] .step__label { color: var(--text-soft); }
@media (max-width: 720px) { .step__label { display: none; } .step__line { width: 18px; } }

.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .wizard { grid-template-columns: 1fr; } }

.summary { position: sticky; top: calc(var(--nav-h) + 1rem); }
.summary__rows { display: grid; gap: 0.55rem; }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 0.9rem; }
.summary__row dt { color: var(--text-soft); }
.summary__row dd { font-weight: 600; text-align: right; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--border);
}
.summary__total b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.035em; }

/* --- notices ------------------------------------------------------------- */

.notice {
  display: flex; gap: 0.75rem; padding: var(--sp-4);
  border-radius: var(--radius); font-size: 0.9rem; line-height: 1.55;
  border: 1px solid var(--border); background: var(--surface-sunk);
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice--info { background: var(--sky-100); border-color: transparent; color: #1d4a55; }
.notice--warn { background: var(--dune-100); border-color: transparent; color: #7a5a1f; }
.notice--ok { background: var(--green-100); border-color: transparent; color: #1e5c3b; }
.notice--bad { background: var(--red-100); border-color: transparent; color: #8f2b20; }
.notice strong { font-weight: 600; }

/* --- accordion ----------------------------------------------------------- */

.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.accordion + .accordion { margin-top: var(--sp-2); }
.accordion__head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); background: none; border: 0; cursor: pointer; text-align: left;
  font-weight: 600; font-size: 0.94rem;
}
.accordion__head:hover { background: var(--surface-sunk); }
.accordion__chevron { margin-left: auto; width: 17px; height: 17px; transition: transform .25s var(--ease); color: var(--text-faint); }
.accordion[open] .accordion__chevron { transform: rotate(180deg); }
.accordion__body { padding: 0 var(--sp-4) var(--sp-4); color: var(--text-soft); font-size: 0.9rem; line-height: 1.65; }
.accordion__body ul { padding-left: 1.1rem; display: grid; gap: 0.35rem; }

/* --- ticket / boarding pass ---------------------------------------------- */

.ticket {
  --notch: 20px;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.ticket__head {
  padding: var(--sp-5); color: #fff;
  background: linear-gradient(135deg, var(--ink-900), var(--ink-800) 55%, var(--clay-700));
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
}
.ticket__ref { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; }
.ticket__journey {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-bottom: 1px dashed var(--border);
  position: relative;
}
.ticket__journey::before, .ticket__journey::after {
  content: ""; position: absolute; bottom: calc(var(--notch) / -2);
  width: var(--notch); height: var(--notch); border-radius: 99px; background: var(--bg);
  border: 1px solid var(--border);
}
.ticket__journey::before { left: calc(var(--notch) / -2 - 1px); }
.ticket__journey::after { right: calc(var(--notch) / -2 - 1px); }
.ticket__place { display: grid; gap: 0.15rem; }
.ticket__place b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.ticket__place span { font-size: 0.8rem; color: var(--text-faint); }
.ticket__place--to { text-align: right; }
.ticket__arrow { color: var(--text-faint); display: grid; gap: 0.2rem; justify-items: center; }
.ticket__arrow svg { width: 26px; height: 26px; }
.ticket__arrow span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ticket__leg-label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) 0;
}
.ticket__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-4); padding: var(--sp-5);
}
.ticket__cell { display: grid; gap: 0.15rem; }
.ticket__cell dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.ticket__cell dd { font-weight: 600; font-size: 1rem; }
.ticket__qr { padding: var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-5); align-items: center; }
.ticket__qr img, .ticket__qr canvas { width: 128px; height: 128px; border-radius: 10px; background: #fff; padding: 6px; }

/* --- gallery ------------------------------------------------------------- */

.gallery { columns: 3 260px; column-gap: var(--sp-4); }
.gallery__item {
  break-inside: avoid; margin-bottom: var(--sp-4);
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: var(--surface-sunk); border: 1px solid var(--border);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gallery__item img { width: 100%; aspect-ratio: var(--ar, 4/3); object-fit: cover; }
.gallery__cap {
  position: absolute; inset: auto 0 0; padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, rgb(23 18 15 / .85), transparent);
  color: #fff; font-size: 0.85rem; font-weight: 500;
}

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

.footer { background: var(--ink-950); color: var(--ink-300); padding-block: var(--sp-8) var(--sp-5); margin-top: var(--sp-8); }
.footer a { color: var(--ink-200); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: var(--sp-6); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__title { color: #fff; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.footer__list { display: grid; gap: 0.5rem; font-size: 0.92rem; list-style: none; padding: 0; }
.footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid rgb(255 255 255 / .1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: 0.82rem; color: var(--ink-500);
}
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: var(--ink-500); }

/* --- utilities ----------------------------------------------------------- */

.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.spread { margin-left: auto; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--border) 50%, var(--surface-sunk) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 99px; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* toast */
.toasts { position: fixed; inset: auto 1rem 1rem auto; z-index: 200; display: grid; gap: 0.5rem; max-width: min(92vw, 380px); }
.toast {
  display: flex; gap: 0.65rem; padding: 0.85rem 1rem;
  background: var(--ink-900); color: #fff; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: 0.9rem; line-height: 1.45;
  animation: toast-in .32s var(--ease);
}
.toast--bad { background: var(--red-600); }
.toast--ok { background: var(--green-600); }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* view transitions between wizard steps */
.view { animation: view-in .35s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

@media print {
  .nav, .footer, .btn, .steps, .toasts { display: none !important; }
  body { background: #fff; }
  .ticket { box-shadow: none; border: 1px solid #ccc; }
}

/* --- return leg headings --------------------------------------------------- */

/* Both legs of a return carry one of these. When only the way back was
   labelled, the map above it was an unmarked bus and passengers could not tell
   which journey they were picking seats on. */
.leg-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.leg-head__detail { font-size: 0.86rem; color: var(--text-soft); font-weight: 600; }

/* --- proof of payment ------------------------------------------------------ */

.proof-or {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--text-faint); font-size: 0.82rem;
}
.proof-or::before, .proof-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.proof-alts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 420px) { .proof-alts { grid-template-columns: 1fr; } }

/* --- date strip ------------------------------------------------------------ */

.date-strip__label {
  font-size: 0.82rem; color: var(--text-soft);
  margin-bottom: 0.5rem;
}

/* The chips are the quick path; the field beside them is the escape hatch, so
   any date at all is reachable without stepping back through the wizard. */
.date-pick {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.date-pick .date-strip__label { margin-bottom: 0; }
.date-pick__field { flex: none; }
.input--sm {
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  width: auto;
}

@media (max-width: 480px) {
  /* Full width on a phone: a date input squeezed to half the row is a
     hit target nobody lands on. */
  .date-pick { gap: 0.5rem; }
  .date-pick__field, .date-pick__field .input { width: 100%; }
}

/* iOS zooms any input under 16px on focus and never zooms back out. */
@media (pointer: coarse) {
  .input--sm { font-size: 16px; }
}

/* Wraps rather than scrolls sideways: a hidden sixth chip off the edge of a
   phone is a choice the customer never discovers. */
.date-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.date-chip {
  flex-direction: column; gap: 0.05rem;
  padding: 0.5rem 0.4rem;
  min-height: 62px;
  line-height: 1.25;
}
.date-chip[aria-current="date"] { box-shadow: var(--ring); }
.date-chip:disabled { opacity: 0.5; }
.date-chip__day { font-size: 0.7rem; opacity: 0.75; }
.date-chip__date { font-weight: 700; font-size: 0.92rem; }
.date-chip__seats { font-size: 0.65rem; opacity: 0.75; }

@media (max-width: 430px) {
  .date-strip { grid-template-columns: repeat(3, 1fr); }
  .date-chip { min-height: 58px; }
}

/* Departure times travel together — "05:30 →" orphaned above "10:00" reads as
   two separate facts. */
.choice__time {
  font-weight: 500; margin-left: 0.45rem;
  color: var(--text-faint); font-size: var(--step--1);
  white-space: nowrap;
}

/* --- the party on a booking ------------------------------------------------ */

.party { display: grid; gap: var(--sp-2); }
.party__row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding: 0.7rem 0.85rem;
  background: var(--surface-sunk);
  border-radius: var(--radius);
}
.party__name { font-weight: 600; }
.party__actions { display: flex; gap: var(--sp-2); }
@media (max-width: 430px) {
  .party__row { flex-direction: column; align-items: stretch; }
  .party__actions .btn { flex: 1; }
}

/* --- wizard navigation ----------------------------------------------------
 *
 * Back sits beside the button that moves you on. The contextual links at the
 * top of each card ("Change journey") say what going back lets you change;
 * this is the one people actually look for.
 * ------------------------------------------------------------------------ */
.wizard__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.4rem;
}
.wizard__nav-end { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wizard__nav .btn svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  /* Forward first, because that is the common case; Back keeps a full-width
     target of its own rather than becoming a sliver beside it. */
  .wizard__nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard__nav-end { flex-direction: column-reverse; align-items: stretch; }
  .wizard__nav .btn { width: 100%; justify-content: center; }
}

/* A finished step is a button back to itself. */
button.step {
  appearance: none; border: 0; background: none; font: inherit;
  cursor: pointer; padding: 0.15rem 0.2rem; border-radius: 10px;
}
button.step:hover .step__label { color: var(--text); }
button.step:hover .step__num { border-color: var(--accent); color: var(--accent); }
button.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (pointer: coarse) {
  button.step { min-height: 44px; }
}

/* A compact choice, for picking one fare for a whole party. The full-size
   version is built for one decision per row; five of those is a scroll. */
.choice--compact { padding: 0.7rem 0.8rem; }
.choice--compact .choice__title { font-size: 0.92rem; }
.choice--compact .choice__sub { font-size: 0.8rem; }

@media (min-width: 560px) {
  .choices--row .choice--compact { flex: 1 1 9rem; }
}