/* ====================================================================
   PURPOSE DRIVEN SOCIALS · VARIATION B — "The Quiet Signal"
   One geometry family (the ripple), Poppins only, light and spacious.
   Brand locks: navy #0A1F50 · coral #F26B3A on white/light. No dark
   neon, no agency clutter. Mobile-first throughout.
   ==================================================================== */

/* ------------------------------------------------------------------ */
/* 0 · Tokens                                                          */
/* ------------------------------------------------------------------ */
:root {
  --navy: #0A1F50;
  --coral: #F26B3A;
  --coral-deep: #E05A28;
  --white: #FFFFFF;
  --paper: #FFFFFF;
  --paper-tint: #F5F7FC;          /* faint navy-tinted paper           */
  --paper-warm: #FCF1EB;          /* faint coral-tinted paper (Score)  */
  --sky: #9FB4FF;                 /* supporting accent — arcs on navy  */

  --ink: var(--navy);
  --ink-70: rgba(10, 31, 80, .78);
  --ink-55: rgba(10, 31, 80, .60);
  --ink-40: rgba(10, 31, 80, .42);
  --line: rgba(10, 31, 80, .14);
  --line-soft: rgba(10, 31, 80, .08);
  --coral-soft: rgba(242, 107, 58, .12);

  --fs-hero: clamp(2.9rem, 10.5vw, 8.25rem);
  --fs-act: clamp(2.05rem, 4.6vw, 3.8rem);
  --fs-stat: clamp(4rem, 13vw, 9.5rem);
  --fs-quote: clamp(1.45rem, 3.2vw, 2.35rem);

  --ease: cubic-bezier(.22, .8, .28, 1);
  /* Round 3 §1.1 — the shared timing FAMILY. Every scroll-triggered
     content animation references these tokens (values are the Round 2
     durations scaled up ~35%). Tune the family here, never per element. */
  --t-reveal: 1.15s;  /* data-reveal fades, kicker, heads   */
  --t-soft: .8s;      /* small list/rest fades              */
  --t-chain: .6s;     /* chain rows + nodes                 */
  --t-row: 1.4s;      /* old-game/new-game row resolution   */
  --t-under: 1.35s;   /* NOW-card coral underline           */
  --t-arc: 1.9s;      /* dash gauge arcs (03)               */
  --t-arc-soft: 1.35s;/* chosen arc fade (03)               */
  --t-bar: 3.5s;      /* 14.2% duo-bar climb                */
  --t-needle: 4s;     /* score gauge needle                 */
  --t-hero: 1.55s;    /* hero line entrance                 */
  --header-h: 94px;
  --radius: 24px;
}

/* ------------------------------------------------------------------ */
/* 1 · Base                                                            */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* ^ Round 2 §4.2: anchored arrivals (nav → #get-found-score etc.)
   land clear of the fixed header instead of tucking under it */

body {
  margin: 0;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--coral-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }
::selection { background: var(--navy); color: #fff; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: min(1160px, calc(100% - clamp(2.5rem, 8vw, 7rem)));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 999;
  background: var(--navy); color: #fff; padding: .7em 1.2em;
  border-radius: 999px; font-weight: 500; transition: top .25s;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Clearly-marked placeholder chips (facts pending from the client) */
.ph {
  border: 1px dashed rgba(255, 255, 255, .4);
  border-radius: 8px;
  padding: .05em .5em;
  font-size: .92em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 2 · Buttons — pills; hover emits a ripple                           */
/* ------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-block;
  padding: .9em 1.9em;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute; inset: -3px;
  border: 1.5px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { animation: btnRipple 1s var(--ease) infinite; }
@keyframes btnRipple {
  0%   { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1.22); opacity: 0;  }
}
.btn--coral { background: var(--coral); color: #fff; box-shadow: 0 10px 30px -12px rgba(242, 107, 58, .55); }
.btn--coral:hover { background: var(--coral-deep); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #122A68; }
.btn--big { padding: 1.05em 2.3em; font-size: 1.06rem; }
.btn--nav { padding: .62em 1.35em; font-size: .93rem; }

/* FINAL POLISH (6 Sep) — nav "Let's talk" repeating shimmer.
   The persistent invitation: the sticky-nav coral pill gets the same
   gloss treatment as the primary CTAs but on a long repeating cycle —
   a 1.2s sweep, then a 7s rest (8.2s total; deliberately sparse so it
   never competes with the content it sits beside). Pure CSS,
   compositor transform only, clipped by the pill's radius (overflow
   hidden), zero layout impact. Hover pauses the cycle and fades the
   gloss out so the hover state owns the button. Reduced motion: none.
   Lives in main.css (not components.css) so it reaches every page,
   including who-we-are which loads only the core stylesheet.         */
@keyframes navShimmer {
  0%      { transform: translateX(-140%) skewX(-22deg); animation-timing-function: var(--ease); }
  14.63%  { transform: translateX(240%) skewX(-22deg); }
  100%    { transform: translateX(240%) skewX(-22deg); }
}
.btn--nav { position: relative; overflow: hidden; }
.btn--nav::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 42%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .34) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-22deg);
  pointer-events: none;
  animation: navShimmer 8.2s linear 2.5s infinite;
  transition: opacity .2s ease;
}
.btn--nav:hover::before { animation-play-state: paused; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .btn--nav::before { display: none; }
}

/* ------------------------------------------------------------------ */
/* 3 · Ambient ring field (fixed, faint, breathing)                    */
/* ------------------------------------------------------------------ */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ambient-ring {
  position: absolute;
  border: 1px solid rgba(10, 31, 80, .05);
  border-radius: 50%;
  animation: ambientBreathe 14s ease-in-out infinite alternate;
}
.ar1 { width: 68vmax; height: 68vmax; top: -30vmax; right: -26vmax; }
.ar2 { width: 54vmax; height: 54vmax; bottom: -24vmax; left: -22vmax; animation-delay: -7s; }
@keyframes ambientBreathe {
  from { transform: scale(.96); }
  to   { transform: scale(1.05); }
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* 4 · Header — condenses to a floating capsule on scroll              */
/* ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: 60;
}
.head-inner {
  width: min(1160px, calc(100% - clamp(1.5rem, 5vw, 4rem)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  transition: padding .35s var(--ease), background .35s, box-shadow .35s, margin .35s var(--ease), border-radius .35s;
  border: 1px solid transparent;
}
.site-header.is-scrolled .head-inner {
  margin-top: .7rem;
  padding: .6rem 1.6rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  border-color: var(--line-soft);
  box-shadow: 0 14px 44px -18px rgba(10, 31, 80, .28);
}
/* Height-based logo sizing — the SVG viewBoxes are trimmed to the
   artwork, so rendered height = visible wordmark height.             */
.brand img { height: clamp(40px, 3.6vw, 47px); width: auto; transition: height .35s var(--ease); }
.site-header.is-scrolled .brand img { height: clamp(35px, 3.1vw, 40px); }
@media (max-width: 840px) {
  .brand img { height: 38px; }
  .site-header.is-scrolled .brand img { height: 34px; }
}

.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.site-nav > a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  position: relative;
}
.site-nav > a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--coral);
  transition: right .3s var(--ease);
}
.site-nav > a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px;
  border-radius: 50%;
  place-items: center;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); margin: 3px auto;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 840px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    min-width: 240px;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(10, 31, 80, .3);
    padding: 1rem;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav > a:not(.btn) { padding: .6rem .8rem; border-radius: 12px; }
  .site-nav > a:not(.btn):hover { background: var(--paper-tint); }
  .site-nav > a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: .5rem; text-align: center; }
  .site-header.nav-open .site-nav { opacity: 1; transform: none; pointer-events: auto; }
  .site-header.nav-open .head-inner {
    background: rgba(255, 255, 255, .95);
    border-radius: 24px;
    border-color: var(--line-soft);
  }
}

/* ------------------------------------------------------------------ */
/* 5 · Act 1 — Hero                                                    */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  /* capped below full viewport on tall screens so the first act peeks
     and the hero→act transition reads as intentional, not as a gap */
  min-height: min(100svh, 860px);
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  overflow: clip;
  padding-top: calc(var(--header-h) + 2vh);
  padding-bottom: 5vh;
}

/* Reserved layer for the future ambient brand film (see CLAUDE.md).
   Drop-in ready: place a <video muted autoplay loop playsinline
   poster="…"> (or its poster <img>) inside .hero-film — the rules below
   size, mask and dim it so text contrast survives with no redesign.  */
.hero-film {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-film video,
.hero-film img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .14;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 40%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 40%, transparent 78%);
}

/* The ripple scene sits above the film. The svg is centre-anchored so
   the coral core lands in the dedicated clear zone between the header
   and the headline (matched by .hero-inner's top padding) — the core
   never overlaps the display type at any common width or height.     */
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-scene svg {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 1vh + clamp(48px, 7vh, 72px));
  transform: translate(-50%, -50%);
  width: min(150vmin, 1360px);
  aspect-ratio: 1;
  overflow: visible;
}
.hero-guides circle {
  fill: none;
  stroke: rgba(10, 31, 80, .06);
  stroke-width: 1.5;
}
.hero-pulse {
  fill: none;
  stroke: rgba(10, 31, 80, .32);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.05);
  opacity: 0;
  animation: heroPulse 7.5s cubic-bezier(.16, .6, .4, 1) infinite;
  will-change: transform, opacity;
}
.hp2 { animation-delay: 2.5s; }
.hp3 { animation-delay: 5s; }
@keyframes heroPulse {
  0%   { transform: scale(.05); opacity: 0; }
  6%   { opacity: .5; }
  70%  { opacity: .1; }
  100% { transform: scale(1); opacity: 0; }
}
.hero-halo {
  fill: rgba(242, 107, 58, .16);
  transform-box: fill-box;
  transform-origin: center;
  animation: corePulse 4.4s ease-in-out infinite;
}
.hero-core {
  fill: var(--coral);
  transform-box: fill-box;
  transform-origin: center;
  animation: corePulse 4.4s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* clear zone above the headline — this is where the core lives */
  padding-top: clamp(88px, 13vh, 135px);
}

.hero-title {
  font-size: min(var(--fs-hero), 13vh);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(34px);
  /* Round 3 §1.1: family-token pacing — each promise line settles */
  animation: lineRise var(--t-hero) var(--ease) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: .25s; }
.hero-title .line:nth-child(2) { animation-delay: 1s; }
.hero-title .line:nth-child(3) { animation-delay: 1.75s; }
.hero-title .accent { color: var(--coral); }
@keyframes lineRise {
  to { opacity: 1; transform: none; }
}

.hero-lead {
  max-width: 46rem;
  margin: clamp(1.6rem, 3.5vh, 2.4rem) auto 0;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  color: var(--ink-70);
  opacity: 0;
  animation: lineRise var(--t-hero) var(--ease) 2.6s forwards;
}
.hero-lead strong { color: var(--navy); font-weight: 600; }

.hero-cta {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  opacity: 0;
  animation: lineRise var(--t-hero) var(--ease) 2.95s forwards;
}

.scroll-cue {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  width: 34px; height: 34px;
  transform: translateX(-50%);
}
.scroll-cue span {
  position: absolute; inset: 0;
  border: 1.5px solid var(--ink-40);
  border-radius: 50%;
  animation: cueDrop 2.6s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { transform: scale(.35) translateY(-8px); opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: scale(1) translateY(10px); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* 6 · Act scaffolding                                                 */
/* ------------------------------------------------------------------ */
.act { padding-block: clamp(5.5rem, 13vh, 10rem); position: relative; }
/* first act after the hero: tighter top so the handoff feels deliberate */
.act-shift { padding-top: clamp(2.5rem, 5vh, 4rem); }

.act-marker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}
.act-node {
  width: 14px; height: 14px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.act-node::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--coral);
}
.act-node--coral { border-color: var(--coral); }

.act-title {
  font-size: var(--fs-act);
  max-width: 20ch;
  color: var(--navy);
}
.act-lead {
  margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.8;
  color: var(--ink-70);
}
.act-lead strong { color: var(--navy); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 7 · Act 2 — stats flow                                              */
/* ------------------------------------------------------------------ */
.stats-flow { margin-top: clamp(3.5rem, 8vh, 6rem); display: grid; gap: clamp(3.5rem, 9vh, 6.5rem); }

.stat-giant { max-width: 46rem; }
.stat-giant--right { margin-left: auto; text-align: right; }

.stat-num {
  display: block;
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat-num .approx { color: var(--ink-40); font-weight: 500; margin-right: .04em; }
.stat-num .unit { color: var(--coral); }
.stat-line {
  margin-top: .9rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-70);
  max-width: 34rem;
}
.stat-giant--right .stat-line { margin-left: auto; }

.stat-supports {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(2.2rem, 5vh, 3.4rem);
}
.stat-support p { margin-top: .5rem; color: var(--ink-70); max-width: 30rem; }

.bars-title { font-weight: 500; color: var(--navy); max-width: 30rem; }
.duo-bars { margin-top: 1.2rem; display: grid; gap: .8rem; }
.duo-row {
  display: grid;
  grid-template-columns: minmax(108px, auto) 1fr minmax(64px, auto);
  align-items: center;
  gap: .9rem;
  font-size: .9rem;
}
.duo-label { color: var(--ink-55); font-weight: 500; }
.duo-val { font-weight: 600; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.duo-bar { height: 12px; border-radius: 999px; background: var(--paper-tint); overflow: hidden; }
.duo-bar i {
  display: block; height: 100%;
  width: var(--w);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  /* Round 3 §1.1: family token — the 14.2% climb reads as movement */
  transition: transform var(--t-bar) var(--ease) .3s;
}
.db-coral i { background: var(--coral); }
.db-navy i { background: var(--navy); opacity: .55; }
.is-in .duo-bar i { transform: none; }

.pull-quote {
  margin: clamp(4rem, 9vh, 6.5rem) auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.015em;
}

/* ------------------------------------------------------------------ */
/* 8 · Act 2 — the old game vs the new game (pinned theatre)           */
/* ------------------------------------------------------------------ */
.theatre { margin-top: clamp(4rem, 9vh, 7rem); }

.theatre-stage {
  background: var(--paper-tint);
  padding-block: clamp(3rem, 6vh, 5rem);
}

.theatre-head h3 {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  letter-spacing: -0.015em;
}
.th-old { color: var(--ink-40); }
.th-vs { color: var(--ink-40); font-weight: 400; font-size: .7em; margin-inline: .2em; }
.th-new { color: var(--navy); }

.theatre-rows { margin-top: clamp(2rem, 4vh, 3rem); }
/* Round 3.5 §1: one flat design language on every breakpoint. Base is
   the stacked mobile pattern; desktop lays each row out left → right
   as old (ghost) → arrow → new (coral card).                          */
.t-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(1.4rem, 3.2vh, 2.2rem);
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.t-arrow { color: var(--coral); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.t-arrow i { font-style: normal; display: block; }
@media (min-width: 901px) {
  .t-row {
    grid-template-areas:
      "what what what"
      "old arrow new";
    grid-template-columns: 1fr auto 1fr;
    row-gap: 1rem;
  }
  .t-what { grid-area: what; padding-top: 0; }
  .t-old { grid-area: old; }
  .t-arrow { grid-area: arrow; align-self: center; }
  .t-new { grid-area: new; }
}
.t-what {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding-top: .35rem;
}
.t-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .18em .8em;
  border-radius: 999px;
  margin-bottom: .55rem;
}
.t-old .t-tag { background: rgba(10, 31, 80, .07); color: var(--ink-55); }
.t-new .t-tag { background: var(--coral-soft); color: var(--coral-deep); }
.t-old p, .t-new p {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}
.theatre-kicker { will-change: opacity, transform; }
.t-new p { position: relative; display: inline-block; }
.t-new p::after {
  content: "";
  position: absolute; left: 0; bottom: -.25em;
  width: 100%; height: 3px;
  background: var(--coral);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-under) var(--ease) 1.9s;
}

/* Row sequence (armed by JS only when motion is allowed): each row
   resolves as it enters view — old lands, then the arrow, then the
   NOW card, then its underline and the old side's strikethrough.
   Compositor properties (opacity/transform) only; the strikethrough
   is a one-off text-decoration-color paint on a small area.          */
.theatre.rows-armed .t-old,
.theatre.rows-armed .t-new {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.theatre.rows-armed .t-arrow {
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--t-soft) var(--ease) .55s, transform var(--t-soft) var(--ease) .55s;
}
.theatre.rows-armed .t-new { transition-delay: .85s; }
.t-row.is-done .t-old { opacity: 1; transform: none; }
.t-row.is-done .t-arrow { opacity: 1; transform: none; }
.t-row.is-done .t-new { opacity: 1; transform: none; }
.t-row.is-done .t-old p { text-decoration-color: rgba(10, 31, 80, .38); }
.t-row.is-done .t-new p::after { transform: scaleX(1); }

.theatre-kicker {
  margin-top: clamp(2rem, 4.5vh, 3.2rem);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}
/* hidden-then-revealed only with JS; static and complete without it  */
.js .theatre-kicker {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.theatre-kicker em { font-style: normal; color: var(--coral); }
.theatre.show-kicker .theatre-kicker { opacity: 1; transform: none; }

/* Round 3.5 §1: the desktop pin is gone — the stage is an ordinary
   tinted band on every breakpoint, and rows resolve on entry.        */
@media (max-width: 900px) {
  .t-row { gap: .9rem; }
}

.ads-aside {
  margin-top: clamp(4rem, 9vh, 6.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}
.ads-aside > div { border-top: 3px solid var(--line); padding-top: 1.3rem; }
.ads-aside > div:last-child { border-top-color: var(--coral); }
.ads-aside h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.ads-aside > div:first-child h3, .ads-aside > div:first-child p { color: var(--ink-55); }
.ads-aside p { font-size: .98rem; }

/* ------------------------------------------------------------------ */
/* 9 · Act 3 — the three blocks (sticky stack) + release               */
/* ------------------------------------------------------------------ */
.stack { margin-top: clamp(3rem, 7vh, 5rem); --stack-top: clamp(96px, 15vh, 170px); }

/* STICKY-STACK — the pattern that actually works:
   The cards carry NO margins. (A margin on a sticky element shrinks its
   sticking range by that margin — the root cause of the two previous
   failures: cards released 44vh early and never overlapped.) Instead,
   inert .stack-gap spacers between the cards provide the scroll runway.
   All cards share one containing block (.stack) and one sticky top, so
   each card pins, holds fully readable while the next scrolls up over
   it, and stays pinned beneath until the whole stack scrolls out.
   Card height is capped so every card fits between --stack-top and the
   fold at any viewport height.                                        */
.stack-card {
  position: sticky;
  top: var(--stack-top);
  margin: 0;
  min-height: min(430px, calc(100svh - var(--stack-top) - 7vh));
  display: grid;
  align-content: center;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.6rem);
  box-shadow: 0 -18px 60px -30px rgba(10, 31, 80, .35), 0 24px 70px -38px rgba(10, 31, 80, .38);
}
.stack-gap { height: 48vh; }
@media (max-width: 700px) {
  /* small screens: simple sequential cards — no stacking */
  .stack-card { position: static; min-height: 0; margin-bottom: 1.2rem; }
  .stack-card:last-child { margin-bottom: 0; }
  .stack-gap { display: none; }
}

.stack-glyph {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.2rem);
  right: clamp(1.4rem, 3vw, 2.2rem);
  width: clamp(44px, 6vw, 62px);
  opacity: .9;
}
.g-core { fill: var(--coral); }
.g-arc, .g-ring {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.g-arc { stroke-dasharray: 96 42; transform-box: fill-box; transform-origin: center; transform: rotate(-30deg); }

.stack-kind {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: 1rem;
}
.stack-card h3 {
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.stack-sub {
  margin-top: 1.1rem;
  max-width: 44rem;
  color: var(--ink-70);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.release {
  margin-top: clamp(4rem, 10vh, 7rem);
  text-align: center;
}
.release-rings { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 1.6rem; }
.release-rings svg { width: clamp(44px, 6vw, 60px); }
.g-ring {
  stroke-dasharray: 138.2;
  stroke-dashoffset: 44;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 1s var(--ease);
}
.release.is-in .release-rings svg:nth-child(1) .g-ring { stroke-dashoffset: 0; transition-delay: .1s; }
.release.is-in .release-rings svg:nth-child(2) .g-ring { stroke-dashoffset: 0; transition-delay: .35s; }
.release.is-in .release-rings svg:nth-child(3) .g-ring { stroke-dashoffset: 0; transition-delay: .6s; }
.release-line {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* ------------------------------------------------------------------ */
/* 10 · Act 4 — the mechanism                                          */
/* ------------------------------------------------------------------ */
.engine-split {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .engine-split { grid-template-columns: 1fr; } }

.media-slot { margin: 0; }
.media-slot-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(165deg, #122A68 0%, var(--navy) 60%, #081840 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.media-slot-art::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1.5px dashed rgba(255, 255, 255, .28);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
}
.media-slot-art svg { width: 46%; opacity: .5; }
.media-slot-art .g-core { fill: var(--coral); }
.media-slot-art .g-arc { stroke: rgba(255, 255, 255, .75); stroke-width: 2; }
/* A filled media slot: real image replaces the placeholder art */
.media-slot--filled .media-slot-art { background: none; }
.media-slot--filled .media-slot-art::after { display: none; }
.media-slot--filled .media-slot-art picture,
.media-slot--filled .media-slot-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-tag {
  position: absolute;
  left: 1.2rem; bottom: 1.1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: .35em 1em;
  backdrop-filter: blur(6px);
}

/* The Get Found Engine dashboard — an illustrative, vendor-anonymous
   mockup (browser-frame card, three progress rings, rising chart).
   Brand colours only: coral, navy, and a coral-outline variant.      */
.dash { position: relative; }
.dash-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: 0 34px 90px -44px rgba(10, 31, 80, .45);
  overflow: hidden;
}
.dash-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-tint);
}
.dash-head .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(10, 31, 80, .16); }
.dash-head .title {
  margin-left: .7rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.dash-body { padding: clamp(1.2rem, 2.6vw, 2rem); }

.dash-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}
.dash-gauge { display: grid; justify-items: center; gap: .5rem; }
.dash-gauge svg { width: clamp(58px, 7vw, 84px); }
.dash-gauge .track { fill: none; stroke: rgba(10, 31, 80, .1); stroke-width: 7; }
.dash-gauge .arc {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 213.6;              /* 2πr, r=34 */
  stroke-dashoffset: 213.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dashoffset var(--t-arc) var(--ease) .25s;
}
.dash-gauge--found .arc { stroke: var(--coral); }
.dash-gauge--trusted .arc { stroke: var(--navy); transition-delay: .45s; }
.dash-gauge--chosen .arc { stroke: var(--coral); stroke-dasharray: 4 9; transition: opacity var(--t-arc-soft) var(--ease) .95s; stroke-dashoffset: 0; opacity: 0; }
.is-in .dash-gauge--found .arc { stroke-dashoffset: 53; }     /* ~75% */
.is-in .dash-gauge--trusted .arc { stroke-dashoffset: 85; }   /* ~60% */
.is-in .dash-gauge--chosen .arc { opacity: 1; }
.dash-gauge .glabel { font-size: .82rem; font-weight: 500; color: var(--navy); }

.dash-chart svg { width: 100%; }
.dash-chart .grid-line { stroke: rgba(10, 31, 80, .08); stroke-width: 1; }
.dash-chart .spark { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; }
.dash-chart .spark-fill { fill: url(#dashSparkFill); }

.dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.1rem;
}
.dash-chips span {
  font-size: .76rem;
  font-weight: 500;
  padding: .3em .95em;
  border-radius: 999px;
}
.dash-chips .chip-coral { background: var(--coral); color: #fff; }
.dash-chips .chip-navy { background: var(--navy); color: #fff; }
.dash-chips .chip-outline { background: transparent; color: var(--coral-deep); border: 1.5px solid var(--coral); }

.dash-caption {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--ink-55);
  text-align: center;
}

.chain {
  margin-top: clamp(4rem, 9vh, 6.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  counter-reset: chain;
}
.chain li { position: relative; padding-top: 2rem; }
.chain-node {
  position: absolute; top: 0; left: 0;
  width: 16px; height: 16px;
  border: 2px solid var(--navy);
  border-radius: 50%;
}
.chain-node::after {
  content: "";
  position: absolute; inset: 3.5px;
  background: var(--coral);
  border-radius: 50%;
}
.chain li::before {
  content: "";
  position: absolute; top: 8px; left: 26px; right: -14px;
  height: 1px;
  background: var(--line);
}
.chain li:last-child::before { display: none; }
@media (max-width: 640px) {
  .chain li::before { display: none; }
  .chain li { padding-left: 2rem; padding-top: 0; }
  .chain-node { top: 6px; }
}
.chain h3 { font-size: 1.08rem; }
.chain p { margin-top: .45rem; font-size: .95rem; color: var(--ink-70); max-width: 26rem; }
/* The outcome chain cascades left→right: the parent stays visible (its
   own reveal is neutralised) and each node+label rises in sequence —
   circle markers pop with their text. Brisk, one clear wave.          */
.js .chain[data-reveal] { opacity: 1; transform: none; }
.js .chain li { opacity: 0; transform: translateY(14px); transition: opacity var(--t-chain) var(--ease), transform var(--t-chain) var(--ease); }
.js .chain li .chain-node { transform: scale(.4); transition: transform var(--t-chain) var(--ease); transition-delay: inherit; }
.js .chain.is-in li { opacity: 1; transform: none; }
.js .chain.is-in li .chain-node { transform: none; }
.js .chain.is-in li:nth-child(2) { transition-delay: .19s; }
.js .chain.is-in li:nth-child(3) { transition-delay: .38s; }
.js .chain.is-in li:nth-child(4) { transition-delay: .57s; }
.js .chain.is-in li:nth-child(2) .chain-node { transition-delay: .19s; }
.js .chain.is-in li:nth-child(3) .chain-node { transition-delay: .38s; }
.js .chain.is-in li:nth-child(4) .chain-node { transition-delay: .57s; }

.spotlight {
  margin: clamp(4rem, 9vh, 6.5rem) auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.spotlight em { font-style: normal; color: var(--coral); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* 11 · Act 5a — Why us (the mid-page navy immersion)                  */
/* ------------------------------------------------------------------ */
.act-why {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: clip;
}
.act-why .act-node { border-color: #fff; }
.act-why .eyebrow { color: rgba(255, 255, 255, .6); }
.act-why .act-title { color: #fff; }
.act-why .act-lead { color: rgba(255, 255, 255, .78); }
.act-why .act-lead strong { color: #fff; }

.why-rings {
  position: absolute;
  top: -22vmin; right: -18vmin;
  width: 58vmin;
  pointer-events: none;
}
.why-rings circle { fill: none; stroke: rgba(159, 180, 255, .12); stroke-width: 1.5; }
.why-rings .wr-core { fill: var(--coral); stroke: none; }

.dodont {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}
.dodont-col {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.dodont-col h3 { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 1rem; }
.dodont-col--not h3 { color: rgba(255, 255, 255, .5); }
.dodont-col li { padding-left: 1.6rem; position: relative; margin-bottom: .8rem; color: #fff; font-weight: 500; line-height: 1.6; }
.dodont-col li:last-child { margin-bottom: 0; }
.dodont-col li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 11px; height: 11px;
  border: 2px solid var(--coral);
  border-radius: 50%;
}
.dodont-col--not li { color: rgba(255, 255, 255, .62); font-weight: 400; }
.dodont-col--not li::before {
  border-color: rgba(255, 255, 255, .38);
  width: 11px; height: 2px;
  border-width: 0 0 2px 0;
  border-radius: 0;
  top: .68em;
}

/* ------------------------------------------------------------------ */
/* 11b · Act 5b — the people behind it (light, follows the navy band)  */
/* ------------------------------------------------------------------ */
.act-people { background: linear-gradient(180deg, #fff 0%, var(--paper-tint) 18%, var(--paper-tint) 82%, #fff 100%); }

.founder {
  margin-top: clamp(3rem, 7vh, 5rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  padding: clamp(1.8rem, 4.5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(1.8rem, 4vw, 4rem);
  box-shadow: 0 30px 80px -50px rgba(10, 31, 80, .35);
}
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } .media-slot--founder { max-width: 340px; } }

.founder-beats {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-bottom: 1.6rem;
}
.founder-beats span {
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--coral);
  letter-spacing: -0.01em;
}
.founder-note blockquote p {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.85;
  color: var(--ink-70);
  margin-bottom: 1.2em;
}

/* Founder type-on: the opening sentence types in (JS-driven, IO-once),
   then the rest of the note fades up. All hiding is gated on the
   .typeon-armed class that JS adds ONLY when motion is allowed — so
   no-JS and prefers-reduced-motion both get the full text instantly.  */
.type-line { font-weight: 500; color: var(--navy); }
.typeon-armed .type-line.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--coral);
  animation: caretBlink .8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.typeon-armed .type-rest {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-soft) var(--ease), transform var(--t-soft) var(--ease);
}
.typeon-armed.type-done .type-rest { opacity: 1; transform: none; }
.founder-note footer { font-weight: 500; color: var(--navy); }
.founder-note cite { font-style: normal; }

.candour {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.candour li { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.candour h3 { font-size: 1.02rem; }
.candour p { margin-top: .4rem; font-size: .95rem; color: var(--ink-70); }

/* ------------------------------------------------------------------ */
/* 12 · Act 6 — the Get Seen plans                                     */
/* ------------------------------------------------------------------ */
.plans-wrap {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .plans-wrap { grid-template-columns: 1fr; }
}

.plans-cards { display: grid; gap: clamp(1.4rem, 3vh, 2rem); }

.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.6vw, 2.6rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -34px rgba(10, 31, 80, .4); }


.plan-badge {
  position: absolute;
  top: -14px; left: clamp(1.8rem, 3.6vw, 2.6rem);
  background: var(--coral);
  color: #fff;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35em 1.1em;
  border-radius: 999px;
}
.plan-eyebrow {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: .6rem;
}
.plan h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.plan-line { margin-top: .8rem; font-size: .99rem; line-height: 1.75; color: var(--ink-70); }

.plan-details { margin-top: 1.3rem; border-top: 1px solid var(--line-soft); }
.plan-details summary {
  list-style: none;
  cursor: pointer;
  padding-block: .9rem;
  font-weight: 500;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.plan-details summary::-webkit-details-marker { display: none; }
/* Round 2 §4.1: the old "+" marker is gone — the rotating chevron
   (Round 1 §7.2, components.css) is the single toggle affordance */
.plan-details ul { padding-bottom: 1.1rem; display: grid; gap: .55rem; }
.plan-details li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-70);
}
.plan-details li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--coral);
  border-radius: 50%;
}
.plan-details[open] ul { animation: detailsIn .35s var(--ease); }
@keyframes detailsIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.plan-more {
  display: inline-block;
  margin-top: .4rem;
  font-weight: 500;
  font-size: .95rem;
  color: var(--coral-deep);
  text-decoration: none;
}
.plan-more::after { content: " →"; transition: margin-left .25s var(--ease); margin-left: .15em; }
.plan-more:hover::after { margin-left: .5em; }

.brand-addon {
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  background: var(--coral-soft);
  border-radius: 18px;
  padding: 1.3rem 1.8rem;
  font-size: .98rem;
  color: var(--ink-70);
}
.brand-addon strong { color: var(--navy); }

.act-cta { margin-top: clamp(2.4rem, 5vh, 3.4rem); text-align: center; }

/* ------------------------------------------------------------------ */
/* 13 · Act 7 — the Get Found Score (the instrument)                   */
/* ------------------------------------------------------------------ */
.act-score { background: linear-gradient(180deg, #fff 0%, var(--paper-warm) 22%, var(--paper-warm) 84%, #fff 100%); }

.score-split {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .score-split { grid-template-columns: 1fr; } .gauge { max-width: 400px; margin-inline: auto; } }

.gauge svg { width: 100%; overflow: visible; }
.gauge-track { fill: none; stroke: rgba(10, 31, 80, .12); stroke-width: 10; stroke-linecap: round; }
.gauge-fill {
  fill: none;
  stroke: var(--coral);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 46 613;
  stroke-dashoffset: 0;
  opacity: 0;
}
.gauge.is-live .gauge-fill { opacity: .85; animation: gaugeScan 5.5s linear infinite; }
@keyframes gaugeScan {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -659; }
}
.gauge-ticks line { stroke: rgba(10, 31, 80, .28); stroke-width: 2; stroke-linecap: round; }
.gauge-needle {
  transform-box: view-box;
  transform-origin: 180px 200px;
  transform: rotate(-108deg);
}
.gauge.is-live .gauge-needle { animation: needleSeek var(--t-needle) var(--ease) forwards; }
@keyframes needleSeek {
  0%   { transform: rotate(-108deg); }
  40%  { transform: rotate(84deg); }
  65%  { transform: rotate(-30deg); }
  85%  { transform: rotate(14deg); }
  100% { transform: rotate(0deg); }
}
.gauge-needle line { stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; }
.gauge-needle circle { fill: var(--navy); }
.gauge-q {
  font-family: 'Poppins', sans-serif;
  font-size: 58px;
  font-weight: 600;
  fill: var(--coral);
  text-anchor: middle;
  opacity: 0;
  transition: opacity var(--t-soft) var(--ease) 3.5s;
}
.gauge.is-live .gauge-q { opacity: 1; }
.gauge-caption {
  margin-top: 1.4rem;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-55);
  max-width: 34ch;
  margin-inline: auto;
}

.score-stack { display: grid; gap: 1.3rem; }
.score-stack li {
  position: relative;
  padding-left: 2.1rem;
  counter-increment: score;
}
.score-stack li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 15px; height: 15px;
  border: 2px solid var(--coral);
  border-radius: 50%;
}
.score-stack li::after {
  content: "";
  position: absolute; left: 5.5px; top: calc(.3em + 5.5px);
  width: 4px; height: 4px;
  background: var(--coral);
  border-radius: 50%;
}
.score-stack h3 { font-size: 1.06rem; }
.score-stack p { margin-top: .3rem; font-size: .95rem; color: var(--ink-70); }
.js .score-stack li { opacity: 0; transform: translateY(16px); transition: opacity var(--t-soft) var(--ease), transform var(--t-soft) var(--ease); }
.js .score-stack.is-in li { opacity: 1; transform: none; }
.js .score-stack.is-in li:nth-child(2) { transition-delay: .12s; }
.js .score-stack.is-in li:nth-child(3) { transition-delay: .24s; }
.js .score-stack.is-in li:nth-child(4) { transition-delay: .36s; }

.score-flow {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(10, 31, 80, .12);
  font-size: .97rem;
  color: var(--ink-70);
  max-width: 46rem;
}

/* Embed slots — clearly-marked containers for third-party snippets    */
/* Centred Score CTA (replaces the old form slot on the homepage) */
.score-cta {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  text-align: center;
}
.cta-reassure {
  margin-top: 1.1rem;
  font-size: .95rem;
  color: var(--ink-55);
}

/* ------------------------------------------------------------------ */
/* 14 · Act 8 — final CTA (the page's only navy immersion)             */
/* ------------------------------------------------------------------ */
.final {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding-block: clamp(6rem, 15vh, 11rem) clamp(5rem, 12vh, 9rem);
  overflow: clip;
  text-align: center;
}
/* the single permitted navy→coral gradient: a low horizon glow,
   kept beneath the text block, never behind body copy */
.final::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  background: radial-gradient(120% 90% at 50% 108%, rgba(242, 107, 58, .32), rgba(242, 107, 58, 0) 62%);
  pointer-events: none;
}
.final-scene { position: absolute; inset: 0; pointer-events: none; }
.final-scene svg { width: 100%; height: 100%; }
.f-rings circle {
  fill: none;
  stroke: rgba(159, 180, 255, .14);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: restBreathe 12s ease-in-out infinite alternate;
}
.f-rings circle:nth-child(2) { animation-delay: -3s; }
.f-rings circle:nth-child(3) { animation-delay: -6s; }
.f-rings circle:nth-child(4) { animation-delay: -9s; }
@keyframes restBreathe {
  from { transform: scale(.985); }
  to   { transform: scale(1.03); }
}
.f-core { fill: var(--coral); }

.final-inner { position: relative; z-index: 1; }
.final h2 {
  font-size: var(--fs-act);
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
}
.final-cta { margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.reassure { margin-top: 1.1rem; color: rgba(255, 255, 255, .72); font-size: .96rem; }

/* ------------------------------------------------------------------ */
/* 15 · Footer                                                         */
/* ------------------------------------------------------------------ */
.site-footer {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3.5rem, 8vh, 5.5rem) 2.5rem;
  font-size: .95rem;
}
.site-footer .container {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(160px, .7fr));
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 760px) { .site-footer .container { grid-template-columns: 1fr; } }

.foot-brand img { width: min(408px, 88vw); height: auto; }
.foot-tag { margin-top: 1.1rem; color: rgba(255, 255, 255, .6); max-width: 30rem; }

.foot-nav { display: contents; }
.foot-nav h3 {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1rem;
}
.foot-nav a {
  display: block;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  padding-block: .32rem;
  font-weight: 400;
}
.foot-nav a:hover { color: var(--coral); }

.foot-legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, .09);
  margin-top: 1rem;
  padding-top: 1.6rem;
  display: grid;
  gap: .55rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}
.foot-legal a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
.foot-legal a:hover { color: var(--coral); }
.foot-copy { font-size: .84rem; color: rgba(255, 255, 255, .42); }

/* ------------------------------------------------------------------ */
/* 16 · Reveal system                                                  */
/* ------------------------------------------------------------------ */
/* Round 4.5 §1.2: the hidden state is ARMED BY JS (rv-armed) only for
   elements below the fold, and is opacity-only — no transform. See
   js/main.js §2 for the rationale (capture/first-paint proofing).    */
.js [data-reveal].rv-armed {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].rv-armed.is-in { opacity: 1; }

/* ------------------------------------------------------------------ */
/* 17 · Companion pages (How We Work · Who We Are · Contact)           */
/* ------------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(4rem, 10vh, 7rem));
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: clip;
}
.page-hero .eyebrow { margin-bottom: 1.1rem; }
.page-hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.8rem);
  letter-spacing: -0.025em;
  color: var(--navy);
  max-width: 16ch;
}
.page-lead {
  margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.8;
  color: var(--ink-70);
}
.page-lead strong { color: var(--navy); font-weight: 600; }
.page-hero-scene {
  position: absolute;
  top: -18vmin; right: -22vmin;
  width: 62vmin;
  opacity: .65;
  pointer-events: none;
}
.page-hero-scene circle { fill: none; stroke: rgba(10, 31, 80, .07); stroke-width: 1.5; }
.page-hero-scene .phs-core { fill: var(--coral); stroke: none; }

.site-nav a[aria-current="page"] { color: var(--coral-deep); }

.plan-block {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.6rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: minmax(200px, .55fr) 1fr;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
@media (max-width: 780px) { .plan-block { grid-template-columns: 1fr; } }
.plan-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.plan-block .plan-eyebrow { margin-bottom: .7rem; }
.plan-block .plan-badge { position: static; display: inline-block; margin-bottom: .9rem; }
.plan-block-line { font-size: 1.02rem; color: var(--ink-70); }
.inside { margin-top: 1.4rem; display: grid; gap: .6rem; }
.inside li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-70);
}
.inside li::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: 10px; height: 10px;
  border: 1.5px solid var(--coral);
  border-radius: 50%;
}
.plan-motto { margin-top: 1.3rem; font-weight: 500; color: var(--navy); }

.mini-cta {
  background: var(--paper-tint);
  border-radius: 28px;
  padding: clamp(2.6rem, 6vw, 4.5rem);
  text-align: center;
  margin-block: clamp(3rem, 7vh, 5rem);
}
.mini-cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 22ch; margin-inline: auto; }
.mini-cta .btn { margin-top: 1.8rem; }
.mini-cta .reassure { margin-top: 1rem; color: var(--ink-55); font-size: .95rem; }

.story { max-width: 50rem; display: grid; gap: 1.4em; }
.story p { font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.85; color: var(--ink-70); }
.story strong { color: var(--navy); font-weight: 600; }

.belief {
  margin-block: clamp(3rem, 7vh, 5rem);
  font-size: var(--fs-quote);
  font-weight: 500;
  color: var(--navy);
  max-width: 24ch;
  letter-spacing: -0.015em;
}
.belief em { font-style: normal; color: var(--coral); }

.team-grid {
  margin-top: clamp(2.4rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.team-card { display: grid; gap: .9rem; }
.team-card h3 { font-size: 1.08rem; }
.team-card p { font-size: .92rem; color: var(--ink-55); margin-top: .15rem; }
.team-card .media-slot-art { aspect-ratio: 1; }
.team-card--reserved .media-slot-art {
  background: var(--paper-tint);
}
.team-card--reserved .media-slot-art::after { border-color: rgba(10, 31, 80, .2); }
.team-card--reserved .media-slot-art svg { opacity: .35; }
.team-card--reserved .media-slot-art .g-arc { stroke: var(--navy); }
.team-card--reserved .media-tag { background: rgba(10, 31, 80, .07); color: var(--ink-55); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
  /* FINAL POLISH (6 Sep): stretch (not start) so both door cards render
     equal height whatever the copy; each card is a flex column whose
     paragraph flexes, so the buttons bottom-align with each other.    */
  align-items: stretch;
}

/* ------------------------------------------------------------------ */
/* 18 · Reduced motion — everything settles to its final state         */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .js [data-reveal], .hero-title .line, .hero-lead, .hero-cta,
  .js .chain li, .js .chain li .chain-node,
  .js .score-stack li { opacity: 1 !important; transform: none !important; }
  .theatre-kicker { opacity: 1 !important; transform: none !important; }
  /* R4.5: new motion items settle to static end states */
  .nc-line, .rw-pill, .rw-rating .rw-stars span,
  .outreach-row figure { opacity: 1 !important; transform: none !important; }
  /* Round 2/3.5: static end-states if reduce is toggled after arming */
  .theatre .t-old, .theatre .t-arrow, .theatre .t-new { opacity: 1 !important; transform: none !important; }
  .theatre .th-old, .theatre .th-vs, .theatre .th-new { opacity: 1 !important; transform: none !important; }
  .theatre .th-new::after { transform: scaleX(1) !important; }
  mark.hl .hl-w { background-size: 100% .78em !important; }
  .hero-pulse { opacity: 0 !important; }
  .gauge-q { opacity: 1; }
  .scroll-cue { display: none; }
}