/* ============================================================
   Blue Hybrid, Fable build
   Source of truth: DESIGN.md (frozen). Tokens mirror section 9.
   Copy comes from COPY.md verbatim. No third-party requests.
   ============================================================ */

/* ---------- Fonts (local, variable) ----------
   Latin-subset woff2 built from the brand variable TTFs in
   design/brandassets/Fonts/Inter/Variable/ (axes preserved).
   The italic face only downloads on pages that use italic text. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens (DESIGN.md section 9) ---------- */
:root {
  /* Brand colour */
  --bh-blue: #0074fe;
  --bh-blue-deep: #003584;
  --bh-sky: #68b4d6;
  --bh-mist: #d8ecf3;
  --bh-ink: #000e11;
  --bh-white: #fcfcfc;
  --bh-silver: #d8d8d8;
  --surface-card: #ffffff;

  /* Semantic (light) */
  --canvas: var(--bh-white);
  --surface: var(--surface-card);
  --recessed: var(--bh-mist);
  --text: var(--bh-ink);
  --text-muted: rgba(0, 14, 17, 0.66);
  --border: var(--bh-silver);
  --action: var(--bh-blue);
  --action-hover: var(--bh-blue-deep);
  /* D17 (locked): accessibility guardrail for text below 18px on light
     backgrounds and for small-label CTA fills. Not a brand colour change;
     #0074fe stays the action colour for 18px+ text and all non-text uses. */
  --action-deep: var(--bh-blue-deep);

  /* Dark-surface counterparts */
  --text-on-dark: var(--bh-white);
  --text-muted-on-dark: rgba(252, 252, 252, 0.72);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Gradient (brand 5-stop, 135deg per D11) */
  --bh-gradient: linear-gradient(135deg, #d8ecf3 0%, #68b4d6 33%, #0074fe 56%, #003584 80%, #000e11 100%);

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-body: 200;   /* ExtraLight, lead body 18px and up only (D6) */
  --fw-text: 300;   /* Light, running text */
  --fw-head: 400;   /* Regular, headlines and buttons */

  --text-hero: clamp(44px, 5.6vw, 72px);  --lh-hero: 1.05; --tr-hero: -0.02em;
  --text-h1: clamp(36px, 4.4vw, 56px);    --lh-h1: 1.08;   --tr-h1: -0.02em;
  --text-h2: clamp(28px, 3.2vw, 40px);    --lh-h2: 1.10;   --tr-h2: -0.015em;
  --text-h3: clamp(22px, 2.2vw, 28px);    --lh-h3: 1.20;   --tr-h3: -0.01em;
  --text-lead: clamp(18px, 1.6vw, 20px);  --lh-lead: 1.40;
  --text-body-lg: 18px; --lh-body: 1.50;
  --text-body: 16px;
  --text-sm: 14px;
  --text-eyebrow: 13px; --tr-eyebrow: 0.08em;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-30: 120px; --space-40: 160px;

  /* Layout */
  --container: 1200px;
  --section-gap: 96px;
  --nav-h: 64px;

  /* Radius */
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-pill: 999px;

  /* Elevation (floating and media only, D9) */
  --shadow-nav: 0 2px 8px rgba(0, 14, 17, 0.08);
  --shadow-card: 0 10px 30px rgba(0, 14, 17, 0.10);

  /* Motion (D15) */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 100ms;
  --t-med: 240ms;
  --t-slow: 320ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--text-body);
  font-weight: var(--fw-text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--action-deep); text-decoration: none; } /* D17: inline links render below 18px */
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-head); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
::selection { background: rgba(0, 116, 254, 0.16); color: var(--bh-ink); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Visually hidden, available to assistive tech */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Type system ---------- */
.display { font-size: var(--text-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); font-weight: var(--fw-head); text-wrap: balance; }
.h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); text-wrap: balance; }
.h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); text-wrap: balance; }
.h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
.lead { font-size: var(--text-lead); line-height: var(--lh-lead); letter-spacing: -0.005em; font-weight: var(--fw-text); color: var(--text-muted); }
.lead strong { color: var(--text); font-weight: var(--fw-head); }
.lead--xl { font-size: clamp(20px, 2vw, 24px); font-weight: var(--fw-body); color: var(--text); }
.body-lg { font-size: var(--text-body-lg); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--text); }
.body { font-size: var(--text-body); font-weight: var(--fw-text); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); line-height: 1.45; }
.kw { color: var(--action); }
.strong { font-weight: var(--fw-head); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-eyebrow); font-weight: var(--fw-head);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--action-deep); /* D17: 13px text */ line-height: 1.2;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--action); flex: none; }
.on-dark .eyebrow { color: var(--bh-sky); }
.on-dark .eyebrow::before { background: var(--bh-sky); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: 800px; margin-inline: auto; }
.container--reading { max-width: 720px; }

/* Measure and spacing utilities (instead of one-off inline styles) */
.mw-620 { max-width: 620px; }
.mw-640 { max-width: 640px; }
.mw-680 { max-width: 680px; }
.mw-720 { max-width: 720px; }
.mw-780 { max-width: 780px; }
.mw-800 { max-width: 800px; }
.mw-860 { max-width: 860px; }
.mw-880 { max-width: 880px; }
.mw-940 { max-width: 940px; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.text-soft { color: rgba(0, 14, 17, 0.72); }
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--space-16); }
.section--top-tight { padding-top: var(--space-16); }
.section--legal { padding-block: var(--space-16) var(--space-24); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.stack-12 > * + * { margin-top: var(--space-12); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.split--40-60 { grid-template-columns: 2fr 3fr; }
.split--60-40 { grid-template-columns: 3fr 2fr; }
.split--middle { align-items: center; }
.split--tight { gap: var(--space-12); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

/* Bands (section rhythm, D3) */
.band-light { background: var(--canvas); }
.band-white { background: var(--surface); }
.band-mist { background: var(--recessed); }
.band-dark { background: var(--bh-ink); }
.on-dark { color: var(--text-on-dark); }
.on-dark .lead, .on-dark .muted { color: var(--text-muted-on-dark); }
.on-dark .body-lg { color: var(--text-on-dark); }
.band-white + .band-white, .band-light + .band-light,
.band-light + .band-white, .band-white + .band-light { border-top: 1px solid var(--border); } /* D20: the light-to-white seam was invisible */

/* ---------- Blueprint grid motif ---------- */
/* Fine drafting grid. On light: ink hairlines at very low alpha.
   On the gradient or dark: white hairlines. One atmospheric use per page. */
.bp-grid { position: relative; overflow: hidden; }
/* The grid recedes further while the diagnostic form is the active step */
.bp-grid.is-form-step::before { opacity: 0.45; }
.bp-grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(252,252,252,0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,252,252,0.09) 1px, transparent 1px),
    linear-gradient(to right, rgba(252,252,252,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,252,252,0.05) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}
.bp-grid--ink::before {
  background:
    linear-gradient(to right, rgba(0,14,17,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,14,17,0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(0,14,17,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,14,17,0.028) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 30%, transparent 78%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: var(--fw-head); line-height: 1;
  padding: 12px 22px; border-radius: var(--radius-pill);
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 15px 30px; }
/* D17: 15px labels need the deep fill (11.1:1); hover deepens to ink */
.btn--primary { background: var(--action-deep); color: var(--bh-white); }
.btn--primary:hover { background: var(--bh-ink); }
/* On gradient or dark backdrops the primary CTA becomes a light pill (DESIGN.md section 2 rule) */
.on-dark .btn--primary { background: var(--bh-white); color: var(--bh-ink); }
.on-dark .btn--primary:hover { background: var(--bh-mist); color: var(--bh-ink); }
.btn--secondary {
  border: 1px solid var(--bh-ink); border-radius: var(--radius-control);
  color: var(--bh-ink); background: transparent;
}
.btn--secondary:hover { background: var(--bh-ink); color: var(--bh-white); }
.on-dark .btn--secondary { border-color: var(--bh-white); color: var(--bh-white); }
.on-dark .btn--secondary:hover { background: var(--bh-white); color: var(--bh-ink); }
.btn--link {
  padding: 0; border-radius: 4px; color: var(--action-deep); gap: 6px; font-weight: var(--fw-head); /* D17: 15px */
}
.btn--link .arrow { transition: transform var(--t-med) var(--ease); }
.btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn--link:hover .arrow { transform: translateX(4px); }
.on-dark .btn--link { color: var(--bh-sky); }

.cta-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.cta-row--center { justify-content: center; }
.cta-sub { font-size: var(--text-sm); color: var(--text-muted); }
.on-dark .cta-sub { color: var(--text-muted-on-dark); }

/* ---------- Header / nav (D10) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header.is-scrolled {
  background: rgba(252, 252, 252, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-nav);
}
.nav { height: var(--nav-h); display: flex; align-items: center; gap: var(--space-8); }
/* 30px tall renders the horizontal logo ~97px wide, comfortably above the 80px brand minimum */
.nav__logo img { height: 30px; width: auto; min-width: 80px; }
.nav__links { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.nav__link {
  font-size: 15px; font-weight: var(--fw-head); color: var(--bh-ink);
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--action-deep); } /* D17: 15px */
.nav__link.is-active { color: var(--action-deep); }
.nav__cta { margin-left: var(--space-2); }
.nav__toggle { display: none; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 59;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--canvas); border-bottom: 1px solid var(--border);
    padding: var(--space-4) 24px var(--space-6);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links .nav__link { padding: 14px 0; font-size: 17px; width: 100%; border-bottom: 1px solid var(--border); }
  .nav__links .nav__link:last-of-type { border-bottom: none; }
  .nav__links .nav__cta { margin: var(--space-4) 0 var(--space-2); }
  .nav__toggle {
    display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto;
    padding: 10px; border-radius: var(--radius-control);
  }
  .nav__toggle span { width: 20px; height: 1.5px; background: var(--bh-ink); transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .site-header:has(.nav__links.is-open) { background: var(--canvas); border-bottom-color: var(--border); }
}

/* ---------- Hero (home) ---------- */
.hero { padding-top: calc(var(--nav-h) + var(--space-20)); padding-bottom: 0; position: relative; }
.hero__copy { max-width: 980px; position: relative; z-index: 1; }
/* Eight words: H1 slot (56px), composed as two lines on desktop */
.hero__title { max-width: 1040px; }
.hero__lead { max-width: 680px; }
.hero__ctas { margin-top: var(--space-8); }

/* The one atmospheric moment (D11): brand gradient stage with drafting grid */
.stage {
  position: relative; overflow: hidden;
  background: var(--bh-gradient);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.stage--hero {
  margin-top: var(--space-16);
  min-height: 400px;
  display: flex; align-items: flex-end;
}
/* Legibility scrim under the tagline, echoing the brand's Multiply photo treatment */
.stage--hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 14, 17, 0.45), transparent 60%);
}
.stage__symbol { z-index: 1; }
.stage__inner { position: relative; z-index: 1; padding: clamp(28px, 4vw, 56px); width: 100%; }
.stage__tagline {
  color: var(--bh-white);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--fw-head);
  max-width: 15ch; text-wrap: balance;
}
.stage__symbol { position: absolute; top: clamp(24px, 4vw, 48px); right: clamp(24px, 4vw, 48px); width: clamp(64px, 9vw, 120px); opacity: 0.95; }
.stage__coords {
  position: absolute; left: clamp(28px, 4vw, 56px); top: clamp(24px, 4vw, 48px);
  color: rgba(252,252,252,0.55); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; gap: 24px;
}
.stage--panel { min-height: 320px; height: 100%; display: flex; align-items: center; justify-content: center; }
.stage--panel .stage__symbol--center { position: static; width: clamp(88px, 10vw, 140px); }

/* ---------- Old way (problem) columns ---------- */
/* A set of failure modes, not a sequence, so no numbering (unlike the lifecycle rail) */
.oldway { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.oldway__item { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.oldway__item h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.005em; margin-bottom: var(--space-3); }
.oldway__item p { color: var(--text-muted); }

/* Recognition list (who it's for) */
.recognise { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.recognise__item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-8);
  font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--text);
  display: flex; gap: 14px; align-items: flex-start;
}
.band-white .recognise__item { background: var(--canvas); }
.recognise__item .tickmark { flex: none; margin-top: 4px; }

/* Tick rows */
.ticks { display: flex; flex-direction: column; }
.tick { display: flex; gap: 12px; align-items: flex-start; padding-block: var(--space-4); }
.tick + .tick { border-top: 1px solid var(--border); }
.tick span { font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--text); }
.tickmark { width: 18px; height: 18px; flex: none; color: var(--action); margin-top: 3px; }
/* Plain variant: quiet supporting rows without tickmarks */
.ticks--plain .tick span { font-size: var(--text-body); font-weight: var(--fw-text); color: var(--text-muted); }
/* Stacked label + value rows (contact page) */
.tick--stack { flex-direction: column; gap: 4px; }
.contact-key { font-size: var(--text-eyebrow); font-weight: var(--fw-head); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.contact-val { letter-spacing: -0.01em; color: var(--action); } /* 22px+: #0074fe stays per D17 */

/* ---------- Lifecycle rail (Diagnose to Run, secure woven in) ---------- */
.rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-8); }
.rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 15px; height: 1px;
  background: linear-gradient(to right, var(--bh-sky), var(--action));
  opacity: 0.55;
}
.rail__step { position: relative; padding-top: var(--space-12); }
.rail__node {
  position: absolute; top: 0; left: 0;
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--canvas); border: 1px solid var(--bh-sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-head); color: var(--action-deep); /* D17: 12px */
}
.band-white .rail__node { background: var(--surface); }
.rail__step--secure .rail__node { background: var(--action-deep); border-color: var(--action-deep); color: var(--bh-white); } /* D17: 12px white label needs the deep fill */
.rail__step h3 { font-size: 20px; letter-spacing: -0.005em; margin-bottom: var(--space-3); }
.rail__step p { color: var(--text-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-8);
}
.band-white .card { background: var(--canvas); }
.card--recessed { background: var(--recessed); border-color: transparent; }
.band-white .card--recessed { background: var(--recessed); }
.card--dark { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-on-dark); border-radius: var(--radius-card); padding: var(--space-8); }

/* Quote */
.quote {
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; letter-spacing: -0.01em;
  font-weight: var(--fw-body); margin: 0;
}
.quote--rule { border-left: 2px solid var(--action); padding-left: var(--space-6); }
.on-dark .quote--rule { border-color: var(--bh-sky); }

/* ---------- Proof story ---------- */
.story { position: relative; padding-left: var(--space-8); }
.story::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.story > * { position: relative; }
.story > * + * { margin-top: var(--space-6); }
.story > *::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-8) - 3.5px); top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--canvas); border: 1px solid var(--bh-sky);
}
.story .story__pivot::before { background: var(--action); border-color: var(--action); }
.story__pivot { font-size: var(--text-body-lg); font-weight: var(--fw-text); }
.story__pivot strong { font-weight: var(--fw-head); }
.story p { color: var(--text-muted); }
.story p.story__open, .story p.story__pivot { color: var(--text); }
.story p.story__open { font-size: var(--text-body-lg); font-weight: var(--fw-body); }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-6) 0; text-align: left;
  font-size: 18px; font-weight: var(--fw-head); letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--action); }
.faq__icon { flex: none; width: 12px; height: 12px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: currentColor; transition: transform var(--t-med) var(--ease);
}
.faq__icon::before { left: 0; right: 0; top: 5.25px; height: 1.5px; }
.faq__icon::after { top: 0; bottom: 0; left: 5.25px; width: 1.5px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--space-6); max-width: 640px; color: var(--text-muted); font-size: var(--text-body); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ---------- Diagnostic flow ---------- */
.flow-step { display: none; }
.flow-step.is-active { display: block; animation: step-in var(--t-slow) var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-12); }
.progress span { width: 36px; height: 2px; border-radius: 2px; background: var(--border); transition: background-color var(--t-med) var(--ease); }
.progress span.done { background: var(--bh-sky); }
.progress span.now { background: var(--action); }

/* Step headings receive programmatic focus on step change; they are not
   interactive, so no focus ring (screen readers still announce them) */
.flow-heading:focus, .flow-heading:focus-visible { outline: none; }

/* Extra breathing room between major questions (48px above, 32px below the hairline) */
.q { padding-block: var(--space-12) var(--space-8); border-top: 1px solid var(--border); }
.q:first-of-type { border-top: none; padding-top: 0; }
.q__label { display: flex; gap: var(--space-4); align-items: baseline; font-size: 19px; font-weight: var(--fw-head); letter-spacing: -0.005em; margin-bottom: var(--space-3); }
.q__n { font-size: var(--text-sm); color: var(--action-deep); font-weight: var(--fw-head); letter-spacing: 0.06em; flex: none; } /* D17: 14px */
.q__hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-6); }
.q__label + .chips, .q__label + .subq, .q__label + .field-grid { margin-top: var(--space-6); }
.subq { font-size: var(--text-sm); font-weight: var(--fw-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.subq:not(:first-of-type) { margin-top: var(--space-6); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 10px 16px; font-size: 15px; font-weight: var(--fw-text); color: var(--bh-ink);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--bh-sky); }
/* D17: selected chips keep the #0074fe border and mist fill; the 15px label reads in deep blue */
.chip.is-selected { border-color: var(--action); background: var(--recessed); color: var(--action-deep); font-weight: var(--fw-head); }

.field { margin-top: var(--space-6); }
.field label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
/* Optional free-text fields sit quieter than the chips: narrower, transparent until focus */
.field--quiet { max-width: 560px; }
.field--quiet .input { background: transparent; }
.field--quiet .input:focus { background: var(--surface); }
/* Contact-capture reassurance (locked copy) with Privacy Policy link */
.q__assure { margin-top: var(--space-4); }
.q__assure a { text-decoration: underline; text-underline-offset: 3px; }
.input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(0, 116, 254, 0.15); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.field-grid .field { margin-top: 0; }

/* Result focus cards */
.focus-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--space-8); transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.focus-card h2 { font-size: 20px; letter-spacing: -0.005em; margin-bottom: var(--space-3); }
.focus-card p { color: var(--text-muted); }
.focus-card.is-lead { border-color: var(--action); background: var(--recessed); }
.focus-card.is-lead p { color: rgba(0, 14, 17, 0.72); }

/* Booking placeholder (in-house, no embed) */
.booking { text-align: center; padding: var(--space-12) var(--space-8); }
.badge {
  display: inline-block; background: var(--recessed); color: var(--bh-blue-deep);
  border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-head);
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px;
}
.pending {
  display: inline-block; color: var(--text-muted); background: var(--surface);
  border: 1px dashed var(--border); padding: 3px 10px; border-radius: 6px;
  font-size: 0.9em; letter-spacing: 0.02em;
}

/* ---------- Method pages ---------- */
.page-hero { padding-top: calc(var(--nav-h) + var(--space-20)); padding-bottom: var(--space-20); position: relative; }
.page-hero__lead { max-width: 720px; }
/* Dense two-column hero (what we do, D21): copy left, pillars figure right,
   so the hero no longer floats a small figure in a tall white field */
.page-hero--dense { padding-bottom: var(--space-12); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--space-16); align-items: center; }
.page-hero__grid .pillars { margin-block: 0; width: 100%; justify-self: end; }

/* Handoff parties list */
.parties { border-top: 1px solid var(--border); }
.party { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--border); align-items: baseline; }
.party__n { font-size: var(--text-sm); font-weight: var(--fw-head); color: var(--action-deep); letter-spacing: 0.08em; } /* D17: 14px */
.party p { font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--text); }
/* Unlabelled set (no sequence, no labels) */
.parties--plain .party { grid-template-columns: 1fr; }
/* On-dark variant (no inline patches) */
.on-dark .parties { border-top-color: var(--border-on-dark); }
.on-dark .party { border-bottom-color: var(--border-on-dark); }
.on-dark .party p { color: var(--bh-white); }
.on-dark .party__n { color: var(--bh-sky); }

/* Loop diagram: the signature visual idea of the brand */
.loop-figure { display: flex; justify-content: center; }
.loop-svg { width: min(460px, 100%); height: auto; }
/* Full-stage setting on the Think.Go. method page */
.loop-svg--lg { width: min(620px, 100%); }
.loop-figure--stage { padding-block: var(--space-4); }

/* The one orchestrated motion moment (D15 timing grammar): the feedback arcs
   draw themselves once when the loop enters view, then the arrowheads appear.
   Gated on html.js so the diagram is complete without JavaScript; the global
   reduced-motion rule disables the transitions so the final state shows
   immediately. */
.js .loop-arc { stroke-dasharray: 380; stroke-dashoffset: 380; transition: stroke-dashoffset var(--t-slow) var(--ease); }
.js .loop-arc--go { transition-delay: 240ms; }
.js .loop-head { opacity: 0; transition: opacity var(--t-med) var(--ease); }
.js .loop-head--think { transition-delay: 280ms; }
.js .loop-head--go { transition-delay: 540ms; }
.js .loop-figure.in .loop-arc { stroke-dashoffset: 0; }
.js .loop-figure.in .loop-head { opacity: 1; }

/* ---------- Lifecycle pillars (What We Do intro) ----------
   Five solid stepped blocks restating the lifecycle sentence they sit under:
   not a chart (no tracks, no scale, perfectly even steps), but a foundation
   being built course by course. Fills step through the five brand gradient
   stops (D11), Think (mist, sky) deepening into Go (blue, deep blue, ink).
   The five blocks abut with no gaps (one stepped silhouette, not five bars)
   and sit on a 2px sky-to-blue rail echoing the lifecycle rail line. A
   hairline return arc leaves a node on Run's top and arrows back down into
   Diagnose, labelled with the COPY.md line "Run feeds back into Think" (the
   loop grammar: Run is the operating layer, not the biggest service; the
   Think.Go. loop on the method page stays the signature). This page's one
   orchestrated motion moment (D15 timing grammar): blocks rise once in
   lifecycle order, the return arc draws, labels follow. Gated on html.js so
   the figure is complete without JavaScript; the global reduced-motion rule
   shows the final state immediately. */
.pillars { max-width: 640px; margin-top: var(--space-8); margin-bottom: var(--space-12); pointer-events: none; }
.pillars__stage { position: relative; height: 260px; display: flex; align-items: flex-end; }
.pillars__stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(to right, var(--bh-sky), var(--action)); opacity: 0.5;
}
.pillars__block { flex: 1; min-width: 0; border-radius: var(--radius-control) 0 0 0; transform-origin: bottom; }
.pillars__block:nth-child(1) { height: 28%; background: var(--bh-mist); }
.pillars__block:nth-child(2) { height: 40%; background: var(--bh-sky); }
.pillars__block:nth-child(3) { height: 52%; background: var(--action); }
.pillars__block:nth-child(4) { height: 64%; background: var(--bh-blue-deep); }
.pillars__block:nth-child(5) { height: 76%; background: var(--bh-ink); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.pillars__return { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pillars__return-arc { fill: none; stroke: var(--bh-sky); stroke-width: 1.5; opacity: 0.7; }
.pillars__return-node { fill: var(--bh-sky); opacity: 0.9; }
.pillars__return-head {
  position: absolute; left: calc(10% - 5px); bottom: calc(28% + 4px);
  width: 0; height: 0; opacity: 0.8;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--bh-sky);
}
.pillars__return-label {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: var(--fw-text); color: var(--action-deep); /* D17: sub-18px */
  white-space: nowrap;
}
.pillars__labels { display: flex; }
.pillars__label { flex: 1; min-width: 0; margin-top: var(--space-3); text-align: center; font-size: var(--text-sm); font-weight: var(--fw-head); }
.js .pillars .pillars__block { transform: scaleY(0); transition: transform var(--t-slow) var(--ease); }
.js .pillars .pillars__label { opacity: 0; transition: opacity var(--t-med) var(--ease); }
.js .pillars .pillars__return-arc { stroke-dasharray: 101; stroke-dashoffset: 101; transition: stroke-dashoffset var(--t-slow) var(--ease); transition-delay: 640ms; }
.js .pillars .pillars__return-node { opacity: 0; transition: opacity var(--t-med) var(--ease); transition-delay: 640ms; }
.js .pillars .pillars__return-head { opacity: 0; transition: opacity var(--t-med) var(--ease); transition-delay: 920ms; }
.js .pillars .pillars__return-label { opacity: 0; transition: opacity var(--t-med) var(--ease); transition-delay: 980ms; }
.js .pillars__block:nth-child(2) { transition-delay: 120ms; }
.js .pillars__block:nth-child(3) { transition-delay: 240ms; }
.js .pillars__block:nth-child(4) { transition-delay: 360ms; }
.js .pillars__block:nth-child(5) { transition-delay: 480ms; }
.js .pillars__label:nth-child(1) { transition-delay: 320ms; }
.js .pillars__label:nth-child(2) { transition-delay: 440ms; }
.js .pillars__label:nth-child(3) { transition-delay: 560ms; }
.js .pillars__label:nth-child(4) { transition-delay: 680ms; }
.js .pillars__label:nth-child(5) { transition-delay: 800ms; }
.js .pillars.in .pillars__block { transform: scaleY(1); }
.js .pillars.in .pillars__label { opacity: 1; }
.js .pillars.in .pillars__return-arc { stroke-dashoffset: 0; }
.js .pillars.in .pillars__return-node { opacity: 0.9; }
.js .pillars.in .pillars__return-head { opacity: 0.8; }
.js .pillars.in .pillars__return-label { opacity: 1; }
@media (max-width: 480px) {
  .pillars__stage { height: 190px; }
  .pillars__label { font-size: 12px; }
  .pillars__return-label { font-size: 12px; }
}

/* ---------- Lifecycle: the Blueprint band (what we do, D20-D23) ----------
   One full-bleed mist band carries the five stages as dense ledger rows.
   The white BluePrint brand-extension monolines only read on a tonal
   surface, so mist is the one light palette surface that can host them:
   white drafting lines on blueprint paper. A slim sticky operating strip
   (aria-hidden, JS-built from the rows) carries the D19 scroll mechanics
   horizontally; the per-row "You get" cards are the visible deliverables
   on every viewport and without JavaScript. */
/* overflow: clip, not hidden: hidden would make the band a scroll container
   and the operating strip's position: sticky would anchor to it instead of
   the viewport, never sticking */
.lc-band { position: relative; overflow: clip; padding-block: var(--space-16) var(--space-24); }
.lc-band__art {
  position: absolute; top: -4%; right: -8%; width: min(52vw, 760px);
  opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 95%);
  mask-image: linear-gradient(to left, #000 45%, transparent 95%);
}
.lc-band__art img { width: 100%; height: auto; }
.lc-band .container { position: relative; z-index: 1; }

/* Operating strip: desktop-only enhancement, shown once JS has built it */
.lc-strip { display: none; }

/* Ledger rows */
.lc__steps { list-style: none; margin: 0; padding: 0; }
.lc__step {
  display: grid; grid-template-columns: 96px minmax(0, 1.1fr) minmax(300px, 0.9fr);
  column-gap: var(--space-12); align-items: start; padding-block: var(--space-8);
}
.lc__step + .lc__step { border-top: 1px solid rgba(0, 53, 132, 0.16); } /* silver hairlines vanish on mist */
.lc__num {
  font-size: clamp(36px, 4vw, 52px); line-height: 1; font-weight: var(--fw-head);
  color: var(--bh-blue-deep); font-variant-numeric: tabular-nums;
}
/* Ignition: numerals rest quiet and reach full strength as the reader passes
   them (scroll state feedback, D19 grammar); Secure starts at full strength
   (woven in, never boxed off). No-JS shows every numeral at full strength. */
html.lcx .lc__num { opacity: 0.32; transition: opacity var(--t-med) var(--ease); }
html.lcx .lc__step.is-passed .lc__num,
html.lcx .lc__step--secure .lc__num { opacity: 1; }
.lc__get { align-self: center; }
.band-mist .card { background: var(--surface); }
.lc__get .card { position: relative; padding: var(--space-6) var(--space-8); }
.lc__get .card p { color: rgba(0, 14, 17, 0.78); font-size: var(--text-body); }
.lc__get .card .lc__get-label { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--bh-blue-deep); font-weight: var(--fw-head); margin-bottom: var(--space-2); }

/* Registration marks (D24): drafting crop marks in sky (the accent's
   small-details role) just outside the card corners mark the deliverable
   as the drafted artifact on the blueprint. They fade in after the card
   lands, deepen to the ignited blue when the reader passes the stage, and
   extend outward on hover (100ms feedback grammar). */
.lc__marks { position: absolute; inset: -9px; pointer-events: none; }
.lc__marks i { position: absolute; width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.lc__marks i::before, .lc__marks i::after {
  content: ''; position: absolute; background: var(--bh-sky);
  transition: background-color var(--t-med) var(--ease);
}
.lc__marks i::before { width: 14px; height: 1.5px; }
.lc__marks i::after { width: 1.5px; height: 14px; }
.lc__marks .m-tl { top: 0; left: 0; }
.lc__marks .m-tl::before { top: 0; left: 0; }
.lc__marks .m-tl::after { top: 0; left: 0; }
.lc__marks .m-tr { top: 0; right: 0; }
.lc__marks .m-tr::before { top: 0; right: 0; }
.lc__marks .m-tr::after { top: 0; right: 0; }
.lc__marks .m-bl { bottom: 0; left: 0; }
.lc__marks .m-bl::before { bottom: 0; left: 0; }
.lc__marks .m-bl::after { bottom: 0; left: 0; }
.lc__marks .m-br { bottom: 0; right: 0; }
.lc__marks .m-br::before { bottom: 0; right: 0; }
.lc__marks .m-br::after { bottom: 0; right: 0; }
/* Ignition follows the row state (same system as the numerals) */
.lc__step.is-passed .lc__marks i::before,
.lc__step.is-passed .lc__marks i::after { background: var(--action-deep); }
/* Hover: marks extend outward and take the action colour */
.lc__get .card:hover .m-tl { transform: translate(-3px, -3px); }
.lc__get .card:hover .m-tr { transform: translate(3px, -3px); }
.lc__get .card:hover .m-bl { transform: translate(-3px, 3px); }
.lc__get .card:hover .m-br { transform: translate(3px, 3px); }
.lc__get .card:hover .lc__marks i::before,
.lc__get .card:hover .lc__marks i::after { background: var(--action); }
/* Entrance: marks follow the card into view (reveal--seq lands the card at
   140ms; the marks fade in after it) */
.js .reveal--seq .lc__marks { opacity: 0; transition: opacity var(--t-med) var(--ease) 320ms; }
.js .reveal--seq.in .lc__marks { opacity: 1; }

@media (min-width: 1025px) {
  html.lcx .lc-strip {
    display: flex; align-items: flex-start; gap: var(--space-8);
    position: sticky; top: var(--nav-h); z-index: 5;
    background: var(--recessed);
    padding-block: var(--space-4);
    border-bottom: 1px solid rgba(0, 53, 132, 0.14);
    margin-bottom: var(--space-8);
  }
  .lc-strip__inner { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); }
  .lc-strip__track {
    position: absolute; left: 15px; right: 15px; top: 15px; height: 1px;
    background: linear-gradient(to right, var(--bh-sky), var(--action)); opacity: 0.55;
  }
  .lc-strip__fill {
    position: absolute; left: 15px; top: 14px; height: 2px; width: 0;
    background: linear-gradient(to right, var(--bh-sky), var(--action));
    transition: width var(--t-slow) var(--ease);
  }
  .lc-strip__node { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .lc-strip__dot {
    width: 31px; height: 31px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--bh-sky);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: var(--fw-head); color: var(--action-deep); /* D17: 12px */
    transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
  }
  .lc-strip__node.is-passed .lc-strip__dot { background: var(--action-deep); border-color: var(--action-deep); color: var(--bh-white); } /* D17 */
  .lc-strip__word { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); font-weight: var(--fw-head); color: var(--bh-blue-deep); } /* D17 */
  .lc-strip__count { padding-top: 7px; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
}

/* Gradual text (D23, this page only): each row's copy rises first and its
   deliverable card follows 140ms later; rows cascade because each one is
   observed individually by the existing reveal observer. The row container
   stops animating itself (higher specificity than .js .reveal). */
.js .reveal.reveal--seq { opacity: 1; transform: none; }
.js .reveal--seq > .stack-4,
.js .reveal--seq > .lc__get {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js .reveal--seq > .lc__get { transition-delay: 140ms; }
.js .reveal--seq.in > .stack-4,
.js .reveal--seq.in > .lc__get { opacity: 1; transform: none; }
.js .reveal.reveal-d2 { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal--seq > .stack-4, .reveal--seq > .lc__get { opacity: 1 !important; transform: none !important; }
  .reveal--seq .lc__marks { opacity: 1 !important; }
}

/* ---------- Secure foundation band ---------- */
.secure-band { position: relative; overflow: hidden; }
.secure-band__veil {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--bh-gradient);
  -webkit-mask-image: radial-gradient(90% 130% at 88% 50%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 72%);
  mask-image: radial-gradient(90% 130% at 88% 50%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 72%);
  opacity: 0.9;
}
.secure-band__symbol {
  position: absolute; right: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-50%);
  width: clamp(90px, 12vw, 170px); opacity: 0.9; pointer-events: none;
}
.secure-band__tagline {
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
  font-weight: var(--fw-head); color: var(--bh-white); text-wrap: balance;
}
.secure-band .container { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bh-ink); color: var(--text-on-dark); padding-block: var(--space-20) var(--space-12); border-top: 1px solid var(--border-on-dark); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-16); padding-bottom: var(--space-16); }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo .fl-sym { height: 34px; width: auto; min-width: 32px; } /* keeps the symbol above its 32px brand minimum */
.footer-logo .fl-word { height: 19px; width: auto; }
.footer-tag { margin-top: var(--space-6); font-size: var(--text-body-lg); font-weight: var(--fw-body); color: var(--text-muted-on-dark); max-width: 30ch; }
.footer-cta { margin-top: var(--space-8); }
.footer-col h2 { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--text-muted-on-dark); margin-bottom: var(--space-6); font-weight: var(--fw-head); }
.footer-col a, .footer-col p, .footer-col span { display: block; color: var(--bh-white); font-size: 15px; font-weight: var(--fw-text); padding-block: 7px; }
.footer-col a:hover { color: var(--bh-sky); }
.footer-col .footer-muted { color: var(--text-muted-on-dark); }
/* Inactive footer item (no URL yet): visibly non-interactive, note shown in place */
.footer-inactive { cursor: default; }
.footer-col .footer-inactive .footer-inactive__note {
  display: block; padding: 2px 0 0;
  font-size: 12px; color: rgba(252, 252, 252, 0.45);
}
.footer-bottom { border-top: 1px solid var(--border-on-dark); padding-top: var(--space-8); display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.footer-legal { font-size: 13px; color: var(--text-muted-on-dark); max-width: 62ch; line-height: 1.6; }
.footer-links { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.footer-links a, .footer-links span { font-size: 13px; color: var(--text-muted-on-dark); }
.footer-links a:hover { color: var(--bh-white); }

/* ---------- Reveals (D15, rationed) ----------
   One calm block-level entrance per content group; the per-item stagger
   system was removed so the Think.Go. loop draw stays the only orchestrated
   moment. Gated on html.js so content is never hidden without JavaScript. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Media (D12): one human brand moment ----------
   The photograph asset already carries the brand gradient treatment
   (Hue + Multiply) from design/brandassets/Photographic Style/People/. */
.media-frame { margin: 0; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); max-width: 440px; justify-self: end; }
.media-frame--portrait { aspect-ratio: 4 / 5; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Legal prose ---------- */
.prose h2 { font-size: var(--text-h3); letter-spacing: var(--tr-h3); margin: var(--space-12) 0 var(--space-4); }
.prose p { margin-bottom: var(--space-4); color: var(--text-muted); }
.prose ul { margin: 0 0 var(--space-4); padding-left: 22px; color: var(--text-muted); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--bh-sky); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .oldway { grid-template-columns: 1fr; gap: var(--space-6); }
  .lc__step { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-6); }
  .lc__get { grid-column: 1 / -1; align-self: auto; margin-top: var(--space-4); }
  .lc__num { font-size: 32px; padding-top: 2px; }
}
@media (max-width: 900px) {
  :root { --section-gap: 64px; }
  .page-hero__grid { grid-template-columns: 1fr; row-gap: var(--space-12); }
  .page-hero__grid .pillars { justify-self: start; }
  .split, .split--40-60, .split--60-40 { grid-template-columns: 1fr; gap: var(--space-12); }
  .grid-2 { grid-template-columns: 1fr; }
  .recognise { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; gap: var(--space-8); }
  .rail::before { left: 15px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: linear-gradient(to bottom, var(--bh-sky), var(--action)); }
  .rail__step { padding-top: 0; padding-left: var(--space-16); }
  .rail__node { top: 0; }
  .field-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-12); }
  .stage--hero { min-height: 340px; }
  .media-frame { justify-self: start; max-width: 400px; }
  .secure-band__symbol { display: none; }
  .secure-band__veil { -webkit-mask-image: radial-gradient(140% 90% at 50% 108%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%); mask-image: radial-gradient(140% 90% at 50% 108%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%); }
}
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .lc-band__art { display: none; }
  .lc__step { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .lc__num { font-size: 28px; padding-top: 0; }
  .hero { padding-top: calc(var(--nav-h) + var(--space-12)); }
  .stage__inner { padding: 24px; }
  .stage__symbol { width: 56px; top: 20px; right: 20px; }
  .booking { padding: var(--space-8) var(--space-6); }
  .cta-row { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .cta-row--center { align-items: center; }
  .party { grid-template-columns: 40px 1fr; gap: var(--space-4); }
  .parties--plain .party { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  /* Long CTA labels ("Book your Blueprint Call (30 minutes)") wrap instead of clipping */
  .btn { white-space: normal; line-height: 1.3; text-align: center; }
}