/* ================================================================
   Averon V6 — Function Health's engineering, Averon's identity.
   Layers on top of modern.css + landing-premium.css for body.site-v6.
   ================================================================ */

/* ---- 1 · Self-hosted type (no Google Fonts round-trip) ---- */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/chivo-mono-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- 2 · Fluid token system: one interpolation, 23.5rem -> 90rem ----
   (The FH formula: slope = (max-min)/66.5 * 100 vw.) */
body.site-v6 {
  --fl-s4: clamp(.75rem, .3759vw + .6617rem, 1rem);
  --fl-s7: clamp(1.5rem, .7519vw + 1.3233rem, 2rem);
  --fl-s9: clamp(2.5rem, 1.5038vw + 2.1466rem, 3.5rem);
  --fl-s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem);
  --fl-s13: clamp(4.5rem, 3.7594vw + 3.6165rem, 7rem);
  --fl-h1: clamp(3.375rem, 4.3233vw + 2.359rem, 6.25rem);   /* 54 -> 100px */
  --fl-h2: clamp(2.25rem, 1.8797vw + 1.8083rem, 3.5rem);     /* 36 -> 56px  */
  --fl-h3: clamp(1.875rem, 1.0902vw + 1.6188rem, 2.75rem);   /* 30 -> 44px  */
  --fl-h4: clamp(1.5rem, .6767vw + 1.341rem, 2.0625rem);     /* 24 -> 33px  */
  --fl-lede: clamp(1.0625rem, .282vw + .9962rem, 1.25rem);
  --fl-radius-xl: clamp(1rem, .7519vw + .8233rem, 1.5rem);
  --sect: var(--fl-s13);
}
body.site-v6 .section { padding-block: calc(var(--fl-s13) / 1.55); }
/* Headings set their own leading once. Without this, body's 1.65 leaks into
   any subhead that declares a size and no line-height. Set at 1.15 so it
   agrees with the explicit per-selector values rather than fighting them. */
body.site-v6 :is(h1, h2, h3, h4) { line-height: 1.15; }
body.site-v6 .doc-head { margin-bottom: var(--fl-s9); }
body.site-v6 .doc-title { font-size: var(--fl-h2); }

/* ---- 3 · The type register shift (FH's inversion):
   hero headline becomes LIGHT sans at lh .95; Marcellus stays the
   flourish voice — stats, pull-quotes, section serif moments. ---- */
body.site-v6 .hero-title {
  font-family: "Manrope", -apple-system, sans-serif;
  font-weight: 300;
  font-size: var(--fl-h1);
  line-height: .95;
  letter-spacing: -.028em;
  text-wrap: balance;
}
body.site-v6 .hero-sub { font-size: var(--fl-lede); max-width: 44ch; }
body.site-v6 .hs-num { font-family: "Marcellus", serif; }

/* ---- 4 · Lens hero canvas ---- */
body.site-v6 .hero--photo { isolation: isolate; }
body.site-v6 .lens-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s ease;
}
body.site-v6 .lens-canvas.is-ready { opacity: 1; }
/* keep the photo + scrim beneath as instant paint & WebGL fallback */
body.site-v6 .hero--photo .hero-bg { z-index: -3; }
body.site-v6 .hero--photo .hero-scrim { z-index: -2; opacity: .55; }
body.site-v6 .hero-motion { display: none; }

/* ---- 5 · Draw-in data graphics ---- */
body.site-v6 .dg-ring-wrap { display: flex; align-items: center; gap: 16px; }
body.site-v6 .dg-ring { width: 92px; height: 92px; transform: rotate(-90deg); }
body.site-v6 .dg-ring circle { fill: none; stroke-width: 8; }
body.site-v6 .dg-ring .track { stroke: var(--light-grey, #e8ebed); }
body.site-v6 .dg-ring .arc { stroke: var(--optimal, #0d7978); stroke-linecap: round; }
body.site-v6 .dg-ring-num {
  font-family: "Marcellus", serif; font-size: 30px; color: var(--ink-deep, #17242c);
}
body.site-v6 .dg-range { overflow: visible; }
body.site-v6 .dg-dot { will-change: left, opacity; }
body.site-v6 .dg-bar i { will-change: width; }

/* ---- 6 · Marquee: faster (FH pace), pausable ---- */
body.site-v6 .marquee { animation-duration: 30s; }

/* ---- 7 · Motion toggle pill ---- */
.motion-toggle {
  position: fixed; right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom)); z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Chivo Mono", monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-deep, #17242c);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(18, 38, 48, .12);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(18, 38, 48, .35);
}
.motion-toggle:hover { border-color: var(--petrol, #1779a7); }
.mt-dot { width: 7px; height: 7px; border-radius: 999px; background: #9aa0a8; }
.mt-dot--live { background: var(--optimal, #0d7978); animation: mt-pulse 2s ease-in-out infinite; }
@keyframes mt-pulse { 50% { opacity: .45; } }

/* ---- 8 · The pause bus freezes decorative keyframes ---- */
html[data-motion="paused"] .marquee,
html[data-motion="paused"] .fx-card,
html[data-motion="paused"] .mt-dot--live,
html[data-motion="paused"] .animate-breathing { animation-play-state: paused !important; }

@media (max-width: 640px) {
  .motion-toggle { padding: 7px 11px; font-size: 9px; }
}

/* ---- 9 · Hero legibility: V6 is a photographic hero — copy goes light ---- */
body.site-v6 .hero--photo .kicker,
body.site-v6 .hero--photo .hero-title,
body.site-v6 .hero--photo .hero-sub strong { color: #fff; }
body.site-v6 .hero--photo .hero-sub { color: rgba(255, 255, 255, .82); }
/* the film's bright frames can't be predicted — the copy carries its own ground */
body.site-v6 .hero--photo .kicker { text-shadow: 0 1px 8px rgba(4, 18, 26, .6); }
body.site-v6 .hero--photo .hero-title { text-shadow: 0 2px 18px rgba(4, 18, 26, .45); }
body.site-v6 .hero--photo .hero-reg { color: rgba(255, 255, 255, .5); }
body.site-v6 .hero--photo .text-link--light,
body.site-v6 .hero--photo .text-link { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
body.site-v6 .hero--photo .hero-scrim { opacity: .9; }

/* ---- 10 · Video hero fallback + floating glass navbar (FH pattern) ---- */
body.site-v6 .hero--photo .hero-bg {
  background-image: url("../videos/hero-poster-1.jpg");
}
body.site-v6 .announce { display: none; }
body.site-v6 .nav {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 24px));
  z-index: 800;
  border-radius: 18px;
  background: rgba(250, 252, 253, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(18, 38, 48, 0.08);
  box-shadow: 0 1px 2px rgba(4, 18, 26, 0.08), 0 18px 44px -22px rgba(4, 18, 26, 0.4);
}
body.site-v6 .mobile-menu { z-index: 790; }

/* ---- 11 · Full-viewport video hero, FH layout: copy bottom-left,
        stat dividers bottom-right, nothing below the fold ---- */
body.site-v6 .hero--photo {
  min-height: 100svh;
  padding: 0;
  display: block;
}
body.site-v6 .hero--photo > .container {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(22px, 4.5vh, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
body.site-v6 .hero-copy { max-width: 560px; }
body.site-v6 .hero-title { font-size: clamp(2.6rem, 3.4vw + 1.4rem, 4.5rem); margin-top: 10px; }
body.site-v6 .hero-sub { margin-top: 12px; font-size: 1.04rem; }
/* keep text to the single strong line */
body.site-v6 .hero-sub > *:not(strong) { display: none; }
body.site-v6 .hero-ctas { margin-top: 20px; }
body.site-v6 .hero-price { margin-top: 12px; color: rgba(255, 255, 255, .8); }
body.site-v6 .hero-reg { display: none; }
body.site-v6 .fx-chips { display: none; }

/* stat dividers, bottom-right on the video (FH pattern) */
body.site-v6 .hero-stats {
  position: absolute;
  right: 0; bottom: 0; left: auto; top: auto;
  margin: 0; border: 0; background: none; backdrop-filter: none;
  position: static;            /* it lives inside the flex container row */
}
body.site-v6 .hero-stats .container {
  display: flex; gap: 0; padding: 0; margin: 0; width: auto; max-width: none;
}
body.site-v6 .hs-item { padding: 0 0 6px 26px; }
body.site-v6 .hs-item + .hs-item { border-left: 1px solid rgba(255, 255, 255, 0.25); margin-left: 26px; }
body.site-v6 .hs-num { font-size: clamp(22px, 2vw, 30px); text-shadow: 0 1px 12px rgba(4, 18, 26, 0.4); }
body.site-v6 .hs-cap { font-size: 9px; color: rgba(255, 255, 255, 0.62); max-width: 17ch; }

/* ---- 12 · iOS-glass navbar ---- */
body.site-v6 .nav {
  background: rgba(250, 252, 254, 0.44);
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(4, 18, 26, 0.1),
    0 18px 44px -22px rgba(4, 18, 26, 0.45);
}

@media (max-width: 900px) {
  body.site-v6 .hero--photo > .container { flex-direction: column; align-items: flex-start; gap: 20px; }
  body.site-v6 .hero-title { font-size: clamp(2.3rem, 9vw, 3rem); }
  body.site-v6 .hero-stats .container { gap: 0; }
  body.site-v6 .hs-item { padding-left: 16px; }
  body.site-v6 .hs-item + .hs-item { margin-left: 16px; border-left: 1px solid rgba(255,255,255,.25); border-top: 0; padding-left: 16px; }
  body.site-v6 .hs-cap { font-size: 8px; }
}

/* ---- 13 · Monochrome-white nav over the film; colour returns on menu open ---- */
body.site-v6 .nav {
  background: rgba(12, 24, 32, 0.38);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 44px -22px rgba(4, 18, 26, 0.5);
  color: #fff;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
body.site-v6 .nav .nav-link { color: rgba(255, 255, 255, 0.88); }
body.site-v6 .nav .nav-link:hover { color: #fff; }
body.site-v6 .nav .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
body.site-v6 .nav .btn-ghost:hover { border-color: #fff; }
body.site-v6 .nav-burger { color: #fff; }
body.site-v6 .nav-burger span { background: #fff; }
/* the emblem goes monochrome: white-glass disc, white network */
body.site-v6:not(.menu-open) .nav-logo-svg circle[fill="#3999C7"] {
  fill: rgba(255, 255, 255, 0.2);
  transition: fill .35s ease;
}
/* menu open: the pill lightens and the mark returns to brand colour */
body.site-v6.menu-open .nav {
  background: rgba(250, 252, 254, 0.86);
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  border-color: rgba(18, 38, 48, 0.08);
  color: var(--ink-deep, #17242c);
}
body.site-v6.menu-open .nav .nav-link { color: var(--ink-deep, #17242c); }
body.site-v6.menu-open .nav-burger { color: var(--ink-deep, #17242c); }
body.site-v6.menu-open .nav-burger span { background: var(--ink-deep, #17242c); }
body.site-v6.menu-open .nav-logo-svg circle[fill="#3999C7"] { fill: #3999C7; }

/* the menu itself: iOS glass sheet sliding under the pill */
body.site-v6 .mobile-menu {
  background: rgba(250, 252, 254, 0.78);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
}

/* ---- 14 · FINAL nav + menu: Apple dark glass (id-specificity override) ---- */
body.site-v6 #nav {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 24px));
  z-index: 800;
  border-radius: 18px;
  background: rgba(16, 26, 34, 0.3);
  backdrop-filter: blur(20px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 44px -22px rgba(4, 18, 26, 0.55);
  color: #fff;
  transition: background .35s ease, color .35s ease;
}
body.site-v6 #nav .nav-link { color: rgba(255, 255, 255, 0.9); }
body.site-v6 #nav .nav-link:hover { color: #fff; }
body.site-v6 #nav .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
body.site-v6 #nav .btn-ghost:hover { border-color: #fff; color: #fff; }
body.site-v6 #nav .member-nav .btn-member-logout,
body.site-v6 #nav .member-nav .btn-member-logout:visited,
body.site-v6 #nav .member-nav .btn-member-logout:hover,
body.site-v6 #nav .member-nav .btn-member-logout:focus-visible {
  color: #f2f7fa;
}
body.site-v6 #nav .nav-burger, body.site-v6 #nav .nav-burger span { color: #fff; background-color: currentColor; }
body.site-v6 #nav .nav-burger { background: none; }
/* monochrome white mark over the film */
body.site-v6 #nav .nav-logo-svg { color: #fff; }
body.site-v6 #nav .nav-logo-svg circle[fill="#3999C7"] { fill: rgba(255, 255, 255, 0.22); transition: fill .35s ease; }
/* menu open: mark returns to brand colour; wordmark stays white on dark glass */
body.site-v6.menu-open #nav .nav-logo-svg circle[fill="#3999C7"] { fill: #3999C7; }

/* the menu sheet: Apple dark glass, contrasting type */
body.site-v6 #mobileMenu {
  background: rgba(12, 18, 26, 0.68);
  backdrop-filter: blur(34px) saturate(1.8);
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
}
body.site-v6 #mobileMenu > a { color: #f2f7fa; border-bottom: 0; }
body.site-v6 #mobileMenu .mm-label { color: var(--sky, #3999c7); }
body.site-v6 #mobileMenu .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
body.site-v6 #mobileMenu .member-menu { border-top: 0; padding-top: 0; }
body.site-v6 #mobileMenu .member-menu > a {
  width: auto;
  justify-content: flex-start;
  padding-inline: 0;
  color: #f2f7fa;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.site-v6 #mobileMenu .member-menu > a:hover,
body.site-v6 #mobileMenu .member-menu > a:focus-visible {
  color: #fff;
  background: transparent;
}

/* ---- 15 · Larger neural mark in the nav (circle only, type unchanged) ---- */
body.site-v6 #nav .nav-logo-svg g[clip-path] {
  transform: translate(-1.5px, -3px) scale(1.24);
  transform-origin: 15.2px 25.3px;
}

/* ---- 16 · Hero stat dividers: presence ---- */
body.site-v6 .hero-stats { background: none; border-radius: 0; padding: 0; }

/* One legibility wash for the whole hero, anchored to the very bottom edge
   of the film and fading upward — no box, so no horizontal seam. */
body.site-v6 .hero--photo::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  height: 58%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(5, 18, 26, .72) 0%,
    rgba(5, 18, 26, .52) 22%,
    rgba(5, 18, 26, .26) 48%,
    rgba(5, 18, 26, .08) 74%,
    transparent 100%);
}
body.site-v6 .hs-num {
  font-size: clamp(27px, 2.5vw, 40px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(4, 18, 26, 0.55), 0 6px 22px rgba(4, 18, 26, 0.5);
}
body.site-v6 .hs-cap {
  font-size: 10.5px;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(4, 18, 26, 0.6);
  max-width: 19ch;
}
body.site-v6 .hs-item { padding-bottom: 10px; }
body.site-v6 .hs-item + .hs-item { border-left-color: rgba(255, 255, 255, 0.42); }

/* ---- 17 · Logo mark: centred on the wordmark axis, never clipped ---- */
body.site-v6 #nav .nav-logo-svg { overflow: visible; }
body.site-v6 #nav .nav-logo-svg g[clip-path] {
  transform: translate(0px, 0.6px) scale(1.22);
  transform-origin: 15.2px 25.3px;
}

/* ---- 18 · Function-width canvas (90rem world) ---- */
body.site-v6 .container { max-width: 1400px; }
body.site-v6 #nav { width: min(1400px, calc(100% - 24px)); }
body.site-v6 .hero--photo > .container { max-width: 1400px; }

/* ---- 19 · Scroll-adaptive nav: dark glass over film, light on paper ---- */
body.site-v6 #nav.nav--onpaper {
  background: rgba(250, 252, 254, 0.9);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-color: var(--stroke-01);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 38px -22px rgba(4, 18, 26, 0.35);
  color: var(--ink-deep, #17242c);
}
body.site-v6 #nav.nav--onpaper .nav-link { color: var(--ink-deep, #17242c); }
body.site-v6 #nav.nav--onpaper .nav-link:hover { color: var(--petrol, #1779a7); }
body.site-v6 #nav.nav--onpaper .btn-ghost { color: var(--ink-deep, #17242c); border-color: rgba(18, 38, 48, 0.28); }
body.site-v6 #nav.nav--onpaper .nav-burger,
body.site-v6 #nav.nav--onpaper .nav-burger span { color: var(--ink-deep, #17242c); }
body.site-v6 #nav.nav--onpaper .nav-logo-svg { color: var(--ink-deep, #17242c); }
body.site-v6 #nav.nav--onpaper .nav-logo-svg circle[fill="#3999C7"] { fill: #3999C7; }
body.site-v6 #nav.nav--onpaper .nav-logo-svg path[stroke="#FFFFFF"] { stroke: #ffffff; }

/* ---- 20 · Partners: logos only, centred (head text removed) ---- */
body.site-v6 .partners-head { display: none; }
body.site-v6 .partners-grid { justify-content: center; gap: 22px clamp(26px, 4vw, 58px); }
body.site-v6 .partners { padding: 34px 0 30px; }

/* ---- 21 · Nav geometry: content to the pill's edges (FH spacing) ----
   The inner row was clamped to --container (1200px) inside a 1400px
   pill, which parked the logo and actions ~100px inboard. */
body.site-v6 #nav .nav-inner {
  max-width: none;
  width: 100%;
  padding: 13px clamp(18px, 1.9vw, 30px);
  gap: clamp(20px, 2.6vw, 44px);
}
body.site-v6 #nav .nav-links { gap: clamp(4px, 0.9vw, 16px); }

/* ---- 22 · Pill over the film → full-width sticky bar on the page ---- */
body.site-v6 #nav {
  transition:
    width .5s cubic-bezier(.22, 1, .36, 1),
    top .5s cubic-bezier(.22, 1, .36, 1),
    border-radius .5s cubic-bezier(.22, 1, .36, 1),
    background-color .4s ease, border-color .4s ease, color .4s ease,
    box-shadow .4s ease;
}
body.site-v6 #nav.nav--onpaper {
  width: 100%;
  top: 0;
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  border-bottom: 1px solid var(--stroke-01);
  box-shadow: 0 1px 0 rgba(18, 38, 48, 0.04), 0 12px 30px -24px rgba(4, 18, 26, 0.3);
}
body.site-v6 #nav.nav--onpaper .nav-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 44px);
}

/* ================================================================
   23 · Journey cards — the Function "Testing is easy" anatomy in
   Averon's language: filled tinted surface, mono petrol number on top,
   serif title over a small caption, and a self-drawing line-art panel
   pinned to the card's foot by flex:1 + space-between.
   ================================================================ */
body.site-v6 #how-it-works { background: var(--mist, #eff9fd); }
body.site-v6 #how-it-works .doc-head { text-align: center; }
body.site-v6 #how-it-works .doc-lede { margin-inline: auto; }

body.site-v6 .jn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
body.site-v6 .jn-card {
  background: #fff;
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 30px) clamp(16px, 1.6vw, 22px) clamp(10px, 1.2vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 1px rgba(18, 38, 48, 0.05), 0 18px 40px -30px rgba(4, 18, 26, 0.4);
  transition: transform .26s ease, box-shadow .26s ease;
}
body.site-v6 .jn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(18, 38, 48, 0.06), 0 26px 50px -28px rgba(4, 18, 26, 0.45);
}
body.site-v6 .jn-card-no {
  font-family: "Chivo Mono", monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  color: var(--petrol-text, #1674a1);
}
body.site-v6 .jn-card-body {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; flex: 1; width: 100%; gap: clamp(16px, 2vw, 26px);
}
body.site-v6 .jn-card-text { text-align: center; }
body.site-v6 .jn-card-title {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 2.3vw, 33px); line-height: 1.15;
  color: var(--ink-deep, #17242c);
}
body.site-v6 .jn-card-desc {
  margin-top: 8px; font-size: 13.5px; line-height: 1.55;
  color: var(--body, #55606a); max-width: 26ch; margin-inline: auto;
}

/* --- the animated panel --- */
body.site-v6 .jn-art {
  width: 100%; aspect-ratio: 200 / 120;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(239, 249, 253, .85), rgba(255, 255, 255, 0));
  color: #c9d4dc;                 /* neutral line work; petrol used for accents */
}
body.site-v6 .jn-art svg { width: 100%; height: 100%; display: block; }

/* stroke-draw primitives */
body.site-v6 .jn-art [class^="a-"],
body.site-v6 .jn-art [class*=" a-"] { opacity: 0; }
body.site-v6 .jn-art.is-drawing .a-track,
body.site-v6 .jn-art.is-drawing .a-page,
body.site-v6 .jn-art.is-drawing .a-row { animation: jn-fade .5s ease forwards; }

/* 01 Measure: track fills, nodes pop, drop falls */
body.site-v6 .jn-art .a-fill { stroke-dasharray: 160; stroke-dashoffset: 160; }
body.site-v6 .jn-art.is-drawing .a-fill { animation: jn-dash 1.1s cubic-bezier(.22,1,.36,1) .25s forwards; }
body.site-v6 .jn-art.is-drawing .a-node { animation: jn-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
body.site-v6 .jn-art.is-drawing .n1 { animation-delay: .55s; }
body.site-v6 .jn-art.is-drawing .n2 { animation-delay: .75s; }
body.site-v6 .jn-art.is-drawing .n3 { animation-delay: .95s; }
body.site-v6 .jn-art.is-drawing .a-drop { animation: jn-drop 1s cubic-bezier(.22,1,.36,1) .15s forwards; }

/* 02 Understand: lines write in, seal stamps */
body.site-v6 .jn-art .a-line { stroke-dasharray: 90; stroke-dashoffset: 90; }
body.site-v6 .jn-art.is-drawing .a-line { animation: jn-dash .55s ease-out forwards; }
body.site-v6 .jn-art.is-drawing .l1 { animation-delay: .35s; }
body.site-v6 .jn-art.is-drawing .l2 { animation-delay: .5s; }
body.site-v6 .jn-art.is-drawing .l3 { animation-delay: .65s; }
body.site-v6 .jn-art.is-drawing .l4 { animation-delay: .8s; }
body.site-v6 .jn-art.is-drawing .a-seal { animation: jn-pop .5s cubic-bezier(.34,1.56,.64,1) 1s forwards; }
body.site-v6 .jn-art .a-tick { stroke-dasharray: 22; stroke-dashoffset: 22; }
body.site-v6 .jn-art.is-drawing .a-tick { animation: jn-dash .4s ease-out 1.25s forwards; }

/* 03 Improve: rows arrive, ticks land one by one */
body.site-v6 .jn-art.is-drawing .r1 { animation-delay: .2s; }
body.site-v6 .jn-art.is-drawing .r2 { animation-delay: .38s; }
body.site-v6 .jn-art.is-drawing .r3 { animation-delay: .56s; }
body.site-v6 .jn-art .a-check { stroke-dasharray: 18; stroke-dashoffset: 18; opacity: 1; }
body.site-v6 .jn-art.is-drawing .a-check { animation: jn-dash .38s ease-out forwards; }
body.site-v6 .jn-art.is-drawing .r1 .a-check { animation-delay: .8s; }
body.site-v6 .jn-art.is-drawing .r2 .a-check { animation-delay: 1.02s; }
body.site-v6 .jn-art.is-drawing .r3 .a-check { animation-delay: 1.24s; }

/* 04 Progress: bars grow, trend line climbs */
body.site-v6 .jn-art .a-bar { transform-origin: 50% 102px; transform: scaleY(0); opacity: 1; }
body.site-v6 .jn-art.is-drawing .a-bar { animation: jn-grow .8s cubic-bezier(.22,1,.36,1) forwards; }
body.site-v6 .jn-art.is-drawing .b1 { animation-delay: .2s; --sy: .42; }
body.site-v6 .jn-art.is-drawing .b2 { animation-delay: .38s; --sy: .68; }
body.site-v6 .jn-art.is-drawing .b3 { animation-delay: .56s; --sy: 1; }
body.site-v6 .jn-art .a-trend { stroke-dasharray: 110; stroke-dashoffset: 110; }
body.site-v6 .jn-art.is-drawing .a-trend { animation: jn-dash .9s cubic-bezier(.22,1,.36,1) .8s forwards; }
body.site-v6 .jn-art.is-drawing .a-tip { animation: jn-pop .45s cubic-bezier(.34,1.56,.64,1) 1.6s forwards; }

@keyframes jn-fade { to { opacity: 1; } }
@keyframes jn-dash { from { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes jn-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes jn-drop {
  from { opacity: 0; transform: translateY(-16px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jn-grow { from { transform: scaleY(0); } to { transform: scaleY(var(--sy, 1)); } }

/* pop/scale need their own origin box */
body.site-v6 .jn-art .a-node, body.site-v6 .jn-art .a-seal,
body.site-v6 .jn-art .a-tip { transform-box: fill-box; transform-origin: 50% 50%; }
body.site-v6 .jn-art .a-drop { transform-box: fill-box; transform-origin: 50% 100%; }

html[data-motion="paused"] .jn-art * { animation-play-state: paused !important; }

@media (max-width: 900px) {
  body.site-v6 .jn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  body.site-v6 .jn-grid { grid-template-columns: 1fr; }
  body.site-v6 .jn-art { max-width: 300px; margin-inline: auto; }
}

/* ================================================================
   24 · Mobile hero — Function's adaptive pattern: the stat trio leaves
   the film and becomes a solid bar in normal flow beneath it, so the
   video keeps the whole frame and the copy gets its own air.
   ================================================================ */
body.site-v6 .hs-short { display: none; }

@media (max-width: 900px) {
  body.site-v6 .hero--photo { min-height: 100svh; }
  body.site-v6 .hero--photo > .container {
    position: absolute;
    bottom: auto; top: auto;
    inset-inline: 0;
    /* sit the copy just above the stat bar */
    bottom: calc(var(--hero-bar-h, 76px) + clamp(18px, 4vh, 34px));
  }
  body.site-v6 .hero-copy { max-width: none; }
  body.site-v6 .hero-title { font-size: clamp(2.35rem, 10.5vw, 3.1rem); line-height: .98; }
  body.site-v6 .hero-sub { font-size: 1rem; margin-top: 10px; max-width: 34ch; }
  body.site-v6 .hero-ctas { margin-top: 16px; }

  /* the bar itself */
  body.site-v6 .hero-stats {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 3;
    background: #fff;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 -1px 0 rgba(18, 38, 48, .08);
  }
  body.site-v6 .hero-stats .container {
    display: flex; align-items: stretch; justify-content: space-between;
    gap: 0; padding: 14px clamp(14px, 4vw, 22px); max-width: none; width: 100%;
  }
  body.site-v6 .hs-item {
    flex: 1 1 0; min-width: 0; padding: 0 clamp(8px, 2.6vw, 14px);
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
    border-left: 0; margin-left: 0;
  }
  body.site-v6 .hs-item:first-child { padding-left: 0; }
  body.site-v6 .hs-item:last-child { padding-right: 0; }
  body.site-v6 .hs-item + .hs-item {
    border-left: 1px solid rgba(18, 38, 48, .14);
    margin-left: 0;
  }
  body.site-v6 .hs-num {
    font-family: "Manrope", sans-serif; font-weight: 600;
    font-size: clamp(15px, 4.4vw, 19px); line-height: 1.3;
    color: var(--ink-deep, #17242c); text-shadow: none;
  }
  body.site-v6 .hs-cap {
    font-size: clamp(8.5px, 2.5vw, 10px); letter-spacing: .08em;
    color: var(--body, #5a5a62); text-shadow: none; max-width: none;
  }
  body.site-v6 .hs-full { display: none; }
  body.site-v6 .hs-short { display: inline; }
}

@media (max-width: 420px) {
  body.site-v6 .hero-stats .container { padding-inline: 14px; }
  body.site-v6 .hs-item { padding-inline: 8px; }
  body.site-v6 .hs-cap { letter-spacing: .06em; }
}

/* ---- 25 · Stat bar is now a direct child of the hero ---- */
/* sit on the same 1400px grid as everything else, right-aligned within it */
body.site-v6 .hero-stats {
  position: absolute;
  left: 0; right: 0; top: auto;
  bottom: clamp(20px, 3.4vh, 40px);
  z-index: 3;
}
body.site-v6 .hero-stats .container {
  display: flex; justify-content: flex-end;
  max-width: 1400px; margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 44px);
  width: 100%;
}

@media (max-width: 900px) {
  /* full-bleed solid bar at the foot of the film (Function's mobile swap) */
  body.site-v6 .hero-stats {
    left: 0; right: 0; bottom: 0;
    background: #fff;
    padding: 0;
    box-shadow: 0 -1px 0 rgba(18, 38, 48, .08);
  }
  body.site-v6 .hero-stats .container { width: 100%; }
  /* lift the copy clear of the bar */
  body.site-v6 .hero--photo > .container { bottom: clamp(104px, 15vh, 132px); }
}

/* ---- 26 · Mobile hero refinements (Function's restraint) ---- */
@media (max-width: 900px) {
  /* the bar needs its own gutter back */
  body.site-v6 .hero-stats .container {
    padding: 13px clamp(14px, 4vw, 20px) 15px;
    width: 100%; max-width: none; margin: 0;
  }
  body.site-v6 .hs-cap { line-height: 1.35; }

  /* one-line eyebrow, quieter */
  body.site-v6 .hero--photo .kicker {
    letter-spacing: .1em; white-space: nowrap;
    overflow: hidden; text-overflow: clip; opacity: .8;
  }
  /* keep only the ownable line — the tail is desktop detail */
  body.site-v6 .hero-sub-tail { display: none; }
  body.site-v6 .hero-sub { max-width: 22ch; }
  body.site-v6 .hero-ctas { gap: 14px; }
  body.site-v6 .hero-ctas .btn-lg { width: 100%; justify-content: center; }

  /* pause control must clear the stat bar */
  .motion-toggle { bottom: calc(var(--hero-bar-h, 78px) + 14px); }
}

/* ---- 27 · Mobile legibility: a foot scrim so copy always reads over
        bright frames of the film (the videos brighten at sunrise) ---- */
@media (max-width: 900px) {
  body.site-v6 .hero--photo::after { height: 66%; }
  body.site-v6 .hero--photo > .container { z-index: 2; }
  body.site-v6 .hero-title { text-shadow: 0 2px 18px rgba(4, 18, 26, .45); }
  body.site-v6 .hero-sub { text-shadow: 0 1px 10px rgba(4, 18, 26, .5); }
}

/* ---- 28 · Mobile hero copy: less text, wider spacing, less height ---- */
@media (max-width: 900px) {
  /* the journey line is plain text on the field — the capsule read as UI */
  body.site-v6 .hero--photo .kicker {
    display: inline-flex; width: auto; white-space: nowrap;
    font-size: clamp(6.5px, 2.1vw, 8px); letter-spacing: .14em; opacity: .85;
    text-shadow: 0 1px 8px rgba(4, 18, 26, .6);
  }
  body.site-v6 .hero-title { margin-top: 14px; letter-spacing: -.03em; }
  body.site-v6 .hero-sub {
    margin-top: 12px; font-size: .98rem; line-height: 1.5; max-width: 24ch;
  }
  body.site-v6 .hero-ctas { margin-top: 18px; gap: 12px; flex-direction: column; align-items: stretch; }
  body.site-v6 .hero-ctas .text-link { align-self: flex-start; font-size: .95rem; }
  body.site-v6 .hero--photo > .container { bottom: clamp(96px, 13.5vh, 124px); }
}

/* ---- 29 · Motion control: a small circular Averon glass button ---- */
.motion-toggle {
  width: 38px; height: 38px; padding: 0;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  background: rgba(16, 26, 34, .34);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  box-shadow: 0 6px 20px -10px rgba(4, 18, 26, .55);
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.motion-toggle:hover { background: rgba(16, 26, 34, .48); border-color: rgba(255,255,255,.5); }
.motion-toggle:active { transform: scale(.94); }
.motion-toggle svg { width: 14px; height: 14px; display: block; }
.motion-toggle .mt-dot { display: none; }

/* on the light sections below the hero it flips to ink-on-porcelain */
html[data-nav="paper"] .motion-toggle {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(18, 38, 48, .14);
  color: var(--ink-deep, #17242c);
}

/* The control belongs to the hero films. Once they leave the screen it retires
   rather than floating over the rest of the page. Driven by the same data-nav
   flag the nav already sets from its IntersectionObserver on the hero, so this
   costs no extra work. Home page only: the interior pages have no hero, so
   data-nav is "paper" from load and the control must stay put for them.
   visibility is delayed by the fade so the button also leaves the tab order. */
body.home-v6 .motion-toggle {
  transition: background .25s ease, border-color .25s ease, transform .2s ease,
              opacity .22s ease, visibility 0s linear 0s;
}
html[data-nav="paper"] body.home-v6 .motion-toggle {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

@media (max-width: 900px) {
  /* clear of the stat bar, and away from the right edge */
  .motion-toggle {
    width: 34px; height: 34px;
    right: 14px;
    bottom: calc(var(--hero-bar-h, 82px) + 16px);
  }
  .motion-toggle svg { width: 12px; height: 12px; }
}

/* ---- 30 · Nav wordmark breathing room from the mark ---- */
body.site-v6 #nav .nav-logo-svg > path[fill="currentColor"] {
  transform: translateX(6px);
}

/* ---- 31 · Journey section CTAs (Function pairs a solid + an outline) ---- */
body.site-v6 .jn-ctas {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.6vw, 46px);
}
body.site-v6 .jn-ctas .btn-outline {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(18, 38, 48, .16);
  color: var(--ink-deep, #17242c);
}
body.site-v6 .jn-ctas .btn-outline:hover { border-color: var(--petrol, #1779a7); color: var(--petrol, #1779a7); }
@media (max-width: 560px) {
  body.site-v6 .jn-ctas { flex-direction: column; align-items: stretch; }
  body.site-v6 .jn-ctas .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   32 · Early signals — Function's conditions-marquee, Averon-graded:
   centred head with quiet tags, two light-weight tracks in opposing
   directions behind a stage-wide edge fade, and a CTA that opens a
   right-hand panel of what each clinical panel can flag.
   ================================================================ */
body.site-v6 .signals {
  background: var(--deep, #0d222e);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(60px, 7vw, 104px);
  overflow: clip;
}
body.site-v6 .signals-head { text-align: center; }
body.site-v6 .signals-title {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 4.6vw, 62px); line-height: 1.06; color: #fff;
  letter-spacing: -.012em; text-wrap: balance;
}
body.site-v6 .signals-tags {
  margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
body.site-v6 .signals-tags li {
  font-family: "Chivo Mono", monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 7px 14px;
}

body.site-v6 .cx-stage {
  margin-block: clamp(38px, 5vw, 64px);
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px);
  --edge: clamp(3rem, 9vw, 8rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
body.site-v6 .cx-row { overflow: hidden; }
body.site-v6 .cx-track { display: flex; width: max-content; will-change: transform; }
body.site-v6 .cx-track--a { animation: cx-left 64s linear infinite; }
body.site-v6 .cx-track--b { animation: cx-right 78s linear infinite; }
@keyframes cx-left  { to { transform: translateX(-50%); } }
@keyframes cx-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
body.site-v6 .cx-group { display: flex; align-items: center; flex-shrink: 0; }
body.site-v6 .cx-term {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 24px); line-height: 1.2;
  color: rgba(255, 255, 255, .58);
  margin-right: clamp(18px, 2vw, 30px);
}
body.site-v6 .cx-term::after {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  margin-left: clamp(18px, 2vw, 30px);
  background: var(--sky, #3999c7); opacity: .5;
}
body.site-v6 .cx-track--b .cx-term { color: rgba(255, 255, 255, .4); }

html[data-motion="paused"] .cx-track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { body.site-v6 .cx-track { animation: none; } }
/* --- the slide-over --- */
.sm-modal { position: fixed; inset: 0; z-index: 1100; }
.sm-scrim {
  position: absolute; inset: 0; background: rgba(6, 20, 28, .48);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease;
}
.sm-modal.is-open .sm-scrim { opacity: 1; }
.sm-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(100%, 36rem); background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s ease;
  box-shadow: -30px 0 70px -30px rgba(4, 18, 26, .5);
}
.sm-modal.is-open .sm-panel { transform: none; }
.sm-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 28px 18px; border-bottom: 1px solid rgba(18, 38, 48, .09);
}
.sm-title { font-family: "Marcellus", Georgia, serif; font-size: 27px; line-height: 1.15; color: var(--ink-deep, #17242c); margin-top: 6px; }
.sm-close {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--stroke-01);
  background: #fff; font-size: 20px; line-height: 1; color: var(--ink-deep, #17242c); cursor: pointer; flex-shrink: 0;
}
.sm-close:hover { border-color: var(--petrol, #1779a7); color: var(--petrol, #1779a7); }
.sm-body { flex: 1; overflow-y: auto; padding: 6px 28px 20px; }
.sm-row { padding: 15px 0; border-bottom: 1px solid rgba(18, 38, 48, .07); }
.sm-row:last-child { border-bottom: 0; }
.sm-pname {
  font-family: "Marcellus", Georgia, serif; font-size: 17px; color: var(--ink-deep, #17242c);
}
.sm-conds { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--body, #5a5a62); }
.sm-foot { padding: 18px 28px 24px; border-top: 1px solid rgba(18, 38, 48, .09); }
.sm-foot .btn { width: 100%; justify-content: center; }

/* ================================================================
   33 · Panels — Function's biomarkers grammar: no card fills, a
   hairline-divided grid of generous cells, category names set large in
   a light serif, counts in petrol with a small glyph.
   ================================================================ */
body.site-v6 .bm-intro {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-bottom: clamp(44px, 5vw, 76px); text-align: center;
}
body.site-v6 .bm-headline {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06;
  letter-spacing: -.012em; color: var(--ink-deep, #17242c);
  max-width: 20ch; text-wrap: balance;
}
body.site-v6 .bm-em { color: var(--petrol, #1779a7); }
body.site-v6 .bm-standard {
  max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--body, #5a5a62);
}
body.site-v6 .bm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.site-v6 .bm-cat {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch;
  min-height: 20rem; padding: 24px clamp(20px, 2.2vw, 34px) 44px;
}
body.site-v6 .bm-cat:nth-child(1), body.site-v6 .bm-cat:nth-child(4) { padding-left: 0; }
body.site-v6 .bm-cat:nth-child(3), body.site-v6 .bm-cat:nth-child(6) { padding-right: 0; }
body.site-v6 .bm-cat:nth-child(2), body.site-v6 .bm-cat:nth-child(3),
body.site-v6 .bm-cat:nth-child(5), body.site-v6 .bm-cat:nth-child(6) {
  border-left: 1px solid rgba(18, 38, 48, .11);
}
body.site-v6 .bm-cat:nth-child(n+4) {
  border-top: 1px solid rgba(18, 38, 48, .11);
  padding-top: 46px; min-height: 22rem;
}
body.site-v6 .bm-cat-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
body.site-v6 .bm-cat-name {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(26px, 2.7vw, 40px); line-height: 1.05;
  color: var(--ink-deep, #17242c);
  text-wrap: balance;
}
body.site-v6 .bm-count {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Chivo Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--petrol, #1779a7);
}
body.site-v6 .bm-count-icon { flex-shrink: 0; opacity: .7; }
body.site-v6 .bm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
body.site-v6 .bm-list li { font-size: 14px; line-height: 1.4; color: var(--body, #5a5a62); }
body.site-v6 .bm-link {
  margin-top: auto; padding-top: 24px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--petrol, #1779a7);
}
body.site-v6 .bm-link svg { transition: transform .18s ease; }
body.site-v6 .bm-link:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
  body.site-v6 .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-v6 .bm-cat { min-height: 0; padding: 22px 18px 34px; }
  body.site-v6 .bm-cat:nth-child(odd) { padding-left: 0; border-left: 0; }
  body.site-v6 .bm-cat:nth-child(even) { padding-right: 0; border-left: 1px solid var(--stroke-01); }
  body.site-v6 .bm-cat:nth-child(n+3) { border-top: 1px solid var(--stroke-01); padding-top: 30px; min-height: 0; }
}
@media (max-width: 560px) {
  body.site-v6 .bm-grid { grid-template-columns: 1fr; }
  body.site-v6 .bm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  body.site-v6 .bm-cat { padding: 22px 0 30px !important; border-left: 0 !important; }
  body.site-v6 .bm-cat + .bm-cat { border-top: 1px solid var(--stroke-01) !important; padding-top: 26px !important; }
}

/* ================================================================
   34 · Markers page — the explorer gets a room of its own
   ================================================================ */
body.site-v6 .markers-page { padding-top: 96px; }
body.site-v6 .mk-hero { padding-block: clamp(38px, 5vw, 72px) clamp(20px, 3vw, 36px); }
body.site-v6 .mk-title {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 5.4vw, 68px); line-height: 1.04;
  color: var(--ink-deep, #17242c); margin-top: 12px; text-wrap: balance;
}
body.site-v6 .mk-lede { margin-top: 18px; max-width: 62ch; font-size: 1.05rem; line-height: 1.7; color: var(--body, #5a5a62); }
body.site-v6 .mk-facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 30px; }
body.site-v6 .mk-facts > div { display: flex; flex-direction: column; gap: 5px; }
body.site-v6 .mk-k { font-size: 9px; letter-spacing: .14em; color: var(--petrol, #1779a7); }
body.site-v6 .mk-v { font-family: "Marcellus", Georgia, serif; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--ink-deep, #17242c); }
body.site-v6 .mk-v--num { font-size: clamp(38px, 4.3vw, 62px); letter-spacing: -.03em; }

/* the three.js honeycomb stage is switched back on here only */


/* ================================================================
   35 · Member stories — Function's portrait-card grammar
   (tall 3:4 media, gradient scrim, copy anchored to the foot)
   ================================================================ */
body.site-v6 .ms-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
body.site-v6 .ms-card { display: flex; flex-direction: column; gap: 12px; }
body.site-v6 .ms-media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 16px; background: var(--mist, #eff9fd);
  box-shadow: 0 0 0 1px rgba(18,38,48,.05), 0 24px 48px -32px rgba(4,18,26,.5);
  transition: transform .26s ease, box-shadow .26s ease;
}
body.site-v6 .ms-card:hover .ms-media {
  transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(18,38,48,.06), 0 32px 56px -30px rgba(4,18,26,.55);
}
body.site-v6 .ms-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.88);
}
body.site-v6 .ms-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,20,28,.10) 0%, transparent 34%, rgba(6,20,28,.62) 74%, rgba(6,20,28,.88) 100%);
}
body.site-v6 .ms-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 7.5px; letter-spacing: .12em; color: rgba(255,255,255,.9);
  background: rgba(6,20,28,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 9px;
}
body.site-v6 .ms-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 16px; z-index: 2; }
body.site-v6 .ms-kicker { font-size: 8.5px; letter-spacing: .14em; color: rgba(255,255,255,.62); }
body.site-v6 .ms-headline {
  margin-top: 7px; font-family: "Marcellus", Georgia, serif;
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.25; color: #fff;
}
body.site-v6 .ms-sub { margin-top: 5px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72); }
body.site-v6 .ms-foot { display: flex; align-items: baseline; gap: 10px; padding-inline: 2px; }
body.site-v6 .ms-name { font-size: 14px; font-weight: 600; color: var(--ink-deep, #17242c); }
body.site-v6 .ms-meta { font-size: 9px; letter-spacing: .1em; color: var(--body, #5a5a62); }
body.site-v6 .ms-note {
  margin-top: clamp(22px, 2.6vw, 34px); text-align: center;
  font-size: 12px; line-height: 1.6; color: var(--body, #5a5a62); max-width: 74ch; margin-inline: auto;
}
@media (max-width: 900px) { body.site-v6 .ms-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { body.site-v6 .ms-grid { grid-template-columns: 1fr; } }

/* Restore the legacy atlas exactly: honeycomb on the right, sticky, on its
   mist radial ground with the petrol/sky cell ramp; index on the left with
   live row highlighting. (v3-v5 had disabled the stage and collapsed the
   grid to one column; site-v6 still carries site-v5 so both need undoing.) */
body.site-v6 .markers-page .atlas-stage {
  display: block !important;
  order: 2;
  position: sticky;
  top: 108px;
  height: min(74vh, 660px);
  background: radial-gradient(58% 52% at 50% 46%, var(--mist) 0%, rgba(239, 249, 253, 0) 74%) !important;
  border-bottom: 0 !important;
  border-radius: 0;
  min-height: 0;
  overflow: visible;
}
body.site-v6 .markers-page .atlas-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) !important;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
body.site-v6 .markers-page .atlas-info {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-radius: 12px;
}
body.site-v6 .markers-page #health-areas-covered {
  background: #fff;
  padding-top: clamp(46px, 6vw, 84px);
  border-top: 1px solid rgba(18, 38, 48, .09);
  margin-top: clamp(30px, 4vw, 56px);
}

@media (max-width: 919.98px) {
  body.site-v6 .markers-page .atlas-grid { grid-template-columns: 1fr !important; }
  body.site-v6 .markers-page .atlas-stage { position: relative; top: auto; height: 46svh; }
}

/* ---- 36 · Per-film dressing: the consultation shot is bright across its
        lower left, so it alone gets a very gentle corner scrim to seat
        the headline. Diagonal, bottom-left up toward the top-right,
        gone by roughly a third of the way up. ---- */
body.site-v6 .hero--photo[data-slide="1"]::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top right,
    rgba(6, 20, 28, .58) 0%,
    rgba(6, 20, 28, .34) 14%,
    rgba(6, 20, 28, .14) 26%,
    transparent 38%);
  opacity: 0; transition: opacity .8s ease;
}
body.site-v6 .hero--photo[data-slide="1"]::before { opacity: 1; }
/* keep their existing absolute placement — only raise them above the scrim */
body.site-v6 .hero--photo > .container { z-index: 2; }
body.site-v6 .hero-stats {
  z-index: 3;
  /* The stat rail is presentational. Its full-width container overlaps the
     desktop CTA even though the visible figures sit on the right. */
  pointer-events: none;
}

/* ================================================================
   37 · Founders — Function's medical-board rail: centred head, a
   horizontally scrolling rail of square person cards with an edge
   fade and circular paging buttons.
   ================================================================ */
body.site-v6 .founders {
  background: var(--mist, #eff9fd);
  padding-block: clamp(56px, 6.5vw, 92px);
  overflow: clip;
}
body.site-v6 .fb-head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
body.site-v6 .fb-headline {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: clamp(31px, 4.2vw, 54px); line-height: 1.07;
  letter-spacing: -.012em; color: var(--ink-deep, #17242c);
  max-width: 20ch; margin-inline: auto; text-wrap: balance;
}
body.site-v6 .fb-em { color: var(--petrol, #1779a7); }
body.site-v6 .fb-sub {
  margin-top: 14px; font-family: "Chivo Mono", monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--body, #5a5a62);
}

body.site-v6 .fb-shell { position: relative; }
body.site-v6 .fb-viewport { position: relative; isolation: isolate; }
body.site-v6 .fb-rail {
  display: flex; gap: 2rem; align-items: flex-start;
  overflow-x: auto; overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
body.site-v6 .fb-rail::-webkit-scrollbar { display: none; }
body.site-v6 .fb-viewport::after {
  content: ""; position: absolute; z-index: 2;
  top: 0; right: 0; bottom: 0; width: min(10rem, 16vw);
  pointer-events: none; transition: opacity .25s ease;
  background: linear-gradient(to right, rgba(239,249,253,0) 0%, rgba(239,249,253,.7) 58%, var(--mist, #eff9fd) 100%);
}
body.site-v6 .fb-shell[data-rail-enabled="false"] .fb-viewport::after,
body.site-v6 .fb-shell[data-rail-at-end="true"] .fb-viewport::after { opacity: 0; }
body.site-v6 .fb-shell[data-rail-at-start="true"] .fb-nav--prev { opacity: 0; pointer-events: none; }
body.site-v6 .fb-shell[data-rail-enabled="false"] .fb-nav { display: none; }
body.site-v6 .fb-item { flex: 0 0 clamp(260px, 26vw, 340px); width: auto; min-width: 0; scroll-snap-align: start; }

body.site-v6 .person-card { display: flex; flex-direction: column; gap: 16px; width: 100%; }
body.site-v6 .person-card_media {
  position: relative; aspect-ratio: 1; width: 100%;
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(18,38,48,.05);
}
body.site-v6 .person-card_media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
body.site-v6 .fb-flag {
  position: absolute; top: 10px; left: 10px;
  font-size: 7.5px; letter-spacing: .12em; color: rgba(255,255,255,.92);
  background: rgba(6,20,28,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 9px;
}
body.site-v6 .person-card_copy { display: flex; flex-direction: column; gap: 6px; }
body.site-v6 .person-card_name { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink-deep, #17242c); }
body.site-v6 .person-card_description { font-size: 13.5px; line-height: 1.5; color: var(--body, #5a5a62); }

body.site-v6 .fb-nav {
  position: absolute; top: 7.5rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(23,121,167,.4); border-radius: 999px;
  background: #fff; color: var(--petrol, #1779a7);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
body.site-v6 .fb-nav svg { width: .875rem; height: .875rem; display: block; }
body.site-v6 .fb-nav--prev { left: -1.25rem; }
body.site-v6 .fb-nav--next { right: -1.25rem; }
body.site-v6 .fb-nav:hover:not(:disabled) { background: var(--ink-deep, #17242c); border-color: var(--ink-deep, #17242c); color: #fff; }
body.site-v6 .fb-nav:disabled { border-color: var(--stroke-01); color: rgba(18,38,48,.28); opacity: .55; cursor: default; }
body.site-v6 .fb-note {
  margin-top: clamp(24px, 3vw, 36px); text-align: center;
  font-size: 12px; color: var(--body, #5a5a62);
}
@media (max-width: 860px) {
  body.site-v6 .fb-nav { display: none; }
  body.site-v6 .fb-rail {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    gap: 1.25rem;
  }
  body.site-v6 .fb-item { flex-basis: 14rem; }
}

/* ---- 38 · Markers page: a clear way back ---- */
body.site-v6 .mk-back {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px;
  font-size: 14px; font-weight: 600; color: var(--petrol, #1779a7);
}
body.site-v6 .mk-back svg { transition: transform .18s ease; }
body.site-v6 .mk-back:hover svg { transform: translateX(-4px); }
body.site-v6 .markers-page .final { border-top: 1px solid var(--stroke-01); }

/* ================================================================
   39 · ONE GROUND — the structural lesson from Function's code.
   Their entire page is a single cream ground; there is not one dark
   band anywhere. Contrast comes from CARDS on that ground (fill-02 on
   fill-01, 57x/58x) and their dark token appears only as a card fill,
   never full-bleed. We had six grounds and three dark bands. Now: one
   porcelain ground, one dark moment (the film), tiles for weight.
   Scoped to .home-v6 so markers.html is untouched.
   ================================================================ */
:root { --panel: #eaf0f3; --rule: #c9d2d8; }

/* kill every competing band */
body.home-v6 .section--white,
body.home-v6 .partners,
body.home-v6 .marquee-band,
body.home-v6 #how-it-works,
body.home-v6 .founders,
body.home-v6 .capture { background: transparent; }

/* air replaces the flips */
body.home-v6 .section { padding-block: calc(var(--fl-s13) / 1.12); }

/* the conditions band comes off deep ink onto the ground */
body.home-v6 .signals { background: var(--panel); color: var(--body, #5a5a62); }
body.home-v6 .signals-title { color: var(--ink-deep, #17242c); }
body.home-v6 .signals-tags li { color: var(--body, #5a5a62); border-color: rgba(18, 38, 48, .16); }
body.home-v6 .cx-term,
body.home-v6 .cx-track--b .cx-term { color: rgba(24, 40, 52, .78); }
body.home-v6 .cx-term::after { background: var(--petrol-text, #1674a1); opacity: .5; }
body.home-v6 .cx-track--b .cx-term::after { opacity: .26; }
body.home-v6 .cx-stage {
  --edge: clamp(3rem, 9vw, 8rem);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}

/* the pricing panel comes off deep ink and becomes a card on the ground */
body.home-v6 .offer {
  background: none;
  background-color: var(--panel);
  color: var(--body, #5a5a62);
  border-radius: 20px;
  margin-inline: auto;
  max-width: 1400px;
}
body.home-v6 .offer .doc-rule.inverse .doc-label,
body.home-v6 .offer .doc-rule.inverse .doc-side { color: var(--body, #5a5a62); }
body.home-v6 .offer-title,
body.home-v6 .offer-price,
body.home-v6 .offer-list b,
body.home-v6 .ledger-head,
body.home-v6 .ledger-count b,
body.home-v6 .lval { color: var(--ink-deep, #17242c); }
body.home-v6 .offer-body,
body.home-v6 .offer-note,
body.home-v6 .offer-was,
body.home-v6 .ledger-head .dim,
body.home-v6 .ledger-count { color: var(--body, #5a5a62); }
body.home-v6 .offer-list li { border-top-color: var(--rule); }
body.home-v6 .ledger {
  background: #fff; border: 1px solid var(--rule); border-radius: 16px;
}
body.home-v6 .ledger-rows, body.home-v6 .lrow { border-color: var(--rule); }
body.home-v6 .ledger-slots i { border-color: var(--rule); background: rgba(18, 38, 48, .03); }

/* the dark product frames become quiet tiles */
body.home-v6 .product-theatre,
body.home-v6 .advice-frame {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  color: var(--body, #5a5a62);
}
body.home-v6 .advice-frame figcaption,
body.home-v6 .product-theatre figcaption { color: var(--body, #5a5a62); }

/* the closing CTA loses its photograph — Function's is bare ground */
body.site-v6 .final { background-image: none; background-color: transparent; }

/* clinical governance, folded out of the old dark trust band */
body.home-v6 .trust-fine {
  border: 1px solid var(--rule); border-radius: 16px;
  padding: 22px 24px; background: #fff;
}
body.home-v6 .tf-label { font-size: 9.5px; letter-spacing: .14em; color: var(--petrol-text, #1674a1); }
body.home-v6 .tf-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
body.home-v6 .tf-list li {
  font-size: 13px; line-height: 1.5; color: var(--body, #5a5a62);
  padding-left: 16px; position: relative;
}
body.home-v6 .tf-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px; border-radius: 999px; background: var(--petrol, #1779a7); opacity: .6;
}

/* ---- 40 · The standard — Function's trusted_mosaic geometry in Averon's
   palette. Four columns, two cards each, checkerboarded so a 400-unit
   portrait always pairs with a 150-unit plate: every column resolves to the
   same height without a single explicit row. Below 1100px the grid becomes a
   scroll-snap carousel, as theirs does. ---- */
body.home-v6 .pmos { background: transparent; padding-block: calc(var(--fl-s13) / 1.12) 0; overflow: hidden; }
body.site-v6 .pm-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--fl-s11); }
body.site-v6 .pm-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
body.site-v6 .pm-headline {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: var(--fl-h2); line-height: 1.05; letter-spacing: -.015em;
  color: var(--ink-deep, #17242c); max-width: 24ch; text-wrap: balance;
}
body.site-v6 .pm-em { color: var(--petrol-text, #1674a1); font-style: italic; }
body.site-v6 .pm-sub { font-size: var(--fl-lede); color: var(--body, #5a5a62); }

body.site-v6 .pm-mosaic {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fl-s7); width: 100%; align-items: start;
}
body.site-v6 .pm-col { display: flex; flex-direction: column; gap: var(--fl-s4); min-width: 0; }
body.site-v6 .pm-card {
  width: 100%; border-radius: var(--fl-radius-xl); overflow: hidden; position: relative;
}
html.draw-ready body.site-v6 .pm-card { opacity: 0; transform: translateY(16px); }
body.site-v6 .pm-mosaic.is-drawing .pm-card {
  animation: pm-rise .62s cubic-bezier(.22, 1, .36, 1) forwards;
}
body.site-v6 .pm-col:nth-child(1) .pm-card { animation-delay: 0ms; }
body.site-v6 .pm-col:nth-child(2) .pm-card { animation-delay: 90ms; }
body.site-v6 .pm-col:nth-child(3) .pm-card { animation-delay: 180ms; }
body.site-v6 .pm-col:nth-child(4) .pm-card { animation-delay: 270ms; }
body.site-v6 .pm-col .pm-card:last-child { animation-delay: calc(var(--d, 0ms) + 120ms); }
@keyframes pm-rise { to { opacity: 1; transform: none; } }

/* the captioned portrait */
body.site-v6 .pm-person { aspect-ratio: 304 / 400; background: var(--panel, #eaf0f3); }
body.site-v6 .pm-person img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.site-v6 .pm-person::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(194deg, rgba(6, 20, 28, 0) 38%, rgba(6, 20, 28, .62) 72%, rgba(6, 20, 28, .96) 103%);
}
body.site-v6 .pm-person--dark::after {
  background: linear-gradient(197deg, rgba(6, 20, 28, 0) 34%, rgba(6, 20, 28, .66) 70%, rgba(6, 20, 28, .97) 104%);
}
body.site-v6 .pm-copy {
  position: absolute; inset: auto 0 0; z-index: 1;
  display: flex; flex-direction: column-reverse; gap: 12px;
  padding: clamp(18px, 1.7vw, 26px); color: #fff;
}
body.site-v6 .pm-line { font-size: 15px; font-weight: 600; line-height: 1.35; }
body.site-v6 .pm-tag {
  width: fit-content;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 400; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .82);
}

/* the partner plate */
body.site-v6 .pm-plate {
  aspect-ratio: 304 / 150;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--stroke-01, rgba(18, 38, 48, .22));
}
body.site-v6 .pm-plate img {
  width: auto; height: auto; max-width: 63%; max-height: 52%;
  object-fit: contain; filter: grayscale(1); opacity: .78;
  transition: filter .18s ease, opacity .18s ease;
}
body.site-v6 .pm-plate:hover img { filter: none; opacity: 1; }

/* ---- the running partner carousel, full-bleed beneath the mosaic ---- */
body.site-v6 .pm-carousel {
  margin-top: var(--fl-s9);
  padding-block: 0 calc(var(--fl-s13) / 1.12);
  overflow: hidden;
}
body.site-v6 .pm-carstage {
  --row: 3.125rem; --gap: 2.5rem; --fade: 7rem;
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
body.site-v6 .pm-cartrack {
  display: flex; align-items: center; width: max-content;
  animation: pm-marquee 48s linear infinite; will-change: transform;
}
body.site-v6 .pm-cargroup {
  display: flex; align-items: center; gap: var(--gap);
  flex-shrink: 0; padding-right: var(--gap);
}
/* every mark sits on one baseline height; its own ratio sets the width */
body.site-v6 .pm-logo {
  flex-shrink: 0; display: block;
  width: calc(var(--row) * var(--r, 2)); height: var(--row);
}
body.site-v6 .pm-logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .74;
  transition: filter .18s ease, opacity .18s ease;
}
body.site-v6 .pm-logo:hover img { filter: none; opacity: 1; }
@keyframes pm-marquee { to { transform: translateX(-33.3333%); } }
html[data-motion="paused"] .pm-cartrack { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { body.site-v6 .pm-cartrack { animation: none; } }

/* ---- below 1100px the mosaic swipes, exactly as Function's does ---- */
@media (max-width: 1099px) {
  body.site-v6 .pm-mosaic {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.5vw, 24px);
    width: 100%; margin-inline: 0; padding-inline: 0;
    overflow: visible;
  }
  body.site-v6 .pm-carstage { --row: 2.5rem; --gap: 2.5rem; --fade: 3rem; }
  body.site-v6 .pm-cartrack { animation-duration: 42s; }
}
@media (max-width: 560px) {
  body.site-v6 .pm-mosaic {
    display: flex; gap: 1.25rem;
    width: 100vw; margin-inline: calc(50% - 50vw);
    padding-inline: var(--gutter, 20px);
    scroll-padding-inline: var(--gutter, 20px);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.site-v6 .pm-mosaic::-webkit-scrollbar { display: none; }
  body.site-v6 .pm-col { flex: 0 0 min(17.1875rem, 76vw); scroll-snap-align: start; }
}

/* ---- 41 · The marker atlas rows stagger in, on the same engine as the
   journey cards. Reused rather than re-implemented: one observer, one
   keyframe, and the re-arm behaviour comes free. ---- */
html.draw-ready body.site-v6 .index-col .ix-row { opacity: 0; }
body.site-v6 .index-col.is-drawing .ix-row {
  animation: pm-rise .5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* ---- 42 · Two tracking values for mono, not eleven. Function ships .05em for
   tags and .1em for lines; every per-component value drifted between them. ---- */
body.site-v6 .mono-line,
body.site-v6 .doc-label,
body.site-v6 .kicker { letter-spacing: .1em; }
body.site-v6 .mono-tag,
body.site-v6 .hs-cap { letter-spacing: .05em; }

/* ---- 43 · A UI screenshot is read, not decorated, so it must never be
   cropped. object-fit: cover on the 1280x900 report frame was cutting 15% of
   the width away at phone size — the left rail and the right edge of every
   line of the doctor's advice. The attribute rule is the guard: any shot from
   /product/ or /platform/, in any frame, is contained rather than cropped. ---- */
body.site-v6 img[src*="/product/"],
body.site-v6 img[src*="/platform/"] { object-fit: contain; object-position: center; }
body.site-v6 .advice-frame img {
  width: 100%; height: auto;
  aspect-ratio: 1280 / 900;
}

/* ---- 44 · Feature flags. Pilot defaults hide unproven content; the markup
   stays so ?ff=markerGrid,testimonials (or heroFilms) restores it. ---- */
html.ff-markerGrid-off #chosen-panels { display: none; }
html.ff-testimonials-off #member-stories { display: none; }
body.site-v6 .signals-link { margin-top: 18px; text-align: center; }

/* ---- 45 · Sphere hero: the off-focus finish. The sphere is rendered at
   0.55x and upscaled through the lens, and this blur completes the defocus.
   scale(1.02) keeps the blur's soft edge outside the frame. Films restored
   via ?ff=heroFilms get the crisp canvas back automatically. ---- */
html.ff-heroFilms-off body.site-v6 .lens-canvas {
  filter: blur(2.4px) saturate(1.06);
  transform: scale(1.02);
}

/* ---- 46 · Sphere mode: first paint and the copy's quiet zone ----
   The bg fallback was the film's poster (the runners), which flashed before
   the sphere on every load; in sphere mode first paint is brand ink. The
   scrim becomes directional: ink pools where the copy sits — lower-left on
   desktop, the lower band on phones — and the globe stays clear elsewhere. */
html.ff-heroFilms-off body.site-v6 .hero--photo .hero-bg {
  background-image: linear-gradient(118deg, #0a161e 0%, #071018 55%, #0e2431 100%);
}
html.ff-heroFilms-off body.site-v6 .hero--photo .hero-scrim {
  opacity: 1;
  background:
    linear-gradient(to top, rgba(7, 17, 24, .78) 0%, rgba(7, 17, 24, .44) 32%,
      rgba(7, 17, 24, .10) 58%, rgba(7, 17, 24, 0) 76%);
}
@media (max-width: 767px) {
  html.ff-heroFilms-off body.site-v6 .hero--photo .hero-scrim {
    background:
      linear-gradient(to top, rgba(7, 17, 24, .86) 0%, rgba(7, 17, 24, .55) 34%,
        rgba(7, 17, 24, .14) 62%, rgba(7, 17, 24, 0) 80%);
  }
}

/* ---- 47 · Journey on the phone: V2's calm 2x2, exactly as reviewed.
   The animated vignettes are a desktop pleasure; on a phone they cost
   scroll-height and attention, so the art retires and the four stages sit
   side by side as plain numbered cards — everything visible at once,
   nothing clipped or peeking. ---- */
@media (max-width: 767px) {
  body.site-v6 .jn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  body.site-v6 .jn-card {
    background: #fff; border: 1px solid #edeff1; border-radius: 14px;
    padding: 16px; min-height: 0;
  }
  body.site-v6 .jn-card .jn-art { display: none; }
  body.site-v6 .jn-card-no {
    width: 34px; height: 34px; margin: 0;
  }
  body.site-v6 .jn-card-body { margin-top: 0; }
  body.site-v6 .jn-card-text { text-align: left; }
  body.site-v6 .jn-card-title {
    margin-top: 12px; font-size: 12px; letter-spacing: .07em;
    text-transform: uppercase;
  }
  body.site-v6 .jn-card-desc {
    margin-top: 7px; font-size: 13px; line-height: 1.55; max-width: none;
  }
}

/* ---- 48 · Fragment windows: the platform shown as built UI, not bitmaps —
   and animated the way Function animates product: entrance choreography on
   scroll (rows rise in stagger, sparklines and the signature draw
   themselves, checks pop, meters fill), re-armed on exit by draw-in.js so
   every pass replays. One chrome, one width, one height discipline, one
   caption voice. Everything snaps to final state under reduced motion. ---- */
body.site-v6 .frag-window {
  margin: 0; background: #fff;
  border: 1px solid var(--stroke-01, #e3e7ea);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px -46px rgba(7, 26, 36, .5);
  max-width: 33rem;
  width: 100%;
}
body.site-v6 .pillar-grid .pillar-visual { display: flex; justify-content: flex-end; }
body.site-v6 .pillar-grid--flip .pillar-visual { justify-content: flex-start; }
@media (max-width: 900px) {
  body.site-v6 .pillar-grid .pillar-visual,
  body.site-v6 .pillar-grid--flip .pillar-visual { justify-content: center; }
}
body.site-v6 .fw-bar {
  display: flex; gap: 5px; padding: 11px 14px;
  border-bottom: 1px solid var(--stroke-01, #e3e7ea);
  background: #fafbfc;
}
body.site-v6 .fw-bar i { width: 8px; height: 8px; border-radius: 999px; background: #dde3e7; }
body.site-v6 .frag-body { padding: 18px 20px 16px; }
body.site-v6 .frag-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
body.site-v6 .frag-kicker {
  font-family: "Chivo Mono", monospace; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--petrol, #1779a7);
}
body.site-v6 .frag-count, body.site-v6 .frag-sign {
  font-family: "Chivo Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--body, #5a5a62);
}
body.site-v6 .frag-sign { color: var(--petrol, #1779a7); }

/* the champion stat: the win, leading the card */
body.site-v6 .frag-champion {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid #eef1f3;
}
body.site-v6 .frag-ringwrap { position: relative; width: 64px; height: 64px; flex: 0 0 64px; }
body.site-v6 .frag-ringwrap svg { width: 100%; height: 100%; }
body.site-v6 .fr-track { fill: none; stroke: #e8edf0; stroke-width: 5; }
body.site-v6 .fr-arc { fill: none; stroke: var(--petrol, #1779a7); stroke-width: 5; stroke-linecap: round; }
body.site-v6 .fr-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Marcellus", Georgia, serif; font-size: 19px; color: var(--ink-deep, #17242c);
}
body.site-v6 .fr-num em { font-style: normal; font-size: 11px; margin-left: 1px; color: var(--body, #5a5a62); }
body.site-v6 .frag-champ-text { font-size: 14px; line-height: 1.45; color: var(--ink-deep, #17242c); }
body.site-v6 .frag-champ-text strong { font-weight: 700; }
body.site-v6 .frag-champ-sub { display: block; font-size: 12.5px; color: var(--body, #5a5a62); }

body.site-v6 .frag-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 64px auto;
  align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid #eef1f3;
}
body.site-v6 .frag-champion + .frag-row { border-top: 0; }
body.site-v6 .frag-dot { width: 8px; height: 8px; border-radius: 999px; }
body.site-v6 .frag-dot--ok { background: #2e9d68; }
body.site-v6 .frag-dot--watch { background: #d9932f; }
body.site-v6 .frag-name { font-size: 14px; font-weight: 600; color: var(--ink-deep, #17242c); }
body.site-v6 .frag-val { font-size: 13.5px; color: var(--ink-deep, #17242c); white-space: nowrap; }
body.site-v6 .frag-val em { font-style: normal; font-size: 10.5px; color: var(--body, #5a5a62); }
body.site-v6 .frag-spark { width: 64px; height: 18px; color: #b9c6cd; }
body.site-v6 .frag-row--watch .frag-spark { color: #d9932f; }
body.site-v6 .frag-status {
  font-family: "Chivo Mono", monospace; font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: #2e9d68; white-space: nowrap;
}
body.site-v6 .frag-row--watch .frag-status { color: #d9932f; }
body.site-v6 .frag-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef1f3;
  font-size: 12px; line-height: 1.55; color: var(--body, #5a5a62);
}
body.site-v6 .frag-act {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid #eef1f3;
  font-size: 13.5px; line-height: 1.5; color: var(--body, #5a5a62);
}
body.site-v6 .frag-head + .frag-act, body.site-v6 .frag-act:first-of-type { border-top: 0; }
body.site-v6 .frag-act strong { color: var(--ink-deep, #17242c); font-weight: 600; }
body.site-v6 .frag-check { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: #2e9d68; }
body.site-v6 .frag-act--referral .frag-check { color: var(--petrol, #1779a7); }
body.site-v6 .frag-check svg { display: block; width: 100%; height: 100%; }
body.site-v6 .frag-ring {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px;
  border: 1.6px solid #c8d2d8; border-radius: 999px;
}
body.site-v6 .frag-meterline { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
body.site-v6 .frag-meterbar {
  flex: 0 0 92px; height: 4px; border-radius: 999px; background: #e8edf0; overflow: hidden;
}
body.site-v6 .frag-meterbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--petrol, #1779a7); }
body.site-v6 .frag-act--done .frag-meterbar i { background: #2e9d68; }
body.site-v6 .frag-meter { font-size: 9.5px; color: var(--body, #5a5a62); }
body.site-v6 .frag-advice { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body, #5a5a62); }
body.site-v6 .frag-advice strong { color: var(--ink-deep, #17242c); }
body.site-v6 .frag-sigrow {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid #eef1f3;
  font-family: "Chivo Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--body, #5a5a62);
}
body.site-v6 .frag-sigrow svg { width: 90px; height: 22px; color: var(--petrol, #1779a7); }
body.site-v6 .frag-window .shot-caption { border-top: 1px solid var(--stroke-01, #e3e7ea); }

/* ---- the choreography ---- */
html.draw-ready body.site-v6 .frag-window .frag-row,
html.draw-ready body.site-v6 .frag-window .frag-act,
html.draw-ready body.site-v6 .frag-window .frag-advice,
html.draw-ready body.site-v6 .frag-window .frag-champion,
html.draw-ready body.site-v6 .frag-window .frag-sigrow {
  transform: translateY(12px);
}
body.site-v6 .frag-window.is-drawing .frag-row,
body.site-v6 .frag-window.is-drawing .frag-act,
body.site-v6 .frag-window.is-drawing .frag-advice,
body.site-v6 .frag-window.is-drawing .frag-champion,
body.site-v6 .frag-window.is-drawing .frag-sigrow {
  animation: fragRise 720ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms);
}
@keyframes fragRise { to { transform: translateY(0); } }

html.draw-ready body.site-v6 .frag-window .frag-spark path,
html.draw-ready body.site-v6 .frag-window .frag-sigrow path,
html.draw-ready body.site-v6 .frag-window .frag-check path[pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
body.site-v6 .frag-window.is-drawing .frag-spark path {
  animation: fragDraw 900ms cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms + 320ms);
}
body.site-v6 .frag-window.is-drawing .frag-sigrow path {
  animation: fragDraw 1150ms cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms + 380ms);
}
body.site-v6 .frag-window.is-drawing .frag-check path[pathLength] {
  animation: fragDraw 540ms cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms + 420ms);
}
@keyframes fragDraw { to { stroke-dashoffset: 0; } }

html.draw-ready body.site-v6 .frag-window .frag-dot { transform: scale(0); }
body.site-v6 .frag-window.is-drawing .frag-dot {
  animation: fragPop 560ms cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(var(--i, 0) * 150ms + 260ms);
}
@keyframes fragPop { to { transform: scale(1); } }

/* after the entrance, quiet idle life: the watch dot breathes */
body.site-v6 .frag-window.is-drawing .frag-dot--watch {
  animation: fragPop 460ms cubic-bezier(.34, 1.56, .64, 1) forwards,
             fragBreathe 2.6s ease-in-out 1.6s infinite;
  animation-delay: calc(var(--i, 0) * 150ms + 260ms), 1.9s;
}
@keyframes fragBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 147, 47, .35); }
  50% { box-shadow: 0 0 0 5px rgba(217, 147, 47, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.draw-ready body.site-v6 .frag-window .frag-row,
  html.draw-ready body.site-v6 .frag-window .frag-act,
  html.draw-ready body.site-v6 .frag-window .frag-advice,
  html.draw-ready body.site-v6 .frag-window .frag-champion,
  html.draw-ready body.site-v6 .frag-window .frag-sigrow { transform: none; }
  html.draw-ready body.site-v6 .frag-window .frag-spark path,
  html.draw-ready body.site-v6 .frag-window .frag-sigrow path,
  html.draw-ready body.site-v6 .frag-window .frag-check path[pathLength] { stroke-dashoffset: 0; }
  html.draw-ready body.site-v6 .frag-window .frag-dot { transform: none; }
}
@media (max-width: 560px) {
  body.site-v6 .frag-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  body.site-v6 .frag-spark, body.site-v6 .frag-status { display: none; }
  
}

/* ---- 49 · Alignment pass: one heading scale, one caption voice, and the
   checkerboard the review described — plates carry the logo alone; the
   paired image explains the partnership in its caption. ---- */
body.site-v6 .pm-headline {
  font-size: clamp(36px, 4.6vw, 60px);      /* .doc-title's exact ramp */
  line-height: 1.06; letter-spacing: -0.012em;
}
body.site-v6 .pmos { padding-bottom: clamp(70px, 7vw, 100px); }
body.site-v6 .pm-head { margin-bottom: clamp(30px, 4vw, 52px); }
body.site-v6 .pm-line { font-size: 13.5px; line-height: 1.5; }
body.site-v6 .pm-tag {
  font-family: "Chivo Mono", monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase;
}

/* the signals strip, resident inside Pillar 2: a thin band, subheading not
   headline, the ticker compressed, the marker link as its full stop */
body.site-v6 .p2-signals {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--stroke-01, #e3e7ea);
}
body.site-v6 .p2-signals-kicker {
  max-width: 40ch; margin: 0 auto 22px; text-align: center;
  font-family: "Chivo Mono", monospace; font-size: 13.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--petrol, #1779a7); line-height: 1.75;
}
body.site-v6 .p2-signals .cx-stage { padding: 0; }
body.site-v6 .p2-signals .cx-term { font-size: clamp(15px, 1.6vw, 21px); }
body.site-v6 .p2-signals .cx-row + .cx-row { margin-top: 6px; }
body.site-v6 .p2-signals-link { margin-top: 20px; text-align: center; }

/* ---- 49 · Plate captions: the one-liner the review asked for under each
   affiliation, so a name is never thrown without its context. ---- */
body.site-v6 .pm-plate-cap-retired {
  margin: 10px 14px 12px; text-align: center;
  font-family: "Chivo Mono", monospace; font-size: 9px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--body, #5a5a62); line-height: 1.6;
}
/* (pillar 02's bespoke exit removed — section 68's rhythm covers it) */

/* ---- 50 · Phone stat bar symmetry: three cells, centred, equal — the trio
   reads as one instrument, not three left-hung labels. ---- */
@media (max-width: 900px) {
  body.site-v6 .hs-item { align-items: center; text-align: center; }
  body.site-v6 .hs-cap { text-align: center; }
}

/* ---- 51 · Rhythm and ramp normalisation, measured not assumed: the offer
   band joins the 100px section beat and the closer's title joins the one
   serif ramp every other section heading uses. ---- */
body.site-v6 .offer { padding-top: 100px; padding-bottom: 100px; }
body.site-v6 .final h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.06; letter-spacing: -0.012em;
}

/* ---- 52 · One card grid through Pillar 03/04: the walkthrough's plan
   window hangs on the same right grid edge as the advice window above it,
   and the six-month data card takes the same card width — three whites,
   one geometry. The map's coda stops dangling and closes the block in the
   document's serif voice. ---- */
body.site-v6 .walkthrough > figure.frag-window { justify-self: end; width: 100%; }
body.site-v6 .dg-card { max-width: 33rem; }

/* ---- 53 · Exorcism: landing-premium.css (the V3-V5 sheet, still loaded
   under the stacked site-v5 shell class) carries a V5-era override that
   forces #what-you-get to a single column with copy-first order — a rule
   for a section design that no longer exists. It silently flattened the
   resurrected Pillar 02 at every width. Restore the flip grid explicitly
   and put the legacy order to rest. ---- */
body.site-v6 #what-you-get .pillar-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);   /* the flip mirror */
  gap: clamp(28px, 4vw, 56px);
}
body.site-v6 #what-you-get .pillar-copy { order: 0; max-width: none; }
body.site-v6 #what-you-get .pillar-visual { order: 0; }
@media (max-width: 900px) {
  body.site-v6 #what-you-get .pillar-grid { grid-template-columns: 1fr; }
  body.site-v6 #what-you-get .pillar-copy { order: 0; }
  body.site-v6 #what-you-get .pillar-visual { order: 1; }
}

/* ---- 54 · Pricing symmetry: the grid holds exactly two children — the
   offer copy and a rail of two equal cards (governance, programme) that
   share the window family's chrome. No more auto-flow scatter. ---- */
body.site-v6 .offer-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
body.site-v6 .offer-rail { display: flex; flex-direction: column; gap: 20px; }
body.site-v6 .offer-rail .trust-fine { margin: 0; }
body.site-v6 .ledger-card {
  border: 1px solid var(--rule); border-radius: 16px;
  padding: 22px 24px; background: #fff;
}
body.site-v6 .ledger-card .ledger-head { margin-top: 0; }
@media (max-width: 900px) {
  body.site-v6 .offer-rail { gap: 14px; }
}

/* ---- 55 · Pillar eyebrows: same voice, more authority. The mono label
   kept its face but was whispering; the pillar sections now open with a
   short rule and a larger, heavier setting so each chapter announces
   itself. ---- */
body.site-v6 #measure .pillar-copy > .doc-label,
body.site-v6 #what-you-get .pillar-copy > .doc-label,
body.site-v6 #improve .pillar-copy > .doc-label,
body.site-v6 #measure-progress .pillar-copy > .doc-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .18em;
  color: var(--petrol, #1779a7);
  margin-bottom: 18px;
}
body.site-v6 #measure .pillar-copy > .doc-label::before,
body.site-v6 #what-you-get .pillar-copy > .doc-label::before,
body.site-v6 #improve .pillar-copy > .doc-label::before,
body.site-v6 #measure-progress .pillar-copy > .doc-label::before {
  content: ""; width: 30px; height: 2px; background: var(--petrol, #1779a7);
  flex: 0 0 auto;
}

/* ---- 56 · Journey dropdown: the four pillars one hover away, in the
   glass voice of the navbar. Opens on hover and on keyboard focus; the
   host link still goes to the overview. ---- */
body.site-v6 .nav-drop { position: relative; display: inline-flex; }
body.site-v6 .nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; }
body.site-v6 .nd-caret { width: 9px; height: 6px; opacity: .55; transition: transform .18s ease; }
body.site-v6 .nav-drop:hover .nd-caret,
body.site-v6 .nav-drop:focus-within .nd-caret { transform: rotate(180deg); }
body.site-v6 .nav-drop-panel::before {
  content: ""; position: absolute; top: -16px; left: -12px; right: -12px; height: 18px;
}
body.site-v6 .nav-drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px; padding: 8px;
  background: rgba(250, 252, 254, 0.9);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(18, 38, 48, 0.14); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(18, 38, 48, 0.04), 0 12px 30px -24px rgba(4, 18, 26, 0.3),
              0 24px 60px -28px rgba(4, 18, 26, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s,
              background .35s ease, border-color .35s ease;
}
body.site-v6 .nav-drop:hover .nav-drop-panel,
body.site-v6 .nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
body.site-v6 .nav-drop-panel a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-deep, #17242c);
  text-decoration: none;
}
body.site-v6 .nav-drop-panel a:hover { background: rgba(23, 121, 167, .08); }
body.site-v6 .nav-drop-panel .nd-no {
  font-family: "Chivo Mono", monospace; font-size: 9.5px; letter-spacing: .08em;
  color: var(--petrol, #1779a7); min-width: 16px;
}

/* ---- 57 · Page-to-page: a quiet cross-fade instead of the hard cut.
   Speculation rules already have the next page warm; browsers without
   view transitions keep instant navigation. ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 220ms ease both; }
::view-transition-new(root) { animation: vtIn 260ms ease both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* the pillar cell's caption gets the width its four words need */
body.site-v6 .hs-item:last-child .hs-cap { max-width: 30ch; }

/* ---- 58 · Page heads clear the floating nav with intent: the fixed glass
   bar is ~72px deep, and the old clamp met it with 48 on phones — headings
   tucked underneath. Every interior page now opens with the same measured
   drop below the nav. ---- */
body.site-v6 .page-head {
  padding-top: calc(clamp(64px, 9vw, 96px) + 64px);
}

/* ---- 59 · Mockup content restored: the P3 support quartet and the habit
   creed band, in the document's own voices. ---- */
body.site-v6 .sup-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(22px, 3vw, 34px);
}
body.site-v6 .sup-card {
  background: #fff; border: 1px solid var(--stroke-01, #e3e7ea);
  border-radius: 14px; padding: 18px 18px 20px;
}
body.site-v6 .sup-kicker {
  font-family: "Chivo Mono", monospace; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--petrol, #1779a7); margin-bottom: 10px;
}
body.site-v6 .sup-line { font-size: 13px; line-height: 1.55; color: var(--body, #5a5a62); }
@media (max-width: 900px) { body.site-v6 .sup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.site-v6 .sup-grid { grid-template-columns: 1fr; } }
/* the review kept dark bands out — one calm ground throughout. Both creed
   bands are one component: same classes, same scale, same accent. */
body.site-v6 .creed.statement { margin-inline: auto; text-align: center; }
body.site-v6 .creed.statement .statement-link { text-align: center; }

/* statement bands carry short content: a shorter beat than the pillars */
body.site-v6 section[aria-label="Why action matters"],
body.site-v6 section[aria-label="Our aim"] {
  padding-top: clamp(56px, 7vw, 84px);
  padding-bottom: clamp(56px, 7vw, 84px);
}
body.site-v6 .creed.statement .honesty-body { margin-inline: auto; }
body.site-v6 .creed.statement .creed-text { margin-inline: auto; }

/* ---- 60 · The journey panel dresses like the nav: dark glass while the
   film hero is behind it, porcelain over the paper sections — driven by the
   same data-nav flag the navbar already flips on. ---- */
html[data-nav="film"] body.site-v6 .nav-drop-panel {
  background: rgba(16, 26, 34, 0.3);
  backdrop-filter: blur(20px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(1.04);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 44px -22px rgba(4, 18, 26, 0.55);
}
html[data-nav="film"] body.site-v6 .nav-drop-panel a { color: rgba(255, 255, 255, 0.88); }
html[data-nav="film"] body.site-v6 .nav-drop-panel a:hover { color: #fff; }
html[data-nav="film"] body.site-v6 .nav-drop-panel a:hover { background: rgba(255, 255, 255, .09); }
html[data-nav="film"] body.site-v6 .nav-drop-panel .nd-no { color: #7fc4e0; }

/* ---- 61 · Tablet compatibility: the pricing grid stacks below 900 like
   every other two-column block, and its rail cards sit side by side where
   there is room for the pair. ---- */
@media (max-width: 900px) {
  body.site-v6 .offer-grid { grid-template-columns: 1fr; }
  body.site-v6 .offer-rail { flex-direction: row; align-items: stretch; }
  body.site-v6 .offer-rail > * { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 560px) {
  body.site-v6 .offer-rail { flex-direction: column; }
}
/* touch-open state mirrors :hover exactly */
body.site-v6 .nav-drop.is-open .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
body.site-v6 .nav-drop.is-open .nd-caret { transform: rotate(180deg); }
body.site-v6 .mobile-menu .mm-no {
  font-family: "Chivo Mono", monospace; font-size: 10px; letter-spacing: .08em;
  color: var(--petrol, #1779a7); margin-right: 10px;
}

/* ---- 62 · Progress rail: where you are, and one click to anywhere.
   Desktop gets a slim dot rail on the right edge — labels on hover, the
   current stop marked. Tablet and phone get a hairline progress bar instead:
   the rail would crowd the content and the burger already navigates. ---- */
body.site-v6 .pr-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 850;
  pointer-events: none; background: transparent;
}
body.site-v6 .pr-bar i {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--petrol, #1779a7);
  transition: width .12s linear;
}
body.site-v6 .pr-rail {
  position: fixed; right: max(16px, env(safe-area-inset-right)); top: 50%;
  transform: translateY(-50%); z-index: 840;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, right .3s ease, gap .3s ease,
    padding .3s ease, background-color .3s ease, border-color .3s ease,
    box-shadow .3s ease;
}
body.site-v6 .pr-rail.is-lit { opacity: 1; pointer-events: auto; }
body.site-v6 .pr-rail { position: fixed; }
body.site-v6 .pr-dot {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--body, #5a5a62);
  font-family: "Chivo Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase;
}
/* Labels sit over the page, so they carry their own ground rather than
   printing on top of a mockup. The current stop keeps its pill at rest —
   that is the "where am I" — and the rest arrive on hover. */
body.site-v6 .pr-label {
  opacity: 0; transform: translateX(6px);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  box-sizing: border-box; max-width: 190px; overflow: hidden;
  background: rgba(250, 252, 254, .86);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(18, 38, 48, .09);
  transition: opacity .22s ease, transform .22s ease, color .22s ease,
    max-width .3s ease, padding .3s ease, border-color .3s ease;
}
body.site-v6 .pr-rail:hover .pr-label,
body.site-v6 .pr-dot:hover .pr-label,
body.site-v6 .pr-dot:focus-visible .pr-label { opacity: .92; transform: translateX(0); }
html[data-nav="film"] body.site-v6 .pr-label {
  background: rgba(16, 26, 34, .5); border-color: rgba(255, 255, 255, .16);
}
/* the spine the dots hang from */
body.site-v6 .pr-rail::after {
  content: ""; position: absolute; right: 3px; top: 4px; bottom: 4px;
  width: 1px; background: currentColor; opacity: .16;
}
body.site-v6 .pr-mark {
  width: 7px; height: 7px; border-radius: 999px; flex: 0 0 7px;
  background: rgba(18, 38, 48, .22);
  transition: background .25s ease, transform .25s ease;
}
body.site-v6 .pr-dot:hover .pr-mark { background: rgba(18, 38, 48, .45); }
body.site-v6 .pr-dot.is-current .pr-mark {
  background: var(--petrol, #1779a7); transform: scale(1.6);
  box-shadow: 0 0 0 4px rgba(23, 121, 167, .16);
}
body.site-v6 .pr-dot.is-current .pr-label {
  opacity: 1; transform: translateX(0); font-weight: 600; color: var(--petrol, #1779a7);
}
/* At the FAQ, the rail becomes a small glass edge handle rather than sharing
   the accordion's control column. Labels remain available on deliberate
   hover or keyboard focus, but occupy no page space while it is retracted. */
body.site-v6 .pr-rail.is-faq-compact {
  right: max(0px, env(safe-area-inset-right));
  gap: 8px;
  padding: 10px 7px;
  border: 1px solid rgba(18, 38, 48, .1);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  background: rgba(250, 252, 254, .88);
  box-shadow: 0 8px 26px rgba(18, 38, 48, .09);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
body.site-v6 .pr-rail.is-faq-compact::after {
  right: 10px;
  top: 14px;
  bottom: 14px;
}
body.site-v6 .pr-rail.is-faq-compact:not(:hover):not(:focus-within) .pr-label {
  max-width: 0;
  padding-right: 0;
  padding-left: 0;
  border-color: transparent;
  opacity: 0;
  transform: translateX(10px);
}
body.site-v6 .pr-rail.is-faq-compact:hover .pr-label,
body.site-v6 .pr-rail.is-faq-compact:focus-within .pr-label {
  max-width: 190px;
}
/* On narrower desktop widths, leave the content column clear at rest.
   The current dot still identifies position; hover or keyboard focus reveals
   every label using the existing rail interaction. */
@media (max-width: 1399px) {
  body.site-v6 .pr-rail:not(:hover):not(:focus-within) .pr-label {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-color: transparent;
    opacity: 0;
  }
}
/* over the film hero the rail goes light */
html[data-nav="film"] body.site-v6 .pr-dot { color: rgba(255, 255, 255, .8); }
html[data-nav="film"] body.site-v6 .pr-mark { background: rgba(255, 255, 255, .35); }
html[data-nav="film"] body.site-v6 .pr-dot.is-current .pr-mark { background: #fff; }
html[data-nav="film"] body.site-v6 .pr-dot.is-current .pr-label { color: #fff; }
@media (max-width: 1199px) { body.site-v6 .pr-rail { display: none; } }
@media (min-width: 1200px) { body.site-v6 .pr-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body.site-v6 .pr-bar i, body.site-v6 .pr-rail,
  body.site-v6 .pr-label, body.site-v6 .pr-mark { transition: none; }
}

/* ---- 63 · Journey cards are links now: the whole card is the target. ---- */
body.site-v6 a.jn-card { text-decoration: none; color: inherit; display: flex; }
body.site-v6 a.jn-card:hover { border-color: rgba(23, 121, 167, .3); }
body.site-v6 a.jn-card:focus-visible { outline: 2px solid var(--petrol, #1779a7); outline-offset: 3px; }
body.site-v6 a.jn-card .jn-card-title { transition: color .2s ease; }
body.site-v6 a.jn-card:hover .jn-card-title { color: var(--petrol, #1779a7); }

/* ---- 64 · Pillars are one shape now: intro, bullets, coda, one visual.
   The list gets the space the three stacked paragraphs used to take. ---- */
body.site-v6 .pillar-intro { font-weight: 600; color: var(--ink-deep, #17242c); }
body.site-v6 .pillar-points { margin-top: 20px; }
body.site-v6 .pillar-coda { margin-top: clamp(20px, 2.6vw, 30px); }
/* the fixed nav must not eat a heading when a journey card jumps here */
body.site-v6 #measure, body.site-v6 #what-you-get,
body.site-v6 #improve, body.site-v6 #measure-progress,
body.site-v6 #consultation, body.site-v6 #six-months { scroll-margin-top: 96px; }

/* ---- 65 · Pillar symmetry (Anastasiya 3a): the two elements are the same
   size. Equal columns, and the visual fills its column rather than sitting
   at a private max-width, so text-box and picture read as a matched pair. ---- */
/* Equal columns are a DESKTOP arrangement. Unscoped, this rule outranked
   the mobile stack in modern.css and left the mockups crushed into a 154px
   column at iPhone widths. */
@media (min-width: 901px) {
  body.site-v6 .pillar-grid,
  body.site-v6 .pillar-grid--flip,
  body.site-v6 #what-you-get .pillar-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }
}
@media (max-width: 900px) {
  body.site-v6 .pillar-grid,
  body.site-v6 .pillar-grid--flip,
  body.site-v6 #what-you-get .pillar-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 36px);
  }
  /* copy first, picture after — in every pillar, flipped or not */
  body.site-v6 .pillar-grid .pillar-copy,
  body.site-v6 .pillar-grid--flip .pillar-copy { order: 0; }
  body.site-v6 .pillar-grid .pillar-visual,
  body.site-v6 .pillar-grid--flip .pillar-visual { order: 1; }
}
body.site-v6 .pillar-grid .frag-window,
body.site-v6 .pillar-grid .dg-card { max-width: none; width: 100%; }
body.site-v6 .pillar-grid .pillar-visual { display: block; min-width: 0; }

/* ---- 66 · Release-state flags: content that only tells the truth once a
   module ships. data-ff shows when the flag is on, data-ff-not when it is
   off, so both readings live in the markup and the switch is one word in
   the head. ---- */
html.ff-actionModule-off [data-ff="actionModule"] { display: none !important; }
html.ff-actionModule-on [data-ff-not="actionModule"] { display: none !important; }
@media (min-width: 901px) {
  /* Four milestones are visible while the optional action module is off.
     Give each one an equal share of the established section canvas rather
     than leaving the fifth, hidden milestone's column empty. */
  html.ff-actionModule-off .months-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 67 · Mobile tracker: the bar says how far, this says where. A small
   glass tag under the nav, appearing only once a section is under way. ---- */
body.site-v6 .pr-now {
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 58px);
  left: 50%; transform: translate(-50%, -6px);
  z-index: 830; padding: 5px 12px; border-radius: 999px;
  font-family: "Chivo Mono", monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-deep, #17242c);
  background: rgba(250, 252, 254, .82);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(18, 38, 48, .1);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
body.site-v6 .pr-now.is-lit { opacity: .92; transform: translate(-50%, 0); }
html[data-nav="film"] body.site-v6 .pr-now {
  color: #fff; background: rgba(16, 26, 34, .42);
  border-color: rgba(255, 255, 255, .18);
}
@media (min-width: 1200px) { body.site-v6 .pr-now { display: none; } }
@media (prefers-reduced-motion: reduce) { body.site-v6 .pr-now { transition: none; } }

/* ---- 68 · One section rhythm, measured not felt.
   Before this, desktop joins ran from 7px to 260px across eleven distinct
   values. Two causes: .consult and .months still carried the top margin
   they needed when they lived inside pillar 03, which stacked on top of
   their new sections' padding; and several sections had bespoke padding
   from earlier passes. Every section now takes the same vertical measure,
   and the blocks that became sections drop their old internal margin. ---- */
body.site-v6 { --sec-y: clamp(64px, 7vw, 100px); }
body.site-v6 main > section:not(.hero) {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
/* blocks promoted to sections: their in-pillar margin is now double-spacing */
body.site-v6 main > section > .container > .consult,
body.site-v6 main > section > .container > .months { margin-top: 0; }
/* Keep the reassessment timeline on the same full section canvas as the
   surrounding pillar and pricing content. */
body.site-v6 #three-months .months,
body.site-v6 #three-months .months-track {
  width: 100%;
  max-width: none;
}
@media (min-width: 901px) {
  /* Unlike the card sections around it, this open timeline has no card edge
     providing its visual width. Let it occupy the full 1400px section canvas
     instead of inheriting the container's additional 44px inner inset. */
  body.site-v6 #three-months > .container {
    padding-inline: 0;
  }
}
/* the closer keeps a touch more air above it, and none of its own below */
body.site-v6 main > section.final {
  padding-top: calc(var(--sec-y) * 1.25);
  padding-bottom: var(--sec-y);
}
body.site-v6 .final-title { margin-top: clamp(18px, 2vw, 26px); }
body.site-v6 .clinical-board { scroll-margin-top: 96px; }
body.site-v6 .clinical-board .person-card { scroll-margin-top: 120px; }
body.site-v6 .board-person-role {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrol);
}

body.site-v6 .pm-clinical-board {
  flex-direction: column;
  gap: 0;
  padding: clamp(16px, 2vw, 24px);
  color: var(--ink-deep);
  text-align: center;
  text-decoration: none;
}

body.site-v6 .pm-clinical-board__label {
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.1;
}

.enquiry-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.enquiry-status {
  min-height: 1.4em;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}

.enquiry-status[data-state="success"] { color: #176548; }
.enquiry-status[data-state="error"] { color: #a13a35; }