:root {
  --deep-teal: #1B4D5C;
  --warm-gold: #D4A853;
  --warm-gold-text: #6B4A0F;
  --warm-gold-hero: #F0C97A;
  /* Halo bullets on dark teal — gold core + soft ring (keep; don’t flatten) */
  --bullet-halo-core: var(--warm-gold-hero);
  --bullet-halo-ring: color-mix(in srgb, var(--warm-gold-hero) 22%, transparent);
  --bullet-halo-size: 0.4rem;
  --bullet-halo-ring-width: 3px;
  --soft-sand: #F5EDE0;
  --driftwood: #E8DFD0;
  --muted-grey: #3A5A63;
  --body-secondary: #2d4a52;
  --white: #fff;
  --bg-subtle: #F8FAFA;

  /* Dedicated dark ink for text ON gold fills — #1B4D5C on #D4A853 measures ~4.2:1,
     which fails WCAG AA (4.5:1) at the button's actual 15px/600 size. This measures ~6.2:1. */
  --ink-on-gold: #12313C;

  /* Form validation — #B3261E on white measures ~6.5:1, clears AA for text + UI outlines. */
  --error-red: #B3261E;

  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Lora, Georgia, serif;

  /*
   * =========================================================================
   * TYPE SYSTEM
   * -------------------------------------------------------------------------
   * 1. Primitives (--text-*): fixed size scale. Never invent new rem literals
   *    in components — pick the nearest step.
   *
   * 2. Leading / weight (--leading-*, --weight-*): shared rhythm for copy.
   *
   * 3. Roles (--type-*): what base elements and components consume.
   *    Prefer a role (body / lede / ui / meta / h1–h3) over a primitive when
   *    the meaning matches. Components may set
   *      font-size: var(--text-sm);
   *    or remap a local token:
   *      --card-title-size: var(--text-xl);
   *
   * 4. Display clamps (--type-h1/h2/h3, --type-display*): named once here.
   * =========================================================================
   */

  /* 1. Size primitives — fixed */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.85rem;
  --text-4xl: 1.75rem; /* process index / large numerals */

  /* 2. Leading + weight */
  --leading-tight: 1.2;
  --leading-snug: 1.45;
  --leading-body: 1.65;
  --leading-lede: 1.7;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* 3. Semantic roles */
  --type-body-size: var(--text-base);
  --type-body-leading: var(--leading-body);
  --type-body-weight: var(--weight-regular);

  --type-lede-size: var(--text-base);
  --type-lede-leading: var(--leading-lede);

  --type-eyebrow-size: var(--text-2xs);
  --type-eyebrow-weight: var(--weight-semibold);
  --type-eyebrow-tracking: 0.14em;

  --type-ui-size: var(--text-md);
  --type-ui-weight: var(--weight-semibold);

  --type-meta-size: var(--text-xs);

  /* 4. Heading / display clamps
   * Preferred term is rem + vw (never bare vw) — pure-vw text sizing can fail
   * WCAG 1.4.4 Resize Text, since some zoom mechanisms scale rem but not vw.
   * rem coefficient below fits the previous pure-vw curve to a 400–1200px
   * fluid range, matching --type-display's existing rem+vw pattern.
   */
  --type-h1: clamp(var(--text-3xl), 1.15rem + 2.8vw, 3.25rem);
  --type-h2: clamp(var(--text-2xl), 1.175rem + 1.3vw, 2.15rem);
  --type-h3: clamp(var(--text-lg), 1.038rem + 0.35vw, 1.3rem);
  --type-display: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  --type-display-sm: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);

  /*
   * =========================================================================
   * SPACING SYSTEM (mobile-first)
   * -------------------------------------------------------------------------
   * Layers
   * 1. Primitives (--space-*): fixed 4px grid. Gaps, control pads, icons.
   *    Never remap these in media queries.
   *
   * 2. Rhythm ladder (--rhythm-*-0…3): page-structure steps. Edit values HERE.
   *    Step 0 = default (<640), 1 = sm (≥640), 2 = md (≥768), 3 = lg (≥1024).
   *
   * 3. Semantic roles (--section-y, --panel-pad, --section-stack-gap,
   *    --hero-pad-*, …): what page chrome consumes. They alias the active
   *    ladder step. HTML uses .section-y / .section-follow / sibling rules —
   *    never a space-step class (u-mt-8).
   *
   * 4. Component tokens (--split-gap, --process-pad-y, …): defined on the
   *    component root, consumed by its children.
   *
   * 5. Density contexts: body.page--interior may point roles at denser steps
   *    on small screens, then rejoin the shared ladder at md.
   *
   * Governance (enforced by tools/_check_spacing.py)
   * A. Justification — every --rhythm-* token needs a comment (same line or
   *    the line above) explaining why no existing role fits. Ladder steps
   *    0–3 may share a group comment; dense/tight/lead variants need their
   *    own reason (cramped phone, sticky subnav, etc.).
   * B. Token consumption — component rules may only consume tokens. Literal
   *    whitelist: values under 0.25rem / 4px (optical nudges), hairline
   *    borders (≤2px), and fixed-chrome measurements that carry an inline
   *    comment stating what chrome they clear.
   *    Font-relative nudges (≤0.6em): glyph/bullet/icon optical alignment
   *    (margin-top/padding on ::before dots, icons, small-caps). Must scale
   *    with the element's own font-size, so em is required — never remap
   *    these to tokens or across breakpoints; each carries a why-comment.
   *    Also allowed (do not remap in @media): .fit-bar__door-mark top/bottom
   *    overhang (0.25rem / 0.375rem); checkbox-label padding-block 0.35rem
   *    (44px hit area).
   * C. Media queries remap tokens, never spacing-property literals —
   *    e.g. --split-gap: var(--space-10); not gap: 2.5rem;. Same whitelist
   *    as B.
   *
   * Breakpoints (spacing + chrome only):
   *   default  < 640px
   *   sm       ≥ 640px
   *   md       ≥ 768px
   *   lg       ≥ 1024px
   * Column/grid breaks (700/900/etc.) are layout — not spacing scale steps.
   * =========================================================================
   */

  /* 1. Primitives — fixed */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* 2. Rhythm ladder — values live once.
     Why each family exists (Rule A): section = marketing band breathing;
     compact = interior bands, one notch tighter than marketing; cta =
     conversion bands pull more air than scannable body sections; gutter =
     container side padding, tracks viewport width not content height;
     panel/grid/after-head/head-gap match existing panel chrome, --grid-gap,
     and intro→body steps respectively; lead/hero-* size the hero around its
     H1 + CTA stack. Dense/tight variants exist for interior phones and
     sticky-subnav clearance — reasons inline on each token below. */
  --rhythm-section-0: 3.25rem;
  --rhythm-section-1: 4.75rem;
  --rhythm-section-2: 5.5rem;
  --rhythm-section-3: 6.5rem;
  --rhythm-section-dense: var(--space-8); /* interior < md */

  --rhythm-compact-0: var(--space-6);
  --rhythm-compact-1: var(--space-8);
  --rhythm-compact-2: 2.25rem; /* between sm and lg density — not a primitive value */
  --rhythm-compact-3: var(--space-10);

  --rhythm-cta-0: 3.75rem;
  --rhythm-cta-1: 4.5rem;
  --rhythm-cta-2: var(--space-20);
  --rhythm-cta-3: 5.5rem;
  /* Interior phone: mid-page CTAs stay denser than marketing section-y */
  --rhythm-cta-dense: var(--space-10);

  --rhythm-gutter-0: 1.5rem;
  --rhythm-gutter-1: 2rem;
  --rhythm-gutter-3: 2.5rem; /* md keeps step 1 */

  --rhythm-panel-0: var(--space-6);
  --rhythm-panel-2: var(--space-7);
  --rhythm-panel-3: var(--space-8);

  --rhythm-grid-0: var(--space-5);
  --rhythm-grid-2: var(--space-6);

  --rhythm-after-head-0: var(--space-6);
  --rhythm-after-head-2: var(--space-8);
  /* Interior phone: room after intro before the first block (was space-4 — cramped) */
  --rhythm-after-head-dense: var(--space-5);
  --rhythm-after-head-tight-0: var(--space-4);
  --rhythm-after-head-tight-2: var(--space-6);

  --rhythm-head-gap-0: var(--space-3);
  /* Interior phone: eyebrow → title → lede need the same step as desktop heads */
  --rhythm-head-gap-dense: var(--space-3);

  /* Interior phone: first band after sticky subnav — denser than full section-y */
  --rhythm-lead-dense: var(--space-8);
  /* After sticky subnav at tablet — step between dense lead and full section-y */
  --rhythm-lead-2: var(--space-10);

  --rhythm-hero-pad-top-0: var(--space-4);
  --rhythm-hero-pad-top-2: var(--space-8);
  --rhythm-hero-pad-bottom-0: var(--space-7);
  --rhythm-hero-pad-bottom-2: var(--space-10);
  --rhythm-hero-pad-bottom-3: var(--space-20);
  --rhythm-hero-text-0: var(--space-3);
  --rhythm-hero-text-2: var(--space-5);
  --rhythm-hero-copy-0: var(--space-4);
  --rhythm-hero-copy-2: var(--space-6);
  --rhythm-hero-cta-0: var(--space-2);
  --rhythm-hero-cta-2: var(--space-3);

  /* 3. Semantic roles — active step (default = 0 / mobile) */
  --section-y: var(--rhythm-section-0);
  --section-y-compact: var(--rhythm-compact-0);
  --section-y-cta: var(--rhythm-cta-0);
  --section-y-lead: var(--section-y);
  --section-after-head: var(--rhythm-after-head-0);
  --section-after-head-tight: var(--rhythm-after-head-tight-0);
  --section-head-gap: var(--rhythm-head-gap-0);
  --section-head-gap-tight: var(--space-2);
  /* Stacked blocks inside a section. Same ladder as after-head — edit there. */
  --section-stack-gap: var(--rhythm-after-head-0);
  --grid-gap: var(--rhythm-grid-0);
  --panel-pad: var(--rhythm-panel-0);
  --rw-gutter-x: var(--rhythm-gutter-0);

  /* Widths / measures — match live theme page rail (input.css --rw-max-page) */
  --rw-max-page: 1200px;
  --rw-readable: min(36rem, 100%);
  --rw-measure-faq: min(40rem, 100%);
  --rw-measure-care: min(48rem, 100%);

  --radius: 0.75rem;
  --radius-lg: 1.15rem;

  /* Stacking scale — global layers only (things that can plausibly stack
   * against OTHER components on the page). Values of 1–3 used elsewhere to
   * order sub-elements *within* a single already-isolated stacking context
   * (e.g. an image behind its own caption) are local compositing, not part
   * of this scale, and stay as literals. Generous gaps left for insertions. */
  --z-subnav: 10;
  --z-mobile-nav: 20;
  --z-header: 30;
  --z-nav-dropdown: 40;
  --z-cookie: 90;
  --z-skip-link: 100;
  --z-modal: 1000;

  /* Motion durations — the two in active use; component-local literals
   * outside this pair (e.g. a slower lightbox fade) stay inline with a
   * comment, per the token-consumption rule above. */
  --duration-fast: 0.2s;
  --duration-base: 0.25s;

  /* Hero rhythm — aliases ladder; remapped at md / lg below */
  --hero-pad-top-extra: var(--rhythm-hero-pad-top-0);
  --hero-pad-bottom: var(--rhythm-hero-pad-bottom-0);
  --hero-text-gap: var(--rhythm-hero-text-0);
  --hero-copy-gap: var(--rhythm-hero-copy-0);
  --hero-cta-gap: var(--rhythm-hero-cta-0);
  --hero-measure: min(34rem, 100%);
  --hero-title-measure: min(14em, 100%);
  --hero-content-measure: min(40rem, 100%);
  --hero-min-h: min(70svh, 34rem);
  /* Concept review banner removed — keep token at 0 so offsets stay consistent */
  --banner-h: 0px;
  /* Header padding (space-4 × 2) + nav/toggle row (2.75rem) */
  --header-offset: 4.75rem;
  /* Sticky subnav height — 0 until a page actually has .subnav */
  --subnav-h: 0px;
  /* Interior stage height — desktop only; phones stay content-sized */
  --hero-interior-min-h: 0;
}

/* sm ≥ 640 — gutters + first section step */
@media (min-width: 640px) {
  :root {
    --section-y: var(--rhythm-section-1);
    --section-y-compact: var(--rhythm-compact-1);
    --section-y-cta: var(--rhythm-cta-1);
    --rw-gutter-x: var(--rhythm-gutter-1);
  }
}

/* md ≥ 768 — tablet rhythm + hero settles into desktop padding */
@media (min-width: 768px) {
  :root {
    --section-y: var(--rhythm-section-2);
    --section-y-compact: var(--rhythm-compact-2);
    --section-y-cta: var(--rhythm-cta-2);
    --section-after-head: var(--rhythm-after-head-2);
    --section-after-head-tight: var(--rhythm-after-head-tight-2);
    --section-stack-gap: var(--rhythm-after-head-2);
    --grid-gap: var(--rhythm-grid-2);
    --panel-pad: var(--rhythm-panel-2);
    --hero-pad-top-extra: var(--rhythm-hero-pad-top-2);
    --hero-pad-bottom: var(--rhythm-hero-pad-bottom-2);
    --hero-text-gap: var(--rhythm-hero-text-2);
    --hero-copy-gap: var(--rhythm-hero-copy-2);
    --hero-cta-gap: var(--rhythm-hero-cta-2);
    --hero-min-h: min(90svh, 50rem);
    /* Keep in sync with .site-header: pad-block + 2.75rem nav row (was 4.5 — clipped subnav) */
    --header-offset: 4.75rem;
    /* Let the lede/tldr measure breathe with the viewport instead of
       staying pinned at the mobile 34rem cap — it was reading noticeably
       narrower than the hero content column it sits in. */
    --hero-measure: clamp(30rem, 58vw, 38rem);
  }
}

/* lg ≥ 1024 — full desktop air */
@media (min-width: 1024px) {
  :root {
    --section-y: var(--rhythm-section-3);
    --section-y-compact: var(--rhythm-compact-3);
    --section-y-cta: var(--rhythm-cta-3);
    --rw-gutter-x: var(--rhythm-gutter-3);
    --panel-pad: var(--rhythm-panel-3);
    --hero-pad-bottom: var(--rhythm-hero-pad-bottom-3);
    --hero-min-h: min(92svh, 54rem);
    --hero-interior-min-h: min(42svh, 26rem);
    --hero-measure: clamp(34rem, 50vw, 46rem);
  }
}

/*
 * 4. Density — interior pages: denser mobile bands; section-y rejoins at md,
 *    post-subnav lead steps up at md then matches section-y at lg.
 *    Remap semantic roles only; components keep reading the same tokens.
 */
body.page--interior {
  --section-y: var(--rhythm-section-dense);
  --section-y-cta: var(--rhythm-cta-dense);
  --section-y-lead: var(--rhythm-lead-dense);
  --section-after-head: var(--rhythm-after-head-dense);
  --section-stack-gap: var(--rhythm-after-head-dense);
  --section-head-gap: var(--rhythm-head-gap-dense);
  --rw-measure-care: 100%;
}
@media (min-width: 768px) {
  body.page--interior {
    --section-y: var(--rhythm-section-2);
    --section-y-cta: var(--rhythm-cta-2);
    /* Sticky subnav already frames the band — don’t dump full section-y on top */
    --section-y-lead: var(--rhythm-lead-2);
    --section-after-head: var(--rhythm-after-head-2);
    --section-stack-gap: var(--rhythm-after-head-2);
    --section-head-gap: var(--rhythm-head-gap-0);
    --rw-measure-care: min(48rem, 100%);
  }
}
@media (min-width: 1024px) {
  body.page--interior {
    --section-y: var(--rhythm-section-3);
    --section-y-cta: var(--rhythm-cta-3);
    --section-y-lead: var(--section-y);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Match hero top so rubber-band overscroll doesn’t flash a random void colour */
  background: var(--deep-teal);
  overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  color: var(--deep-teal);
  background: var(--white);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}

/* In-page anchors clear the fixed header (+ optional concept banner). */
section[id],
div[id] {
  scroll-margin-top: calc(var(--banner-h) + var(--header-offset) + var(--space-3));
}
/* Sticky .subnav sits under the header — give jump targets extra room. */
.subnav ~ section[id],
.subnav ~ section .info-card[id],
.subnav ~ section .funding-route[id] {
  scroll-margin-top: calc(var(--banner-h) + var(--header-offset) + var(--subnav-h) + var(--space-3));
}

.sr-only {
  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 {
  position: absolute;
  top: 0.65rem; /* fixed chrome: park just below viewport edge when revealed */
  left: max(var(--space-4), env(safe-area-inset-left));
  z-index: var(--z-skip-link);
  transform: translateY(-160%);
  background: var(--soft-sand);
  color: var(--deep-teal);
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
  box-shadow: 0 8px 24px rgba(9, 26, 32, 0.12);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  /* Real outline (not just box-shadow) so the ring survives forced-colors
     mode, where box-shadow is stripped — this is the primary keyboard
     accessibility control on every page, it can't lose its focus ring.
     deep-teal, not warm-gold: this ring sits on --soft-sand, where gold
     only reaches ~1.9:1 — fails WCAG 1.4.11's 3:1 non-text minimum. */
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
  box-shadow: 0 10px 28px rgba(9, 26, 32, 0.14);
}

.container {
  width: 100%;
  max-width: var(--rw-max-page);
  margin-inline: auto;
  padding-inline: max(var(--rw-gutter-x), env(safe-area-inset-left))
                  max(var(--rw-gutter-x), env(safe-area-inset-right));
}
.container--sm { max-width: min(32rem, 100%); }
.container--md { max-width: min(36rem, 100%); }

.section-y { padding-block: var(--section-y); }
.section-y--compact { padding-block: var(--section-y-compact); }
.section-y--cta { padding-block: var(--section-y-cta); }
.subnav + .section-y { padding-top: var(--section-y-lead); }
/* Compact bands after subnav (e.g. journey-time strip) — don’t inherit the
   lead’s generous top pad or the strip floats in empty white again. */
.subnav + .section-y--compact {
  padding-top: var(--section-y-compact);
  padding-bottom: var(--section-y-compact);
}
/* Funding page: first band is a stat row, not a heading. Full section-y-lead
   at lg left the three lines floating in a 6.5rem void under the subnav. */
#basics {
  --basics-pad-top: var(--section-y-lead);
}
@media (min-width: 1024px) {
  #basics {
    --basics-pad-top: var(--rhythm-lead-2);
  }
}
.subnav + #basics {
  padding-top: var(--basics-pad-top);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--section-head-gap);
  margin-bottom: var(--section-after-head);
}
/* Lede sits one step further from the title than the eyebrow does */
.section-head > .lede {
  margin-top: var(--space-1);
}
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head--tight {
  margin-bottom: var(--section-after-head-tight);
  gap: var(--section-head-gap-tight);
}
.section-head--tight > .lede {
  margin-top: 0;
}
/* Follow-on body after a tight section head (property room segments) */
.section-head--tight + .lede {
  margin-top: calc(-1 * var(--section-after-head-tight) + var(--space-3));
}
.section-head--tight + .lede + .lede,
.section-head--tight + .lede + p {
  margin-top: var(--space-3);
}

/*
 * In-section follow-ons. HTML must not encode a space step (no u-mt-*).
 * Sibling rules cover known pairs; add .section-follow only when a pair
 * is missing. Both consume --section-stack-gap (remaps with the ladder).
 */
.section-follow,
.card-grid + .card-grid,
.card-grid + .checklist,
.card-grid + .comparison-list,
.card-grid + .funding-routes,
.card-grid + p,
.checklist + p,
.comparison-list + p,
.comparison-list + .link-stack,
.comparison-list + .download-panel,
.testimonials__grid + .testimonials__more,
.stat-row + .section-head,
.stat-row + .invoice-pair,
.section-head + .invoice-pair,
.section-head + .cover-split,
.blog-featured + .card-grid,
.blog-meta + .prose,
.prose + .blog-meta,
.payment-steps + .payment-note {
  margin-top: var(--section-stack-gap);
}

.eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--warm-gold-text);
  margin: 0;
}
.eyebrow--on-dark { color: var(--warm-gold-hero); }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }

.lede {
  color: var(--muted-grey);
  max-width: var(--rw-readable);
  line-height: var(--type-lede-leading);
  font-size: var(--type-lede-size);
}
/* Section intros sit above full-width content — allow a wider measure than body copy */
.section-head .lede {
  max-width: var(--rw-measure-care);
}

/*
 * Body copy: left-aligned. Justify is avoided sitewide — narrow measures
 * (cards, comparison columns, partner notes, testimonials) stretch word
 * spacing and look broken. Centered bands reassert center below.
 */
p,
dd,
blockquote:not(.pull-quote__text),
.lede,
.prose,
.prose li,
.care__type-text,
.care__note,
.stat__label,
.comparison-list__contrast,
.faq-item__panel,
.faq-cta__text,
.testimonial-card__quote,
.process-list__body > p,
.info-card p,
.path-card p,
.download-panel p,
.checklist li {
  text-align: left;
  text-wrap: pretty;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Centered compositions */
.section-head--center .lede,
.section-head--center p,
.mid-cta p,
.faq__intro .lede,
.faq__intro p,
.site-footer p,
.site-footer__copyright,
.empty-state p,
.partners .section-head .lede,
.pull-quote,
.pull-quote__text,
.pull-quote__cite {
  text-align: center;
  hyphens: manual;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-disabled:hover { transform: none; }
/* No blanket outline-color override here: the global :focus-visible default
   (deep-teal, 9.3:1 on white) already works on light backgrounds, which is
   most buttons. Dark-background contexts (hero, mid-cta, band-teal) need a
   light outline instead — deep-teal-on-teal is invisible — scoped below. */
.btn-gold {
  background: var(--warm-gold);
  color: var(--ink-on-gold);
  border-color: var(--warm-gold);
}
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}
/* Dark-background containers need a light outline instead of the global
   default — deep-teal-on-teal is invisible. Covers all .btn variants, not
   just .btn-gold: .band-teal__actions also carries .btn-outline-light,
   which the older band-teal-only rule below doesn't reach on its own. */
.site-header .btn:focus-visible,
.hero .btn:focus-visible,
.mid-cta .btn:focus-visible,
.band-teal .btn:focus-visible,
.mobile-nav .btn:focus-visible {
  outline-color: var(--warm-gold-hero);
}

.text-link {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  /* 44px comfortable touch target (WCAG 2.5.5); relaxed on pointer devices below. */
  min-height: var(--tap-target, 2.75rem);
  font: inherit;
  font-weight: var(--type-ui-weight);
  color: var(--deep-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--deep-teal) 28%, transparent);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  :root { --tap-target: 2.25rem; }
}
.text-link:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}
.text-link:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}
/* Stacked secondary links — gap only, never middot / · separators */
.link-stack {
  --link-stack-gap: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--link-stack-gap);
  margin: 0;
}
.link-stack .text-link {
  display: inline-flex;
  align-items: center;
}
/* Standalone control (e.g. “View photos”) — keep a usable hit area */
button.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target, 2.75rem);
  padding-block: var(--space-1);
}

/* Header — fixed under concept banner at all breakpoints; solidifies on scroll */
.site-header {
  position: fixed;
  top: var(--banner-h);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding-block: var(--space-4);
  pointer-events: none;
  background-color: transparent;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-solid,
.site-header.is-menu-open {
  background-color: var(--deep-teal);
  box-shadow: 0 8px 24px rgba(9, 26, 32, 0.18);
}
.site-header.is-solid::before,
.site-header.is-menu-open::before {
  opacity: 0;
}
.site-header.is-solid .nav-toggle,
.site-header.is-menu-open .nav-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}
/*
 * Guaranteed-dark scrim behind the header row itself, independent of the hero
 * photo's own gradient. The hero image is editor-uploaded on the real site, so
 * header legibility can't depend on a particular photo being dark at the top —
 * a light sky (as in this concept's photo) would otherwise wash out the white
 * logo/nav text. Renders first in DOM order, so it paints behind the header content.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--space-7)) 0; /* fixed chrome: fade past header edge */
  background: linear-gradient(180deg, rgba(9, 26, 32, 0.55) 0%, rgba(9, 26, 32, 0.28) 60%, rgba(9, 26, 32, 0) 100%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.site-header a,
.site-header button { pointer-events: auto; }
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.logo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}
.nav { display: none; gap: 0; }
.nav a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 500;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
/* Six nav items (was five before "Care options" got its own link) need the extra room
   the 1024px breakpoint gives the container gutter — 900px was too tight and risked wrap.
   Content grids (card-grid, comparison-list) already go 2–3 col from 720–900px, so
   900–1023px is a deliberate hybrid: desktop-width content, mobile-width chrome. Accepted
   tradeoff, not an oversight — re-test at 900px if a nav item is ever removed. */
@media (min-width: 1024px) {
  .nav { display: flex; }
}
.site-header .btn {
  flex-shrink: 0;
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* Below 1024px the mobile nav panel has its own full-width "Send an enquiry" button,
   so showing this one too — sat right next to the close icon — just duplicated it
   and cluttered the bar. One clear CTA per state instead of two competing for space. */
.site-header__actions .btn-gold { display: none; }
@media (min-width: 1024px) {
  .site-header__actions .btn-gold { display: inline-flex; }
}

/* Mobile menu toggle — always available below desktop nav */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(12, 35, 42, 0.4);
  color: var(--white);
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav-toggle:hover {
  background: rgba(12, 35, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.65);
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--warm-gold);
  outline-offset: 2px;
}
.nav-toggle__icon {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 0.85rem;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon span { top: 50%; margin-top: -1px; }
.nav-toggle__icon::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-6.5px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span { opacity: 0; }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/*
 * Mobile sheet — soft fade/slide (no hard display pop). Hairlines kept very light
 * or dropped so the list reads warmer than a clinical table of rows.
 */
.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-offset);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-nav);
  overflow-y: auto;
  padding: var(--space-3) 0 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep-teal) 92%, #0a242c) 0%, var(--deep-teal) 40%, color-mix(in srgb, var(--deep-teal) 94%, #12343c) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4rem);
  transition:
    opacity 0.32s ease,
    transform 0.32s ease,
    visibility 0.32s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-nav__list {
  margin: 0;
  padding: var(--space-1) 0 var(--space-3);
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav__list > li {
  margin: 0;
  padding: 0;
}
.mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin-inline: max(var(--space-2), env(safe-area-inset-left))
                 max(var(--space-2), env(safe-area-inset-right));
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  border: 0;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible {
  color: var(--warm-gold-hero);
  background: rgba(255, 255, 255, 0.06);
}
.mobile-nav__list a:focus-visible {
  outline: 2px solid var(--warm-gold);
  outline-offset: 2px;
}
.mobile-nav__list a.is-active {
  color: var(--warm-gold-hero);
  background: rgba(240, 201, 122, 0.1);
}
.mobile-nav__cta {
  margin-top: auto;
  padding: var(--space-4) max(var(--rw-gutter-x), env(safe-area-inset-left))
           calc(var(--space-5) + env(safe-area-inset-bottom))
           max(var(--rw-gutter-x), env(safe-area-inset-right));
  border-top: 0;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mobile-nav__cta .btn { width: 100%; min-height: 2.75rem; }
@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    transform: none;
    transition: opacity 0.15s ease, visibility 0.15s;
  }
}
body.nav-open { overflow: hidden; }

/* Hero — left on desktop; centred cluster on mobile (matches live site) */
.hero {
  position: relative;
  min-height: var(--hero-min-h);
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--deep-teal);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background: var(--deep-teal);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Lighter at the top so coastal / bungalow photos read as photos;
     keep the lower band strong enough for white H1 + lede contrast. */
  background: linear-gradient(180deg, rgba(12, 35, 42, 0.28) 0%, rgba(12, 35, 42, 0.48) 50%, rgba(12, 35, 42, 0.74) 100%);
}
/* Enquire (and similar pale-sky photos): darken the copy column, keep the photo. */
.hero--overlay-heavy .hero__media::after {
  /* Keep the hut row visible; contrast lives on the copy panel below. */
  background:
    linear-gradient(90deg, rgba(12, 35, 42, 0.42) 0%, rgba(12, 35, 42, 0.18) 52%, rgba(12, 35, 42, 0.08) 100%),
    linear-gradient(180deg, rgba(12, 35, 42, 0.16) 0%, rgba(12, 35, 42, 0.38) 100%);
}
.hero--overlay-heavy .hero__text {
  padding: var(--space-5);
  background: rgba(12, 35, 42, 0.82);
  border-radius: 1.25rem;
}
.hero--overlay-heavy .hero__text h1,
.hero--overlay-heavy .hero__text p {
  text-shadow: none;
}
.restwell-carousel__btn svg,
.restwell-lightbox__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.hero__media-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Fallback when no <img> is present (e.g. mid-layout variants). */
.hero__media:not(:has(.hero__media-img)) {
  background:
    linear-gradient(180deg, rgba(12, 35, 42, 0.28) 0%, rgba(12, 35, 42, 0.48) 50%, rgba(12, 35, 42, 0.74) 100%),
    url('../images/stock/restwell-whitstable-coastline-panorama.webp') center/cover no-repeat;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: var(--hero-content-measure);
  padding-top: calc(var(--header-offset) + var(--hero-pad-top-extra));
  padding-bottom: var(--hero-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--hero-copy-gap);
  text-align: left;
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .hero__content {
    width: clamp(40rem, 45vw, 44rem);
  }
  /* Text-only interior heroes (no photo panel eating the row) can afford a
     wider column than the photo hero's clamp — longer titles were breaking
     to an uneven 3 lines at the narrower measure. .hero--place keeps the
     tighter column since it still shares the row with the coastal photo. */
  .hero.hero--interior:not(.hero--place) .hero__content {
    width: clamp(40rem, 58vw, 58rem);
  }
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--hero-text-gap);
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.hero__text h1 {
  /* Own measure, wider than the lede's — the parent used to also cap at
     --hero-measure (34rem), which quietly overrode this and forced long
     interior titles into an uneven 3-line wrap on desktop. */
  max-width: var(--hero-title-measure);
}
.hero__text p {
  color: rgba(255, 255, 255, 0.92);
  max-width: var(--hero-measure);
  font-size: var(--type-lede-size);
  line-height: var(--type-lede-leading);
  text-align: left;
  text-align-last: auto;
  text-justify: auto;
  word-spacing: normal;
}
.hero__tldr {
  color: rgba(255, 255, 255, 0.9);
  max-width: var(--hero-measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin-top: var(--space-3);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-cta-gap);
}
.hero__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
}
.hero__scroll-hint { display: none; }

/*
 * Hero — mobile layout only (centering, measures, media).
 * Padding / gaps / min-height come from rhythm tokens above.
 */
@media (max-width: 767px) {
  .hero {
    align-items: stretch;
  }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(12, 35, 42, 0.48) 0%, rgba(12, 35, 42, 0.42) 45%, rgba(12, 35, 42, 0.68) 100%);
  }
  .hero--overlay-heavy .hero__media::after {
    background: linear-gradient(180deg, rgba(12, 35, 42, 0.28) 0%, rgba(12, 35, 42, 0.36) 40%, rgba(12, 35, 42, 0.52) 100%);
  }
  .hero__media:not(:has(.hero__media-img)) {
    background:
      linear-gradient(180deg, rgba(12, 35, 42, 0.48) 0%, rgba(12, 35, 42, 0.42) 45%, rgba(12, 35, 42, 0.68) 100%),
      url('../images/stock/restwell-whitstable-coastline-panorama.webp') center/cover no-repeat;
  }
  .hero__content {
    margin-inline: auto;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-height: calc(var(--hero-min-h) - var(--banner-h));
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  /* Interior hero has no photo/CTAs to justify the photo-hero's height —
     content-sized below lg, per --hero-interior-min-h. */
  .hero.hero--interior .hero__content {
    min-height: calc(var(--hero-interior-min-h) - var(--banner-h));
  }
  .hero__text {
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: min(26rem, 100%);
  }
  .hero__text h1 {
    max-width: none;
  }
  .hero__text p {
    margin-inline: auto;
    max-width: 22rem;
    font-size: var(--type-lede-size);
    line-height: var(--type-lede-leading);
    text-align: center;
    text-align-last: center;
    text-justify: auto;
    word-spacing: normal;
    hyphens: manual;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 18rem;
  }
  /* One clear action on mobile — live site validated this: secondary CTA and
     the reassurance line both hidden ≤767px in favour of a single full-width
     primary and a "scroll to explore" cue. Both reappear at ≥768px. */
  .hero__ctas .btn-outline-light { display: none; }
  .hero__note { display: none; }
  .hero__ctas .btn {
    width: 100%;
    min-height: 2.75rem;
  }
  .hero__scroll-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 18rem;
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .hero__scroll-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: var(--space-2);
    border-radius: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  }
  .hero__scroll-link:hover {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.12);
    transform: translateY(1px);
  }
  .hero__scroll-link:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }
  .hero__scroll-icon {
    width: 0.9rem;
    height: 0.9rem;
  }
}

/* Mid CTA */
.mid-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}
.mid-cta__media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(27, 77, 92, 0.72), rgba(27, 77, 92, 0.86)),
    url('../images/stock/restwell-whitstable-beach-huts.webp') center/cover no-repeat;
}
.mid-cta__inner {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  padding-inline: max(var(--rw-gutter-x), env(safe-area-inset-left))
                  max(var(--rw-gutter-x), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.mid-cta__inner p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 30rem;
}
.mid-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-cta-gap);
  justify-content: center;
  width: 100%;
  margin-top: var(--space-2);
}
@media (max-width: 767px) {
  .mid-cta__btns {
    flex-direction: column;
    align-items: stretch;
    max-width: 22rem;
    margin-inline: auto;
  }
  .mid-cta__btns .btn {
    width: 100%;
    min-height: 2.75rem;
  }
}

/* FAQ — accordion; single column by default; 2-col desktop when 5+ items */
.faq { background: var(--bg-subtle); }
.faq__layout {
  --faq-rule: color-mix(in srgb, var(--deep-teal) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--rw-measure-faq);
  margin-inline: auto;
  width: 100%;
}
/* Long lists: use the container width while stacked (tablet/phone), widen further at 2-col */
.faq__layout:has(.faq-list--split) {
  max-width: none;
}
.faq__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  align-items: center;
}
.faq__intro .lede {
  max-width: 32rem;
  text-align: center;
  text-wrap: balance;
}

.faq-list--measure {
  --faq-rule: color-mix(in srgb, var(--deep-teal) 12%, transparent);
  max-width: var(--rw-measure-faq);
  margin-inline: auto;
  width: 100%;
}

/*
 * FAQ page — single readable column + sticky ask form on desktop.
 * Replaces the old 2-col split that left short questions stranded and
 * pushed the ask form into a separate band that felt mobile-only.
 */
.faq-page {
  --faq-page-gap: var(--space-8);
  --faq-aside-pad: var(--panel-pad);
}
.faq-page__head {
  margin-bottom: var(--space-6);
}
.faq-page .pill-tabs {
  margin-bottom: var(--space-6);
}
.faq-page__layout {
  display: grid;
  gap: var(--faq-page-gap);
  align-items: start;
}
.faq-list--page {
  --faq-rule: color-mix(in srgb, var(--deep-teal) 12%, transparent);
  max-width: none;
  width: 100%;
  min-width: 0;
}
.faq-ask {
  padding: var(--faq-aside-pad);
  border-radius: var(--radius-lg);
  background: var(--soft-sand);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.faq-ask .section-head {
  margin: 0;
}
.faq-ask .section-head p:last-child {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.faq-page__aside {
  /* Clears sticky site header when the ask form pins on desktop */
  --faq-aside-sticky-top: calc(var(--header-offset) + var(--space-4));
}
@media (min-width: 960px) {
  .faq-page {
    --faq-page-gap: var(--space-10);
  }
  .faq-page__layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }
  .faq-page__aside {
    position: sticky;
    top: var(--faq-aside-sticky-top);
  }
}
.faq-list--split.faq-list--measure {
  max-width: none;
}
.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/*
 * 5+ items: two stacks in markup. Below 900px they must read as ONE list
 * (no gap / double rule at the column join). At 900px+ they sit side by side.
 */
.faq-list--split {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.faq-list__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.faq-list--split > .faq-list__col:first-child:has(.faq-item:not([hidden])) {
  border-top: 1px solid var(--faq-rule, color-mix(in srgb, var(--deep-teal) 12%, transparent));
}
@media (min-width: 900px) {
  .faq__layout:has(.faq-list--split) {
    max-width: min(64rem, 100%);
  }
  .faq-list--split.faq-list--measure {
    max-width: min(64rem, 100%);
  }
  .faq-list--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-10);
    align-items: start;
  }
  .faq-list--split > .faq-list__col:has(.faq-item:not([hidden])) {
    border-top: 1px solid var(--faq-rule, color-mix(in srgb, var(--deep-teal) 12%, transparent));
  }
}
.faq-item {
  border-bottom: 1px solid var(--faq-rule, color-mix(in srgb, var(--deep-teal) 12%, transparent));
  min-width: 0;
}
.faq-item:first-child {
  border-top: 1px solid var(--faq-rule, color-mix(in srgb, var(--deep-teal) 12%, transparent));
}
.faq-list__col > .faq-item:first-child {
  border-top: 0;
}
.faq-item__heading {
  margin: 0;
  font: inherit;
}
.faq-item__trigger {
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: var(--space-4) 0;
  min-height: 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--deep-teal);
  cursor: pointer;
  touch-action: manipulation;
}
.faq-item__trigger > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.15em; /* optically align with + icon */
}
.faq-item__trigger:focus { outline: none; }
.faq-item__trigger:focus-visible {
  outline: 2px solid var(--warm-gold);
  outline-offset: 4px;
  border-radius: 0.35rem;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1em; /* em nudge: +/− glyph on cap-height */
  display: grid;
  place-items: center;
  color: var(--warm-gold-text);
  font-size: var(--text-xl);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.faq-item__icon::before { content: "+"; }
.faq-item.is-open .faq-item__icon::before { content: "\2212"; }
.faq-item__panel {
  display: none;
  padding: 0 var(--space-7) var(--space-5) 0; /* clear the + column */
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-width: 36rem;
}
.faq-item.is-open .faq-item__panel { display: block; }
.faq-item__panel[hidden] { display: none; }
.faq-item__panel p { margin: 0; }

/* Outside the list so we don’t stack last-item border + CTA border. */
.faq-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  text-align: left;
  width: 100%;
}
.faq-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 32rem;
}
.faq-cta__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--deep-teal);
  margin: 0;
}
.faq-cta__text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--muted-grey);
  line-height: 1.55;
}
.faq-cta .text-link {
  align-self: flex-start;
}

/* Footer — brand, care/CQC trust line, and a real legal/nav row (borrowed from the live theme) */
.site-footer {
  background: var(--deep-teal);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-10) var(--space-6);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer .logo { color: var(--white); }
.site-footer__partner-line {
  margin: 0 auto;
  max-width: 36rem;
  font-size: var(--text-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  text-wrap: pretty;
}
.site-footer__partner-line a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target, 2.75rem);
  color: var(--warm-gold-hero);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}
.site-footer__partner-line a:hover { color: var(--white); }
.site-footer__sep {
  display: inline-block;
  padding-inline: 0.3em; /* em nudge: separator breathing scales with its font-size */
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75em;
  line-height: 1;
  vertical-align: 0.1em;
}

.site-footer__bottom {
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  font-size: var(--text-sm);
}
.site-footer__legal a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: var(--space-1) 0;
  min-height: var(--tap-target, 2.75rem);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--warm-gold-hero); }
.site-footer__cookie-settings {
  appearance: none;
  margin: 0;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  min-height: var(--tap-target, 2.75rem);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.site-footer__cookie-settings:hover,
.site-footer__cookie-settings:focus-visible { color: var(--warm-gold-hero); }
.site-footer__legal-sep {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.7em;
  line-height: 1;
}
.site-footer__copyright {
  margin: 0;
  font-size: var(--type-meta-size);
  /* 0.7 alpha over --deep-teal measures ~5.5:1; 0.6 measured 4.49:1, just under WCAG AA's 4.5:1. */
  color: rgba(255, 255, 255, 0.7);
}
  
/* -------------------------------------------------------------------------- */
/* Interior page chrome                                                       */
/* -------------------------------------------------------------------------- */

/* Interior header: solid teal only when there is no photo hero to fade over */
body.page--interior:not(.has-photo-hero) .site-header {
  background: var(--deep-teal);
  box-shadow: 0 8px 24px rgba(9, 26, 32, 0.18);
}
body.page--interior:not(.has-photo-hero) .site-header::before { opacity: 0; }

/*
 * Interior hero = homepage .hero, with only two deltas:
 * 1. breadcrumbs (extra node in .hero__content)
 * 2. no CTAs / note
 * No photo media → solid --deep-teal from .hero background. Tried gradients
 * here (gold-glow, then a monochromatic diagonal) chasing "depth" — both
 * looked worse, not better, because a short content-sized banner doesn't
 * need it; a diagonal wash just reads as an odd corner smudge at this
 * aspect ratio. The actual fix for this band was the min-height override
 * below (was inheriting the photo-hero's 70–92svh with nothing to fill it).
 * Flat fill is the right call once the box is sized to its content.
 */
.hero.hero--interior .hero__media { display: none; }
.hero.hero--interior .hero__ctas,
.hero.hero--interior .hero__note { display: none; }
.hero.hero--interior {
  /* No CTAs/note to fill the photo-hero's tall min-height — size to the
     breadcrumb + heading + paragraph instead via --hero-interior-min-h
     (0 = content-sized below lg; a modest cap kicks in at lg for balance
     on wide viewports). See .hero__content override below for <768px,
     where min-height lives on the content box, not .hero itself. */
  min-height: var(--hero-interior-min-h);
}

/*
 * Place / area guide hero — keep interior chrome (breadcrumb, no CTAs) but
 * restore the coastal photo plane so the first viewport reads as Whitstable,
 * not a generic teal FAQ banner. Mid-height: taller than copy-only interiors,
 * shorter than the homepage sales hero.
 */
.hero.hero--interior.hero--place {
  --hero-place-min-h: min(52svh, 28rem);
  min-height: var(--hero-place-min-h);
}
.hero.hero--interior.hero--place .hero__media { display: block; }
@media (max-width: 767px) {
  .hero.hero--interior.hero--place .hero__content {
    min-height: calc(var(--hero-place-min-h) - var(--banner-h));
  }
}
@media (min-width: 1024px) {
  .hero.hero--interior.hero--place {
    --hero-place-min-h: min(56svh, 32rem);
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: inherit;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.72);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--warm-gold-hero);
}
.breadcrumb__sep { opacity: 0.45; }
.breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

/* Desktop nav list + dropdown */
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav > li {
  display: flex;
  align-items: center;
  position: relative;
}
/* Soft hairline between items — light enough to group, not a clinical table */
.nav > li + li::before {
  content: "";
  width: 1px;
  height: 0.85rem;
  margin-inline: var(--space-3);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  flex-shrink: 0;
}
.nav a.is-active,
.nav__dropdown a.is-active {
  color: var(--warm-gold-hero);
}
.nav__item--has-dropdown > .nav__trigger {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}
.nav__item--has-dropdown > .nav__trigger::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.85;
}
.nav__item--has-dropdown > .nav__trigger[aria-expanded="true"],
.nav__item--has-dropdown.is-current > .nav__trigger {
  color: var(--warm-gold-hero);
}
.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem); /* fixed chrome: clear the trigger underline */
  left: 0;
  min-width: 13.5rem;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  /* Near-solid teal — readable over light hero sky; still soft edge via blur/border */
  background: rgba(12, 35, 42, 0.94);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.1rem;
  box-shadow: 0 16px 40px rgba(9, 26, 32, 0.22);
  z-index: var(--z-nav-dropdown);
}
.nav__item--has-dropdown.is-open .nav__dropdown,
.nav__dropdown:focus-within {
  display: block;
  animation: nav-dropdown-in 0.24s ease;
}
@keyframes nav-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-0.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav__item--has-dropdown.is-open .nav__dropdown,
  .nav__dropdown:focus-within {
    animation: none;
  }
}
.nav__dropdown a {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--warm-gold-hero);
}
.nav__dropdown a.is-active {
  background: rgba(240, 201, 122, 0.16);
  color: var(--warm-gold-hero);
}

.mobile-nav__group-label {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-1);
  margin-inline: max(var(--space-2), env(safe-area-inset-left))
                 max(var(--space-2), env(safe-area-inset-right));
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 0.65 alpha over the deep-teal header keeps this near 5:1 contrast (WCAG AA needs 4.5:1 at this size) */
  color: rgba(255, 255, 255, 0.65);
}
.mobile-nav__rule {
  height: 1px;
  margin: var(--space-2) max(var(--space-5), env(safe-area-inset-left))
          var(--space-1) max(var(--space-5), env(safe-area-inset-right));
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
}

/* Shared interior utilities */
.band-subtle { background: var(--bg-subtle); }
.band-white { background: var(--white); }
.band-teal {
  /* Soft depth — flat teal reads as a slab on mobile */
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--deep-teal) 86%, #0e2a32) 0%,
      var(--deep-teal) 42%,
      color-mix(in srgb, var(--deep-teal) 92%, #12343c) 100%
    );
  color: var(--white);
  --band-teal-stack-gap: var(--space-4);
  --band-teal-checklist-gap: var(--space-3);
  --band-teal-actions-gap: var(--space-3);
  --band-teal-actions-mt: var(--space-2);
  --band-teal-actions-pt: 0;
}
.band-teal .lede,
.band-teal p { color: rgba(255, 255, 255, 0.86); }
.band-teal .eyebrow { color: var(--warm-gold-hero); }
.band-teal h2 { color: var(--white); }
.band-teal .checklist li {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: wrap; /* pretty orphaned “hoisting —” on narrow phones */
}
/* Signature halo bullets — gold core sitting in a soft ring */
.band-teal .checklist li::before {
  width: var(--bullet-halo-size);
  height: var(--bullet-halo-size);
  margin-top: 0.55em; /* em nudge: halo dot aligns to first text line */
  background: var(--bullet-halo-core);
  box-shadow: 0 0 0 var(--bullet-halo-ring-width) var(--bullet-halo-ring);
}
.band-teal .checklist li strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
}
.band-teal .split__media img {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.band-teal .text-link {
  color: var(--warm-gold-hero);
  text-decoration-color: color-mix(in srgb, var(--warm-gold-hero) 45%, transparent);
}
.band-teal .text-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}
.band-teal .text-link:focus-visible {
  outline-color: var(--warm-gold-hero);
}
.band-teal__stack {
  display: flex;
  flex-direction: column;
  gap: var(--band-teal-stack-gap);
  max-width: 40rem;
}
/* Stack gap owns spacing — kill utility sibling margins that double it */
.band-teal__stack > * { margin-top: 0; }
/* Eyebrow + title read as one unit; lede breathes before the list */
.band-teal__stack .eyebrow + h2 {
  margin-top: calc(var(--space-2) - var(--band-teal-stack-gap));
}
.band-teal__stack .lede + .checklist {
  margin-top: var(--space-1);
}
.band-teal__stack .checklist { gap: var(--band-teal-checklist-gap); }
.band-teal__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--band-teal-actions-gap);
  margin-top: var(--band-teal-actions-mt);
  padding-top: var(--band-teal-actions-pt);
}
.band-teal__actions > * { margin: 0; }
@media (min-width: 900px) {
  .band-teal {
    --band-teal-stack-gap: var(--space-5);
    --band-teal-checklist-gap: var(--space-4);
    --band-teal-actions-gap: var(--space-3);
    --band-teal-actions-mt: var(--space-2);
  }
  .band-teal .split {
    align-items: center;
  }
  .band-teal .split--cover {
    align-items: stretch;
  }
  .band-teal__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .band-teal__actions .btn {
    width: auto;
  }
}

/*
 * Narrow viewports: drop the split photo. On phones the band already sits
 * after another bungalow image, and a second photo turns the teal block into
 * a tall sandwich. Keep a tight editorial band — copy, proof points, CTA.
 * Spacing via token remaps only.
 */
@media (max-width: 899px) {
  .band-teal {
    --band-teal-stack-gap: var(--space-4);
    --band-teal-checklist-gap: var(--space-3);
    --band-teal-actions-mt: var(--space-5);
    --band-teal-actions-pt: var(--space-5);
  }
  .band-teal .split {
    display: block;
  }
  .band-teal .split__media {
    display: none;
  }
  .band-teal .band-teal__stack {
    max-width: none;
  }
  .band-teal .band-teal__stack .lede {
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 36rem;
  }
  .band-teal__actions {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .band-teal__actions .btn {
    width: 100%;
  }
  .band-teal__actions .btn-gold:focus-visible {
    outline-color: var(--warm-gold-hero);
  }
}

.btn-outline-teal {
  background: transparent;
  color: var(--deep-teal);
  /* 65% (not 30%) — WCAG 1.4.11 needs 3:1 against white; 30% only measured ~1.69:1 */
  border-color: color-mix(in srgb, var(--deep-teal) 65%, transparent);
}
.btn-outline-teal:hover {
  border-color: var(--deep-teal);
  background: color-mix(in srgb, var(--deep-teal) 5%, transparent);
}

.prose {
  max-width: var(--rw-readable);
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.7;
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 {
  color: var(--deep-teal);
  margin-top: var(--space-8);
}
.prose ul, .prose ol {
  padding-left: var(--space-5);
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose a {
  color: var(--deep-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Inline copy links need real touch targets too (WCAG 2.5.8) — scoped to
   prose so wrapped paragraphs keep natural line-height. */
.prose--wide a,
.content-prose a {
  display: inline-block;
  padding-block: 0.4em; /* em nudge: tap comfort inside --tap-target min-height */
  min-height: var(--tap-target, 2.75rem);
}
.prose--wide { max-width: min(44rem, 100%); }

.card-grid {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * Cards — same recipe as homepage .path-card--funding:
 * white surface + quiet teal border. Never sand/cream fills.
 */
.info-card,
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-pad);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
  min-height: 100%;
}

/*
 * Icon circle — small brand-tinted badge for a card/list-item leading icon.
 * Reuses the info-card recipe's restraint (no bright fills); scales down
 * for inline use (e.g. checklist markers) via --icon-circle-size.
 */
.icon-circle {
  --icon-circle-size: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep-teal) 8%, var(--white));
  color: var(--deep-teal);
}
.icon-circle svg {
  width: 48%;
  height: 48%;
}
.icon-circle--lg {
  --icon-circle-size: 3.5rem;
}
.info-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.path-card { gap: var(--space-4); }
.path-card--funding {
  background: color-mix(in srgb, var(--deep-teal) 6%, var(--white));
}

/*
 * Persona list — icon + heading rows for a split section. Deliberately not
 * card chrome: the photo alongside already carries the visual weight, so
 * this reads as a quiet, scannable list rather than another set of boxes.
 */
.persona-list {
  --persona-gap: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.persona-list__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--persona-gap);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.persona-list__item:first-child { padding-top: 0; }
.persona-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.persona-list__item .icon-circle {
  margin-top: var(--space-1);
}
.persona-list__item h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: 1.25;
}
.persona-list__item p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.65;
}
.section-head + .persona-list { margin-top: var(--space-2); }

/*
 * Download / document callout — desktop: panel beside copy.
 * Phone: drop the nested card chrome so the band doesn’t feel boxed-in.
 */
.download-panel {
  --download-pad: var(--panel-pad);
  --download-gap: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--download-gap);
  padding: var(--download-pad);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--deep-teal) 6%, var(--white));
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.download-panel h3 { margin: 0; }
.download-panel p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.65;
}
/* Statement band — denser mobile rhythm via tokens on the section */
#statement {
  --statement-head-mb: var(--section-after-head);
  --statement-checklist-gap: var(--space-3);
}
#statement .section-head { margin-bottom: var(--statement-head-mb); }
#statement .checklist { gap: var(--statement-checklist-gap); }
@media (max-width: 899px) {
  #statement {
    --statement-head-mb: var(--section-after-head-tight);
    --statement-checklist-gap: var(--space-2);
  }
  #statement .split {
    --split-gap: var(--space-6);
    align-items: stretch;
  }
  /* Flatten only the statement-band panel — other download-panels (funding
     “what we send”) need to keep their card chrome when the split stacks. */
  #statement .download-panel {
    --download-pad: var(--space-5) 0 0;
    width: 100%;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
  }
  #statement .download-panel .btn {
    width: 100%;
  }
}
/* Retired sand fill — keep class so old markup doesn’t reintroduce cream */
.info-card--sand,
.path-card--area {
  background: color-mix(in srgb, var(--deep-teal) 6%, var(--white));
  border-color: color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.info-card p,
.path-card p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.65;
  flex: 1;
}
.info-card h3,
.path-card h3 { margin: 0; }
.info-card h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}
.info-card h3 a:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}

.media-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.media-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--driftwood);
}
/* Day trips on phone — shorter frames; three stacked 4:3s is a long scroll. */
@media (max-width: 699px) {
  #days-out .media-card img {
    aspect-ratio: 2 / 1;
  }
}
.media-card h3 { margin: 0; }
.media-card p {
  margin: 0;
  color: var(--muted-grey);
  line-height: 1.65;
}

.split {
  --split-gap: var(--space-5);
  display: grid;
  gap: var(--split-gap);
  align-items: center;
}
/*
 * Phone: always copy then photo. Alternating DOM order was stacking two
 * images back-to-back between sections (overview photo → living photo).
 */
@media (max-width: 899px) {
  .split {
    display: flex;
    flex-direction: column;
  }
  .split > *:not(.split__media) { order: 1; }
  .split > .split__media { order: 2; }
  /* Prefer photo first when the section’s job is the visual proof */
  .split--media-first > .split__media { order: 1; }
  .split--media-first > *:not(.split__media) { order: 2; }
}
@media (min-width: 900px) {
  .split {
    --split-gap: var(--space-10);
    grid-template-columns: 1.05fr 0.95fr;
  }
  .split--flip > :first-child { order: 2; }
}
/* Funding “what we send”: short copy beside a panel — centre-align left the
   panel floating in empty space next to the heading. */
#help .split {
  align-items: start;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--driftwood);
}
/* Tall copy column: fill the media cell so the photo matches text height */
@media (min-width: 900px) {
  .split--cover {
    align-items: stretch;
  }
  .split--cover > .split__media {
    position: relative;
    min-height: 22rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--driftwood);
  }
  .split--cover > .split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
}

.checklist {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--deep-teal);
  font-weight: 500;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45em; /* em nudge: gold bullet aligns to first text line */
  border-radius: 50%;
  background: var(--warm-gold);
  flex-shrink: 0;
}
@media (min-width: 700px) {
  .checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Walk times / key figures — open stack, no card chrome.
   Dividers only between items — outer top/bottom borders floated in section
   padding and read as stray hairlines (esp. after a subnav). */
.stat-row {
  --stat-row-gap: 0;
  --stat-pad-y: var(--space-4);
  display: grid;
  gap: var(--stat-row-gap);
}
.stat-row dl { margin: 0; }
.stat {
  padding: var(--stat-pad-y) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.stat:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .stat-row {
    --stat-row-gap: var(--space-6);
    --stat-pad-y: var(--space-5);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat {
    border-bottom: 0;
  }
}
.stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--deep-teal);
  margin: 0 0 var(--space-2);
}
.stat__label {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.5;
}
/* Phone: value + label on one row so the journey strip isn’t three mini-sections. */
@media (max-width: 699px) {
  .stat-row { --stat-pad-y: var(--space-3); }
  .stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: baseline;
  }
  /* dt prints before dd; keep the value leading the row */
  .stat__value { order: -1; }
  .stat__value {
    margin: 0;
    font-size: var(--text-lg);
    white-space: nowrap;
  }
  .stat__label {
    font-size: var(--text-sm);
    line-height: 1.4;
  }
  /* Phrase + sentence stats (funding page) — the journey-time row layout
     squeezes a full clause into a remnant column. Stack instead. */
  .stat-row--prose .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .stat-row--prose .stat__value {
    font-size: var(--text-xl);
    white-space: normal;
  }
  .stat-row--prose .stat__label {
    font-size: var(--text-base);
    line-height: 1.5;
  }
}

/*
 * Wheelchair-width fit-check — type a chair width (or drag the slider) and
 * compare it to each published door. Each bar *is* that doorway (100% =
 * clear opening); the fill is the chair, so leftover track is clearance.
 */
.fit-check {
  --fit-control-gap: var(--space-3);
  --fit-readout-gap: var(--space-1);
  --fit-readout-pad: var(--space-1);
  --fit-bars-gap: var(--space-5);
  --fit-bar-gap: var(--space-2);
  --fit-thumb-nudge: -0.625rem;
  height: 100%;
  max-width: none;
}
.fit-check-split {
  --fit-split-gap: var(--grid-gap);
  display: flex;
  flex-direction: column;
  gap: var(--fit-split-gap);
}
@media (min-width: 900px) {
  .fit-check-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    align-items: stretch;
  }
}
.fit-check__panel {
  display: flex;
  flex-direction: column;
  gap: var(--section-stack-gap);
  margin-top: 0;
  height: 100%;
  box-sizing: border-box;
  padding: var(--panel-pad);
  background: var(--white);
  border: 1px solid var(--driftwood);
  border-radius: var(--radius-lg);
}
.fit-check__control {
  display: flex;
  flex-direction: column;
  gap: var(--fit-control-gap);
}
.fit-check__control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.fit-check__label {
  font-weight: 600;
  color: var(--deep-teal);
}
.fit-check__control-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fit-check__readout {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--driftwood);
  border-radius: var(--radius);
}
.fit-check__readout:focus-within {
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
}
.fit-check__readout input[type="number"] {
  width: 6.5ch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--deep-teal);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.fit-check__readout input[type="number"]:focus {
  outline: none;
}
.fit-check__readout input[type="number"]::-webkit-outer-spin-button,
.fit-check__readout input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.fit-check__unit-toggle {
  display: inline-flex;
  /* Optical nudge: segmented control hairline gap, under the whitelist's
     sub-4px rule — a full token would read as two separate buttons. */
  gap: 2px;
  /* Optical nudge: control inner padding, sits the labels inside the border pill. */
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--driftwood);
  border-radius: 8px;
}
.fit-check__unit-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-grey);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  min-height: 2.25rem;
  min-width: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  cursor: pointer;
}
.fit-check__unit-toggle button:hover,
.fit-check__unit-toggle button:focus {
  color: var(--deep-teal);
}
.fit-check__unit-toggle button:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
}
.fit-check__unit-toggle button[aria-pressed="true"] {
  background: var(--deep-teal);
  color: var(--white);
}
.fit-check__control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  accent-color: var(--deep-teal);
  cursor: pointer;
}
.fit-check__control input[type="range"]:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
}
.fit-check__control input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: linear-gradient(
    to right,
    var(--deep-teal) var(--fit-slider-pct, 0%),
    var(--bg-subtle) var(--fit-slider-pct, 0%)
  );
  border: 1px solid var(--driftwood);
  border-radius: 999px;
}
.fit-check__control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: var(--fit-thumb-nudge);
  border-radius: 999px;
  background: var(--deep-teal);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--deep-teal) 35%, transparent);
}
.fit-check__control input[type="range"]::-moz-range-track {
  height: 0.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--driftwood);
  border-radius: 999px;
}
.fit-check__control input[type="range"]::-moz-range-progress {
  height: 0.5rem;
  background: var(--deep-teal);
  border-radius: 999px;
}
.fit-check__control input[type="range"]::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--deep-teal);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--deep-teal) 35%, transparent);
}
.fit-check__scale {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--muted-grey);
  font-variant-numeric: tabular-nums;
}
.fit-check__summary {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--deep-teal);
}
.fit-check__summary--tight { color: var(--warm-gold-text); }
.fit-check__summary--no { color: var(--error-red); }
.fit-check__bars {
  display: flex;
  flex-direction: column;
  gap: var(--fit-bars-gap);
  padding-top: var(--space-2);
  border-top: 1px solid var(--driftwood);
}
.fit-bar {
  display: flex;
  flex-direction: column;
  gap: var(--fit-bar-gap);
}
.fit-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.fit-bar__label {
  font-weight: 600;
  color: var(--deep-teal);
}
.fit-bar__spec {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-grey);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fit-bar__track {
  position: relative;
  height: 1.25rem;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--driftwood);
  border-radius: 999px;
}
.fit-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--deep-teal);
  border-radius: 999px;
  transition: width 0.15s ease, background-color var(--duration-fast) ease;
}
.fit-bar--tight .fit-bar__fill { background: var(--warm-gold-text); }
.fit-bar--tight .fit-bar__label { color: var(--warm-gold-text); }
.fit-bar--no .fit-bar__fill { background: var(--error-red); }
.fit-bar--no .fit-bar__label { color: var(--error-red); }
.fit-bar__result {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-grey);
}
.fit-bar--tight .fit-bar__result { color: var(--warm-gold-text); font-weight: 600; }
.fit-bar--no .fit-bar__result { color: var(--error-red); font-weight: 600; }
.fit-check__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-grey);
}
.width-guide {
  --width-guide-gap: var(--space-5);
  --width-guide-row-pad: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--width-guide-gap);
  padding: var(--panel-pad);
  background: var(--white);
  border: 1px solid var(--driftwood);
  border-radius: var(--radius-lg);
}
.width-guide__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.width-guide__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--deep-teal);
}
.width-guide__lede,
.width-guide__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-grey);
}
.width-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.width-guide__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin: 0;
  padding: var(--width-guide-row-pad) 0;
  border: 0;
  border-bottom: 1px solid var(--driftwood);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.width-guide__list li:first-child .width-guide__row {
  padding-top: 0;
}
.width-guide__list li:last-child .width-guide__row {
  padding-bottom: 0;
  border-bottom: 0;
}
.width-guide__row:hover .width-guide__name,
.width-guide__row:hover .width-guide__mm,
.width-guide__row:focus .width-guide__name,
.width-guide__row:focus .width-guide__mm {
  color: var(--deep-teal);
}
.width-guide__row:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 2px;
}
.width-guide__name,
.width-guide__mm {
  display: block;
  font-weight: 600;
  color: var(--deep-teal);
}
.width-guide__hint,
.width-guide__in {
  display: block;
  font-size: var(--text-2xs);
  color: var(--muted-grey);
}
.width-guide__size {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.width-guide__refs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

/*
 * Capacity fact sheet — definition list for walk times + open checklist blocks.
 * Mobile: stack time over label (side-by-side crushed the measure).
 * Desktop: three equal columns under one hairline band.
 */
.fact-dl {
  --fact-dl-gap: 0;
  --fact-dl-item-gap: var(--space-1);
  --fact-dl-pad-y: var(--space-5);
  --fact-dl-follow-mt: 0;
  --fact-dt-size: var(--text-xl);
  --fact-dd-size: var(--type-body-size);
  display: grid;
  gap: var(--fact-dl-gap);
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.fact-dl > div {
  display: grid;
  gap: var(--fact-dl-item-gap);
  margin: 0;
  padding-block: var(--fact-dl-pad-y);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.fact-dl dt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fact-dt-size);
  font-weight: var(--weight-medium);
  color: var(--deep-teal);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.fact-dl dd {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--fact-dd-size);
  line-height: var(--leading-snug);
  max-width: none;
}
/* Phone stack: drop the orphan line under the last figure — follow-on
   draws the hairline (sibling; don’t rely on custom props defined on .fact-dl). */
@media (max-width: 699px) {
  .fact-dl > div:last-child { border-bottom: 0; }
}
@media (min-width: 700px) {
  .fact-dl {
    --fact-dl-gap: var(--space-6);
    --fact-dl-item-gap: var(--space-2);
    --fact-dl-follow-mt: var(--space-10);
    --fact-dt-size: var(--text-2xl);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  }
  .fact-dl > div {
    border-bottom: 0;
  }
}
/* Inside a split column, keep facts stacked — the 3-up sheet fights the measure. */
.split .fact-dl {
  grid-template-columns: 1fr;
  border-bottom: 0;
  --fact-dl-gap: 0;
  --fact-dt-size: var(--text-lg);
}
.split .fact-dl > div {
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.split .fact-dl > div:last-child {
  border-bottom: 0;
}

/*
 * Optional care guide rates — reuses .rates-panel + .data-table--rates.
 * Footer = logos + short caveat + CTA (one band, no nested strips).
 */
.care-rates {
  width: 100%;
  min-width: 0;
}
.care-rates__footer {
  --care-footer-pad: var(--space-5);
  --care-footer-gap: var(--space-4);
  display: grid;
  gap: var(--care-footer-gap);
  justify-items: start;
  padding: var(--care-footer-pad);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  background: color-mix(in srgb, var(--deep-teal) 2.5%, var(--white));
}
.care-rates__brands.care__brand {
  gap: var(--space-3) var(--space-4);
  justify-content: flex-start;
  align-items: center;
}
.care-rates__brands .care__brand-link--ccs img {
  height: 1.5rem;
  max-width: min(100%, 9rem);
}
.care-rates__brands .care__brand-link--cqc img {
  height: 1.5rem;
  max-width: min(100%, 5rem);
}
.care-rates__note {
  margin: 0;
  max-width: 36rem;
  color: var(--muted-grey);
  font-size: var(--type-meta-size);
  line-height: var(--leading-snug);
}
.care-rates__note p {
  margin: 0 0 0.35em;
}
.care-rates__note p:last-child {
  margin-bottom: 0;
}
.care-rates__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  width: 100%;
}
@media (min-width: 768px) {
  .care-rates__footer {
    --care-footer-pad: var(--space-5) var(--space-6);
    --care-footer-gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-6);
  }
  .care-rates__brands {
    grid-column: 1;
  }
  .care-rates__note {
    grid-column: 2;
  }
  .care-rates__ctas {
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .care-rates__brands .care__brand-link--ccs img {
    height: 1.65rem;
    max-width: min(100%, 10rem);
  }
  .care-rates__brands .care__brand-link--cqc img {
    height: 1.65rem;
    max-width: min(100%, 5.5rem);
  }
}
@media (min-width: 1024px) {
  .care-rates__footer {
    --care-footer-gap: var(--space-5);
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .care-rates__ctas {
    grid-column: 3;
    width: auto;
    justify-content: flex-end;
  }
}
/* Mobile: airier rows + compact footer stack */
@media (max-width: 699px) {
  .care-rates .data-table--rates {
    --rates-price-size: var(--text-xl);
    --rates-card-row-gap: var(--space-3);
    --rates-row-title-pb: var(--space-3);
  }
  .care-rates .rates-panel .data-table--rates tr {
    padding: var(--space-5);
    column-gap: var(--space-5);
  }
  .care-rates__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .care-rates__ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .care-rates__ctas .text-link {
    text-align: center;
  }
}
/*
 * Detail columns after key figures.
 * Mobile: one continuous hairline stack (no orphan gap / narrow centred column).
 * Desktop: air between the figure row and the three editorial columns.
 */
.fact-dl + .comparison-list {
  --fact-follow-item-pad-y: var(--space-5);
  --fact-follow-item-pad-top-first: var(--space-5);
  margin-top: var(--fact-dl-follow-mt);
  margin-inline: 0;
  max-width: none;
}
.fact-dl + .comparison-list .comparison-list__item {
  padding-block: var(--fact-follow-item-pad-y);
}
.fact-dl + .comparison-list .comparison-list__item:first-child {
  padding-top: var(--fact-follow-item-pad-top-first);
}
.fact-dl + .comparison-list .comparison-list__item:last-child {
  padding-bottom: 0;
}
@media (min-width: 700px) {
  .fact-dl + .comparison-list {
    --fact-follow-item-pad-top-first: 0;
  }
}
@media (min-width: 900px) {
  .fact-dl + .comparison-list {
    --fact-follow-item-pad-y: 0;
  }
}

.subnav {
  --subnav-h: 3.75rem;
  position: sticky;
  top: calc(var(--banner-h) + var(--header-offset));
  z-index: var(--z-subnav);
  /* Solid white — frosted glass tinted the band underneath and read as a seam */
  background: var(--white);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}
/* Its tab sections have no bounded containing block, so native sticky
   release never fires — shared.js toggles this once scrolled past the
   last tracked section, so the bar can't overlap content below it. */
.subnav.is-past-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 768px) {
  .subnav {
    --subnav-h: 4.25rem;
  }
}
/* Expose subnav height to siblings (sticky media, scroll spies) */
body:has(.subnav) {
  --subnav-h: 3.75rem;
}
@media (min-width: 768px) {
  body:has(.subnav) {
    --subnav-h: 4.25rem;
  }
}
/* Strip container gutter inside subnav so the scrollable list can fill the full
   nav width — gutter is restored via padding-inline on the list itself. */
.subnav .container {
  padding-inline: 0;
}
.subnav__list {
  --subnav-gap: var(--space-1);
  --subnav-pad-y: var(--space-2);
  display: flex;
  gap: var(--subnav-gap);
  overflow-x: auto;
  margin: 0;
  padding: var(--subnav-pad-y)
           max(var(--rw-gutter-x), env(safe-area-inset-right))
           var(--subnav-pad-y)
           max(var(--rw-gutter-x), env(safe-area-inset-left));
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /*
   * Scroll shadows: a dynamic "more this way" cue that appears only when
   * there's actually something to scroll to. Two opaque cover gradients
   * scroll with the content (local) and sit over two shadow gradients
   * fixed to the edges (scroll). Keep main's hidden scrollbar.
   */
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) 0 0,
    linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) 100% 0,
    linear-gradient(to right, rgba(9, 26, 32, 0.18), rgba(9, 26, 32, 0)) 0 0,
    linear-gradient(to left, rgba(9, 26, 32, 0.18), rgba(9, 26, 32, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--white);
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.subnav__list::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .subnav__list {
    --subnav-gap: var(--space-2);
    --subnav-pad-y: var(--space-3);
  }
}
.subnav a {
  scroll-margin-inline: var(--space-4);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-grey);
  white-space: nowrap;
  scroll-snap-align: start;
}
.subnav a:hover,
.subnav a:focus-visible,
.subnav a.is-active {
  color: var(--deep-teal);
  background: color-mix(in srgb, var(--deep-teal) 7%, var(--white));
}

.layout-sidebar {
  --sidebar-gap: var(--space-14);
  /* Clears sticky site header when contact card pins beside the form */
  --sidebar-sticky-top: calc(var(--header-offset) + var(--space-4));
  display: grid;
  gap: var(--sidebar-gap);
}
@media (min-width: 960px) {
  .layout-sidebar {
    --sidebar-gap: var(--space-10);
    /* Wider form column so enquire / FAQ-style pages don’t feel phone-narrow on desktop */
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    align-items: start;
  }
  .layout-sidebar > .multistep {
    max-width: 42rem;
  }
  .layout-sidebar > .sidebar-card {
    position: sticky;
    top: var(--sidebar-sticky-top);
  }
}
.sidebar-card {
  padding: var(--panel-pad);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sidebar-card h2, .sidebar-card h3 { margin: 0; }
.sidebar-card p {
  margin: 0;
  color: var(--muted-grey);
  line-height: 1.6;
}
.sidebar-card a:not(.btn) {
  color: var(--deep-teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target, 2.75rem);
}

/*
 * Contact list — interactive rows (tel / mailto / outbound).
 * Same surface language as place-list, tighter for directory use.
 */
.contact-list {
  --contact-gap: 0;
  --contact-item-gap: var(--space-2);
  --contact-item-pad-y: var(--space-5);
  --contact-action-gap: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--contact-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
}
.contact-list__item {
  display: grid;
  gap: var(--contact-item-gap);
  padding-block: var(--contact-item-pad-y);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
}
@media (min-width: 640px) {
  .contact-list {
    --contact-item-gap: var(--space-4) var(--space-6);
  }
  .contact-list__item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
}
.contact-list__org h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--deep-teal);
  line-height: 1.3;
}
.contact-list__org p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-md);
  line-height: 1.5;
}
.contact-list__action {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--contact-action-gap);
  font-weight: 600;
  font-size: var(--text-base);
}
.contact-list__action a {
  color: var(--deep-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  /* Tel/mailto links are the primary contact action — keep them tappable (WCAG 2.5.8). */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target, 2.75rem);
}
.contact-list__action a:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}
.contact-list__action a:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}
.contact-list__sep {
  color: color-mix(in srgb, var(--deep-teal) 28%, transparent);
  user-select: none;
}

/*
 * Flat info cards — border only. Used for grant directory tiles and jump cards.
 * Funding routes themselves use .funding-route (copy + next-steps panel), not
 * three equal cards: those read as a dump on a page people arrive to anxious.
 */
.info-card--flat {
  box-shadow: none;
}

/*
 * Invoice pair — Restwell house vs Continuity care as two labelled bills,
 * not a prose lecture. Same enquiry line sits under both.
 */
.invoice-pair {
  --invoice-gap: var(--space-4);
  display: grid;
  gap: var(--invoice-gap);
}
@media (min-width: 700px) {
  .invoice-pair {
    --invoice-gap: var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.invoice-card {
  --invoice-pad: var(--panel-pad);
  --invoice-gap: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--invoice-gap);
  padding: var(--invoice-pad);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.invoice-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.invoice-card p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.55;
}
.invoice-pair__note {
  margin: var(--space-4) 0 0;
  color: var(--deep-teal);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
}

/*
 * Cover split — usually covered / usually not. Colour is a hint; the heading
 * and the mark are the actual signal (WCAG 1.4.1).
 */
.cover-split {
  --cover-gap: var(--space-4);
  --cover-pad: var(--space-5);
  --cover-item-gap: var(--space-3);
  --cover-yes: #1b6b48;
  --cover-no: var(--error-red);
  --cover-yes-bg: color-mix(in srgb, var(--cover-yes) 8%, var(--white));
  --cover-no-bg: color-mix(in srgb, var(--cover-no) 8%, var(--white));
  display: grid;
  gap: var(--cover-gap);
  width: 100%;
}
@media (min-width: 640px) {
  .cover-split {
    --cover-gap: var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cover-split__col {
  display: flex;
  flex-direction: column;
  gap: var(--cover-item-gap);
  padding: var(--cover-pad);
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.cover-split__col--yes {
  background: var(--cover-yes-bg);
  border-color: color-mix(in srgb, var(--cover-yes) 22%, transparent);
}
.cover-split__col--no {
  background: var(--cover-no-bg);
  border-color: color-mix(in srgb, var(--cover-no) 22%, transparent);
}
.cover-split__col h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cover-split__col--yes h4 { color: var(--cover-yes); }
.cover-split__col--no h4 { color: var(--cover-no); }
/* Inside funding-route panels the tinted fills double up (box-in-box on sand).
   White cells with the brand's soft shadow read calmer; the ✓/× marks and
   hairlines still carry the covered/not-covered distinction (WCAG 1.4.1). */
.funding-route .cover-split__col {
  --cover-yes-bg: var(--white);
  --cover-no-bg: var(--white);
  box-shadow: 0 2px 12px rgb(15 35 42 / 0.05);
  border-radius: var(--radius-lg);
}
.cover-split__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cover-split__col li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--deep-teal);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.45;
}
.cover-split__mark {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: 0.1em; /* em nudge: step number sits on cap-height */
  border-radius: 999px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}
.cover-split__col--yes .cover-split__mark {
  background: var(--cover-yes);
}
.cover-split__col--no .cover-split__mark {
  background: var(--cover-no);
}
.cover-split__source {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--muted-grey);
  line-height: 1.5;
}
.cover-split__source a {
  color: var(--deep-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.15em;
  /* Small-print source links still need usable touch targets. */
  display: inline-block;
  min-height: calc(var(--tap-target, 2.75rem) / 2);
}

/*
 * Funding routes — one visual card per route. Cover-split does the compare;
 * a short footer holds the contact. Tokens live on the article.
 */
.funding-routes {
  --funding-routes-gap: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--funding-routes-gap);
}
@media (min-width: 900px) {
  .funding-routes {
    --funding-routes-gap: var(--space-8);
  }
}
.funding-route {
  --funding-route-gap: var(--space-5);
  --funding-route-pad: var(--panel-pad);
  display: grid;
  gap: var(--funding-route-gap);
  padding: var(--funding-route-pad);
  border-radius: var(--radius-lg);
  /* White panel + soft border — match hospitality cards, not sand “form pack” look */
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
  box-shadow: 0 8px 28px rgb(15 35 42 / 0.04);
  align-items: start;
}
.funding-route__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.funding-route__copy > h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.funding-route__copy > p {
  margin: 0;
  max-width: var(--rw-readable);
  color: var(--muted-grey);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.funding-route__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  width: 100%;
}
.funding-route__foot p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--deep-teal);
}
.funding-route__foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target, 2.75rem);
}
.funding-route .sidebar-card h3 {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--warm-gold-text);
}
.funding-route .sidebar-card .checklist {
  gap: var(--space-3);
}
.funding-route .sidebar-card .checklist li {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* Grants + contacts side by side on desktop */
.fund-directory {
  --fund-directory-gap: var(--space-8);
  --fund-label-mb: var(--space-5);
  --fund-label-pb: var(--space-3);
  --fund-follow-mt: var(--space-6);
  display: grid;
  gap: var(--fund-directory-gap);
  align-items: start;
}
@media (min-width: 900px) {
  .fund-directory {
    --fund-directory-gap: var(--space-10);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.fund-directory__label {
  margin: 0 0 var(--fund-label-mb);
  padding-bottom: var(--fund-label-pb);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 14%, transparent);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gold-text);
}
.fund-directory__follow {
  margin: var(--fund-follow-mt) 0 0;
}
.fund-directory .link-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.fund-directory .contact-list {
  border-top: 0;
}
.fund-directory .contact-list__item:first-child {
  padding-top: 0;
}
.fund-directory .card-grid {
  --grid-gap: var(--space-4);
  grid-template-columns: 1fr;
}
/* Half-column contacts: don’t shove the number to the far edge. */
.fund-directory .contact-list__item {
  grid-template-columns: minmax(0, 1fr);
}
.fund-directory .contact-list__action {
  justify-self: start;
}

/*
 * Compact outbound link directory — title + one-line blurb, no card chrome.
 */
.link-list {
  --link-list-gap: var(--space-5);
  --link-list-item-gap: var(--space-1);
  --link-list-item-pad-y: var(--space-4);
  display: grid;
  gap: var(--link-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list li {
  display: flex;
  flex-direction: column;
  gap: var(--link-list-item-gap);
  padding-block: var(--link-list-item-pad-y);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
}
.link-list a {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--deep-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}
.link-list a:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}
.link-list a:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}
.link-list span {
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.55;
}
.section-head + .link-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
  vertical-align: top;
}
.data-table th {
  font-weight: 600;
  color: var(--deep-teal);
  background: color-mix(in srgb, var(--deep-teal) 4%, var(--white));
}
.data-table td { color: var(--muted-grey); }
.data-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--space-3);
  color: var(--muted-grey);
  font-size: var(--text-sm);
}
/* Inside .rates-panel the panel owns the chrome — table is flush */
.rates-panel .data-table--rates {
  border-collapse: collapse;
}

/* Rates / care tables — prices as the visual anchor, not muted body grey */
.data-table--rates {
  /* Spacing tokens */
  --rates-card-mb: var(--space-4);
  --rates-card-pad: var(--panel-pad);
  --rates-card-col-gap: var(--space-6);
  --rates-card-row-gap: var(--space-3);
  --rates-row-title-pb: var(--space-3);
  --rates-cell-gap: var(--space-1);
  --rates-cell-pad-y: var(--space-4);
  --rates-cell-pad-x: var(--space-5);
  /* Type tokens — remap at layout / lg, never sprinkle font-size in media */
  --rates-price-size: var(--text-2xl);
  --rates-row-title-size: var(--type-ui-size);
  --rates-col-label-size: var(--type-eyebrow-size);
  --rates-head-size: var(--type-meta-size);
  --rates-hint-size: var(--type-meta-size);
  width: 100%;
}
@media (min-width: 700px) {
  .data-table--rates {
    --rates-price-size: var(--text-xl);
    --rates-row-title-size: var(--text-base);
  }
}
@media (min-width: 768px) {
  .data-table--rates {
    --rates-cell-pad-y: var(--space-5);
  }
}
@media (min-width: 1024px) {
  .data-table--rates {
    --rates-cell-pad-x: var(--space-6);
    --rates-price-size: var(--text-2xl);
  }
}
.data-table--rates th[scope="row"] {
  font-size: var(--rates-row-title-size);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
  background: transparent;
  white-space: normal;
  line-height: var(--leading-snug);
}
.data-table--rates .is-price,
.data-table .is-price {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--rates-price-size, var(--text-lg));
  color: var(--deep-teal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
.data-table__hint {
  display: inline;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--rates-hint-size, var(--type-meta-size));
  color: var(--muted-grey);
  white-space: nowrap;
}
.data-table--rates tbody tr:last-child th,
.data-table--rates tbody tr:last-child td {
  border-bottom: 0;
}
.data-table--care th[scope="row"] {
  max-width: none;
}
/* Unavailable weekend care: same scale as the row label, not a price. */
.data-table .is-price--na {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--type-meta-size);
  color: var(--muted-grey);
  white-space: normal;
}

/*
 * Phone: stack each stay type as its own block so labels aren’t clipped
 * by a three-column squeeze. Desktop keeps the comparison table.
 */
@media (max-width: 699px) {
  .data-table--rates thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .data-table--rates,
  .data-table--rates tbody {
    display: block;
    width: 100%;
  }
  .data-table--rates tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rates-card-col-gap);
    row-gap: var(--rates-card-row-gap);
    margin: 0 0 var(--rates-card-mb);
    padding: var(--rates-card-pad);
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
    border-radius: var(--radius);
  }
  .data-table--rates tr:last-child { margin-bottom: 0; }
  .data-table--rates th[scope="row"] {
    grid-column: 1 / -1;
    padding: 0 0 var(--rates-row-title-pb);
    border: 0;
  }
  .data-table--rates td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rates-cell-gap);
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .data-table--rates td::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: var(--rates-col-label-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted-grey) 92%, transparent);
  }
  /* Inside the unified panel: row dividers, not nested mini-cards */
  .rates-panel .data-table--rates tr {
    margin: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
    box-shadow: none;
    /* Same gutter as examples + peak — standardised panel pad */
    padding: var(--space-5);
    column-gap: var(--space-6);
  }
  .rates-panel .data-table--rates tr:last-child {
    border-bottom: 0;
  }
}
@media (min-width: 700px) {
  .data-table--rates {
    table-layout: fixed;
  }
  .data-table--rates th,
  .data-table--rates td {
    padding: var(--rates-cell-pad-y) var(--rates-cell-pad-x);
    vertical-align: middle;
  }
  .data-table--rates thead th {
    font-size: var(--rates-head-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted-grey) 92%, transparent);
    background: color-mix(in srgb, var(--deep-teal) 3%, var(--white));
  }
  .data-table--rates thead th:first-child {
    width: 42%;
    font-size: var(--rates-row-title-size);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--deep-teal);
  }
  .data-table--rates thead th:not(:first-child) {
    width: 29%;
    text-align: right;
  }
  .data-table--rates tbody td {
    text-align: right;
  }
  .rates-panel .data-table--rates {
    --rates-price-size: var(--text-xl);
    --rates-cell-pad-x: var(--space-4);
  }
  /* After .data-table--rates { table-layout: fixed } so care columns
     can shrink to the figures instead of a 42/29/29 split. */
  .data-table--rates.data-table--care {
    table-layout: auto;
    --rates-cell-pad-y: var(--space-3);
  }
  .data-table--rates.data-table--care thead th:first-child {
    width: auto;
  }
  .data-table--rates.data-table--care thead th:not(:first-child),
  .data-table--rates.data-table--care tbody td {
    width: 1%;
  }
  .data-table--rates.data-table--care thead th:not(:first-child) {
    white-space: nowrap;
  }
  .data-table--rates.data-table--care tbody td.is-price--na {
    white-space: nowrap;
  }
}
@media (min-width: 768px) {
  .data-table--rates.data-table--care {
    --rates-cell-pad-y: var(--space-4);
  }
}
/*
 * Rates block — tariff panel + follow links + peak disclosure.
 * Section-head sits above (shared --section-after-head), same as payment / care.
 */
.rates-block {
  --rates-block-gap: var(--section-after-head);
  display: grid;
  gap: var(--rates-block-gap);
  width: 100%;
  /* Stop open peak dates from expanding past the container */
  min-width: 0;
}
.rates-block > * {
  min-width: 0;
  max-width: 100%;
}
.rates-panel {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  background: var(--white);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--deep-teal) 4%, transparent);
}
.rates-panel .data-table--rates thead th {
  background: color-mix(in srgb, var(--deep-teal) 3.5%, var(--white));
}
@media (min-width: 700px) {
  .rates-panel .data-table--rates th,
  .rates-panel .data-table--rates td {
    padding-inline: var(--space-5);
  }
  .rates-panel .data-table--rates thead th:last-child,
  .rates-panel .data-table--rates tbody td:last-child {
    padding-inline-end: var(--space-6);
  }
  .rates-panel .data-table--rates thead th:first-child,
  .rates-panel .data-table--rates tbody th[scope="row"] {
    padding-inline-start: var(--space-6);
  }
}
.rates-follow {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Peak season dates — disclosure. Reads as a clear control (not a caption):
   teal border, gold action chip, larger chevron. Guests must not miss which
   calendar windows are peak before they enquire. */
.peak-dates {
  --peak-list-mt: var(--space-3);
  --peak-item-pad-y: var(--space-2);
  --peak-item-gap: var(--space-3);
  --peak-item-size: var(--text-sm);
  --peak-label-size: var(--type-meta-size);
  --peak-title-size: var(--text-lg);
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  /* Hairline border keeps the disclosure quiet — the gold chip is the loud part. */
  border: 1px solid color-mix(in srgb, var(--deep-teal) 25%, transparent);
  box-shadow: 0 4px 18px rgb(15 35 42 / 0.06);
}
.peak-dates__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title action"
    "hint action";
  column-gap: var(--space-4);
  row-gap: 0.2rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  border-radius: calc(var(--radius-lg) - 1px);
  transition: background-color 160ms ease;
}
@media (hover: hover) {
  .peak-dates__summary:hover { background: color-mix(in srgb, var(--deep-teal) 4%, var(--white)); }
}
.peak-dates__summary:focus { outline: none; }
.peak-dates__summary:focus-visible {
  outline: 3px solid var(--warm-gold);
  outline-offset: 2px;
}
.peak-dates__summary::-webkit-details-marker { display: none; }
.peak-dates__summary::marker { content: ""; }
/* Gold action chip — “Show dates” must read as the interactive affordance. */
.peak-dates__summary-action {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
  border-radius: 999px;
  background: var(--warm-gold);
  color: var(--ink-on-gold);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgb(15 35 42 / 0.08);
}
@media (hover: hover) {
  .peak-dates__summary:hover .peak-dates__summary-action,
  .peak-dates__summary:focus-visible .peak-dates__summary-action {
    background: var(--warm-gold-hero);
  }
}
.peak-dates .peak-dates__action-open { display: inline; }
.peak-dates .peak-dates__action-close { display: none; }
.peak-dates[open] .peak-dates__action-open { display: none; }
.peak-dates[open] .peak-dates__action-close { display: inline; }
.peak-dates__action-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  flex-shrink: 0;
}
.peak-dates[open] > .peak-dates__summary .peak-dates__action-chevron {
  transform: rotate(-135deg);
}
.peak-dates[open] {
  border-color: color-mix(in srgb, var(--deep-teal) 45%, transparent);
}
.peak-dates__summary-title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--peak-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--deep-teal);
}
.peak-dates__summary-hint {
  grid-area: hint;
  color: var(--muted-grey);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.peak-dates__list {
  display: grid;
  gap: 0;
  /* List lives inside the card now the padding moved onto the summary */
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-4);
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  min-width: 0;
}
.peak-dates__list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding-block: var(--peak-item-pad-y);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 8%, transparent);
  color: var(--deep-teal);
  font-size: var(--peak-item-size);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
  min-width: 0;
}
.peak-dates__list li:last-child { border-bottom: 0; }
.peak-dates__label {
  min-width: 0;
  font-size: var(--peak-label-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted-grey) 92%, transparent);
}
.peak-dates__range {
  min-width: 0;
  color: var(--deep-teal);
  /* Allow wrap so open peak can't force .rates-block wider than max-width */
  white-space: normal;
}
@media (min-width: 640px) {
  .peak-dates__list {
    /* minmax(0,1fr) — critical: default 1fr min-content was stretching the rates table */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
  .peak-dates__range {
    white-space: nowrap;
  }
  .peak-dates__list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* Examples — inside the rates panel; same 1fr/1fr price columns as mobile tariff */
.rates-examples {
  --rates-examples-pad: var(--space-5);
  --rates-examples-item-pad-y: var(--space-4);
  --rates-examples-title-size: var(--text-sm);
  --rates-examples-name-size: var(--type-ui-size);
  --rates-examples-meta-size: var(--type-meta-size);
  --rates-examples-price-size: var(--text-xl);
  --rates-examples-col-gap: var(--space-6);
  padding: var(--rates-examples-pad);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  background: color-mix(in srgb, var(--deep-teal) 2%, var(--white));
}
@media (min-width: 700px) {
  .rates-examples {
    --rates-examples-pad: var(--space-5) var(--space-6);
    --rates-examples-item-pad-y: var(--space-3);
    --rates-examples-name-size: var(--text-sm);
    --rates-examples-price-size: var(--text-lg);
  }
}
.rates-examples__head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.rates-examples__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--rates-examples-title-size);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.rates-examples__cols {
  display: none;
  margin: 0;
}
.rates-examples__cols span {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted-grey) 92%, transparent);
}
.rates-examples__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rates-examples__list li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--rates-examples-col-gap);
  row-gap: var(--space-2);
  padding-block: var(--rates-examples-item-pad-y);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 8%, transparent);
  min-width: 0;
}
.rates-examples__list li:first-child {
  border-top: 0;
}
.rates-examples__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
  min-width: 0;
}
.rates-examples__name {
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
  font-size: var(--rates-examples-name-size);
  line-height: var(--leading-snug);
}
.rates-examples__meta {
  color: var(--muted-grey);
  font-size: var(--rates-examples-meta-size);
  line-height: var(--leading-snug);
}
.rates-examples__prices {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--rates-examples-col-gap);
}
.rates-examples .is-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--rates-examples-price-size);
  color: var(--deep-teal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
.rates-examples .is-price::before {
  content: attr(data-label);
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted-grey) 92%, transparent);
}
/* Desktop: side-by-side row matching tariff column proportions */
@media (min-width: 700px) {
  .rates-examples__head {
    grid-template-columns: 42% 58%;
    align-items: baseline;
    gap: 0;
    margin-bottom: var(--space-2);
  }
  .rates-examples__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .rates-examples__cols span {
    text-align: right;
  }
  .rates-examples__list li {
    grid-template-columns: 42% 58%;
    column-gap: 0;
    row-gap: 0;
    align-items: baseline;
  }
  .rates-examples__copy {
    grid-column: auto;
  }
  .rates-examples__prices {
    grid-column: auto;
  }
  .rates-examples .is-price {
    align-items: flex-end;
    text-align: right;
    gap: 0;
  }
  .rates-examples .is-price::before {
    content: none;
  }
}

.lede + p:has(.btn) { margin-top: var(--space-5); }
/* Sibling of .fact-dl — use scale tokens directly (custom props on .fact-dl don’t apply here). */
.fact-dl + .lede {
  margin-top: 0;
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
@media (min-width: 700px) {
  .fact-dl + .lede {
    margin-top: var(--section-stack-gap);
    padding-top: 0;
    border-top: 0;
  }
}

.pill-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--space-2);
  margin: 0 0 var(--section-stack-gap);
  padding: 0;
  list-style: none;
  /* Fade the trailing edge so a cut-off pill reads as "more to scroll", not clipping */
  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
}
.pill-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .pill-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.pill-tabs button {
  scroll-margin-inline: var(--space-4);
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--deep-teal) 16%, transparent);
  background: var(--white);
  color: var(--deep-teal);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  cursor: pointer;
}
.pill-tabs button[aria-pressed="true"],
.pill-tabs button[aria-selected="true"],
.pill-tabs button.is-active {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
  color: var(--white);
}

/*
 * House diary — booked nights from the Outlook ICS feed.
 * Full-width grid: date + nightly rate in each cell. First/last nights are
 * solid teal; nights between sit on a light band. Stay summary sits beside
 * the calendar from lg.
 */
.availability {
  --availability-gap: var(--section-stack-gap);
  --availability-layout-gap: var(--grid-gap);
  --availability-legend-gap: var(--space-3) var(--space-6);
  --availability-nav: 2.75rem; /* 44px hit area for month chevrons */
  --availability-cell-min: 2.75rem; /* 44px tap target */
  --availability-cell-pad: var(--space-2) 0 var(--space-1);
  --availability-card-pad: var(--panel-pad);
  --availability-card-gap: var(--space-5);
  --availability-stay-gap: var(--space-5);
  --availability-stay-width: 22rem;
  --availability-stay-sticky-top: calc(var(--header-offset) + var(--subnav-h) + var(--space-4));
  --availability-cell-radius: var(--radius);
  --availability-wd-size: var(--type-meta-size);
  --availability-num-size: var(--text-sm);
  --availability-price-size: var(--text-2xs);
  --availability-key-mark: var(--space-5);
  display: grid;
  gap: var(--availability-gap);
}
@media (min-width: 768px) {
  .availability {
    --availability-cell-min: 3.25rem; /* date + rate stack needs a taller cell */
  }
}
.availability__layout {
  display: grid;
  gap: var(--availability-layout-gap);
  align-items: start;
}
@media (min-width: 1024px) {
  .availability__layout {
    grid-template-columns: minmax(0, 1fr) var(--availability-stay-width);
  }
}
.availability__card,
.availability__stay {
  padding: var(--availability-card-pad);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--deep-teal) 5%, transparent);
}
.availability__card {
  display: grid;
  gap: var(--availability-card-gap);
  min-width: 0;
}
.availability__toolbar {
  display: grid;
  grid-template-columns: var(--availability-nav) minmax(0, 1fr) var(--availability-nav);
  align-items: center;
  column-gap: var(--space-2);
}
.availability__choose {
  margin: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted-grey);
}
.availability__nav {
  width: var(--availability-nav);
  height: var(--availability-nav);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-grey);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.availability__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.availability__nav:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 2px;
}
@media (hover: hover) {
  .availability__nav:hover:not(:disabled) {
    background: color-mix(in srgb, var(--deep-teal) 6%, var(--white));
    color: var(--deep-teal);
  }
}
.availability__months {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .availability__months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.availability__month-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
  text-align: center;
}
.availability__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 var(--space-1);
}
.availability__grid th {
  padding: 0 0 var(--space-2);
  font-size: var(--availability-wd-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-grey);
  text-align: center;
}
.availability__grid th abbr {
  text-decoration: none;
}
.availability__day {
  position: relative;
  padding: 0;
  text-align: center;
  vertical-align: top;
  font-size: var(--availability-num-size);
  font-variant-numeric: tabular-nums;
  color: var(--deep-teal);
}
.availability__num {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em; /* optical: date stacked on price */
  width: 100%;
  min-height: var(--availability-cell-min);
  margin: 0;
  padding: var(--availability-cell-pad);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.availability__date {
  font-weight: var(--weight-semibold);
}
.availability__price {
  font-size: var(--availability-price-size);
  font-weight: var(--weight-regular);
  color: var(--muted-grey);
  white-space: nowrap;
}
button.availability__num {
  cursor: pointer;
}
button.availability__num:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: -2px;
  border-radius: var(--availability-cell-radius);
}
@media (hover: hover) {
  .availability__day.is-pick:not(.is-hope):hover {
    background: color-mix(in srgb, var(--deep-teal) 8%, var(--white));
    border-radius: var(--availability-cell-radius);
  }
}
.availability__day.is-hope {
  background: color-mix(in srgb, var(--deep-teal) 12%, var(--white));
  color: var(--deep-teal);
}
.availability__day.is-hope .availability__price {
  color: var(--muted-grey);
}
.availability__day.is-hope-start,
.availability__day.is-hope-end {
  background: var(--deep-teal);
  color: var(--white);
}
.availability__day.is-hope-start .availability__price,
.availability__day.is-hope-end .availability__price {
  color: color-mix(in srgb, var(--white) 82%, var(--deep-teal));
}
.availability__day.is-hope-start,
.availability__grid td:nth-child(1).is-hope {
  border-start-start-radius: var(--availability-cell-radius);
  border-end-start-radius: var(--availability-cell-radius);
}
.availability__day.is-hope-end,
.availability__grid td:nth-child(7).is-hope {
  border-start-end-radius: var(--availability-cell-radius);
  border-end-end-radius: var(--availability-cell-radius);
}
@media (hover: hover) {
  .availability__day.is-hope-start.is-pick:hover,
  .availability__day.is-hope-end.is-pick:hover {
    background: var(--deep-teal);
  }
}
.availability__day.is-hope-start button.availability__num:focus-visible,
.availability__day.is-hope-end button.availability__num:focus-visible {
  outline-color: var(--white);
}
.availability__day.is-hope-checkout::after {
  content: "";
  position: absolute;
  inset: 0.2em;
  border: 1.5px dashed var(--deep-teal);
  border-radius: var(--availability-cell-radius);
  pointer-events: none;
}
.availability__day.is-booked .availability__date,
.availability__day.is-booked .availability__price {
  color: var(--muted-grey);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.availability__day.is-peak::before {
  content: "";
  position: absolute;
  top: 0.12em; /* optical: gold peak mark above the date */
  left: 50%;
  width: 0.28em;
  height: 0.28em;
  margin-left: -0.14em; /* optical: centre the peak dot */
  border-radius: 50%;
  background: var(--warm-gold);
  z-index: 2;
  pointer-events: none;
}
.availability__day.is-past:not(.is-booked) .availability__num {
  color: color-mix(in srgb, var(--muted-grey) 55%, var(--white));
}
.availability__day.is-past:not(.is-booked) .availability__price {
  color: color-mix(in srgb, var(--muted-grey) 45%, var(--white));
}
.availability__day.is-today .availability__date {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.12em; /* optical: today mark under the numeral */
}
.availability__day.is-hope-start .availability__date,
.availability__day.is-hope-end .availability__date {
  text-decoration: none;
}
.availability__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--availability-legend-gap);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  list-style: none;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted-grey);
}
.availability__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.availability__key-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--availability-key-mark);
  height: var(--availability-key-mark);
  border-radius: 0.2em; /* optical: mini diary cell */
  box-sizing: border-box;
}
.availability__key.is-open .availability__key-mark {
  border: 1px solid color-mix(in srgb, var(--deep-teal) 28%, transparent);
  background: var(--white);
}
.availability__key.is-hope .availability__key-mark {
  background: var(--deep-teal);
}
.availability__key.is-booked .availability__key-mark {
  border: 1px solid color-mix(in srgb, var(--muted-grey) 35%, transparent);
  background: color-mix(in srgb, var(--muted-grey) 8%, var(--white));
}
.availability__key.is-booked .availability__key-mark::after {
  content: "";
  position: absolute;
  left: 0.12em; /* optical: strike inset */
  right: 0.12em;
  top: 50%;
  border-top: 1px solid var(--muted-grey);
}
.availability__key.is-peak .availability__key-mark {
  border: 1px solid color-mix(in srgb, var(--deep-teal) 14%, transparent);
  background: var(--white);
}
.availability__key.is-peak .availability__key-mark::before {
  content: "";
  position: absolute;
  top: 0.18em; /* optical: gold peak mark */
  left: 50%;
  width: 0.32em;
  height: 0.32em;
  margin-left: -0.16em; /* optical: centre the peak dot */
  border-radius: 50%;
  background: var(--warm-gold);
}
.availability__live {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted-grey);
}
.availability__live:empty {
  display: none;
}
.availability__stay {
  display: grid;
  gap: var(--availability-stay-gap);
  align-content: start;
}
@media (min-width: 1024px) {
  .availability__stay {
    position: sticky;
    top: var(--availability-stay-sticky-top);
  }
}
.availability__stay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.availability__stay-title {
  margin: 0;
  font-size: var(--text-xl);
}
.availability__stay-clear {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted-grey);
  text-decoration: underline;
  cursor: pointer;
}
.availability__stay-clear:hover {
  color: var(--deep-teal);
}
.availability__stay-clear[hidden] {
  display: none;
}
.availability__stay-times {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-meta-size);
  line-height: var(--leading-snug);
  color: var(--muted-grey);
}
.availability__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
}
.availability__stay-arrow {
  align-self: center;
  color: var(--muted-grey);
  font-size: var(--text-lg);
  line-height: 1;
}
.availability__field {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 14%, transparent);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.availability__field.is-active {
  border-color: var(--deep-teal);
  box-shadow: inset 0 0 0 1px var(--deep-teal);
  background: var(--white);
}
.availability__field-label {
  display: block;
  font-size: var(--type-meta-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-grey);
}
.availability__field-value {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
}
.availability__stay-prompt,
.availability__stay-foot {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted-grey);
}
.availability__quote {
  display: grid;
  gap: var(--space-3);
}
.availability__stay-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
}
.availability__stay-prompt[hidden],
.availability__quote[hidden] {
  display: none;
}
.availability__breakdown {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.availability__breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.availability__breakdown dt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-grey);
}
.availability__breakdown dd {
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--deep-teal);
  font-weight: var(--weight-semibold);
}
.availability__total {
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.availability__total dt,
.availability__total dd {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--deep-teal);
}
.availability__cta {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.availability__cta .btn {
  width: 100%;
  box-sizing: border-box;
}
.availability__enquiry {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: var(--space-6);
  border: 0;
  border-radius: 4px;
  border-top: 4px solid var(--warm-gold);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%);
}
.availability__enquiry::backdrop {
  background: rgb(27 77 92 / 68%);
}
.availability__enquiry-close {
  float: right;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--deep-teal) 22%, transparent);
  border-radius: 50%;
  padding: 0;
  color: var(--deep-teal);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.availability__enquiry-close:hover,
.availability__enquiry-close:focus-visible {
  color: var(--white);
  background: var(--deep-teal);
}
.availability__enquiry h3 {
  margin: 0 2rem var(--space-2) 0;
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: var(--type-h3);
}
.availability__enquiry > p {
  margin: 0 0 var(--space-5);
}
.availability__enquiry .step-indicator {
  margin-bottom: var(--space-5);
}
.availability__enquiry .form-step > .btn {
  margin-top: var(--space-3);
}

/*
 * Payment steps — editorial sequence (matches .process-list indices).
 * Large serif gold numerals; no filled pills. Phone: index | copy. Desktop: stack.
 */
.payment-steps {
  --payment-step-gap: var(--grid-gap);
  --payment-item-gap: var(--space-2) var(--space-4);
  --payment-index-font: var(--text-3xl);
  --payment-title-size: var(--type-h3);
  --payment-body-size: var(--type-body-size);
  display: grid;
  gap: var(--payment-step-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.payment-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--payment-item-gap);
  align-items: start;
  align-content: start;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .payment-steps {
    --payment-step-gap: var(--space-8);
    --payment-index-font: var(--text-4xl);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payment-steps__item {
    --payment-item-gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
  }
}
.payment-steps__index {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--payment-index-font);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  /* --warm-gold (2.1:1 on this light background) fails WCAG even at large
     text size; --warm-gold-text is the token's text-safe counterpart. */
  color: var(--warm-gold-text);
  padding-top: 0.08em; /* em nudge: optical centering of numeral on gold fill */
}
.payment-steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.payment-steps__body h3 {
  margin: 0;
  font-size: var(--payment-title-size);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.payment-steps__body p {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--payment-body-size);
  line-height: var(--type-body-leading);
  max-width: 28rem;
}
@media (min-width: 768px) {
  .payment-steps__body p {
    max-width: none;
  }
}
.payment-note {
  margin: 0;
  max-width: 40rem;
  color: var(--muted-grey);
  font-size: var(--type-ui-size);
  line-height: var(--leading-body);
}

/*
 * Process — head above, then photo | vertical timeline (inspo: marker + rail).
 * Spacing: head → content via .section-head (--section-after-head).
 * Timeline needs more air than card grids — step/layout gaps sit above --grid-gap.
 * Use .process on the section (id may be #process, #next, etc.).
 */
.process {
  --process-media-radius: var(--radius-lg);
  --process-layout-gap: var(--space-8);
  --process-step-gap: var(--space-6);
  --process-body-gap: var(--space-4);
  --process-item-gap: var(--space-5);
  --process-marker: 2.5rem;
  --process-rail: color-mix(in srgb, var(--deep-teal) 16%, transparent);
  --process-marker-bg: var(--soft-sand);
  --process-marker-fg: var(--deep-teal);
  /* Head → photo/timeline: one step above the shared after-head (was cramped) */
  --process-after-head: var(--space-10);
}
.process__head {
  max-width: var(--rw-readable);
  margin-inline: auto;
  margin-bottom: var(--process-after-head);
}
.process__layout {
  display: flex;
  flex-direction: column;
  gap: var(--process-layout-gap);
}
.process__media {
  order: 2;
  margin: 0;
  border-radius: var(--process-media-radius);
  overflow: hidden;
  background: var(--driftwood);
}
.process__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
  display: block;
}
.process-list {
  --process-rail-x: calc(var(--process-marker) / 2);
  order: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--process-step-gap);
  position: relative;
  min-width: 0;
}
.process-list::before {
  content: "";
  position: absolute;
  left: var(--process-rail-x);
  top: calc(var(--process-marker) / 2);
  bottom: calc(var(--process-marker) / 2);
  width: 1px;
  background: var(--process-rail);
  transform: translateX(-50%);
}
.process-list > li {
  display: grid;
  grid-template-columns: var(--process-marker) minmax(0, 1fr);
  column-gap: var(--process-item-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  z-index: 1;
}
.process-list__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--process-marker);
  height: var(--process-marker);
  border-radius: var(--radius);
  background: var(--process-marker-bg);
  color: var(--process-marker-fg);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--white);
}
.process.band-subtle .process-list__index {
  box-shadow: 0 0 0 4px var(--bg-subtle);
}
.process-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--process-body-gap);
  min-width: 0;
  padding-top: var(--space-1);
}
.process-list h3 {
  margin: 0;
  font-size: var(--type-h3);
  color: var(--deep-teal);
  line-height: var(--leading-tight);
}
.process-list__meta {
  margin: 0;
  order: 1;
  font-size: var(--type-meta-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--muted-grey);
}
.process-list__body > p:not(.process-list__meta) {
  margin: 0;
  order: 2;
  color: var(--muted-grey);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  max-width: var(--rw-readable);
}
@media (min-width: 900px) {
  .process {
    --process-layout-gap: var(--space-12);
    --process-step-gap: var(--space-8);
    --process-body-gap: var(--space-4);
    --process-item-gap: var(--space-5);
    --process-marker: 2.75rem;
    --process-after-head: var(--space-12);
  }
  .process__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--process-layout-gap);
  }
  .process__media,
  .process-list {
    order: unset;
  }
  .process__media {
    position: relative;
    /* Match timeline height; don’t center steps (that pulled 01 under the lede) */
    align-self: stretch;
    min-height: 28rem;
  }
  .process__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 40%;
  }
  .process-list {
    align-self: start;
  }
  .process-list__index {
    font-size: var(--text-md);
  }
}

/* Soft entrance for media / section beats */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.7rem);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-stack[hidden] { display: none; }
fieldset.form-stack {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form-legend {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--deep-teal);
}
.form-actions .hint {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-sm);
}
.form-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* .field { display: flex } beats the UA [hidden] rule — honeypots must stay off-screen */
.field[hidden] { display: none; }
.field label {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--deep-teal);
}
.field .hint {
  font-size: var(--text-xs);
  color: var(--muted-grey);
}
.field input:where(:not([type="checkbox"]):not([type="radio"])),
.field select,
.field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-3);
  /* 65% (not 22%) — WCAG 1.4.11 needs 3:1 against white; 22% only measured ~1.45:1 */
  border: 1px solid color-mix(in srgb, var(--deep-teal) 65%, transparent);
  border-radius: 0.65rem;
  background: var(--white);
  color: var(--deep-teal);
  font: inherit;
  /* select ignores inherited body line-height (1.65) in every engine, input/textarea
     don't — that mismatch alone was rendering inputs ~10px taller than selects. */
  line-height: 1.2;
}
.field textarea { min-height: 8rem; resize: vertical; }
/* Swap the native select arrow (browser-default position/style, clashing with
   every other hand-drawn icon on the site) for one that matches .nav__trigger's
   chevron — same shape, deep-teal, precisely placed instead of wherever the OS puts it. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%231B4D5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 0.75rem;
}
/* Forced-colors (Windows High Contrast) strips background-image, so the
   hand-drawn chevron above would vanish leaving no dropdown affordance at
   all. Hand back to the native control — HCM renders its own arrow. */
@media (forced-colors: active) {
  .field select {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    padding-right: var(--space-3);
    background-image: none;
  }
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 2px;
  border-color: var(--deep-teal);
}
.field label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-block: 0.35rem;
  font-weight: 400;
  cursor: pointer;
}
.field input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--deep-teal);
  cursor: pointer;
}

/* Server-side PRG flash (enq_flash) — list above the multistep form. */
.form-errors {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--error-red, #b42318) 35%, transparent);
  border-radius: var(--radius-md, 0.75rem);
  background: color-mix(in srgb, var(--error-red, #b42318) 8%, #fff);
  color: var(--ink-700, #2d4a52);
}
.form-errors p { margin: 0 0 var(--space-2); }
.form-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}
.form-errors li { margin: 0.15rem 0; }

/* Validation — shared.js toggles is-invalid + un-hides the paired .field-error
   on a failed Continue/Send, and clears both as soon as the field is fixed. */
.field-error {
  margin: 0;
  color: var(--error-red);
  font-size: var(--text-xs);
  font-weight: 600;
}
.field-hint {
  margin: 0;
  color: var(--body-secondary);
  font-size: var(--type-meta-size);
}
.field.is-invalid input:where(:not([type="checkbox"]):not([type="radio"])),
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--error-red);
}
.field.is-invalid input:focus-visible,
.field.is-invalid select:focus-visible,
.field.is-invalid textarea:focus-visible {
  outline-color: var(--error-red);
  border-color: var(--error-red);
}
.field.is-invalid input[type="checkbox"] {
  outline: 2px solid var(--error-red);
  outline-offset: 3px;
  border-radius: 3px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.form-actions--split { justify-content: space-between; }
.form-actions--end { justify-content: flex-end; }
.step-hint {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-sm);
}

/*
 * Multi-step enquiry form — shared.js goToStep() shows one .form-step at a
 * time and toggles is-current/is-complete here + on the step indicator.
 */
.multistep { min-width: 0; }
.form-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: step-in var(--duration-base) ease both;
}
.form-step[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .form-step { animation: none; }
}
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.step-indicator {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.step-indicator__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 4.25rem;
  text-align: center;
}
.step-indicator__connector {
  flex: 1 1 auto;
  align-self: flex-start;
  height: 2px;
  min-width: var(--space-4);
  margin-top: 1.15rem; /* waiver: half of __marker's 2.3rem so the line hits its vertical center */
  background: color-mix(in srgb, var(--deep-teal) 14%, transparent);
  transition: background var(--duration-base) ease;
}
.step-indicator__connector.is-complete { background: var(--warm-gold); }
.step-indicator__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 999px;
  /* 65% (not 24%) — WCAG 1.4.11 needs 3:1 against white; 24% only measured ~1.51:1 */
  border: 2px solid color-mix(in srgb, var(--deep-teal) 65%, transparent);
  background: var(--white);
  color: var(--muted-grey);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background var(--duration-base) ease, border-color var(--duration-base) ease, color var(--duration-base) ease;
}
.step-indicator__check {
  display: none;
  width: 52%;
  height: 52%;
}
.step-indicator__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted-grey);
}
.step-indicator__item.is-current .step-indicator__marker {
  background: var(--deep-teal);
  border-color: var(--deep-teal);
  color: var(--white);
}
.step-indicator__item.is-current .step-indicator__label { color: var(--deep-teal); }
.step-indicator__item.is-complete .step-indicator__marker {
  background: var(--warm-gold);
  border-color: var(--warm-gold);
  color: var(--ink-on-gold);
}
.step-indicator__item.is-complete .step-indicator__label { color: var(--deep-teal); }
.step-indicator__item.is-complete .step-indicator__num { display: none; }
.step-indicator__item.is-complete .step-indicator__check { display: block; }

.step-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  animation: step-in 0.3s ease both;
}
.step-success[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .step-success { animation: none; }
}
.step-success .icon-circle {
  background: color-mix(in srgb, var(--warm-gold) 20%, var(--white));
  color: var(--warm-gold-text);
  margin-bottom: var(--space-2);
}
.step-success h2 { margin: 0; }
.step-success .lede { margin: 0; max-width: 32rem; text-align: center; }
.step-success .btn { margin-top: var(--space-2); }

.gallery-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gallery-grid .gallery__open {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
}
.gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--driftwood);
}

/*
 * Featured post — full-bleed photo with headline overlaid on a scrim,
 * reusing .hero's photo-plus-gradient language so the blog's top story
 * reads as an extension of the brand rather than a bolted-on card style.
 */
.blog-featured {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.blog-featured__media {
  position: relative;
  display: block;
  /* Taller on narrow screens — a wrapped 3-line title + excerpt needs the
     room, or it collides with the tag chip pinned at the top. */
  aspect-ratio: 3 / 4;
}
@media (min-width: 700px) {
  .blog-featured__media { aspect-ratio: 21 / 9; }
}
.blog-featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--driftwood);
  transition: transform 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .blog-featured__media:hover img { transform: scale(1.035); }
}
.blog-featured__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 35, 42, 0) 32%, rgba(12, 35, 42, 0.6) 72%, rgba(12, 35, 42, 0.88) 100%);
}
.blog-featured__tag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}
.blog-featured__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  color: var(--white);
  pointer-events: none;
}
.blog-featured__overlay h2 {
  margin: var(--space-2) 0;
  color: var(--white);
}
.blog-featured__excerpt {
  margin: 0;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.86);
}
/* Card photo doubles as a link to the article — aria-hidden/tabindex="-1" in
   markup so screen readers hit the one real (title) link, not a duplicate. */
.media-card__image {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
@media (hover: hover) and (pointer: fine) {
  .media-card__image:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgb(15 35 42 / 0.1);
  }
}
.media-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}
.blog-featured__overlay h2 a,
.media-card h3 a {
  text-decoration: none;
  color: inherit;
}
.blog-featured__overlay h2 a {
  pointer-events: auto;
}
.media-card h3 a:hover {
  color: var(--warm-gold-text);
  text-decoration: underline;
  text-decoration-color: var(--warm-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.blog-featured__overlay h2 a:hover {
  color: var(--warm-gold-hero);
  text-decoration: underline;
  text-decoration-color: var(--warm-gold-hero);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted-grey);
  margin: 0;
}
.blog-meta--overlay { color: rgba(255, 255, 255, 0.78); }
.pagination {
  margin-block-start: var(--rhythm-after-head-dense);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target, 2.75rem);
  min-height: var(--tap-target, 2.75rem);
  padding-inline: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 22%, transparent);
  border-radius: var(--radius);
  color: var(--deep-teal);
  font-weight: var(--type-ui-weight);
  text-decoration: none;
}
.pagination a.page-numbers:hover {
  border-color: var(--deep-teal);
  background: color-mix(in srgb, var(--deep-teal) 7%, var(--white));
}
.pagination a.page-numbers:focus-visible {
  outline: 3px solid var(--warm-gold);
  outline-offset: 3px;
}
.pagination .page-numbers.current {
  border-color: var(--deep-teal);
  background: var(--deep-teal);
  color: var(--white);
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep-teal) 7%, var(--white));
  color: var(--deep-teal);
  font-size: var(--text-2xs);
  font-weight: 600;
}
.blog-featured__tag,
.media-card__tag {
  /* Overlaid on a photo — the near-white default .tag wash disappears against
     light sky/sand; solid + shadow keeps it legible on any image. */
  background: var(--white);
  box-shadow: 0 2px 8px rgb(15 35 42 / 0.18);
}

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.empty-state h2 { margin-bottom: var(--space-3); }
.empty-state p {
  margin: 0 auto var(--space-6);
  max-width: 28rem;
  color: var(--muted-grey);
}

.otp-box {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.otp-box input {
  width: 2.75rem;
  height: 3rem;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 600;
  /* 65% (not 22%) — WCAG 1.4.11 needs 3:1 against white; 22% only measured ~1.45:1 */
  border: 1px solid color-mix(in srgb, var(--deep-teal) 65%, transparent);
  border-radius: 0.65rem;
}

.help-links {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .help-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.index-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.index-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.index-list a:hover {
  border-color: color-mix(in srgb, var(--deep-teal) 16%, transparent);
  transform: translateY(-1px);
}
.index-list strong {
  color: var(--deep-teal);
  font-weight: 600;
}
.index-list span {
  color: var(--muted-grey);
  font-size: var(--text-md);
}

.mid-cta--plain .mid-cta__media {
  background: linear-gradient(180deg, rgba(27, 77, 92, 0.92), rgba(27, 77, 92, 0.96));
}

/*
 * Care — full-width intro, three care types, then note + smaller logos.
 * Mobile: stacked list with hairlines; logos grouped. Desktop: three columns.
 */
.care {
  background: var(--white);
}
.care__panel {
  --care-panel-gap: var(--space-8);
  --care-type-pad-y: var(--space-5);
  --care-type-pad-x: 0;
  --care-foot-gap: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--care-panel-gap);
}
.care__intro .section-head {
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}
.care__intro-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.care__intro-body .lede {
  max-width: none;
  margin: 0;
  line-height: 1.65;
}

.care__types {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
}
.care__types li {
  padding-block: var(--care-type-pad-y);
  padding-inline: var(--care-type-pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
}
.care__types li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.care__type-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--deep-teal);
  line-height: 1.35;
  margin-bottom: var(--space-1);
}
.care__type-text {
  display: block;
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.6;
}
@media (min-width: 720px) {
  .care__panel {
    --care-panel-gap: var(--space-10);
    --care-type-pad-y: 0;
    --care-type-pad-x: var(--space-6);
    --care-foot-gap: var(--space-6);
  }
  .care__types {
    grid-template-columns: repeat(3, 1fr);
    border-top: 0;
  }
  .care__types li {
    border-bottom: 0;
  }
  .care__types li:first-child { padding-left: 0; }
  .care__types li:last-child { padding-right: 0; }
  .care__types li + li {
    border-left: 1px solid color-mix(in srgb, var(--deep-teal) 12%, transparent);
  }
}

.care__foot,
.care-page__trust {
  --care-trust-mt: var(--section-after-head);
  --care-trust-pt: var(--space-8);
  --care-foot-gap: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--care-foot-gap);
  width: 100%;
  margin-top: var(--care-trust-mt);
  padding-top: var(--care-trust-pt);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.care__foot-copy {
  --care-foot-copy-gap: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--care-foot-copy-gap);
  max-width: 36rem;
}
.care__foot-copy .text-link {
  display: inline-flex;
  align-items: center;
}
.care__note {
  margin: 0;
  font-size: var(--type-meta-size);
  line-height: var(--leading-snug);
  color: var(--muted-grey);
  max-width: 36rem;
}
.care__brand {
  --care-brand-gap: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--care-brand-gap);
}
.care__brand-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--duration-fast) ease;
}
.care__brand-link:hover { opacity: 0.85; }
.care__brand-link:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
  border-radius: 0.35rem;
}
.care__brand-link img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}
.care__brand-link--ccs img {
  height: 2.25rem;
  max-width: min(100%, 12rem);
}
.care__brand-link--cqc img {
  height: 2.5rem;
  max-width: min(100%, 7.5rem);
  border-radius: 0.3rem;
}
@media (min-width: 640px) {
  .care__brand {
    --care-brand-gap: var(--space-5) var(--space-6);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .care__foot,
  .care-page__trust {
    --care-trust-pt: var(--space-8);
    --care-foot-gap: var(--space-8);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .care__foot-copy { flex: 1 1 auto; }
  .care__brand { flex-shrink: 0; }
  .care__brand-link--ccs img {
    height: 2.15rem;
    max-width: min(100%, 11.5rem);
  }
  .care__brand-link--cqc img {
    height: 2.5rem;
    max-width: min(100%, 8rem);
  }
}

/*
 * ---------------------------------------------------------------------------
 * Homepage section patterns (reusable across pages)
 * ---------------------------------------------------------------------------
 */

/* Gallery — mosaic: large left, two stacked right (same as before lightbox) */
.gallery { background: var(--bg-subtle); }
.gallery__grid {
  --gallery-gap: var(--space-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item {
  margin: 0;
  min-width: 0;
  min-height: 0;
}
.gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery__open:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgb(15 35 42 / 0.1);
  }
}
.gallery__open:focus-visible {
  outline: 3px solid var(--deep-teal);
  outline-offset: 3px;
}
.gallery__grid img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--driftwood);
}
.gallery__item:first-child {
  grid-column: 1 / -1;
}
.gallery__item:first-child img {
  aspect-ratio: 16 / 10;
}
@media (min-width: 768px) {
  .gallery__grid {
    --gallery-gap: var(--space-3);
    grid-template-columns: 1.45fr 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: 22rem;
  }
  .gallery__item:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .gallery__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .gallery__item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .gallery__item:first-child img {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/*
 * Lightbox — full-bleed deep-teal plane (no framed “card”), editorial controls.
 * Close sits in the viewport corner; prev/next are thin gold-tint chevrons, not
 * chunky circular pills.
 * Size with vw/dvh + explicit edges (not % + inset) so the plane always covers
 * the visual viewport, including mobile browser chrome and IDE preview panes.
 */
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  box-sizing: border-box;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  /* Safe-area padding: clears iOS notches/home indicator inside the fullscreen
     lightbox (fixed chrome measurements, per whitelist B/C). */
  padding:
    max(4.25rem, calc(env(safe-area-inset-top, 0px) + 3.5rem))
    max(3.25rem, calc(env(safe-area-inset-right, 0px) + 2.75rem))
    max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem))
    max(3.25rem, calc(env(safe-area-inset-left, 0px) + 2.75rem));
  border: 0;
  background: var(--deep-teal);
}
.lightbox[hidden] { display: none; }
.lightbox__close {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top)); /* fixed chrome: overlay control inset */
  right: max(0.85rem, env(safe-area-inset-right)); /* fixed chrome: overlay control inset */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}
.lightbox__close svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}
.lightbox__close:hover { color: var(--warm-gold-hero); }
.lightbox__close:focus { outline: none; }
.lightbox__close:focus-visible {
  color: var(--warm-gold-hero);
  /* Real outline, not box-shadow — survives forced-colors mode. Modern
     browsers clip outline to border-radius, so this reads identically. */
  outline: 2px solid var(--warm-gold-hero);
  outline-offset: 2px;
}
.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 56rem);
  min-height: 0;
  flex: 0 1 auto;
  /* Same fill as the overlay so any subpixel seam above/below the photo disappears */
  background: var(--deep-teal);
  /* Let prev/next sit in the teal gutters beside the photo */
  overflow: visible;
}
.lightbox__figure {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--deep-teal);
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: clip children to radius */
  mask-image: radial-gradient(white, black);
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: min(68vh, 38rem);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  object-fit: contain;
  border-radius: var(--radius);
  background: transparent;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  /* Sit on teal, not the photo — gold + soft shadow for contrast */
  color: var(--warm-gold-hero);
  filter: drop-shadow(0 1px 3px rgba(9, 26, 32, 0.55));
  cursor: pointer;
  transition: color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.lightbox__nav svg {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
}
@media (hover: hover) and (pointer: fine) {
  .lightbox__nav:hover {
    color: var(--white);
    transform: translateY(-50%) scale(1.06);
  }
}
.lightbox__nav:focus { outline: none; }
.lightbox__nav:focus-visible {
  color: var(--white);
  /* Real outline, not box-shadow — survives forced-colors mode. Modern
     browsers clip outline to border-radius, so this reads identically. */
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
/* Previously used max(0.15rem, -2.9rem) which always resolved to 0.15rem —
   arrows sat on the image. Negative offsets place them in the teal gutters. */
.lightbox__nav--prev { left: calc(-1 * (3rem + 0.85rem)); }
.lightbox__nav--next { right: calc(-1 * (3rem + 0.85rem)); }
.lightbox__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 36rem);
  text-align: center;
  flex-shrink: 0;
}
.lightbox__status {
  margin: 0;
  color: var(--warm-gold-hero);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightbox__caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-md);
  line-height: 1.5;
}
@media (max-width: 639px) {
  .lightbox {
    padding-inline: max(var(--space-2), env(safe-area-inset-left, 0px))
                    max(var(--space-2), env(safe-area-inset-right, 0px));
  }
  /* Narrow screens: keep arrows just clear of the photo edge */
  .lightbox__nav--prev { left: calc(-1 * var(--space-1)); }
  .lightbox__nav--next { right: calc(-1 * var(--space-1)); }
  .lightbox__image { max-height: min(58vh, 28rem); }
  .lightbox__close { letter-spacing: 0.1em; }
}
@media (min-width: 640px) {
  .lightbox {
    padding-inline: max(var(--space-16), calc(env(safe-area-inset-left, 0px) + var(--space-14)))
                    max(var(--space-16), calc(env(safe-area-inset-right, 0px) + var(--space-14)));
  }
  .lightbox__image { max-height: min(72vh, 42rem); }
}
@media (min-width: 1024px) {
  .lightbox__nav--prev { left: calc(-1 * (3rem + 1.5rem)); }
  .lightbox__nav--next { right: calc(-1 * (3rem + 1.5rem)); }
}
html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
  background: var(--deep-teal);
}

/* Back-to-top button — appears after scrolling past one viewport height. */
.scroll-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-subnav);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: var(--deep-teal);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.scroll-top svg {
  width: 18px;
  height: 18px;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-top[hidden] {
  display: none;
}
.scroll-top:hover {
  background: var(--warm-gold);
  color: var(--deep-teal);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* Property — standard stack under hero */
.property {
  --property-layout-gap: var(--space-6);
  --property-copy-gap: var(--space-5);
  --property-copy-pt: 0;
  --property-section-pt: var(--section-y);
  --property-section-pb: var(--section-y);
  background: var(--white);
  width: 100%;
  overflow-x: clip;
}
.property.section-y {
  padding-top: var(--property-section-pt);
  padding-bottom: var(--property-section-pb);
}
.property__layout {
  display: grid;
  gap: var(--property-layout-gap);
}
/* Sizing/bleed lives on the wrapper, not the <img> itself — as a flex/grid
   item, a replaced element (img/video) resolves an explicit width that
   exceeds its track/container differently than a plain box does: it gets
   silently clamped back to the track size even with !important, so the
   "full-bleed past the container" trick below only ever bled on one side.
   A plain div wrapper doesn't have that replaced-element sizing quirk. */
.property__media-wrap {
  display: block;
  border-radius: var(--radius);
  min-height: 12rem;
  aspect-ratio: 16 / 11;
  width: 100%;
  overflow: hidden;
  background: var(--driftwood);
}
.property__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.property__copy {
  display: flex;
  flex-direction: column;
  gap: var(--property-copy-gap);
  padding-top: var(--property-copy-pt);
  width: 100%;
  max-width: none;
}
.property__copy .lede {
  color: var(--muted-grey);
  font-size: var(--text-base);
  max-width: var(--rw-readable);
}
.property__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--deep-teal);
  font-weight: 500;
}
.property__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 1.5rem;
}
.property__facts li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  margin-top: 0.55em; /* em nudge: bullet aligns to first text line */
  border-radius: 50%;
  background: var(--warm-gold);
  flex-shrink: 0;
}
/* Same CTA rules as .hero__ctas — gold primary + outline secondary, shared gaps */
.property__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-cta-gap);
  padding-top: var(--space-1);
}
.property__cta-row .btn-outline-teal {
  background: transparent;
  color: var(--deep-teal);
  /* 65% (not 35%) — WCAG 1.4.11 needs 3:1 against white; 35% only measured ~1.86:1 */
  border-color: color-mix(in srgb, var(--deep-teal) 65%, transparent);
}
.property__cta-row .btn-outline-teal:hover {
  border-color: var(--deep-teal);
  background: color-mix(in srgb, var(--deep-teal) 5%, transparent);
}

@media (max-width: 899px) {
  .property {
    /* Text now leads (matches desktop's order:-1 copy), so it needs a real
       gap before the full-bleed photo that follows — and the section can
       use its normal top padding instead of a one-off patch. */
    --property-layout-gap: var(--space-7);
    --property-copy-pt: 0;
    background: var(--white);
  }
  /* Single stacked column here — doesn't need grid, and grid's default
     justify-self:stretch silently overrides the image's explicit
     width:calc(100% + 2*gutter) below back down to the track width,
     capping the "full-bleed" at the container edge on one side instead of
     the viewport edge. flex has no such override. */
  .property__layout {
    display: flex;
    flex-direction: column;
  }
  /*
   * Photo used to lead here (order:-1) and bleed straight off the hero's own
   * full-bleed photo below it — a hard, unlabelled cut from a dark scrim
   * coastline shot into a bright house exterior. Flipping to text-first
   * (matching desktop) gives the section a heading before any image.
   */
  .property__media-wrap {
    order: 0;
    width: calc(100% + (2 * var(--rw-gutter-x)));
    margin-inline: calc(-1 * var(--rw-gutter-x));
    min-height: 13rem;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }
  .property__copy {
    order: -1;
  }
  .property__cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .property__cta-row .btn {
    width: 100%;
    min-height: 2.75rem;
  }
}

@media (min-width: 900px) {
  .property {
    --property-layout-gap: var(--space-8);
  }
  .property__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }
  .property__media-wrap {
    order: 0;
    min-height: 22rem;
    aspect-ratio: auto;
    height: 100%;
    border-radius: var(--radius-lg);
  }
  .property__copy {
    order: -1;
    max-width: none;
  }
}

/* Paths */
.paths {
  --paths-head-mb: var(--section-after-head-tight);
  --paths-grid-gap: var(--grid-gap);
  background: var(--white);
}
.paths .section-head {
  margin-bottom: var(--paths-head-mb);
}
.paths__grid {
  display: grid;
  gap: var(--paths-grid-gap);
}
@media (min-width: 768px) {
  .paths {
    --paths-head-mb: var(--section-after-head);
    --paths-grid-gap: var(--space-6);
  }
  .paths__grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Path cards live in shared.css (same card system as interior info-cards). */

/*
 * Comparison — three reasons stated as icon cards (same info-card + icon-circle
 * recipe as the room-by-room cards on Accessibility, which sit on white too —
 * the card's own border/shadow carries the contrast). Keep this white: .partners
 * directly above is --bg-subtle, and matching it here made the two sections
 * read as one continuous grey block with no seam between them.
 */
.comparison {
  background: var(--white);
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 8%, transparent);
}
.comparison .info-card { text-align: left; }
.comparison .info-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.comparison-list {
  --comparison-item-pad-y: var(--space-5);
  --comparison-item-pad-x: 0;
  --comparison-gap: 0;
  display: flex;
  flex-direction: column;
  gap: var(--comparison-gap);
  max-width: 42rem;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparison-list {
    --comparison-item-pad-y: var(--space-6);
  }
}
.comparison-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--comparison-item-pad-y);
  padding-inline: var(--comparison-item-pad-x);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.comparison-list__item:first-child { padding-top: 0; }
.comparison-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.comparison-list__item dt {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--deep-teal);
}
.comparison-list__item dd {
  margin: 0;
  color: var(--muted-grey);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.comparison-list__contrast {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: color-mix(in srgb, var(--muted-grey) 78%, transparent);
}
/* From 900px there's room for the three questions side by side instead of one
   narrow stacked column lost in the middle of a wide white section. Vertical
   hairlines replace the horizontal ones — same quiet-list language, just laid
   out to use the width instead of clumping in the centre. */
@media (min-width: 900px) {
  .comparison-list {
    --comparison-item-pad-y: 0;
    --comparison-item-pad-x: var(--space-7);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
  .comparison-list__item {
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  }
  .comparison-list__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .comparison-list__item:last-child { padding-right: 0; }
  /* Two-up: reset 3-col edge rules, then hairline on even columns + row dividers */
  .comparison-list--2 {
    --comparison-item-pad-y: var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }
  .comparison-list--2 .comparison-list__item {
    padding-inline: var(--space-7);
    padding-block: var(--comparison-item-pad-y);
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  }
  .comparison-list--2 .comparison-list__item:nth-child(odd) {
    padding-inline-start: 0;
  }
  .comparison-list--2 .comparison-list__item:nth-child(even) {
    padding-inline-end: 0;
    border-left: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  }
  .comparison-list--2 .comparison-list__item:nth-last-child(-n + 2) {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .comparison-list--2 .comparison-list__item:nth-child(-n + 2) {
    padding-top: 0;
  }
}
/* Inside a split column, keep comparisons stacked — three-up columns fight
   the readable measure. */
.split .comparison-list {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin-inline: 0;
}
.split .comparison-list__item {
  border-left: 0;
  padding-inline: 0;
  padding-block: var(--space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.split .comparison-list__item:first-child { padding-top: 0; }
.split .comparison-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Funding-route writeups always stack the compare pair. comparison-list--2 at
   900px treats a 2-item list as both first and last row, which zeros padding
   and indents the even column — “Often not included” sat on the line above. */
.funding-route .comparison-list,
.funding-route .comparison-list--2 {
  --comparison-item-pad-y: var(--funding-route-compare-pad);
  --comparison-item-pad-x: 0;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin-inline: 0;
}
.funding-route .comparison-list__item,
.funding-route .comparison-list--2 .comparison-list__item,
.funding-route .comparison-list--2 .comparison-list__item:nth-child(odd),
.funding-route .comparison-list--2 .comparison-list__item:nth-child(even),
.funding-route .comparison-list--2 .comparison-list__item:nth-child(-n + 2),
.funding-route .comparison-list--2 .comparison-list__item:nth-last-child(-n + 2) {
  border-left: 0;
  padding-inline: 0;
  padding-block: var(--funding-route-compare-pad);
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
}
.funding-route .comparison-list__item:first-child,
.funding-route .comparison-list--2 .comparison-list__item:first-child {
  padding-top: 0;
}
.funding-route .comparison-list__item:last-child,
.funding-route .comparison-list--2 .comparison-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Testimonials — teal band, white cards (same recipe as .info-card).
   Guest words stay on a light surface so they read as quotes, not brand copy. */
.testimonials {
  background: var(--deep-teal);
  color: var(--white);
}
.testimonials h2 {
  color: var(--white);
}
.testimonials :focus-visible {
  outline-color: var(--warm-gold-hero);
}
.testimonials .text-link {
  color: var(--warm-gold-hero);
  text-decoration-color: color-mix(in srgb, var(--warm-gold-hero) 45%, transparent);
}
.testimonials .text-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}
.testimonials__grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
}
@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .testimonials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.testimonials__grid > li {
  display: flex;
  min-height: 0;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--panel-pad);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
  color: var(--deep-teal);
}
.testimonial-card__mark {
  font-family: var(--font-serif);
  font-size: var(--type-display-sm);
  line-height: 0.85;
  color: var(--warm-gold-text);
}
.testimonial-card__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--body-secondary);
  text-wrap: pretty;
}
.testimonial-card__quote p {
  margin: 0;
  flex: 1 1 auto;
  color: inherit;
}
.testimonial-card__quote footer {
  margin-top: auto;
}
.testimonial-card__cite {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-style: normal;
}
.testimonial-card__name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--deep-teal);
}
.testimonial-card__role {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--muted-grey);
}

/*
 * Pull-quote — a single featured review dropped into a plain band, no card.
 * Big serif mark + serif text gives it a different texture to every other
 * section on the page instead of one more box in a grid.
 *
 * Isolated mid-page copy sits in the measure with equal air on both
 * container walls (not parked on the left rail). text-align must be set on
 * the blockquote itself — a global `blockquote { text-align: left }` would
 * otherwise pin the quote to one wall.
 */
.pull-quote {
  --pull-quote-gap: var(--space-4);
  --pull-quote-measure: 38rem;
  width: min(var(--pull-quote-measure), 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pull-quote-gap);
  text-align: center;
}
.pull-quote__mark {
  font-family: var(--font-serif);
  font-size: var(--type-display);
  line-height: 0.85;
  /* --warm-gold fails WCAG contrast on this white background;
     --warm-gold-text is the token's text-safe counterpart. */
  color: var(--warm-gold-text);
}
.pull-quote__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-display-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--deep-teal);
  text-align: center;
  text-wrap: pretty;
}
.pull-quote__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--deep-teal);
  text-align: center;
}
.pull-quote__role {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--muted-grey);
}

/*
 * Place directory — interactive local listings (outbound website / tel / map).
 * Not decorative cards: the row is the interaction surface for planning a stop.
 */
.place-list {
  --place-gap: var(--grid-gap);
  display: grid;
  gap: var(--place-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 800px) {
  .place-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.place-list__item {
  --place-item-gap: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--place-item-gap);
  padding: var(--panel-pad);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
  min-height: 100%;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.place-list__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 0.35rem);
  background: var(--driftwood);
}
/* Phone: shorter thumbs + tighter cards so three route stops don’t dominate scroll. */
@media (max-width: 799px) {
  .place-list--3 .place-list__item {
    --panel-pad: var(--space-4);
    --place-item-gap: var(--space-2);
  }
  .place-list--3 .place-list__thumb {
    aspect-ratio: 2 / 1;
  }
  .place-list--3 .place-list__title {
    font-size: var(--text-lg);
  }
  .place-list--3 .place-list__item > p:not(.place-list__meta):not(.place-list__actions) {
    font-size: var(--text-md);
    line-height: 1.55;
  }
}
.place-list__item:hover {
  border-color: color-mix(in srgb, var(--deep-teal) 22%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .place-list__item,
  .place-list__item:hover {
    transition: none;
    transform: none;
  }
}
.place-list__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--deep-teal);
}
.place-list__title a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}
.place-list__title a:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}
.place-list__title a:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}
.place-list__meta {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--warm-gold-text);
}
.place-list__item > p:not(.place-list__meta):not(.place-list__actions) {
  margin: 0;
  flex: 1;
  color: var(--muted-grey);
  font-size: var(--text-base);
  line-height: 1.65;
}
.place-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding-top: var(--space-1);
}
.place-list__actions .text-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
}
.place-list__sep {
  color: color-mix(in srgb, var(--deep-teal) 28%, transparent);
  user-select: none;
}

/*
 * Dense directory stack — same place-list interaction (title / tel / map) but
 * no card chrome. Use when a second place-list on the page would otherwise
 * repeat the three-up card rhythm (e.g. eat after route stops).
 */
.place-list--stack {
  --place-gap: 0;
  max-width: 42rem;
}
.place-list--stack .place-list__item {
  padding: var(--space-5) 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--deep-teal) 10%, transparent);
  box-shadow: none;
  min-height: 0;
}
.place-list--stack .place-list__item:first-child { padding-top: 0; }
.place-list--stack .place-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.place-list--stack .place-list__item:hover {
  border-color: color-mix(in srgb, var(--deep-teal) 10%, transparent);
  transform: none;
  box-shadow: none;
}

/* Linked media titles (day trips / visual stops) */
.media-card__title-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm-gold) 70%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}
.media-card__title-link:hover {
  color: var(--warm-gold-text);
  text-decoration-color: var(--warm-gold);
}
.media-card__title-link:focus-visible {
  outline: 2px solid var(--deep-teal);
  outline-offset: 3px;
}

/*
 * Partners — centred intro + full-bleed logo strip.
 * space-between puts first/last logos on the container edges so the row
 * reads even (no left clump, no mid-width hairline trap).
 */
.partners { background: var(--bg-subtle); }
.partners__head {
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.partners__head .lede { margin-inline: auto; }
.partners__grid {
  --partners-gap: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--partners-gap);
  list-style: none;
  margin: 0;
  padding: var(--space-7) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--deep-teal) 14%, transparent);
  width: 100%;
}
.partners__item { margin: 0; }
.partners__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 5rem;
  text-decoration: none;
}
.partners__link img {
  max-height: 4.5rem;
  max-width: 7.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Full colour by default — logos are credibility signals and most visitors
     are on touch, where :hover never fires. */
  opacity: 1;
  transition: opacity var(--duration-fast) ease;
}
.partners__link:hover img,
.partners__link:focus-visible img {
  opacity: 0.85;
}
@media (min-width: 720px) {
  .partners__grid {
    --partners-gap: var(--space-3);
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .partners__item {
    flex: 1 1 0;
    min-width: 0;
  }
  .partners__link {
    width: 100%;
    height: 7rem;
  }
  .partners__link img {
    max-height: 6.5rem;
    max-width: min(100%, 11rem);
  }
}

/* First-party cookie banner — PECR analytics choice. z-cookie sits under skip-link. */
.cookie-banner {
  --cookie-banner-pad-y: var(--space-4);
  --cookie-banner-gap: var(--space-4);
  --cookie-banner-actions-gap: var(--space-3);
  position: fixed;
  z-index: var(--z-cookie);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--deep-teal);
  color: var(--white);
  padding: var(--cookie-banner-pad-y) max(var(--rw-gutter-x), env(safe-area-inset-left))
    calc(var(--cookie-banner-pad-y) + env(safe-area-inset-bottom))
    max(var(--rw-gutter-x), env(safe-area-inset-right));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  max-height: 70vh;
  overflow-y: auto;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cookie-banner-gap);
  max-width: var(--rw-max-page);
  margin-inline: auto;
}
.cookie-banner__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--white);
}
.cookie-banner__text {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: rgba(255, 255, 255, 0.9);
}
.cookie-banner__link {
  color: var(--warm-gold-hero);
}
.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: var(--white);
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cookie-banner-actions-gap);
}
.cookie-banner .btn:focus-visible {
  outline-color: var(--warm-gold-hero);
}
@media (min-width: 768px) {
  .cookie-banner {
    --cookie-banner-pad-y: var(--space-5);
  }
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cookie-banner__actions {
    flex-shrink: 0;
  }
}