/* ==========================================================================
   Bloomlake Transportation, design system + homepage styles
   Identity v3: "the printed ride guide", in the client's own colours. The blue
   scale is sampled off the oval decal on the Bloomlake vehicles; marigold stays
   on as the single warm accent. White ground, ledger panels. The logo is the
   client's own vehicle decal, adopted 2026-08-10.
   Flat: no gradients, no shadows, hairlines and strong rules instead. Sans
   display over serif body.
   Canonical class and token reference: assets/BRAND.md
   Standing rule: no em dashes anywhere in this codebase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color: Bloomlake blue. Sampled from the oval decal on the company vehicles,
     then extended into a scale. blue-500 IS the decal blue. */
  --blue-950: #0A2244;   /* deepest, footer ground */
  --blue-900: #123A6B;   /* deep section ground */
  --blue-800: #17497F;
  --blue-700: #1D5AA3;   /* interactive blue: buttons, links, rules. 6.9:1 on white */
  --blue-600: #2E6DBD;
  --blue-500: #567FCF;   /* THE decal blue, sampled off the vehicle door. Graphic fills only,
                            it is 3.9:1 on white so it never carries text */
  --blue-200: #B9D0EE;
  --blue-100: #DCE8F8;
  --blue-050: #F1F6FD;

  /* Color: marigold scale (the bloom, used with intent, never as wallpaper) */
  --gold-500: #E2A73B;   /* graphic accent: rules, petals, icons on dark */
  --gold-600: #C08A2D;   /* borders on light where 500 is too faint */
  --gold-700: #7A500E;   /* accent as TEXT, AA+ on white */
  --gold-100: #F9EAD0;   /* accent fills, notes */

  /* Color: neutrals */
  --white: #FFFFFF;      /* page ground. Plain white, deliberately not cream */
  --ink: #17202B;        /* body text, AAA on white */
  --ink-soft: #4C5768;   /* secondary text, AAA at body size on white */
  --line: #DDE4EE;       /* hairline borders on light */
  --line-deep: #2C5687;  /* hairline borders on deep blue */

  /* Legacy token aliases. forms.css and older markup reference the v1 lake
     and bloom names; they now resolve into the v2 scale. Do not use these
     names in new CSS, use the blue/gold names or the semantic aliases. */
  --lake-950: var(--blue-950);
  --lake-900: var(--blue-900);
  --lake-800: var(--blue-800);
  --lake-700: var(--blue-700);
  --lake-600: var(--blue-600);
  --lake-200: var(--blue-200);
  --lake-100: var(--blue-100);
  --lake-050: var(--blue-050);
  --bloom-600: var(--gold-600);
  --bloom-700: var(--gold-700);
  --bloom-100: var(--gold-100);
  --paper: var(--white);
  --cream: #F2F7FD;      /* text on deep blue backgrounds. Kept under the old name so
                            existing markup does not have to change */

  /* Semantic aliases */
  --color-bg: var(--white);
  --color-bg-tint: var(--blue-050);
  --color-bg-deep: var(--blue-900);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-inverse: var(--cream);
  --color-brand: var(--blue-700);
  --color-accent: var(--gold-500);
  --color-accent-text: var(--gold-700);
  --color-focus: var(--blue-700);

  /* Typography. Deliberate inversion of the usual pairing: a heavy humanist
     sans carries the headings, a print serif carries the body. */
  --font-display: "Seravek", "Avenir Next", "Avenir", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --font-body: Georgia, "Iowan Old Style", "Droid Serif", "Times New Roman", serif;

  /* Type scale (body never below 18px; Georgia sits at 19px for comfort) */
  --text-meta: 1rem;                                        /* 16px, labels and fine print only */
  --text-base: 1.1875rem;                                   /* 19px body floor */
  --text-lg: 1.3125rem;                                     /* 21px ledes */
  --text-xl: 1.5rem;                                        /* 24px card titles */
  --text-2xl: clamp(1.55rem, 1.25rem + 1.3vw, 2rem);        /* h3 / minor section heads */
  --text-3xl: clamp(1.95rem, 1.4rem + 2.4vw, 2.75rem);      /* h2 section titles */
  --text-hero: clamp(2.4rem, 1.6rem + 4vw, 3.8rem);         /* h1 hero only */

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.62;

  --tracking-wide: 0.16em; /* eyebrows, badges, small caps */

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

  /* Section rhythm */
  --section-pad: clamp(var(--space-8), 6vw, var(--space-9));

  /* Radii. Near-flat on purpose: panels sit like printed cards, not pillows. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px; /* deprecated, kept so legacy CSS cannot break. Unused. */

  /* Shadows: none. This identity separates surfaces with rules and color,
     never with soft shadows. Tokens kept so forms.css resolves cleanly. */
  --shadow-soft: none;
  --shadow-lift: none;

  /* Rules: the strong strokes that structure the page */
  --rule-accent: 4px;    /* marigold strips on header, deep sections, footer */
  --rule-panel: 3px;     /* blue top rule on ledger panels */

  /* Layout */
  --container-max: 72rem;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-quick: 160ms;
  --duration-calm: 320ms;

  /* Tap targets */
  --tap-min: 44px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-xl); font-weight: 700; }

p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

a {
  color: var(--color-brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-900);
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

strong {
  font-weight: 700;
}

/* Visible focus everywhere: blue ring on light, pale ring on deep */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--deep :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cream);
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  background: var(--blue-900);
  color: var(--cream);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
}

.skip-link:focus-visible {
  top: var(--space-3);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.section--tint {
  background: var(--color-bg-tint);
}

.section--deep {
  background: var(--color-bg-deep);
  border-top: var(--rule-accent) solid var(--gold-500);
  color: var(--color-text-inverse);
}

.section--deep h2,
.section--deep h3,
.section--deep p {
  color: var(--color-text-inverse);
}

.section--deep a:not(.btn) {
  color: var(--cream);
}

/* Section header block. Left-aligned with a marigold stub above the eyebrow;
   the centered-header habit belongs to other studios, not this one. */
.section-head {
  max-width: 50rem;
  margin-bottom: var(--space-7);
}

.section-head::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--rule-accent);
  background: var(--gold-500);
  border-radius: 2px;
  margin-bottom: var(--space-4);
}

/* Small-caps kicker above a heading */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.section--deep .eyebrow {
  color: var(--gold-500);
}

/* Large intro paragraph under a heading */
.lede {
  font-size: var(--text-lg);
  color: var(--color-text-soft);
}

.section--deep .lede {
  color: var(--blue-100);
}

/* Two-column split, stacks on mobile */
.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: start;
  }
}

/* Auto-fitting card grid */
.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out),
              color var(--duration-quick) var(--ease-out),
              border-color var(--duration-quick) var(--ease-out);
}

/* Primary: solid Bloomlake blue */
.btn--primary {
  background: var(--blue-700);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--blue-900);
  color: var(--white);
}

/* Outline: quiet secondary action on light backgrounds */
.btn--outline {
  background: transparent;
  color: var(--blue-800);
  border-color: var(--blue-700);
}

.btn--outline:hover {
  background: var(--blue-050);
  color: var(--blue-900);
}

/* Light: for use on deep backgrounds */
.btn--light {
  background: var(--white);
  color: var(--blue-900);
}

.btn--light:hover {
  background: var(--gold-100);
  color: var(--blue-950);
}

/* Compact button, header use */
.btn--compact {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  font-size: 1.0625rem;
}

/* Inline phone icon inside buttons */
.btn .btn-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-top: var(--rule-accent) solid var(--gold-500);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}

/* The mark is Sharif's own vehicle decal now, so it is an oval rather than a
   square tile: 300 by 200 viewBox, kept at 44px tall. The full logo carries the
   company name inside the oval, but at this size those two lines of type are
   mud, so the header uses the mark alone next to the text lockup. */
.brand-mark {
  width: 47px;
  height: 44px;
  flex: none;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--blue-900);
}

.brand-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* Wraps on small screens, it does not scroll horizontally. A swipeable nav hid
   FAQ and Contact off the right edge at 390px with no affordance that they were
   there, and this audience is seniors and caregivers on phones who will not go
   hunting. Contact is the conversion page, so it has to be visible. */
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  order: 3;
  width: 100%;
  padding-bottom: var(--space-1);
}

@media (min-width: 900px) {
  .site-nav {
    order: 0;
    width: auto;
    flex-wrap: nowrap;
    padding-bottom: 0;
  }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  background: var(--blue-050);
  color: var(--blue-900);
}

.nav-link[aria-current="page"] {
  background: var(--blue-050);
  color: var(--blue-900);
  font-weight: 700;
  box-shadow: inset 0 calc(-1 * var(--rule-panel)) 0 var(--gold-500);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(var(--space-8), 7vw, var(--space-9));
}

.hero-inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 7fr 5fr;
  }
}

.hero-copy .lede {
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero-hours {
  font-size: var(--text-meta);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
}

.hero-art {
  min-width: 0;
}

.hero-art svg {
  width: 100%;
  height: auto;
}

/* Credential badge row: flat rectangular tags, not pills */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--blue-200);
  border-left: var(--rule-panel) solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--blue-800);
}

.badge svg {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--gold-700);
}

/* --------------------------------------------------------------------------
   7. Cards, callouts, feature blocks
   Ledger panels: white, hairline border, one strong blue rule at the top.
   No shadows anywhere.
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: var(--rule-panel) solid var(--blue-700);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.card--flat {
  background: transparent;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.card h3,
.card h4 {
  margin-bottom: var(--space-3);
}

/* Square icon tile at the top of cards and trust items.
   Class name is historical (v1 drew circles); the shape is now a tile. */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--blue-050);
  color: var(--blue-700);
  margin-bottom: var(--space-4);
}

.icon-circle svg {
  width: 1.4rem;
  height: 1.4rem;
}

.card--accent .icon-circle {
  background: var(--gold-100);
  color: var(--gold-700);
}

/* Wide signature callout (Wait & Return, standing rides).
   A tinted slab with one thick marigold rule at its left edge. */
.callout {
  display: grid;
  gap: var(--space-6);
  background: var(--blue-050);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}

@media (min-width: 800px) {
  .callout {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}

.callout-art {
  width: clamp(72px, 10vw, 108px);
}

.callout .btn {
  margin-top: var(--space-4);
}

/* Simple feature column inside .split */
.feature h3 {
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   8. Photo band and TBD placeholders
   -------------------------------------------------------------------------- */
.photo-band {
  background: var(--color-bg-tint);
  padding-block: var(--space-7);
}

.photo-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.photo-slot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 15rem;
  padding: var(--space-6);
  text-align: center;
  background: var(--white);
  border: 1.5px dashed var(--blue-200);
  border-radius: var(--radius-md);
  color: var(--blue-700);
}

.photo-slot svg {
  width: 2.25rem;
  height: 2.25rem;
  opacity: 0.7;
}

.photo-slot figcaption {
  font-size: var(--text-meta);
  color: var(--ink-soft);
  max-width: 22ch;
}

/* Literal [[TBD: ...]] marker text. Keep the marker inside this span so it
   is easy to find and replace when the owner supplies the real thing. */
.tbd {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.95rem;
  color: var(--gold-700);
  word-break: break-word;
}

/* Muted inline note that carries a TBD marker inside body copy */
.tbd-note {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gold-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  color: var(--gold-700);
}

/* --------------------------------------------------------------------------
   9. Trust grid
   -------------------------------------------------------------------------- */
.trust-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.trust-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: var(--rule-panel) solid var(--blue-700);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.trust-item h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.trust-item p {
  color: var(--color-text-soft);
}

.trust-item .icon-circle {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
}

.trust-item .icon-circle svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* --------------------------------------------------------------------------
   10. Services grid
   -------------------------------------------------------------------------- */
.service-card {
  position: relative;
}

.service-card p {
  color: var(--color-text-soft);
}

/* Coming soon tag, used ONLY for wheelchair service until it launches */
.pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.service-card--soon {
  background: var(--white);
  border: 1.5px dashed var(--gold-600);
  border-top: 1.5px dashed var(--gold-600);
}

/* --------------------------------------------------------------------------
   11. Service areas
   -------------------------------------------------------------------------- */
.area-group {
  margin-bottom: var(--space-6);
}

.area-group h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-3);
  background: var(--white);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--blue-800);
}

/* --------------------------------------------------------------------------
   12. Destinations
   -------------------------------------------------------------------------- */
.dest-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.dest-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: var(--rule-panel) solid var(--blue-700);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.dest-group h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.dest-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dest-group li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  color: var(--color-text-soft);
}

.dest-group li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Small print disclaimer under a section */
.note-disclaimer {
  margin-top: var(--space-6);
  font-size: var(--text-meta);
  color: var(--color-text-soft);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   13. FAQ (details/summary, keyboard operable by default)
   Flat divided list, like an index in a printed guide. No boxes.
   -------------------------------------------------------------------------- */
.faq {
  max-width: 46rem;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus marker that turns into a close mark when open */
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-700);
  transition: transform var(--duration-quick) var(--ease-out);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--blue-700);
}

.faq-body {
  padding: 0 var(--space-2) var(--space-5);
  color: var(--color-text-soft);
}

/* On the deep background the divided list flips its rules and text */
.section--deep .faq-item,
.section--deep .faq-item:last-child {
  border-color: var(--line-deep);
}

.section--deep .faq-item summary,
.section--deep .faq-body {
  color: var(--cream);
}

.section--deep .faq-item summary::after {
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   14. Deep-section surfaces
   Panels keep their class names but flip to dark surfaces inside
   .section--deep, so light components can never strand pale text on white.
   -------------------------------------------------------------------------- */
.section--deep .card,
.section--deep .trust-item,
.section--deep .dest-group {
  background: var(--blue-800);
  border-color: var(--line-deep);
  border-top-color: var(--gold-500);
}

.section--deep .card--flat {
  background: transparent;
}

.section--deep .card h3,
.section--deep .card h4,
.section--deep .trust-item h3,
.section--deep .dest-group h3 {
  color: var(--cream);
}

.section--deep .card p,
.section--deep .trust-item p,
.section--deep .service-card p {
  color: var(--blue-100);
}

.section--deep .dest-group li {
  color: var(--blue-100);
  border-top-color: var(--line-deep);
}

.section--deep .dest-group li:first-child {
  border-top: 0;
}

.section--deep .icon-circle {
  background: var(--blue-950);
  color: var(--gold-500);
}

.section--deep .note-disclaimer {
  color: var(--blue-100);
}

.section--deep .chip {
  background: var(--blue-800);
  border-color: var(--line-deep);
  color: var(--cream);
}

.section--deep .area-group h3 {
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--blue-950);
  border-top: var(--rule-accent) solid var(--gold-500);
  color: var(--cream);
  padding-block: var(--space-8) var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-brand .brand-name {
  color: var(--cream);
}

.footer-brand .brand-tag {
  color: var(--gold-500);
}

.footer-brand p {
  color: var(--blue-100);
  margin-top: var(--space-4);
}

.footer-col h2 {
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-4);
}

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

.footer-list li {
  margin-bottom: var(--space-2);
  color: var(--blue-100);
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--cream);
  text-decoration: none;
}

.footer-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom {
  border-top: 1px solid var(--line-deep);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-meta);
  color: var(--blue-200);
}

.footer-bottom p {
  color: var(--blue-200);
}

/* --------------------------------------------------------------------------
   16. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* effects.js already refuses to run under reduced motion, but the card must
     also sit flat if the properties were set before the preference changed. */
  .tilt,
  .tilt * {
    transform: none !important;
  }

  .tilt::after { display: none; }
}

/* Real photographs, as distinct from .photo-slot which is the dashed empty state.
   Bloomlake's own vehicle photos arrived 2026-08-09 from the Google Business
   Profile, so the empty placeholders came out and these went in. */
.photo-figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--blue-200);
  background: var(--white);
}

.photo-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-meta);
  color: var(--ink-soft);
  line-height: var(--leading-snug);
}

/* --------------------------------------------------------------------------
   17. Booking first
   Sharif's direction 2026-08-10: the booking form is the front-and-centre
   action on every page, and the phone number is the fallback rather than the
   headline. Everything here exists to serve that inversion.
   -------------------------------------------------------------------------- */

/* Header: Book a ride is the solid button, the number sits beside it as a
   plain link so it is still one tap away for anyone who would rather talk. */
.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--blue-800);
  text-decoration: none;
  white-space: nowrap;
}

.phone-link:hover {
  color: var(--blue-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.phone-link svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  color: var(--gold-700);
}

/* Bigger primary button for the one action the page is built around */
.btn--lg {
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}






/* The hero is a single column now. The booking form outgrew it once it became
   the same eleven field form as the contact page, so it moved into its own
   section directly below, and the hero went back to being one clear headline
   with one clear button. */
.hero-inner { grid-template-columns: 1fr; }

.hero-copy .lede,
.hero-copy h1 { max-width: 34rem; }

/* Anchor targets clear the sticky header instead of hiding underneath it.
   The header is sticky and changes height a lot, so a single value is wrong
   almost everywhere. Measured heights: 246px below about 560px wide (the nav
   wraps onto two rows), 138px up to 1199px (the nav has its own row), 78px from
   1200px (everything on one line). Erring high is harmless, it just leaves
   whitespace above the heading; erring low hides the heading under the header,
   which is what a single 6rem value did on a phone. */
/* The skip link target wants the whole header cleared. */
#main {
  scroll-margin-top: 9.75rem;
}

/* The section anchors do NOT, and this is the bit that was wrong. The anchor
   was landing the section's top edge below the header correctly, but a section
   carries about 120px of its own top padding, so the heading a visitor is
   actually looking for ended up another 120px down and the form with it.
   Tucking the section's top edge under the header puts the HEADING just below
   it, which is what "take me to the form" means. */
#book,
#faq {
  scroll-margin-top: 2.5rem;
}

@media (min-width: 1200px) {
  #main { scroll-margin-top: 6rem; }
  #book,
  #faq { scroll-margin-top: 0.5rem; }
}



/* Adding the phone number beside the Book a ride button pushed the header
   27px past its container at 1440px, which wrapped the actions onto a second
   row under the brand. Tightening the nav padding and the column gap above
   900px buys back 56px, so the whole bar sits on one line again. Below 900px
   the nav still takes its own full-width row, which is the intended behaviour. */
@media (min-width: 900px) {
  .header-inner { column-gap: var(--space-4); }
  .nav-link { padding-inline: var(--space-2); }
}

/* Portrait variant. The wheelchair-ramp photograph is a tall shot straight up
   the ramp, and cropping it to the 4:3 default would cut off either the van or
   the far end of the ramp, which is the whole point of the picture. */
.photo-figure--tall img { aspect-ratio: 3 / 4; }

@media (min-width: 800px) {
  .photo-figure--tall { max-width: 26rem; }
}

/* Contact page: give the form column the larger share. It carries eleven fields;
   the aside carries three short blocks. An even split starved the form. */
@media (min-width: 900px) {
  .split--form { grid-template-columns: 3fr 2fr; }
}

/* --------------------------------------------------------------------------
   18. Interactive card tilt
   Ported from the Muntas Distribution site because Sharif saw it there and
   asked for the same feel. The mechanics are identical; the look is not. Muntas
   tilts hard and lights up with an amber sheen over a soft drop shadow. This
   identity is flat, so here the resting state stays perfectly flat and every
   effect is a hover state only: a smaller tilt, a Bloomlake blue sheen, the
   panel rule deepening, and the card content lifting off the face.

   The pointer position arrives as --rx, --ry, --mx and --my from effects.js.
   Cards degrade to a plain static card if the script never runs, and the tilt is
   switched off entirely under prefers-reduced-motion at the bottom of the file.
   -------------------------------------------------------------------------- */
.js-tilt-group { perspective: 1100px; }

.tilt {
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--lift, 0px), 0);
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s var(--ease-out);
  will-change: transform;
}

/* Pointer-following sheen. Sits under the content and never blocks a click.
   Clipped to the card's own radius rather than putting overflow:hidden on the
   card, because .photo-figure already relies on its own overflow. */
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(86, 127, 207, 0.16),
    transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.tilt:hover::after,
.tilt:focus-within::after { opacity: 1; }

/* The lift. A shadow appears only while the pointer is on the card, so the page
   at rest still has no shadows anywhere in it. */
.tilt:hover,
.tilt:focus-within {
  --lift: -5px;
  border-color: var(--blue-200);
  box-shadow: 0 14px 30px -18px rgba(10, 34, 68, 0.45);
}

.card.tilt:hover,
.card.tilt:focus-within { border-top-color: var(--blue-600); }

/* Lifting the content off the card face is what actually reads as depth.
   Text sits above the sheen layer as well, which is why the z-index is here. */
.tilt > * {
  position: relative;
  z-index: 2;
  transform: translateZ(18px);
}

.tilt > h3 { transform: translateZ(26px); }

.tilt > .icon-circle,
.tilt > .pill {
  transition: transform var(--duration-calm) var(--ease-out),
              background-color var(--duration-calm) var(--ease-out),
              color var(--duration-calm) var(--ease-out);
}

.tilt:hover > .icon-circle,
.tilt:focus-within > .icon-circle {
  transform: translateZ(34px) scale(1.06);
  background: var(--blue-700);
  color: var(--white);
}

/* Photo cards tilt too, and the picture itself pushes forward slightly. */
.photo-figure.tilt { overflow: hidden; }

.photo-figure.tilt img {
  transition: transform var(--duration-calm) var(--ease-out);
}

.photo-figure.tilt:hover img,
.photo-figure.tilt:focus-within img { transform: scale(1.04); }

/* Hero photograph. Restores the two-column hero the booking panel used to
   occupy, this time with the client's own vehicle in it. Eager, not lazy: it is
   the largest thing above the fold and lazy-loading it only delays the paint. */
.hero-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: var(--rule-accent) solid var(--blue-700);
}

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

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 6fr 5fr; align-items: center; }
}

/* Adding "Home" to the nav pushed the header 50px past its container again and
   wrapped it onto two rows. The fix is width, not smaller type: this nav is for
   older decision makers who asked for the word Home in the first place, so the
   label size stays and the sticky bar gets a wider container than the body
   content. Nothing below 1200px changes, where the nav already has its own row. */
@media (min-width: 1200px) {
  /* The sticky bar gets a wider container than the body, and a tighter inline
     padding. Between 1200 and 1279 the container is capped by the viewport
     rather than by the 80rem, and that band is where the bar runs out of room:
     brand plus nav plus actions is about 1136px there. The reduced padding
     leaves 1152px. Swapping the square tile for Sharif's oval mark cost 22px of
     that budget on its own. */
  .site-header .container {
    max-width: 80rem;
    padding-inline: var(--space-5);
  }
  .header-inner { column-gap: var(--space-3); }
}

/* The footer has room for the real logo at a size where the wording inside the
   oval actually reads, so it gets the full decal instead of a mark plus a text
   lockup. Dark variant: the footer ground is deep navy, the same sort of ground
   the decal lives on in real life. */
.footer-logo {
  display: inline-block;
  max-width: 15rem;
  margin-bottom: var(--space-5);
}

.footer-logo img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   19. Hero, Sharif's version
   Two changes he asked for on 2026-08-11: the booking button and the phone
   number move to the very top of the page, directly under the header and above
   the headline, and the Saint Paul riverfront sits behind the hero.
   -------------------------------------------------------------------------- */

/* The action row, first thing under the header. */
.hero-actions-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* The hero's own top padding is dropped: the action row supplies the space now,
   and Sharif asked for the button to sit JUST below the header, not a hundred
   pixels down the page. */
.hero { padding-top: 0; }

/* The Saint Paul riverfront behind the hero, kept LIGHT.

   Sharif's call after seeing the dark version: as little gradient as possible so
   the city is easy to see, and near-black type with the blue button back.

   That is workable because of what is actually in the photograph. The sky is a
   pale dusk peach, light enough that near-black text scores over 10:1 on it with
   barely any veil at all. The buildings are the dark part, so the layout keeps
   them BELOW the copy: the veil is heavy across the text and clears almost
   completely underneath it, where the hero's bottom padding leaves a stretch of
   skyline with nothing written on it.

   Every stop below was set by measuring rendered pixels at seven widths, not by
   eye. See tools note in BRAND.md. */
.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--white);
  /* As little veil as the type will tolerate, and it is close to flat rather
     than a gradient, so the whole photograph stays visible: sky, skyline,
     riverbank and water.

     Why 0.42 and not less. The darkest part of the photograph is the buildings
     at roughly #5A5A52. A white scrim at 0.42 lifts that to about #B0B0AC,
     which puts near-black text at 6:1, comfortably past the 4.5 floor. At 0.25
     the same text falls to about 4.2 and fails. So this is the thinnest veil
     that keeps every word readable over the worst patch of the picture, which
     is exactly what was asked for.

     It is slightly heavier at the very top only, because the headline and the
     eyebrow sit there and a touch more lift costs nothing visually. */
  /* Heavier only where the words are, thin where the skyline is. A flat 0.42
     veil across the whole hero looked best but FAILED at 480, 900, 1024 and
     1280px: the hours line bottomed out at 4.15 against a 4.5 floor, sitting on
     the dark buildings. Rather than thicken the whole thing, the veil leans
     left, behind the copy, and stays thin on the right where the skyline and
     the water are. The picture is still fully there, it is just protected under
     the text. */
  background-image:
    linear-gradient(96deg,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(255, 255, 255, 0.70) 34%,
      rgba(255, 255, 255, 0.50) 56%,
      rgba(255, 255, 255, 0.34) 78%,
      rgba(255, 255, 255, 0.30) 100%),
    url("/assets/photos/st-paul-skyline.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  /* scroll, never fixed: a fixed background stutters badly on iOS */
  background-position: center, center center;
  background-attachment: scroll, scroll;
  border-bottom: var(--rule-accent) solid var(--gold-500);
  padding-bottom: var(--space-8);
}

/* A phone stacks the copy across the full width, so a left-leaning veil does
   nothing there. Narrow screens get a flat one instead, and it has to be a
   little heavier because every word sits over the picture. */
@media (max-width: 860px) {
  .hero {
    background-image:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.66) 40%,
        rgba(255, 255, 255, 0.62) 100%),
      url("/assets/photos/st-paul-skyline.jpg");
  }
}

/* The small type goes to full ink over a photograph. --ink-soft is a grey meant
   for plain white and it has no margin to spare here; --ink buys about two
   points of contrast for nothing. */
.hero .lede,
.hero .hero-hours { color: var(--ink); }

/* Chips stay opaque so they are readable wherever they land. */


/* Photographer credit. CC BY 2.0 requires attribution, so it is visible rather
   than buried in a comment. */
.photo-credit {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  line-height: var(--leading-snug);
  color: var(--blue-200);
}

.photo-credit a { color: var(--blue-200); }

/* Three vehicles side by side, the arrangement Sharif liked at the foot of
   thedoctorride.com. Three columns on a wide screen, one on a phone. Fixed at
   three rather than auto-fit, because "three side by side" is the actual
   request and auto-fit would drop to two at some widths. */
.fleet-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

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

/* Equal picture heights across the row, whatever shape the source photo is.
   The wheelchair shot is portrait and the other two are landscape. */
.fleet-grid .photo-figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fleet-grid .photo-figure figcaption strong {
  display: block;
  font-family: var(--font-display);
  color: var(--blue-900);
  margin-bottom: var(--space-1);
}

/* Credentials strip, at the foot of the page since 2026-08-11. Slim by design:
   it is reassurance for anyone who scrolled that far, not a headline. */
.credentials-strip {
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
}

.credentials-strip .badge-row { margin-top: 0; }

.credentials-strip .note-disclaimer { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   20. Mobile navigation
   Added 2026-08-11. There was no menu button at all: below 900px the six links
   simply wrapped onto two more rows, which cost about 150px at the very top of
   every page. That was a deliberate earlier choice, all links always visible
   for an older audience, but it works against the same client's request to stop
   the top of the page being eaten by things that are not the booking button.

   Progressive enhancement. The button ships `hidden` and the nav ships visible;
   nav.js reveals the button and collapses the nav. If the script never runs, a
   visitor gets every link rather than a dead control.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--blue-700);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--blue-800);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle svg { width: 1.35em; height: 1.35em; flex: none; }

.nav-toggle:hover { background: var(--blue-050); }

@media (max-width: 899px) {
  /* Only once the script has taken over. */
  .js-nav .nav-toggle { display: inline-flex; }

  /* The button shares the first row with the logo, and the phone number and
     the booking button take the second. Three header rows become two, which is
     another 57px back at the top of every page. */
  .js-nav .header-actions { width: 100%; order: 3; }

  .js-nav .site-nav { display: none; }

  .js-nav .site-nav[data-open] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 4;
    margin-top: var(--space-3);
    padding-bottom: 0;
    border-top: 1px solid var(--line);
  }

  /* Full width rows with generous targets: this is a phone menu for people who
     may not have steady hands. */
  .js-nav .site-nav[data-open] .nav-link {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: var(--space-3);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
}

@media (min-width: 900px) {
  /* The button never exists on the wide layout, whatever the script did. */
  .nav-toggle { display: none !important; }
}

/* --------------------------------------------------------------------------
   21. Phone type scale
   Sharif asked for everything two points smaller on a phone. Applied to the
   tokens rather than to individual rules, so the whole scale moves together and
   nothing drifts out of proportion.

   Two floors are held on purpose. Body text stops at 17px rather than following
   the rule all the way down: this site is read by seniors and by caregivers
   squinting at a phone in a hospital corridor, and the identity's own standard
   was never below 18px, so 17 is already a concession. And form inputs inherit
   --text-base, which must stay at 16px or above or iOS zooms the page in the
   moment somebody taps a field, which on a booking form is worse than any
   amount of saved space.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --text-meta: 0.875rem;   /* 16 -> 14, fine print and hints */
    --text-base: 1.0625rem;  /* 19 -> 17, body floor, also form inputs */
    --text-lg: 1.1875rem;    /* 21 -> 19, ledes */
    --text-xl: 1.375rem;     /* 24 -> 22, card titles */
    --text-2xl: clamp(1.4rem, 1.1rem + 1.3vw, 1.75rem);
    --text-3xl: clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem);
    --text-hero: clamp(2.05rem, 1.35rem + 4vw, 3.3rem);
  }
}

/* Very narrow phones. At 360px the brand and the Menu button together came to
   exactly the container width, so the header wrapped to three rows and stood
   239px tall against 134px everywhere else. Trimming the wordmark and the
   button padding buys the 40px that keeps it on two. */
@media (max-width: 400px) {
  /* Measured at 360px: brand 197 + gap 24 + Menu 112 = 333 against 320 of
     usable width, so the button wrapped, and phone 173 + gap 24 + Book 145 =
     342 wrapped again. Three rows, 239px tall, against 131px on a 390px phone.
     Trimming the gap and the labels gets both rows under 320. Heights are
     untouched: every control keeps its 44px target. */
  .header-inner { column-gap: var(--space-3); }
  .brand-name { font-size: 1.15rem; }
  .nav-toggle { padding-inline: var(--space-2); font-size: 1rem; }
  .header-actions .phone-link { font-size: 1rem; }
  .header-actions .btn--compact { padding-inline: var(--space-3); font-size: 1rem; }
}

/* Smallest phones still in use, roughly a 2016 iPhone SE. At 320px even the
   trimmed header ran to three rows, and tapping Book a ride then tucked the
   heading behind it. Dropping the "TRANSPORTATION" line under the wordmark is
   enough: the oval and the name still identify the company, and the strapline
   is repeated in the footer. */
@media (max-width: 359px) {
  .brand-tag { display: none; }
  .brand-name { font-size: 1.05rem; }

  /* The header is still taller here than on a normal phone, so the anchor
     offset has to grow with it or the heading ends up behind it. */
  #book,
  #faq { scroll-margin-top: 5.5rem; }
}

/* --------------------------------------------------------------------------
   22. Numbered steps
   "What happens after you press send." The single most common unspoken worry
   on this site is not price or coverage, it is whether pressing the button has
   committed anybody to anything. Three short steps answer that, and step three
   spends the site's best trust asset (the oval on the door) at the exact moment
   the reader is deciding whether to believe us.

   Built as an ordered list because it is one. The visible numerals are marked
   aria-hidden in the markup so a screen reader hears the list's own numbering
   rather than each number twice.
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* The numeral is the one place the display face earns its keep here: it has to
   read as a step marker at a glance, not as body copy that happens to be a digit. */
.step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--blue-050);
  border: 1px solid var(--blue-200);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.step p {
  margin: 0;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   23. Prose column
   For pages that are mostly reading rather than scanning, like the privacy
   page. The site's normal container is sized for cards and grids, and running
   plain body copy the full width of it gives lines far too long to track
   comfortably, which matters more here than anywhere: this is the page a
   worried relative reads carefully before deciding to trust us with a parent.
   -------------------------------------------------------------------------- */
.container--prose { max-width: 46rem; }

.container--prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.container--prose h2:first-child { margin-top: 0; }

.container--prose p {
  margin: 0 0 var(--space-4);
  max-width: none;
}

/* Sits under the submit button on both booking forms. The form asks for a home
   address, a clinic name and a note about mobility, which is a lot to hand over
   to a company you have not met, and until now nothing on the page said what
   happened to any of it. */
.form-privacy {
  margin: var(--space-4) 0 0;
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}