/* ================================================================
   PROOF OVER PROMISES — School of Content results site
   Direction: varsity editorial on warm paper. Cream stock, heavy
   condensed caps, serif italic asides, mono chrome, one loud red.
   Grain everywhere, hairline rules, cornered frames.
   Brand tokens live in :root — swap when official assets land.
   ================================================================ */

:root {
  /* SoHK brand palette — extracted from the official badge */
  --paper:      #FFFFFF;
  --paper-deep: #F7F6F4;
  --card:       #FFFFFF;
  --ink:        #131211;
  --ink-soft:   #3E3B37;
  --ink-dim:    #716C65;
  --hairline:   #E4E1DC;
  --red:        #A5252F;   /* badge crimson */
  --red-hot:    #C22A1C;
  --red-deep:   #7A1A22;
  --orange:     #F7931E;   /* badge lettering orange */
  --tp-green:   #00B67A;
  --display:    'Archivo Black', 'Arial Black', sans-serif;
  --badge-font: 'Lilita One', 'Arial Black', sans-serif;
  --serif:      'Lilita One', 'Arial Black', sans-serif;
  --body:       'Archivo', 'Helvetica Neue', sans-serif;
  --mono:       'Archivo', 'Helvetica Neue', sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shadow-soft: 0 1px 2px rgba(19,18,17,.05), 0 8px 24px -12px rgba(19,18,17,.14);
  --shadow-lift: 0 2px 4px rgba(19,18,17,.07), 0 18px 40px -16px rgba(19,18,17,.22);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: var(--paper); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-family: var(--serif); font-style: normal; font-weight: 400; }
.mono { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.red { color: var(--red); }

/* --- atmosphere: paper grain ------------------------------------ */
.atmo { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.atmo::after {
  content: ''; position: absolute; inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-2%,-2%); }
  80% { transform: translate(4%,2%); }
}

/* --- reveal on scroll ------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.hero__eyebrow.reveal {
  clip-path: inset(0 100% 0 0); filter: blur(3px); transform: translateY(10px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1),
              clip-path .72s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.hero__eyebrow.reveal.is-in { clip-path: inset(0); filter: blur(0); transform: none; }
.hero__line--mid.reveal { filter: blur(3px); transform: translateY(12px) scale(.98); }
.hero__line--mid.reveal.is-in { filter: blur(0); transform: none; }
.hero__line--big.reveal { filter: blur(4px); transform: translateY(24px) scale(.97); }
.hero__line--big.reveal.is-in { filter: blur(0); transform: none; }

/* ================================================================
   NAV
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0 var(--gutter);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .35s ease, background .35s ease;
}
.nav__inner {
  width: 100%; max-width: 86rem; min-height: 74px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(18rem, 1fr) auto minmax(18rem, 1fr);
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
.nav.is-scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgba(19,18,17,.08);
}
.nav__brand { display: flex; align-items: center; gap: .8rem; width: fit-content; }
.nav__crest {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
}
.nav__crest img, .nav__crest svg { width: 100%; height: 100%; object-fit: contain; }
.nav__word {
  display: flex; flex-direction: column; font-family: var(--display);
  font-size: 1rem; line-height: 1.05; letter-spacing: .055em;
}
.nav__word small {
  color: var(--red); font-family: var(--body); font-size: .55rem; font-weight: 700;
  line-height: 1; letter-spacing: .24em; margin-bottom: .25rem;
}
.nav__links {
  display: flex; align-items: center; gap: .25rem; padding: .3rem;
  background: var(--paper-deep); border: 1px solid var(--hairline); border-radius: 999px;
}
.nav__links a {
  font-family: var(--mono); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); padding: .55rem .8rem; border-radius: 999px;
  transition: color .2s, background .2s; position: relative;
}
.nav__links a:hover { color: var(--ink); background: var(--paper); }
.nav__cta { justify-self: end; }

/* buttons */
.btn {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .8rem 1.5rem; border: 1px solid var(--ink);
  transition: transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  cursor: pointer; background: transparent; color: var(--ink);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--red {
  background: var(--red); border-color: var(--red); color: var(--paper);
  box-shadow: 0 4px 0 var(--red-deep);
}
.btn--red:hover { background: var(--red-hot); border-color: var(--red-hot); transform: translateY(-2px); box-shadow: 0 6px 0 var(--red-deep); }
.btn--red:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-deep); }
.btn--ghost { border-color: var(--ink-dim); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--xl { font-size: .9rem; padding: 1.2rem 2.6rem; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; position: relative;
  padding: clamp(9.25rem, 12vw, 10.75rem) var(--gutter) 3.25rem;
  background: var(--paper);
}
.hero__frame { position: absolute; inset: 5.5rem var(--gutter) 2rem; pointer-events: none; }
.corner { position: absolute; width: 26px; height: 26px; border-color: var(--ink); border-style: solid; border-width: 0; opacity: .55; }
.corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.hero__eyebrow {
  color: var(--red); font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 400; letter-spacing: .02em; line-height: 1; text-transform: lowercase;
  margin-bottom: .8rem; max-width: min(90vw, 44rem);
}
.hero__title { line-height: .9; margin-bottom: 2rem; }
.hero__line { display: block; }
.hero__line--big {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.6vw, 7.2rem);
  letter-spacing: .01em;
}
.hero__line--mid {
  font-family: var(--display); font-style: normal; font-weight: 400; text-transform: lowercase;
  font-size: clamp(1.05rem, 2.1vw, 1.75rem); letter-spacing: .08em;
  color: var(--ink);
  margin: .45rem 0 .3rem;
}
.hero__sub {
  max-width: 36rem; color: var(--ink-soft); font-size: 1.18rem; line-height: 1.6;
  margin-bottom: 2.2rem;
}
.hero__sub strong { color: var(--ink); font-weight: 700; }

/* hero testimonial strip */
.hero__proof {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 2.4rem; padding: .55rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hero__proof:hover { border-color: var(--tp-green); box-shadow: var(--shadow-soft); }
.hero__proof-stars { display: flex; gap: 3px; }
.hero__proof-stars i {
  width: 17px; height: 17px; background: var(--tp-green); display: inline-block;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hero__proof-quote { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.hero__proof-attr { font-family: var(--body); font-weight: 600; font-size: .85rem; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; }

/* --- the 3D crest ----------------------------------------------- */
.crest-stage { perspective: 1000px; position: relative; z-index: 6; width: fit-content; text-align: center; }
.crest-stage::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 72%; height: 18%; left: 14%; top: clamp(112px, 15vw, 160px);
  background: rgba(19,18,17,.26); filter: blur(16px); border-radius: 50%;
  transition: opacity .25s ease, transform .25s ease;
}
.crest-stage:hover::before { opacity: .78; transform: scale(1.08); }
.crest {
  width: clamp(130px, 17vw, 180px); aspect-ratio: 1/1;
  position: relative; margin-inline: auto; transform-style: preserve-3d; cursor: pointer;
  outline: none; filter: none;
  transition: transform .35s cubic-bezier(.22,.9,.3,1);
}
.crest.is-floating { animation: crestFloat 4.8s ease-in-out infinite; transition: none; }
.crest:focus-visible { outline: 3px solid var(--red); outline-offset: 7px; border-radius: 50%; }
@keyframes crestFloat {
  0%,100% { transform: rotateX(-2deg) rotateY(-8deg) rotateZ(-.6deg) translateY(0); }
  33%      { transform: rotateX(8deg) rotateY(12deg) rotateZ(.8deg) translateY(-9px); }
  66%      { transform: rotateX(-7deg) rotateY(-11deg) rotateZ(-.4deg) translateY(-4px); }
}
.crest__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .24s ease-out; }
.crest__layer { position: absolute; inset: 0; backface-visibility: hidden; }
.crest__layer svg, .crest__layer img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.crest.is-gone { visibility: hidden; }
.crest-hint { color: var(--ink-dim); margin-top: 1.6rem; animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* KNOCK stamps — big mono words that slam in beside the crest */
.knock-stamp {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--badge-font); font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  letter-spacing: .04em; color: var(--red);
  -webkit-text-stroke: 2px #FFFFFF; paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(19,18,17,.2);
  transform: rotate(var(--tilt, -6deg));
  opacity: 0;
}
.knock-stamp.is-live { animation: stampIn .55s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes stampIn {
  0% { opacity: 0; transform: scale(2.4) rotate(var(--tilt, -6deg)); }
  55% { opacity: 1; transform: scale(.94) rotate(var(--tilt, -6deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--tilt, -6deg)); }
}
.knock-stamp.is-out { animation: stampOut .4s ease forwards; }
@keyframes stampOut { to { opacity: 0; transform: scale(1.1) rotate(var(--tilt, -6deg)); } }

/* shockwave rings on knock */
.shockwave { position: fixed; z-index: 55; pointer-events: none; }
.shockwave span {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px;
  border: 3px solid var(--red); border-radius: 50%;
  transform: translate(-50%,-50%); opacity: 0;
}
.shockwave span.is-live { animation: ring 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ring {
  0% { opacity: .85; width: 10px; height: 10px; border-width: 3px; }
  100% { opacity: 0; width: min(80vw, 780px); height: min(80vw, 780px); border-width: 1px; }
}

/* --- door takeover: two panels slam shut, then swing open ------- */
.takeover { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; }
.takeover.is-live { visibility: visible; }
.takeover__door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--red);
  display: flex; align-items: center; z-index: 1;
  transition: transform .32s cubic-bezier(.7,0,.84,0);
}
.takeover__door--l { left: 0; transform: translateX(-101%); justify-content: flex-end; }
.takeover__door--r { right: 0; transform: translateX(101%); justify-content: flex-start; }
.takeover.is-shut .takeover__door { transform: translateX(0); }
.takeover.is-opening .takeover__door { transition: transform .85s cubic-bezier(.16,1,.3,1) .05s; }
.takeover.is-opening .takeover__door--l { transform: translateX(-101%); }
.takeover.is-opening .takeover__door--r { transform: translateX(101%); }
.takeover__message {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 2rem;
  color: #FFFFFF; opacity: 0; transform: perspective(900px) translateZ(-80px) scale(.9);
  transition: opacity .2s ease .33s, transform .38s cubic-bezier(.16,1,.3,1) .33s;
}
.takeover.is-shut .takeover__message { opacity: 1; transform: perspective(900px) translateZ(0) scale(1); }
.takeover.is-opening .takeover__message { opacity: 0; transition-delay: 0s; }
.takeover__title {
  font-family: var(--display); font-size: clamp(2.3rem, 7vw, 6.5rem);
  line-height: .92; letter-spacing: .015em; max-width: 14ch;
}
.takeover__motto {
  font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 2.7rem);
  letter-spacing: .04em; margin-top: 1.25rem; color: var(--ink);
}
.takeover__emblem {
  width: clamp(90px, 14vw, 150px); opacity: .9; margin: 0 1rem;
}
.takeover__emblem svg, .takeover__emblem img { width: 100%; height: auto; }

/* ================================================================
   TICKER
   ================================================================ */
.ticker {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  overflow: hidden; padding: .9rem 0; background: var(--ink);
  position: relative; z-index: 6;
}
.ticker__track { display: flex; gap: 3rem; width: max-content; animation: tick 46s linear infinite; }
.ticker__item {
  font-family: var(--badge-font); font-size: 1.1rem; letter-spacing: .06em;
  white-space: nowrap; color: #FFFFFF; text-transform: uppercase;
}
.ticker__item::after { content: '★'; color: var(--orange); margin-left: 3rem; font-size: .8rem; vertical-align: middle; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ================================================================
   COUNTERS
   ================================================================ */
.counters {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hairline); background: var(--paper-deep);
}
.counter { padding: 2.6rem 1.4rem; text-align: center; border-right: 1px solid var(--hairline); }
.counter:last-child { border-right: 0; }
.counter__n { font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1; color: var(--ink); }
.counter__n .suffix { color: var(--red); }
.counter__label { color: var(--ink-soft); font-size: .92rem; margin-top: .6rem; }

/* ================================================================
   SECTION HEADS
   ================================================================ */
.section-head {
  padding: 6rem var(--gutter) 2.2rem;
  display: grid; grid-template-columns: 1fr minmax(0, 26rem);
  column-gap: 1.6rem; align-items: end;
}
.section-head::after {
  content: ''; grid-column: 1 / -1; height: 3px; background: var(--ink);
  margin-top: 1.6rem;
}
.section-head__title {
  font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.8rem);
  letter-spacing: .015em; line-height: .95;
}
.section-head__sub {
  color: var(--ink-soft); font-size: 1.05rem; text-align: right; justify-self: end;
  padding-bottom: .6rem; max-width: 26rem;
}

/* ================================================================
   CASE STUDIES
   ================================================================ */
.cases { padding-bottom: 6rem; }
.cases .section-head { padding-bottom: 1.5rem; }
.cases .section-head__title,
.interviews .section-head__title,
.wall .section-head__title { font-size: clamp(1.8rem, 3vw, 2.75rem); }
.cases__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.case:nth-child(even) { background: var(--card); }
.case__info { padding: 1.2rem 1.2rem 1.35rem; }
.case__name {
  font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  letter-spacing: .02em; line-height: 1; margin-bottom: .55rem; color: var(--ink);
}
.case__niche {
  display: block; color: var(--red); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; margin-bottom: .4rem;
}
.case__transform { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .25rem; }
.case__before { font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); color: var(--ink-dim); position: relative; }
.case__arrow { font-family: var(--serif); color: var(--red); font-size: 1rem; }
.case__after {
  font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 2.45rem); line-height: 1;
}
.case__unit { color: var(--ink-soft); font-size: .84rem; margin-bottom: 1rem; }
.case__unit strong { color: var(--ink-soft); font-weight: 600; }

.case__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 1rem; }
.case__stat { background: var(--card); padding: .7rem .75rem; }
.case:nth-child(even) .case__stat { background: var(--card); }
.case__stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .02em; }
.case__stat span { color: var(--ink-soft); font-size: .7rem; line-height: 1.3; display: block; margin-top: .2rem; }

.case__line { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); max-width: 30rem; }
.case__line::before { content: '“'; color: var(--red); }
.case__line::after { content: '”'; color: var(--red); }

.case__media { display: flex; align-items: center; order: -1; }
.video-slot, .video-embed {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.video-slot {
  border: 1px dashed var(--ink-dim);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(19,18,17,.03) 14px 28px), var(--card);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.video-slot:hover { border-color: var(--red); box-shadow: var(--shadow-soft); }
.slot-inner { text-align: center; padding: 1rem; }
.slot-play { display: block; width: 58px; height: 58px; margin: 0 auto 1rem; border: 2px solid var(--ink-soft); border-radius: 50%; position: relative; }
.slot-play::after {
  content: ''; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%);
  border-left: 14px solid var(--ink-soft); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.slot-label { color: var(--ink); margin-bottom: .35rem; }
.slot-note { color: var(--ink-soft); font-size: .9rem; }

/* ================================================================
   THE WALL
   ================================================================ */
.wall { background: var(--paper-deep); border-top: 1px solid var(--hairline); }
.wall__filters { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 var(--gutter) 2.2rem; }
.chip {
  font-family: var(--mono); font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--ink-dim); color: var(--ink-soft);
  padding: .55rem 1.1rem; cursor: pointer; transition: all .2s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.wall__grid { columns: 3; column-gap: 1.2rem; padding: 0 var(--gutter) 5rem; }
.wall-card {
  break-inside: avoid; margin-bottom: 1.2rem;
  border: 1px solid var(--hairline); background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
  display: block;
}
.wall-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.wall-card, .video-slot, .interview-slot, .phone-slot {
  will-change: transform;
  transition: transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease, border-color .25s ease;
}
.wall-card.is-hidden { display: none; }

.wall-card--proof img { width: 100%; height: auto; cursor: zoom-in; }
.wall-card__body { padding: 1.1rem 1.2rem 1.3rem; border-top: 1px solid var(--hairline); }
.wall-card__title { font-family: var(--display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; line-height: 1.1; }
.wall-card__sub { color: var(--ink-soft); font-size: .9rem; margin-top: .4rem; }
.wall-card__meta { color: var(--ink-dim); margin-top: .8rem; font-size: .72rem; }

.wall-card--stat { padding: 2rem 1.4rem 1.7rem; border-top: 3px solid var(--ink); }
.wall-card--stat .big {
  font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1; letter-spacing: .01em; margin-bottom: .8rem; color: var(--ink);
}

/* ================================================================
   MEMBERS
   ================================================================ */
.members__rail {
  display: flex; gap: 1.2rem; overflow-x: auto; padding: 0 var(--gutter) 2.5rem;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.members__rail::-webkit-scrollbar { display: none; }
.phone-slot {
  flex: 0 0 clamp(200px, 24vw, 260px); aspect-ratio: 9/16;
  scroll-snap-align: start;
  border: 1px dashed var(--ink-dim); border-radius: 18px;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(19,18,17,.03) 14px 28px), var(--card);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: border-color .25s, box-shadow .25s;
}
.phone-slot:hover { border-color: var(--red); box-shadow: var(--shadow-soft); }
.phone-slot::before {
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 5px; border-radius: 3px; background: var(--hairline);
}
.members__interviews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 0 var(--gutter) 5rem; }
.interview-slot {
  aspect-ratio: 16/9; border: 1px dashed var(--ink-dim);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(19,18,17,.03) 14px 28px), var(--card);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, box-shadow .25s;
}
.interview-slot:hover { border-color: var(--red); box-shadow: var(--shadow-soft); }

/* ================================================================
   REVIEWS (Trustpilot)
   ================================================================ */
.reviews { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--card); }
.reviews__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 5rem var(--gutter); align-items: center; }
.reviews__stars { display: flex; gap: 6px; margin-bottom: 1.4rem; }
.star {
  width: 34px; height: 34px; background: var(--tp-green);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star--part { background: linear-gradient(90deg, var(--tp-green) 80%, var(--hairline) 80%); }
.reviews__big { font-family: var(--display); font-size: clamp(3.4rem, 6.6vw, 5.8rem); line-height: 1; }
.reviews__big span { font-size: .35em; color: var(--ink-dim); }
.reviews__count { color: var(--ink-dim); margin: .8rem 0 2rem; }
.reviews__quotemark { font-family: var(--serif); font-size: 7rem; line-height: .5; color: var(--red); margin-bottom: 1.4rem; }
.reviews__copy { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 1.4rem; color: var(--ink-soft); max-width: 26rem; }

/* ================================================================
   CLOSE
   ================================================================ */
.close {
  text-align: center; padding: 8rem var(--gutter) 7rem; position: relative;
  background: var(--paper);
}
.close__eyebrow { color: var(--red); margin-bottom: 1.6rem; }
.close__title {
  font-family: var(--display); font-size: clamp(2.2rem, 6.6vw, 5.6rem);
  line-height: .95; letter-spacing: .01em; margin: 0 auto 3rem; max-width: 17ch;
}
.close__legal { color: var(--ink-soft); font-size: .88rem; max-width: 30rem; margin: 2.6rem auto 0; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  border-top: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 4.5rem var(--gutter) 2rem;
}
.footer__inner { max-width: 86rem; margin: 0 auto; display: grid; grid-template-columns: minmax(17rem, 1.2fr) auto; gap: 4rem 7rem; }
.footer__brand { display: flex; align-items: flex-start; gap: 1.2rem; }
.footer__logo { width: 64px; height: 64px; object-fit: contain; flex: 0 0 auto; }
.footer__word { font-family: var(--display); font-size: 1.6rem; line-height: 1.05; letter-spacing: .03em; }
.footer__about { color: rgba(255,255,255,.62); max-width: 18rem; margin-top: 1rem; }
/* Single EXPLORE group now (Programs + Follow removed) — sit it at the right
   edge so the footer reads as a balanced two-column block, not a gutted grid. */
.footer__nav { display: grid; grid-template-columns: minmax(8rem, max-content); gap: 2rem; justify-content: end; }
.footer__h { color: #E16A72; margin-bottom: 1rem; }
.footer__nav-group a { display: block; width: fit-content; color: rgba(255,255,255,.72); font-size: .95rem; margin-bottom: .6rem; transition: color .2s; }
.footer__nav-group a:hover { color: var(--paper); }
.footer__utility {
  grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  color: rgba(255,255,255,.5); font-size: .82rem;
}
.footer__utility a { color: rgba(255,255,255,.72); transition: color .2s; }
.footer__utility a:hover { color: var(--paper); }

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 80; background: rgba(19,18,17,.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
body.is-lightbox-open { overflow: hidden; }
.lightbox__body { max-width: min(92vw, 560px); max-height: 88vh; text-align: center; }
.lightbox__body img { max-height: 78vh; margin: 0 auto; border: 4px solid var(--paper); }
.lightbox__body figcaption { margin-top: 1rem; color: var(--paper); }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.6rem;
  background: none; border: 1px solid rgba(255,255,255,.4); color: var(--paper);
  width: 46px; height: 46px; font-size: 1.5rem; cursor: pointer; transition: all .2s;
}
.lightbox__close:hover { border-color: var(--red); color: var(--red); transform: rotate(90deg); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1000px) {
  .wall__grid { columns: 2; }
  /* 4 counters: a clean 2x2 rather than 3 + 1 orphan */
  .counters { grid-template-columns: repeat(2, 1fr); }
  .counter:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .counter:nth-child(even) { border-right: 0; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav { padding: 0 1rem; }
  .nav__inner { min-height: 62px; display: flex; justify-content: space-between; gap: 1rem; }
  .nav__word { display: none; }
  .nav__crest { width: 28px; height: 28px; }
  .nav__cta { padding: .6rem .8rem; font-size: .6rem; letter-spacing: .1em; white-space: nowrap; }
  .hero__line--big {
    max-width: 100%; overflow-wrap: normal;
    font-size: clamp(2.05rem, 10.4vw, 2.35rem); letter-spacing: 0;
  }
  .section-head { display: block; padding-top: 4.5rem; }
  .section-head__no { display: block; padding-bottom: .45rem; }
  .section-head__title { overflow-wrap: normal; }
  .section-head__sub { text-align: left; padding-top: .85rem; padding-bottom: 0; }
  .section-head::after { display: block; margin-top: 1.4rem; }
  .case, .case:nth-child(even) { grid-template-columns: 1fr; }
  .case:nth-child(even) .case__info { order: 1; }
  .case:nth-child(even) .case__media { order: 2; }
  .case--no-media .case__stats { grid-template-columns: 1fr 1fr; }
  .reviews__inner { grid-template-columns: 1fr; }
  .members__interviews { grid-template-columns: 1fr; }
  .wall__grid { columns: 1; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter { min-width: 0; padding-inline: .75rem; border-top: 1px solid var(--hairline); }
  .counter:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .counter:nth-child(even) { border-right: 0; }
  .counter:nth-child(-n+2) { border-top: 0; }
  .counter:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .footer { padding-top: 3.5rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer__nav { grid-template-columns: 1fr; row-gap: 2.5rem; justify-content: start; }
  .footer__utility { grid-column: auto; align-items: flex-start; flex-direction: column; }
}

/* Freeze the document during the knock so fixed gloves cannot drift from the crest. */
html.is-knocking { overflow: hidden; overscroll-behavior: none; }
body.is-knocking {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
  overscroll-behavior: none; touch-action: none;
}
@media (max-width: 360px) {
  .hero { padding-top: 7rem; padding-bottom: 2rem; }
  .hero__eyebrow { margin-bottom: .55rem; }
  .hero__title { margin-bottom: 1.25rem; }
  .hero__line--big { line-height: .86; }
  .hero__sub { font-size: 1.05rem; line-height: 1.5; margin-bottom: 1.3rem; }
  .hero__proof { margin-bottom: 1.4rem; }
  .crest-hint { margin-top: 1rem; }
  .section-head__title { font-size: clamp(1.75rem, 8vw, 2rem); }
  .footer__brand { flex-direction: column; align-items: center; text-align: center; }
  .footer__word { text-align: center; }
  .footer__about { margin-inline: auto; }
}

/* reduced motion: kill the theatrics, keep the content */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crest.is-floating, .ticker__track, .atmo::after, .crest-hint, .family__track, .family-item__bob { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .takeover__door { transition: none; }
}

/* The official face stays still and exact. Only the separate flame mask moves. */
.crest-flame {
  animation: crestFlame .72s ease-in-out infinite alternate;
  transform-origin: 50% 38%; transform-box: fill-box;
}
@keyframes crestFlame {
  from { transform: scaleY(.92) scaleX(1.04) skewX(-2deg) translateY(3px); filter: saturate(.95) brightness(.96); }
  to { transform: scaleY(1.1) scaleX(.96) skewX(2deg) translateY(-4px); filter: saturate(1.18) brightness(1.1); }
}
.knock-stamp.is-merged { color: var(--red); animation: mergePop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes mergePop {
  0% { scale: 1; } 45% { scale: 1.14; } 100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .crest-flame { animation: none !important; }
}


/* ================================================================
   GLOVES KNOCK — approach, collision, doors
   ================================================================ */
.glove {
  position: fixed; top: 50%; z-index: 70; pointer-events: none;
  width: clamp(150px, 24vw, 260px); will-change: transform;
  filter: drop-shadow(0 18px 30px rgba(19,18,17,.35));
}
.glove::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #9E111B 0%, #D4242E 62%, #A4141C 100%);
  -webkit-mask: url('../assets/brand/glove.png') center / contain no-repeat;
  mask: url('../assets/brand/glove.png') center / contain no-repeat;
  clip-path: inset(35% 63% 32% 8% round 18% 7% 7% 18%);
  mix-blend-mode: multiply;
}
.glove svg, .glove img { width: 100%; height: auto; display: block; }
.glove--l { left: 50%; transform: translate(calc(-50% - 70vw), -50%) rotate(-18deg); }
.glove--r { right: 50%; transform: translate(calc(50% + 70vw), -50%) rotate(18deg) scaleX(-1); }

.impact-flash {
  position: fixed; inset: 0; z-index: 75; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 55%);
  opacity: 0;
}
.impact-flash.is-live { animation: impactFlash .45s ease-out forwards; }
@keyframes impactFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ================================================================
   BRAND FAMILY — slow marquee of the family crests
   ================================================================ */
.family { border-top: 1px solid var(--hairline); padding: 3.2rem 0 3.6rem; background: var(--paper-deep); }
.family__label { text-align: center; color: var(--ink-dim); margin-bottom: 2.2rem; }
.family__viewport { overflow: hidden; padding: 1.2rem 0; }
.family__track { display: flex; width: max-content; animation: familyMarquee 38s linear infinite; align-items: flex-start; will-change: transform; }
.family__group { display: flex; gap: clamp(3rem, 7vw, 6rem); padding-right: clamp(3rem, 7vw, 6rem); }
.family-item { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.family-item__bob { animation: familyBob 4.2s ease-in-out infinite; }
.family-item img {
  width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px);
  object-fit: contain; border-radius: 50%;
  filter: none; box-shadow: 0 6px 14px rgba(19,18,17,.14);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.family-item:nth-child(2n) .family-item__bob { animation-delay: -1.4s; }
.family-item:nth-child(3n) .family-item__bob { animation-delay: -2.8s; }
.family-item:nth-child(5n) .family-item__bob { animation-duration: 5s; }
@keyframes familyBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
.family-item:hover img { transform: scale(1.16); box-shadow: 0 12px 22px rgba(19,18,17,.22); }
.family-item span { font-family: var(--body); font-weight: 600; font-size: .72rem; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--ink-soft); white-space: nowrap; }
@keyframes familyMarquee { to { transform: translate3d(-50%,0,0); } }

@media (max-width: 720px) {
  .family__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .family__group { gap: 2rem; padding-right: 2rem; }
  .family-item { flex: 0 0 9rem; width: 9rem; }
  .family-item span { width: 100%; min-height: 2.5em; white-space: normal; }
}

/* ================================================================
   2026 PROOF FUNNEL EXPANSION
   ================================================================ */

/* Hero: one proof-first promise, with room for every descender. */
.hero {
  padding-top: clamp(8.5rem, 11vw, 10rem);
}
.hero__eyebrow {
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(.76rem, 1.4vw, .95rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.35;
  padding-block: .2em;
  text-transform: uppercase;
  margin-bottom: 1.05rem;
}
.hero__title {
  line-height: .88;
  margin-bottom: 1.55rem;
}
.hero__line--big {
  font-size: clamp(2.7rem, 7.6vw, 6.65rem);
}
.hero__line--record {
  font-family: var(--display);
  color: var(--red);
  font-size: clamp(1.65rem, 4.5vw, 3.8rem);
  letter-spacing: .06em;
  margin-top: .35rem;
}
.hero__sub { max-width: 42rem; margin-bottom: 1.7rem; }
.hero__proof { margin-bottom: 1.7rem; }
.crest-stage {
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: 100%;
}
.crest-stage::before {
  width: 88%;
  height: 22%;
  left: 6%;
  background: rgba(19,18,17,.38);
  filter: blur(19px);
  box-shadow: 0 0 34px rgba(165,37,47,.2);
}
.crest-stage:hover::before { opacity: .92; transform: scale(1.12); }
.crest-hint {
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(165,37,47,.5);
}
.impact-flash {
  background: radial-gradient(circle at var(--impact-x, 50%) var(--impact-y, 50%), rgba(255,255,255,.98) 0%, rgba(255,255,255,.4) 10%, rgba(255,255,255,0) 42%);
}

/* Reusable activation-lazy video surface. */
.media-player {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0D0D0D;
  border: 1px solid rgba(19,18,17,.2);
  box-shadow: var(--shadow-lift);
}
.media-player--case { aspect-ratio: 16 / 10; }
.media-player--story { aspect-ratio: 4 / 3; }
.media-player--reel { aspect-ratio: 9 / 16; border: 0; box-shadow: none; }
.media-player__launch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: #fff;
  background: #0D0D0D;
  cursor: pointer;
  text-align: left;
}
.media-player__launch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 48%);
  transition: background .25s ease;
}
.media-player__launch:hover::after { background: linear-gradient(to top, rgba(0,0,0,.8), rgba(165,37,47,.12)); }
.media-player__launch img,
.media-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-player__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--red);
  box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.media-player__play::after {
  content: '';
  position: absolute;
  left: 53%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.media-player__launch:hover .media-player__play { transform: translate(-50%, -50%) scale(1.12); }
.media-player__launch:focus-visible { outline: 4px solid var(--red); outline-offset: -4px; }
.before-after__rail {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  padding: .5rem var(--gutter) 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}

/* Before and after reel comparisons. */
.before-after { background: var(--ink); color: var(--paper); padding-bottom: 6rem; overflow: hidden; }
.section-head--dark::after { background: var(--paper); }
.section-head--dark .section-head__sub { color: rgba(255,255,255,.66); }
.before-after__rail { gap: 1.5rem; }
.before-after-card {
  flex: 0 0 min(680px, 84vw);
  scroll-snap-align: center;
  background: #1C1B1A;
  border: 1px solid rgba(255,255,255,.16);
  padding: 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.before-after-card__media { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.reel-side { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.reel-side--after { border-color: rgba(225,106,114,.65); }
.reel-side__tag {
  position: absolute;
  z-index: 5;
  left: .75rem;
  color: #fff;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
}
.reel-side__tag { top: .75rem; padding: .35rem .55rem; }

/* James at the center of a moving, verified interview record. */
.interview-record { overflow: hidden; padding-bottom: 6.5rem; background: var(--paper); }
.interview-orbit { position: relative; padding: .5rem 0 0; }
.interview-host {
  width: 13.5rem;
  margin: 1.2rem auto;
  padding: 1rem;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  box-shadow: 8px 9px 0 var(--red);
  position: relative;
  z-index: 3;
}
.interview-host img { width: 7.5rem; height: 7.5rem; margin: 0 auto .75rem; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.08); border: 3px solid #fff; }
.interview-host .mono { color: #E16A72; }
.interview-host h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1; margin-block: .35rem; }
.interview-host p { color: rgba(255,255,255,.65); font-size: .76rem; }
.interview-people { display: grid; gap: 1rem; overflow: hidden; }
.interview-track { display: flex; width: max-content; will-change: transform; }
.interview-track--forward { animation: interviewScroll 34s linear infinite; }
.interview-track--reverse { transform: translateX(-50%); animation: interviewScrollReverse 38s linear infinite; }
.interview-track__group { display: flex; gap: 1rem; padding-right: 1rem; }
.interview-person {
  flex: 0 0 8.6rem;
  width: 8.6rem;
  height: 8.6rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--hairline), 0 12px 28px rgba(19,18,17,.15);
  transform: scale(.94);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.interview-person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) saturate(.85); transition: transform .35s ease, filter .35s ease; }
.interview-person__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .85rem .65rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent 72%);
  opacity: 0;
  transition: opacity .25s ease;
}
.interview-person__info strong { font-family: var(--display); font-size: .72rem; line-height: 1; }
.interview-person__info small { font-size: .56rem; line-height: 1.25; margin-top: .3rem; }
.interview-person:hover,
.interview-person:focus-visible { transform: scale(1); border-color: var(--red); box-shadow: 0 0 0 4px rgba(165,37,47,.18), 0 18px 36px rgba(19,18,17,.22); z-index: 2; }
.interview-person:hover img,
.interview-person:focus-visible img { transform: scale(1.09); filter: saturate(1); }
.interview-person:hover .interview-person__info,
.interview-person:focus-visible .interview-person__info { opacity: 1; }
@keyframes interviewScroll { to { transform: translateX(-50%); } }
@keyframes interviewScrollReverse { to { transform: translateX(0); } }

/* A field of factual testimonial cards, with no decorative portraits. */
.next-receipt {
  min-height: 43rem;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 7rem var(--gutter);
  background: var(--red-deep);
  color: #fff;
  isolation: isolate;
}
.next-receipt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.15), transparent 34%), linear-gradient(140deg, rgba(0,0,0,.2), transparent 45%);
}
.next-receipt__copy { position: relative; z-index: 3; text-align: center; max-width: 40rem; }
.next-receipt__copy > .mono { color: rgba(255,255,255,.72); margin-bottom: 1.1rem; }
.next-receipt__copy h2 { font-family: var(--display); font-size: clamp(2.1rem, 3.5vw, 3.15rem); line-height: .94; }
.next-receipt__copy h2,
.next-receipt__copy h2 span { white-space: nowrap; }
.next-receipt__copy h2 span { color: #fff; -webkit-text-stroke: 1px rgba(255,255,255,.1); }
.next-receipt__sub { max-width: 31rem; margin: 1.4rem auto 1.8rem; color: rgba(255,255,255,.74); font-size: 1rem; }
.next-receipt .btn--red { background: #fff; color: var(--red-deep); border-color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.28); }
.next-receipt__results { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.result-pop {
  position: absolute;
  width: clamp(11rem, 16vw, 15.5rem);
  padding: .85rem 1rem;
  background: #fff;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  opacity: 0;
  animation: resultPulse 16s ease-in-out infinite;
  animation-delay: calc(var(--pop-index) * -2s);
}
.result-pop p { font-family: var(--serif); font-size: .92rem; line-height: 1.3; }
.result-pop cite { display: block; margin-top: .55rem; color: var(--red-deep); font-family: var(--mono); font-size: .67rem; font-style: normal; font-weight: 700; text-transform: uppercase; }
.result-pop:nth-child(1) { left: 4%; top: 7%; transform: rotate(-2deg); }
.result-pop:nth-child(2) { right: 5%; top: 8%; transform: rotate(2deg); }
.result-pop:nth-child(3) { left: 3%; top: 39%; transform: rotate(1deg); }
.result-pop:nth-child(4) { right: 3%; top: 38%; transform: rotate(-1deg); }
.result-pop:nth-child(5) { left: 4%; bottom: 8%; transform: rotate(2deg); }
.result-pop:nth-child(6) { right: 4%; bottom: 7%; transform: rotate(-2deg); }
.result-pop:nth-child(7) { left: 27%; bottom: 2%; transform: rotate(-1deg); }
.result-pop:nth-child(8) { right: 27%; top: 2%; transform: rotate(1deg); }
@keyframes resultPulse {
  0%, 34%, 100% { opacity: 0; translate: 0 8px; scale: .94; }
  8%, 24% { opacity: 1; translate: 0 0; scale: 1; }
}

/* Fixed cadence keeps the family loop complete and evenly spaced. */
.family__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.family-item { flex: 0 0 10rem; width: 10rem; }
.family-item span { width: 100%; min-height: 2.5em; white-space: normal; }

@media (max-width: 900px) {
  .cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interview-people { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 720px) {
  .nav__word {
    display: flex;
    max-width: 9rem;
    font-size: .72rem;
    line-height: 1.02;
    letter-spacing: .025em;
  }
  .nav__word small { font-size: .46rem; margin-bottom: .15rem; }
  .hero { padding: 7.7rem 1rem 2.5rem; }
  .hero__eyebrow { font-size: .67rem; letter-spacing: .13em; }
  .hero__line--big { font-size: clamp(1.8rem, 9vw, 2.55rem); line-height: .9; white-space: nowrap; }
  .hero__line--record { font-size: clamp(1.45rem, 7vw, 2rem); }
  .hero__sub { font-size: 1rem; line-height: 1.48; max-width: 33rem; }
  .hero__proof { max-width: 22rem; border-radius: 1rem; gap: .35rem .65rem; }
  .hero__proof-quote { font-size: 1rem; }
  .crest { width: clamp(128px, 38vw, 156px); }
  .crest-stage::before { top: 112px; }
  .cases { padding-bottom: 4rem; }
  .cases__list { grid-template-columns: 1fr; gap: .85rem; }
  .case, .case:nth-child(even) { padding: 0; }
  .case:nth-child(even) .case__info { order: initial; }
  .case:nth-child(even) .case__media { order: -1; }
  .case__media { margin-top: 0; }
  .before-after__rail { padding-right: 2.8rem; }
  .before-after { padding-bottom: 4rem; }
  .before-after-card { flex-basis: 88vw; padding: .85rem; }
  .before-after-card__media { gap: .5rem; }
  .reel-side__tag { top: .45rem; left: .45rem; font-size: .6rem; }
  .media-player--reel .media-player__play { width: 44px; height: 44px; }
  .interview-record { padding-bottom: 4rem; }
  .interview-host { width: 11rem; margin-block: 1rem; padding: .8rem; }
  .interview-host img { width: 5.8rem; height: 5.8rem; }
  .interview-host h3 { font-size: .95rem; }
  .interview-people { grid-template-columns: 1fr; gap: .7rem; }
  .interview-track__group { gap: .65rem; padding-right: .65rem; }
  .interview-person {
    flex-basis: 6.6rem;
    width: 6.6rem;
    height: 6.6rem;
    overflow: hidden;
    border: 2px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px rgba(19,18,17,.14);
  }
  .interview-person img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .interview-person__info {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: .55rem .4rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.94), transparent 75%);
    opacity: 1;
  }
  .interview-person__info strong { font-size: .56rem; }
  .interview-person__info small { display: none; }
  .next-receipt { min-height: 31rem; padding: 5rem 1rem 4rem; display: grid; }
  .next-receipt__copy h2 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .next-receipt__copy h2,
  .next-receipt__copy h2 span { white-space: normal; }
  .next-receipt__results { position: absolute; inset: 0; width: 100%; margin: 0; display: block; pointer-events: none; }
  .result-pop:nth-child(n) { width: 10.2rem; min-width: 0; padding: .7rem; animation: resultPulse 16s ease-in-out infinite; animation-delay: calc(var(--pop-index) * -2s); }
  .result-pop:nth-child(odd) { left: 3%; right: auto; top: 3%; bottom: auto; transform: rotate(-1deg); }
  .result-pop:nth-child(even) { right: 3%; left: auto; bottom: 3%; top: auto; transform: rotate(1deg); }
  .result-pop p { font-size: .75rem; }
  .result-pop cite { font-size: .58rem; }
  .family-item { flex-basis: 8.5rem; width: 8.5rem; }
}

@media (max-width: 360px) {
  .nav__word { max-width: 7.2rem; font-size: .64rem; }
  .nav__cta { padding-inline: .6rem; }
  .hero__proof-attr { font-size: .7rem; }
  .before-after-card { flex-basis: 91vw; }
  .interview-host { width: 10rem; }
  .interview-host img { width: 5.2rem; height: 5.2rem; }
  .interview-host h3 { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .interview-track,
  .result-pop { animation: none !important; }
  .interview-track--reverse { transform: none; }
  .result-pop { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .result-pop { display: none; }
  .result-pop:nth-child(-n+2) { display: block; }
}

/* ================================================================
   RESULTS FUNNEL V2
   Compact proof, one content system, softer geometry.
   ================================================================ */
.cases { padding-bottom: 7rem; }
.cases .section-head { padding-bottom: 2.2rem; }
.cases__list {
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
}
.case,
.case:nth-child(even) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(19,18,17,.13);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(19,18,17,.08);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.case:hover {
  transform: translateY(-5px);
  border-color: rgba(165,37,47,.35);
  box-shadow: 0 22px 42px rgba(19,18,17,.13);
}
.case__media { order: initial; display: block; margin: 0; background: #0b0b0b; }
.case__info { padding: 1rem 1.05rem 1.2rem; }
.case__identity { display: flex; align-items: baseline; gap: .48rem; min-width: 0; }
.case__name { font-size: 1.18rem; line-height: 1; flex: 0 0 auto; }
.case__identity span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-dim);
  font-family: var(--body);
  font-size: .78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case__identity span::before { content: '·'; margin-right: .48rem; color: var(--red); }
.case__result { margin-top: .62rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.42; }
.media-player { border: 0; border-radius: 18px; box-shadow: none; }
.media-player--case { aspect-ratio: 16 / 9; border-radius: 0; }
.media-player--story { aspect-ratio: 16 / 9; }
.media-player--reel { aspect-ratio: 9 / 16; border-radius: 15px; }
.media-player__launch img,
.media-player video { object-fit: contain; background: #090909; }
.media-player__surface { position: absolute; inset: 0; }
.media-player__surface video { display: block; width: 100%; height: 100%; }
.media-player__fullscreen {
  position: absolute;
  z-index: 7;
  right: .65rem;
  bottom: .65rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.62);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .82;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.media-player:hover .media-player__fullscreen,
.media-player__fullscreen:focus-visible { opacity: 1; transform: scale(1.08); background: rgba(165,37,47,.92); }
.media-player__toggle {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.64);
  cursor: pointer;
  opacity: 1;
  transition: opacity .2s ease, transform .2s ease;
}
.media-player__toggle span::before {
  content: '';
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.media-player__toggle.is-playing { opacity: 0; }
.media-player:hover .media-player__toggle.is-playing,
.media-player__toggle:focus-visible { opacity: 1; }
.media-player__toggle.is-playing span::before {
  width: 11px;
  height: 15px;
  border: 0;
  background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65% 100%);
}

.wall__grid { column-gap: 1.5rem; max-width: 86rem; margin: 0 auto; }
.wall-card { margin-bottom: 1.5rem; border-radius: 18px; overflow: hidden; }
.wall-card--proof img { display: block; }
.wall-card__body { padding: 1.2rem 1.25rem 1.35rem; }
.wall-card__title { font-size: 1.25rem; line-height: 1.12; }
.wall-card__sub { font-size: .95rem; line-height: 1.45; }
.wall-card__meta { font-size: .7rem; line-height: 1.4; }
.wall-card--stat { border-radius: 18px; }

.before-after { padding-bottom: 7rem; }
.before-after__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 86rem;
  margin: 0 auto;
  padding: .5rem var(--gutter) 1rem;
  overflow: visible;
}
.before-after-card {
  min-width: 0;
  padding: .72rem;
  border-radius: 22px;
  background: #181818;
  box-shadow: 0 20px 44px rgba(0,0,0,.24);
}
.before-after-card__media { gap: .65rem; }
.reel-side { overflow: visible; border: 0; border-radius: 15px; }
.reel-side--after { border: 0; }
.reel-side__tag {
  top: .45rem;
  left: .45rem;
  padding: .28rem .44rem;
  border: 0;
  border-radius: 99px;
  background: rgba(124,26,34,.88);
  font-size: .58rem;
}
.reel-side--after .reel-side__tag { background: rgba(34,126,79,.92); }
.compare-metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
  margin-top: .55rem;
  color: rgba(255,255,255,.62);
  font-size: .72rem;
}
.compare-metric strong { color: #fff; font-family: var(--display); font-size: 1.08rem; font-weight: 400; }
.compare-metric--before strong { color: #e2777e; }
.compare-metric--after strong { color: #61d697; }

.interview-person img { filter: grayscale(1) contrast(1.06); }
.interview-person:hover img,
.interview-person:focus-visible img { filter: grayscale(0) saturate(1.05); }
.interview-people:has(.interview-person:hover) .interview-track,
.interview-people:hover .interview-track,
.interview-people:focus-within .interview-track { animation-play-state: paused; }

.close { background: var(--ink); color: #fff; }
.close__legal { color: rgba(255,255,255,.6); }

.next-receipt {
  min-height: 43rem;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.12);
}
.next-receipt::before { background: none; }
.next-receipt__copy { max-width: 46rem; }
.next-receipt__copy h2 { line-height: .98; }
.result-pop,
.result-pop:nth-child(n) {
  width: min(24rem, 34vw);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  box-shadow: none;
  transform: none;
  animation: resultPulse 24s ease-in-out infinite;
  animation-delay: calc(var(--pop-index) * -3s);
}
.result-pop:nth-child(odd) { left: 4%; right: auto; top: 12%; bottom: auto; text-align: left; }
.result-pop:nth-child(even) { right: 4%; left: auto; top: auto; bottom: 10%; text-align: right; }
.result-pop p { font-size: clamp(.88rem, 1.15vw, 1.08rem); line-height: 1.4; }
.result-pop cite { color: #e2777e; }
@keyframes resultPulse {
  0%, 28%, 100% { opacity: 0; translate: 0 10px; scale: .98; }
  8%, 20% { opacity: .82; translate: 0 0; scale: 1; }
}

@media (max-width: 1000px) {
  .cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .before-after__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cases { padding-bottom: 4.5rem; }
  .cases__list { grid-template-columns: 1fr; gap: 1rem; }
  .case, .case:nth-child(even) { display: flex; border-radius: 19px; }
  .case:nth-child(even) .case__media { order: initial; }
  .case__info { padding: .95rem 1rem 1.05rem; }
  .before-after { padding-bottom: 4.5rem; }
  .before-after__rail {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-right: var(--gutter);
    overflow: visible;
  }
  .before-after-card { padding: .65rem; }
  .interview-track__group { align-items: flex-start; }
  .interview-person {
    flex-basis: 7.2rem;
    width: 7.2rem;
    height: 9rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .interview-person img {
    width: 7.2rem;
    height: 7.2rem;
    border: 2px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px rgba(19,18,17,.14);
  }
  .interview-person__info {
    position: static;
    display: block;
    width: 100%;
    padding: .45rem .15rem 0;
    color: var(--ink);
    background: none;
    opacity: 1;
    text-align: center;
  }
  .interview-person__info strong { display: block; font-size: .66rem; line-height: 1.15; }
  .interview-person__info small { display: none; }
  .result-pop,
  .result-pop:nth-child(n) { width: 9.5rem; }
  .result-pop:nth-child(odd) { left: 3%; top: 14%; }
  .result-pop:nth-child(even) { right: 3%; bottom: 4%; }
}

/* ================================================================
   JULY 17 PROOF FUNNEL PASS
   Compact proof density, controlled comparison deck, portrait wall,
   and deterministic testimonial motion.
   ================================================================ */

/* --- hero: one clear outcome statement ------------------------- */
.hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .08em .22em;
  max-width: 72rem;
  margin: 0 auto 1.5rem;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.hero__title > span { display: inline-block; }
.hero__join {
  color: var(--red);
  font-size: 1em;
  letter-spacing: -.01em;
}
.hero__outcome { position: relative; }

/* --- tighter proof rhythm -------------------------------------- */
.cases { padding-bottom: 2rem; }
.cases .section-head {
  padding-top: 4.25rem;
  padding-bottom: 1.35rem;
}
.cases__list,
.wall__grid {
  max-width: 72rem;
}
.cases__list { gap: 1rem; }
.case {
  border-radius: 17px;
  box-shadow: 0 10px 28px -20px rgba(19,18,17,.35);
}
.case__info { padding: .78rem .88rem .9rem; }
.case__name { font-size: 1rem; }
.case__identity span { font-size: .78rem; }
.case__result {
  margin-top: .45rem;
  font-size: .92rem;
  line-height: 1.42;
}
.wall { border-top: 0; }
.wall__grid {
  padding-top: 1rem;
  padding-bottom: 3.5rem;
  column-gap: 1rem;
}
.wall-card {
  margin-bottom: 1rem;
  border-radius: 14px;
}
.wall-card__body { padding: .8rem .9rem .95rem; }
.wall-card__title { font-size: 1.08rem; }
.wall-card__sub { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.wall-card__meta { font-size: .7rem; color: var(--ink-soft); }

/* --- before / after: compact cyclic 3D deck -------------------- */
.before-after { padding-bottom: 4.5rem; }
.before-after .section-head {
  padding-top: 4.25rem;
  padding-bottom: 1.35rem;
}
.before-after__deck {
  position: relative;
  max-width: 78rem;
  margin: 0 auto;
}
.before-after__rail {
  position: relative;
  display: block;
  height: 35rem;
  padding: 0;
  /* clip, never scroll: the legacy x-mandatory snap re-snapped this hidden
     scroller after wrap-arounds and dragged the whole deck 192px left */
  overflow: hidden;
  overflow: clip;
  scroll-snap-type: none;
  perspective: 1100px;
  touch-action: pan-y;
  scrollbar-width: none;
}
.before-after__rail .before-after-card { scroll-snap-align: none; }
.before-after-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(38rem, 70vw);
  margin: 0;
  padding: .7rem;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%,0,-400px) scale(.65);
  transition: transform .36s cubic-bezier(.3,.85,.3,1), opacity .28s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.before-after-card.is-snapping { transition: none !important; }
.before-after-card[data-position="0"] {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%,0,0) scale(1);
}
.before-after-card[data-position="-1"] {
  z-index: 2;
  opacity: .5;
  transform: translate3d(calc(-50% - 26rem),1rem,-220px) rotateY(12deg) scale(.78);
}
.before-after-card[data-position="1"] {
  z-index: 2;
  opacity: .5;
  transform: translate3d(calc(-50% + 26rem),1rem,-220px) rotateY(-12deg) scale(.78);
}
.before-after-card[data-position="-2"] {
  opacity: 0;
  transform: translate3d(calc(-50% - 42rem),2rem,-340px) rotateY(15deg) scale(.66);
}
.before-after-card[data-position="2"] {
  opacity: 0;
  transform: translate3d(calc(-50% + 42rem),2rem,-340px) rotateY(-15deg) scale(.66);
}
.before-after-card__media { gap: .7rem; }
.before-after-card .media-player { border-radius: 15px; }
.before-after__nav {
  position: absolute;
  top: 46%;
  z-index: 8;
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(19,18,17,.82);
  color: #fff;
  font: 400 2rem/1 var(--body);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.before-after__nav:hover,
.before-after__nav:focus-visible {
  border-color: var(--red);
  background: var(--red);
  transform: scale(1.08);
}
.before-after__nav--prev { left: calc(50% - 22.5rem); }
.before-after__nav--next { right: calc(50% - 22.5rem); }
.compare-metric { gap: .38rem; }
.metric-arrow {
  display: inline-flex;
  flex-direction: column;
  width: .72rem;
  color: currentColor;
}
.metric-arrow i {
  width: .43rem;
  height: .43rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.metric-arrow--down { color: #e2777e; }
.metric-arrow--down i { margin-top: -.18rem; transform: rotate(45deg); }
.metric-arrow--up { color: #61d697; flex-direction: column-reverse; }
.metric-arrow--up i { margin-bottom: -.18rem; transform: rotate(225deg); }

/* --- interview record: dense moving portrait wall -------------- */
.interview-record {
  overflow: hidden;
  padding-bottom: 0;
  background: #0b0b0b;
  color: #fff;
}
.interview-record .section-head {
  padding-top: 4.5rem;
  padding-bottom: 2rem;
}
.interview-record .section-head__sub { color: rgba(255,255,255,.62); }
.interview-orbit { max-width: none; padding: 0; }
.interview-wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: .85rem;
  height: 66rem;
  padding: 0 .85rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
}
.interview-column { min-width: 0; overflow: hidden; }
.interview-column__track {
  animation: interviewVertical 30s linear infinite;
  will-change: transform;
}
.interview-column:nth-child(even) .interview-column__track {
  animation-direction: reverse;
  animation-duration: 34s;
}
.interview-column:nth-child(3) .interview-column__track { animation-duration: 27s; }
.interview-column__group {
  display: grid;
  gap: .85rem;
  padding-bottom: .85rem;
}
.interview-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}
.interview-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.58);
  transition: filter .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.interview-tile__info {
  position: absolute;
  inset: auto 0 0;
  padding: 3rem .8rem .72rem;
  background: linear-gradient(transparent,rgba(0,0,0,.9));
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .25s ease, transform .25s ease;
}
.interview-tile__info strong,
.interview-tile__info small { display: block; }
.interview-tile__info strong { font-size: .84rem; line-height: 1.12; }
.interview-tile__info small { margin-top: .18rem; color: rgba(255,255,255,.7); font-size: .64rem; }
.interview-tile:hover img,
.interview-tile:focus-visible img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.035);
}
.interview-tile:hover .interview-tile__info,
.interview-tile:focus-visible .interview-tile__info {
  opacity: 1;
  transform: none;
}
.interview-wall:hover .interview-column__track,
.interview-wall:focus-within .interview-column__track { animation-play-state: paused; }
.interview-tile--host {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 13rem;
  border: 3px solid var(--red);
  box-shadow: 0 0 0 8px rgba(0,0,0,.7), 0 24px 70px rgba(0,0,0,.65);
  transform: translate(-50%,-50%);
}
.interview-tile--host img { filter: none; }
@keyframes interviewVertical { to { transform: translateY(-50%); } }

/* --- closing proof: one or two quotes, shuffled around the field */
.next-receipt { min-height: 39rem; }
.result-pop,
.result-pop:nth-child(n) {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(20rem, 28vw);
  opacity: 0;
  animation: none;
  text-align: left;
  translate: 0 10px;
  transition: opacity .4s ease, translate .4s ease;
}
.result-pop.is-visible { opacity: .86; translate: 0 0; }
.result-pop[data-position="north-west"] { top: 8%; left: 4%; }
.result-pop[data-position="north-east"] { top: 8%; right: 4%; text-align: right; }
.result-pop[data-position="mid-west"] { top: 40%; left: 2.5%; }
.result-pop[data-position="mid-east"] { top: 40%; right: 2.5%; text-align: right; }
.result-pop[data-position="south-west"] { bottom: 7%; left: 4%; }
.result-pop[data-position="south-east"] { right: 4%; bottom: 7%; text-align: right; }
.footer { border-top: 2px solid var(--red); }
/* Every footer-linked section must clear the sticky brand header. */
:where(#revenue-wins, #case-studies, #interviews, #wall) {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 1000px) {
  .before-after-card { width: min(36rem, 76vw); }
  .before-after__nav--prev { left: 4%; }
  .before-after__nav--next { right: 4%; }
  .interview-wall { height: 52rem; }
}

@media (max-width: 720px) {
  .hero__title {
    max-width: 22rem;
    gap: .12em .2em;
    margin-bottom: 1.15rem;
    font-size: clamp(2.35rem, 11.5vw, 3.25rem);
    line-height: 1;
  }
  .hero__join { font-size: .43em; }
  .cases { padding-bottom: 1.25rem; }
  .cases .section-head { padding-top: 3.2rem; padding-bottom: 1rem; }
  .cases__list { gap: .8rem; }
  .case,
  .case:nth-child(even) { border-radius: 15px; }
  .case__info { padding: .72rem .78rem .8rem; }
  .case__result { font-size: .86rem; }
  .wall__grid { padding-top: .7rem; padding-bottom: 2.8rem; column-gap: .8rem; }
  .wall-card { margin-bottom: .8rem; }
  .before-after { padding-bottom: 3.3rem; }
  .before-after .section-head { padding-top: 3.4rem; padding-bottom: 1rem; }
  .before-after__rail {
    display: block;
    height: 23rem;
    padding: 0;
    overflow: hidden;
    overflow: clip;
  }
  .before-after-card {
    width: calc(100vw - 2rem);
    padding: .55rem;
  }
  .before-after-card[data-position="-1"] {
    opacity: .3;
    transform: translate3d(calc(-50% - 72vw),.5rem,-220px) scale(.8);
  }
  .before-after-card[data-position="1"] {
    opacity: .3;
    transform: translate3d(calc(-50% + 72vw),.5rem,-220px) scale(.8);
  }
  .before-after-card[data-position="-2"],
  .before-after-card[data-position="2"] { opacity: 0; }
  .before-after-card__media { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .before-after-card .media-player { border-radius: 12px; }
  .before-after__nav {
    top: 43%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
  }
  .before-after__nav--prev { left: .25rem; }
  .before-after__nav--next { right: .25rem; }
  .compare-metric { gap: .24rem; margin-top: .38rem; font-size: .61rem; }
  .compare-metric strong { font-size: .88rem; }
  .metric-arrow { width: .58rem; }
  .metric-arrow i { width: .34rem; height: .34rem; border-width: 1.5px; }
  .interview-record .section-head { padding-top: 3.5rem; padding-bottom: 1.4rem; }
  .interview-wall {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .5rem;
    height: 35rem;
    padding: 0 .5rem;
  }
  .interview-column:nth-child(n+3) { display: none; }
  .interview-column__group { gap: .5rem; padding-bottom: .5rem; }
  .interview-tile { border-radius: 6px; }
  .interview-tile__info { padding: 2rem .5rem .45rem; }
  .interview-tile--host { display: block; width: 8rem; }
  .next-receipt { min-height: 32rem; padding: 4rem 1rem; }
  .result-pop,
  .result-pop:nth-child(n) { width: 9rem; }
  .result-pop p { font-size: .72rem; line-height: 1.32; }
  .result-pop cite { font-size: .55rem; }
  .result-pop[data-position="north-west"] { top: 1%; left: 3%; }
  .result-pop[data-position="north-east"] { top: 1%; right: 3%; }
  .result-pop[data-position="mid-west"] { top: 36%; left: 2%; }
  .result-pop[data-position="mid-east"] { top: 36%; right: 2%; }
  .result-pop[data-position="south-west"] { bottom: 4%; left: 3%; }
  .result-pop[data-position="south-east"] { right: 3%; bottom: 4%; }
  .family-item span { font-size: .68rem; letter-spacing: .07em; }
  .footer__brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__word { text-align: center; }
  .footer__about { margin-inline: auto; }
  :where(#revenue-wins, #case-studies, #interviews, #wall) {
    scroll-margin-top: 4.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .before-after-card,
  .result-pop { transition: none; }
  .interview-column__track { animation: none; }
}


/* --- JULY 17 EVENING PASS: stat color + quote number pop -------- */
/* Number red, unit black — for every counter after the first. The opening
   "1,000+" keeps the inverted treatment so the row still opens on black. */
.counter:nth-child(n+2) .counter__n { color: var(--red); }
.counter:nth-child(n+2) .counter__n .suffix { color: var(--ink); }
.ticker__item .tick-num { color: var(--red); font-weight: 700; }
.ticker__item .tick-arrow { color: var(--orange); font-weight: 700; }
.result-pop .pop-num { color: #FF6B52; font-weight: 700; font-style: normal; }


/* ================= STRAIGHTFORWARD PASS (approved preview) ================= */
/* Only the proof wall collapses; cases + interviews always render in full */
.wall { padding-bottom: 4rem; }

/* step strip */
.steps {
  padding: 4.5rem var(--gutter) 4.75rem;
  text-align: center;
  background: var(--ink);
  color: #fff;
}
.steps__eyebrow { color: rgba(255,255,255,.55); letter-spacing: .18em; font-size: .78rem; margin-bottom: 2.4rem; }
.steps__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem;
  max-width: 62rem;
  margin: 0 auto;
}
.step__n {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.step h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; margin-bottom: .5rem; }
.step p { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.5; max-width: 17rem; margin: 0 auto; }
@media (max-width: 720px) {
  .steps { padding: 3.2rem var(--gutter) 3.4rem; }
  .steps__row { grid-template-columns: 1fr; gap: 1.8rem; }
  .step p { max-width: 22rem; }
}

/* deck CTA */
.before-after__cta { text-align: center; margin-top: 2.4rem; }


/* ================= RESULTS-ONLY PASS ================= */
.hero { padding-top: clamp(8rem, 10vw, 9.25rem); }
.nav__inner { justify-content: flex-start; }


/* ================= IN THEIR OWN WORDS ================= */
.own-words { padding: 1rem var(--gutter) 4.5rem; background: var(--paper); }
.own-words .section-head { padding-bottom: 1.6rem; }
.own-words__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  max-width: 72rem;
  margin: 0 auto;
}
.own-word { width: min(20rem, 78vw); margin: 0; }
.own-word .media-player {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #111;
  box-shadow: 0 16px 40px -24px rgba(19,18,17,.5);
}
.own-word .media-player img,
.own-word .media-player video { width: 100%; height: 100%; object-fit: cover; }
.own-word figcaption { padding: .85rem .35rem 0; text-align: center; }
.own-word__quote { font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.own-word__name { margin-top: .4rem; font-size: .68rem; letter-spacing: .14em; color: var(--ink-dim); }
@media (max-width: 720px) {
  .own-words { padding-bottom: 3.4rem; }
}


/* ================= FULL CLIENT INTERVIEWS ================= */
.interviews { padding: 1rem var(--gutter) 6rem; background: var(--paper); }
.interviews .section-head { padding-bottom: 2.2rem; }
.interviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2rem);
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Interview cards mirror the .case card chrome + caption. Only the media
   differs: landscape 16:9 for the Zoom interviews. */
.interview-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid rgba(19,18,17,.13); border-radius: 22px; background: #fff;
  box-shadow: 0 12px 30px rgba(19,18,17,.08);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.interview-card:hover {
  transform: translateY(-5px); border-color: rgba(165,37,47,.35);
  box-shadow: 0 22px 42px rgba(19,18,17,.13);
}
.interview-card .media-player { aspect-ratio: 16 / 9; background: #111; }
.interview-card .media-player img,
.interview-card .media-player video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .interviews__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .interviews__grid { grid-template-columns: 1fr; gap: .85rem; }
}

/* view-only media */
img, video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.media-player img, .media-player video { pointer-events: auto; }

/* ============================================================
   REVENUE WINS  (§1)
   Boxed cards on a warm tint, which is the treatment Adam picked, with
   the editorial typography kept: the figure set large and first, the
   person demoted to a byline at the foot of the card.
   ============================================================ */
.revwins { background: #FAF7F5; border-block: 1px solid #EDE7E2; }
.revwins .section-head { padding-top: clamp(3.5rem, 6vw, 5rem); }
.revwins__lede {
  font-family: var(--body); font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: var(--ink-dim); margin-top: .7rem; max-width: 46ch;
}
.revwins__grid {
  /* Three across, not four: the byline needs room to keep the client's name
     and their niche on ONE line instead of wrapping. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 1.8vw, 1.8rem);
  max-width: 82rem; margin: clamp(2.4rem, 4vw, 3.2rem) auto 0;
  padding: 0 var(--gutter) clamp(3rem, 5vw, 4.5rem);
}
.revwin {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E7E0DA; border-radius: 14px;
  padding: clamp(1.3rem, 1.7vw, 1.7rem);
  padding-bottom: calc(clamp(1.3rem, 1.7vw, 1.7rem) + 1.15rem);
  box-shadow: 0 1px 2px rgba(19,18,17,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.revwin:hover {
  transform: translateY(-3px); border-color: var(--red);
  box-shadow: 0 10px 24px rgba(19,18,17,.09);
}
.revwin__big {
  font-family: var(--display); color: var(--ink); line-height: .95;
  font-size: clamp(1.95rem, 2.8vw, 2.85rem); letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.revwin__stat {
  font-family: var(--body); font-size: clamp(.83rem, .95vw, .93rem); line-height: 1.45;
  color: var(--ink-soft); margin-top: .6rem;
}
.revwin__who {
  margin-top: auto; padding-top: 1.25rem;
  display: flex; align-items: center; gap: .6rem;
}
.revwin__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden;
  background: #F2EFEC; border: 2px solid var(--red); display: grid; place-items: center;
}
.revwin__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revwin__mono { font-family: var(--display); font-size: .68rem; color: var(--red); line-height: 1; }
.revwin__id {
  display: flex; flex-flow: row wrap; align-items: baseline; gap: .1rem .45rem;
  min-width: 0;
}
.revwin__name {
  overflow-wrap: anywhere;
  font-family: var(--display); font-size: clamp(.8rem, .92vw, .9rem);
  color: var(--ink); line-height: 1.2;
}
.revwin__niche {
  font-family: var(--body); font-weight: 700; font-size: clamp(.55rem, .64vw, .64rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
@media (max-width: 1000px) { .revwins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .revwins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
/* Two-up stops working around 430px: the avatar plus the client's name is
   wider than the column, which is where the 320px overflow came from. */
@media (max-width: 430px)  { .revwins__grid { grid-template-columns: 1fr; } }
/* Adam wants the name and the niche on ONE line for everyone. There is only
   room for that once the card is wide enough, so it is enforced from 1000px
   up and allowed to wrap below, where two-up columns are genuinely too narrow. */
@media (min-width: 1000px) {
  .revwin__id { flex-wrap: nowrap; min-width: 0; }
  .revwin__name { font-size: .84rem; white-space: nowrap; flex: none; }
  /* The niche is the part that gives: it holds one line and ellipses rather
     than wrapping under the name or spilling past the card. Chasing this by
     shortening individual niches was whack-a-mole across breakpoints. */
  .revwin__niche {
    font-size: .58rem; letter-spacing: .1em; white-space: nowrap;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
}
@media (prefers-reduced-motion: reduce) { .revwin, .revwin:hover { transition: none; transform: none; } }

/* A linked win is a real anchor, so it must not inherit link chrome, and it
   needs a visible affordance that it goes somewhere. */
.revwin--linked { text-decoration: none; color: inherit; cursor: pointer; }
.revwin--linked:hover .revwin__go,
.revwin--linked:focus-visible .revwin__go { color: var(--red); }
.revwin--linked:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.revwin__who { min-width: 0; }
/* Pinned to the bottom-right corner of the card, out of the byline row. */
.revwin__go {
  position: absolute; right: clamp(1.3rem, 1.7vw, 1.7rem); bottom: .95rem;
  white-space: nowrap;
  font-family: var(--body); font-weight: 700; font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
  transition: color .18s ease;
}

/* Revenue-win links target an individual CARD, not a section, so the cards
   need their own scroll-margin or they land underneath the sticky header.
   The section-level rule above does not cover them. Same bug as #interviews
   in July 2026. */
:where(.case, .interview-card) { scroll-margin-top: 7rem; }
@media (max-width: 1000px) { :where(.case, .interview-card) { scroll-margin-top: 6rem; } }

/* The nowrap "Watch" label sets a min-content width the 2-up mobile grid
   cannot honour, which pushed 5px of horizontal overflow at 320px. The whole
   card is the link, so the label is decoration and can go. */
@media (max-width: 680px) { .revwin__go { display: none; } }

/* ---- Fullscreen media ------------------------------------------------------
   In fullscreen the player IS the whole screen, so the video has to fill it and
   the exit control has to be visible without a hover. Hover never fires on a
   touch device, which is part of why a viewer could get stuck with no way out.
   --------------------------------------------------------------------------- */
.media-player.is-fullscreen {
  background: #000; display: grid; place-items: center;
  width: 100vw; height: 100vh;
}
.media-player.is-fullscreen .media-player__surface { width: 100%; height: 100%; }
.media-player.is-fullscreen video {
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.media-player.is-fullscreen .media-player__fullscreen {
  opacity: 1; transform: none;
  /* base rule pins bottom; clear it or the button stretches the screen height */
  bottom: auto; top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 2.9rem; height: 2.9rem; font-size: 1.15rem;
  background: rgba(0,0,0,.62); border: 2px solid rgba(255,255,255,.85); color: #fff;
  z-index: 2147483647;
}
.media-player.is-fullscreen .media-player__fullscreen:hover,
.media-player.is-fullscreen .media-player__fullscreen:focus-visible {
  background: var(--red); transform: scale(1.06);
}

/* ================================================================
   SINGLE-VIDEO WATCH PAGES (/w/<id>.html)
   One client, one link. Reps send these to a prospect instead of
   the whole results site, which lands as a wall of 60-odd faces.
   ================================================================ */
.media-player__share {
  position: absolute;
  z-index: 3;
  top: .65rem;
  right: .65rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: rgba(13,13,13,.62);
  border: 1px solid rgba(255,255,255,.5);
  transition: background .2s ease, transform .2s ease;
}
.media-player__share:hover { background: var(--red); transform: translateY(-1px); }
.media-player__share:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.media-player.is-fullscreen .media-player__share { display: none; }

.watch-body { background: var(--paper-deep); }
.watch {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(5.5rem, 12vw, 7.5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.watch__card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
/* contain, not cover: this page exists to show one video whole. */
.media-player--watch { max-height: 74vh; margin-inline: auto; }
.media-player--watch .media-player__launch img,
.media-player--watch video { object-fit: contain; }
.watch__kicker { color: var(--red); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; }
.watch__name { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.04; letter-spacing: -.01em; }
.watch__niche { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin: .4rem 0 .9rem; }
.watch__result { font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; color: var(--ink-soft); }
.watch__back {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: .18rem;
}
.watch__back:hover { color: var(--red); }
.watch__foot {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem);
  color: var(--ink-dim);
  font-size: .72rem;
  line-height: 1.6;
}
@media (max-width: 780px) {
  .watch__card { grid-template-columns: 1fr; }
  .media-player--watch { max-height: 62vh; width: 100%; }
}
/* Landscape cuts get a wider frame; vertical phone clips keep the tall one. */
.watch--wide { max-width: 80rem; }
.watch__card--wide { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
@media (max-width: 780px) {
  .watch__card--wide { grid-template-columns: 1fr; }
}

/* ================================================================
   FINAL CTA — the one conversion point on the page. Everything above
   it is proof; this is the only thing asking for anything.
   ================================================================ */
.final-cta {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
}
.final-cta__eyebrow {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: .9rem;
}
.final-cta__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  text-wrap: balance;
}
.final-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--red);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.6rem;
  border: 2px solid #fff;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.5);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.final-cta__btn:hover { transform: translateY(-2px); background: transparent; color: #fff; }
.final-cta__btn:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

/* Same CTA closes each single-video page: a prospect sent one client link
   lands there and never sees the main page's footer. */
.watch .final-cta { margin-top: clamp(1.5rem, 4vw, 2.5rem); }