/* ─── Marketiva site stylesheet ─────────────────────────────
   Single stylesheet for every page on marketiva.co.uk.

   The cascade is organised into ordered @layer blocks:

     tokens     – design tokens (was tokens.css)
     base       – reset, typography primitives, layout utilities (was base.css)
     components – reusable components: nav, footer, buttons, forms,
                  cards, FAQ, service-page chrome, hero pattern (was components.css)
     pages      – page-specific surfaces scoped by `.page-X` body class.
                  Each page-sheet (index/collective/programme/first-light)
                  lives behind a class so the same selector can mean different
                  things on different pages without colliding.

   Layer order is declared once, up front. Later layers win on equal
   specificity. Within a layer, source order resolves equal-specificity
   collisions — that's why the programme group is listed before the
   collective group: on the First Light page both prefixes match, and the
   page expects collective overrides to win (this preserves the original
   load order: programme.css → collective.css → first-light.css).

   Body-class mapping (driven by route in build.mjs):
     /                                 → page-home
     /about/                           → page-about
     /contact/                         → page-contact
     /services/fractional-…/           → page-fractional
     /services/foundations/            → page-foundations
     /programmes/                      → page-collective
     /programmes/compass/              → page-compass page-programme
     /programmes/first-light/          → page-first-light page-programme page-collective

   The First Light page carries three classes because its markup mashes
   collective sections (workshop dates, expect-points, schedule, about,
   register, after) with programme sections (hero-grid, hero-stats,
   for-you, between, investment) — both rule sets need to apply.
   ─────────────────────────────────────────────────────────── */

@layer tokens, base, components, pages;

/* ─── Tokens ─────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Palette */
    --bone:       #f7f3ee;
    --bone-deep:  #ede8e0;
    --ink:        #2c1922;
    --aubergine:  #5e2a3d;
    --wine:       #7a3050;
    --blush:      #c49aaa;
    --warm-white: #faf8f5;

    /* Rules / dividers */
    --rule:        rgba(94, 42, 61, 0.18);
    --rule-light:  rgba(247, 243, 238, 0.2);
    /* Stronger UI-component border (forms, ghost buttons) — meets ≥3:1
       against bone / warm-white per WCAG 1.4.11. */
    --rule-strong: rgba(94, 42, 61, 0.65);

    /* Lower-luminance ink for secondary body copy on light surfaces.
       Replaces `opacity: 0.7–0.8` dimming that failed 1.4.3 (≥4.5:1).
       Verified ≥8:1 against --bone, --bone-deep, and --warm-white. */
    --ink-soft:   #4a3a3f;

    /* Type families */
    --font-sans:  'Inter Tight', system-ui, sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-mono:  'JetBrains Mono', 'Courier New', monospace;

    /* Dark-surface text — meets WCAG 1.4.3 AA on --ink */
    --on-ink-strong: rgba(247, 243, 238, 0.95); /* body — 13.6:1 */
    --on-ink-mid:    rgba(247, 243, 238, 0.78); /* metadata, secondary — 10.7:1 */
    --on-ink-soft:   rgba(247, 243, 238, 0.62); /* tertiary smaller copy — 7.9:1 */
  }
}

/* ─── Base ───────────────────────────────────────────────── */
@layer base {
  /* Skip link (accessibility) */
  .skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--aubergine);
    color: var(--bone);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
  }
  .skip-link:focus { top: 8px; }

  /* Focus ring */
  :focus-visible {
    outline: 2px solid var(--aubergine);
    outline-offset: 3px;
  }

  /* Reset */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    font-size: 16px;
    /* Anchor jumps must clear the sticky nav (≈96px tall) — WCAG 2.4.11. */
    scroll-padding-top: 96px;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    font-family: 'Inter Tight', system-ui, sans-serif;
    background: var(--bone);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* Typography utilities */
  .serif { font-family: 'Fraunces', Georgia, serif; }
  .mono  { font-family: 'JetBrains Mono', 'Courier New', monospace; }

  h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
  }

  p { line-height: 1.7; }

  /* Layout utilities */
  .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px;
  }

  section { padding: 96px 0; }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--wine);
    display: block;
    margin-bottom: 20px;
  }

  .divider {
    width: 48px;
    height: 1px;
    background: var(--aubergine);
    margin: 24px 0;
  }

  /* Screen-reader only utility */
  .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;
  }

  /* Responsive base */
  @media (max-width: 900px) {
    .container { padding: 0 24px; }
    section { padding: 72px 0; }
  }
}

/* ─── Components ─────────────────────────────────────────── */
@layer components {
  /* Buttons */
  .btn-primary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bone);
    background: var(--aubergine);
    padding: 15px 30px;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .btn-primary:hover { background: var(--wine); transform: translateY(-1px); }

  /* Override focus ring colour on dark-background buttons + other
     focusable elements that sit on --ink surfaces (footer, dark sections).
     Aubergine on dark ink is invisible; bone gives a ≥3:1 ring. */
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .btn-ghost:focus-visible,
  .nav-cta:focus-visible,
  .footer-col-list a:focus-visible,
  .footer-totop:focus-visible,
  .footer-cta:focus-visible,
  .partnership-card-link:focus-visible,
  .page-programme .waitlist-alt-link:focus-visible,
  .page-home .service-card.featured .btn-service:focus-visible { outline-color: var(--bone); }

  /* Outlined — dark background */
  .btn-secondary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bone);
    background: transparent;
    padding: 14px 28px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid var(--on-ink-mid);
    transition: border-color 0.2s, background 0.2s;
  }
  .btn-secondary:hover {
    border-color: var(--bone);
    background: rgba(247, 243, 238, 0.06);
  }

  /* Outlined — light background */
  .btn-ghost {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--aubergine);
    background: transparent;
    padding: 14px 28px;
    text-decoration: none;
    display: inline-block;
    /* --rule-strong: button outlines are UI components — need ≥3:1
       contrast against the surrounding background (WCAG 1.4.11). */
    border: 1px solid var(--rule-strong);
    transition: border-color 0.2s, background 0.2s;
  }
  .btn-ghost:hover {
    border-color: var(--aubergine);
    background: rgba(94, 42, 61, 0.04);
  }

  /* Text-underline link — light background */
  .btn-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--aubergine);
    text-decoration: none;
    border-bottom: 1px solid var(--blush);
    /* Vertical padding lifts the hit area to ≥24px (WCAG 2.5.8). */
    padding: 4px 0 6px;
    display: inline-block;
    min-height: 24px;
    transition: border-color 0.2s;
  }
  .btn-link:hover { border-color: var(--aubergine); }

  /* Navigation */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bone);
    border-bottom: 1px solid var(--rule);
    padding: 20px 0;
  }

  /* The nav uses a consistent width on every page so the logo doesn't
     shift when the body's `.container` width changes between layouts
     (home/services use 1120px; about/programmes use 960px). */
  nav .container { max-width: 1120px; }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .nav-logo img {
    height: 52px;
    width: auto;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { opacity: 1; }

  /* Disclosure groups (Services, Programmes) — the trigger is a button that
     shares its visual language with sibling nav links, and the panel
     reveals on hover/focus on desktop. Mobile behaviour is the accordion
     override further down (toggled via aria-expanded by js/forms.js). */
  .nav-group { position: relative; }
  .nav-group--with-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .nav-group-trigger {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--ink);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
  }
  .nav-group-trigger:hover,
  .nav-group:focus-within .nav-group-trigger,
  .nav-group.is-active .nav-group-trigger { opacity: 1; }
  .nav-group-link {
    /* Inherits .nav-links a styling; nothing extra needed on desktop. */
  }
  .nav-group.is-active .nav-group-link { opacity: 1; }

  .nav-caret {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .nav-group:hover .nav-caret,
  .nav-group:focus-within .nav-caret,
  .nav-group-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

  .nav-group-trigger--caret {
    /* 10×10 SVG + 7px padding = 24×24 minimum target size (WCAG 2.5.8). */
    padding: 7px;
    min-width: 24px;
    min-height: 24px;
    opacity: 0.55;
  }
  .nav-group-trigger--caret:hover,
  .nav-group:focus-within .nav-group-trigger--caret { opacity: 1; }

  .nav-group-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    min-width: 220px;
    background: var(--bone);
    border: 1px solid var(--rule);
    box-shadow: 0 18px 36px rgba(44, 25, 34, 0.10);
    z-index: 20;
  }
  /* Transparent bridge so the cursor doesn't fall into a gap between the
     trigger row and the panel (nav padding leaves ~20px of dead space). */
  .nav-group-panel::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
  }
  .nav-group:hover .nav-group-panel,
  .nav-group:focus-within .nav-group-panel { display: block; }

  .nav-group-panel a {
    display: block;
    padding: 10px 20px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.85;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s;
  }
  .nav-group-panel a:hover,
  .nav-group-panel a:focus-visible {
    opacity: 1;
    background: rgba(44, 25, 34, 0.04);
  }
  .nav-group-panel a[aria-current="page"] {
    opacity: 1;
    color: var(--wine);
  }

  /* The mobile CTA <li> lives inside the menu so the hamburger view has a
     reachable "Get in touch". It must stay hidden on desktop — otherwise
     it duplicates the right-side .nav-cta button. */
  .nav-item--mobile-cta { display: none; }

  .nav-cta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bone);
    background: var(--aubergine);
    padding: 12px 20px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--wine); }

  /* Hamburger toggle (mobile only) */
  .nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--rule);
    cursor: pointer;
    padding: 0;
    position: relative;
  }
  .nav-toggle:hover { border-color: var(--aubergine); }

  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transform: translate(-50%, 0);
    transition: transform 0.2s, top 0.2s, opacity 0.15s;
  }
  .nav-toggle-bar { top: 50%; margin-top: -1px; }
  .nav-toggle-bar::before { top: -7px; }
  .nav-toggle-bar::after  { top:  7px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar {
    background: transparent;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before {
    top: 0;
    transform: translate(-50%, 0) rotate(45deg);
    background: var(--ink);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after {
    top: 0;
    transform: translate(-50%, 0) rotate(-45deg);
    background: var(--ink);
  }

  /* Back-link shown on sub-pages (collective, programme) */
  .nav-back {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wine);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.7;
    transition: opacity 0.2s;
  }
  .nav-back:hover { opacity: 1; }
  .nav-back::before { content: '←'; font-size: 13px; }

  /* ─── Footer — editorial closing spread ─────────────────
     A four-band composition on a dark ink surface:
       1. Banner   — large Fraunces closing line + CTA
       2. Rule     — hairline with a blush diamond glyph
       3. Grid     — brand block + three sitemap columns
       4. Strip    — © · attribution · back-to-top

     The whole footer is a single dark surface; the .footer-grain pseudo-
     layer adds a faint dot pattern in blush so the ink doesn't read as a
     dead block. */
  .site-footer {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--on-ink-strong);
    padding: 88px 0 36px;
    overflow: hidden;
  }
  .site-footer::before {
    /* Soft vignette toward the top edge so the band reads as a closing
       page rather than a flat strip. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(196, 154, 170, 0.06) 0%, rgba(196, 154, 170, 0) 32%);
    pointer-events: none;
    z-index: -1;
  }
  .footer-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c49aaa' fill-opacity='0.08'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3Ccircle cx='27' cy='27' r='1'/%3E%3C/g%3E%3C/svg%3E");
  }

  .footer-shell {
    position: relative;
    max-width: 1120px;
  }

  /* ── Banner ─────────────────────────────────────────────── */
  .footer-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px 48px;
    padding-bottom: 56px;
  }
  .footer-statement {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(38px, 5.6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--bone);
    margin: 0;
    max-width: 14ch;
  }
  .footer-statement em {
    font-style: italic;
    color: var(--blush);
    font-weight: 300;
  }

  .footer-cta {
    --arrow-w: 42px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 4px 18px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bone);
    text-decoration: none;
    border-bottom: 1px solid var(--blush);
    align-self: end;
    justify-self: end;
    transition: color 0.25s, border-color 0.25s;
  }
  .footer-cta:hover { color: var(--blush); border-color: var(--bone); }
  .footer-cta-arrow {
    display: block;
    flex: 0 0 var(--arrow-w);
    width: var(--arrow-w);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .footer-cta:hover .footer-cta-arrow { transform: translateX(8px); }

  /* ── Decorative rule with centred diamond ───────────────── */
  .footer-rule {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 154, 170, 0) 0%, rgba(196, 154, 170, 0.45) 28%, rgba(196, 154, 170, 0.45) 72%, rgba(196, 154, 170, 0) 100%);
    margin: 0 0 56px;
  }
  .footer-rule-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink);
    color: var(--blush);
    font-size: 10px;
    line-height: 1;
    padding: 4px 10px;
  }

  /* ── Grid: brand + three column groups ───────────────────── */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: 56px 48px;
    padding-bottom: 64px;
  }

  .footer-brand { max-width: 360px; }
  .footer-mark { display: inline-block; margin-bottom: 24px; }
  .footer-mark img { display: block; height: 40px; width: auto; }
  .footer-tagline {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.45;
    color: var(--on-ink-strong);
    margin-bottom: 28px;
  }
  .footer-tagline em { font-style: italic; color: var(--blush); }

  .footer-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
  }
  .footer-meta-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: baseline;
    gap: 16px;
  }
  .footer-meta-row dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blush);
    opacity: 0.75;
  }
  .footer-meta-row dd {
    margin: 0;
    font-size: 13px;
    color: var(--on-ink-mid);
    font-feature-settings: "ss01";
  }

  .footer-col {
    /* Each column lifts up on load, staggered by --col-i (set inline by
       the renderer) so the three columns cascade in. */
    animation: footer-col-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--col-i, 1) * 80ms);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .footer-col { animation: none; }
  }
  @keyframes footer-col-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  .footer-col-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blush);
    margin-bottom: 22px;
    position: relative;
    padding-left: 14px;
  }
  .footer-col-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--blush);
    opacity: 0.7;
    transform: translateY(-50%);
  }

  .footer-col-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .footer-col-list a {
    display: inline-block;
    position: relative;
    padding: 6px 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 300;
    color: var(--on-ink-strong);
    text-decoration: none;
    transition: color 0.2s, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .footer-col-list a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 1px;
    background: var(--blush);
    transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .footer-col-list a:hover {
    color: var(--blush);
    transform: translateX(4px);
  }
  .footer-col-list a:hover::before { width: 100%; }

  /* ── Legal strip ────────────────────────────────────────── */
  .footer-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(247, 243, 238, 0.10);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--on-ink-soft);
  }
  .footer-copy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  .footer-dot { color: var(--blush); opacity: 0.6; }
  .footer-attribution {
    justify-self: center;
    text-align: center;
    color: var(--on-ink-mid);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    margin: 0;
  }
  .footer-totop {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--on-ink-mid);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s, transform 0.25s;
  }
  .footer-totop svg { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .footer-totop:hover { color: var(--bone); }
  .footer-totop:hover svg { transform: translateY(-3px); }

  /* Optional secondary line (collective page) */
  .footer-parent {
    font-size: 11px;
    color: var(--on-ink-mid);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .footer-parent a {
    color: var(--blush);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  .footer-parent a:hover { opacity: 1; }

  /* Investment-card helpers */
  .investment-card-cta { margin-top: 8px; display: inline-block; }
  .investment-card-followup {
    margin-top: 16px;
    font-size: 14px;
    /* --on-ink-mid was tuned for --ink, drops to ~7:1 on aubergine. Use
       --on-ink-strong here to stay clearly above WCAG 1.4.3 AA. */
    color: var(--on-ink-strong);
  }
  .investment-card-followup a {
    color: var(--bone);
    text-decoration: underline;
    text-decoration-color: var(--blush);
    text-underline-offset: 3px;
  }
  .investment-card-followup a:hover { text-decoration-color: var(--bone); }

  /* Callout (blush-bordered note) */
  .callout-blush {
    font-size: 14px;
    padding: 10px 14px;
    border-left: 2px solid var(--blush);
    margin: 12px 0 4px;
    background: rgba(196, 154, 170, 0.06);
  }

  /* Booking includes list */
  .booking-includes {
    list-style: none;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--ink-soft);
  }
  .booking-includes li::before {
    content: '·';
    color: var(--blush);
    font-weight: 700;
    margin-right: 10px;
  }

  /* Stats grid value — keep multi-word stats on one line */
  .stat-value { white-space: nowrap; }

  /* Brand logo helper (used on dark surfaces) */
  .brand-logo {
    height: 88px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  .brand-logo--lg { height: 144px; }
  .brand-logo--partnership { height: 44px; opacity: 0.9; }

  .partnership-card-link { text-decoration: none; display: block; }
  .partnership-card-link:hover { opacity: 1; }

  /* CTA layout utility */
  .cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .cta-divider {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--on-ink-soft);
  }

  /* Dark form fields */
  .dark-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dark-form input,
  .dark-form select,
  .dark-form textarea {
    background: rgba(247, 243, 238, 0.07);
    border: 1px solid rgba(247, 243, 238, 0.35);
    color: var(--bone);
    padding: 13px 16px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
    transition: border-color 0.2s;
  }

  .dark-form textarea { min-height: 96px; resize: vertical; }

  .dark-form input::placeholder,
  .dark-form textarea::placeholder { color: var(--on-ink-soft); }
  .dark-form input:focus,
  .dark-form select:focus,
  .dark-form textarea:focus { border-color: var(--blush); }
  .dark-form input:focus-visible,
  .dark-form select:focus-visible,
  .dark-form textarea:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }
  .dark-form select option { background: var(--ink); color: var(--bone); }

  .dark-form input[aria-invalid="true"],
  .dark-form select[aria-invalid="true"],
  .dark-form textarea[aria-invalid="true"] {
    border-color: #ff8a92;
    border-width: 2px;
    padding: 12px 15px;
  }

  .field-error {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #ff9098;
    margin-top: -2px;
    min-height: 16px;
  }

  /* Helper text below form */
  .form-note {
    font-size: 12px;
    color: var(--on-ink-soft);
    margin-top: 4px;
    line-height: 1.5;
  }

  /* Privacy/processing notice — sits just above the submit button */
  .form-meta {
    font-size: 0.8125rem;
    color: var(--on-ink-mid);
    line-height: 1.5;
    margin-block: 8px 12px;
    text-align: left;
  }
  .form-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .form-meta a:hover { color: var(--bone); }
  .light-form .form-meta { color: rgba(44, 25, 34, 0.7); }
  .light-form .form-meta a:hover { color: var(--ink); }

  /* Success state */
  .form-success {
    background: rgba(247, 243, 238, 0.06);
    border: 1px solid rgba(196, 154, 170, 0.45);
    padding: 28px;
    margin-top: 8px;
    outline: none;
  }
  .form-success[hidden] { display: none; }

  .form-success-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    color: var(--bone);
    margin-bottom: 8px;
  }

  .form-success-body {
    font-size: 14px;
    color: var(--on-ink-mid);
  }

  /* Form-level error banner */
  .form-error {
    background: rgba(255, 138, 146, 0.15);
    border-left: 4px solid #ff8a92;
    border-top: 1px solid rgba(255, 138, 146, 0.5);
    border-right: 1px solid rgba(255, 138, 146, 0.5);
    border-bottom: 1px solid rgba(255, 138, 146, 0.5);
    color: #ffe4e6;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
    outline: none;
  }
  .form-error[hidden] { display: none; }

  /* Dark hero background pattern */
  .hero-pattern {
    position: relative;
    overflow: hidden;
  }

  .hero-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235e2a3d' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
  }

  /* Programme icon mark */
  .prog-icon {
    display: block;
    color: var(--blush);
    opacity: 0.8;
    margin-bottom: 20px;
  }

  /* Hero headline subtitle */
  .hero-headline-sub {
    display: block;
    margin-top: 16px;
    margin-bottom: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    font-style: normal;
    color: var(--blush);
    opacity: 0.95;
  }
  #hero:not(.hero-pattern) .hero-headline-sub,
  .service-hero .hero-headline-sub { color: var(--wine); }

  /* Visible form label — used by light-form and dark-form fields that have
     promoted .sr-only labels into visible ones for clarity (WCAG 3.3.2).
     Matches the existing monospace eyebrow voice without aliasing because
     .eyebrow has its own colour/margin that doesn't fit inline form rows. */
  .form-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .dark-form .form-label { color: var(--on-ink-mid); }

  /* Required-field legend */
  .required-legend {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--on-ink-mid);
    margin-bottom: 4px;
  }
  .light-form .required-legend { color: rgba(44, 25, 34, 0.62); }
  .required-legend::before { content: '* '; color: #ff8a92; }
  .light-form .required-legend::before { color: var(--wine); }

  /* Shared FAQ component */
  .faq-section { padding: 80px 0; background: var(--bone-deep); }
  .faq-section .faq-header { max-width: 480px; }
  .faq-section .faq-list { display: flex; flex-direction: column; }

  .faq-item {
    padding: 28px 0;
    border-bottom: 1px solid var(--rule);
  }
  .faq-item:first-child { border-top: 1px solid var(--rule); }
  .faq-q {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .faq-a {
    font-size: 15px;
    line-height: 1.65;
    /* --ink-soft replaces opacity-dim — keeps the dimmed-but-readable
       hierarchy without the perceived washed-out feel of element opacity. */
    color: var(--ink-soft);
    margin: 0;
  }
  .faq-a a {
    color: var(--aubergine);
    border-bottom: 1px solid var(--blush);
    text-decoration: none;
  }
  .faq-a a:hover { border-color: var(--aubergine); }

  /* Booking / lead-form light section */
  .light-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .light-form input,
  .light-form select,
  .light-form textarea {
    background: var(--warm-white);
    /* --rule-strong instead of --rule: form fields are UI components and
       need ≥3:1 contrast against the field background (WCAG 1.4.11). */
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    padding: 13px 16px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
    transition: border-color 0.2s;
  }
  .light-form textarea { min-height: 96px; resize: vertical; }
  .light-form input::placeholder,
  .light-form textarea::placeholder { color: rgba(44, 25, 34, 0.45); }
  .light-form input:focus,
  .light-form select:focus,
  .light-form textarea:focus { border-color: var(--aubergine); }
  .light-form input:focus-visible,
  .light-form select:focus-visible,
  .light-form textarea:focus-visible {
    outline: 2px solid var(--aubergine);
    outline-offset: 2px;
  }
  .light-form input[aria-invalid="true"],
  .light-form select[aria-invalid="true"],
  .light-form textarea[aria-invalid="true"] {
    border-color: var(--wine);
    border-width: 2px;
    padding: 12px 15px;
  }
  .light-form .field-error { color: var(--wine); font-weight: 600; }
  .light-form .form-note { color: rgba(44, 25, 34, 0.62); }
  .light-form .form-error {
    background: rgba(122, 48, 80, 0.06);
    border-left: 4px solid var(--wine);
    border-top: 1px solid rgba(122, 48, 80, 0.3);
    border-right: 1px solid rgba(122, 48, 80, 0.3);
    border-bottom: 1px solid rgba(122, 48, 80, 0.3);
    color: var(--ink);
    font-weight: 500;
  }

  .light-form-success {
    background: var(--bone-deep);
    border: 1px solid var(--rule);
    padding: 28px;
    margin-top: 8px;
    outline: none;
  }
  .light-form-success[hidden] { display: none; }
  .light-form-success-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .light-form-success-body { font-size: 14px; color: var(--ink-soft); }

  /* Contact section reuses booking-inner grid */
  .contact-section {
    background: var(--bone);
    padding: 96px 0;
  }
  @media (max-width: 860px) {
    .contact-section { padding: 72px 0; }
  }

  /* About page reuses about-photo-col + about-content layout */
  .page-about {
    padding: 0 0 96px;
    background: var(--bone);
  }
  .page-about #about { padding-top: 32px; }
  .page-about .about-inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
  }
  .page-about .about-photo-col { position: sticky; top: 96px; margin: 0; }
  .page-about figure.about-photo-col { display: block; }
  .page-about .about-photo-frame {
    background: var(--bone-deep);
    padding: 16px;
  }
  .page-about .about-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
  }
  .page-about .about-photo-caption {
    margin-top: 16px;
  }
  .page-about .about-photo-name {
    font-size: 22px;
  }
  .page-about .about-photo-title {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Full wine — opacity 0.8 dropped contrast under 1.4.3 AA at 11px. */
    color: var(--wine);
  }
  .page-about .about-content h1 {
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.1;
    margin-bottom: 28px;
  }
  .page-about .about-content h2 {
    font-size: 26px;
    margin-top: 40px;
    margin-bottom: 12px;
  }
  .page-about .about-content p { margin-bottom: 18px; }
  .page-about .about-content a { color: var(--aubergine); border-bottom: 1px solid var(--blush); text-decoration: none; }
  .page-about .about-content a:hover { border-color: var(--aubergine); }
  @media (max-width: 860px) {
    .page-about .about-inner {
      grid-template-columns: 1fr;
      gap: 32px;
      grid-template-areas: "content" "photo";
    }
    .page-about .about-content { grid-area: content; }
    .page-about .about-photo-col { position: static; max-width: 320px; grid-area: photo; }
  }

  /* Service / long-form landing pages */
  .page-fractional,
  .page-foundations,
  .page-geo { background: var(--bone); }

  .service-hero {
    padding: 96px 0 64px;
    border-bottom: 1px solid var(--rule);
  }
  .meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 20px 0 28px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .meta-strip > div { display: flex; flex-direction: column; gap: 4px; }
  .meta-strip dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wine);
  }
  .meta-strip dd {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    margin: 0;
  }

  .service-hero h1 {
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 1.05;
    margin: 16px 0 24px;
    letter-spacing: -0.02em;
  }
  .service-hero h1 em {
    color: var(--aubergine);
    font-style: italic;
    font-variation-settings: "SOFT" 80;
  }
  .service-hero-sub {
    font-size: 19px;
    max-width: 720px;
    margin-bottom: 28px;
    color: rgba(44, 25, 34, 0.85);
  }
  .service-hero .hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

  .service-body {
    padding: 72px 0;
    border-bottom: 1px solid var(--rule);
  }
  .service-body--alt { background: var(--bone-deep); }
  .service-body h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.15;
    margin: 16px 0 24px;
  }
  .service-body h2 em { color: var(--aubergine); font-style: italic; font-variation-settings: "SOFT" 80; }
  .service-body p { margin-bottom: 16px; max-width: 760px; }

  .service-list {
    list-style: none;
    margin: 16px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
  }
  .service-list li {
    padding-left: 24px;
    position: relative;
    line-height: 1.6;
  }
  .service-list li::before {
    content: '·';
    position: absolute;
    left: 6px;
    color: var(--blush);
    font-weight: 700;
    font-size: 20px;
    top: -2px;
  }
  .service-list strong { color: var(--aubergine); font-weight: 600; }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 32px;
  }
  .service-grid-item {
    background: var(--warm-white);
    padding: 28px;
    border: 1px solid var(--rule);
  }
  .service-grid-item h3 { font-size: 20px; margin-bottom: 10px; }
  .service-grid-item p { font-size: 15px; }
  .service-grid-item a { color: var(--aubergine); border-bottom: 1px solid var(--blush); text-decoration: none; }

  .service-grid-item--featured {
    grid-column: 1 / -1;
    background: var(--bone-deep);
    border: 1px solid var(--aubergine);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: center;
  }
  .service-grid-item--featured h3 {
    font-size: 24px;
  }
  .service-grid-item--featured h3::before {
    content: 'Partnership';
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wine);
    margin-bottom: 6px;
  }
  @media (max-width: 700px) {
    .service-grid-item--featured { grid-template-columns: 1fr; gap: 8px; }
  }

  .compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 32px;
  }
  .compare-col {
    padding: 28px;
    border: 1px solid var(--rule);
    background: var(--bone);
  }
  .compare-col--featured {
    border: 2px solid var(--aubergine);
    background: var(--warm-white);
    position: relative;
    box-shadow: 0 8px 24px rgba(94, 42, 61, 0.08);
  }
  .compare-col--featured::before {
    content: 'Recommended';
    position: absolute;
    top: -12px;
    left: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--aubergine);
    color: var(--bone);
    padding: 5px 12px;
  }
  .compare-col h3 { font-size: 22px; margin-bottom: 6px; }
  .compare-cost {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wine);
    margin-bottom: 16px;
  }
  .compare-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
  .compare-list li { padding-left: 18px; position: relative; line-height: 1.5; }
  .compare-list li::before { content: '·'; position: absolute; left: 4px; color: var(--blush); font-weight: 700; }

  .how-steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 40px;
  }
  .how-steps li {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule);
  }
  .how-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
  .how-step-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--aubergine);
    padding-top: 2px;
    line-height: 1;
  }
  .how-steps h3 { grid-column: 2; font-size: 24px; margin-bottom: 12px; line-height: 1.25; }
  .how-steps p { grid-column: 2; font-size: 16px; line-height: 1.7; margin: 0; max-width: 640px; }
  .how-steps a { color: var(--aubergine); border-bottom: 1px solid var(--blush); text-decoration: none; }

  /* Shared CTA — bone outer band with a soft aubergine card.
     Used on every page's final CTA (#cta) so the call-to-action reads as
     a deliberate, contained block rather than dissolving into the dark
     footer (services pages) or the bone body (home / about). */
  #cta {
    background: var(--bone);
    padding: 96px 0;
  }
  #cta .cta-card {
    background: var(--aubergine);
    color: var(--bone);
    border-radius: 24px;
    padding: 80px 48px;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    box-shadow: 0 24px 60px -28px rgba(44, 25, 34, 0.45);
  }
  #cta .cta-card .eyebrow { color: var(--blush); opacity: 1; }
  #cta .cta-card h2 {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: var(--bone);
    max-width: 620px;
    margin: 16px auto 20px;
  }
  #cta .cta-card h2 em {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  #cta .cta-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--on-ink-mid);
    max-width: 480px;
    margin: 0 auto 32px;
  }
  #cta .cta-card .cta-actions { justify-content: center; gap: 24px; }
  /* Default .btn-primary is aubergine-on-bone — invisible on the card.
     Invert to bone-on-ink so the primary action keeps its weight. */
  #cta .cta-card .btn-primary { background: var(--bone); color: var(--ink); }
  #cta .cta-card .btn-primary:hover { background: var(--warm-white); }
  #cta .cta-card .btn-link { color: var(--blush); border-color: rgba(196, 154, 170, 0.5); }
  #cta .cta-card .btn-link:hover { border-color: var(--bone); }
  #cta .cta-card .btn-secondary { color: var(--bone); border-color: rgba(247, 243, 238, 0.4); }
  #cta .cta-card .btn-secondary:hover { border-color: var(--bone); }
  #cta .cta-card .cta-divider { color: var(--on-ink-soft); }

  @media (max-width: 700px) {
    #cta { padding: 64px 0; }
    #cta .cta-card { padding: 56px 28px; border-radius: 20px; }
  }

  @media (max-width: 700px) {
    .how-steps { gap: 32px; }
    .how-steps li { grid-template-columns: 1fr; column-gap: 0; row-gap: 6px; padding-bottom: 32px; }
    .how-step-num { grid-column: 1; grid-row: auto; font-size: 22px; }
    .how-steps h3, .how-steps p { grid-column: 1; }
  }

  /* Booking section layout */
  .booking-section {
    background: var(--bone);
    padding: 96px 0;
    border-top: 1px solid var(--rule);
  }
  .booking-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
  @media (max-width: 860px) {
    .booking-section { padding: 72px 0; }
    .booking-inner { grid-template-columns: 1fr; gap: 32px; }
  }

  /* Responsive */
  @media (max-width: 860px) {
    .nav-toggle { display: block; }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      background: var(--bone);
      border-bottom: 1px solid var(--rule);
      padding: 12px 0;
      box-shadow: 0 12px 24px rgba(44, 25, 34, 0.06);
    }
    nav { position: sticky; }
    .nav-inner { position: relative; }
    .nav-links li { width: 100%; }
    .nav-links a {
      display: block;
      padding: 14px 24px;
      width: 100%;
      font-size: 15px;
      opacity: 1;
    }

    .nav-toggle[aria-expanded="true"] ~ .nav-links,
    .nav-inner:has(.nav-toggle[aria-expanded="true"]) .nav-links {
      display: flex;
    }

    /* If hamburger is visible, hide the desktop CTA */
    .nav-cta { display: none; }
    .nav-item--mobile-cta { display: block; }
    .nav-links .nav-cta-mobile {
      display: inline-flex;
      margin: 8px 24px 12px;
      padding: 12px 20px;
      background: var(--aubergine);
      color: var(--bone);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
    }

    /* Groups become accordions inside the hamburger menu. The desktop
       hover/focus reveal is disabled; the disclosure is driven by the
       trigger's aria-expanded attribute (set by js/forms.js). */
    .nav-group { position: static; width: 100%; }
    .nav-group--with-link {
      display: flex;
      width: 100%;
      align-items: stretch;
      gap: 0;
      flex-wrap: nowrap;
    }
    .nav-group--with-link .nav-group-link {
      flex: 1 1 auto;
      width: auto;
    }
    /* Group-with-link panel must drop to a NEW row (full width below the
       link + caret), so we give it explicit row-wrap via flex-basis 100%. */
    .nav-group--with-link {
      flex-wrap: wrap;
    }
    .nav-group--with-link > .nav-group-link,
    .nav-group--with-link > .nav-group-trigger--caret {
      flex-basis: auto;
    }
    .nav-group--with-link > .nav-group-panel {
      flex-basis: 100%;
    }
    .nav-group-trigger {
      width: 100%;
      justify-content: space-between;
      padding: 14px 24px;
      font-size: 15px;
      opacity: 1;
    }
    .nav-group-trigger--caret {
      width: auto;
      flex: 0 0 auto;
      padding: 14px 24px;
      opacity: 0.6;
    }

    .nav-group-panel {
      display: none;
      position: static;
      box-shadow: none;
      border: 0;
      padding: 4px 0 8px;
      min-width: 0;
      width: 100%;
      background: rgba(44, 25, 34, 0.035);
    }
    .nav-group-panel::before { display: none; }
    /* Override the desktop hover reveal so the accordion is fully
       aria-driven on mobile. */
    .nav-group:hover .nav-group-panel,
    .nav-group:focus-within .nav-group-panel { display: none; }
    .nav-group:has(.nav-group-trigger[aria-expanded="true"]) .nav-group-panel {
      display: block;
    }
    .nav-group-panel a {
      padding: 12px 24px 12px 40px;
      font-size: 14px;
    }
    /* The caret on the desktop ":hover" can stay non-rotated by default; on
       mobile we only rotate it when the disclosure is actually open. */
    .nav-group:hover .nav-caret,
    .nav-group:focus-within .nav-caret { transform: none; }
    .nav-group-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

    .site-footer { padding: 64px 0 28px; }
    .footer-banner {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 28px;
      padding-bottom: 44px;
    }
    .footer-cta { justify-self: start; align-self: start; }
    .footer-rule { margin-bottom: 44px; }
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 40px 32px;
      padding-bottom: 48px;
    }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
    .footer-strip {
      grid-template-columns: 1fr;
      justify-items: start;
      gap: 14px;
      padding-top: 24px;
    }
    .footer-attribution,
    .footer-totop { justify-self: start; }
  }

  @media (max-width: 560px) {
    .cta-actions { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-meta-row { grid-template-columns: 76px 1fr; gap: 12px; }
    .footer-statement { font-size: clamp(34px, 9vw, 48px); }
  }
}

/* ─── Pages ──────────────────────────────────────────────── */
@layer pages {

  /* ─── Home page (was index.css) ──────────────────────────
     Surfaces: #hero, #brands, #gap, #pillars, #numbers, #services,
     #about, #partnership, #cta. */

  /* Container override (wider on home + service pages so grids breathe) */
  .page-home .container,
  .page-fractional .container,
  .page-foundations .container,
  .page-geo .container { max-width: 1120px; }

  .page-home #hero {
    padding: 0;
    background: var(--warm-white);
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
  }
  .page-home .hero-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 64px;
    align-items: center;
    padding: 100px 40px;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
  }
  .page-home .hero-content { max-width: 600px; }

  .page-home .availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--wine);
    border: 1px solid var(--rule);
    padding: 7px 14px;
    margin-bottom: 36px;
  }
  .page-home .availability-pill::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a9e6a;
    flex-shrink: 0;
  }

  .page-home .hero-headline {
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .page-home .hero-headline em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-home .hero-sub {
    font-size: 18px;
    line-height: 1.65;
    /* --ink-soft replaces opacity-dimmed --ink (was failing 1.4.3 at ~3.5:1). */
    color: var(--ink-soft);
    margin-bottom: 44px;
    max-width: 480px;
  }
  .page-home .hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }

  .page-home .hero-photo {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
  }
  .page-home .hero-photo-frame {
    position: relative;
    width: 100%;
    background: var(--warm-white);
    overflow: hidden;
  }
  .page-home .hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: saturate(0.92);
  }

  /* Brands */
  .page-home #brands {
    padding: 48px 0;
    background: var(--ink);
  }
  .page-home .brands-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    /* --on-ink-soft (≈0.62) replaces 0.4 alpha which was ~4.4:1 small text fail (1.4.3). */
    color: var(--on-ink-soft);
    text-align: center;
    margin-bottom: 28px;
  }
  .page-home .brands-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
    flex-wrap: wrap;
  }
  .page-home .brand-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wine);
    opacity: 0.5;
  }

  /* Gap section */
  .page-home #gap {
    background: var(--bone-deep);
    padding: 100px 0;
  }
  .page-home .gap-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .page-home .gap-headline {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .page-home .gap-headline em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-home .gap-body p {
    font-size: 16px;
    line-height: 1.75;
    /* --ink-soft replaces opacity-dim (was 1.4.3 fail on --bone-deep). */
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  .page-home .gap-body p:last-child { margin-bottom: 0; }

  /* Pillars */
  .page-home #pillars { background: var(--warm-white); }
  .page-home .pillars-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 72px;
  }
  .page-home .pillars-header h2 {
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
  .page-home .pillars-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-home .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--rule);
  }
  .page-home .pillar {
    background: var(--warm-white);
    padding: 48px 40px;
  }
  .page-home .pillar-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--wine);
    margin-bottom: 28px;
    display: block;
  }
  .page-home .pillar h3 {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin-bottom: 16px;
  }
  .page-home .pillar h3 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-home .pillar p {
    font-size: 14.5px;
    line-height: 1.75;
    /* --ink-soft replaces opacity-dim (was 1.4.3 fail). */
    color: var(--ink-soft);
  }

  /* Numbers / Stats */
  .page-home #numbers {
    background: var(--aubergine);
    padding: 88px 0;
  }
  .page-home #numbers .eyebrow { color: rgba(247, 243, 238, 0.75); }
  .page-home #numbers h2 {
    color: var(--bone);
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.2;
    max-width: 540px;
    margin-bottom: 64px;
    letter-spacing: -0.5px;
  }
  .page-home #numbers h2 em {
    font-style: italic;
    color: var(--blush);
  }
  .page-home .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(247, 243, 238, 0.12);
  }
  .page-home .stat {
    background: rgba(44, 25, 34, 0.45);
    padding: 36px 32px;
  }
  .page-home .stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--bone);
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
  }
  .page-home .stat-value span {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  .page-home .stat-label {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(247, 243, 238, 0.6);
  }

  /* Services */
  .page-home #services { background: var(--bone); }
  .page-home .services-header {
    max-width: 560px;
    margin-bottom: 64px;
  }
  .page-home .services-header h2 {
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }
  .page-home .services-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-home .services-header p {
    font-size: 16px;
    line-height: 1.7;
    /* --ink-soft replaces opacity-dim (was 1.4.3 fail on --bone). */
    color: var(--ink-soft);
  }
  .page-home .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--rule);
  }
  .page-home .service-card {
    background: var(--warm-white);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
  }
  .page-home .service-card.featured { background: var(--ink); }
  .page-home .service-tier {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--wine);
    margin-bottom: 20px;
    display: block;
  }
  .page-home .service-card.featured .service-tier { color: var(--blush); }
  .page-home .service-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.3px;
  }
  .page-home .service-card.featured .service-name { color: var(--bone); }
  .page-home .service-desc {
    font-size: 14px;
    line-height: 1.7;
    /* --ink-soft replaces opacity-dim on light cards (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-bottom: 28px;
    flex: 1;
  }
  /* Featured card sits on --ink; --on-ink-mid keeps the dimmed-but-readable
     hierarchy with a verified 10.7:1 contrast. */
  .page-home .service-card.featured .service-desc { color: var(--on-ink-mid); }
  .page-home .service-includes {
    list-style: none;
    border-top: 1px solid var(--rule);
    padding-top: 24px;
  }
  .page-home .service-card.featured .service-includes { border-color: rgba(247, 243, 238, 0.15); }
  .page-home .service-includes li {
    font-size: 13px;
    line-height: 1.5;
    padding: 6px 0;
    /* --ink-soft replaces opacity-dim (was 1.4.3 fail at 13px on white cards). */
    color: var(--ink-soft);
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  /* Featured card sits on --ink; --on-ink-mid keeps the dimmed hierarchy
     at 10.7:1 contrast. Overrides --ink-soft above. */
  .page-home .service-card.featured .service-includes li { color: var(--on-ink-mid); }
  .page-home .service-includes li::before {
    content: '—';
    color: var(--wine);
    flex-shrink: 0;
  }
  .page-home .service-card.featured .service-includes li::before { color: var(--blush); }
  .page-home .btn-service {
    display: inline-block;
    margin-top: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wine);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.2s;
  }
  .page-home .btn-service:hover { opacity: 0.65; }
  .page-home .service-card.featured .btn-service { color: var(--blush); }

  /* About */
  .page-home #about { background: var(--bone-deep); }
  .page-home .about-inner {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 88px;
    align-items: start;
  }
  .page-home .about-photo-col { position: relative; }
  .page-home .about-photo-frame {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .page-home .about-photo-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: saturate(0.9);
  }
  .page-home .about-photo-caption { margin-top: 20px; }
  .page-home .about-photo-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.3px;
  }
  .page-home .about-photo-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--wine);
    margin-top: 6px;
    display: block;
  }
  .page-home .about-content h2 {
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.8px;
    margin-bottom: 28px;
  }
  .page-home .about-content h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-home .about-content p {
    font-size: 16px;
    line-height: 1.78;
    /* --ink-soft replaces opacity-dim on --bone-deep (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  .page-home .about-content p:last-child { margin-bottom: 0; }

  /* Partnership */
  .page-home #partnership {
    background: var(--ink);
    padding: 88px 0;
  }
  .page-home #partnership .eyebrow { color: var(--blush); }
  .page-home .partnership-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .page-home #partnership h2 {
    font-size: clamp(28px, 3vw, 40px);
    color: var(--bone);
    line-height: 1.18;
    letter-spacing: -0.6px;
    margin-bottom: 24px;
  }
  .page-home #partnership h2 em {
    font-style: italic;
    color: var(--blush);
  }
  .page-home #partnership p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(247, 243, 238, 0.7);
    margin-bottom: 18px;
  }
  .page-home .partnership-card {
    background: rgba(247, 243, 238, 0.06);
    border: 1px solid rgba(247, 243, 238, 0.1);
    padding: 44px;
  }
  .page-home .partnership-card-logo { margin-bottom: 20px; }
  .page-home .partnership-logo-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    color: var(--bone);
    letter-spacing: -0.3px;
  }
  .page-home .partnership-logo-text em {
    font-style: italic;
    color: var(--blush);
  }
  .page-home .partnership-card h3 {
    font-size: 18px;
    color: var(--bone);
    margin-bottom: 16px;
    letter-spacing: -0.2px;
  }
  .page-home .partnership-card p { font-size: 14px; }
  .page-home .partnership-detail {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blush);
    margin-top: 24px;
    display: block;
  }

  /* Home responsive */
  @media (max-width: 900px) {
    .page-home .hero-inner {
      grid-template-columns: 1fr;
      padding: 72px 24px;
      gap: 48px;
    }
    .page-home .hero-photo {
      max-width: 360px;
      margin: 0 auto;
    }
    .page-home .hero-photo-frame img {
      object-position: center 25%;
      max-height: 460px;
    }
    .page-home .gap-inner,
    .page-home .about-inner,
    .page-home .partnership-inner { grid-template-columns: 1fr; gap: 48px; }
    .page-home .pillars-grid,
    .page-home .services-grid { grid-template-columns: 1fr; }
    .page-home .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .page-home .brands-row { gap: 36px; }
  }
  @media (max-width: 600px) {
    .page-home .stats-grid { grid-template-columns: 1fr 1fr; }
  }


  /* ─── Programme family (compass + first-light) ─────────────
     Was programme.css. Both .page-compass and .page-first-light
     carry the `.page-programme` body class so these rules apply. */

  .page-programme #hero {
    background: var(--ink);
    padding: 100px 0 88px;
  }
  .page-programme .hero-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: center;
    margin-bottom: 48px;
  }
  .page-programme .hero-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-programme .hero-graphic svg {
    width: 100%;
    max-width: 340px;
    height: auto;
  }
  .page-programme .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .page-programme #hero .eyebrow { color: var(--blush); }
  .page-programme .hero-headline {
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.0;
    letter-spacing: -2px;
    color: var(--bone);
    margin-bottom: 20px;
  }
  .page-programme .hero-headline em {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  .page-programme .hero-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    /* Blush at full alpha on --ink gives 6.81:1; the 0.7 opacity dim
       previously dropped this 12px label below the 4.5:1 1.4.3 threshold. */
    color: var(--blush);
    margin-bottom: 44px;
  }
  .page-programme .hero-body {
    font-size: 19px;
    line-height: 1.7;
    color: rgba(247, 243, 238, 0.68);
    margin-bottom: 32px;
  }
  .page-programme .hero-body strong { color: var(--bone); font-weight: 500; }
  .page-programme .hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    padding-top: 40px;
    border-top: 1px solid rgba(247, 243, 238, 0.1);
  }
  .page-programme .hero-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 28px;
    color: var(--bone);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 5px;
  }
  .page-programme .hero-stat-value em {
    font-style: italic;
    color: var(--blush);
  }
  .page-programme .hero-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* --on-ink-soft replaces 0.4 alpha (was 1.4.3 fail on small text). */
    color: var(--on-ink-soft);
  }

  /* Onboarding callout */
  .page-programme #onboarding {
    background: var(--warm-white);
    padding: 56px 0;
  }
  .page-programme .onboarding-inner {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .page-programme .onboarding-icon {
    font-size: 32px;
    flex-shrink: 0;
  }
  .page-programme .onboarding-inner h3 {
    font-size: 17px;
    letter-spacing: -0.2px;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  .page-programme .onboarding-inner h3 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-programme .onboarding-inner p {
    font-size: 14.5px;
    line-height: 1.7;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
  }

  /* Sessions */
  .page-programme #sessions { background: var(--bone-deep); }
  .page-programme .sessions-header {
    max-width: 560px;
    margin-bottom: 56px;
  }
  .page-programme .sessions-header h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .page-programme .sessions-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-programme .sessions-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .page-programme .session-card {
    background: var(--bone-deep);
    border-top: 2px solid transparent;
    display: grid;
    grid-template-columns: 64px 1fr;
    transition: border-top-color 0.2s;
  }
  .page-programme .session-card:hover { border-top-color: var(--aubergine); }
  .page-programme .session-number-col {
    background: var(--aubergine);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 44px;
  }
  .page-programme .session-number-col span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    /* Was rgba bone 0.5 on --aubergine (~3.89:1, 1.4.3 fail for 10px). */
    color: var(--on-ink-strong);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .page-programme .session-body { padding: 44px 48px; }
  .page-programme .session-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--wine);
    display: block;
    margin-bottom: 14px;
  }
  .page-programme .session-title {
    font-size: clamp(22px, 2.8vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
  }
  .page-programme .session-title em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-programme .session-hook {
    font-size: 16px;
    line-height: 1.72;
    /* --ink-soft replaces opacity-dim on --bone-deep (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-bottom: 24px;
    max-width: 580px;
  }
  .page-programme .session-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }
  .page-programme .session-topic {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wine);
    background: rgba(94, 42, 61, 0.07);
    padding: 5px 12px;
  }
  .page-programme .session-outcome {
    font-size: 14px;
    font-style: italic;
    /* Full aubergine instead of opacity-dimmed; 14px italic needs ≥4.5:1
       and the dimmed version dropped below that on --warm-white. */
    color: var(--aubergine);
    line-height: 1.6;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }

  /* Between sessions */
  .page-programme #between { background: var(--warm-white); }
  .page-programme .between-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .page-programme .between-inner h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
  .page-programme .between-inner h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-programme .between-items {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .page-programme .between-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .page-programme .between-item-icon {
    width: 40px;
    height: 40px;
    background: var(--aubergine);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blush);
    font-size: 14px;
  }
  .page-programme .between-item h3 {
    font-size: 16px;
    letter-spacing: -0.1px;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .page-programme .between-item p {
    font-size: 14px;
    line-height: 1.72;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
  }

  /* How to join */
  .page-programme #join { background: var(--ink); }
  .page-programme #join .eyebrow { color: var(--blush); }
  .page-programme #join h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--bone);
    max-width: 520px;
    margin-bottom: 24px;
  }
  .page-programme #join h2 em {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  .page-programme #join > .container > p {
    font-size: 16px;
    line-height: 1.78;
    color: rgba(247, 243, 238, 0.62);
    max-width: 540px;
    margin-bottom: 18px;
  }
  .page-programme .join-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 36px;
  }

  /* Waitlist */
  .page-programme #waitlist {
    background: rgba(44, 25, 34, 0.97);
    padding: 80px 0;
  }
  .page-programme #waitlist .eyebrow { color: var(--blush); }
  .page-programme .waitlist-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
  }
  .page-programme .waitlist-copy h2 {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.8px;
    color: var(--bone);
    margin-bottom: 16px;
  }
  .page-programme .waitlist-copy h2 em {
    font-style: italic;
    color: var(--blush);
  }
  .page-programme .waitlist-copy p {
    font-size: 15px;
    line-height: 1.75;
    /* Was rgba bone 0.55 on near-ink; --on-ink-mid keeps 10.7:1 contrast. */
    color: var(--on-ink-mid);
  }
  .page-programme .waitlist-alt {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(247, 243, 238, 0.12);
  }
  .page-programme .waitlist-alt-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* --on-ink-soft replaces 0.4 alpha (was 1.4.3 fail on small text). */
    color: var(--on-ink-soft);
    margin-bottom: 8px;
  }
  .page-programme .waitlist-alt-link {
    font-size: 14px;
    color: var(--blush);
    text-decoration: underline;
    text-decoration-color: rgba(196, 154, 170, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
  }
  .page-programme .waitlist-alt-link:hover { text-decoration-color: var(--blush); }

  /* Investment */
  .page-programme #investment { background: var(--bone-deep); }
  .page-programme .investment-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .page-programme .investment-inner h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
  .page-programme .investment-inner h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  /* :not(.investment-card) keeps this rule on the left-hand copy column
     only — the aubergine card on the right needs the light-on-dark token
     defined below, not --ink-soft. */
  .page-programme .investment-inner > div:not(.investment-card) > p {
    font-size: 16px;
    line-height: 1.78;
    color: var(--ink-soft);
    margin-top: 16px;
  }
  .page-programme .investment-card {
    background: var(--aubergine);
    padding: 44px 40px;
  }
  .page-programme .investment-enquire {
    font-size: 16px;
    line-height: 1.65;
    /* Full --on-ink-strong instead of bone+0.85 — keeps ≥10:1 contrast on
       --aubergine without the washed-out perception (1.4.3 AA). */
    color: var(--on-ink-strong);
    margin-bottom: 28px;
  }
  /* Reverse btn-primary inside the aubergine card so the button has a
     visible bone background instead of disappearing into the card. */
  .page-programme .investment-card .btn-primary {
    background: var(--bone);
    color: var(--ink);
  }
  .page-programme .investment-card .btn-primary:hover { background: var(--warm-white); }
  .page-programme .investment-options {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .page-programme .investment-options li {
    font-size: 14px;
    color: rgba(247, 243, 238, 0.65);
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.5;
  }
  .page-programme .investment-options li::before {
    content: '—';
    color: var(--blush);
    flex-shrink: 0;
    font-size: 11px;
  }

  /* Sessions deck subtitle */
  .page-programme .sessions-deck {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.6;
    /* --ink-soft replaces opacity-dim (was 1.4.3 fail at 0.65). */
    color: var(--ink-soft);
    max-width: 560px;
  }

  /* Is this for you? */
  .page-programme #for-you {
    padding: 80px 0;
    background: var(--bone);
  }
  .page-programme .for-you-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .page-programme .for-you-intro p {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.65;
    /* --ink-soft replaces opacity-dim on --bone (was 1.4.3 fail). */
    color: var(--ink-soft);
  }
  .page-programme .for-you-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .page-programme .for-you-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
  }
  .page-programme .for-you-list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23c49aaa' stroke-width='1.2'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7' stroke='%23c49aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Programme responsive */
  @media (max-width: 860px) {
    .page-programme .between-inner,
    .page-programme .investment-inner,
    .page-programme .waitlist-inner { grid-template-columns: 1fr; gap: 40px; }
    .page-programme .session-card { grid-template-columns: 1fr; }
    .page-programme .session-number-col {
      writing-mode: initial;
      padding: 20px 24px 0;
      align-items: center;
      justify-content: flex-start;
    }
    .page-programme .session-number-col span {
      writing-mode: initial;
      transform: none;
    }
    .page-programme .join-actions { flex-direction: column; }
    .page-programme .hero-grid {
      grid-template-columns: 1fr;
      gap: 36px;
      margin-bottom: 36px;
    }
    .page-programme .hero-graphic { order: -1; }
    .page-programme .hero-graphic svg { max-width: 220px; }
    .page-programme .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 32px;
    }
    .page-programme .hero-actions { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 768px) {
    .page-programme .for-you-inner {
      grid-template-columns: 1fr;
      gap: 36px;
    }
  }
  @media (max-width: 560px) {
    .page-programme .session-body { padding: 28px 24px; }
    .page-programme .hero-body { font-size: 16px; }
    .page-programme .hero-graphic svg { max-width: 180px; }
  }


  /* ─── Collective family (programmes + first-light) ────────
     Was collective.css. The programmes (NAC) page carries
     `.page-collective`; the First Light page also carries it
     because its markup uses the collective workshop/expect/
     schedule/about/after/register sections. */

  .page-collective #hero {
    background: var(--ink);
    padding: 112px 0 0;
    overflow: hidden;
  }
  .page-collective #hero .eyebrow { color: var(--blush); }
  .page-collective .hero-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: center;
  }
  .page-collective .hero-text {
    padding-bottom: 96px;
    padding-top: 0;
  }
  .page-collective .hero-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 40px;
  }
  .page-collective .hero-image img {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
  }
  .page-collective .hero-headline {
    font-size: clamp(52px, 8vw, 96px);
    line-height: 1.0;
    letter-spacing: -2.5px;
    color: var(--bone);
    margin-bottom: 28px;
    max-width: 740px;
  }
  .page-collective .hero-headline em {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  .page-collective .hero-body {
    font-size: 19px;
    line-height: 1.7;
    color: rgba(247, 243, 238, 0.68);
    max-width: 560px;
    margin-bottom: 20px;
  }
  .page-collective .hero-bridge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    /* --on-ink-soft replaces 0.42 alpha (was borderline 1.4.3 fail). */
    color: var(--on-ink-soft);
    letter-spacing: 0.5px;
    margin-bottom: 48px;
  }
  .page-collective .hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  /* Who this is for */
  .page-collective #for { background: var(--warm-white); }
  .page-collective .for-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .page-collective .for-inner h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .page-collective .for-inner h2 em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-collective .for-body p {
    font-size: 16px;
    line-height: 1.8;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  .page-collective .for-body p:last-child { margin-bottom: 0; }

  /* What to expect */
  .page-collective #expect { background: var(--bone-deep); }
  .page-collective .expect-header {
    max-width: 600px;
    margin-bottom: 56px;
  }
  .page-collective .expect-header h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .page-collective .expect-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-collective .expect-header > p {
    font-size: 16px;
    line-height: 1.78;
    /* --ink-soft replaces opacity-dim on --bone-deep (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-top: 20px;
    max-width: 520px;
  }
  .page-collective .expect-points { display: flex; flex-direction: column; }
  .page-collective .expect-point {
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 32px;
    align-items: baseline;
  }
  .page-collective .expect-point:last-child { border-bottom: 1px solid var(--rule); }
  .page-collective .expect-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    /* Full wine — opacity 0.7 dropped 11px mono below 1.4.3 AA. */
    color: var(--wine);
  }
  .page-collective .expect-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    letter-spacing: -0.4px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .page-collective .expect-title em { font-style: italic; color: var(--aubergine); }
  .page-collective .expect-body {
    font-size: 15.5px;
    line-height: 1.75;
    /* --ink-soft replaces opacity-dim on --bone-deep (was 1.4.3 fail). */
    color: var(--ink-soft);
    max-width: 540px;
  }

  /* A typical session */
  .page-collective #typical { background: var(--warm-white); }
  .page-collective .typical-header {
    max-width: 600px;
    margin-bottom: 48px;
  }
  .page-collective .typical-header h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
  .page-collective .typical-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-collective .typical-header > p {
    font-size: 15.5px;
    line-height: 1.75;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-top: 16px;
    max-width: 520px;
  }
  .page-collective .schedule { display: flex; flex-direction: column; }
  .page-collective .schedule-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    padding: 24px 0;
    border-top: 1px solid var(--rule);
    align-items: baseline;
  }
  .page-collective .schedule-row:last-child { border-bottom: 1px solid var(--rule); }
  .page-collective .schedule-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--aubergine);
    font-weight: 500;
  }
  .page-collective .schedule-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    letter-spacing: -0.2px;
    margin-bottom: 6px;
  }
  .page-collective .schedule-body {
    font-size: 14.5px;
    line-height: 1.65;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
    max-width: 520px;
  }

  /* Workshop dates */
  .page-collective #workshop { background: var(--bone); }
  .page-collective .workshop-header {
    max-width: 600px;
    margin-bottom: 52px;
  }
  .page-collective .workshop-header h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .page-collective .workshop-header h2 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-collective .workshop-header > p {
    font-size: 16px;
    line-height: 1.78;
    /* --ink-soft replaces opacity-dim on --bone (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-top: 20px;
    max-width: 520px;
  }
  .page-collective .workshop-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--rule);
    margin-bottom: 40px;
  }
  .page-collective .workshop-outcomes {
    background: var(--bone-deep);
    padding: 44px 40px;
  }
  .page-collective .workshop-outcomes h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    letter-spacing: -0.2px;
    margin-bottom: 24px;
    line-height: 1.3;
  }
  .page-collective .workshop-outcomes h3 em {
    font-style: italic;
    color: var(--aubergine);
  }
  .page-collective .outcomes-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .page-collective .outcomes-list li {
    font-size: 14.5px;
    line-height: 1.65;
    /* --ink-soft replaces opacity-dim on --bone-deep (was 1.4.3 fail). */
    color: var(--ink-soft);
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .page-collective .outcomes-list li::before {
    content: '◎';
    color: var(--aubergine);
    font-size: 9px;
    flex-shrink: 0;
    margin-top: 3px;
  }
  .page-collective .workshop-dates {
    background: var(--ink);
    padding: 44px 40px;
  }
  .page-collective .workshop-dates h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    letter-spacing: -0.2px;
    margin-bottom: 28px;
    line-height: 1.3;
    color: var(--bone);
  }
  .page-collective .dates-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 32px;
  }
  .page-collective .date-item {
    background: rgba(247, 243, 238, 0.05);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
  }
  .page-collective .date-city {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    color: var(--bone);
    letter-spacing: -0.2px;
    margin-bottom: 3px;
  }
  .page-collective .date-city em {
    font-style: italic;
    color: var(--blush);
  }
  .page-collective .date-detail {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    /* --on-ink-soft replaces 0.4 alpha (was 1.4.3 fail on small text). */
    color: var(--on-ink-soft);
    text-transform: uppercase;
  }
  .page-collective .date-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blush);
    border: 1px solid rgba(196, 154, 170, 0.3);
    padding: 4px 10px;
    white-space: nowrap;
  }
  .page-collective .workshop-investment {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    /* --on-ink-soft replaces 0.4 alpha (was 1.4.3 fail on small text). */
    color: var(--on-ink-soft);
    letter-spacing: 0.5px;
    line-height: 1.7;
    margin-bottom: 24px;
  }
  .page-collective .workshop-investment strong { color: var(--on-ink-mid); }

  /* About (sticky photo) */
  .page-collective #about { background: var(--warm-white); }
  .page-collective .about-inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 72px;
    align-items: start;
  }
  .page-collective .about-photo-wrap {
    position: sticky;
    top: 100px;
  }
  .page-collective .about-photo-frame {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bone-deep);
    margin-bottom: 16px;
  }
  .page-collective .about-photo-frame picture,
  .page-collective .about-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .page-collective .about-photo-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin-bottom: 3px;
  }
  .page-collective .about-photo-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Full wine — opacity 0.7 dropped to ~3.8:1 on --warm-white (1.4.3 fail). */
    color: var(--wine);
  }
  .page-collective .about-content h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.18;
    letter-spacing: -0.8px;
    margin-bottom: 28px;
  }
  .page-collective .about-content h2 em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-collective .about-content p {
    font-size: 16px;
    line-height: 1.8;
    /* --ink-soft replaces opacity-dim on --warm-white (was 1.4.3 fail). */
    color: var(--ink-soft);
    margin-bottom: 20px;
  }
  .page-collective .about-content p:last-child { margin-bottom: 0; }

  /* After the workshop */
  .page-collective #after { background: var(--ink); }
  .page-collective #after .eyebrow { color: var(--blush); }
  .page-collective .after-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .page-collective .after-copy h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--bone);
    margin-bottom: 24px;
  }
  .page-collective .after-copy h2 em {
    font-style: italic;
    color: var(--blush);
    font-variation-settings: "SOFT" 80;
  }
  .page-collective .after-copy p {
    font-size: 16px;
    line-height: 1.78;
    color: rgba(247, 243, 238, 0.62);
    margin-bottom: 18px;
  }
  .page-collective .after-copy p:last-of-type { margin-bottom: 32px; }
  .page-collective .after-card {
    background: rgba(247, 243, 238, 0.04);
    border: 1px solid rgba(247, 243, 238, 0.1);
    padding: 40px;
  }
  .page-collective .after-sessions { list-style: none; display: flex; flex-direction: column; }
  .page-collective .after-session {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(247, 243, 238, 0.07);
    align-items: baseline;
  }
  .page-collective .after-session:last-child { border-bottom: none; }
  .page-collective .after-session-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--blush);
    opacity: 0.5;
    flex-shrink: 0;
    width: 28px;
  }
  .page-collective .after-session-title {
    font-size: 13.5px;
    color: rgba(247, 243, 238, 0.65);
    line-height: 1.5;
  }
  .page-collective .after-session-title em {
    font-style: italic;
    color: var(--blush);
    opacity: 0.85;
  }
  .page-collective .after-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* --on-ink-soft replaces 0.3 alpha (was hard 1.4.3 fail). */
    color: var(--on-ink-soft);
    margin-bottom: 20px;
  }

  /* Compass hero icon (replaces the inline SVG that lived here). The PNG has
     a near-black background; mix-blend-mode lifts the strokes onto the ink
     hero without a visible image bezel. */
  .page-compass .hero-graphic img {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    mix-blend-mode: screen;
  }

  /* Programmes section (NAC landing only) */
  .page-collective #programmes { background: var(--bone-deep); }
  .page-collective .programmes-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
  }
  .page-collective .programmes-header h2 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: var(--ink);
    margin: 10px 0 16px;
  }
  .page-collective .programmes-header h2 em {
    font-style: italic;
    color: var(--wine);
    font-variation-settings: "SOFT" 60;
  }
  .page-collective .programmes-header p {
    font-size: 16px;
    line-height: 1.7;
    /* --ink-soft replaces 0.6 alpha (was 4.36:1 — borderline 1.4.3). */
    color: var(--ink-soft);
  }
  .page-collective .programmes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .page-collective .programme-card {
    background: var(--bone);
    padding: 48px 40px 44px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .page-collective .programme-card--featured {
    background: var(--ink);
  }
  .page-collective .programme-card-header {
    margin-bottom: 24px;
  }
  .page-collective .programme-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--wine);
    display: block;
    margin-bottom: 14px;
  }
  .page-collective .programme-card--featured .programme-tag {
    /* Full blush — 0.7 opacity dropped 11px mono below 1.4.3 AA on --ink. */
    color: var(--blush);
  }
  .page-collective .programme-name {
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.0;
    letter-spacing: -1.5px;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .page-collective .programme-name em {
    font-style: italic;
    color: var(--aubergine);
    font-variation-settings: "SOFT" 80;
  }
  .page-collective .programme-card--featured .programme-name {
    color: var(--bone);
  }
  .page-collective .programme-card--featured .programme-name em {
    color: var(--blush);
  }
  .page-collective .programme-price {
    font-size: 28px;
    letter-spacing: -0.5px;
    color: var(--aubergine);
    font-weight: 300;
  }
  .page-collective .programme-price span {
    font-size: 15px;
    /* --ink-soft replaces opacity-dim — was 3.42:1 (1.4.3 fail). */
    color: var(--ink-soft);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
  }
  .page-collective .programme-card--featured .programme-price {
    color: var(--blush);
  }
  .page-collective .programme-desc {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(44, 25, 34, 0.72);
    margin-bottom: 28px;
  }
  .page-collective .programme-card--featured .programme-desc {
    color: rgba(247, 243, 238, 0.62);
  }
  .page-collective .programme-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
  }
  .page-collective .programme-includes li {
    font-size: 14px;
    line-height: 1.5;
    /* --ink-soft replaces 0.7 alpha (kept ≥8:1, fixes the perceived dim
       and stays consistent with the established token pattern). */
    color: var(--ink-soft);
    padding-left: 18px;
    position: relative;
  }
  .page-collective .programme-includes li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--wine);
    font-size: 12px;
  }
  .page-collective .programme-card--featured .programme-includes li {
    /* --on-ink-mid replaces 0.58 alpha (was 1.4.3 fail at 14px on
       --aubergine featured card; 10.7:1 against --ink, ~6.99:1 here). */
    color: var(--on-ink-mid);
  }
  .page-collective .programme-card--featured .programme-includes li::before {
    color: var(--blush);
    opacity: 0.6;
  }
  .page-collective .programme-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    /* --ink-soft replaces 0.4 alpha (was 1.4.3 fail on 11px text). */
    color: var(--ink-soft);
    margin-bottom: 24px;
  }
  .page-collective .programme-card--featured .programme-meta {
    /* --on-ink-soft replaces 0.35 alpha (was 1.4.3 fail on small text). */
    color: var(--on-ink-soft);
  }

  /* Collective responsive */
  @media (max-width: 860px) {
    .page-collective .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .page-collective .hero-image { display: none; }
    .page-collective .hero-text { padding-bottom: 0; }
    .page-collective .for-inner,
    .page-collective .about-inner,
    .page-collective .after-inner { grid-template-columns: 1fr; gap: 40px; }
    .page-collective .workshop-inner { grid-template-columns: 1fr; }
    .page-collective .expect-point { grid-template-columns: 1fr; gap: 12px; }
    .page-collective .schedule-row { grid-template-columns: 76px 1fr; gap: 20px; }
    .page-collective .about-photo-wrap { position: static; }
    .page-collective .about-photo-frame { max-width: 260px; }
    .page-collective .hero-actions { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 768px) {
    .page-collective .programmes-grid { grid-template-columns: 1fr; }
    .page-collective .programme-card { padding: 36px 28px; }
  }


  /* ─── First Light specifics ────────────────────────────────
     Was first-light.css. Loaded after .page-collective so its
     #hero override actually wins, preserving the original
     load order (programme → collective → first-light). */

  /* Hero: collective.css would otherwise clip the stats bar via
     overflow:hidden + padding:112px 0 0. */
  .page-first-light #hero {
    padding: 100px 0 88px;
    overflow: visible;
  }
  /* Hero image replaces the SVG graphic used on Compass. */
  .page-first-light .hero-graphic img {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 2px;
  }


  /* ─── Legal pages (privacy, future terms, etc) ──────────────
     Long-form text page treatment. Anchored to a narrow measure
     so the body type stays readable, with a banded header that
     matches the other page-* hero rhythms. */
  .page-privacy {
    background: var(--bone);
  }
  .page-privacy .legal-page {
    color: var(--ink);
  }
  .page-privacy .legal-header {
    background: var(--bone-deep);
    padding: 56px 0 48px;
    border-bottom: 1px solid var(--rule);
  }
  .page-privacy .legal-header .container {
    max-width: 760px;
  }
  .page-privacy .legal-header h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 12px 0 16px;
  }
  .page-privacy .legal-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Full wine instead of opacity 0.75 — the dim version dropped to
       ~4.16:1 on --bone-deep, just below 1.4.3 AA for 11px text. */
    color: var(--wine);
    margin: 0;
  }
  .page-privacy .legal-meta-label {
    /* --ink-soft replaces ink+0.5 opacity (was 1.4.3 fail at 3.15:1). */
    color: var(--ink-soft);
    margin-right: 8px;
  }
  .page-privacy .legal-body {
    max-width: 720px;
    padding: 56px 24px 96px;
  }
  .page-privacy .legal-section + .legal-section {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
  }
  .page-privacy .legal-section h2 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .page-privacy .legal-section p {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(44, 25, 34, 0.84);
    margin: 0 0 16px;
  }
  .page-privacy .legal-section p:last-child {
    margin-bottom: 0;
  }
  .page-privacy .legal-section a {
    color: var(--aubergine);
    text-decoration: none;
    border-bottom: 1px solid var(--blush);
    transition: border-color 0.18s;
  }
  .page-privacy .legal-section a:hover {
    border-color: var(--aubergine);
  }
  .page-privacy .legal-section code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--bone-deep);
    padding: 2px 6px;
    border-radius: 2px;
  }
  .page-privacy .legal-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }
  .page-privacy .legal-list li {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(44, 25, 34, 0.84);
    padding: 6px 0 6px 24px;
    position: relative;
  }
  .page-privacy .legal-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--wine);
  }
  .page-privacy .legal-footer {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
  }
  @media (max-width: 640px) {
    .page-privacy .legal-header { padding: 40px 0 32px; }
    .page-privacy .legal-body { padding: 40px 20px 72px; }
    .page-privacy .legal-section + .legal-section {
      margin-top: 32px;
      padding-top: 32px;
    }
  }
}