/* ==========================================================================
   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, route-line motif.
   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;
}

.brand-mark {
  width: 44px;
  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 {
  background: var(--color-bg);
  padding-block: clamp(var(--space-8), 7vw, var(--space-9));
  border-bottom: 1px solid var(--line);
}

.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);
}

/* Credential badges and opening hours, moved out of the hero copy so that on a
   phone the form is reached before them rather than after them. */
.hero-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.hero-foot .badge-row { margin-top: 0; }

.hero-foot .hero-hours { margin-top: var(--space-4); }

/* 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. */
#book,
#faq,
#main {
  scroll-margin-top: 16.5rem;
}

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

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

/* 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; }
}