/*! Britannia Minicab Services Design System v1.2.0 — bundled 10 partials. Do not edit; edit the partials and rebuild. */

/* ==== tokens.css ==== */
/*!
 * Britannia Minicab Services — Design System v1.2.0
 * tokens.css — primitive + semantic design tokens
 *
 * All tokens are prefixed --bms- so they cannot collide with the legacy
 * :root variables defined inline in navbar.html / hero.html / footer.html
 * (--color-white, --color-yellow, --form-color, ...).
 *
 * BRAND PRIMITIVES VERIFIED against the finalized logo
 * (docs/design-system/Logo.png, sampled 2026-11-10): navy #011138, red #CD0001,
 * white. Navy #011138 is the APPROVED primary brand colour (v1.2.0).
 * The navy scale ("Midnight Navy") is derived from it in OKLCH: constant hue,
 * evenly stepped lightness, 950 darkest -> 50 lightest. Regenerate with
 *   node tools/design-system/navy-scale.js "#011138"
 * Red tints/shades are RGB mixes of the logo red (hue preserved).
 * To re-brand, change ONLY the --bms-navy-* and --bms-red-* primitives.
 */

:root {
  --bms-ds-version: "1.2.0";

  /* ------------------------------------------------------------------
   * 1. PRIMITIVES — raw palette. Do not use directly in components.
   * ------------------------------------------------------------------ */

  /* Navy "Midnight Navy" (brand primary): 900 is the logo navy #011138.
     OKLCH hue 261.5 throughout; contrast vs white in brackets. */
  --bms-navy-950: #000622;  /* darker than brand: pressed states, deep overlays (20.0) */
  --bms-navy-900: #011138;  /* BRAND: headings, inverse surfaces, secondary action (18.4) */
  --bms-navy-800: #0d2654;  /* links, hover on navy (14.8) */
  --bms-navy-700: #203c70;  /* visited links (10.8) */
  --bms-navy-600: #36548a;  /* (7.5) */
  --bms-navy-300: #9eb2d5;  /* decorative on light, muted text on navy */
  --bms-navy-200: #c7d3e8;  /* secondary text on navy (12.2 vs 900) */
  --bms-navy-100: #e2e9f4;  /* subtle pressed */
  --bms-navy-50: #f1f5fb;   /* selected / subtle hover / brand-subtle surface */

  /* Red (brand accent / primary action) — 600 is the logo red #CD0001 */
  --bms-red-800: #830001;
  --bms-red-700: #a40001;
  --bms-red-600: #cd0001;
  --bms-red-500: #e01b1b; /* primary action on navy: 3.64:1 vs navy, 4.84:1 with white text (logo red is only 3.02:1 vs navy) */
  --bms-red-200: #f3c2c2;
  --bms-red-100: #fae6e6;
  --bms-red-50: #fdf4f4;

  /* Neutrals — cool slate, tuned to Dark Text #121A31 */
  --bms-neutral-0: #ffffff;
  --bms-neutral-50: #f5f7fb;
  --bms-neutral-100: #eef1f7;
  --bms-neutral-200: #dde3ef;
  --bms-neutral-300: #c3cbdb;
  --bms-neutral-400: #98a2b8;
  --bms-neutral-500: #636c86; /* darkened from #6b7590 so muted text passes 4.5:1 on page bg */
  --bms-neutral-600: #4d5770;
  --bms-neutral-700: #353e56;
  --bms-neutral-800: #222a42;
  --bms-neutral-900: #121a31;

  /* Status */
  --bms-green-700: #0f6b3a;
  --bms-green-100: #e3f4ea;
  --bms-green-300: #9fd8b8;
  --bms-amber-800: #7a4a00;
  --bms-amber-500: #f2a900;
  --bms-amber-100: #fff4dc;
  --bms-amber-300: #f2c879;
  --bms-error-700: #b42318;
  --bms-error-100: #fef3f2;
  --bms-error-300: #f5b5af;
  --bms-blue-700: #1d4ed8;
  --bms-blue-100: #e8effd;
  --bms-blue-300: #a9c1f5;
}

/* ------------------------------------------------------------------
 * 2. SEMANTIC COLOUR — use these in components.
 *
 * Declared on :root AND re-declared on light "islands" so that the
 * NEAREST surface always wins through inheritance:
 *   .bms-surface-inverse (layout.css) remaps these tokens to navy values;
 *   a white card / booking panel / calendar placed inside a navy section
 *   matches the selector below (specificity 0,2,0 > 0,1,0) and gets the
 *   light values back. For any other white island inside navy, add
 *   class="bms-theme-light".
 * ------------------------------------------------------------------ */
:root,
.bms-theme-light,
.bms-surface-inverse
  :is(
    .bms-surface,
    .bms-surface-page,
    .bms-card,
    .bms-booking-panel,
    .bms-summary,
    .bms-summary-disclosure,
    .bms-calendar,
    .bms-autocomplete__list,
    .bms-vehicle-card,
    .bms-accordion__item,
    .bms-alert,
    .bms-state,
    .bms-error-summary
  ) {
  /* Text */
  --bms-color-text: var(--bms-neutral-900);
  --bms-color-text-secondary: var(--bms-neutral-600);
  --bms-color-text-muted: var(
    --bms-neutral-500
  ); /* >=4.5:1 on white only; not on bg-page for small text */
  --bms-color-text-brand: var(--bms-navy-900);
  --bms-color-text-accent: var(
    --bms-red-600
  ); /* 5.9:1 on white — OK for text >=14px bold / 16px+ */
  --bms-color-text-inverse: var(--bms-neutral-0);
  --bms-color-text-inverse-secondary: var(--bms-navy-200);
  --bms-color-text-disabled: var(--bms-neutral-500);

  /* Links */
  --bms-color-link: var(--bms-navy-800);
  --bms-color-link-hover: var(--bms-red-700);
  --bms-color-link-visited: var(--bms-navy-700);
  --bms-color-link-inverse: var(--bms-neutral-0);

  /* Backgrounds & surfaces */
  --bms-color-bg-page: var(--bms-neutral-50);
  --bms-color-bg-surface: var(--bms-neutral-0);
  --bms-color-bg-surface-sunken: var(--bms-neutral-100);
  --bms-color-bg-brand-subtle: var(--bms-navy-50);
  --bms-color-bg-accent-subtle: var(--bms-red-50);
  --bms-color-bg-inverse: var(--bms-navy-900);
  --bms-color-bg-inverse-raised: var(--bms-navy-800);
  --bms-color-bg-overlay: rgb(0 6 34 / 0.6);   /* navy-950 at 60% */

  /* Borders */
  --bms-color-border: var(
    --bms-neutral-200
  ); /* decorative dividers, card edges */
  --bms-color-border-strong: var(--bms-neutral-300);
  --bms-color-border-input: var(
    --bms-neutral-500
  ); /* >=3:1 vs white — WCAG 1.4.11 */
  --bms-color-border-input-hover: var(--bms-neutral-700);
  --bms-color-border-brand: var(--bms-navy-900);
  --bms-color-border-inverse: rgb(255 255 255 / 0.18);

  /* Interactive — primary action (red) */
  --bms-color-action-primary: var(--bms-red-600);
  --bms-color-action-primary-hover: var(--bms-red-700);
  --bms-color-action-primary-active: var(--bms-red-800);
  --bms-color-action-primary-text: var(--bms-neutral-0);
  --bms-color-action-primary-hover-text: var(--bms-neutral-0);
  /* On navy (inverse) surfaces brand red is only 2.95:1 against navy, so
     .bms-surface-inverse swaps the primary tokens for these: */
  --bms-color-action-primary-on-inverse: var(--bms-red-500);
  --bms-color-action-primary-on-inverse-hover-bg: var(--bms-neutral-0);
  --bms-color-action-primary-on-inverse-hover-text: var(--bms-red-700);

  /* Background behind outline buttons and other bordered controls */
  --bms-color-bg-control: var(--bms-neutral-0);

  /* Interactive — secondary action (navy) */
  --bms-color-action-secondary: var(--bms-navy-900);
  --bms-color-action-secondary-hover: var(--bms-navy-800);
  --bms-color-action-secondary-active: var(--bms-navy-950);
  --bms-color-action-secondary-text: var(--bms-neutral-0);

  /* Interactive — subtle (outline / ghost) */
  --bms-color-action-subtle-hover: var(--bms-navy-50);
  --bms-color-action-subtle-active: var(--bms-navy-100);

  /* Selection (selected option, chosen vehicle, current step) */
  --bms-color-selected: var(--bms-navy-900);
  --bms-color-selected-bg: var(--bms-navy-50);

  /* Focus — 3px ring, >=3:1 against white, page bg and navy-50 */
  --bms-color-focus: var(--bms-blue-700);
  --bms-color-focus-inverse: var(--bms-neutral-0);

  /* Disabled */
  --bms-color-disabled-bg: var(--bms-neutral-100);
  --bms-color-disabled-border: var(--bms-neutral-200);
  --bms-color-disabled-text: var(--bms-neutral-500);

  /* Status — text / background / border */
  --bms-color-success: var(--bms-green-700);
  --bms-color-success-bg: var(--bms-green-100);
  --bms-color-success-border: var(--bms-green-300);
  --bms-color-warning: var(--bms-amber-800);
  --bms-color-warning-bg: var(--bms-amber-100);
  --bms-color-warning-border: var(--bms-amber-300);
  --bms-color-warning-accent: var(--bms-amber-500);
  --bms-color-error: var(--bms-error-700);
  --bms-color-error-bg: var(--bms-error-100);
  --bms-color-error-border: var(--bms-error-300);
  --bms-color-info: var(--bms-blue-700);
  --bms-color-info-bg: var(--bms-blue-100);
  --bms-color-info-border: var(--bms-blue-300);
}

:root {
  /* ------------------------------------------------------------------
   * 3. TYPOGRAPHY
   * ------------------------------------------------------------------ */
  --bms-font-heading:
    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
  --bms-font-body:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --bms-font-mono:
    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --bms-font-weight-regular: 400;
  --bms-font-weight-medium: 500;
  --bms-font-weight-semibold: 600;
  --bms-font-weight-bold: 700;
  --bms-font-weight-extrabold: 800;

  /* Fluid sizes: min @320px -> max @1440px */
  --bms-text-h1: clamp(2rem, 1.643rem + 1.786vw, 3.25rem); /* 32 -> 52 */
  --bms-text-h2: clamp(1.625rem, 1.375rem + 1.25vw, 2.5rem); /* 26 -> 40 */
  --bms-text-h3: clamp(1.375rem, 1.232rem + 0.714vw, 1.875rem); /* 22 -> 30 */
  --bms-text-h4: clamp(1.1875rem, 1.116rem + 0.357vw, 1.4375rem); /* 19 -> 23 */
  --bms-text-h5: 1.125rem; /* 18 */
  --bms-text-h6: 1rem; /* 16 */
  --bms-text-lead: clamp(
    1.0625rem,
    1.027rem + 0.179vw,
    1.1875rem
  ); /* 17 -> 19 */
  --bms-text-body: 1rem; /* 16 — never smaller for body copy */
  --bms-text-sm: 0.875rem; /* 14 */
  --bms-text-xs: 0.8125rem; /* 13 — captions only */
  --bms-text-label: 0.9375rem; /* 15 */
  --bms-text-button: 1rem;
  --bms-text-nav: 0.9375rem;
  --bms-text-price: clamp(
    1.375rem,
    1.304rem + 0.357vw,
    1.625rem
  ); /* 22 -> 26 */

  --bms-leading-tight: 1.15;
  --bms-leading-snug: 1.3;
  --bms-leading-normal: 1.5;
  --bms-leading-relaxed: 1.65;

  --bms-tracking-tight: -0.02em;
  --bms-tracking-snug: -0.01em;
  --bms-tracking-normal: 0;
  --bms-tracking-wide: 0.06em;

  --bms-measure: 68ch; /* max line length for prose */

  /* ------------------------------------------------------------------
   * 4. SPACING — names are pixel values (4..96)
   * ------------------------------------------------------------------ */
  --bms-space-0: 0;
  --bms-space-4: 0.25rem;
  --bms-space-8: 0.5rem;
  --bms-space-12: 0.75rem;
  --bms-space-16: 1rem;
  --bms-space-24: 1.5rem;
  --bms-space-32: 2rem;
  --bms-space-48: 3rem;
  --bms-space-64: 4rem;
  --bms-space-80: 5rem;
  --bms-space-96: 6rem;

  /* ------------------------------------------------------------------
   * 5. LAYOUT
   * Breakpoints (custom properties cannot be used in @media — keep in sync):
   *   mobile  320–767   (default, mobile-first)
   *   tablet  768–1023  @media (min-width: 768px)
   *   desktop 1024–1439 @media (min-width: 1024px)
   *   large   1440+     @media (min-width: 1440px)
   * ------------------------------------------------------------------ */
  --bms-container-max: 80rem; /* 1280 */
  --bms-container-wide: 90rem; /* 1440 */
  --bms-container-narrow: 48rem; /* 768 — articles, legal pages */
  --bms-gutter: var(--bms-space-16);
  --bms-grid-gap: var(--bms-space-16);
  --bms-section-space: var(--bms-space-48);
  --bms-card-padding: var(--bms-space-16);
  --bms-header-height: 4rem;

  /* ------------------------------------------------------------------
   * 6. SHAPE & ELEVATION
   * ------------------------------------------------------------------ */
  --bms-radius-sm: 4px;
  --bms-radius-md: 8px;
  --bms-radius-lg: 12px;
  --bms-radius-xl: 16px;
  --bms-radius-pill: 999px;

  --bms-border-width: 1px;
  --bms-border-width-strong: 2px;

  --bms-shadow-sm:
    0 1px 2px rgb(18 26 49 / 0.06), 0 1px 3px rgb(18 26 49 / 0.06);
  --bms-shadow-md:
    0 2px 4px rgb(18 26 49 / 0.05), 0 6px 16px rgb(18 26 49 / 0.08);
  --bms-shadow-lg:
    0 4px 8px rgb(18 26 49 / 0.06), 0 16px 32px rgb(18 26 49 / 0.12);
  /* v1.2.0: floating panel over imagery (hero booking panel) and an upward
     shadow for bottom-docked bars (mobile action bar) */
  --bms-shadow-xl:
    0 2px 6px rgb(0 6 34 / 0.12), 0 24px 48px rgb(0 6 34 / 0.28);
  --bms-shadow-up: 0 -8px 24px rgb(18 26 49 / 0.12);
  --bms-shadow-focus: 0 0 0 3px var(--bms-color-focus);

  /* ------------------------------------------------------------------
   * 7. CONTROLS
   * ------------------------------------------------------------------ */
  --bms-control-height: 3rem; /* 48 — comfortable touch target */
  --bms-control-height-sm: 2.5rem; /* 40 */
  --bms-control-height-lg: 3.5rem; /* 56 — primary booking CTA */
  --bms-control-padding-x: var(--bms-space-16);
  --bms-control-radius: var(--bms-radius-md);
  --bms-focus-ring-width: 3px;
  --bms-focus-ring-offset: 2px;

  /* ------------------------------------------------------------------
   * 8. MOTION
   * ------------------------------------------------------------------ */
  --bms-duration-instant: 100ms;
  --bms-duration-fast: 150ms;
  --bms-duration-base: 200ms;
  --bms-duration-slow: 300ms;
  --bms-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bms-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --bms-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ------------------------------------------------------------------
   * 9. Z-INDEX
   * Legacy context (do not exceed accidentally): .suggestions 999,
   * .qss-box 9999, .open .flatpickr-calendar 1000000.
   * ------------------------------------------------------------------ */
  --bms-z-base: 1;
  --bms-z-dropdown: 100;
  --bms-z-sticky: 200;
  --bms-z-header: 300;
  --bms-z-overlay: 400;
  --bms-z-modal: 500;
  --bms-z-toast: 600;
}

/* Responsive token overrides */
@media (min-width: 768px) {
  :root {
    --bms-gutter: var(--bms-space-24);
    --bms-grid-gap: var(--bms-space-24);
    --bms-section-space: var(--bms-space-64);
    --bms-card-padding: var(--bms-space-24);
  }
}

@media (min-width: 1024px) {
  :root {
    --bms-gutter: var(--bms-space-32);
    --bms-section-space: var(--bms-space-80);
    --bms-header-height: 4.5rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --bms-grid-gap: var(--bms-space-32);
    --bms-section-space: var(--bms-space-96);
    --bms-card-padding: var(--bms-space-32);
  }
}

/* Reduced motion — collapses every DS duration. Legacy animations untouched. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bms-duration-instant: 0.01ms;
    --bms-duration-fast: 0.01ms;
    --bms-duration-base: 0.01ms;
    --bms-duration-slow: 0.01ms;
  }
}

/* ==== typography.css ==== */
/*!
 * Britannia DS v1.2.0 — typography.css
 *
 * Fonts are NOT imported here (an @import would block rendering). Load them
 * once in the page <head> — see README "Installation".
 *
 * .bms-scope is the opt-in boundary. Element-level styles (h1–h6, p, a, lists)
 * only apply inside it, so legacy pages are untouched until a section is
 * explicitly migrated. It also neutralises these legacy globals:
 *   wrapper.html     * { font-family: "Lato" }          (Lato is never loaded)
 *   wrapper.html     a { text-decoration: none !important }
 *   navbar/breadcrumb li / ul,li { list-style: none }
 *   hero.html        h3 > span { underline, white }
 */

/* ---------------------------------------------------------------------
 * Scope root
 * ------------------------------------------------------------------- */
.bms-scope {
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-body);
  line-height: var(--bms-leading-relaxed);
  font-weight: var(--bms-font-weight-regular);
  color: var(--bms-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* (0,1,0) beats the legacy universal selector (0,0,0) */
.bms-scope *,
.bms-scope *::before,
.bms-scope *::after {
  box-sizing: border-box;
  font-family: inherit;
}

.bms-scope :where(input, select, textarea, button) {
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------------
 * Headings — scoped element styles + matching utility classes
 * ------------------------------------------------------------------- */
.bms-scope :where(h1, h2, h3, h4, h5, h6),
.bms-h1, .bms-h2, .bms-h3, .bms-h4, .bms-h5, .bms-h6 {
  font-family: var(--bms-font-heading);
  color: var(--bms-color-text-brand);
  font-weight: var(--bms-font-weight-bold);
  margin: 0;
  text-wrap: balance;
}

.bms-scope :where(h1), .bms-h1 {
  font-size: var(--bms-text-h1);
  line-height: var(--bms-leading-tight);
  letter-spacing: var(--bms-tracking-tight);
  font-weight: var(--bms-font-weight-extrabold);
}

.bms-scope :where(h2), .bms-h2 {
  font-size: var(--bms-text-h2);
  line-height: 1.2;
  letter-spacing: var(--bms-tracking-tight);
}

.bms-scope :where(h3), .bms-h3 {
  font-size: var(--bms-text-h3);
  line-height: 1.25;
  letter-spacing: var(--bms-tracking-snug);
}

.bms-scope :where(h4), .bms-h4 {
  font-size: var(--bms-text-h4);
  line-height: var(--bms-leading-snug);
  letter-spacing: var(--bms-tracking-snug);
}

.bms-scope :where(h5), .bms-h5 {
  font-size: var(--bms-text-h5);
  line-height: 1.35;
}

.bms-scope :where(h6), .bms-h6 {
  font-size: var(--bms-text-h6);
  line-height: 1.4;
}

/* Neutralise legacy `h3 > span` (white underline from hero.html) */
.bms-scope :where(h3 > span) {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Body copy
 * ------------------------------------------------------------------- */
.bms-scope :where(p) {
  margin: 0;
}

.bms-lead {
  font-size: var(--bms-text-lead);
  line-height: var(--bms-leading-relaxed);
  color: var(--bms-color-text-secondary);
}

.bms-text-sm {
  font-size: var(--bms-text-sm);
  line-height: var(--bms-leading-normal);
}

.bms-caption {
  font-size: var(--bms-text-xs);
  line-height: 1.45;
  color: var(--bms-color-text-muted);
}

.bms-eyebrow {
  display: inline-block;
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-bold);
  letter-spacing: var(--bms-tracking-wide);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bms-color-text-accent);
}

.bms-scope :where(strong, b) {
  font-weight: var(--bms-font-weight-semibold);
}

/* ---------------------------------------------------------------------
 * Links — underline drawn with background-image because legacy
 * `a { text-decoration: none !important }` cannot be overridden without
 * !important. Links in running text MUST remain visually distinct (1.4.1).
 * ------------------------------------------------------------------- */
/* Component links draw their own underline (or none). Reset the UA underline
   so pages WITHOUT the legacy reset don't get a double underline. */
.bms-link, .bms-prose a, .bms-header__brand, .bms-header__phone, .bms-nav__link,
.bms-breadcrumb__link, .bms-footer__link, .bms-card__link, .bms-steps__link,
.bms-error-summary__list a, .bms-skip-link {
  text-decoration: none;
}

.bms-link,
.bms-prose a {
  color: var(--bms-color-link);
  font-weight: var(--bms-font-weight-medium);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: color var(--bms-duration-fast) var(--bms-ease-standard),
    background-size var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-link:hover,
.bms-prose a:hover {
  color: var(--bms-color-link-hover);
  background-size: 100% 2px;
}

.bms-link:focus-visible,
.bms-prose a:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
  border-radius: 2px;
}

/* Standalone links (not inside a sentence) need a 24px+ target — WCAG 2.5.8 */
.bms-link--standalone {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  background-position: 0 calc(100% - 2px);
}

.bms-link--inverse {
  color: var(--bms-color-link-inverse);
}

.bms-link--inverse:hover {
  color: var(--bms-color-link-inverse);
}

/* ---------------------------------------------------------------------
 * Prose — long-form CMS content (the "main" / "content" placeholders).
 * NEVER write CMS placeholder syntax in these files, even in comments: if CSS
 * is pasted into a module <style> block the CMS will expand it.
 * Vertical rhythm via sibling margins; restores list bullets that legacy
 * global `li { list-style: none }` removes.
 * ------------------------------------------------------------------- */
.bms-prose {
  max-width: var(--bms-measure);
  font-size: var(--bms-text-body);
  line-height: var(--bms-leading-relaxed);
  color: var(--bms-color-text);
}

.bms-prose > * + * {
  margin-top: var(--bms-space-16);
}

.bms-prose > * + :is(h2, h3) {
  margin-top: var(--bms-space-48);
}

.bms-prose > * + :is(h4, h5, h6) {
  margin-top: var(--bms-space-32);
}

.bms-prose :is(h2, h3, h4, h5, h6) + * {
  margin-top: var(--bms-space-12);
}

.bms-prose :is(ul, ol) {
  padding-left: var(--bms-space-24);
}

.bms-prose ul > li {
  list-style: disc;
}

.bms-prose ol > li {
  list-style: decimal;
}

.bms-prose li + li {
  margin-top: var(--bms-space-8);
}

.bms-prose li::marker {
  color: var(--bms-color-text-accent);
}

.bms-prose blockquote {
  border-left: 4px solid var(--bms-color-action-primary);
  padding: var(--bms-space-8) 0 var(--bms-space-8) var(--bms-space-24);
  color: var(--bms-color-text-secondary);
  font-size: var(--bms-text-lead);
}

.bms-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bms-radius-lg);
}

.bms-prose hr {
  border: 0;
  border-top: var(--bms-border-width) solid var(--bms-color-border);
  margin-block: var(--bms-space-48);
}

/* Text helpers */
.bms-text-secondary { color: var(--bms-color-text-secondary); }
.bms-text-brand { color: var(--bms-color-text-brand); }
.bms-text-accent { color: var(--bms-color-text-accent); }
.bms-text-inverse { color: var(--bms-color-text-inverse); }
.bms-font-heading { font-family: var(--bms-font-heading); }
.bms-tabular { font-variant-numeric: tabular-nums; }

/* ==== layout.css ==== */
/*!
 * Britannia DS v1.2.0 — layout.css
 * Containers, sections, grid, stack/cluster primitives, surfaces.
 * Named .bms-container (not .container) — legacy breadcrumb.html defines
 * `.container { display:flex; flex-direction:column }` globally.
 */

/* ---------------------------------------------------------------------
 * Container — gutter is 16 / 24 / 32px via --bms-gutter
 * ------------------------------------------------------------------- */
.bms-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--bms-container-max) + 2 * var(--bms-gutter));
  margin-inline: auto;
  padding-inline: var(--bms-gutter);
}

.bms-container--wide {
  max-width: calc(var(--bms-container-wide) + 2 * var(--bms-gutter));
}

.bms-container--narrow {
  max-width: calc(var(--bms-container-narrow) + 2 * var(--bms-gutter));
}

/* ---------------------------------------------------------------------
 * Section — vertical rhythm 48 / 64 / 80 / 96px
 * ------------------------------------------------------------------- */
.bms-section {
  padding-block: var(--bms-section-space);
}

.bms-section--tight {
  padding-block: calc(var(--bms-section-space) / 2);
}

.bms-section__header {
  display: grid;
  gap: var(--bms-space-12);
  max-width: 44rem;
  margin-bottom: var(--bms-space-32);
}

.bms-section__header--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* ---------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------- */
.bms-surface-page { background-color: var(--bms-color-bg-page); }
.bms-surface { background-color: var(--bms-color-bg-surface); }
.bms-surface-sunken { background-color: var(--bms-color-bg-surface-sunken); }
.bms-surface-brand { background-color: var(--bms-color-bg-brand-subtle); }

/* Inverse (navy) — re-maps semantic tokens so nested components adapt.
   White components inside it get light tokens back (see tokens.css §2). */
.bms-surface-inverse {
  --bms-color-text: var(--bms-color-text-inverse);
  --bms-color-text-brand: var(--bms-color-text-inverse);
  --bms-color-text-secondary: var(--bms-color-text-inverse-secondary);
  --bms-color-text-muted: var(--bms-color-text-inverse-secondary);
  --bms-color-text-accent: var(--bms-red-200);
  --bms-color-link: var(--bms-color-link-inverse);
  --bms-color-link-hover: var(--bms-color-link-inverse);
  --bms-color-border: var(--bms-color-border-inverse);
  --bms-color-border-brand: var(--bms-neutral-0);
  --bms-color-focus: var(--bms-color-focus-inverse);
  /* Buttons */
  --bms-color-action-primary: var(--bms-color-action-primary-on-inverse);
  --bms-color-action-primary-hover: var(--bms-color-action-primary-on-inverse-hover-bg);
  --bms-color-action-primary-active: var(--bms-color-action-primary-on-inverse-hover-bg);
  --bms-color-action-primary-hover-text: var(--bms-color-action-primary-on-inverse-hover-text);
  --bms-color-bg-control: transparent;
  --bms-color-action-subtle-hover: rgb(255 255 255 / 0.1);
  --bms-color-action-subtle-active: rgb(255 255 255 / 0.16);
  --bms-color-disabled-bg: rgb(255 255 255 / 0.12);
  --bms-color-disabled-border: transparent;
  --bms-color-disabled-text: var(--bms-navy-200);

  background-color: var(--bms-color-bg-inverse);
  color: var(--bms-color-text-inverse);
}

/* ---------------------------------------------------------------------
 * Grid — 4 columns mobile, 8 tablet, 12 desktop
 * ------------------------------------------------------------------- */
.bms-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bms-grid-gap);
}

.bms-grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 768px) {
  .bms-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bms-col-md-4 { grid-column: span 4; }
  .bms-col-md-8 { grid-column: span 8; }
}

@media (min-width: 1024px) {
  .bms-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bms-col-lg-3 { grid-column: span 3; }
  .bms-col-lg-4 { grid-column: span 4; }
  .bms-col-lg-5 { grid-column: span 5; }
  .bms-col-lg-6 { grid-column: span 6; }
  .bms-col-lg-7 { grid-column: span 7; }
  .bms-col-lg-8 { grid-column: span 8; }
  .bms-col-lg-12 { grid-column: span 12; }
}

/* Auto-fit card grid — no breakpoints needed; min card width via --bms-cards-min */
.bms-cards {
  --bms-cards-min: 17rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--bms-cards-min), 100%), 1fr));
  gap: var(--bms-grid-gap);
}

.bms-cards--sm { --bms-cards-min: 13rem; }
.bms-cards--lg { --bms-cards-min: 22rem; }

/* ---------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------- */
.bms-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bms-stack-gap, var(--bms-space-16));
}

.bms-stack--xs { --bms-stack-gap: var(--bms-space-4); }
.bms-stack--sm { --bms-stack-gap: var(--bms-space-8); }
.bms-stack--md { --bms-stack-gap: var(--bms-space-24); }
.bms-stack--lg { --bms-stack-gap: var(--bms-space-32); }
.bms-stack--xl { --bms-stack-gap: var(--bms-space-48); }

.bms-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bms-cluster-gap, var(--bms-space-12));
}

.bms-cluster--between { justify-content: space-between; }
.bms-cluster--end { justify-content: flex-end; }
.bms-cluster--sm { --bms-cluster-gap: var(--bms-space-8); }
.bms-cluster--lg { --bms-cluster-gap: var(--bms-space-24); }

/* Sidebar split: main + aside; stacks below 1024px */
.bms-split {
  display: grid;
  gap: var(--bms-space-32);
}

@media (min-width: 1024px) {
  .bms-split {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: var(--bms-space-48);
    align-items: start;
  }
}

/* Media */
.bms-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bms-radius-lg);
  object-fit: cover;
}

.bms-ratio-16x9 { aspect-ratio: 16 / 9; }
.bms-ratio-4x3 { aspect-ratio: 4 / 3; }

.bms-divider {
  border: 0;
  border-top: var(--bms-border-width) solid var(--bms-color-border);
  margin: 0;
}

/* ==== buttons.css ==== */
/*!
 * Britannia DS v1.2.0 — buttons.css
 *
 * <button class="bms-btn bms-btn--primary">Get a quote</button>
 * <a class="bms-btn bms-btn--secondary" href="...">Call us</a>
 *
 * Variants: --primary (red, one per view), --secondary (navy), --outline,
 *           --ghost, --inverse (white, for navy surfaces)
 * Sizes:    --sm (40px), default (48px), --lg (56px), --block (full width)
 * States:   :hover, :focus-visible, :active, :disabled / [aria-disabled="true"],
 *           loading via [aria-busy="true"] (keeps width, shows spinner)
 */

.bms-btn {
  --_bg: transparent;
  --_fg: var(--bms-color-text-brand);
  --_border: transparent;

  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-8);
  min-height: var(--bms-control-height);
  padding: 0 var(--bms-space-24);
  margin: 0;
  border: var(--bms-border-width-strong) solid var(--_border);
  border-radius: var(--bms-control-radius);
  background-color: var(--_bg);
  color: var(--_fg);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-button);
  font-weight: var(--bms-font-weight-semibold);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--bms-duration-fast) var(--bms-ease-standard),
    border-color var(--bms-duration-fast) var(--bms-ease-standard),
    color var(--bms-duration-fast) var(--bms-ease-standard),
    box-shadow var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-btn:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

.bms-btn:active:not(:disabled, [aria-disabled="true"]) {
  transform: translateY(1px);
}

.bms-btn svg {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}

/* Primary — the single most important action (Get Quote, Book, Pay) */
.bms-btn--primary {
  --_bg: var(--bms-color-action-primary);
  --_fg: var(--bms-color-action-primary-text);
  --_border: var(--bms-color-action-primary);
}
.bms-btn--primary:hover {
  --_bg: var(--bms-color-action-primary-hover);
  --_border: var(--bms-color-action-primary-hover);
  --_fg: var(--bms-color-action-primary-hover-text);
}
.bms-btn--primary:active {
  --_bg: var(--bms-color-action-primary-active);
  --_border: var(--bms-color-action-primary-active);
  --_fg: var(--bms-color-action-primary-hover-text);
}

/* Secondary — navy */
.bms-btn--secondary {
  --_bg: var(--bms-color-action-secondary);
  --_fg: var(--bms-color-action-secondary-text);
  --_border: var(--bms-color-action-secondary);
}
.bms-btn--secondary:hover {
  --_bg: var(--bms-color-action-secondary-hover);
  --_border: var(--bms-color-action-secondary-hover);
}
.bms-btn--secondary:active {
  --_bg: var(--bms-color-action-secondary-active);
  --_border: var(--bms-color-action-secondary-active);
}

/* Outline — navy border */
.bms-btn--outline {
  --_bg: var(--bms-color-bg-control);
  --_fg: var(--bms-color-text-brand);
  --_border: var(--bms-color-border-brand);
}
.bms-btn--outline:hover { --_bg: var(--bms-color-action-subtle-hover); }
.bms-btn--outline:active { --_bg: var(--bms-color-action-subtle-active); }

/* Ghost — text-only, for low-emphasis actions (Back, Edit) */
.bms-btn--ghost {
  --_fg: var(--bms-color-text-brand);
  padding-inline: var(--bms-space-12);
}
.bms-btn--ghost:hover { --_bg: var(--bms-color-action-subtle-hover); }
.bms-btn--ghost:active { --_bg: var(--bms-color-action-subtle-active); }

/* Inverse — white on navy surfaces */
.bms-btn--inverse {
  --_bg: var(--bms-neutral-0);
  --_fg: var(--bms-navy-900);
  --_border: var(--bms-neutral-0);
}
.bms-btn--inverse:hover {
  --_bg: var(--bms-navy-50);
  --_border: var(--bms-navy-50);
}

/* No surface-specific selectors here: on .bms-surface-inverse the tokens
   above are remapped (layout.css), so a button always follows its NEAREST
   surface — including a white booking panel inside a navy hero. */

/* Sizes */
.bms-btn--sm {
  min-height: var(--bms-control-height-sm);
  padding-inline: var(--bms-space-16);
  font-size: var(--bms-text-sm);
}

.bms-btn--lg {
  min-height: var(--bms-control-height-lg);
  padding-inline: var(--bms-space-32);
  font-size: 1.0625rem;
  font-weight: var(--bms-font-weight-bold);
}

.bms-btn--block {
  display: flex;
  width: 100%;
}

/* Icon-only — MUST carry aria-label */
.bms-btn--icon {
  padding: 0;
  width: var(--bms-control-height);
  min-width: var(--bms-control-height);
}

.bms-btn--icon.bms-btn--sm {
  width: var(--bms-control-height-sm);
  min-width: var(--bms-control-height-sm);
}

/* Disabled — use the native attribute on <button>; aria-disabled on <a> */
.bms-btn:disabled,
.bms-btn[aria-disabled="true"] {
  --_bg: var(--bms-color-disabled-bg);
  --_fg: var(--bms-color-disabled-text);
  --_border: var(--bms-color-disabled-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* Loading — label stays in the DOM (keeps width, read by AT); spinner overlays */
.bms-btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
}

.bms-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--_fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: bms-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .bms-btn[aria-busy="true"]::after {
    animation-duration: 2s;
  }
  .bms-btn:active:not(:disabled, [aria-disabled="true"]) {
    transform: none;
  }
}

/* Windows High Contrast / forced colours */
@media (forced-colors: active) {
  .bms-btn { border-color: ButtonText; }
  .bms-btn:focus-visible { outline-color: Highlight; }
  .bms-btn:disabled,
  .bms-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}

/* ==== forms.css ==== */
/*!
 * Britannia DS v1.2.0 — forms.css
 *
 * Field anatomy (label -> hint -> control -> error):
 *   <div class="bms-field">
 *     <label class="bms-label" for="email">Email address</label>
 *     <p class="bms-hint" id="email-hint">We send your confirmation here.</p>
 *     <input class="bms-input" id="email" type="email"
 *            aria-describedby="email-hint email-error" aria-invalid="true">
 *     <p class="bms-field__error" id="email-error">Enter an email address in
 *        the format name@example.com</p>
 *   </div>
 *
 * Invalid state is driven by aria-invalid="true" on the control (so styling
 * and assistive tech can never disagree). .bms-field--invalid is available
 * for wrappers whose control can't carry the attribute.
 *
 * Legacy note: hero.html sets `select, input { height: 42px !important }`.
 * Controls here use min-height, which overrides height when larger — so they
 * render at 48px even on pages with that rule, without !important.
 */

/* ---------------------------------------------------------------------
 * Fieldset / field wrapper
 * ------------------------------------------------------------------- */
.bms-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.bms-legend {
  display: block;
  padding: 0;
  margin-bottom: var(--bms-space-12);
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.35;
  color: var(--bms-color-text-brand);
}

.bms-field {
  display: grid;
  gap: var(--bms-space-8);
  min-width: 0;
}

.bms-form-row {
  display: grid;
  gap: var(--bms-space-16);
}

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

/* ---------------------------------------------------------------------
 * Label, hint, error
 * ------------------------------------------------------------------- */
.bms-label {
  display: block;
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-label);
  font-weight: var(--bms-font-weight-semibold);
  line-height: 1.4;
  color: var(--bms-color-text);
  /* Neutralise legacy `.form-group label { position:absolute }` if ever nested */
  position: static;
  margin: 0;
  padding: 0; /* <legend class="bms-label"> has UA padding that shifted it ~2px */
  text-transform: none;
}

.bms-label__optional {
  font-weight: var(--bms-font-weight-regular);
  color: var(--bms-color-text-secondary);
}

.bms-hint {
  margin: 0;
  font-size: var(--bms-text-sm);
  line-height: var(--bms-leading-normal);
  color: var(--bms-color-text-secondary);
}

.bms-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--bms-space-8);
  margin: 0;
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  line-height: 1.45;
  color: var(--bms-color-error);
}

.bms-field__error::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  background-color: currentColor;
  -webkit-mask: var(--bms-icon-alert) center / contain no-repeat;
  mask: var(--bms-icon-alert) center / contain no-repeat;
}

.bms-field__error[hidden] { display: none; }

.bms-field__success {
  margin: 0;
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  color: var(--bms-color-success);
}

/* ---------------------------------------------------------------------
 * Text input, select, textarea
 * ------------------------------------------------------------------- */
:root {
  --bms-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-.9 4.2h1.8v5.6H9.1V5.7Zm.9 9.1a1.15 1.15 0 1 1 0-2.3 1.15 1.15 0 0 1 0 2.3Z'/%3E%3C/svg%3E");
  /* Data URIs can't read custom properties: stroke is --bms-navy-900 (#011138), kept in sync by check-static */
  --bms-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23011138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  --bms-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E");
}

.bms-input,
.bms-select,
.bms-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--bms-control-height);
  margin: 0;
  padding: 0 var(--bms-control-padding-x);
  border: var(--bms-border-width) solid var(--bms-color-border-input);
  border-radius: var(--bms-control-radius);
  background-color: var(--bms-color-bg-surface);
  color: var(--bms-color-text);
  font-family: var(--bms-font-body);
  font-size: 1rem; /* 16px minimum: prevents iOS zoom on focus */
  font-weight: var(--bms-font-weight-regular);
  line-height: 1.5;
  text-align: left;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--bms-duration-fast) var(--bms-ease-standard),
    box-shadow var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-textarea {
  min-height: 8rem;
  padding-block: var(--bms-space-12);
  resize: vertical;
}

.bms-select {
  padding-right: calc(var(--bms-control-padding-x) + 1.5rem);
  background-image: var(--bms-icon-chevron);
  background-repeat: no-repeat;
  background-position: right var(--bms-space-12) center;
  background-size: 1.25rem;
  cursor: pointer;
}

.bms-input::placeholder,
.bms-textarea::placeholder {
  color: var(--bms-color-text-muted);
  opacity: 1;
}

.bms-input:hover,
.bms-select:hover,
.bms-textarea:hover {
  border-color: var(--bms-color-border-input-hover);
}

.bms-input:focus-visible,
.bms-select:focus-visible,
.bms-textarea:focus-visible,
.bms-input:focus,
.bms-select:focus,
.bms-textarea:focus {
  border-color: var(--bms-color-border-brand);
  box-shadow: 0 0 0 1px var(--bms-color-border-brand), 0 0 0 4px var(--bms-color-focus);
}

/* Invalid */
.bms-input[aria-invalid="true"],
.bms-select[aria-invalid="true"],
.bms-textarea[aria-invalid="true"],
.bms-field--invalid :is(.bms-input, .bms-select, .bms-textarea) {
  border-color: var(--bms-color-error);
  box-shadow: inset 4px 0 0 var(--bms-color-error);
}

.bms-input[aria-invalid="true"]:focus,
.bms-select[aria-invalid="true"]:focus,
.bms-textarea[aria-invalid="true"]:focus,
.bms-field--invalid :is(.bms-input, .bms-select, .bms-textarea):focus {
  border-color: var(--bms-color-error);
  box-shadow: inset 4px 0 0 var(--bms-color-error), 0 0 0 1px var(--bms-color-error), 0 0 0 4px var(--bms-color-focus);
}

/* Valid — only show after the user has interacted; add class from JS */
.bms-field--valid :is(.bms-input, .bms-select) {
  border-color: var(--bms-color-success);
}

/* Disabled & read-only */
.bms-input:disabled,
.bms-select:disabled,
.bms-textarea:disabled {
  background-color: var(--bms-color-disabled-bg);
  border-color: var(--bms-color-disabled-border);
  color: var(--bms-color-disabled-text);
  cursor: not-allowed;
}

.bms-input[readonly] {
  background-color: var(--bms-color-bg-surface-sunken);
  border-style: dashed;
}

/* Sizes */
.bms-input--lg,
.bms-select--lg {
  min-height: var(--bms-control-height-lg);
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------------
 * Input group — leading icon (pickup pin, calendar, clock)
 * ------------------------------------------------------------------- */
.bms-input-group {
  position: relative;
  display: block;
}

.bms-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--bms-space-12);
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  color: var(--bms-color-text-brand);
  pointer-events: none;
}

.bms-input-group > .bms-input,
.bms-input-group > .bms-select {
  padding-left: calc(var(--bms-space-12) + 1.25rem + var(--bms-space-12));
}

.bms-input-group__action {
  position: absolute;
  top: 50%;
  right: var(--bms-space-4);
  transform: translateY(-50%);
}

.bms-input-group:has(.bms-input-group__action) > .bms-input {
  padding-right: calc(var(--bms-control-height) + var(--bms-space-4));
}

/* ---------------------------------------------------------------------
 * Radio & checkbox
 * <label class="bms-choice">
 *   <input class="bms-choice__input" type="checkbox"> <span>Meet & greet</span>
 * </label>
 * ------------------------------------------------------------------- */
.bms-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--bms-space-12);
  min-height: 2.75rem; /* 44px target */
  padding-block: var(--bms-space-8);
  font-size: var(--bms-text-body);
  line-height: 1.5;
  color: var(--bms-color-text);
  cursor: pointer;
}

.bms-choice__input {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;  /* 24px — WCAG 2.5.8 minimum target, even without the label */
  height: 1.5rem;
  /* max-height beats legacy `input { height: 42px !important }` without !important */
  max-height: 1.5rem;
  margin: 0.0625rem 0 0;
  border: var(--bms-border-width-strong) solid var(--bms-color-border-input);
  border-radius: var(--bms-radius-sm);
  background-color: var(--bms-color-bg-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--bms-duration-fast) var(--bms-ease-standard),
    border-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-choice__input[type="radio"] {
  border-radius: 50%;
}

.bms-choice__input:hover {
  border-color: var(--bms-color-border-input-hover);
}

.bms-choice__input:checked {
  border-color: var(--bms-color-selected);
  background-color: var(--bms-color-selected);
}

.bms-choice__input[type="checkbox"]:checked {
  background-image: var(--bms-icon-check);
}

.bms-choice__input[type="radio"]:checked {
  background-color: var(--bms-color-bg-surface);
  box-shadow: inset 0 0 0 4px var(--bms-color-bg-surface), inset 0 0 0 12px var(--bms-color-selected);
}

.bms-choice__input:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

.bms-choice__input:disabled {
  border-color: var(--bms-color-disabled-border);
  background-color: var(--bms-color-disabled-bg);
  cursor: not-allowed;
}

.bms-choice:has(.bms-choice__input:disabled) {
  color: var(--bms-color-disabled-text);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Segmented control — One way / Return (radio group)
 * <fieldset class="bms-segmented">
 *   <legend class="bms-visually-hidden">Journey type</legend>
 *   <label class="bms-segmented__option">
 *     <input class="bms-segmented__input" type="radio" name="trip" checked>
 *     <span class="bms-segmented__label">One way</span>
 *   </label> ...
 * ------------------------------------------------------------------- */
.bms-segmented {
  display: flex;
  gap: var(--bms-space-4);
  margin: 0;
  padding: var(--bms-space-4);
  border: 0;
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-surface-sunken);
  min-width: 0;
}

.bms-segmented__option {
  flex: 1 1 0;
  position: relative;
  display: flex;
}

.bms-segmented__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  max-height: 1px; /* beats legacy input height:42px!important */
  margin: 0;
  pointer-events: none;
}

.bms-segmented__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-8);
  min-height: 2.75rem;
  padding: 0 var(--bms-space-16);
  border-radius: calc(var(--bms-radius-md) - 2px);
  font-size: var(--bms-text-label);
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-text-secondary);
  cursor: pointer;
  transition: background-color var(--bms-duration-fast) var(--bms-ease-standard),
    color var(--bms-duration-fast) var(--bms-ease-standard),
    box-shadow var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-segmented__label:hover {
  color: var(--bms-color-text-brand);
}

.bms-segmented__input:checked + .bms-segmented__label {
  background-color: var(--bms-color-bg-surface);
  color: var(--bms-color-selected);
  box-shadow: var(--bms-shadow-sm), inset 0 0 0 1px var(--bms-color-border);
}

.bms-segmented__input:focus-visible + .bms-segmented__label {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 0;
}

.bms-segmented__input:disabled + .bms-segmented__label {
  color: var(--bms-color-disabled-text);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Stepper — passengers / luggage
 * <div class="bms-stepper">
 *   <button type="button" class="bms-stepper__btn" aria-label="Fewer passengers">−</button>
 *   <input class="bms-stepper__input" id="pax" type="text" inputmode="numeric" value="1">
 *   <button type="button" class="bms-stepper__btn" aria-label="More passengers">+</button>
 * </div>
 * ------------------------------------------------------------------- */
.bms-stepper {
  box-sizing: border-box;
  display: inline-grid;
  /* Shrinks to 112px minimum so two steppers fit side by side at 320px */
  grid-template-columns: minmax(2.5rem, var(--bms-control-height)) minmax(2rem, 1fr) minmax(2.5rem, var(--bms-control-height));
  min-width: 0;
  align-items: stretch;
  width: 100%;
  max-width: 12rem;
  min-height: var(--bms-control-height);
  border: var(--bms-border-width) solid var(--bms-color-border-input);
  border-radius: var(--bms-control-radius);
  background-color: var(--bms-color-bg-surface);
  overflow: hidden;
}

.bms-stepper:focus-within {
  border-color: var(--bms-color-border-brand);
  box-shadow: 0 0 0 1px var(--bms-color-border-brand), 0 0 0 4px var(--bms-color-focus);
}

.bms-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bms-color-text-brand);
  font-size: 1.375rem;
  font-weight: var(--bms-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-stepper__btn:hover { background-color: var(--bms-color-action-subtle-hover); }
.bms-stepper__btn:active { background-color: var(--bms-color-action-subtle-active); }
.bms-stepper__btn:focus-visible { outline: none; background-color: var(--bms-color-action-subtle-active); }

.bms-stepper__btn:disabled {
  color: var(--bms-color-disabled-text);
  background: transparent;
  cursor: not-allowed;
}

.bms-stepper__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline: var(--bms-border-width) solid var(--bms-color-border);
  background: transparent;
  color: var(--bms-color-text);
  font-family: var(--bms-font-body);
  font-size: 1.0625rem;
  font-weight: var(--bms-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.bms-stepper__input::-webkit-outer-spin-button,
.bms-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------------------------------------------------------------------
 * Location autocomplete — WAI-ARIA combobox (list autocomplete)
 * <div class="bms-autocomplete">
 *   <div class="bms-input-group">
 *     <svg class="bms-input-group__icon">…</svg>
 *     <input class="bms-input" role="combobox" aria-autocomplete="list"
 *            aria-expanded="true" aria-controls="pickup-list"
 *            aria-activedescendant="pickup-opt-1">
 *   </div>
 *   <ul class="bms-autocomplete__list" id="pickup-list" role="listbox">
 *     <li class="bms-autocomplete__group" role="presentation">Airports</li>
 *     <li class="bms-autocomplete__option" role="option" id="pickup-opt-1"
 *         aria-selected="true">…</li>
 *   </ul>
 *   <p class="bms-visually-hidden" role="status" aria-live="polite">5 results</p>
 * </div>
 * ------------------------------------------------------------------- */
.bms-autocomplete {
  position: relative;
}

.bms-autocomplete__list {
  position: absolute;
  z-index: var(--bms-z-dropdown);
  top: calc(100% + var(--bms-space-4));
  left: 0;
  right: 0;
  max-height: min(22rem, 60vh);
  margin: 0;
  padding: var(--bms-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  box-shadow: var(--bms-shadow-lg);
  animation: bms-pop-in var(--bms-duration-fast) var(--bms-ease-enter);
}

.bms-autocomplete__list[hidden] { display: none; }

.bms-autocomplete__group {
  padding: var(--bms-space-12) var(--bms-space-12) var(--bms-space-4);
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-bold);
  letter-spacing: var(--bms-tracking-wide);
  text-transform: uppercase;
  color: var(--bms-color-text-secondary);
  list-style: none;
}

.bms-autocomplete__option {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--bms-space-12);
  align-items: start;
  min-height: 2.75rem;
  padding: var(--bms-space-8) var(--bms-space-12);
  border-radius: var(--bms-radius-md);
  color: var(--bms-color-text);
  cursor: pointer;
  list-style: none;
}

.bms-autocomplete__option-icon {
  grid-row: span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--bms-color-text-secondary);
}

.bms-autocomplete__option-primary {
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-medium);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bms-autocomplete__option-primary mark {
  background: none;
  color: inherit;
  font-weight: var(--bms-font-weight-bold);
}

.bms-autocomplete__option-secondary {
  font-size: var(--bms-text-sm);
  line-height: 1.4;
  color: var(--bms-color-text-secondary);
}

.bms-autocomplete__option:hover {
  background-color: var(--bms-color-bg-surface-sunken);
}

/* Keyboard-highlighted option (aria-activedescendant target) */
.bms-autocomplete__option[aria-selected="true"],
.bms-autocomplete__option.is-active {
  background-color: var(--bms-color-selected-bg);
  box-shadow: inset 3px 0 0 var(--bms-color-selected);
}

.bms-autocomplete__option[aria-selected="true"] .bms-autocomplete__option-icon {
  color: var(--bms-color-selected);
}

.bms-autocomplete__status {
  display: flex;
  align-items: center;
  gap: var(--bms-space-12);
  padding: var(--bms-space-16) var(--bms-space-12);
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
  list-style: none;
}

/* ---------------------------------------------------------------------
 * Date & time
 * <div class="bms-datetime"> date field + time field (hour/min selects) </div>
 * ------------------------------------------------------------------- */
/* Sizes to its CONTAINER, not the viewport: date and time sit side by side
   only when each gets >= 11rem (a viewport query squeezed the time selects
   inside the 30rem booking panel until their values were clipped). */
.bms-datetime {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--bms-space-16);
}

.bms-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--bms-space-8);
}

/* Two-digit values: slimmer padding so "09" never clips beside the chevron */
.bms-time .bms-select {
  min-width: 4.5rem;
  padding-left: var(--bms-space-12);
  padding-right: calc(var(--bms-space-8) + 1.25rem);
  background-position: right var(--bms-space-8) center;
}

.bms-time__sep {
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-text-secondary);
}

/* Calendar popover */
.bms-calendar {
  box-sizing: border-box;
  width: 100%;
  max-width: 21rem;
  padding: var(--bms-space-16);
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  box-shadow: var(--bms-shadow-lg);
  font-family: var(--bms-font-body);
}

.bms-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-8);
  margin-bottom: var(--bms-space-12);
}

.bms-calendar__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-text-brand);
}

.bms-calendar__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Higher specificity than legacy `thead tr th` / `tbody tr td span` (hero.html) */
.bms-calendar__grid th {
  padding: 0 0 var(--bms-space-8);
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-text-secondary);
  text-align: center;
  margin: 0;
}

.bms-calendar__grid td {
  padding: 1px;
  text-align: center;
}

.bms-calendar__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 2.75rem;
  margin: 0;
  padding: 0;
  border: var(--bms-border-width) solid transparent;
  border-radius: var(--bms-radius-md);
  background: transparent;
  color: var(--bms-color-text);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-calendar__day:hover { background-color: var(--bms-color-bg-surface-sunken); }

.bms-calendar__day:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 0;
}

.bms-calendar__day[aria-current="date"] {
  border-color: var(--bms-color-border-brand);
  font-weight: var(--bms-font-weight-bold);
}

.bms-calendar__day[aria-selected="true"],
.bms-calendar__day[aria-pressed="true"] {
  background-color: var(--bms-color-selected);
  border-color: var(--bms-color-selected);
  color: var(--bms-color-text-inverse);
}

.bms-calendar__day:disabled,
.bms-calendar__day[aria-disabled="true"] {
  color: var(--bms-neutral-300);
  background: transparent;
  text-decoration: line-through;
  cursor: not-allowed;
}

.bms-calendar__day--outside {
  color: var(--bms-color-text-muted);
}

@keyframes bms-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .bms-input, .bms-select, .bms-textarea, .bms-stepper { border-color: FieldText; }
  .bms-autocomplete__option[aria-selected="true"] { outline: 2px solid Highlight; }
  .bms-calendar__day[aria-selected="true"] { outline: 2px solid Highlight; }
  .bms-segmented__input:checked + .bms-segmented__label { outline: 2px solid Highlight; }
}

/* ==== cards.css ==== */
/*!
 * Britannia DS v1.2.0 — cards.css
 * Base card, service card, airport card, vehicle card, trust indicators, badges.
 *
 * Whole-card click targets use the "stretched link" pattern: the card's one
 * real <a>/<button> gets ::after { inset: 0 } so the entire card is clickable
 * while assistive tech still sees a single, well-named control.
 */

/* ---------------------------------------------------------------------
 * Base card
 * ------------------------------------------------------------------- */
.bms-card {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bms-space-12);
  padding: var(--bms-card-padding);
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  color: var(--bms-color-text);
  transition: box-shadow var(--bms-duration-base) var(--bms-ease-standard),
    border-color var(--bms-duration-base) var(--bms-ease-standard);
}

.bms-card--raised { box-shadow: var(--bms-shadow-md); border-color: transparent; }
.bms-card--flush { padding: 0; overflow: hidden; }

.bms-card--interactive:hover {
  border-color: var(--bms-color-border-strong);
  box-shadow: var(--bms-shadow-md);
}

.bms-card--interactive:focus-within {
  border-color: var(--bms-color-border-brand);
}

.bms-card__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.35;
  letter-spacing: var(--bms-tracking-snug);
  color: var(--bms-color-text-brand);
}

.bms-card__text {
  margin: 0;
  font-size: var(--bms-text-body);
  line-height: var(--bms-leading-normal);
  color: var(--bms-color-text-secondary);
}

.bms-card__footer {
  margin-top: auto;
  padding-top: var(--bms-space-8);
}

.bms-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bms-stretched-link:focus-visible {
  outline: none;
}

.bms-stretched-link:focus-visible::after {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
  border-radius: var(--bms-radius-lg);
}

/* Arrow link used in card footers */
.bms-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-8);
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-link);
}

.bms-card__link svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-card--interactive:hover .bms-card__link { color: var(--bms-color-link-hover); }
.bms-card--interactive:hover .bms-card__link svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------
 * Service card — "Airport transfers", "Seaport transfers", "Group travel"
 * ------------------------------------------------------------------- */
.bms-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-brand-subtle);
  color: var(--bms-color-text-brand);
}

.bms-service-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bms-service-card__media {
  margin: calc(var(--bms-card-padding) * -1) calc(var(--bms-card-padding) * -1) var(--bms-space-4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bms-radius-lg) var(--bms-radius-lg) 0 0;
  background-color: var(--bms-color-bg-surface-sunken);
}

.bms-service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Airport card — code, name, key facts, CTA
 * ------------------------------------------------------------------- */
.bms-airport-card__header {
  display: flex;
  align-items: center;
  gap: var(--bms-space-12);
}

.bms-airport-card__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  height: 2.25rem;
  padding: 0 var(--bms-space-8);
  border-radius: var(--bms-radius-sm);
  background-color: var(--bms-color-bg-inverse);
  color: var(--bms-color-text-inverse);
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-extrabold);
  letter-spacing: var(--bms-tracking-wide);
}

.bms-airport-card__facts {
  display: grid;
  gap: var(--bms-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-airport-card__facts li {
  display: flex;
  align-items: center;
  gap: var(--bms-space-8);
  list-style: none;
}

.bms-airport-card__facts svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--bms-color-text-brand);
}

.bms-airport-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--bms-space-4);
  margin: 0;
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-airport-card__price strong {
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h4);
  font-weight: var(--bms-font-weight-extrabold);
  color: var(--bms-color-text-brand);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * Vehicle card — booking step 2
 * <article class="bms-vehicle-card [is-selected] [is-unavailable]">
 *   media / title / model / specs / price / <button aria-pressed>
 * ------------------------------------------------------------------- */
.bms-vehicle-card {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bms-space-16);
  padding: var(--bms-card-padding);
  border: var(--bms-border-width-strong) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  transition: border-color var(--bms-duration-base) var(--bms-ease-standard),
    box-shadow var(--bms-duration-base) var(--bms-ease-standard);
}

@media (min-width: 768px) {
  .bms-vehicle-card--row {
    grid-template-columns: 11rem minmax(0, 1fr) auto;
    align-items: center;
  }
}

.bms-vehicle-card:hover {
  border-color: var(--bms-color-border-strong);
  box-shadow: var(--bms-shadow-md);
}

.bms-vehicle-card.is-selected,
.bms-vehicle-card:has(.bms-vehicle-card__action[aria-pressed="true"]) {
  border-color: var(--bms-color-selected);
  background-color: var(--bms-color-bg-surface);
  box-shadow: 0 0 0 1px var(--bms-color-selected), var(--bms-shadow-md);
}

/* Corner badge sits ON the border so it never overlaps card content */
.bms-vehicle-card__check {
  position: absolute;
  z-index: 3;
  top: -0.75rem;
  right: -0.75rem;
  box-shadow: 0 0 0 3px var(--bms-color-bg-page);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--bms-color-selected);
  background-image: var(--bms-icon-check);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
}

.bms-vehicle-card.is-selected .bms-vehicle-card__check,
.bms-vehicle-card:has(.bms-vehicle-card__action[aria-pressed="true"]) .bms-vehicle-card__check {
  display: flex;
}

.bms-vehicle-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-surface-sunken);
  overflow: hidden;
}

.bms-vehicle-card__media img {
  display: block;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bms-vehicle-card__body {
  display: grid;
  gap: var(--bms-space-8);
  min-width: 0;
}

.bms-vehicle-card__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.3;
  color: var(--bms-color-text-brand);
}

.bms-vehicle-card__model {
  margin: 0;
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-vehicle-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bms-space-8) var(--bms-space-16);
  margin: var(--bms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.bms-vehicle-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-8);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  color: var(--bms-color-text);
  list-style: none;
}

.bms-vehicle-card__specs svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--bms-color-text-brand);
}

.bms-vehicle-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bms-space-12);
  padding-top: var(--bms-space-12);
  border-top: var(--bms-border-width) solid var(--bms-color-border);
}

.bms-vehicle-card--row .bms-vehicle-card__footer {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 768px) {
  .bms-vehicle-card--row .bms-vehicle-card__footer {
    flex-direction: column;
    align-items: flex-end;
  }
}

.bms-price {
  display: grid;
  margin: 0;
  line-height: 1.2;
}

.bms-price__label {
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-semibold);
  letter-spacing: var(--bms-tracking-wide);
  text-transform: uppercase;
  color: var(--bms-color-text-secondary);
}

.bms-price__amount {
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-price);
  font-weight: var(--bms-font-weight-extrabold);
  color: var(--bms-color-text-brand);
  font-variant-numeric: tabular-nums;
}

.bms-vehicle-card__action {
  position: relative;
  z-index: 2;
}

/* Unavailable */
.bms-vehicle-card.is-unavailable {
  background-color: var(--bms-color-bg-surface-sunken);
  border-style: dashed;
  box-shadow: none;
}

.bms-vehicle-card.is-unavailable :is(.bms-vehicle-card__media, .bms-vehicle-card__specs, .bms-price) {
  opacity: 0.55;
}

.bms-vehicle-card__notice {
  margin: 0;
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  color: var(--bms-color-text-secondary);
}

/* ---------------------------------------------------------------------
 * Trust & benefit indicators
 * <ul class="bms-trust"> <li class="bms-trust__item"> icon + title + text
 * ------------------------------------------------------------------- */
.bms-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--bms-space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-trust__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bms-space-12);
  row-gap: var(--bms-space-4);
  align-items: start;
  list-style: none;
}

.bms-trust__icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--bms-color-bg-accent-subtle);
  color: var(--bms-color-text-accent);
}

.bms-surface-inverse .bms-trust__icon {
  background-color: rgb(255 255 255 / 0.1);
  color: var(--bms-neutral-0);
}

.bms-trust__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bms-trust__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.4;
  color: var(--bms-color-text-brand);
}

.bms-trust__text {
  margin: 0;
  font-size: var(--bms-text-sm);
  line-height: var(--bms-leading-normal);
  color: var(--bms-color-text-secondary);
}

/* Compact inline strip (under the booking panel) */
.bms-trust--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bms-space-12) var(--bms-space-24);
}

.bms-trust--inline .bms-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-8);
}

.bms-trust--inline .bms-trust__icon {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
}

.bms-trust--inline .bms-trust__title {
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-semibold);
}

/* Rating summary */
.bms-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-8);
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--bms-color-warning-accent);
}

.bms-rating__stars svg { width: 1rem; height: 1rem; }

.bms-rating__score {
  font-family: var(--bms-font-heading);
  font-weight: var(--bms-font-weight-extrabold);
  font-size: var(--bms-text-body);
  color: var(--bms-color-text-brand);
}

/* ---------------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------------- */
.bms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-4);
  min-height: 1.5rem;
  padding: 0 var(--bms-space-8);
  border-radius: var(--bms-radius-pill);
  background-color: var(--bms-color-bg-surface-sunken);
  color: var(--bms-color-text);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.bms-badge--brand { background-color: var(--bms-color-bg-brand-subtle); color: var(--bms-color-text-brand); }
.bms-badge--accent { background-color: var(--bms-color-bg-accent-subtle); color: var(--bms-red-700); }
.bms-badge--success { background-color: var(--bms-color-success-bg); color: var(--bms-color-success); }
.bms-badge--warning { background-color: var(--bms-color-warning-bg); color: var(--bms-color-warning); }
.bms-badge--solid { background-color: var(--bms-color-bg-inverse); color: var(--bms-color-text-inverse); }

@media (forced-colors: active) {
  .bms-card, .bms-vehicle-card { border-color: CanvasText; }
  .bms-vehicle-card.is-selected { outline: 3px solid Highlight; }
}

/* ==== navigation.css ==== */
/*!
 * Britannia DS v1.2.0 — navigation.css
 * Header, main navigation (desktop + mobile), breadcrumbs, footer.
 *
 * Mobile menu is progressively enhanced: without JS the list is simply shown
 * stacked under the header. bms-ui.js adds .bms-js to <html> and wires the
 * toggle (aria-expanded, Escape to close, focus return).
 *
 * Legacy names deliberately avoided: .menu, .logo, .hamburger, .dropdown,
 * .navbar1, .breadcrumb, .breadcrumb__item, .footer__section, #footer.
 */

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */
.bms-header {
  position: relative;
  z-index: var(--bms-z-header);
  background-color: var(--bms-color-bg-surface);
  border-bottom: var(--bms-border-width) solid var(--bms-color-border);
  font-family: var(--bms-font-body);
}

.bms-header--sticky {
  position: sticky;
  top: 0;
}

/* WCAG 2.2 AA 2.4.11 Focus Not Obscured: keyboard focus, anchor jumps and
   error-summary links scroll clear of the sticky header. Scoped with :has()
   so pages without the DS header are unaffected. */
html:has(.bms-header--sticky) {
  scroll-padding-top: calc(var(--bms-header-height) + var(--bms-space-16));
}

.bms-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bms-space-8);
  min-height: var(--bms-header-height);
}

.bms-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  margin-right: auto;
  border-radius: var(--bms-radius-sm);
}

.bms-header__brand:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 4px;
}

/* Finalized logo, trimmed of transparent padding: 341x94 (3.63:1).
   Sized by height so any future aspect still fits the bar.
   Never recolour, distort or redraw — size only. */
.bms-header__logo {
  display: block;
  height: 2.5rem;   /* 40px -> ~145px wide */
  width: auto;
  max-width: 55vw;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .bms-header__logo { height: 3rem; } /* 48px -> ~174px wide */
}

.bms-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bms-space-8);
}

.bms-header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-8);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--bms-space-8);
  border-radius: var(--bms-radius-md);
  color: var(--bms-color-text-brand);
  font-weight: var(--bms-font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bms-header__phone svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.bms-header__phone:hover { background-color: var(--bms-color-action-subtle-hover); }
.bms-header__phone:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

/* Phone number text and header CTA appear from tablet; icon-only below */
.bms-header__phone-text,
.bms-header__cta { display: none; }

@media (min-width: 768px) {
  .bms-header__phone-text { display: inline; }
  .bms-header__cta { display: inline-flex; }
}

/* ---------------------------------------------------------------------
 * Main navigation
 * ------------------------------------------------------------------- */
/* Not display:contents — that has dropped <nav> landmarks from the a11y tree */
.bms-nav {
  display: flex;
  align-items: center;
}

.bms-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-8);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--bms-space-8);
  margin: 0;
  border: 0;
  border-radius: var(--bms-radius-md);
  background: transparent;
  color: var(--bms-color-text-brand);
  font: inherit;
  font-weight: var(--bms-font-weight-semibold);
  cursor: pointer;
}

.bms-nav__toggle:hover { background-color: var(--bms-color-action-subtle-hover); }
.bms-nav__toggle:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

/* Three-line icon that morphs to an X */
.bms-nav__toggle-icon {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: background-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-nav__toggle-icon::before,
.bms-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--bms-duration-base) var(--bms-ease-standard);
}

.bms-nav__toggle-icon::before { transform: translateY(-6px); }
.bms-nav__toggle-icon::after { transform: translateY(6px); }

.bms-nav__toggle[aria-expanded="true"] .bms-nav__toggle-icon { background-color: transparent; }
.bms-nav__toggle[aria-expanded="true"] .bms-nav__toggle-icon::before { transform: rotate(45deg); }
.bms-nav__toggle[aria-expanded="true"] .bms-nav__toggle-icon::after { transform: rotate(-45deg); }

.bms-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-nav__list > li { list-style: none; }

.bms-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--bms-space-12);
  border-radius: var(--bms-radius-md);
  color: var(--bms-color-text);
  font-size: var(--bms-text-nav);
  font-weight: var(--bms-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bms-duration-fast) var(--bms-ease-standard),
    background-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-nav__link:hover {
  color: var(--bms-color-text-brand);
  background-color: var(--bms-color-action-subtle-hover);
}

.bms-nav__link:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 0;
}

.bms-nav__link[aria-current="page"] {
  color: var(--bms-color-text-brand);
}

.bms-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--bms-space-12);
  right: var(--bms-space-12);
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--bms-color-action-primary);
}

/* Mobile & tablet (<1024px) */
@media (max-width: 1023.98px) {
  .bms-js .bms-nav__toggle { display: inline-flex; }

  /* Mobile order: brand | call | menu */
  .bms-header__inner { flex-wrap: wrap; }
  .bms-header__actions { order: 1; }
  .bms-nav { order: 2; }

  /* No-JS fallback: the list drops to its own full-width row */
  html:not(.bms-js) .bms-nav { order: 10; flex-basis: 100%; }

  .bms-nav__list {
    flex: 1;
    flex-direction: column;
    gap: var(--bms-space-4);
    padding: var(--bms-space-8) 0 var(--bms-space-16);
  }

  .bms-js .bms-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--bms-space-12) var(--bms-gutter) var(--bms-space-24);
    border-bottom: var(--bms-border-width) solid var(--bms-color-border);
    background-color: var(--bms-color-bg-surface);
    box-shadow: var(--bms-shadow-lg);
    max-height: calc(100dvh - var(--bms-header-height));
    overflow-y: auto;
  }

  .bms-js .bms-nav__toggle[aria-expanded="true"] + .bms-nav__list {
    display: flex;
    animation: bms-pop-in var(--bms-duration-base) var(--bms-ease-enter);
  }

  .bms-nav__link {
    min-height: 3rem;
    font-size: var(--bms-text-body);
  }

  .bms-nav__link[aria-current="page"] {
    background-color: var(--bms-color-selected-bg);
  }

  .bms-nav__link[aria-current="page"]::after {
    left: 0;
    right: auto;
    top: var(--bms-space-8);
    bottom: var(--bms-space-8);
    width: 3px;
    height: auto;
  }

  .bms-nav__mobile-cta { display: block; margin-top: var(--bms-space-12); }
}

@media (min-width: 1024px) {
  .bms-nav__list {
    gap: var(--bms-space-4);
    margin-right: var(--bms-space-16);
  }
  .bms-nav__mobile-cta { display: none; }
}

/* ---------------------------------------------------------------------
 * Breadcrumbs — compatible with schema.org BreadcrumbList microdata
 * ------------------------------------------------------------------- */
.bms-breadcrumb {
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
}

.bms-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bms-space-4) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  list-style: none;
  color: var(--bms-color-text-secondary);
}

.bms-breadcrumb__item + .bms-breadcrumb__item::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin: 0 var(--bms-space-4);
  background-color: var(--bms-color-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bms-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--bms-space-4);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-color-link);
  font-weight: var(--bms-font-weight-medium);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 85%;
  background-repeat: no-repeat;
  transition: background-size var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-breadcrumb__link:hover { background-size: 100% 1px; }
.bms-breadcrumb__link:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 0;
}

.bms-breadcrumb__item [aria-current="page"] {
  padding: 0 var(--bms-space-4);
  color: var(--bms-color-text);
  font-weight: var(--bms-font-weight-semibold);
}

/* ---------------------------------------------------------------------
 * Footer — navy. The logo is navy/gold on transparent, so it sits on a
 * white plate rather than being recoloured.
 * ------------------------------------------------------------------- */
.bms-footer {
  padding-block: var(--bms-space-48) var(--bms-space-24);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
  line-height: var(--bms-leading-normal);
}

@media (min-width: 1024px) {
  .bms-footer { padding-top: var(--bms-space-64); }
}

.bms-footer__grid {
  display: grid;
  gap: var(--bms-space-32);
}

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

@media (min-width: 1024px) {
  .bms-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--bms-space-48); }
}

.bms-footer__logo-plate {
  display: inline-flex;
  padding: var(--bms-space-12) var(--bms-space-16);
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-neutral-0);
}

.bms-footer__logo-plate img {
  display: block;
  width: 12rem;
  height: auto;
}

.bms-footer__heading {
  margin: 0 0 var(--bms-space-16);
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-text-inverse);
}

.bms-footer__links {
  display: grid;
  gap: var(--bms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-footer__links li { list-style: none; }

.bms-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--bms-space-8);
  min-height: 2.25rem;
  color: var(--bms-color-text-inverse-secondary);
  border-radius: var(--bms-radius-sm);
  transition: color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-footer__link:hover {
  color: var(--bms-color-text-inverse);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 85%;
  background-repeat: no-repeat;
}

.bms-footer__link:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus-inverse);
  outline-offset: 2px;
}

.bms-footer__link svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.bms-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-12) var(--bms-space-24);
  margin-top: var(--bms-space-48);
  padding-top: var(--bms-space-24);
  border-top: var(--bms-border-width) solid var(--bms-color-border-inverse);
  color: var(--bms-color-text-inverse-secondary);
  font-size: var(--bms-text-xs);
}

@media (forced-colors: active) {
  .bms-nav__link[aria-current="page"]::after { background-color: Highlight; }
}

/* ==== booking.css ==== */
/*!
 * Britannia DS v1.2.0 — booking.css
 * Journey: Journey Details -> Vehicle -> Passenger Details -> Payment -> Confirmation
 *
 * Visual layer ONLY. These classes are not yet attached to the live booking
 * widget (the CMS "search-snippet" module — classes qss-*, pjTbs-*, flatpickr-*,
 * suggestions*). See README "Legacy mapping" for the migration plan.
 */

/* ---------------------------------------------------------------------
 * Step indicator
 * <nav class="bms-steps" aria-label="Booking progress">
 *   <p class="bms-steps__status" aria-hidden="true">Step 2 of 5: <strong>Vehicle</strong></p>
 *   (status is a visual summary for mobile; the list + aria-current is the
 *    accessible source of truth, so the status is aria-hidden)
 *   <ol class="bms-steps__list">
 *     <li class="bms-steps__item is-complete">…</li>
 *     <li class="bms-steps__item is-current" aria-current="step">…</li>
 *     <li class="bms-steps__item">…</li>
 *   </ol>
 * </nav>
 * ------------------------------------------------------------------- */
.bms-steps {
  font-family: var(--bms-font-body);
}

.bms-steps__status {
  margin: 0 0 var(--bms-space-12);
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-steps__status strong {
  color: var(--bms-color-text-brand);
  font-weight: var(--bms-font-weight-bold);
}

@media (min-width: 768px) {
  .bms-steps__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.bms-steps__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bms-step;
}

.bms-steps__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bms-space-8);
  min-width: 0;
  list-style: none;
  counter-increment: bms-step;
  text-align: center;
}

/* Connector line between markers */
.bms-steps__item + .bms-steps__item::before {
  content: "";
  position: absolute;
  top: 0.9375rem;
  right: calc(50% + 1.25rem);
  left: calc(-50% + 1.25rem);
  height: 2px;
  border-radius: 1px;
  background-color: var(--bms-color-border-strong);
}

.bms-steps__item.is-complete + .bms-steps__item::before,
.bms-steps__item.is-complete + .bms-steps__item.is-current::before {
  background-color: var(--bms-color-selected);
}

.bms-steps__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: var(--bms-border-width-strong) solid var(--bms-color-border-input);
  border-radius: 50%;
  background-color: var(--bms-color-bg-surface);
  color: var(--bms-color-text-secondary);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.bms-steps__marker::before {
  content: counter(bms-step);
}

.bms-steps__item.is-current .bms-steps__marker {
  border-color: var(--bms-color-action-primary);
  background-color: var(--bms-color-action-primary);
  color: var(--bms-color-action-primary-text);
  box-shadow: 0 0 0 4px var(--bms-color-bg-accent-subtle);
}

.bms-steps__item.is-complete .bms-steps__marker {
  border-color: var(--bms-color-selected);
  background-color: var(--bms-color-selected);
  background-image: var(--bms-icon-check);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
  color: transparent;
}

/* Mobile: labels visually hidden but still announced (never display:none) */
.bms-steps__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  line-height: 1.3;
  color: var(--bms-color-text-secondary);
}

@media (min-width: 768px) {
  .bms-steps__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

.bms-steps__item.is-current .bms-steps__label {
  color: var(--bms-color-text-brand);
  font-weight: var(--bms-font-weight-bold);
}

.bms-steps__item.is-complete .bms-steps__label {
  color: var(--bms-color-text);
}

/* Completed steps may link back. Not display:contents (breaks link focus). */
.bms-steps__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bms-space-8);
  border-radius: var(--bms-radius-md);
  color: inherit;
}

.bms-steps__link:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 2px;
}

.bms-steps__link:hover .bms-steps__label {
  color: var(--bms-color-link-hover);
}

/* ---------------------------------------------------------------------
 * Booking panel — the quote form container (hero + /reservation)
 * ------------------------------------------------------------------- */
.bms-booking-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  border-radius: var(--bms-radius-xl);
  background-color: var(--bms-color-bg-surface);
  box-shadow: var(--bms-shadow-lg);
  color: var(--bms-color-text);
  font-family: var(--bms-font-body);
  overflow: visible;
}

.bms-booking-panel--wide { max-width: none; }

.bms-booking-panel__header {
  display: grid;
  gap: var(--bms-space-4);
  padding: var(--bms-space-24) var(--bms-space-24) 0;
}

.bms-booking-panel__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h4);
  font-weight: var(--bms-font-weight-extrabold);
  line-height: 1.25;
  letter-spacing: var(--bms-tracking-snug);
  color: var(--bms-color-text-brand);
}

.bms-booking-panel__subtitle {
  margin: 0;
  font-size: var(--bms-text-sm);
  color: var(--bms-color-text-secondary);
}

.bms-booking-panel__body {
  display: grid;
  gap: var(--bms-space-16);
  padding: var(--bms-space-24);
}

.bms-booking-panel__footer {
  display: grid;
  gap: var(--bms-space-12);
  padding: 0 var(--bms-space-24) var(--bms-space-24);
}

@media (max-width: 479.98px) {
  .bms-booking-panel { border-radius: var(--bms-radius-lg); }
  .bms-booking-panel__header { padding: var(--bms-space-16) var(--bms-space-16) 0; }
  .bms-booking-panel__body { padding: var(--bms-space-16); }
  .bms-booking-panel__footer { padding: 0 var(--bms-space-16) var(--bms-space-16); }
}

.bms-booking-panel__reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-8);
  margin: 0;
  font-size: var(--bms-text-xs);
  color: var(--bms-color-text-secondary);
  text-align: center;
}

.bms-booking-panel__reassurance svg {
  width: 1rem;
  height: 1rem;
  color: var(--bms-color-success);
}

/* Route — pickup & drop-off with a swap control. (A dotted connector between
   the pins was tried and removed: visible labels sit between the fields and
   the line crossed the "Drop-off" label.) Pins differ by colour AND shape. */
.bms-route {
  position: relative;
  display: grid;
  gap: var(--bms-space-12);
}

.bms-route__swap {
  position: absolute;
  z-index: 2;
  right: var(--bms-space-12);
  top: 50%;
  transform: translateY(-15%);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: var(--bms-border-width) solid var(--bms-color-border-input);
  border-radius: 50%;
  background-color: var(--bms-color-bg-surface);
  color: var(--bms-color-text-brand);
  cursor: pointer;
  box-shadow: var(--bms-shadow-sm);
}

.bms-route__swap:hover { background-color: var(--bms-color-action-subtle-hover); }
.bms-route__swap:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 2px;
}
.bms-route__swap svg { width: 1.125rem; height: 1.125rem; }

.bms-pin--pickup { color: var(--bms-color-text-brand); }
.bms-pin--dropoff { color: var(--bms-color-text-accent); }

/* Passengers / luggage pair */
.bms-pax {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bms-space-16);
}

.bms-pax .bms-stepper { max-width: none; }

/* ---------------------------------------------------------------------
 * Booking layout — task area + journey summary
 * Desktop: main | sticky summary. Mobile: summary collapses above the
 * task (details/summary) and a sticky action bar carries the CTA.
 * ------------------------------------------------------------------- */
.bms-booking-layout {
  display: grid;
  gap: var(--bms-space-24);
  align-items: start;
}

@media (min-width: 1024px) {
  .bms-booking-layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    gap: var(--bms-space-32);
  }
  .bms-booking-layout__aside {
    position: sticky;
    top: calc(var(--bms-header-height) + var(--bms-space-24));
  }
}

.bms-booking-layout__main {
  display: grid;
  /* minmax(0,1fr): an implicit auto column grew to the action bar's
     min-content and overflowed 320px screens by 10px */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bms-space-24);
  min-width: 0;
}

/* Mobile: summary shown first, as a disclosure */
@media (max-width: 1023.98px) {
  .bms-booking-layout__aside { order: -1; }
}

/* ---------------------------------------------------------------------
 * Journey summary
 * ------------------------------------------------------------------- */
.bms-summary {
  box-sizing: border-box;
  display: grid;
  gap: var(--bms-space-16);
  padding: var(--bms-card-padding);
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
}

.bms-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-12);
}

.bms-summary__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-text-brand);
}

/* Route timeline */
.bms-summary__route {
  display: grid;
  gap: var(--bms-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-summary__stop {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: var(--bms-space-24);
  list-style: none;
}

.bms-summary__stop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--bms-color-text-brand);
  border-radius: 50%;
  background-color: var(--bms-color-bg-surface);
}

.bms-summary__stop:last-child::before {
  border-color: var(--bms-color-text-accent);
  background-color: var(--bms-color-text-accent);
}

.bms-summary__stop + .bms-summary__stop::after {
  content: "";
  position: absolute;
  left: calc(0.3125rem - 1px);
  bottom: calc(100% - 0.25rem);
  height: calc(var(--bms-space-16) + 0.5rem);
  border-left: 2px dotted var(--bms-color-border-input);
}

.bms-summary__stop-label {
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-semibold);
  letter-spacing: var(--bms-tracking-wide);
  text-transform: uppercase;
  color: var(--bms-color-text-secondary);
}

.bms-summary__stop-value {
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-semibold);
  line-height: 1.4;
  color: var(--bms-color-text);
  overflow-wrap: anywhere;
}

.bms-summary__details {
  display: grid;
  gap: var(--bms-space-8);
  margin: 0;
  padding-top: var(--bms-space-16);
  border-top: var(--bms-border-width) solid var(--bms-color-border);
}

.bms-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--bms-space-16);
}

.bms-summary__row dt {
  color: var(--bms-color-text-secondary);
}

.bms-summary__row dd {
  margin: 0;
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-text);
  text-align: right;
}

.bms-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bms-space-16);
  padding-top: var(--bms-space-16);
  border-top: var(--bms-border-width) solid var(--bms-color-border);
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-text);
}

/* Mobile disclosure wrapper.
 * A CLOSED <details> never renders its content, whatever the CSS — so ship
 * the markup with `open` (no-JS users see everything) and let bms-ui.js
 * collapse it on mobile and keep it open on desktop. Chrome 131+ also
 * honours ::details-content below as a no-JS desktop fallback. */
.bms-summary-disclosure {
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
}

.bms-summary-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-12);
  min-height: 3.5rem;
  padding: 0 var(--bms-space-16);
  font-weight: var(--bms-font-weight-semibold);
  color: var(--bms-color-text-brand);
  cursor: pointer;
  list-style: none;
}

.bms-summary-disclosure > summary::-webkit-details-marker { display: none; }

.bms-summary-disclosure > summary:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 2px;
  border-radius: var(--bms-radius-lg);
}

.bms-summary-disclosure > .bms-summary {
  border: 0;
  border-top: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: 0 0 var(--bms-radius-lg) var(--bms-radius-lg);
}

@media (min-width: 1024px) {
  /* Desktop: always open, no toggle chrome */
  .bms-summary-disclosure { border: 0; background: none; }
  .bms-summary-disclosure > summary { display: none; }
  .bms-summary-disclosure::details-content { content-visibility: visible; display: block; }
  .bms-summary-disclosure > .bms-summary {
    border: var(--bms-border-width) solid var(--bms-color-border);
    border-radius: var(--bms-radius-lg);
  }
}

/* ---------------------------------------------------------------------
 * Booking action bar — Back + total + Continue for every step.
 *   <div class="bms-booking-actionbar">            (DIRECT child of .bms-booking-layout__main)
 *     <a class="bms-btn bms-btn--ghost bms-booking-actionbar__back">…
 *        <span class="bms-booking-actionbar__back-text">Back<span class="bms-visually-hidden"> to journey</span></span></a>
 *     <p class="bms-price bms-booking-actionbar__total">…</p>
 *     <button class="bms-btn bms-btn--primary bms-btn--lg">Continue</button>
 *   </div>
 * Mobile/tablet: sticky to the viewport bottom. position:sticky only works
 * inside a TALL parent, so never wrap the bar in a small row (v1.2.0's
 * gallery nested it in .bms-step-nav and it could not stick).
 * Desktop: static row — Back left, Continue right, total hidden (it's in
 * the summary).
 * ------------------------------------------------------------------- */
.bms-booking-actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--bms-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-16);
  margin-inline: calc(var(--bms-gutter) * -1);
  padding: var(--bms-space-12) var(--bms-gutter);
  padding-bottom: calc(var(--bms-space-12) + env(safe-area-inset-bottom, 0px));
  border-top: var(--bms-border-width) solid var(--bms-color-border);
  background-color: var(--bms-color-bg-surface);
  box-shadow: 0 -4px 16px rgb(18 26 49 / 0.08);
}

.bms-booking-actionbar .bms-btn { flex: 1 1 auto; max-width: 14rem; }

.bms-booking-actionbar .bms-booking-actionbar__back {
  flex: 0 0 auto;
  margin-right: auto;
  padding-inline: var(--bms-space-8);
}

.bms-booking-actionbar__back svg { transform: scaleX(-1); }

/* Narrow phones: Back collapses to its arrow; its name stays announced */
@media (max-width: 479.98px) {
  .bms-booking-actionbar__back-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .bms-booking-actionbar .bms-booking-actionbar__back { min-width: var(--bms-control-height); }
  .bms-booking-actionbar { gap: var(--bms-space-12); }
  .bms-booking-actionbar .bms-btn--lg { padding-inline: var(--bms-space-24); }
}

/* WCAG 2.2 AA 2.4.11: fields focused near the bottom scroll clear of the
   sticky action bar (mobile only — the bar is static from 1024px). */
@media (max-width: 1023.98px) {
  html:has(.bms-booking-actionbar) {
    scroll-padding-bottom: calc(var(--bms-control-height-lg) + var(--bms-space-48));
  }
}

@media (min-width: 1024px) {
  .bms-booking-actionbar {
    position: static;
    margin-inline: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    justify-content: flex-end;
  }
  .bms-booking-actionbar__total { display: none; }
}

/* Generic Back / Continue row for NON-sticky forms (contact, account).
   For booking steps use .bms-booking-actionbar instead. */
.bms-step-nav {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-12);
}

/* ---------------------------------------------------------------------
 * Confirmation
 * ------------------------------------------------------------------- */
.bms-confirmation {
  display: grid;
  justify-items: center;
  gap: var(--bms-space-16);
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.bms-confirmation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--bms-color-success-bg);
  color: var(--bms-color-success);
}

.bms-confirmation__icon svg { width: 2rem; height: 2rem; }

.bms-reference {
  display: inline-grid;
  gap: var(--bms-space-4);
  padding: var(--bms-space-12) var(--bms-space-24);
  border: var(--bms-border-width) dashed var(--bms-color-border-strong);
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-surface-sunken);
}

.bms-reference__label {
  font-size: var(--bms-text-xs);
  font-weight: var(--bms-font-weight-semibold);
  letter-spacing: var(--bms-tracking-wide);
  text-transform: uppercase;
  color: var(--bms-color-text-secondary);
}

.bms-reference__value {
  font-family: var(--bms-font-mono);
  font-size: var(--bms-text-h4);
  font-weight: var(--bms-font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--bms-color-text-brand);
}

/* ==== components.css ==== */
/*!
 * Britannia DS v1.2.0 — components.css
 * Accordion / FAQ, alerts, error summary, toast, loading, empty & error states.
 */

/* ---------------------------------------------------------------------
 * Accordion / FAQ — native <details>/<summary>: keyboard + screen-reader
 * support with zero JS. Works with schema.org Question/Answer microdata.
 *
 * <div class="bms-accordion">
 *   <details class="bms-accordion__item">
 *     <summary class="bms-accordion__trigger">
 *       <h3 class="bms-accordion__title">How long will the driver wait?</h3>
 *     </summary>
 *     <div class="bms-accordion__panel">…</div>
 *   </details>
 * </div>
 * ------------------------------------------------------------------- */
.bms-accordion {
  display: grid;
  gap: var(--bms-space-12);
  font-family: var(--bms-font-body);
}

.bms-accordion__item {
  border: var(--bms-border-width) solid var(--bms-color-border);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  transition: border-color var(--bms-duration-base) var(--bms-ease-standard),
    box-shadow var(--bms-duration-base) var(--bms-ease-standard);
}

.bms-accordion__item[open] {
  border-color: var(--bms-color-border-strong);
  box-shadow: var(--bms-shadow-sm);
}

.bms-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-space-16);
  min-height: 3.5rem;
  padding: var(--bms-space-16) var(--bms-space-24);
  border-radius: var(--bms-radius-lg);
  cursor: pointer;
  list-style: none;
}

.bms-accordion__trigger::-webkit-details-marker { display: none; }

.bms-accordion__trigger::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bms-color-bg-brand-subtle);
  background-image: var(--bms-icon-chevron);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
  transition: transform var(--bms-duration-base) var(--bms-ease-standard),
    background-color var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-accordion__item[open] > .bms-accordion__trigger::after {
  transform: rotate(180deg);
}

.bms-accordion__trigger:hover::after {
  background-color: var(--bms-color-action-subtle-active);
}

.bms-accordion__trigger:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 2px;
}

.bms-accordion__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.4;
  color: var(--bms-color-text-brand);
}

@media (min-width: 768px) {
  .bms-accordion__title { font-size: 1.0625rem; }
}

.bms-accordion__panel {
  padding: 0 var(--bms-space-24) var(--bms-space-24);
  color: var(--bms-color-text-secondary);
  line-height: var(--bms-leading-relaxed);
}

.bms-accordion__item[open] > .bms-accordion__panel {
  animation: bms-fade-in var(--bms-duration-slow) var(--bms-ease-enter);
}

@keyframes bms-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------------
 * Alerts — inline, persistent messages
 * role="alert" only for errors that appear after an action;
 * role="status" for polite confirmations; no role for static notices.
 * ------------------------------------------------------------------- */
.bms-alert {
  --_accent: var(--bms-color-info);
  --_bg: var(--bms-color-info-bg);
  --_border: var(--bms-color-info-border);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--bms-space-4) var(--bms-space-12);
  align-items: start;
  padding: var(--bms-space-16);
  border: var(--bms-border-width) solid var(--_border);
  border-left: 4px solid var(--_accent);
  border-radius: var(--bms-radius-md);
  background-color: var(--_bg);
  color: var(--bms-color-text);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
  line-height: var(--bms-leading-normal);
}

.bms-alert__icon {
  grid-row: span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  color: var(--_accent);
}

.bms-alert__title {
  margin: 0;
  font-size: var(--bms-text-body);
  font-weight: var(--bms-font-weight-bold);
  line-height: 1.4;
  color: var(--_accent);
}

.bms-alert__body {
  grid-column: 2;
  margin: 0;
}

.bms-alert__close {
  grid-column: 3;
  grid-row: 1;
  margin: -0.5rem -0.5rem 0 0;
}

.bms-alert--success {
  --_accent: var(--bms-color-success);
  --_bg: var(--bms-color-success-bg);
  --_border: var(--bms-color-success-border);
}

.bms-alert--warning {
  --_accent: var(--bms-color-warning);
  --_bg: var(--bms-color-warning-bg);
  --_border: var(--bms-color-warning-border);
}

.bms-alert--error {
  --_accent: var(--bms-color-error);
  --_bg: var(--bms-color-error-bg);
  --_border: var(--bms-color-error-border);
}

/* ---------------------------------------------------------------------
 * Error summary — shown at the top of a form after a failed submit.
 * Receives focus (tabindex="-1") so keyboard & SR users land on it;
 * each item links to its field.
 * ------------------------------------------------------------------- */
.bms-error-summary {
  box-sizing: border-box;
  padding: var(--bms-space-16) var(--bms-space-24);
  border: var(--bms-border-width-strong) solid var(--bms-color-error);
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-surface);
  font-family: var(--bms-font-body);
}

.bms-error-summary:focus {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

.bms-error-summary__title {
  margin: 0 0 var(--bms-space-8);
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-error);
}

.bms-error-summary__list {
  display: grid;
  gap: var(--bms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bms-error-summary__list li { list-style: none; }

.bms-error-summary__list a {
  color: var(--bms-color-error);
  font-weight: var(--bms-font-weight-semibold);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

.bms-error-summary__list a:hover { background-size: 100% 2px; }
.bms-error-summary__list a:focus-visible {
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Toast / notification — transient, polite. Container is a live region:
 * <div class="bms-toast-region" role="status" aria-live="polite"></div>
 * ------------------------------------------------------------------- */
.bms-toast-region {
  position: fixed;
  z-index: var(--bms-z-toast);
  left: var(--bms-space-16);
  right: var(--bms-space-16);
  bottom: calc(var(--bms-space-16) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--bms-space-8);
  justify-items: center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .bms-toast-region { left: auto; right: var(--bms-space-24); bottom: var(--bms-space-24); justify-items: end; }
}

.bms-toast {
  display: flex;
  align-items: center;
  gap: var(--bms-space-12);
  width: 100%;
  max-width: 26rem;
  padding: var(--bms-space-12) var(--bms-space-16);
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-inverse);
  color: var(--bms-color-text-inverse);
  box-shadow: var(--bms-shadow-lg);
  font-family: var(--bms-font-body);
  font-size: var(--bms-text-sm);
  font-weight: var(--bms-font-weight-medium);
  pointer-events: auto;
  animation: bms-toast-in var(--bms-duration-slow) var(--bms-ease-enter);
}

.bms-toast svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.bms-toast--success svg { color: var(--bms-green-300); }
.bms-toast--error svg { color: var(--bms-red-200); }

@keyframes bms-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * Loading
 * ------------------------------------------------------------------- */
.bms-spinner {
  display: inline-block;
  width: var(--bms-spinner-size, 1.5rem);
  height: var(--bms-spinner-size, 1.5rem);
  border: 3px solid var(--bms-color-border);
  border-top-color: var(--bms-color-text-brand);
  border-radius: 50%;
  animation: bms-spin 800ms linear infinite;
  flex-shrink: 0;
}

.bms-spinner--lg { --bms-spinner-size: 2.5rem; }

.bms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bms-space-16);
  padding: var(--bms-space-48) var(--bms-space-16);
  color: var(--bms-color-text-secondary);
  font-size: var(--bms-text-sm);
  text-align: center;
}

/* Skeleton placeholders — reserve space so content doesn't shift (CLS) */
.bms-skeleton {
  display: block;
  border-radius: var(--bms-radius-sm);
  background-color: var(--bms-neutral-100);
  background-image: linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.65) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: bms-shimmer 1.4s ease-in-out infinite;
}

.bms-skeleton--text { height: 0.875rem; }
.bms-skeleton--title { height: 1.25rem; width: 60%; }
.bms-skeleton--media { aspect-ratio: 16 / 9; border-radius: var(--bms-radius-md); }
.bms-skeleton--btn { height: var(--bms-control-height); border-radius: var(--bms-control-radius); }

@keyframes bms-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bms-skeleton { animation: none; background-image: none; }
  .bms-spinner { animation-duration: 2s; }
}

/* ---------------------------------------------------------------------
 * Empty & error states (no vehicles, no results, failed request)
 * ------------------------------------------------------------------- */
.bms-state {
  display: grid;
  justify-items: center;
  gap: var(--bms-space-12);
  padding: var(--bms-space-48) var(--bms-space-24);
  border: var(--bms-border-width) dashed var(--bms-color-border-strong);
  border-radius: var(--bms-radius-lg);
  background-color: var(--bms-color-bg-surface);
  text-align: center;
  font-family: var(--bms-font-body);
}

.bms-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--bms-color-bg-surface-sunken);
  color: var(--bms-color-text-secondary);
}

.bms-state__icon svg { width: 1.75rem; height: 1.75rem; }

.bms-state--error .bms-state__icon {
  background-color: var(--bms-color-error-bg);
  color: var(--bms-color-error);
}

.bms-state__title {
  margin: 0;
  font-family: var(--bms-font-heading);
  font-size: var(--bms-text-h5);
  font-weight: var(--bms-font-weight-bold);
  color: var(--bms-color-text-brand);
}

.bms-state__text {
  max-width: 28rem;
  margin: 0;
  color: var(--bms-color-text-secondary);
}

@media (forced-colors: active) {
  .bms-alert, .bms-error-summary, .bms-accordion__item { border-color: CanvasText; }
  .bms-spinner { border-top-color: Highlight; }
}

/* ==== utilities.css ==== */
/*!
 * Britannia DS v1.2.0 — utilities.css
 * Small, single-purpose helpers. Loaded last so they win ties.
 * Named .bms-visually-hidden (not .sr-only) — hero.html already defines .sr-only.
 */

.bms-visually-hidden:not(:focus):not(:active) {
  position: absolute !important; /* utility contract: must always hide */
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link — first focusable element on every page */
.bms-skip-link {
  position: absolute;
  z-index: calc(var(--bms-z-toast) + 1);
  top: var(--bms-space-8);
  left: var(--bms-space-8);
  padding: var(--bms-space-12) var(--bms-space-16);
  border-radius: var(--bms-radius-md);
  background-color: var(--bms-color-bg-inverse);
  color: var(--bms-color-text-inverse);
  font-family: var(--bms-font-body);
  font-weight: var(--bms-font-weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--bms-duration-fast) var(--bms-ease-standard);
}

.bms-skip-link:focus {
  transform: none;
  outline: var(--bms-focus-ring-width) solid var(--bms-color-focus);
  outline-offset: var(--bms-focus-ring-offset);
}

/* Icon sizing for inline SVGs */
.bms-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Responsive visibility */
@media (max-width: 767.98px) { .bms-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .bms-show-mobile { display: none !important; } }
@media (max-width: 1023.98px) { .bms-show-desktop { display: none !important; } }
@media (min-width: 1024px) { .bms-hide-desktop { display: none !important; } }

/* Alignment */
.bms-text-center { text-align: center; }
.bms-text-left { text-align: left; }
.bms-text-right { text-align: right; }

/* Spacing — only the steps of the scale */
.bms-mt-0 { margin-top: 0; }
.bms-mt-8 { margin-top: var(--bms-space-8); }
.bms-mt-16 { margin-top: var(--bms-space-16); }
.bms-mt-24 { margin-top: var(--bms-space-24); }
.bms-mt-32 { margin-top: var(--bms-space-32); }
.bms-mt-48 { margin-top: var(--bms-space-48); }
.bms-mb-0 { margin-bottom: 0; }
.bms-mb-16 { margin-bottom: var(--bms-space-16); }
.bms-mb-24 { margin-bottom: var(--bms-space-24); }
.bms-mb-32 { margin-bottom: var(--bms-space-32); }

.bms-w-full { width: 100%; }
.bms-nowrap { white-space: nowrap; }