/* ============================================================
   Marketing Firepower · BD site wireframe
   MONOCHROME. Structure + hierarchy only. No brand colour yet.
   Type system kept consistent with the BD work (Source Serif 4
   + Poppins) so the base layer translates cleanly into design.
   ============================================================ */

:root {
  /* Professionals brand palette */
  --charcoal:    #373D40;
  --charcoal-75: #5F6467;
  --charcoal-50: #9B9E9F;
  --charcoal-25: #CDCFD0;
  --cream:       #ECE7DC;
  --cream-75:    #F1EDE5;
  --cream-50:    #F5F3EE;
  --cream-25:    #FAF9F6;
  --ruby:        #FF4753;
  --white:       #FFFFFF;

  /* Semantic aliases (charcoal-led, text on light is charcoal) */
  --ink:        #373D40;   /* charcoal · primary text on light */
  --ink-soft:   #5F6467;   /* charcoal-75 · muted body on light */
  --grey-700:   #5F6467;
  --grey-500:   #9B9E9F;
  --grey-300:   #CDCFD0;
  --grey-200:   #E4E4E2;
  --grey-100:   #F2F0EB;
  --paper:      #ECE7DC;   /* cream base field */
  --hairline:      rgba(55, 61, 64, 0.14);
  --hairline-soft: rgba(55, 61, 64, 0.08);

  /* Dark-surface hairlines */
  --hairline-on-dark:      rgba(255, 255, 255, 0.16);
  --hairline-on-dark-soft: rgba(255, 255, 255, 0.10);

  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Poppins', system-ui, -apple-system, sans-serif;

  --maxw: 1160px;
  --gutter: clamp(24px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Wireframe flag ---------- */
.wf-flag {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 200;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 12px;
  pointer-events: none;
}

/* ---------- Wireframe placeholders ---------- */
.wf-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      transparent, transparent 11px,
      rgba(20,22,26,0.035) 11px, rgba(20,22,26,0.035) 12px),
    var(--grey-100);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-500);
  border-radius: 4px;
}
.wf-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-500);
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow { max-width: 760px; }
.container-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.section {
  /* One confident screen per panel · content vertically centred, tighter
     padding paced off viewport HEIGHT so wide monitors don't inflate the gaps */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(48px, 6vh, 80px);
  padding-bottom: clamp(48px, 6vh, 80px);
  border-top: 1px solid var(--hairline-soft);
}
/* Panels that genuinely hold more than one screen (the work grid, the orbit)
   opt out of the height clamp so nothing gets crushed */
.section.section-tall { min-height: 0; }

/* ---------- Type primitives ---------- */
.eyebrow, .section-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.section-eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }

.section-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

/* Italic Ruby Rule · every italic word in a Source Serif 4 headline is Ruby */
.hero-head em,
.section-head em,
.contact-head em,
.ask-head em,
.stat-copy .section-head em { font-style: italic; color: var(--ruby); }
.section-head-center { max-width: 24ch; margin-left: auto; margin-right: auto; text-align: center; }

.prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: clamp(20px, 2.5vw, 28px);
}
.prose p + p { margin-top: 1em; }   /* paragraphs read as separate paras */
.prose-center { margin-left: auto; margin-right: auto; text-align: center; }

/* Partners · lead para reads bold above the two support paras */
.section-partners .section-sub { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { font-size: 16px; padding: 17px 28px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;           /* film shows through at the top */
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav.is-scrolled {
  background: rgba(55,61,64,0.94);   /* charcoal once scrolled off the film */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline-on-dark);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
}
.nav-logo img {
  height: 28px;   /* +25% */
  width: auto;
  display: block;
}
.logo-mark {
  width: 18px; height: 22px;
  border: 2px solid var(--ink);
  border-radius: 3px 9px 3px 3px;
  display: inline-block;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}
.nav-links a { position: relative; padding: 4px 0; transition: color .2s ease; }
.nav-links a:hover { color: var(--white); }
.nav-links a.is-active { color: var(--white); }
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--ruby);
  border-radius: 1px;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;   /* button sits on the right */
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  padding: 10px 16px;
  border: 1px solid var(--hairline-on-dark);
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-cta:hover { background: var(--white); color: var(--charcoal); border-color: var(--white); }

@media (max-width: 860px) {
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 12px var(--gutter); gap: 12px; }
  .nav-logo img { height: 25px; }   /* +15% */
  .nav-cta { font-size: 12px; padding: 8px 14px; gap: 6px; }
  .nav-cta span { white-space: nowrap; }
  .nav-cta svg { display: none; }   /* drop the arrow to save width */
}

/* ============================================================
   HERO · Option A: full-bleed brand film, centred content
   The film fills behind the transparent nav (hero pulled up by
   the nav height); a charcoal overlay keeps the headline crisp.
   ============================================================ */
/* Scroll hero: 180vh zone, sticky 100vh stage. Slash shards rise from
   below and pass over the centred content; the film fades to charcoal so
   the Progeny panel below slides up through a seamless handover. */
.hero-zone {
  position: relative;
  margin-top: -76px;                 /* charcoal fills behind the transparent nav */
}
.hero-stage {
  position: relative;
  min-height: 100vh;
  background: var(--charcoal);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; will-change: opacity; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30,33,36,0.45) 0%, rgba(30,33,36,0.45) 55%,
      rgba(55,61,64,0.72) 80%, rgba(55,61,64,1) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(30,33,36,0.32), rgba(30,33,36,0.62));
}
/* Slash shards (real brand geometry) rising over the content */
/* Shard layer · sticky, ABOVE the Progeny panel (z-4) so nothing paints over
   the shards; overflow visible so they're never geometrically clipped either.
   They dissolve purely via opacity through the handover (see script.js). */
.hero-shard-layer {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-top: -100vh;    /* overlap the stage so both pin to the viewport together */
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}
.hero-shards { position: absolute; inset: 0; pointer-events: none; }
.hero-shard {
  position: absolute;
  top: 0;
  aspect-ratio: 453.4 / 486.6;
  will-change: transform;
  transform: translateY(120vh);
  /* Shadow lives on the UN-clipped parent so it isn't cropped by the slash;
     the image itself carries the clip-path. */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35)) drop-shadow(0 52px 84px rgba(0,0,0,0.5));
}
.hero-shard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(0 0, 0 47.76%, 100% 100%, 100% 0);
}
.hero-shard.s1 { width: 219px; left: 6%; }
.hero-shard.s2 { width: 345px; left: 24%; }
.hero-shard.s3 { width: 174px; left: 54%; }
.hero-shard.s4 { width: 414px; left: 68%; }
.hero-shard.s5 { width: 265px; left: 42%; }
@media (max-width: 720px) {
  .hero-shard.s1 { width: 138px; }
  .hero-shard.s2 { width: 219px; }
  .hero-shard.s3 { width: 118px; }
  .hero-shard.s4 { width: 242px; }
  .hero-shard.s5 { width: 173px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-zone { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 100vh; }
  .hero-shards { display: none; }
}

/* Centred hero content · normal flow, fills the viewport */
.hero-inner-c {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;   /* centre when it fits, align to top when tall (never clip the top) */
  text-align: center;
  width: 100%;
  padding: clamp(80px, 9.5vh, 116px) var(--gutter) clamp(52px, 6vh, 84px);
}
.eyebrow-ruby { color: var(--ruby); }
.hero-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 7vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 16px 0 0;
}
.hero-head em { font-style: italic; }
/* Headline reveals line by line; each line slides up from behind a mask.
   Padding gives ascenders/descenders room inside the clip; the matching
   negative margin keeps the line spacing exactly as designed. */
.hero-head .hl { display: block; overflow: hidden; padding: 0.18em 0.06em; margin: -0.18em -0.06em; }
.hero-head.reveal-done .hl { overflow: visible; }   /* unclip so the ruby turn isn't cropped */
.hero-head .hl > span { display: inline-block; transform: translateY(115%); animation: heroLineUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-head .hl:nth-child(1) > span { animation-delay: .15s; }
.hero-head .hl:nth-child(2) > span { animation-delay: .28s; }
.hero-head .hl:nth-child(3) > span { animation-delay: .41s; }
.hero-head .hl:nth-child(4) > span { animation-delay: .54s; }
@keyframes heroLineUp { to { transform: translateY(0); } }
/* Eyebrow first, sub + buttons fade in once the headline has landed */
.hero-inner-c .eyebrow { opacity: 0; animation: heroFade .7s ease .1s forwards; }
.hero-inner-c .hero-sub { opacity: 0; animation: heroFade .7s ease 1.2s forwards; }
.hero-inner-c .hero-ctas { opacity: 0; animation: heroFade .7s ease 1.36s forwards; }
@keyframes heroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* "Firepower" turns from regular white to ruby italic (cross-fade of two layers) */
.hero-head .turn-word { position: relative; display: inline-block; }
/* The Turn · Option B "Skew Through". Both layers lean the SAME way through
   the whole move, so the overlap reads as motion blur rather than the double
   image the old opposite-direction crossfade produced. Plain is nearly gone
   before emph arrives (short overlap window), which kills the mushy middle. */
.hero-head .turn-word .plain {
  display: inline-block;
  transform: skewX(0deg);
  transition: opacity .26s cubic-bezier(.4,0,1,1), transform .62s cubic-bezier(.22,.7,.24,1);
}
.hero-head .turn-word .emph {
  position: absolute; left: 50%; top: 0; white-space: nowrap;
  font-style: italic; color: var(--ruby); opacity: 0;
  transform: translateX(-50%) skewX(-11deg) scaleX(1.02);
  transition: opacity .34s cubic-bezier(0,0,.3,1) .16s, transform .62s cubic-bezier(.22,.7,.24,1);
}
.hero-head .turn-word.turned .plain { opacity: 0; transform: skewX(-11deg); }
.hero-head .turn-word.turned .emph { opacity: 1; transform: translateX(-50%) skewX(0deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-head .hl > span,
  .hero-inner-c .eyebrow, .hero-inner-c .hero-sub, .hero-inner-c .hero-ctas { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-head .turn-word .plain { opacity: 0; }
  .hero-head .turn-word .emph { opacity: 1; transform: translateX(-50%); }
}
.hero-sub {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 40ch;                 /* tighter, so the last line isn't an orphan */
  text-wrap: balance;              /* even out the lines */
  margin: clamp(16px, 2vw, 24px) auto 0;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 30px);
}
/* Primary CTA reverses on the film · cream fill, charcoal text */
.hero-ctas .btn-primary {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--cream);
}
.hero-ctas .btn-ghost {
  color: var(--white);
  border-color: rgba(255,255,255,0.32);
}
.hero-ctas .btn-ghost:hover { border-color: var(--white); }

.hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hero-scroll-line { width: 1px; height: 34px; background: rgba(255,255,255,0.35); }

@media (max-width: 560px) {
  .hero-scroll { display: none; }
}

/* ============================================================
   01 · INVESTMENT
   ============================================================ */
.stat-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.stat-figure { display: flex; flex-direction: column; align-items: center; }
.stat-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(96px, 17vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
/* Liquid coin · the dollar is the coin, half of it filled for marketing.
   Gentle two-layer surface wave; clean 50% fill. */
.liquid {
  width: clamp(200px, 24vw, 300px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(255,71,83,0.7);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.liquid b {
  position: relative;
  z-index: 3;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 5.6vw, 68px);
  letter-spacing: -0.02em;
  color: var(--white);
}
.liquid b .c { font-size: 0.55em; }
.liquid-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  z-index: 1;
  animation: liquid-wave-move 7s linear infinite;
}
.liquid-wave svg { width: 100%; height: 100%; display: block; }
.liquid-wave.back { opacity: 0.5; animation-duration: 11s; animation-direction: reverse; }
@keyframes liquid-wave-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-wave { animation: none; }
}
.stat-unit {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-top: 12px;
}
.stat-copy .section-head { max-width: 18ch; }

@media (max-width: 780px) {
  .stat-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   02 · AGENCY
   ============================================================ */
.panel-media {
  aspect-ratio: 4 / 5;
  min-height: 340px;
}
.tick-list {
  list-style: none;
  margin-top: clamp(24px, 3vw, 34px);
  display: grid;
  gap: 12px;
}
.tick-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 8px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .container-2col { grid-template-columns: 1fr; }
  .panel-media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ============================================================
   03 · PARTNERS
   ============================================================ */
.partner-grid {
  list-style: none;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.partner-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 34px) clamp(16px, 1.8vw, 24px);
  min-height: 190px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background .2s ease;
}
.partner-tile:hover { background: var(--white); }
.partner-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grey-500);
}
.partner-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  margin-top: auto;
}
.partner-desc {
  font-size: 13px;
  color: var(--grey-700);
}
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   04 · PROOF
   ============================================================ */
.section-proof { overflow-x: clip; padding: 0; }  /* sign-off band runs flush to the cream panel below */
/* Centred intro frame · headline + sub + showreel stacked neatly in one viewport */
.section-proof {
  --reel-inset: 40px;                    /* shared by the showreel and the masonry */
}
@media (max-width: 640px) {
  .section-proof { --reel-inset: 16px; } /* 40px each side eats too much on a phone */
}
.proof-intro {
  /* No 100vh min-height: it reserved a whole screen for three lines and
     dumped ~400px of dead flex space between the sub and the showreel. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(clamp(72px, 11vw, 150px)) var(--gutter) clamp(20px, 2.6vw, 34px);
}
/* Masonry · same edge inset as the showreel so the two line up exactly */
.proof-grid {
  position: relative;
  width: calc(100vw - var(--sbw, 0px) - (var(--reel-inset) * 2));
  margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2) + var(--reel-inset));
  margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2) + var(--reel-inset));
  padding-left: 0;
  padding-right: 0;
}
/* Showreel · billed as its own moment so it reads as the centrepiece */
.reel-block {
  position: relative;                    /* anchor for the tag straddling the frame */
  display: flow-root;                    /* no margin collapse, so the block top
                                            is exactly the film's top edge */
  margin-top: clamp(50px, 5.6vw, 72px);
}
/* Tag sits astride the top edge of the frame, half on the page, half on the film */
.reel-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ruby);
  color: var(--white);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.reel-tag .live-dot { background: var(--white); }

.reel {
  position: relative;
  /* --sbw is the scrollbar width, set in JS. 100vw counts the scrollbar,
     so without it the gap lands short of the 40px asked for. */
  width: calc(100vw - var(--sbw, 0px) - (var(--reel-inset) * 2));
  /* break out of the padded intro, then pull back in by the inset */
  margin: 0 calc(50% - 50vw + (var(--sbw, 0px) / 2) + var(--reel-inset));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(10px, 1.1vw, 18px);
  /* deep, soft shadow so the film lifts off the charcoal */
  box-shadow:
    0 48px 100px rgba(0,0,0,0.58),
    0 18px 40px  rgba(0,0,0,0.42);
}

.reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  border-radius: 50%;
  border: none;
  background: var(--ruby);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;                     /* optical centring of the triangle */
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.reel-play:hover { transform: translate(-50%, -50%) scale(1.08); }
/* Soft ruby pulse so the reel visibly invites a click */
.reel-play::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--ruby);
  opacity: 0;
  animation: reel-pulse 2.6s ease-out infinite;
}
@keyframes reel-pulse {
  0%   { transform: scale(0.86); opacity: 0.65; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.reel.is-loud .reel-play { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .reel-play::after { animation: none; }
}
/* Masonry work grid · 4 cols × 4 rows, varied frame sizes that tile
   perfectly. A big hero frame (National Brand Campaign) anchors it,
   with alternating wides and talls giving a dynamic, editorial rhythm. */
.proof-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 26vh, 270px);   /* 3 rows -> aims to fit one screen */
  gap: 10px;
  margin-top: clamp(12px, 2vw, 20px);
}
.proof-tile {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(46px) scale(0.965);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.proof-tile.in { opacity: 1; transform: none; }
.proof-tile img,
.proof-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.proof-tile:hover video { transform: scale(1.04); }
.proof-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,22,24,0.72));
}
.proof-tile:hover img { transform: scale(1.04); }
/* Agent Profiles art is busy/bright, so a heavier resting scrim keeps the name legible */
.proof-tile.tile-shade::after { background: linear-gradient(180deg, rgba(20,22,24,0.15) 0%, transparent 30%, rgba(20,22,24,0.85) 100%); }
/* Explicit placements → guaranteed gap-free masonry */
/* 8 tiles · clean 4-col x 3-row masonry, gap-free */
.proof-tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }  /* National Brand Campaign · hero 2x2 */
.proof-tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }  /* Local Area Marketing */
.proof-tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }  /* Seasonal Campaigns */
.proof-tile:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }  /* Events */
.proof-tile:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }  /* The Template Library */
.proof-tile:nth-child(6) { grid-column: 1 / 2; grid-row: 3 / 4; }  /* Agent Profiles */
.proof-tile:nth-child(7) { grid-column: 2 / 3; grid-row: 3 / 4; }  /* Social and Content */
.proof-tile:nth-child(8) { grid-column: 3 / 5; grid-row: 3 / 4; }  /* Lead Generation · wide */

.proof-name {
  position: absolute;
  left: 18px;
  bottom: 15px;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.1;
}
/* Hero frame title reads larger */
.proof-tile:nth-child(1) .proof-name { font-size: clamp(22px, 2.4vw, 34px); }
.proof-tile .wf-label {
  position: absolute;
  top: 14px;
  left: 14px;
}
/* Sign-off band · full-bleed, parallax image behind the caption */
.caption-band {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: clamp(60px, 7vw, 100px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(170px, 20vw, 290px) var(--gutter);
}
.caption-band-bg {
  position: absolute;
  inset: -22% 0;              /* headroom for the parallax travel */
  z-index: 0;
}
.caption-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.caption-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* fades to solid panel charcoal at the top so the band melts seamlessly
     out of the grid section above; base wash keeps the text crisp */
  background:
    linear-gradient(180deg, rgb(55,61,64) 0%, rgba(55,61,64,0.65) 24%, rgba(55,61,64,0) 58%),
    rgba(44,49,52,0.78);
}
.grid-caption {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  max-width: none;
  margin: 0 auto;
  text-align: center;
}
/* Lead-in styled as a Poppins all-caps eyebrow */
.grid-caption .gc-lead {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
/* The payoff · big statement line */
.grid-caption .gc-hero {
  display: block;
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}
/* Desktop · constrain so the caption flows naturally over 3 lines */
@media (min-width: 769px) {
  .grid-caption .gc-hero { max-width: 20ch; margin: 0 auto; text-wrap: balance; }
}
.grid-caption em {
  font-style: italic;
  color: var(--ruby);
}
/* Tablet + mobile · snug 2-col masonry. Every nth-child placement is
   re-declared here (equal specificity, later source) so the desktop 4-col
   placements can't leak in and collapse the grid. */
@media (max-width: 900px) {
  .proof-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(128px, 30vw, 200px);
    gap: 8px;
  }
  .proof-tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }  /* National · full-width banner */
  .proof-tile:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }  /* Local Area */
  .proof-tile:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }  /* Seasonal */
  .proof-tile:nth-child(4) { grid-column: 1 / 2; grid-row: 3 / 4; }  /* Events */
  .proof-tile:nth-child(5) { grid-column: 2 / 3; grid-row: 3 / 4; }  /* Lead Generation */
  .proof-tile:nth-child(6) { grid-column: 1 / 2; grid-row: 4 / 5; }  /* Agent Profiles */
  .proof-tile:nth-child(7) { grid-column: 2 / 3; grid-row: 4 / 5; }  /* Social */
  .proof-tile:nth-child(8) { grid-column: 1 / 3; grid-row: 5 / 6; }  /* Template Library · full-width */
}

/* ============================================================
   ASSESSMENT TEASER
   ============================================================ */
.section-assess { text-align: center; background: var(--white); }
.tag-soon {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-700);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
.assess-cta { margin-top: clamp(28px, 3.4vw, 40px); }

/* ============================================================
   THE ASK · branded charcoal section (Bill + form)
   Charcoal field, white text, Ruby Red italic pivot word.
   Ruby (#FF4753) / Charcoal (#373D40) per Professionals brand.
   ============================================================ */
.section-ask {
  background: #373D40;              /* Charcoal */
  color: #ffffff;
  text-align: center;
  border-top: none;
}
.section-ask .section-eyebrow { color: rgba(255,255,255,0.55); }
.section-ask .eyebrow-ruby { color: #FF4753; }   /* Ruby eyebrow on dark */

.ask-head {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: #ffffff;
  max-width: 18ch;
  margin: 10px auto 0;
}
.ask-head em { font-style: italic; color: #FF4753; }   /* Italic Ruby Rule */

/* Bill's note */
.ask-note {
  max-width: 620px;
  margin: clamp(20px, 2.4vh, 30px) auto 0;
}
.ask-body {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  text-align: center;
}
.ask-sign {
  margin-top: clamp(16px, 2vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ask-signature {
  height: 62px;
  width: auto;
  margin: 0 auto;
  overflow: visible;
}
/* Signature writes itself in: outline draws stroke by stroke, then the
   ruby ink fills. JS drives dash offsets; this handles the ink fade. */
.ask-signature path {
  fill: var(--ruby);
  stroke: var(--ruby);
  stroke-width: 0.5;
  transition: fill-opacity 0.9s ease;
}
.ask-signature.is-armed path { fill-opacity: 0; }
.ask-signature.is-inked path { fill-opacity: 1; }
.ask-sign-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ask-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-image: var(--src);
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
.ask-name {
  text-align: left;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
}
.ask-name strong {
  display: block;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1px;
}

/* Accent (Ruby) button · brand-critical CTA */
.btn-accent {
  background: #FF4753;
  color: #ffffff;
  border-color: #FF4753;
}
.btn-accent:hover { transform: translateY(-2px); background: #ff5a65; }
.btn-block { width: 100%; justify-content: center; }

/* Contact form on charcoal */
.contact-form {
  max-width: 560px;
  margin: clamp(24px, 3vh, 40px) auto 0;
  text-align: left;
}
.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.contact-form label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.contact-form .optional {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  margin-left: 4px;
}
.contact-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 16px;
  padding: 8px 0 10px;
  outline: none;
  transition: border-color .2s ease;
}
.contact-form input:focus { border-bottom-color: #FF4753; }
.contact-form .btn-block { margin-top: 16px; grid-column: 1 / -1; }

.field-error {
  font-size: 12px;
  color: #FF4753;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  margin-top: -2px;
}
.field.has-error input { border-bottom-color: #FF4753; }
.field.has-error label { color: #FF4753; }
.contact-error {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 500;
  color: #FF4753;
  background: rgba(255,71,83,0.10);
  border-left: 2px solid #FF4753;
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: 2px;
}
.contact-form button[disabled] { opacity: 0.6; cursor: wait; }
.contact-success {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  padding: 40px 0;
}

@media (max-width: 600px) {
  .contact-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 44px) 0;
  background: var(--paper);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
}
.footer-logo img { height: 32px; width: auto; display: block; }   /* +60% */
.footer-meta {
  font-size: 12px;
  color: var(--grey-500);
  letter-spacing: 0.04em;
}

/* ============================================================
   BRAND SURFACES · Professionals palette across the 7 panels
   Order: Hero(charcoal) · Progeny(cream) · Proof(charcoal) ·
   Partners(cream) · Commitment(charcoal) · Benchmark(ruby) ·
   Ask(charcoal) · Footer(charcoal). Ruby is accent only, except
   the one deliberate ruby moment on the Benchmark hook panel.
   ============================================================ */

/* Section sub-headline (lead line under each headline) */
.section-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-top: clamp(16px, 2vw, 24px);
}
.sub-center { margin-left: auto; margin-right: auto; text-align: center; max-width: 46ch; }
.panel-cta { margin-top: clamp(24px, 3vw, 34px); }
.container-2col-top { align-items: start; }

/* --- Progeny · Charcoal, centred (slides up through the hero handover) --- */
/* --- Progeny · Charcoal, copy left + Sean/James image right (v1 split) --- */
.section-progeny {
  background: var(--charcoal);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-progeny .container { position: relative; z-index: 2; text-align: center; max-width: 630px; }
/* Full-bleed image, faded top/bottom, with a left-to-right scrim under the copy */
.progeny-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* fade top and bottom into the charcoal */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.progeny-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.3;                 /* Sean and James faded behind the copy */
  /* subtle parallax: scaled a touch so the vertical drift never reveals an edge */
  transform: translate3d(0, var(--par, 0px), 0) scale(1.1);
  will-change: transform;
}

.section-progeny .section-eyebrow { color: var(--ruby); }
.section-progeny .section-head { color: var(--white); }
.section-progeny .section-sub { color: rgba(255,255,255,0.92); }
.section-progeny .prose { color: rgba(255,255,255,0.85); }
@media (max-width: 860px) {
    .progeny-bg img { object-position: center 22%; }
  /* mobile: darker at top (copy sits there) clearing lower so the men still read */

  .progeny-copy .section-head,
  .progeny-copy .section-sub,
  }

/* --- The Proof · Charcoal --- */
.section-proof {
  background: var(--charcoal);
  color: var(--white);
}
.section-proof .section-eyebrow { color: var(--ruby); }
.section-proof .section-head { color: var(--white); }
.section-proof .section-sub { color: rgba(255,255,255,0.92); }
.section-proof .wf-placeholder {
  background:
    repeating-linear-gradient(135deg, transparent, transparent 11px,
      rgba(255,255,255,0.04) 11px, rgba(255,255,255,0.04) 12px),
    rgba(255,255,255,0.05);
  border-color: var(--hairline-on-dark);
}
.section-proof .wf-label {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border-color: var(--hairline-on-dark);
}

/* --- Partners · Cream · the orbit (Progeny at centre, specialists around it) --- */
.partners-intro { text-align: left; min-width: 0; }
.partners-head { max-width: 16ch; text-wrap: balance; }
/* Intro copy · two even paragraphs, no bold, sitting together above the diagram */
.partners-intro .section-sub + .section-sub { margin-top: 14px; }

/* Two columns · copy left, diagram right, so the whole panel fits one screen */
.partners-split {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.orbit {
  position: relative;
  width: min(100%, 540px);        /* smaller · was 940 · now sits in its column */
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 880px) {
  .partners-split { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .partners-intro { text-align: center; }
  .orbit { width: min(100%, 460px); }
}
.orbit-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbit-ring {
  fill: none;
  stroke: rgba(55,61,64,0.16);
  stroke-width: 0.25;
  stroke-dasharray: 1.4 1.8;
}
.orbit-spoke {
  stroke: rgba(55,61,64,0.18);
  stroke-width: 0.2;
}

/* Centre · Progeny */
.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 24%, 230px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* px, not %, because percentage padding resolves against the orbit,
     not the circle, and was crushing the logo to 39% of its size */
  padding: 0 14px;
  box-shadow: 0 24px 60px rgba(55,61,64,0.28);
  z-index: 2;
}
.orbit-core img {
  width: 84%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);        /* dark wordmark → white on charcoal */
}
.orbit-core-role {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ruby);
  text-align: center;
}

/* Nodes · six specialists on the ring */
.orbit-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(132px, 19.5%, 172px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  z-index: 3;
}
.orbit-node.n1 { top: 12%; left: 50%; }
.orbit-node.n2 { top: 31%; left: 82.9%; }
.orbit-node.n3 { top: 69%; left: 82.9%; }
.orbit-node.n4 { top: 88%; left: 50%; }
.orbit-node.n5 { top: 69%; left: 17.1%; }
.orbit-node.n6 { top: 31%; left: 17.1%; }

/* Horizontal card, not a circle · partner logos are wordmarks, so they need
   width. A circle crushed them to an illegible smudge. */
.orbit-mark {
  width: 100%;
  height: clamp(52px, 5.6vw, 66px);
  border-radius: 12px;
  background: var(--white);
  border: 1px solid rgba(55,61,64,0.12);
  box-shadow: 0 10px 26px rgba(55,61,64,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.orbit-mark img {
  max-width: 100%;
  max-height: 58%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Typographic stand-in, shaped like a wordmark so it previews the real thing */
.orbit-mark-type {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.orbit-node:hover .orbit-mark {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(55,61,64,0.2);
}
.orbit-role {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(55,61,64,0.6);
}

/* Small screens · the ring stops working, so stack it as a clean list */
@media (max-width: 700px) {
  .orbit {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
    max-width: 420px;
  }
  .orbit-lines { display: none; }
  .orbit-core {
    position: static;
    transform: none;
    order: -1;                 /* the hub leads on mobile */
    grid-column: 1 / -1;
    width: min(220px, 64%);
    aspect-ratio: 1;
    margin: 0 auto 20px;
  }
  .orbit-node {
    position: static;
    transform: none;
    width: 100%;
  }
  .orbit-mark { width: 100%; }
}

/* --- The Commitment · Charcoal --- */
.section-commitment {
  background: var(--charcoal);
  color: var(--white);
}
.section-commitment .section-eyebrow { color: var(--ruby); }
.section-commitment .section-head { color: var(--white); }
.section-commitment .section-sub { color: rgba(255,255,255,0.92); }
.section-commitment .prose { color: rgba(255,255,255,0.85); }
.stat-num { color: var(--white); }
.stat-pct { color: var(--white); font-size: 0.5em; }
.section-commitment .stat-unit { color: rgba(255,255,255,0.55); }

/* --- The Benchmark · Deep charcoal (a shade darker than the panels around it) --- */
.section-benchmark {
  background: #2C3134;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-benchmark .container { position: relative; z-index: 2; }
/* Glass card · contains the panel copy and frosts the question field behind it.
   backdrop-filter needs no opacity/transform on the card's ancestors. */
.benchmark-card {
  position: relative;
  background: rgba(44,49,52,0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
          backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: clamp(44px, 6vw, 84px) clamp(28px, 5vw, 72px);
  box-shadow: 0 44px 90px rgba(0,0,0,0.45);
}

/* Soft ruby blob · big blurred glow at the back of the field */
.benchmark-blob {
  position: absolute;
  z-index: 0;
  width: 44vw;
  aspect-ratio: 1 / 1;
  left: -8%;
  top: 22%;
  background: radial-gradient(circle at 42% 42%, rgba(255,71,83,0.9), rgba(255,71,83,0) 68%);
  filter: blur(70px);
  opacity: 0.25;
  pointer-events: none;
  will-change: transform;
}

/* Ghosted benchmark-tool preview · angled in 3D perspective behind the copy,
   heavily faded so it reads as texture teasing the tool, never competing. */
.benchmark-ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  perspective: 1400px;
  opacity: 0.38;
  /* No centre mask: the glass card frosts whatever passes behind it */
}
.ghost-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.2s ease;
  will-change: transform, opacity, filter;
}
/* Three questions, layered at different angles, depths and sizes.
   --rise drives the slide-up entrance; blur + shadow grade the depth. */
.ghost-card.g1 {
  right: -40px;
  top: 50%;
  width: 540px;
  transform: translateY(-50%) rotateY(-24deg) rotateX(7deg) rotateZ(1.5deg) translateY(var(--rise, 0px));
  transform-origin: right center;
  filter: blur(0px) drop-shadow(0 34px 60px rgba(0,0,0,0.55));
  animation: ghost-bob-a 12s ease-in-out infinite;
}
.ghost-card.g2 {
  left: -70px;
  top: -40px;
  width: 470px;
  transform: rotateY(26deg) rotateX(-5deg) rotateZ(-2deg) translateY(var(--rise, 0px));
  transform-origin: left center;
  opacity: 0.85;
  filter: blur(1.2px) drop-shadow(0 26px 46px rgba(0,0,0,0.45));
  animation: ghost-bob-a 15s ease-in-out 1.4s infinite;
  transition-delay: 0.25s;
}
.ghost-card.g3 {
  left: 10%;
  bottom: -90px;
  width: 430px;
  transform: rotateY(16deg) rotateX(12deg) rotateZ(1deg) translateY(var(--rise, 0px));
  transform-origin: left bottom;
  opacity: 0.7;
  filter: blur(2.2px) drop-shadow(0 20px 36px rgba(0,0,0,0.4));
  animation: ghost-bob-b 18s ease-in-out 2.6s infinite;
  transition-delay: 0.5s;
}
.ghost-card.g4 {
  right: 4%;
  bottom: -80px;
  width: 440px;
  transform: rotateY(-17deg) rotateX(10deg) rotateZ(-1deg) translateY(var(--rise, 0px));
  transform-origin: right bottom;
  opacity: 0.78;
  filter: blur(1.6px) drop-shadow(0 22px 40px rgba(0,0,0,0.42));
  animation: ghost-bob-b 16s ease-in-out 3.4s infinite;
  transition-delay: 0.75s;
}
.ghost-card.g4 .ghost-progress span { width: 60%; }
.ghost-card.g5 {
  left: 26%;
  top: 4%;
  width: 400px;
  transform: rotateY(12deg) rotateX(-7deg) rotateZ(-1deg) translateY(var(--rise, 0px));
  transform-origin: center top;
  opacity: 0.65;
  filter: blur(1px) drop-shadow(0 20px 38px rgba(0,0,0,0.4));
  animation: ghost-bob-a 17s ease-in-out 4.2s infinite;
  transition-delay: 1s;
}
.ghost-card.g5 .ghost-progress span { width: 52%; }
.ghost-card.g6 {
  right: 22%;
  bottom: 0;
  width: 410px;
  transform: rotateY(-10deg) rotateX(8deg) rotateZ(1.5deg) translateY(var(--rise, 0px));
  transform-origin: center bottom;
  opacity: 0.6;
  filter: blur(1.4px) drop-shadow(0 20px 36px rgba(0,0,0,0.38));
  animation: ghost-bob-b 14s ease-in-out 5s infinite;
  transition-delay: 1.25s;
}
.ghost-card.g6 .ghost-progress span { width: 85%; }
/* Pre-entrance: lower, invisible, out of focus. JS adds .is-in to the layer. */
.benchmark-ghost:not(.is-in) .ghost-card {
  --rise: 90px;
  opacity: 0;
  filter: blur(9px);
}
/* Slow idle float · keeps the background alive without drawing the eye */
@keyframes ghost-bob-a {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -10px; }
}
@keyframes ghost-bob-b {
  0%, 100% { margin-bottom: 0; }
  50%      { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost-card { animation: none !important; transition: none; }
  .benchmark-ghost:not(.is-in) .ghost-card { --rise: 0px; opacity: inherit; filter: none; }
}
.ghost-progress {
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ghost-progress span {
  display: block;
  width: 32%;
  height: 100%;
  background: var(--ruby);
  border-radius: 2px;
}
.ghost-card.g2 .ghost-progress span { width: 45%; }
.ghost-card.g3 .ghost-progress span { width: 78%; }
.ghost-dim {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.ghost-q {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 8px;
}
.ghost-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--white);
}
.ghost-opt.is-picked {
  background: rgba(255,255,255,0.18);
  border-color: var(--white);
}
.ghost-key {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.ghost-opt.is-picked .ghost-key {
  background: var(--white);
  color: var(--ruby);
  border-color: var(--white);
}
@media (max-width: 900px) {
  .benchmark-ghost { display: none; }   /* keep mobile clean */
}
.section-benchmark .section-eyebrow {
  color: var(--ruby);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Live dot · a slow radar ping that makes the tool feel switched on */
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ruby);
  flex-shrink: 0;
}
.live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ruby);
  animation: live-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
  0%        { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::before { animation: none; opacity: 0; }
}
.section-benchmark .section-head { color: var(--white); }
.section-benchmark .section-head em { color: var(--ruby); font-style: italic; }
.section-benchmark .section-sub { color: rgba(255,255,255,0.92); }
.section-benchmark .prose {
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin-left: auto; margin-right: auto;
}
.section-benchmark .btn-primary { background: var(--ruby); color: var(--white); border-color: var(--ruby); }
.section-benchmark .btn-primary:hover { background: #ff5a65; }
.benchmark-attrib {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: clamp(22px, 2.6vw, 30px);
}
.benchmark-cta { margin-top: clamp(20px, 2.4vw, 28px); }
.benchmark-support {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 16px;
}

/* --- The Ask · Charcoal --- */
.section-ask .section-sub { color: rgba(255,255,255,0.92); }
/* Subtle divider from the ruby Benchmark above */
.section-ask { border-top: 1px solid var(--hairline-on-dark); }

/* --- Footer · Charcoal --- */
.footer {
  background: var(--charcoal);
  border-top-color: var(--hairline-on-dark);
}
.footer-logo { color: var(--white); }
.footer-logo .logo-mark { border-color: var(--white); }
.footer-meta { color: rgba(255,255,255,0.5); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- What Membership Gets You · cream checklist (replaces the Benchmark panel) --- */
.section-included {
  background: var(--cream);
  color: var(--ink);
}
.included-intro { text-align: center; }
.included-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vh, 22px) clamp(30px, 4vw, 66px);
  margin: clamp(30px, 3.8vh, 50px) auto 0;
  max-width: 1000px;
}
.included-item {
  display: flex;
  gap: 14px;
  align-items: center;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.included-item.in { opacity: 1; transform: none; }
/* Ruby tick, drawn in CSS so there is no icon dependency */
.tick {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ruby);
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;                       /* optical centre of a check sits a hair high */
  width: 3.5px;
  height: 6.5px;
  border: solid var(--white);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ii-body { display: block; }
.ii-head {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ii-note {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(55,61,64,0.7);
  margin-top: 6px;
}
.included-closer {
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: clamp(44px, 5.5vh, 72px);
}
.included-closer em { font-style: italic; color: var(--ruby); }
@media (max-width: 720px) {
  .included-list { grid-template-columns: 1fr; }
}

/* Lead Generation · gradient stand-in until the real visual lands */
.tile-tbc .tbc-fill {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(255,71,83,0.55), transparent 62%),
    linear-gradient(145deg, #4A5155 0%, #3A4043 46%, #2C3134 100%);
}
/* No photo underneath, so the standard darkening scrim would only muddy it */
.tile-tbc::after { background: linear-gradient(180deg, transparent 55%, rgba(20,22,24,0.55)); }

/* --- Work grid · hover reveals a stat --- */
.proof-tile::after { transition: background .4s ease; }
.proof-tile:hover::after,
.proof-tile:focus-within::after {
  /* heavier than it looks necessary · several tiles sit on busy, bright
     artwork and the label has to hold up over all of them */
  background: linear-gradient(180deg, rgba(20,22,24,0.78) 0%, rgba(20,22,24,0.88) 100%);
}
.tile-stat {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px 46px;          /* clears the tile name sitting bottom-left */
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.proof-tile:hover .tile-stat,
.proof-tile:focus-within .tile-stat { opacity: 1; transform: none; }
.stat-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.stat-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ruby);
  max-width: 24ch;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
/* The 2x2 hero frame carries a bigger figure */
.proof-tile:nth-child(1) .stat-num { font-size: clamp(44px, 5.2vw, 82px); }
.proof-tile:nth-child(1) .stat-label { font-size: 11px; }
/* Gradient stand-in tile has its own scrim, so give it a hover state too */
.tile-tbc:hover::after { background: linear-gradient(180deg, rgba(20,22,24,0.5) 0%, rgba(20,22,24,0.72) 100%); }
/* Touch screens have no hover, so the stat is always on */
@media (hover: none), (max-width: 620px) {
  /* Touch or narrow: drop the stat overlay entirely, just the visual + name */
  .tile-stat { display: none; }
  .proof-tile::after { background: linear-gradient(180deg, transparent 20%, rgba(20,22,24,0.55) 60%, rgba(20,22,24,0.92) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .tile-stat { transition: opacity .2s ease; transform: none; }
}

/* --- Orbit · the partners drift slowly clockwise around Progeny ---
   The spin layer carries the spokes and the nodes. Each node then counter
   rotates by the same amount, so cards and labels stay upright the whole
   way round instead of tipping upside down at the bottom of the circle.
   The Progeny core sits outside the layer, so it never moves. */
.orbit-spin {
  position: absolute;
  inset: 0;
  animation: orbit-travel 200s linear infinite;
}
.orbit-node {
  animation: orbit-upright 200s linear infinite;
}
@keyframes orbit-travel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-upright {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* Hold still while someone is actually reading a logo */
.orbit:hover .orbit-spin,
.orbit:hover .orbit-node { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .orbit-spin, .orbit-node { animation: none; }
}
/* Stacked list on small screens, so no rotation to do */
@media (max-width: 700px) {
  .orbit-spin { position: static; animation: none; display: contents; }
  .orbit-node { animation: none; }
}

/* Phrase-led hover stats · no figure to lead with, so a single serif line
   carries it. The numeral sizing would blow these off the tile. */
.stat-phrase {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--white);
  max-width: 20ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.proof-tile:nth-child(1) .stat-phrase { font-size: clamp(22px, 2.2vw, 32px); }

/* --- The Commitment · ring gauge (replaces the flood) --- */
.section-commitment { background: var(--charcoal); }
.commit-split {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.commit-viz { display: flex; flex-direction: column; align-items: center; }
.ring-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 14; }
.ring-arc {
  fill: none; stroke: var(--ruby); stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 534; stroke-dashoffset: 534;                /* 2*pi*85 = 534 */
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.commit-viz.is-in .ring-arc { stroke-dashoffset: 267; }         /* exactly half */
.ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.ring-big {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(64px, 8vw, 104px); line-height: 1;
  letter-spacing: -0.04em; color: var(--ruby);
}
.ring-big .c { font-size: 0.44em; margin-left: 2px; }
.ring-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 18px; border-radius: 999px;
  background: #2C3134; border: 1px solid rgba(255,255,255,0.16);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.ring-pill b { color: var(--ruby); font-weight: 600; }
.ring-legend {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px clamp(18px, 2.4vw, 30px);
  margin-top: clamp(24px, 3vw, 36px);
}
.ring-legend li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.75);
}
.ring-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.ring-legend .swatch.on { background: var(--ruby); }
.ring-legend .swatch.off { background: rgba(255,255,255,0.22); }
.ring-qualifier {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  max-width: 15ch;
  line-height: 1.4;
  margin-top: 12px;
  text-align: center;
}
.ruby-stop { color: var(--ruby); }
.commit-copy { min-width: 0; }
.commit-copy .section-head { max-width: 16ch; }
.commit-copy .section-sub, .commit-copy .prose { max-width: 46ch; }
@media (max-width: 880px) {
  .commit-split { grid-template-columns: 1fr; }
  .commit-viz { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-arc { transition: none; }
}

/* Leader headshot · square photo cropped to the circle */
.acc-photo.has-img {
  overflow: hidden;
  padding: 0;
  background: rgba(255,255,255,0.09);
}
.acc-photo.has-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 22%;   /* bias up so the crop favours the face */
  display: block;
}

/* Phrase tiles · ruby Poppins eyebrow above the serif line, so they carry the
   same two-part rhythm as the figure tiles instead of reading as a lone sentence. */
.stat-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ruby);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  margin-bottom: 2px;
}
.tile-stat.is-phrase .stat-phrase {
  font-size: clamp(15px, 1.5vw, 20px);
  color: rgba(255,255,255,0.94);
}
.proof-tile:nth-child(1) .stat-eyebrow { font-size: 11px; }

/* --- Mobile review tweaks (2026-07) --- */
@media (max-width: 560px) {
  .hero-head { font-size: 53px; }                 /* +15% on mobile */
}
@media (max-width: 880px) {
  /* Ecosystem headline centred on mobile */
  .partners-intro { text-align: center; }
  .partners-head { max-width: none; margin-left: auto; margin-right: auto; }
  .partners-intro .section-sub { max-width: 46ch; margin-left: auto; margin-right: auto; }
  /* The Commitment · all content centred on mobile */
  .commit-copy { text-align: center; }
  .commit-copy .section-head,
  .commit-copy .section-sub,
  .commit-copy .prose { max-width: none; }
  /* What Membership Gets You · everything left-aligned on mobile */
  .included-intro { text-align: left; }
  .included-intro .section-head { text-align: left; }   /* beat .section-head-center */
  .included-intro .section-sub { text-align: left; margin-left: 0; }
  .included-intro .section-eyebrow { text-align: left; }
  .included-closer { text-align: left; }
}