/* ==========================================================================
   Self-hosted fonts.

   These are VARIABLE fonts — one file per family per subset, covering the
   whole weight axis. Do not split them into per-weight @font-face rules;
   that downloads the same file repeatedly.

   Axis ranges verified against the Google Fonts API:
     Roboto     wght 100–900
     Open Sans  wght 300–800
     DM Sans    wght 100–1000

   Subsets: latin, latin-ext. English-only site; add subsets if copy needs them.
   No external requests at runtime — the deliverable must be self-contained.
   ========================================================================== */

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

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

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

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

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

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

/* ==========================================================================
   MDS — design tokens + base
   Token names follow the Brixies native framework (brxw-*).
   Values are MDS's own, derived from Figma. Source of truth: /DESIGN.md
   Do not add a value here that isn't in DESIGN.md, and don't change one
   without updating DESIGN.md first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Foundations
   base-font 10 → 1rem = 10px. Fluid range 360px → 1512px (the comp width).
   -------------------------------------------------------------------------- */

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

:root {
  /* ---------- Brand ---------- */
  --brxw-color-primary: hsl(357, 86%, 38%);
  /* Stripe partner on the red support band — the same construction as
     surface-dark / surface-dark-alt. See DESIGN.md §6 №27. */
  --brxw-color-primary-alt: hsl(357, 86%, 33%);
  --brxw-color-primary-trans-10: hsla(357, 86%, 38%, 0.1);
  --brxw-color-primary-trans-20: hsla(357, 86%, 38%, 0.2);
  --brxw-color-primary-trans-50: hsla(357, 86%, 38%, 0.5);
  --brxw-color-primary-trans-90: hsla(357, 86%, 38%, 0.9);
  --brxw-color-primary-95: hsla(357, 86%, 38%, 0.95);

  --brxw-color-secondary: hsl(0, 0%, 16%);

  /* ---------- Neutral ramp ---------- */
  --brxw-color-neutral-25: hsl(0, 0%, 98%);
  --brxw-color-neutral-50: hsl(0, 0%, 93.3%);
  --brxw-color-neutral-100: hsl(0, 0%, 89.8%);
  --brxw-color-neutral-200: hsl(0, 0%, 80%);
  --brxw-color-neutral-300: hsl(0, 0%, 70%);
  --brxw-color-neutral-400: hsl(0, 0%, 60%);
  --brxw-color-neutral-500: hsl(0, 0%, 50%);
  --brxw-color-neutral-600: hsl(0, 0%, 40%);
  --brxw-color-neutral-700: hsl(0, 0%, 25.1%);
  --brxw-color-neutral-800: hsl(0, 0%, 16%);
  --brxw-color-neutral-900: hsl(0, 0%, 12.2%);
  --brxw-color-neutral-950: hsl(0, 0%, 0%);

  --brxw-color-neutral-trans-10: hsla(0, 0%, 0%, 0.1);
  --brxw-color-neutral-trans-20: hsla(0, 0%, 0%, 0.2);
  --brxw-color-neutral-trans-30: hsla(0, 0%, 0%, 0.3);
  --brxw-color-neutral-trans-40: hsla(0, 0%, 0%, 0.4);
  --brxw-color-neutral-trans-50: hsla(0, 0%, 0%, 0.5);
  --brxw-color-overlay: hsla(0, 0%, 0%, 0.6);

  --brxw-color-white: hsl(0, 0%, 100%);
  --brxw-color-white-trans-80: hsla(0, 0%, 100%, 0.8);
  --brxw-color-white-trans-90: hsla(0, 0%, 100%, 0.9);

  /* ---------- Surfaces ---------- */
  --brxw-color-surface: var(--brxw-color-white);
  --brxw-color-surface-alt: hsl(20, 21%, 95.3%);
  /* #f4f4f4 — neutral grey card fill. Half a percent lighter than surface-alt but
     a different hue: that is the *cream band*, this is the panel sitting on it.
     See DESIGN.md §4.1. */
  --brxw-color-surface-muted: hsl(0, 0%, 95.7%);
  --brxw-color-surface-dark: var(--brxw-color-neutral-900);
  --brxw-color-surface-dark-alt: hsl(0, 0%, 14.1%);

  /* ---------- Semantic text ---------- */
  --brxw-color-text-heading: var(--brxw-color-neutral-800);
  --brxw-color-text-body: var(--brxw-color-neutral-700);
  --brxw-color-text-strong: var(--brxw-color-neutral-950);
  --brxw-color-text-invert: var(--brxw-color-white);
  --brxw-color-text-accent: var(--brxw-color-primary);

  /* ---------- Families ---------- */
  --brxw-font-heading: "Roboto", "Noto Sans JP", system-ui, sans-serif;
  --brxw-font-body: "Open Sans", "Noto Sans JP", system-ui, sans-serif;
  --brxw-font-display: "DM Sans", system-ui, sans-serif;

  /* ---------- Weights ---------- */
  --brxw-font-weight-regular: 400;
  --brxw-font-weight-medium: 500;
  --brxw-font-weight-semibold: 600;
  --brxw-font-weight-bold: 700;
  --brxw-font-weight-xbold: 800;

  /* ---------- Line heights ---------- */
  --brxw-line-height-heading: 1.2;
  --brxw-line-height-snug: 1.3;
  --brxw-line-height-mid: 1.4;
  --brxw-line-height-body: 1.5;
  --brxw-line-height-flat: 1;

  /* ---------- Tracking ---------- */
  --brxw-letter-spacing-title: 0.032rem;
  --brxw-letter-spacing-body: 0;

  /* ---------- Fluid type scale (SP 360 → PC 1512, both ends measured) ---------- */
  --brxw-text-fluid-xs: 1.2rem;
  --brxw-text-fluid-s: 1.4rem;
  --brxw-text-fluid-m: 1.6rem;
  --brxw-text-fluid-l: clamp(1.6rem, calc(0.001736 * (100vw - 36rem) + 1.6rem), 1.8rem);
  --brxw-text-fluid-xl: clamp(1.6rem, calc(0.005208 * (100vw - 36rem) + 1.6rem), 2.2rem);
  --brxw-text-fluid-2xl: clamp(2rem, calc(0.003472 * (100vw - 36rem) + 2rem), 2.4rem);
  --brxw-text-fluid-3xl: clamp(2.2rem, calc(0.005208 * (100vw - 36rem) + 2.2rem), 2.8rem);
  --brxw-text-fluid-4xl: clamp(2.2rem, calc(0.008681 * (100vw - 36rem) + 2.2rem), 3.2rem);
  --brxw-text-fluid-5xl: clamp(2.2rem, calc(0.012153 * (100vw - 36rem) + 2.2rem), 3.6rem);
  --brxw-text-fluid-6xl: clamp(2.6rem, calc(0.017361 * (100vw - 36rem) + 2.6rem), 4.6rem);

  --brxw-text-xs: var(--brxw-text-fluid-xs);
  --brxw-text-s: var(--brxw-text-fluid-s);
  --brxw-text-m: var(--brxw-text-fluid-m);
  --brxw-text-l: var(--brxw-text-fluid-l);
  --brxw-text-xl: var(--brxw-text-fluid-xl);
  --brxw-text-2xl: var(--brxw-text-fluid-2xl);
  --brxw-text-3xl: var(--brxw-text-fluid-3xl);
  --brxw-text-4xl: var(--brxw-text-fluid-4xl);
  --brxw-text-5xl: var(--brxw-text-fluid-5xl);
  --brxw-text-6xl: var(--brxw-text-fluid-6xl);

  /* ---------- Component type (deliberately off-ramp — DESIGN.md §10.4) ---------- */
  --brxw-card-title-size: 2rem;
  --brxw-button-size: clamp(1.42rem, calc(0.001563 * (100vw - 36rem) + 1.42rem), 1.6rem);
  --brxw-badge-size: clamp(1.4rem, calc(0.008681 * (100vw - 36rem) + 1.4rem), 2.4rem);

  /* ---------- Measure ---------- */
  --brxw-text-width-s: 20ch;
  --brxw-text-width-m: 45ch;
  --brxw-text-width-l: 65ch;
  --brxw-title-width-s: 20ch;
  --brxw-title-width-m: 25ch;
  --brxw-title-width-l: 35ch;

  /* ---------- Fluid space scale (SP 360 → PC 1512, both ends measured) ---------- */
  --brxw-space-fluid-3xs: 0.4rem;
  --brxw-space-fluid-2xs: 0.8rem;
  --brxw-space-fluid-xs: clamp(1rem, calc(0.001736 * (100vw - 36rem) + 1rem), 1.2rem);
  --brxw-space-fluid-s: clamp(1.3rem, calc(0.002604 * (100vw - 36rem) + 1.3rem), 1.6rem);
  --brxw-space-fluid-m: clamp(1.6rem, calc(0.003472 * (100vw - 36rem) + 1.6rem), 2rem);
  --brxw-space-fluid-l: clamp(2rem, calc(0.006944 * (100vw - 36rem) + 2rem), 2.8rem);
  --brxw-space-fluid-xl: clamp(2.5rem, calc(0.013021 * (100vw - 36rem) + 2.5rem), 4rem);
  --brxw-space-fluid-2xl: clamp(3.1rem, calc(0.021701 * (100vw - 36rem) + 3.1rem), 5.6rem);
  --brxw-space-fluid-3xl: clamp(3.9rem, calc(0.03559 * (100vw - 36rem) + 3.9rem), 8rem);
  --brxw-space-fluid-4xl: clamp(4.9rem, calc(0.054688 * (100vw - 36rem) + 4.9rem), 11.2rem);
  --brxw-space-fluid-5xl: clamp(6.1rem, calc(0.085938 * (100vw - 36rem) + 6.1rem), 16rem);

  --brxw-space-3xs: var(--brxw-space-fluid-3xs);
  --brxw-space-2xs: var(--brxw-space-fluid-2xs);
  --brxw-space-xs: var(--brxw-space-fluid-xs);
  --brxw-space-s: var(--brxw-space-fluid-s);
  --brxw-space-m: var(--brxw-space-fluid-m);
  --brxw-space-l: var(--brxw-space-fluid-l);
  --brxw-space-xl: var(--brxw-space-fluid-xl);
  --brxw-space-2xl: var(--brxw-space-fluid-2xl);
  --brxw-space-3xl: var(--brxw-space-fluid-3xl);
  --brxw-space-4xl: var(--brxw-space-fluid-4xl);
  --brxw-space-5xl: var(--brxw-space-fluid-5xl);

  /* ---------- Page gutter ----------
     Header and footer both use 16 (SP) → 28 (PC). Off the global ramp at the
     mobile end, so it's clamped between the two comps. */
  --brxw-page-gutter: clamp(1.6rem, calc(0.010417 * (100vw - 36rem) + 1.6rem), 2.8rem);

  /* ---------- Semantic spacing ---------- */
  --brxw-content-gap: var(--brxw-space-l);
  --brxw-grid-gap: var(--brxw-space-l);
  --brxw-container-gap: var(--brxw-space-3xl);
  --brxw-section-space-horizontal: var(--brxw-space-l);
  --brxw-section-space-vertical: var(--brxw-space-2xl); /* measured 52–65 in the comps */
  --brxw-band-space-vertical: var(--brxw-space-4xl);

  /* ---------- Radius ---------- */
  --brxw-radius-xs: 0.4rem;
  --brxw-radius-s: 0.8rem;
  --brxw-radius-m: 1.2rem;
  --brxw-radius-l: 1.6rem;
  --brxw-radius-xl: 2rem;
  --brxw-radius-2xl: 3.2rem;
  --brxw-radius-full: 1e5px;
  --x-radius-pill: 0.5rem; /* vehicle pills — literal 5px in Figma */

  /* ---------- Elevation & borders ---------- */
  --shadow-primary: hsla(0, 0%, 0%, 0.25);
  --brxw-shadow-xs: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --brxw-shadow-s: 0 2px 2px var(--shadow-primary);
  --brxw-shadow-m: 0 2px 6px var(--shadow-primary);
  --brxw-shadow-l: 0 3px 12px var(--shadow-primary);
  --brxw-shadow-xl: 0 6px 48px var(--shadow-primary);

  --brxw-border-width-s: 1px;
  --brxw-border-width-m: 1.5px;

  --brxw-icon-s: 1.2rem;
  --brxw-icon-m: 1.8rem;
  --brxw-icon-l: 2.4rem;

  /* ---------- Layout ---------- */
  /*
   * Two container widths, and only two. See DESIGN.md §4.7.
   *   -width       the page frame: header, hero, CTA band, footer.
   *   -width-rail  every content section.
   * A section that invents its own width is a bug — it reads as misalignment
   * against its neighbours, which is what nine competing widths did here.
   */
  --brxw-container-width: 136.6rem;
  --brxw-container-width-rail: 116.8rem;
  --brxw-width-content-xl: 108rem;
  --brxw-width-content-l: 81rem;
  --brxw-width-content-m: 54rem;
  --brxw-min-screen-width: 360px;
  --brxw-max-screen-width: 1512px;

  --brxw-grid-1: minmax(0, 1fr);
  --brxw-grid-2: repeat(2, minmax(0, 1fr));
  --brxw-grid-3: repeat(3, minmax(0, 1fr));
  --brxw-grid-4: repeat(4, minmax(0, 1fr));
  --brxw-grid-1-1: minmax(0, 1fr) minmax(0, 1fr);
  --brxw-grid-1-2: minmax(0, 1fr) minmax(0, 2fr);

  /* ---------- Ratio ---------- */
  --brxw-ratio-square: 1;
  --brxw-ratio-landscape: 4 / 3;
  --brxw-ratio-classic: 3 / 2;
  --brxw-ratio-widescreen: 16 / 9;
  --brxw-ratio-hero: 1366 / 757;
  --brxw-ratio-coursemap: 1129 / 433;
  --brxw-ratio-card: 268 / 291;
  --brxw-ratio-default: var(--brxw-ratio-landscape);

  /* ---------- Motion ---------- */
  --brxw-transition-s: 0.2s;
  --brxw-transition-m: 0.35s;
  --brxw-transition-l: 0.5s;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

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

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--brxw-color-surface);
  color: var(--brxw-color-text-body);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-regular);
  line-height: var(--brxw-line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--brxw-color-text-heading);
  font-family: var(--brxw-font-heading);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
}

/* Visible focus everywhere — never remove without an equivalent replacement. */
:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

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

.container {
  width: min(
    100% - 2 * var(--brxw-section-space-horizontal),
    var(--brxw-container-width)
  );
  margin-inline: auto;
}

.container--rail {
  max-width: var(--brxw-container-width-rail);
}

.section {
  padding-block: var(--brxw-section-space-vertical);
}

.section--band {
  padding-block: var(--brxw-band-space-vertical);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* ==========================================================================
   Button
   Variants: DESIGN.md §5 · hover interaction: DESIGN.md §11
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brxw-space-3xs);
  min-height: 4.8rem; /* every variant renders at 48 in the comps */
  padding-inline: var(--brxw-space-s);
  overflow: hidden;
  border: var(--brxw-border-width-s) solid transparent;
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-button-size);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-flat);
  letter-spacing: var(--brxw-letter-spacing-title);
  text-decoration: none;
  transition: color var(--brxw-transition-l) ease 0.08s;
  text-transform: uppercase;
}

/* The sweep: an oversized ellipse parked off-canvas to the lower-left that
   slides up and across. Reverses on mouse-out for free.
   Reverse-engineered from the live JP site — DESIGN.md §11.

   GEOMETRY IS THE LIVE SITE'S, VERBATIM: 150% × 450% of the button, resting at
   left -200% / top 0, hovering to left -20% / top -100%. Eight button families
   on that site share this exact rule and apply it unchanged to buttons of every
   width — so on a narrow button the ellipse really is near-circular and the
   fill really does read as a corner wipe. That is the design, not a defect.
   Do not "correct" it by locking the ellipse's aspect ratio: it stops matching
   the reference.

   ONLY THE MOTION IS CONVERTED. Theirs animates `left` and `top`, which our
   motion rule forbids (layout on every frame). The transform below is exactly
   equivalent: ::before is 1.5W × 4.5H, so 120% of its own width is 1.8W —
   landing its left edge at -20% of the button — and -22.222% of its own height
   is -100% of the button height.

   REST POSITION stays on `left`, never a transform. If a transform held it, any
   failure to apply would park a full-bleed ellipse over the button and silently
   destroy the resting state (this happened once; DESIGN.md §11.3).

   LAYERING is theirs too: the ellipse is z-index 1 and the label z-index 2, both
   above the button's own background. No `isolation: isolate` and no negative
   z-index — `overflow: hidden` is what contains it. */
.btn::before {
  content: '';
  position: absolute;
  left: -200%;
  top: 0;
  z-index: 1;
  width: 150%;
  height: 450%;
  border-radius: 50%;
  transition: transform 0.65s ease;
}

/* The live site gates hover behind `min-width: 768px`. `(hover: hover)` is the
   accurate version of that intent: without it a touch tap leaves the button
   stuck in its hovered state until the next tap elsewhere. focus-visible stays
   outside the query so keyboards keep the affordance everywhere. */
@media (hover: hover) {
  .btn:hover::before {
    transform: translate(120%, -22.222%);
  }
}

.btn:focus-visible::before {
  transform: translate(120%, -22.222%);
}

.btn__label,
.btn__icon {
  position: relative;
  z-index: 2;
}

/* The exported glyph is 18.7 × 15.2 inside a 24px icon box. Rendering it at the
   box size scaled it up and thickened the stroke. */
.btn__icon {
  width: 1.87rem;
  height: auto;
  flex-shrink: 0;
  transition: filter var(--brxw-transition-l) ease 0.08s;
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.btn--primary {
  background: var(--brxw-color-primary);
  border-color: var(--brxw-color-primary);
  color: var(--brxw-color-text-invert);
}

.btn--primary::before {
  background: var(--brxw-color-white);
}

@media (hover: hover) {
  .btn--primary:hover {
    color: var(--brxw-color-primary);
  }
}

.btn--primary:focus-visible {
  color: var(--brxw-color-primary);
}

/* Header CTA: heading face, uppercase, wider inline padding, no icon. */
.btn--compact {
  padding-inline: var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-color: var(--brxw-color-primary);
  color: var(--brxw-color-text-invert);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  text-transform: uppercase;
}

.btn--compact::before {
  background: var(--brxw-color-white);
}

@media (hover: hover) {
  .btn--compact:hover {
    color: var(--brxw-color-primary);
  }
}

.btn--compact:focus-visible {
  color: var(--brxw-color-primary);
}

/* Hero secondary: transparent with a white hairline. */
.btn--outline {
  padding-inline: var(--brxw-space-l);
  background: transparent;
  border-color: var(--brxw-color-white);
  color: var(--brxw-color-text-invert);
  font-family: var(--brxw-font-heading);
  line-height: var(--brxw-line-height-body);
}

.btn--outline::before {
  background: var(--brxw-color-white);
}

@media (hover: hover) {
  .btn--outline:hover {
    color: var(--brxw-color-primary);
  }
}

.btn--outline:focus-visible {
  color: var(--brxw-color-primary);
}

/* Vehicles: white with a red hairline, red label. */
.btn--pill {
  padding: 10px 18px 10px 20px;
  background: var(--brxw-color-white);
  border-color: var(--brxw-color-primary);
  border-radius: var(--x-radius-pill, 0.5rem);
  color: var(--brxw-color-primary);
  font-family: var(--brxw-font-heading);
  line-height: var(--brxw-line-height-body);
  filter: drop-shadow(var(--brxw-shadow-s));
}

.btn--pill::before {
  background: var(--brxw-color-primary);
}

@media (hover: hover) {
  .btn--pill:hover {
    color: var(--brxw-color-text-invert);
  }
}

.btn--pill:focus-visible {
  color: var(--brxw-color-text-invert);
}
/* ==========================================================================
   Header — global, identical on all 15 pages.
   Figma: PC 1:2296 (1512 × 103.6) · SP 2:6386 (360 × 76)
   ========================================================================== */

/* These live on :root, not on .header, because the header is sticky and two other
   components have to pin below it — see --header-height. */
:root {
  /* Component tokens. The header's own padding doesn't sit on the global ramp —
     PC 19.8, SP 12.8 — so it gets its own clamp rather than a value that is wrong
     at one end. Inline padding is the shared --brxw-page-gutter. */
  --header-pad-block: clamp(1.28rem, calc(0.006076 * (100vw - 36rem) + 1.28rem), 1.98rem);
  --header-stamp: clamp(4.7rem, calc(0.014757 * (100vw - 36rem) + 4.7rem), 6.4rem);
  /* Menu gap is a literal 32 in the comp — it falls between space-l (28) and
     space-xl (40), so it gets its own token rather than being rounded to either. */
  --header-nav-gap: 3.2rem;

  /* The stamp is the tallest thing in the bar, so the header is exactly the stamp
     plus its own padding: 64 + 2×19.8 = 103.6 at 1512, which is the comp height.
     Deriving it rather than hard-coding keeps every sticky offset below in step
     with the header at any viewport — no JS measurement needed. */
  --header-height: calc(var(--header-stamp) + 2 * var(--header-pad-block));
}

/* Anchor targets would otherwise land underneath the sticky header. */
html {
  scroll-padding-top: var(--header-height);
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brxw-color-surface);
  padding: var(--header-pad-block) var(--brxw-page-gutter);
}

/* The SP frame carries a shadow; the PC frame does not. Applied below the
   breakpoint only, matching both. */
@media (max-width: 1023px) {
  .header {
    box-shadow: 0 2px 2px 2px hsla(0, 0%, 0%, 0.05);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--brxw-space-s);
  text-decoration: none;
  margin-inline-end: auto;
}

/* Figma renders the stamp in a square 64×64 box with object-fit:cover. The source
   file is 300×309, so `height:auto` made the header 2px taller than the comp. */
.header__stamp {
  width: var(--header-stamp);
  height: var(--header-stamp);
  object-fit: cover;
  flex-shrink: 0;
}

.header__wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--brxw-font-display);
  font-size: var(--brxw-text-2xl);
  line-height: var(--brxw-line-height-flat);
  color: var(--brxw-color-text-strong);
  white-space: nowrap;
}

.header__wordmark-name {
  font-weight: var(--brxw-font-weight-xbold);
}

.header__wordmark-kind {
  font-weight: var(--brxw-font-weight-regular);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.header__nav {
  display: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--header-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--brxw-space-2xs);
}

.nav__link {
  display: block;
  padding-block: var(--brxw-space-s);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-s);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-strong);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--brxw-transition-s) ease;
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--brxw-color-primary);
}

.nav__disclosure {
  display: grid;
  place-items: center;
  width: var(--brxw-icon-m);
  height: var(--brxw-icon-m);
  padding: 0;
  background: none;
  border: 0;
  color: var(--brxw-color-text-strong);
}

.nav__chevron {
  width: var(--brxw-icon-m);
  height: var(--brxw-icon-m);
  transition: transform var(--brxw-transition-s) ease;
}

.nav__item--open .nav__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Dropdown panel — Figma 1:3489 / 1:3495 / 1:3498
   Top-left corner is square so the panel reads as tucked under its trigger.
   -------------------------------------------------------------------------- */

.nav__menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  /* Rows carry their own padding, so no gap — it keeps the hover targets
     contiguous and stops the pointer falling into a dead strip between them. */
  gap: 0;
  width: max-content;
  min-width: 21.6rem; /* comp panels are 216–263 wide; the short ones look pinched below this */
  margin: 0;
  padding: var(--brxw-space-2xs);
  list-style: none;
  background: var(--brxw-color-surface);
  border-start-start-radius: 0;
  border-start-end-radius: var(--brxw-radius-s);
  border-end-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-s);
  /* Comp is `0 2px 2.5px rgba(0,0,0,.05)`, which is invisible against the hero
     photo the panel opens over. Stepped up to the shadow-m token. */
  filter: drop-shadow(var(--brxw-shadow-m));

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--brxw-transition-s) ease,
    transform var(--brxw-transition-s) ease,
    visibility var(--brxw-transition-s);
}

.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item--open > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The comp gives rows 3px of padding, which is far too small a hit target.
   Opened up to the ramp: 8 block / 12 inline. */
.nav__menu-link {
  display: block;
  padding: var(--brxw-space-2xs) var(--brxw-space-xs);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-s);
  font-weight: var(--brxw-font-weight-regular);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-strong);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--brxw-transition-s) ease,
    background-color var(--brxw-transition-s) ease;
}

.nav__menu-link:hover,
.nav__menu-link:focus-visible {
  background: var(--brxw-color-surface-alt);
  color: var(--brxw-color-primary);
}

/* --------------------------------------------------------------------------
   Hamburger — bars match the exported SVG exactly: 20 × 2, 5px apart.
   Built from a box-shadow stack rather than an image so it can morph to a
   close icon, which the design does not provide.
   -------------------------------------------------------------------------- */

.header__toggle {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  margin-inline-end: calc(var(--brxw-space-2xs) * -1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--brxw-color-text-strong);
}

.header__bars,
.header__bars::before,
.header__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition:
    transform var(--brxw-transition-s) ease,
    opacity var(--brxw-transition-s) ease;
}

.header__bars::before,
.header__bars::after {
  content: '';
  position: absolute;
}

.header__bars::before {
  transform: translateY(-7px);
}

.header__bars::after {
  transform: translateY(7px);
}

.header--open .header__bars {
  opacity: 0;
}

.header--open .header__bars::before {
  opacity: 1;
  transform: rotate(45deg);
}

.header--open .header__bars::after {
  opacity: 1;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile drawer — [INVENTED], no Figma design. DESIGN.md §12.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .header--open .header__nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--brxw-space-l);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: var(--brxw-space-l) var(--brxw-page-gutter) var(--brxw-space-2xl);
    background: var(--brxw-color-surface);
    box-shadow: 0 8px 8px hsla(0, 0%, 0%, 0.05);
  }

  .header--open .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header--open .nav__item {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  }

  .header--open .nav__link {
    flex: 1;
    padding-block: var(--brxw-space-m);
    font-size: var(--brxw-text-l);
  }

  /* In the drawer the panel is an inline accordion, not an overlay. */
  .header--open .nav__menu {
    position: static;
    flex-basis: 100%;
    padding: 0 0 var(--brxw-space-m) var(--brxw-space-m);
    filter: none;
    transform: none;
  }

  .header--open .nav__item:not(.nav__item--open) > .nav__menu {
    display: none;
  }

  .header--open .nav__menu-link {
    padding-block: var(--brxw-space-xs);
    font-size: var(--brxw-text-m);
  }

  .header--open .header__action {
    align-self: stretch;
    text-align: center;
  }

  body.has-drawer-open {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .header {
    --header-nav-gap: 2.4rem;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
  }

  .header__toggle {
    display: none;
  }
}

@media (min-width: 1200px) {
  .header {
    --header-nav-gap: 3.2rem;
  }
}
/* ==========================================================================
   CTA band — full-bleed dark stripes, on every page.
   Figma: PC 1:2212 (1512 × 341 visible) · SP 2:6365 (360 × 451)
   ========================================================================== */

.cta-band {
  position: relative;
  /* `clip` rather than `hidden`: it keeps the mascot from causing horizontal
     scroll while still letting it spill downward into the footer. `hidden`
     would force the vertical axis to clip too. */
  overflow-x: clip;
  padding-block: var(--brxw-space-3xl) var(--brxw-space-2xl); /* comp 81 / 66 */
  padding-inline: var(--brxw-page-gutter);

  /* Measured off the render: 104.8°, 19.22px stripes. DESIGN.md §7. */
  background: repeating-linear-gradient(
    104.8deg,
    var(--brxw-color-surface-dark) 0 1.922rem,
    var(--brxw-color-surface-dark-alt) 1.922rem 3.844rem
  );
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
  width: 100%;
  max-width: var(--brxw-container-width);
  margin-inline: auto;
  text-align: center;
}

.cta-band__title {
  max-width: 62.8rem;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-invert);
}

.cta-band__lead {
  max-width: 56.6rem;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-regular);
  line-height: var(--brxw-line-height-mid);
  color: var(--brxw-color-text-invert);
}

.cta-band__action {
  margin-block-start: var(--brxw-space-m);
}

/* Overflows the band bottom by design — it laps into the footer. */
.cta-band__mascot {
  position: absolute;
  inset-inline-end: var(--brxw-page-gutter);
  bottom: -5.5rem;
  width: clamp(14.8rem, calc(0.052083 * (100vw - 36rem) + 14.8rem), 20.8rem);
  height: auto;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .cta-band {
    padding-block: 8.1rem 6.6rem;
  }

  .cta-band__mascot {
    bottom: -12rem;
  }
}
/* ==========================================================================
   Footer — global, identical on all 15 pages.
   Figma: PC 1:2213 (1512 × 411) · SP 2:6369 (360 × 953)
   ========================================================================== */

.footer {
  /* Off-ramp measurements, clamped between the two comps rather than rounded to a
     token that would be wrong at one end. SP → PC:
       link gap   8 → 14      column gap  25 → 53      stamp  121 → 118 */
  --footer-link-gap: clamp(0.8rem, calc(0.005208 * (100vw - 36rem) + 0.8rem), 1.4rem);
  --footer-col-gap: clamp(2.5rem, calc(0.024306 * (100vw - 36rem) + 2.5rem), 5.3rem);
  --footer-stamp: clamp(11.8rem, 12.1rem - 0.26vw, 12.1rem);

  background: var(--brxw-color-surface);
  /* Figma has NO bottom padding — the copyright sits flush at the frame edge,
     which reads as broken in a browser. space-l is the smallest step that both
     looks deliberate and lands the total on the comp's 411. */
  padding-block: var(--brxw-space-3xl) var(--brxw-space-l);
  padding-inline: var(--brxw-page-gutter);
}

.footer__inner,
.footer__bottom {
  width: 100%;
  max-width: var(--brxw-container-width);
  margin-inline: auto;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
}

/* --------------------------------------------------------------------------
   Brand block
   -------------------------------------------------------------------------- */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
}

.footer__stamp {
  width: var(--footer-stamp);
  height: var(--footer-stamp);
  object-fit: cover;
  flex-shrink: 0;
}

.footer__name {
  font-family: var(--brxw-font-display);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.footer__name-strong {
  font-weight: var(--brxw-font-weight-bold);
}

.footer__name-kind {
  font-weight: var(--brxw-font-weight-medium);
}

.footer__address {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  font-style: normal;
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

/* Tight run: no gaps between label, value and note — line-height alone. */
.footer__hours-block {
  max-width: var(--brxw-width-content-m);
}

.footer__hours {
  margin: 0;
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-strong);
}

.footer__hours-label {
  font-weight: var(--brxw-font-weight-semibold);
}

.footer__hours-value {
  margin: 0;
}

.footer__hours-note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-strong);
}

/* --------------------------------------------------------------------------
   Link columns
   -------------------------------------------------------------------------- */

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--footer-col-gap);
}

.footer__col-title {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-strong);
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
  margin-block-start: var(--footer-link-gap);
}

.footer__link {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  font-weight: var(--brxw-font-weight-regular);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
  text-decoration: none;
  transition: color var(--brxw-transition-s) ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--brxw-color-primary);
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-xl); /* 39.59 in the comp */
  margin-block-start: var(--brxw-space-l);
}

.footer__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
}

.footer__copyright {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Desktop — brand left, four link columns right
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--brxw-space-xl);
  }

  .footer__brand {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'stamp identity'
      'stamp hours';
    align-content: start;
    column-gap: var(--brxw-space-xl);
    row-gap: var(--brxw-space-xl);
    flex: 1;
  }

  .footer__stamp {
    grid-area: stamp;
  }
  .footer__identity {
    grid-area: identity;
  }
  .footer__hours-block {
    grid-area: hours;
  }

  .footer__links {
    flex-direction: row;
    gap: var(--footer-col-gap);
    flex-shrink: 0;
  }
}
/* ==========================================================================
   Interior page hero — photo band with the title beneath.
   Figma: pre-application 1:6418, FAQ, Access & Shuttle
   ========================================================================== */

.page-hero {
  padding-block: 0 var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

/* No title beneath the photo — the next section supplies the gap. */
.page-hero--image-only {
  padding-block-end: 0;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width);
  margin-inline: auto;
}

.page-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1366 / 572;
  object-fit: cover;
  border-radius: var(--brxw-radius-m);
}

@media (max-width: 767px) {
  .page-hero__image {
    aspect-ratio: 328 / 383;
  }
}

.page-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-s);
  max-width: 82.2rem; /* comp copy column is 822 */
}

.page-hero__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.page-hero__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.page-hero__action {
  margin-block-start: var(--brxw-space-s);
}

@media (max-width: 1023px) {
  .page-hero {
    padding-block-start: var(--brxw-space-xl);
  }
}
/* ==========================================================================
   Anchor links under the hero, hairline-separated. Figma: 1:3471 (779 wide,
   centred; 32px tall rows, 18px each side of each separator)
   ========================================================================== */

.jump-nav {
  padding-block: var(--brxw-space-2xl) 0;
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
  padding-block-end: var(--brxw-space-l);

}

ul.jump-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Hairline between items, never before the first or after a wrapped row. */
.jump-nav__item + .jump-nav__item .jump-nav__link {
  border-inline-start: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
}

.jump-nav__link {
  display: block;
  padding-inline: var(--brxw-space-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-primary);
  text-decoration: none;
  transition: color var(--brxw-transition-s) ease;
}

.jump-nav__link:hover,
.jump-nav__link:focus-visible {
  color: var(--brxw-color-text-heading);
}

@media (max-width: 1023px) {
  .jump-nav {
    display: none;
  }
}
/* ==========================================================================
   Text beside an image. Used down the programme detail pages, alternating
   sides. Figma: 1:2835 (Regular Car), 1:5676 (Motorcycle)
   ========================================================================== */

.text-image {
  padding-block: var(--brxw-space-3xl); /* comp band padding is 80 */
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

/* Closes the page opening — the hero photo above it supplies no bottom gap,
   and the comp runs the two together as one block. */
.text-image--flush {
  padding-block-end: 0;
}

/* Banded variants keep each component instance semantically scoped instead of
   relying on page-specific id overrides. DESIGN.md §4.1. */
.text-image--muted {
  background: var(--brxw-color-surface-muted);
}

.text-image--neutral {
  background: var(--brxw-color-neutral-50);
}

.text-image--alt {
  background: var(--brxw-color-surface-alt);
}

.text-image__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.text-image__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-s);
}

.text-image__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.text-image__subtitle {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.text-image__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.text-image__item,
.text-image__para {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.text-image__footnote {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

.text-image__action {
  margin-block-start: var(--brxw-space-2xs);
}

.text-image__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .text-image__inner {
    flex-direction: row;
    /* Comp puts copy and photo on a shared top edge, not on a shared centre. */
    align-items: flex-start;
    gap: var(--brxw-space-2xl);
  }

  .text-image--reversed .text-image__inner {
    flex-direction: row-reverse;
  }

  .text-image__body {
    flex: 1 1 0;
  }

  /* Comp: 667 copy + 32 + 667 image in the opening block, 667 + 32 + 589 in
     the English Plan block. Both are "copy takes the rest", so the image keeps
     its own width and the text column absorbs the difference. */
  .text-image__image {
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
  }
}
/* ==========================================================================
   "Our Facilities" — alternating copy/photo rows.
   Figma: 1:3425 (copy 455, photo 531, rows 300 tall, 79 between rows)
   ========================================================================== */

.facilities {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.facilities__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-3xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.facilities__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 62.4rem; /* comp lead column is 624 */
}

.facilities__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.facilities__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.facilities__list {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-3xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.facility-row {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
}

.facility-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
}

.facility-row__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.facility-row__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.facility-row__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .facility-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--brxw-space-3xl);
  }

  .facility-row--reversed {
    flex-direction: row-reverse;
  }

  .facility-row__body {
    flex: 0 1 45.5rem; /* comp copy column is 455 */
  }

  .facility-row__image {
    flex: 0 0 53.1rem; /* comp photo is 531 */
    /* min-width: auto on a flex item resolves to the image's intrinsic width, which
       is a floor flex-basis cannot override — a 2x file would otherwise widen the
       photo and crush the copy column beside it. */
    min-width: 0;
  }
}
/* ==========================================================================
   Full-bleed photo band. Figma: 1:3236 (1512 × 572)
   ========================================================================== */

.image-band {
  /* Deliberately no page gutter — the photo runs edge to edge. */
  background: var(--brxw-color-surface);
}

/* One class for both the <img> and the <video> form of the band — the box is the
   same either way, and the video's poster is the very image it replaces. */
.image-band__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1512 / 572;
  object-fit: cover;
}
/* ==========================================================================
   "Training Vehicles" — two scrollable strips of vehicle cards.
   Figma: 1:3238 … 1:3389 (card 314 wide, photo area 213 tall, gap 10)
   ========================================================================== */

.vehicle-showcase {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.vehicle-showcase__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.vehicle-showcase__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 66.2rem; /* comp lead column is 662 */
}

.vehicle-showcase__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.vehicle-showcase__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   A group: title, subtitle, card track, link
   -------------------------------------------------------------------------- */

.vehicle-group {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
  scroll-margin-block-start: var(--brxw-space-3xl);
}

.vehicle-group__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--brxw-space-l);
}

.vehicle-group__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.vehicle-group__subtitle {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

/* --------------------------------------------------------------------------
   The track. The comp runs the motorcycle row off the right edge; a scrolling
   strip is what that means. The cars fit, so theirs never scrolls.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Prev / next
   -------------------------------------------------------------------------- */

.carousel-controls {
  display: flex;
  flex-shrink: 0;
  gap: var(--brxw-space-2xs);
}

/* `display: flex` would otherwise beat the UA stylesheet's `[hidden] {
   display: none }`, so a button JS has hidden would still be painted. */
.carousel-button[hidden] {
  display: none;
}

.carousel-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-s) solid var(--brxw-color-primary);
  border-radius: 50%;
  color: var(--brxw-color-primary);
  cursor: pointer;
  transition:
    background-color var(--brxw-transition-s) ease,
    color var(--brxw-transition-s) ease,
    opacity var(--brxw-transition-s) ease;
}

@media (hover: hover) {
  .carousel-button:not(:disabled):hover {
    background: var(--brxw-color-primary);
    color: var(--brxw-color-text-invert);
  }
}

.carousel-button:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

/* Kept in the layout at the end of the track so the row does not reflow. */
.carousel-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-button__icon {
  width: 1.87rem;
  height: auto;
}

.carousel-button__icon--prev {
  transform: rotate(180deg);
}

ul.vehicle-track {
  /*
   * Cards are sized from how many should be visible, not from a fixed width,
   * so a row always fills the rail exactly instead of leaving a ragged gap.
   * A row with more cards than fit still overflows — which is what gives the
   * motorcycle row its peek at the next card.
   */
  --vehicle-cards-in-view: 1;

  display: flex;
  gap: var(--brxw-space-2xs);
  margin: var(--brxw-space-l) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;

  /* Cards keep their width; the strip scrolls instead of squashing them.
     The native scrollbar is hidden — the prev / next controls are the
     affordance, and the track still scrolls by trackpad, touch, arrow keys and
     those buttons. `overflow-x: auto` stays: it is what makes it scrollable at
     all. */
  scrollbar-width: none;
}

ul.vehicle-track::-webkit-scrollbar {
  display: none;
}

/* Drag-to-scroll, added by carousel.js on mouse pointers only. The grab cursor
   is the affordance that the row can be pulled. */
@media (hover: hover) and (pointer: fine) {
  ul.vehicle-track {
    cursor: grab;
  }

  ul.vehicle-track.is-dragging {
    cursor: grabbing;
    /* A drag must not leave a trail of selected label text behind it. */
    user-select: none;
  }
}

/* The track is focusable so it can be scrolled with the arrow keys; it needs a
   visible ring like any other focus target. */
ul.vehicle-track:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 4px;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  /* min-width: 0 for the same reason as the stack cards — the vehicle photos
     are wider than the card and would otherwise set the minimum. */
  flex: 0 0
    calc(
      (100% - (var(--vehicle-cards-in-view) - 1) * var(--brxw-space-2xs)) /
        var(--vehicle-cards-in-view)
    );
  min-width: 0;
  scroll-snap-align: start;
  background: var(--brxw-color-surface-alt);
  border-radius: var(--brxw-radius-s);
  overflow: hidden;
}

/* The four car photos used to carry Figma's own #EEE rounded-rect stroke baked into
   their pixels, which is why this rule needed `transform: scale(1.01)` to push the
   baked edge out of sight. The stroke has been erased from the files, so the border
   below is now the only one drawn and the scale hack is gone. Don't reintroduce it —
   if a border reappears, the image is the thing to fix. */
.vehicle-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* comp photo area is 213 */
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  /* Must match .vehicle-card's radius. The card clips at radius-s, so a larger
     radius here doesn't round the corner more — it just gets sliced by the card,
     leaving a corner that is neither curve. The comp's own baked stroke measured a
     6.4px corner, and radius-s (8) is the token nearest it. */
  border-start-start-radius: var(--brxw-radius-s);
  border-start-end-radius: var(--brxw-radius-s);
  /* The <img> is a square-cornered box painted inside this rounded one. Without
     clipping it here, its corners sit on top of the curve. The card's own
     overflow:hidden cannot do this — it clips the card, not the media's border. */
  overflow: hidden;
}

.vehicle-card__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.vehicle-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-3xs);
  padding: var(--brxw-space-m) var(--brxw-space-l) var(--brxw-space-l);
}

.vehicle-card__label {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-xs);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-primary);
}

.vehicle-card__name {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   Group link
   -------------------------------------------------------------------------- */

.vehicle-group__action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--brxw-space-2xs);
  margin-block-start: var(--brxw-space-m);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-primary);
  text-decoration: none;
}

.vehicle-group__action-icon {
  width: 1.87rem;
  height: auto;
  transition: transform var(--brxw-transition-s) ease;
}

@media (hover: hover) {
  .vehicle-group__action:hover .vehicle-group__action-icon {
    transform: translateX(0.4rem);
  }
}

.vehicle-group__action:focus-visible .vehicle-group__action-icon {
  transform: translateX(0.4rem);
}

/* --------------------------------------------------------------------------
   How many cards are in view. Four at full width fills the 1168 rail exactly:
   (1168 - 3 x 8) / 4 = 286 per card.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  ul.vehicle-track {
    --vehicle-cards-in-view: 2;
  }
}

@media (min-width: 900px) {
  ul.vehicle-track {
    --vehicle-cards-in-view: 3;
  }
}

@media (min-width: 1200px) {
  ul.vehicle-track {
    --vehicle-cards-in-view: 4;
  }
}
/* ==========================================================================
   "Community Activities" — cards that pin and stack as the page scrolls.
   Figma: 1:3275 (card 1286 x 507: photo 760, copy 526)
   ========================================================================== */

.sticky-stack {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.sticky-stack__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.sticky-stack__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 83.6rem; /* comp lead column is 836 */
}

.sticky-stack__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.sticky-stack__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.sticky-stack__list {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-card {
  position: sticky;
  /* Clears the sticky header — without the offset the cards pin underneath it. */
  top: calc(var(--header-height) + var(--brxw-space-xl));
  display: flex;
  flex-direction: column;
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-m);
  overflow: hidden;
}

.stack-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 507;
  object-fit: cover;
}

.stack-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  padding: var(--brxw-space-xl);
}

.stack-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.stack-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

@media (min-width: 1024px) {
  ul.sticky-stack__list {
    gap: var(--brxw-space-xl);
  }

  .stack-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 50.7rem; /* comp card is 507 tall */
  }

  /* min-width: 0 lets large source images shrink to the comp's proportional
     column instead of using their intrinsic width as the flex minimum. */
  .stack-card__image {
    flex: 0 0 59.1%; /* comp ratio: 760px photo / 1286px card */
    width: 59.1%;
    min-width: 0;
    height: auto;
    align-self: stretch;
    aspect-ratio: 760 / 507;
  }

  .stack-card__body {
    flex: 1 1 40.9%;
    min-width: 0;
    justify-content: center;
    padding: var(--brxw-space-3xl);
  }
}
/* ==========================================================================
   Data table — red header row, striped body.
   Figma: pre-application 1:6433 · shuttle timetables
   ========================================================================== */

/* Wide tables scroll inside their own region rather than pushing the page
   sideways. tabindex makes the overflow reachable by keyboard. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The scroll region sits on a cream band; the table itself is white, so the
     wrapper carries white too or the gap around it shows through. */
  background: var(--brxw-color-surface);
}

.table-scroll:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.table th,
.table td {
  padding: var(--brxw-space-2xs) var(--brxw-space-xs);
  text-align: start;
  vertical-align: middle;
  /* neutral-300, not -100: the comp's rules are #b9b9b9, and at -100 (#e5e5e5)
     the grid all but disappeared against the shaded columns. */
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-300);
}

.table thead th {
  background: var(--brxw-color-primary);
  border-color: var(--brxw-color-primary);
  color: var(--brxw-color-text-invert);
  font-weight: var(--brxw-font-weight-bold);
  text-align: center;
  /* Column headings wrap. They were `nowrap`, which is why a `<br/>` had been
     put in the JSON to force a break — and that field is escaped, so it
     printed as text. Wrapping is a presentation concern; it belongs here, not
     in the content. See CLAUDE.md on escaping. */
  white-space: normal;
  min-width: 14rem;
}

.table tbody th {
  font-weight: var(--brxw-font-weight-semibold);
  white-space: nowrap;
}

/* The comp shades COLUMNS, not rows — every row is white and every other stop
   column is grey, which is what lets the eye follow one stop down the table.
   This was built as row zebra striping, which reads as the wrong table.
   `2n+3` is the third cell onward, every other one: the label column and the
   first stop stay white, and a two-column table (the pre-application field
   list, which the comp leaves entirely white) has no third cell to match. */
.table tbody td:nth-child(2n + 3) {
  background: var(--brxw-color-neutral-50);
}

/* Each schedule group is ruled off with a darker line than the row rules. */
.table tbody .table__row--group > * {
  border-block-start-color: var(--brxw-color-neutral-950);
}
/* ==========================================================================
   "Important Notes" — bullet list with a photo alongside.
   Figma: 1:6745
   ========================================================================== */

.notes {
  padding-block: var(--brxw-space-3xl) var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.notes__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.notes__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-s);
  flex: 1;
  min-width: 0;
}

.notes__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.notes__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* Not display:flex — flex items have no ::marker, which drops the bullets.
   Typed as ul.* to outrank the reset's `ul[class] { list-style: none }`.
   Same pattern as feature-grid.css and programs-page.css. */
ul.notes__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.notes__item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* The gap the flex column used to provide. */
.notes__item + .notes__item {
  margin-block-start: var(--brxw-space-2xs);
}

.notes__action {
  margin-block-start: var(--brxw-space-s);
}

.notes__image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--notes-image-ratio);
  object-fit: cover;
  border-radius: var(--brxw-radius-m);
}

@media (min-width: 1024px) {
  .notes__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--brxw-space-2xl);
  }

  .notes__image {
    flex: 0 0 min(var(--notes-image-width), 53.8%);
    width: min(var(--notes-image-width), 53.8%);
    /* See facilities.css — a flex item's automatic minimum is the image's
       intrinsic width, which overrides the basis above once the file is 2x. */
    min-width: 0;
  }
}
/* ==========================================================================
   Access & Shuttle — location, travel panels, shuttle routes.
   Figma: 1:6133
   ========================================================================== */

.location,
.travel {
  padding-block: var(--brxw-space-3xl) var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.travel {
  padding-block: var(--brxw-space-2xl);
}

.location__inner,
.travel__inner {
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Location
   -------------------------------------------------------------------------- */

.location__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
}

.location__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-s);
  flex: 1;
  min-width: 0;
}

.location__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.location__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.location__action {
  margin-block-start: var(--brxw-space-2xs);
}

.location__address {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.location__address-link {
  color: var(--brxw-color-primary);
  font-weight: var(--brxw-font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Click-to-load map. The still ships with the page; the live iframe is only
   created once the visitor asks for it. See public/assets/js/map-embed.js.
   -------------------------------------------------------------------------- */

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 667 / 375;
  overflow: hidden;
  background: var(--brxw-color-surface-muted);
  border-radius: var(--brxw-radius-m);
}

.map-embed__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same trap as the carousel controls: `display: flex` beats the UA
   stylesheet's `[hidden] { display: none }`, so without this the button is
   painted with JavaScript off and does nothing when clicked. */
.map-embed__button[hidden] {
  display: none;
}

/* Covers the still so the whole panel is the click target. */
.map-embed__button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--brxw-space-l);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.map-embed__button-label {
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
  transition: transform var(--brxw-transition-s) ease;
}

@media (hover: hover) {
  .map-embed__button:hover .map-embed__button-label {
    transform: translateY(-0.2rem);
  }
}

.map-embed__button:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

.map-embed__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .location__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--brxw-grid-gap);
  }

  /* Comp: two equal 667 columns with a 32 gap. */
  .location__map {
    flex: 0 0 calc(50% - var(--brxw-grid-gap) / 2);
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Travel panels
   -------------------------------------------------------------------------- */

.travel__title,
.shuttle__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.travel__panels {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-l);
  margin-block-start: var(--brxw-space-2xl);
}

@media (min-width: 768px) {
  .travel__panels {
    grid-template-columns: var(--brxw-grid-2);
    /* Stretch: two ribbon panels side by side have to end level. */
  }
}

/* Ribbon-headed panel, shared by the travel columns and the route lists.
   The comp's header tapers at its right edge; approximated with an enlarged
   bottom-end radius rather than a background image. */
.panel {
  background: var(--brxw-color-neutral-50);
  border-radius: var(--brxw-radius-s);
  overflow: hidden;
}

.panel__label {
  width: fit-content;
  min-width: 24rem;
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-end-end-radius: var(--brxw-radius-xl);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
  text-align: center;
}

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  padding: var(--brxw-space-l);
}

.panel__entry,
.shuttle__step,
.panel__note,
.shuttle__closing {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.panel__term {
  font-weight: var(--brxw-font-weight-bold);
}

/* --------------------------------------------------------------------------
   Shuttle routes
   -------------------------------------------------------------------------- */

.shuttle {
  padding-block: var(--brxw-space-2xl) 0;
  background: var(--brxw-color-surface);
}

.shuttle__title {
  padding-inline: var(--brxw-page-gutter);
}

.shuttle__route {
  padding-block: var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
}

/* The comp alternates the second route onto the cream band. */
.shuttle__route--alt {
  background: var(--brxw-color-surface-alt);
}

#kichijoji-route .panel {
  background: var(--brxw-color-surface);
}

.shuttle__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.shuttle__head {
  text-align: center;
}

.shuttle__route-name {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-3xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.shuttle__route-note {
  margin-block-start: var(--brxw-space-2xs);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.shuttle__steps {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-3xs);
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
}

.shuttle__closing {
  margin-block-start: var(--brxw-space-s);
  font-weight: var(--brxw-font-weight-bold);
}

.shuttle__timetable {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  margin-block-start: var(--brxw-space-l);
}

.shuttle__timetable-head {
  text-align: center;
}

.shuttle__timetable-title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.shuttle__timetable-sub,
.shuttle__timetable-note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.shuttle__timetable-note {
  text-align: center;
}

/* Times read better centred; the qualifier column stays left-aligned. */
.shuttle__timetable .table td {
  text-align: center;
}
/* ==========================================================================
   Contact intro — bordered panel with the mascot alongside.
   Figma: 1:6790 (template structure only; values from DESIGN.md)
   ========================================================================== */

.contact-intro {
  padding-block: var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.contact-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.contact-intro__panel {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  width: 100%;
  padding: var(--brxw-space-2xl);
  border: var(--brxw-border-width-s) solid var(--brxw-color-primary);
  border-radius: var(--brxw-radius-m);
}

.contact-intro__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-primary);
}

.contact-intro__lead,
.contact-intro__body,
.contact-intro__phone,
.contact-intro__note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.contact-intro__tel {
  color: var(--brxw-color-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--brxw-transition-s) ease;
}

.contact-intro__tel:hover,
.contact-intro__tel:focus-visible {
  color: var(--brxw-color-primary);
}

.contact-intro__hours,
.contact-intro__note {
  font-weight: var(--brxw-font-weight-bold);
}

.contact-intro__mascot {
  width: clamp(20rem, 40vw, 39.2rem);
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .contact-intro__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--brxw-space-2xl);
  }

  .contact-intro__panel {
    flex: 1;
    /* The comp insets the copy well inside the border — 99 left, 40 block. */
    padding: var(--brxw-space-2xl) var(--brxw-space-3xl);
  }
}
/* ==========================================================================
   Form — cream band, stacked fields.
   Figma: 1:6799 / textField 1:6806 (template structure; DESIGN.md values)

   The template's own values are discarded per CLAUDE.md: Noto Sans JP, a
   #555554 label and a #fafafa field border that is invisible against the cream
   band it sits on.
   ========================================================================== */

.form-band {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.form-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

/*
 * The form itself is narrower than the rail — 890 in the comp — because
 * full-rail input fields are unusable. That is a measure, not a container: the
 * section still sits on the rail like every other, so a future reader does not
 * read this as a rogue container width. See DESIGN.md §4.7.
 */
.form {
  width: 100%;
  max-width: 89rem;
  margin-inline: auto;
}

.form-band__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s); /* comp: fields sit 93 apart at 77 tall → 16 */
  width: 100%;
}

.form__group {
  margin: 0;
  padding: 0;
  border: 0;
}

.form__legend {
  padding: 0;
  margin-block-end: var(--brxw-space-2xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--brxw-letter-spacing-title);
  color: var(--brxw-color-text-heading);
}

.form__rows {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--brxw-space-2xs); /* the Name pair is 8 apart in the comp */
  row-gap: var(--brxw-space-s);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
  flex: 1 1 100%;
}

.form__label {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--brxw-letter-spacing-title);
  color: var(--brxw-color-text-heading);
}

.form__control {
  width: 100%;
  padding: var(--brxw-space-xs) var(--brxw-space-s);
  background: var(--brxw-color-surface);
  /* Comp uses #fafafa, which disappears against the cream band. */
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-mid);
  color: var(--brxw-color-text-heading);
  transition: border-color var(--brxw-transition-s) ease;
}

.form__control::placeholder {
  color: var(--brxw-color-neutral-600);
}

.form__control:hover {
  border-color: var(--brxw-color-neutral-200);
}

.form__control:focus {
  border-color: var(--brxw-color-primary);
  outline: none;
}

.form__control:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

.form__control--area {
  min-height: 11rem; /* comp textarea is 110 */
  resize: vertical;
}

.form__submit {
  align-self: center;
  margin-block-start: var(--brxw-space-2xl);
}

@media (min-width: 768px) {
  .form__field--half {
    flex: 1 1 calc(50% - var(--brxw-space-2xs));
  }
}
/* ==========================================================================
   Enrollment support band — full-bleed red stripes.
   Figma: 1:2324 (1512 × 223), content 1164 wide at y = 44
   ========================================================================== */

.support-band {
  padding-block: var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);

  /* Same construction as the CTA band, in the brand red. DESIGN.md §6 №27. */
  background: repeating-linear-gradient(
    104.8deg,
    var(--brxw-color-primary) 0 1.922rem,
    var(--brxw-color-primary-alt) 1.922rem 3.844rem
  );
}

.support-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.support-band__icon {
  flex-shrink: 0;
  width: 10.2rem;
  height: auto;
}

.support-band__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
}

.support-band__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-invert);
}

.support-band__para {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.support-band__action {
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .support-band__inner,
  .support-band__body {
    align-items: center;
  }

  .support-band__body {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .support-band__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--brxw-space-2xl);
  }

  .support-band__body {
    flex: 1 1 auto;
  }
}
/* ==========================================================================
   "Choose the English Support That Fits You" — lead, then photo beside a card.
   Figma: 1:2337 (photo 599, card 589, gap 97 in a 1286 row)
   ========================================================================== */

.plan-choice {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.plan-choice__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.plan-choice__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 69.7rem; /* comp lead column is 697 */
}

.plan-choice__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.plan-choice__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.plan-choice__columns {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-2xl);
  align-items: stretch;
}

.plan-choice__image {
  width: 100%;
  height: 100%;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

.plan-card-wide {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  padding: var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

.plan-card-wide__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.plan-card-wide__para {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.plan-card-wide__emphasis {
  font-weight: var(--brxw-font-weight-bold);
}

@media (min-width: 1024px) {
  .plan-choice__columns {
    grid-template-columns: var(--brxw-grid-2);
  }
}
/* ==========================================================================
   "Support After You Get Your License" — photo cards with a ribbon badge.
   Figma: 1:2318/1:2319 (photo 600 × 299) + 1:2307/1:2308 (panel 600 × 230)
   ========================================================================== */

.badged-cards {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.badged-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.badged-cards__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 69.7rem; /* comp lead column is 697 */
}

.badged-cards__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.badged-cards__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.badged-cards__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badged-card {
  display: flex;
  flex-direction: column;
}

.badged-card__media {
  position: relative;
  line-height: 0; /* no descender gap between the photo and the panel */
}

.badged-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 299;
  object-fit: cover;
  border-start-start-radius: var(--brxw-radius-s);
  border-start-end-radius: var(--brxw-radius-s);
}

/* Ribbon over the photo's top-right corner. */
.badged-card__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-start-end-radius: var(--brxw-radius-s);
  border-end-start-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.badged-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  flex: 1;
  padding: var(--brxw-space-xl);
  background: var(--brxw-color-surface-muted);
  border-end-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-s);
}

.badged-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.badged-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (min-width: 768px) {
  ul.badged-cards__list {
    grid-template-columns: var(--brxw-grid-2);
  }
}
/* ==========================================================================
   FAQ — accordion list with a Categories box alongside.
   Figma: 1:6343
   ========================================================================== */

.faq {
  padding-block: var(--brxw-space-2xl) var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.faq__main {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-3xl);
  flex: 1;
  min-width: 0;
}

.faq__group {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  /* Anchored from the Categories box — keep the heading clear of the header. */
  scroll-margin-block-start: var(--brxw-space-3xl);
}

.faq__group-title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Accordion item — native <details>
   -------------------------------------------------------------------------- */

.faq-item {
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-s);
  background: var(--brxw-color-surface);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brxw-space-l);
  padding: var(--brxw-space-s) var(--brxw-space-l);
  cursor: pointer;
  list-style: none;
}

/* Safari renders a disclosure triangle without this. */
.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: -2px;
  border-radius: var(--brxw-radius-s);
}

.faq-item__text {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-mid);
  color: var(--brxw-color-text-strong);
}

/* Plus that becomes a cross when open — drawn from two bars so it can rotate
   rather than swapping glyphs. */
.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 2px;
  background: var(--brxw-color-text-invert);
  transform: translate(-50%, -50%);
  transition: transform var(--brxw-transition-s) ease;
}

.faq-item__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item[open] .faq-item__toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-item__answer {
  padding: 0 var(--brxw-space-l) var(--brxw-space-l);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* Newer browsers expose the native <details> content as a pseudo-element,
   allowing both opening and closing to animate without replacing its semantics. */
@supports selector(::details-content) {
  @supports (interpolate-size: allow-keywords) {
    .faq {
      interpolate-size: allow-keywords;
    }

    .faq-item::details-content {
      height: 0;
      overflow: clip;
      transition: height var(--brxw-transition-m) ease, content-visibility var(--brxw-transition-m) ease allow-discrete;
    }

    .faq-item[open]::details-content {
      height: auto;
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-item::details-content {
        transition: none;
      }
    }
  }
}

.faq-item__answer a {
  color: var(--brxw-color-primary);
  font-weight: var(--brxw-font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Deliberately conspicuous — an unwritten answer must not ship unnoticed. */
.faq-item__pending {
  padding: var(--brxw-space-2xs) var(--brxw-space-s);
  background: var(--brxw-color-surface-alt);
  border-inline-start: 3px solid var(--brxw-color-primary);
  color: var(--brxw-color-neutral-600);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Categories box
   -------------------------------------------------------------------------- */

.faq__categories {
  align-self: flex-start;
  width: 100%;
  background: var(--brxw-color-neutral-50);
  border-radius: var(--brxw-radius-s);
  overflow: hidden;
}

.faq__categories-title {
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-end-end-radius: var(--brxw-radius-s);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
  /* The comp's red header stops short of the box's right edge. */
  width: fit-content;
}

ul.faq__categories-list {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  margin: 0;
  padding: var(--brxw-space-l);
  list-style: none;
}

.faq__categories-link {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
  text-decoration: none;
  transition: color var(--brxw-transition-s) ease;
}

.faq__categories-link:hover,
.faq__categories-link:focus-visible {
  color: var(--brxw-color-primary);
}

.faq__categories-icon {
  display: none;
}

@media (max-width: 1023px) {
  .faq {
    padding-block-start: 0;
  }

  .faq__categories {
    order: -1;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Keep the landmark label for assistive technology without displaying the
     desktop panel heading in the compact mobile navigation. */
  .faq__categories-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  ul.faq__categories-list {
    gap: var(--brxw-space-m);
    padding: 0;
  }

  .faq__categories-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brxw-space-l);
    font-family: var(--brxw-font-heading);
    font-size: var(--brxw-text-xl);
    font-weight: var(--brxw-font-weight-bold);
    color: var(--brxw-color-primary);
  }

  .faq__categories-icon {
    display: block;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    transform: rotate(90deg);
  }
}

@media (min-width: 1024px) {
  .faq__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--brxw-space-2xl);
  }

  .faq__categories {
    flex: 0 0 31.6rem; /* comp box is 316 wide */
    position: sticky;
    /* Clears the sticky header — without the offset the box pins underneath it. */
    top: calc(var(--header-height) + var(--brxw-space-l));
  }
}
/* ==========================================================================
   Ribbon-tabbed panels. Figma: 1:3857 (2-up, 627 each) · 1:3965 (3-up, 406)
   ========================================================================== */

.badged-panels {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.badged-panels__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

/* Continues the tinted band started by the section above (icon-cards, which
   drops its bottom padding for exactly this). It has to paint the tint itself:
   the two are sibling <section>s, so `transparent` showed the white body
   through and broke the band — and left the white panels invisible on it.
   Reduced top padding so the join does not double up. */
.badged-panels--on-alt {
  padding-block-start: var(--brxw-space-2xl);
  background: var(--brxw-color-surface-alt);
}

.badged-panels--on-alt .badged-panel {
  background: var(--brxw-color-surface);
}

.badged-panels__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
}

.badged-panels__head--centred {
  align-items: center;
  max-width: 100rem;
  margin-inline: auto;
  text-align: center;
}

.badged-panels__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.badged-panels__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   The panels
   -------------------------------------------------------------------------- */

ul.badged-panels__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badged-panel {
  display: flex;
  flex-direction: column;
  padding: 0 var(--brxw-space-xl) var(--brxw-space-xl);
  /* The comp fills these panels with the neutral grey, not the warm cream the
     section bands use — see DESIGN.md §4.1 on why the two are not swappable. */
  background: var(--brxw-color-surface-muted);
  border-radius: var(--brxw-radius-s);
}

/* Tab flush to the panel's top-left corner, rounded off on its trailing edge. */
.badged-panel__badge {
  display: table;
  margin-inline-start: calc(-1 * var(--brxw-space-xl));
  padding: var(--brxw-space-2xs) var(--brxw-space-l); /* comp tab inset is 20-29 */
  background: var(--brxw-color-primary);
  border-start-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
  text-align: left;
  width: max-content;
}

.badged-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  margin-block-start: var(--brxw-space-xl);
}

.panel-block__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.panel-block__list {
  margin: var(--brxw-space-3xs) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.panel-block__item,
.panel-block__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (min-width: 768px) {
  ul.badged-panels__list {
    grid-template-columns: var(--brxw-grid-2);
  }
}

@media (min-width: 1024px) {
  /* Three-up where the section asks for it; the remainder wraps, which is
     how the comp lays out five payment panels as 3 + 2. */
  .badged-panels--wide ul.badged-panels__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ==========================================================================
   Two plan cards under a centred heading.
   Figma: 1:5990 (cards 659 wide, photo 299 tall, gap 48)
   ========================================================================== */

.plan-cards {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.plan-cards--plain {
  background: var(--brxw-color-surface);
}

.plan-cards--plain .plan-card__body {
  background: var(--brxw-color-surface-muted);
}

.plan-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.plan-cards__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 70rem; /* comp lead column is 700 */
  margin-inline: auto;
  text-align: center;
}

.plan-cards__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.plan-cards__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.plan-cards__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-card__media {
  position: relative;
  line-height: 0;
}

.plan-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 659 / 299;
  object-fit: cover;
  border-start-start-radius: var(--brxw-radius-s);
  border-start-end-radius: var(--brxw-radius-s);
}

.plan-card__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-start-end-radius: var(--brxw-radius-s);
  border-end-start-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  flex: 1;
  padding: var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border-end-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-s);
}

.plan-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.plan-card__block {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.plan-card__term {
  font-weight: var(--brxw-font-weight-bold);
}

.plan-card__link {
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

ul.plan-card__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.plan-card__item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (min-width: 768px) {
  ul.plan-cards__list {
    grid-template-columns: var(--brxw-grid-2);
  }
}
/* ==========================================================================
   "Notes" column beside a badged panel. Figma: 1:6106 (copy 420, panel 836)
   ========================================================================== */

.notes-panel {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-muted);
}

.notes-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.notes-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
}

.notes-panel__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.notes-panel__para,
.notes-panel__item,
.notes-panel__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.notes-panel__card {
  padding: 0 var(--brxw-space-xl) var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

.notes-panel__badge {
  display: table;
  margin-inline-start: calc(-1 * var(--brxw-space-xl));
  padding: var(--brxw-space-2xs) var(--brxw-space-l); /* comp tab inset is 20-29 */
  background: var(--brxw-color-primary);
  border-start-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.notes-panel__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  margin-block-start: var(--brxw-space-xl);
}

ul.notes-panel__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

@media (min-width: 1024px) {
  .notes-panel__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .notes-panel__body {
    flex: 0 0 42rem; /* comp copy column is 420 */
    min-width: 0;
  }

  .notes-panel__card {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* ==========================================================================
   "Required Items for Enrollment" — three-up icon cards. Figma: 1:3879
   (cards 418 wide, icon inset 24, copy starts at 124)
   ========================================================================== */

.icon-cards {
  /* No bottom padding — the panels that follow sit on this same band. */
  padding-block: var(--brxw-space-3xl) 0;
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.icon-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.icon-cards__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
  max-width: 100rem;
  margin-inline: auto;
  text-align: center;
}

.icon-cards__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.icon-cards__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.icon-cards__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-card {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
  padding: var(--brxw-space-l);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

/* Fixed box so the titles line up across a row whatever the glyph's height.
   The box must constrain BOTH axes: with `width: auto` the glyph scales until it
   is 75 tall, which is normalising by height — it blew the 77×28 glasses up to
   206px wide while the 52×75 certificate stayed at its drawn size, so the row read
   as six different sizes. The comp draws each glyph at its natural size, and all
   six fit inside 80×75, so `contain` in a fixed box reproduces that exactly while
   still giving every card the same icon height to align against. */
.icon-card__icon {
  width: 8rem;
  height: 7.5rem;
  max-width: 100%;
  margin-block-end: var(--brxw-space-l);
  /* scale-down, not contain: `contain` scales to *fill* the box, which would push
     the 71-wide glyphs out to 80. All six are drawn within 80×75, so scale-down
     leaves each at its exact drawn size and only ever shrinks one that grew. */
  object-fit: scale-down;
  object-position: left center;
}

.icon-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.icon-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* Renders as an <a> normally, and as a <button> when the card opens a dialog.
   global.css resets font/colour/cursor on buttons but not the box, so the three
   remaining UA styles are cleared here — otherwise the one card with a dialog
   would show a grey bevelled box where its neighbours show a link. */
.icon-card__action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--brxw-space-2xs);
  margin-block-start: var(--brxw-space-2xs);
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.icon-card__action-icon {
  width: 1.87rem;
  height: auto;
  transition: transform var(--brxw-transition-s) ease;
}

@media (hover: hover) {
  .icon-card__action:hover .icon-card__action-icon {
    transform: translateX(0.4rem);
  }
}

.icon-card__action:focus-visible .icon-card__action-icon {
  transform: translateX(0.4rem);
}

@media (min-width: 768px) {
  ul.icon-cards__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ==========================================================================
   Modal — supplementary detail in a native <dialog>.
   Figma: the Resident Certificate (Juminhyo) panel on How to Enroll.
   ========================================================================== */

/* A <dialog> is display:none until showModal(), so everything here only applies
   once it is open. Padding is zeroed because the panel inside carries it — that
   keeps the close button positionable against the panel's own corner. */
.modal {
  max-width: min(68rem, calc(100vw - 2 * var(--brxw-page-gutter)));
  max-height: calc(100dvh - 2 * var(--brxw-space-2xl));
  padding: 0;
  border: 0;
  border-radius: var(--brxw-radius-l);
  background: var(--brxw-color-surface);
  color: var(--brxw-color-text-heading);
  overflow: hidden;
}

.modal::backdrop {
  background: hsla(0, 0%, 0%, 0.45);
}

/* The panel scrolls, not the dialog, so the close button stays reachable on a
   short viewport. */
.modal__panel {
  position: relative;
  max-height: inherit;
  padding: var(--brxw-space-2xl);
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  inset-block-start: var(--brxw-space-l);
  inset-inline-end: var(--brxw-space-l);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: var(--brxw-radius-full);
  background: var(--brxw-color-primary);
  color: var(--brxw-color-surface);
  cursor: pointer;
  transition: background-color var(--brxw-transition-s) ease;
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--brxw-color-primary-alt);
}

.modal__close-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.modal__title {
  /* Clears the close button so a long title never runs under it. */
  padding-inline-end: var(--brxw-space-3xl);
  margin-block-end: var(--brxw-space-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
}

.modal__group + .modal__group {
  margin-block-start: var(--brxw-space-l);
}

.modal__group-heading {
  margin-block-end: var(--brxw-space-2xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
}

.modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The comp sets the bullet in from the text edge, which `list-style` cannot do
   consistently across browsers — hence the explicit marker. */
.modal__item {
  position: relative;
  padding-inline-start: var(--brxw-space-m);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
}

.modal__item::before {
  content: '•';
  position: absolute;
  inset-inline-start: var(--brxw-space-3xs);
}

.modal__note {
  margin-block-start: var(--brxw-space-xl);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  font-style: italic;
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
}

@media (max-width: 1023px) {
  .modal__panel {
    padding: var(--brxw-space-xl);
  }

  .modal__close {
    inset-block-start: var(--brxw-space-m);
    inset-inline-end: var(--brxw-space-m);
  }
}
/* ==========================================================================
   "After Enrollment" — outlined cards with a numbered chip on the top edge.
   Figma: 1:3998 (cards 310 x 243, 16 gap)
   ========================================================================== */

.numbered-cards {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.numbered-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.numbered-cards__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
  max-width: 66.7rem; /* comp lead column is 667 */
  margin-inline: auto;
  text-align: center;
}

.numbered-cards__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.numbered-cards__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.numbered-cards__note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

ol.numbered-cards__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbered-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
  background: var(--brxw-color-surface);
  /* Room for the chip, which sits astride the top border. */
  padding: var(--brxw-space-2xl) var(--brxw-space-l) var(--brxw-space-l);
  border: var(--brxw-border-width-s) solid var(--brxw-color-primary);
  border-radius: var(--brxw-radius-s);
  text-align: center;
}

.numbered-card__number {
  margin-block-start: calc(-1 * var(--brxw-space-2xl) - 1.4rem);
  padding: var(--brxw-space-3xs) var(--brxw-space-m);
  background: var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.numbered-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.numbered-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
  text-align: start;
}

@media (min-width: 768px) {
  ol.numbered-cards__list {
    grid-template-columns: var(--brxw-grid-2);
  }
}

@media (min-width: 1024px) {
  ol.numbered-cards__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ==========================================================================
   "Program Content" — tick list plus a badged note card.
   Figma: 1:2386 (list 1034 wide in two 501 columns, rows 64 tall)
   ========================================================================== */

.program-content {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.program-content__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.program-content__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 70rem; /* comp lead column is 700 */
  margin-inline: auto;
  text-align: center;
}

.program-content__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.program-content__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   Tick list
   -------------------------------------------------------------------------- */

/* Multi-column: the comp runs 1–5 down the left and 6–10 down the right. */
ul.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: var(--brxw-space-xl);
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--brxw-space-xl);
  break-inside: avoid;
  min-height: 6.4rem; /* comp row is 64 */
}

.checklist__icon {
  flex-shrink: 0;
  width: 4.4rem;
  height: auto;
}

.checklist__label {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   Note card
   -------------------------------------------------------------------------- */

.note-card {
  position: relative;
  padding: var(--brxw-space-2xl) var(--brxw-space-xl) var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

.note-card__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: var(--brxw-space-2xs) var(--brxw-space-l);
  background: var(--brxw-color-primary);
  border-start-end-radius: var(--brxw-radius-s);
  border-end-start-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

ul.note-card__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.note-card__item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (max-width: 1023px) {
  .note-card {
    padding-block-start: calc(var(--brxw-space-2xl) + var(--brxw-space-m));
  }
}

@media (max-width: 767px) {
  .checklist__item {
    gap: var(--brxw-space-l);
  }

  .checklist__icon {
    width: 2.2rem;
  }
}

@media (min-width: 768px) {
  ul.checklist {
    columns: 2;
  }
}
/* ==========================================================================
   License Programs page — jump links and two-up programme cards.
   Figma: 1:2753
   ========================================================================== */

.programs-intro {
  padding-block: var(--brxw-space-3xl) var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.programs-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.programs-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  flex: 1;
  min-width: 0;
}

.programs-intro__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.programs-intro__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.programs-intro__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brxw-space-2xs) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hairline separators between links, as the comp has. Suppressed below the
   two-column breakpoint: once the row wraps, the item that starts the new line
   carries a leading rule with nothing before it, which reads as a mistake. */
@media (min-width: 1024px) {
  .programs-intro__list li + li .programs-intro__link {
    border-inline-start: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  }
}

.programs-intro__link {
  display: block;
  /* space-m, not space-l: at space-l the four links need 631px in a 590px
     column and wrap. Measured, not guessed. */
  padding-inline: var(--brxw-space-m);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-primary);
  text-decoration: none;
  transition: color var(--brxw-transition-s) ease;
}

.programs-intro__list li:first-child .programs-intro__link {
  padding-inline-start: 0;
}

.programs-intro__link:hover,
.programs-intro__link:focus-visible {
  color: var(--brxw-color-text-heading);
}

@media (max-width: 1023px) {
  .programs-intro__links {
    display: none;
  }
}

.programs-intro__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .programs-intro__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--brxw-grid-gap);
  }

  .programs-intro__image {
    flex: 0 0 55rem; /* comp photo is 550 */
    min-width: 0;
  }
}

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

.program-list {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.program-list--alt {
  background: var(--brxw-color-surface-alt);
}

.program-list__inner {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.program-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-s);
  /* Jumped to from the intro links — keep the title clear of the header. */
  scroll-margin-block-start: var(--brxw-space-3xl);
}

.program-entry__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

.program-entry__title {
  margin-block-start: var(--brxw-space-m);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-3xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.program-entry__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.program-entry__action {
  margin-block-start: var(--brxw-space-m);
  margin-block-end: var(--brxw-space-m);
}

/* --------------------------------------------------------------------------
   English Plan panel — ribbon badge tucked into the top-right corner

   `program-plan`, not `plan-card`: that name belongs to PlanCards.astro, and
   because the whole site ships as one stylesheet the duplicate block bled onto
   every page using it — `margin-block-start: auto` dropped the shorter of the
   two cards to the bottom of its grid cell.
   -------------------------------------------------------------------------- */

.program-plan {
  position: relative;
  width: 100%;
  /* auto, not a fixed gap: pushes the panel to the bottom of a stretched entry
     so the two panels line up across the row. The list gap still
     guarantees the minimum distance. */
  margin-block-start: auto;
  padding: var(--brxw-space-xl) var(--brxw-space-l) var(--brxw-space-l);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

.program-plan__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: var(--brxw-space-3xs) var(--brxw-space-s);
  background: var(--brxw-color-primary);
  border-start-end-radius: var(--brxw-radius-s);
  border-end-start-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.program-plan__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

/* Not display:flex — flex items have no ::marker, which drops the bullets.
   Typed as ul.* to outrank the reset's `ul[class] { list-style: none }`. */
ul.program-plan__list {
  margin: var(--brxw-space-s) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.program-plan__item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (min-width: 768px) {
  .program-list__inner {
    grid-template-columns: var(--brxw-grid-2);
    /* Stretch, so entries end level even when one description runs longer. */
  }
}
/* ==========================================================================
   Feature list — icon beside copy, two-up on desktop.
   Figma: 1:2835 (Regular Car), 1:5676 (Motorcycle)
   ========================================================================== */

.feature-grid {
  padding-block: var(--brxw-space-3xl); /* comp band padding is 80 */
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.feature-grid__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-3xl) var(--brxw-grid-gap);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--brxw-space-xl); /* comp: icon box 84, copy starts at 124 */
}

.feature__icon {
  flex-shrink: 0;
  width: 8.4rem;
  height: auto;
  object-fit: contain;
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
}

.feature__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-primary);
}

.feature__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
  /* Descriptions may carry a blank-line-separated trailing note. */
  white-space: pre-line;
}

/* Not display:flex — flex items have no ::marker, which drops the bullets.
   Typed as ul.* to outrank the reset's `ul[class] { list-style: none }`. */
ul.feature__list {
  margin: var(--brxw-space-2xs) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.feature__list-item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (max-width: 767px) {
  .feature__icon {
    width: 5rem;
  }
}

@media (min-width: 768px) {
  .feature-grid__list {
    grid-template-columns: var(--brxw-grid-2);
  }

  /* Odd count: the comp centres the last card across both columns, at the
     same width the other cards have rather than stretched to full bleed. */
  .feature:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - var(--brxw-grid-gap) / 2);
    margin-inline: auto;
  }
}
/* ==========================================================================
   Fee simulator — three steps to a total.
   Figma: 1:2835 (Regular Car), 1:5676 (Motorcycle)
   ========================================================================== */

.fee-simulator {
  padding-block: var(--brxw-space-3xl); /* comp band padding is 80 */
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.fee-simulator__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-xl); /* comp gap between panels is 40 */
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.fee-simulator__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-3xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

/* Every panel indents its contents to the same 732 column the comp uses. The
   button is excluded — it keeps its intrinsic width and centres itself. */
.fee-step > *,
.fee-total > *:not(.fee-simulator__action) {
  width: 100%;
  max-width: 73.2rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Step panel
   -------------------------------------------------------------------------- */

.fee-step {
  width: 100%;
  margin: 0;
  padding: var(--brxw-space-xl);
  border: 0;
  background: var(--brxw-color-surface-muted);
  border-radius: var(--brxw-radius-s);
}

/* `legend` ignores the shared max-width rule above unless it is floated out of
   the fieldset's own layout, so it carries the column width itself. */
.fee-step__label {
  padding: 0;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* The comp reds only the "STEP n:" run-in, not the instruction after it. */
.fee-step__step {
  color: var(--brxw-color-primary);
}

.fee-step__prefix {
  margin-block-start: var(--brxw-space-l);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-semibold);
  color: var(--brxw-color-text-heading);
}

/* --------------------------------------------------------------------------
   Licence type — radios styled as cards
   -------------------------------------------------------------------------- */

.fee-types {
  display: grid;
  grid-template-columns: var(--brxw-grid-2);
  gap: var(--brxw-grid-gap);
  margin-block-start: var(--brxw-space-l);
}

.fee-type {
  cursor: pointer;
}

/* Odd count (Motorcycle has five): the comp centres the last card. */
.fee-type:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--brxw-grid-gap) / 2);
}

/* Visually hidden but still focusable, so the card can carry the focus ring. */
.fee-type__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.fee-type__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-2xs);
  height: 100%;
  padding: var(--brxw-space-s);
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-m) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-s);
  transition: border-color var(--brxw-transition-s) ease;
}

/* The comp draws a radio dot in the card's top-left corner as well as
   highlighting the border, so the choice reads without relying on colour. */
.fee-type__card::before {
  content: '';
  position: absolute;
  top: var(--brxw-space-m);
  left: var(--brxw-space-m);
  width: 2rem;
  height: 2rem;
  border: var(--brxw-border-width-m) solid var(--brxw-color-neutral-100);
  border-radius: 50%;
  background: var(--brxw-color-surface);
  transition: border-color var(--brxw-transition-s) ease;
}

.fee-type__input:checked + .fee-type__card::before {
  border-color: var(--brxw-color-primary);
  border-width: 0.6rem;
}

.fee-type__input:checked + .fee-type__card {
  border-color: var(--brxw-color-primary);
}

.fee-type__input:focus-visible + .fee-type__card {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

/* The two cars are photographed at different aspect ratios; a fixed box keeps
   the cards — and so the labels beneath them — the same height. */
.fee-type__image {
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 421;
  object-fit: contain;
}

.fee-type__label {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-semibold);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Selects
   -------------------------------------------------------------------------- */

/* Stacked until there is room for the comp's label column beside the select. */
.fee-field {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
  margin-block-start: var(--brxw-space-l);
}

.fee-field__label {
  flex-shrink: 0;
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-semibold);
  color: var(--brxw-color-text-heading);
}

/* Native chevrons differ per platform, so the control is stripped and the
   comp's red caret drawn back on as a background image. */
/* min-width: 0 — without it the longest option's intrinsic width stops the
   select shrinking, and it pushes past the viewport on a narrow screen. */
.fee-field__select {
  flex: 1;
  min-width: 0;
  appearance: none;
  padding: var(--brxw-space-s) var(--brxw-space-xl) var(--brxw-space-s) var(--brxw-space-m);
  background-color: var(--brxw-color-surface);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"%3E%3Cpath fill="%23b50d16" d="M0 0h12L6 8z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right var(--brxw-space-m) center;
  background-size: 1.2rem 0.8rem;
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  color: var(--brxw-color-text-heading);
}

.fee-field__select:focus-visible {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Total
   -------------------------------------------------------------------------- */

.fee-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-l);
  width: 100%;
  padding: var(--brxw-space-xl);
  background: var(--brxw-color-surface-muted);
  border-radius: var(--brxw-radius-s);
  text-align: center;
}

.fee-total__label {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-primary);
}

/* Fixed height so the panel does not jump when a real total replaces the
   pending message. Comp box is 732 x 195. */
.fee-total__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--brxw-space-2xs);
  min-height: 19.5rem;
  padding: var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  /* The comp rules this box in the brand red — it is the answer the whole
     simulator exists to give, so it is not a neutral panel. Measured at 2px;
     border-width-m (1.5) is the nearest token and is what the other red-ruled
     panel, the reason card, already uses. */
  border: var(--brxw-border-width-m) solid var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
}

.fee-total__value {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-6xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-primary);
}

/* No price for this combination yet — must not look like a real figure. */
.fee-total__value[data-pending] {
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-regular);
  font-style: italic;
  color: var(--brxw-color-neutral-600);
}

.fee-simulator__action {
  margin-block-start: var(--brxw-space-2xl);
}

.fee-total__gross {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  color: var(--brxw-color-primary);
}

/*
 * The comp shows a single centred note. The school's fee chart carries a
 * four-line "Remarks" block, so the column stays centred at the comp's width
 * but the text within it is left-aligned — centring four wrapped remarks
 * gives every line a different start, which is what makes a list unreadable.
 */
.fee-simulator__notes {
  display: grid;
  gap: var(--brxw-space-3xs);
  max-width: 68.9rem; /* comp note column is 689 */
  margin-inline: auto;
  padding: 0;
  list-style: none;
  margin-block-start: var(--brxw-space-s);
}

.fee-simulator__note {
  font-family: var(--brxw-font-body);
  /* One step below body: these are conditions on the price, and at the comp's
     size a four-line block competes with the CTA sitting right above it. */
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
  text-align: left;
}

@media (min-width: 600px) {
  .fee-field {
    flex-direction: row;
    align-items: center;
    gap: var(--brxw-space-l);
  }

  .fee-field__label {
    width: 14.9rem; /* comp label column is 149 */
  }
}
/* ==========================================================================
   "Types of Motorcycle Licenses" — ribbon-tabbed panel.
   Figma 1:5686 also draws a 307-wide "Recommended for" card beside the panel;
   the school's revised artwork (2026-08-17) drops it, so the panel is full width.
   ========================================================================== */

.license-types {
  padding-block: var(--brxw-space-3xl) 0;
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

/* The flex row that used to sit the panel beside the companion card is gone
   with the card; this is now only the rail constraint. */
.license-types__inner {
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */

.license-panel {
  padding: 0 var(--brxw-space-xl) var(--brxw-space-xl);
  background: var(--brxw-color-surface-muted);
  border-radius: var(--brxw-radius-s);
}

/* The tab sits flush to the panel's top-left corner and runs off to a point on
   its trailing edge, as the comp draws it. */
.license-panel__badge {
  /* A tab, not a full-width bar: it is only as wide as its label. */
  display: table;
  margin-inline-start: calc(-1 * var(--brxw-space-xl));
  padding: var(--brxw-space-2xs) var(--brxw-space-xl);
  background: var(--brxw-color-primary);
  border-start-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
  text-align: center;
}

/* Multi-column, not grid: it fills top-to-bottom then across, which is the
   order the comp lays the five licences out in.
   The columns live on this wrapper rather than on the list, so the note flows
   as the last item of the right column the way the comp shows it. With the
   columns on the list, the note fell outside the flow and sat full-width
   beneath the left column. */
.license-panel__body {
  margin-block-start: var(--brxw-space-xl);
  columns: 1;
}

ul.license-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.license-entry {
  /* Keep a licence and its bullets together when the columns break. */
  break-inside: avoid;
  margin-block-end: var(--brxw-space-2xl);
}

.license-entry__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

ul.license-entry__points {
  margin: var(--brxw-space-2xs) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.license-entry__point {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.license-panel__note {
  /* Never split the note across the column break. */
  break-inside: avoid;
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

.license-panel__note a {
  color: var(--brxw-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 1024px) {
  .license-panel__body {
    columns: 2;
    column-gap: var(--brxw-space-3xl);
  }
}
/* ==========================================================================
   FAQ accordion beside a tall photo.
   Figma: 1:6018 (list 789, photo 451, gap 48 in a 1288 row)
   ========================================================================== */

.faq-panel {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.faq-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.faq-panel__main {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  flex: 1 1 auto;
}

.faq-panel__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

ul.faq-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-panel__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-s);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .faq-panel__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .faq-panel__image {
    flex: 0 0 45.1rem; /* comp photo column is 451 */
    align-self: stretch;
    /* See facilities.css — intrinsic width is a floor unless this is zeroed. */
    min-width: 0;
  }
}
/* ==========================================================================
   Heading beside copy, no photo. Figma: 1:4030 (two 675 columns, gap 16)
   ========================================================================== */

.split-intro {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.split-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.split-intro__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.split-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
}

.split-intro__para {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.split-intro__note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

@media (min-width: 1024px) {
  .split-intro__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--brxw-space-m);
  }

  .split-intro__title,
  .split-intro__body {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* ==========================================================================
   "Choose Your Route" — two-step chooser plus the matching stage cards.
   Figma: 1:4052 (chooser 1079 wide, stage row 1288: photo 395, body 893)
   ========================================================================== */

.route-chooser {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.route-chooser__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.route-chooser__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

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

.route-step {
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.route-step__label {
  width: 100%;
  padding: 0;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.route-step__step {
  color: var(--brxw-color-primary);
}

/* --------------------------------------------------------------------------
   Step 1 — licence type cards
   -------------------------------------------------------------------------- */

.route-types {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-grid-gap);
  margin-block-start: var(--brxw-space-xl);
}

.route-type {
  cursor: pointer;
}

/* Hidden but focusable, so the card can carry the focus ring. */
.route-type__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.route-type__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
  height: 100%;
  padding: var(--brxw-space-l);
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-m) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-s);
  transition: border-color var(--brxw-transition-s) ease;
}

/* Radio dot in the corner, so the choice reads without relying on colour. */
.route-type__card::before {
  content: '';
  position: absolute;
  top: var(--brxw-space-m);
  left: var(--brxw-space-m);
  width: 2rem;
  height: 2rem;
  background: var(--brxw-color-neutral-100);
  border-radius: 50%;
  transition: background-color var(--brxw-transition-s) ease;
}

.route-type__input:checked + .route-type__card {
  border-color: var(--brxw-color-primary);
}

.route-type__input:checked + .route-type__card::before {
  background: var(--brxw-color-primary);
}

.route-type__input:focus-visible + .route-type__card {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

.route-type__image {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 570 / 346;
  object-fit: contain;
}

.route-type__label {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Step 2 — two answer buttons
   -------------------------------------------------------------------------- */

.route-answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--brxw-grid-gap);
  margin-block-start: var(--brxw-space-xl);
}

.route-answer {
  cursor: pointer;
}

.route-answer__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.route-answer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 35rem; /* comp button is 351 */
  min-height: 8.5rem; /* comp button is 85 */
  padding: var(--brxw-space-m) var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-s) solid var(--brxw-color-neutral-100);
  border-radius: var(--brxw-radius-s);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
  text-align: center;
  transition:
    background-color var(--brxw-transition-s) ease,
    border-color var(--brxw-transition-s) ease,
    color var(--brxw-transition-s) ease;
}

.route-answer__input:checked + .route-answer__button {
  background: var(--brxw-color-primary);
  border-color: var(--brxw-color-primary);
  color: var(--brxw-color-text-invert);
}

.route-answer__input:focus-visible + .route-answer__button {
  outline: 2px solid var(--brxw-color-primary);
  outline-offset: 2px;
}

.route-chooser__note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
  text-align: center;
  /* The note is two deliberate lines in the comp. */
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   The result
   -------------------------------------------------------------------------- */

.route-result {
  width: 100%;
}

.route-result__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

/* The one combination with no course of its own: a message and a button, in a
   card that matches the stage cards rather than the comp's bare grey artboard. */
.route-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--brxw-space-3xl) var(--brxw-space-xl);
  background: var(--brxw-color-surface-alt);
  border-radius: var(--brxw-radius-s);
  text-align: center;
}

.route-message__line {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

.route-message__action {
  margin-block-start: var(--brxw-space-xl);
}

ul.route-result__stages {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-xl);
  margin: var(--brxw-space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.route-stage {
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  border-radius: var(--brxw-radius-s);
  overflow: hidden;
}

.route-stage__media {
  position: relative;
  line-height: 0;
}

.route-stage__image {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 395 / 300;
  object-fit: cover;
}

/* Ribbon over the photo's top-left corner. */
.route-stage__badge {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  padding: var(--brxw-space-2xs) var(--brxw-space-xl);
  background: var(--brxw-color-primary);
  border-start-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.route-stage__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xs);
  padding: var(--brxw-space-xl);
}

.route-stage__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.route-stage__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* Two columns, filled top-to-bottom then across, as the comp lays them out. */
ul.route-stage__items {
  margin: var(--brxw-space-l) 0 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: var(--brxw-space-2xl);
}

.stage-item {
  break-inside: avoid;
  margin-block-end: var(--brxw-space-l);
}

.stage-item__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-m);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.stage-item__text,
.stage-item__bullet {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.stage-item__list {
  margin: var(--brxw-space-3xs) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

/* No route for this combination yet — must not look like an empty page. */
.route-chooser__pending {
  width: 100%;
  padding: var(--brxw-space-2xl);
  background: var(--brxw-color-surface-alt);
  border-radius: var(--brxw-radius-s);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  font-style: italic;
  color: var(--brxw-color-neutral-600);
  text-align: center;
}

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

@media (min-width: 1024px) {
  .route-stage {
    flex-direction: row;
    align-items: stretch;
  }

  /* The photo column is fixed; the flex item is the media wrapper, not the
     image — sizing the image instead let the column's width follow the photo's
     aspect ratio, so short cards got a narrow strip. */
  .route-stage__media {
    flex: 0 0 39.5rem; /* comp photo column is 395 */
    min-width: 0;
    align-self: stretch;
  }

  /* Taken out of flow so the card's height comes from its text, as in the comp,
     and the photo crops to whatever that is. */
  .route-stage__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .route-stage__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--brxw-space-2xl);
  }

  ul.route-stage__items {
    columns: 2;
  }
}
/* ==========================================================================
   "Online Theory Lessons". Figma: 1:4099 (copy 720, photo 520, gap 48)
   ========================================================================== */

.online-theory {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.online-theory__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.online-theory__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
}

.online-theory__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.online-theory__para,
.online-theory__item {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

ul.online-theory__list {
  margin: calc(-1 * var(--brxw-space-s)) 0 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.online-theory__note {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-body);
}

/* --------------------------------------------------------------------------
   Badged panel
   -------------------------------------------------------------------------- */

.online-panel {
  margin-block-start: var(--brxw-space-s);
  padding: 0 var(--brxw-space-xl) var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border-radius: var(--brxw-radius-s);
}

.online-panel__badge {
  display: table;
  margin-inline-start: calc(-1 * var(--brxw-space-xl));
  padding: var(--brxw-space-2xs) var(--brxw-space-l); /* comp tab inset is 20-29 */
  background: var(--brxw-color-primary);
  border-start-start-radius: var(--brxw-radius-s);
  border-end-end-radius: var(--brxw-radius-l);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.online-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  margin-block-start: var(--brxw-space-xl);
}

ul.online-panel__list {
  margin: 0;
  padding-inline-start: var(--brxw-space-l);
  list-style: disc;
}

.online-panel__item,
.online-panel__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.online-theory__image {
  width: 100%;
  height: auto;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

@media (min-width: 1024px) {
  .online-theory__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .online-theory__body {
    flex: 1 1 0;
    min-width: 0;
  }

  .online-theory__image {
    flex: 0 0 52rem; /* comp photo is 520 */
    min-width: 0;
    align-self: stretch;
  }
}
/* ==========================================================================
   "What to prepare" — centred intro over two reference tables.
   Figma: 1:6425 (cream band)
   ========================================================================== */

.prepare {
  padding-block: var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.prepare__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.prepare__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 66.7rem; /* comp copy column is 667 */
  margin-inline: auto;
  text-align: center;
}

.prepare__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.prepare__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.prepare__tables {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-l);
}

.prepare__tables--desktop {
  display: none;
}

.prepare .table thead th {
  min-width: 0;
  width: 50%;
}

@media (min-width: 1024px) {
  .prepare__tables--mobile {
    display: none;
  }

  .prepare__tables--desktop {
    display: grid;
  }

  .prepare__tables {
    /* The comp butts the two tables together into one 1296-wide block. */
    grid-template-columns: var(--brxw-grid-2);
    gap: 0;
  }
}
/* ==========================================================================
   Step cards — numbered, red-outlined, chip overhanging the top edge.
   Figma: 1:6752 (three-up)
   ========================================================================== */

.steps {
  --step-chip-overhang: 1.2rem;

  padding-block: 0 var(--brxw-space-3xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.steps__list {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-s);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  margin-block-start: var(--step-chip-overhang);
  padding: var(--brxw-space-xl) var(--brxw-space-l) var(--brxw-space-l);
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-s) solid var(--brxw-color-primary);
  border-radius: var(--brxw-radius-l);
}

/* Centred on the card's top edge, unlike the reason cards' left-aligned chip. */
.step-card__number {
  position: absolute;
  top: calc(var(--step-chip-overhang) * -1);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.8rem;
  background: var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.step-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.step-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

@media (min-width: 768px) {
  .steps__list {
    grid-template-columns: var(--brxw-grid-3);
    /* No align-items: start — grid items stretch by default, and a row of
       cards has to end level whatever its copy runs to. */
  }
}
/* ==========================================================================
   Hero — homepage only.
   Figma: PC 1:2218 (1512 × 785) · SP 2:6175 (360 × 800)
   ========================================================================== */

.hero {
  /* Inset panel padding: PC 111.93/55.98/83, SP 39.06/25. Off the ramp at both
     ends, so clamped between the comps. */
  --hero-pad-block: clamp(3.9rem, calc(0.062587 * (100vw - 36rem) + 3.9rem), 11.19rem);
  --hero-pad-inline: clamp(2.5rem, calc(0.026719 * (100vw - 36rem) + 2.5rem), 5.6rem);
  --hero-pad-start: clamp(2.5rem, calc(0.050347 * (100vw - 36rem) + 2.5rem), 8.3rem);
  --hero-notch: clamp(2.6rem, calc(0.005208 * (100vw - 36rem) + 2.6rem), 3.2rem);

  padding-inline: var(--brxw-page-gutter);
  padding-block-end: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--brxw-space-xl);
  width: 100%;
  max-width: var(--brxw-container-width);
  min-height: 75.7rem; /* comp frame 757 + 28 page gutter = 785 */
  margin-inline: auto;
  padding: var(--hero-pad-block) var(--hero-pad-inline) var(--hero-pad-block)
    var(--hero-pad-start);
  border-radius: var(--brxw-radius-l);
  overflow: hidden;
}

/* Photo + scrim. Figma stacks two flat overlays (.2 then .5); collapsed to one. */
.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brxw-color-overlay);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  max-width: 58.7rem;
}

.hero__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-6xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-invert);
}

.hero__lead {
  max-width: var(--brxw-width-content-m);
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-white-trans-90);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brxw-space-l);
}

/* --------------------------------------------------------------------------
   Badge — notched into the bottom-right corner of the panel.

   The two concave corners are drawn with radial-gradients rather than the
   exported SVGs: the SVG is a fixed 32px white wedge, and the badge corner
   radius is fluid (26 → 32), so the wedge would stop matching between
   breakpoints. Same shape, same colour, follows the radius.
   -------------------------------------------------------------------------- */

.hero__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--brxw-space-2xs);
  max-width: 48rem;
  padding: var(--brxw-space-s) var(--brxw-space-2xs) var(--brxw-space-s)
    var(--brxw-space-l);
  background: var(--brxw-color-surface);
  border-start-start-radius: var(--hero-notch);
}

.hero__badge::before,
.hero__badge::after {
  content: '';
  position: absolute;
  width: var(--hero-notch);
  height: var(--hero-notch);
  background: var(--brxw-color-surface);
}

/* above the badge, hugging the right edge */
.hero__badge::before {
  right: 0;
  bottom: 100%;
  -webkit-mask-image: radial-gradient(
    circle at 0 0,
    transparent 0 var(--hero-notch),
    #000 calc(var(--hero-notch) + 0.5px)
  );
  mask-image: radial-gradient(
    circle at 0 0,
    transparent 0 var(--hero-notch),
    #000 calc(var(--hero-notch) + 0.5px)
  );
}

/* left of the badge, sitting on the bottom edge */
.hero__badge::after {
  right: 100%;
  bottom: 0;
  -webkit-mask-image: radial-gradient(
    circle at 0 0,
    transparent 0 var(--hero-notch),
    #000 calc(var(--hero-notch) + 0.5px)
  );
  mask-image: radial-gradient(
    circle at 0 0,
    transparent 0 var(--hero-notch),
    #000 calc(var(--hero-notch) + 0.5px)
  );
}

.hero__badge-stamp {
  width: clamp(4.1rem, calc(0.039063 * (100vw - 36rem) + 4.1rem), 8.6rem);
  height: auto;
  flex-shrink: 0;
}

.hero__badge-text {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-badge-size);
  font-weight: var(--brxw-font-weight-regular);
  line-height: var(--brxw-line-height-mid);
  color: var(--brxw-color-text-strong);
}

.hero__badge-accent {
  font-weight: var(--brxw-font-weight-bold);
  color: var(--brxw-color-primary);
}

@media (min-width: 1024px) {
  .hero__badge-accent {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Mobile — panel is taller and narrower, buttons stack full width
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .hero {
    padding-block-start: var(--brxw-space-xl);
  }

  .hero__frame {
    min-height: 76.8rem;
    padding-bottom: calc(var(--hero-pad-block) + 7.2rem);
    border-radius: var(--brxw-radius-l);
  }

  .hero__content {
    gap: var(--brxw-space-m);
    max-width: none;
  }

  .hero__actions {
    flex-direction: column;
    gap: var(--brxw-space-m);
    align-items: stretch;
  }

  .hero__badge {
    max-width: 25.2rem;
    padding-inline: var(--brxw-space-m) var(--brxw-space-2xs);
  }
}

@media (max-width: 767px) {
  .hero__image {
    object-position: 35% 100%;
  }
}
/* ==========================================================================
   Intro ("Where International Residents Learn to Drive with Confidence")
   Figma: PC 1:2242 (1303 × 435) · SP stacked
   ========================================================================== */

.intro {
  /* Comp is 53/65, but our copy reflows ~30px longer than its text block.
     Trimming the padding keeps the section's total height on the comp, which
     matters more than the padding value on a white-on-white band. */
  padding-block: var(--brxw-space-xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.intro__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.intro__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-l);
}

.intro__title {
  max-width: 58.1rem;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-5xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.intro__copy {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-l);
  max-width: 58.1rem;
}

.intro__para {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.intro__para strong {
  font-weight: var(--brxw-font-weight-bold);
}

.intro__footnote {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-s);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

/* Source is 3:2; the comp crops it to 570×343. Without the ratio the column
   runs ~37px tall and drags the whole section with it. */
.intro__image {
  width: 100%;
  height: auto;
  aspect-ratio: 570 / 343;
  border-radius: var(--brxw-radius-m);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Desktop — two columns, image right
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .intro__inner {
    flex-direction: row;
    align-items: center;
    gap: 6.1rem; /* literal in the comp; between space-2xl and space-3xl */
  }

  .intro__body {
    flex: 0 1 65.5rem;
    padding-inline-end: var(--brxw-space-2xl);
  }

  .intro__media {
    flex: 0 1 61.3rem;
    display: flex;
    justify-content: flex-end;
  }

  .intro__image {
    max-width: 57rem;
  }
}
/* ==========================================================================
   Reasons — full-bleed cream band, 4-up grid of numbered cards.
   Figma: PC band 1:2215 (1512 × 1145) · SP 2:6229 (one column)
   ========================================================================== */

.reasons {
  --reason-chip-overhang: 1.87rem;

  /* Comp: 18 above the heading frame, 57 below the grid. */
  padding-block: var(--brxw-space-xl) var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface-alt);
}

.reasons__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.reasons__title {
  max-width: 53.9rem;
  margin-inline: auto;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.reasons__grid {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.reason-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--brxw-space-2xs);
  margin-block-start: var(--reason-chip-overhang);
  padding: var(--brxw-space-l) var(--brxw-space-s) var(--brxw-space-xl);
  background: var(--brxw-color-surface);
  border: var(--brxw-border-width-m) solid var(--brxw-color-primary);
  border-radius: var(--brxw-radius-l);
}

.reason-card__number {
  position: absolute;
  top: calc(var(--reason-chip-overhang) * -1);
  inset-inline-start: 2.2rem;
  display: grid;
  place-items: center;
  min-width: 5.9rem;
  padding: 0.2rem 0.8rem;
  background: var(--brxw-color-primary);
  border-radius: var(--brxw-radius-xs);
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-2xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-invert);
}

.reason-card__icon {
  width: 100%;
  max-width: none;
  height: 10.4rem;
  margin-inline: auto;
  margin-block-start: var(--brxw-space-xs);
  object-fit: contain;
}

.reason-card__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-card-title-size);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-primary);
}

.reason-card__text {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-m);
  line-height: var(--brxw-line-height-snug);
  color: var(--brxw-color-text-strong);
}

/* --------------------------------------------------------------------------
   Breakpoints — 1 → 2 → 4 columns
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .reasons__grid {
    grid-template-columns: var(--brxw-grid-2);
  }
}

@media (min-width: 1024px) {
  .reasons__grid {
    grid-template-columns: var(--brxw-grid-4);
  }
}
/* ==========================================================================
   Programs — four photo cards with a notched red meta tab.
   Figma: PC 1:2273 + 1:2290–1:2293 · SP stacked
   ========================================================================== */

.programs {
  padding-block: var(--brxw-space-2xl);
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.programs__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-2xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.programs__head {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-s);
  max-width: 65.4rem;
}

.programs__title {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-4xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
}

.programs__lead {
  font-family: var(--brxw-font-body);
  font-size: var(--brxw-text-l);
  line-height: var(--brxw-line-height-body);
  color: var(--brxw-color-text-heading);
}

.programs__grid {
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.programs__action {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.program-card__link {
  position: relative;
  display: block;
  aspect-ratio: var(--brxw-ratio-card);
  border-radius: var(--brxw-radius-m);
  overflow: hidden;
  text-decoration: none;
}

.program-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--brxw-transition-l) ease;
}

.program-card__link:hover .program-card__image,
.program-card__link:focus-visible .program-card__image {
  transform: scale(1.04);
}

/* The tab's own bottom-left corner is square so it sits flush in the card
   corner; the top-right is rounded. The notch (an exported red wedge) carries
   the curve on past the tab's right edge. */
.program-card__tab {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--brxw-space-2xs);
  min-height: 6.4rem;
  padding: var(--brxw-space-2xs) var(--brxw-space-s);
  background: var(--brxw-color-primary-95);
  border-start-end-radius: var(--brxw-radius-m);
}

.program-card__label {
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-l);
  font-weight: var(--brxw-font-weight-bold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-invert);
}

.program-card__arrow {
  width: 1.67rem;
  height: 1.32rem;
  flex-shrink: 0;
  color: var(--brxw-color-text-invert);
}

.program-card__tab::after {
  content: '';
  position: absolute;
  inset-inline-start: 100%;
  bottom: 0;
  width: 1.3rem;
  height: 1.6rem;
  background: var(--brxw-color-primary-95);
  -webkit-mask-image: radial-gradient(
    circle at 100% 0,
    transparent 0 1.3rem,
    #000 calc(1.3rem + 0.5px)
  );
  mask-image: radial-gradient(
    circle at 100% 0,
    transparent 0 1.3rem,
    #000 calc(1.3rem + 0.5px)
  );
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .programs__grid {
    grid-template-columns: var(--brxw-grid-2);
  }
}

@media (min-width: 1024px) {
  .programs__grid {
    grid-template-columns: var(--brxw-grid-4);
  }
}
/* ==========================================================================
   Vehicles — course map with hand-placed pill + photo pairs.
   Figma: PC heading 1:2276, map 1:2217 (1129 × 433), hotspots 1:2278
   ========================================================================== */

.vehicles {
  padding-block: var(--brxw-space-xl) var(--brxw-space-2xl); /* comp 24 / 65 */
  padding-inline: var(--brxw-page-gutter);
  background: var(--brxw-color-surface);
}

.vehicles__inner {
  display: flex;
  flex-direction: column;
  gap: var(--brxw-space-xl);
  width: 100%;
  max-width: var(--brxw-container-width-rail);
  margin-inline: auto;
}

.vehicles__title {
  max-width: 52.6rem;
  margin-inline: auto;
  font-family: var(--brxw-font-heading);
  font-size: var(--brxw-text-3xl);
  font-weight: var(--brxw-font-weight-semibold);
  line-height: var(--brxw-line-height-heading);
  color: var(--brxw-color-text-heading);
  text-align: center;
}

.vehicles__stage {
  position: relative;
}

/* Map is decorative scaffolding behind the vehicle links and photos. */
.vehicles__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

.vehicles__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--brxw-grid-1);
  gap: var(--brxw-space-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vehicle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brxw-space-s);
}

.vehicle__photo {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .vehicles__list {
    grid-template-columns: var(--brxw-grid-2);
  }
}

/* --------------------------------------------------------------------------
   Desktop — hotspots placed over the map.

   Coordinates are percentages of the map's 1129 × 433 box, taken straight from
   the Figma node positions. They are design geometry rather than content, so
   they are keyed by :nth-child here instead of being threaded through the page
   JSON. The order is fixed by the artwork: the map is drawn around these four
   positions, so reordering the data would require new artwork anyway.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .vehicles__stage {
    width: 100%;
    /* The map is 1129 wide in the comp — narrower than the 1168 content rail.
       Sizing the stage to the rail stretched it and every hotspot with it. */
    max-width: 112.9rem;
    margin-inline: auto;
    aspect-ratio: var(--brxw-ratio-coursemap);
  }

  .vehicles__map {
    object-fit: contain;
  }

  .vehicles__map img {
    object-fit: contain;
  }

  .vehicles__list {
    position: absolute;
    inset: 0;
    display: block;
    gap: 0;
  }

  /* The <li> stays static so that BOTH the pill and the photo resolve their
     percentages against the stage. Making the <li> the positioned ancestor
     sized the photos against the pill instead — they collapsed to slivers. */
  .vehicle {
    position: static;
    display: contents;
  }

  .vehicle__pill,
  .vehicle__photo {
    position: absolute;
  }

  .vehicle__pill {
    z-index: 1;
    top: 17.32%;
    white-space: nowrap;
    text-transform: none;
  }

  .vehicle__photo {
    height: auto;
    max-width: none;
  }

  /* Photos 2–4 already match their Figma node ratios. The car source is
     393×285 with empty space above and below; the comp crops it to 273×103. */
  .vehicle:nth-child(1) .vehicle__photo {
    aspect-ratio: 273 / 103;
    object-fit: cover;
  }

  /* Percentages of the map's 1129 × 433 box, straight from the Figma node
     positions. Order is fixed by the artwork. */
  .vehicle:nth-child(1) .vehicle__pill { left: 10.54%; }
  .vehicle:nth-child(1) .vehicle__photo { left: 4.61%;  top: 35.57%; width: 24.18%; }

  .vehicle:nth-child(2) .vehicle__pill { left: 30.65%; }
  .vehicle:nth-child(2) .vehicle__photo { left: 28.79%; top: 29.10%; width: 18.07%; }

  .vehicle:nth-child(3) .vehicle__pill { left: 53.94%; }
  .vehicle:nth-child(3) .vehicle__photo { left: 53.85%; top: 29.56%; width: 17.54%; }

  .vehicle:nth-child(4) .vehicle__pill { left: 78.43%; }
  .vehicle:nth-child(4) .vehicle__photo { left: 78.21%; top: 30.72%; width: 16.47%; }
}
/*$vite$:1*/