/* Tempo Personal Training. The rep is the signature; everything else stays quiet. */

@font-face { font-family: "League Gothic"; src: url("/fonts/league-gothic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rethink Sans"; src: url("/fonts/rethink-sans-400.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #101113;
  --ink-2: #181a1d;
  --concrete: #D8D8D4;
  --concrete-dim: #9c9d9a;
  --coral: #FF5B4A;
  --steel: #7A8591;
  --line: rgba(216, 216, 212, .16);
  --line-ink: rgba(16, 17, 19, .18);
  --ink-60: rgba(16, 17, 19, .6);

  --display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --body: "Rethink Sans", "Segoe UI", system-ui, sans-serif;

  --gutter: 50px;
  --section: 120px;
  --nav-h: 72px;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: 800ms;
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 300ms;
  --stagger: 200ms;
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);

  /* the rep: 3s lower, 1s pause, 2s lift. Used by the signature only */
  --ease-ecc: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-con: cubic-bezier(0.3, 0.1, 0.25, 1);
}
@media (max-width: 1100px) { :root { --gutter: 32px; --section: 96px; } }
@media (max-width: 809.98px) { :root { --gutter: 20px; --section: 72px; --nav-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--ink); color: var(--concrete);
  font: 400 17px/1.55 var(--body); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--coral); color: var(--ink); padding: 8px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ---------- type ---------- */
.h2 { font: 400 clamp(64px, 8.4vw, 132px)/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.h3 { font: 400 clamp(48px, 4.6vw, 76px)/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em; }
.label, .kicker, .tag, .count__label, .set__tag, .coach__role, .trace__lbl, .method__read, .tut__axis, .status, .hb__axis {
  font: 600 13px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase;
}
.lede { font-size: 19px; line-height: 1.55; color: var(--concrete-dim); max-width: 44ch; }
.tag { display: flex; align-items: center; gap: 16px; color: var(--concrete-dim); margin-bottom: 24px; }
.tag__no { color: var(--concrete); }
.tag--ink, .tag--ink .tag__no { color: var(--ink); }

/* ---------- glyph: the rep, drawn (down, hold, up) ---------- */
.glyph { width: 36px; height: 12px; fill: none; stroke: var(--coral); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 28px;
  border-radius: 999px; font: 600 16px/1 var(--body); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
.btn--coral { background: var(--coral); color: var(--ink); }
.btn--coral:hover { background: var(--concrete); }
.btn--ink { background: var(--ink); color: var(--concrete); }
.btn--ink:hover { background: var(--concrete); color: var(--ink); }
/* secondary: outline pill with an arrow disc, never a bare link */
.btn--line { background: transparent; color: var(--concrete); border: 1px solid rgba(216,216,212,.4); padding: 0 8px 0 24px; }
.btn--line .arw { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--concrete); color: var(--ink); transition: background-color var(--dur-hover) var(--ease-hover); }
.btn--line .arw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn--line:hover { border-color: var(--concrete); background: rgba(216,216,212,.08); }
.btn--line:hover .arw { background: var(--coral); }
.btn--line-ink { color: var(--ink); border-color: rgba(16,17,19,.35); }
.btn--line-ink .arw { background: var(--ink); color: var(--concrete); }
.btn--line-ink:hover { border-color: var(--ink); background: rgba(16,17,19,.06); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: 40px; padding: 0 var(--gutter);
  background: rgba(16, 17, 19, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__word { font: 400 34px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.nav__links { display: flex; gap: 32px; margin-left: auto; }
.nav__links a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--concrete-dim); transition: color var(--dur-hover) var(--ease-hover); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--concrete); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav__cta { height: 44px; padding: 0 22px; font-size: 15px; }
.nav--book .nav__cta { display: none; }
.nav__toggle { display: none; margin-left: auto; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--concrete); font: 600 14px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.menu { position: fixed; inset: var(--nav-h) 0 0; z-index: 49; background: var(--ink); padding: 32px var(--gutter); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu nav { display: flex; flex-direction: column; }
.menu a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 56px/1 var(--display); text-transform: uppercase; text-decoration: none; }
.menu a i { font: 600 13px/1 var(--body); font-style: normal; color: var(--steel); letter-spacing: .1em; width: 24px; }
.menu a:last-child { color: var(--coral); }
.menu__foot { color: var(--concrete-dim); font-size: 14px; margin-top: 32px; }

/* =================================================================
   REP HERO. The page word performs a rep over a photo. The ink floor
   is a mask whose top edge is the word's top edge, so when the word
   lowers the floor lowers with it and uncovers the photo.
   The word is sized in CSS (container units x the face's measured
   width ratio --wr) so it never resizes after first paint.
   ================================================================= */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto;
  padding: 0 var(--gutter) 32px; background: var(--ink);
}
.hero--home { min-height: max(100svh, 700px); --fcap: max(220px, calc((100svh - 450px) * 1.333)); }
.hero--inner { min-height: max(72svh, 580px); --fcap: 46svh; }
.hero--book { min-height: max(60svh, 520px); --fcap: 36svh; padding-bottom: 152px; }
.hero__photo { position: absolute; inset: 0; z-index: 0; overflow: clip; background: var(--ink-2); }
.hero__photo img, .hero__photo video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__photo video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-hover); }
.hero__photo video.is-playing { opacity: 1; }
.hero__photo::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(16,17,19,.82) 0, rgba(16,17,19,.25) 30%, rgba(16,17,19,.1) 60%),
  linear-gradient(to right, rgba(16,17,19,.7) 0, transparent 45%); }
.hero__top, .hero__rig, .hero__floor, .hero__base { position: relative; z-index: 2; }
.hero__top { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 32px; }
.kicker { color: var(--concrete-dim); }
.hero__say { margin-top: 20px; max-width: 16ch; font: 500 32px/1.15 var(--body); letter-spacing: -0.015em; }

.hero__rig {
  display: flex; align-items: flex-end; gap: 32px; container-type: inline-size;
  --cw: clamp(200px, 17vw, 260px);
}
.hero__wordbox { position: relative; flex: 0 0 auto; }
.hero__word, .hero__mask {
  --fs: min(calc((100cqw - var(--cw) - 32px) / var(--wr, 1.853)), var(--fcap));
  --wh: calc(var(--fs) * .75);
  --drop: calc(var(--wh) * .56);
}
.hero__word {
  display: block; font: 400 var(--fs)/0.8 var(--display);
  text-transform: uppercase; letter-spacing: -0.005em; color: var(--concrete); white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.rw { position: relative; display: block; transform-origin: 50% 100%; }
.rw__l { display: block; text-box: trim-both cap alphabetic; }
.rw__steel, .rw__coral { position: absolute; inset: 0; opacity: 0; }
.rw__steel { color: var(--steel); }
.rw__coral { color: var(--coral); }
.hero__mask {
  position: absolute; z-index: -1; top: 0; left: calc(-1 * var(--gutter) - 2px);
  width: calc(100vw + 40px); height: 200svh; background: var(--ink);
}

.hero__count { flex: 1 1 0; min-width: 0; padding-bottom: 4px; border-left: 1px solid var(--line); padding-left: 24px; }
.count__label { color: var(--concrete-dim); margin-bottom: 12px; }
.count__digits { display: flex; gap: 6px; font: 400 clamp(56px, 7vw, 112px)/0.8 var(--display); }
.count__digits span { color: var(--concrete); opacity: .22; }
.count__digits span:nth-child(1) { color: var(--steel); }
.count__digits span:nth-child(3), .count__digits span:nth-child(4) { color: var(--coral); }
.count__digits span + span::before { content: "-"; margin-right: 6px; color: var(--concrete); opacity: .5; }
.count__phase { position: relative; height: 40px; margin-top: 20px; font: 400 40px/1 var(--display); text-transform: uppercase; }
.hero--inner .count__phase, .hero--book .count__phase { margin-top: 0; height: 64px; font-size: 64px; }
.count__phase span { position: absolute; left: 0; top: 0; opacity: 0; }
.count__phase span:nth-child(1) { opacity: 1; color: var(--steel); }
.count__phase span:nth-child(3), .count__phase span:nth-child(4) { color: var(--coral); }
.count__row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.count__sec { color: var(--concrete-dim); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.count__sec b { color: var(--concrete); font-weight: 600; font-size: 22px; margin-right: 4px; }
.count__ctl {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(16,17,19,.5); color: var(--concrete); cursor: pointer;
  font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  transition: border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
.count__ctl:hover { border-color: var(--concrete); }
.count__ctl svg { width: 10px; height: 10px; fill: currentColor; }
.count__again { visibility: hidden; }
.hero.is-done .count__again { visibility: visible; }
.hero.is-done .count__phase span { opacity: 0; }
.hero.is-done .count__phase span:nth-child(4) { opacity: 1; }

.hero__floor { height: 1px; background: var(--concrete); opacity: .5; }
.hero__base { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: 48px; align-items: center; padding-top: 24px; }
.hero__lede { max-width: 42ch; color: var(--concrete-dim); }
.hero__lede b { color: var(--concrete); font-weight: 600; }
.hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.status { display: flex; align-items: center; gap: 8px; color: var(--concrete-dim); font-size: 11px; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--steel); flex: none; }
.status.is-open .status__dot { background: var(--coral); }

/* inner hero: the floor line carries a second job */
.hero--inner .hero__base, .hero--book .hero__base { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.floorjobs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 12px; }
.jump {
  display: inline-flex; align-items: baseline; gap: 10px; height: 48px; padding: 0 20px; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: rgba(16,17,19,.6);
  font-weight: 600; font-size: 15px; transition: border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.jump span { color: var(--concrete-dim); font-weight: 500; }
.jump:hover { border-color: var(--coral); }
.facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; }
.facts li { padding: 4px 20px; border-left: 1px solid var(--line); font: 400 32px/1 var(--display); text-transform: uppercase; }
.facts li:first-child { border-left: 0; }
.facts li small { display: block; margin-top: 6px; font: 600 11px/1.3 var(--body); letter-spacing: .12em; color: var(--concrete-dim); }

/* trace: the rep profile */
.trace { position: relative; height: 64px; overflow: clip; }
.trace svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trace polyline, .trace line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.t-down { stroke: var(--steel); stroke-width: 3; }
.t-hold { stroke: var(--concrete); stroke-width: 3; opacity: .6; }
.t-up { stroke: var(--coral); stroke-width: 3; }
.t-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.trace__lbl { position: absolute; bottom: -2px; padding-left: 6px; font-size: 10px; color: var(--concrete-dim); transform: translateY(100%); }
.trace--hero { overflow: visible; margin-bottom: 14px; }
.ph-x, .mx { position: absolute; inset: 0; pointer-events: none; }
.ph-y, .my { position: absolute; left: 0; top: 0; width: 0; height: 100%; }
.ph-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--concrete); box-shadow: 0 0 0 4px var(--ink); }
.ph-y { transform: translateY(10%); }

/* =================================================================
   HOME 01 METHOD. Static: four phases listed. Enhanced: scroll performs one rep
   ================================================================= */
.method { position: relative; padding: var(--section) var(--gutter); border-top: 1px solid var(--line); }
.method__stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 48px; position: relative; }
.method__head { grid-column: 1; }
.method__hint { display: none; margin-top: 20px; color: var(--concrete-dim); max-width: 36ch; }
.method__phases { grid-column: 1; display: grid; }
.m-phase { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.m-num { font: 400 180px/0.78 var(--display); text-box: trim-both cap alphabetic; }
.m-phase--3 .m-num { color: var(--steel); }
.m-phase--2 .m-num, .m-phase--0 .m-num { color: var(--coral); }
.m-copy h3 { font: 400 48px/0.95 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.m-copy p { color: var(--concrete-dim); max-width: 34ch; }
.method__photo { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; position: relative; overflow: clip; margin-right: calc(-1 * var(--gutter)); }
.method__photo-in { height: 100%; min-height: 640px; }
.method__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.method__photo figcaption { position: absolute; left: 24px; bottom: 24px; z-index: 4; padding: 8px 12px; background: rgba(16,17,19,.78); font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.method__bar, .method__meter { display: none; }

/* The scroll-driven rep that used to live here is gone: it took seven screens of scroll and
   was worst on a phone. The section keeps its four phases, which are what 3-1-2-0 means, as a
   plain list beside the photo. */
/* phase boundaries on the 7-unit track: 7.14 / 50 / 64.29 / 92.86 */
@keyframes m-bar { 0%, 7.14% { transform: translateY(30%); } 50%, 64.29% { transform: translateY(66%); } 92.86%, 100% { transform: translateY(30%); } }
@keyframes m-bar-steel { 0%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes m-bar-coral { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes m-p3 { 0%, 7.14% { opacity: 1; transform: none; } 47% { opacity: 1; transform: translateY(24px); } 49%, 100% { opacity: 0; transform: translateY(40px); } }
@keyframes m-p1 { 0%, 49% { opacity: 0; } 51%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes m-p2 { 0%, 64% { opacity: 0; transform: translateY(40px); } 66% { opacity: 1; transform: translateY(24px); } 90% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes m-p0 { 0%, 92% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes m-dip { 0%, 7.14% { transform: translateY(0); } 50%, 64.29% { transform: translateY(40px); } 92.86%, 100% { transform: translateY(0); } }
@keyframes m-x { 0%, 7.14% { transform: translateX(0); } 92.86%, 100% { transform: translateX(100%); } }
@keyframes m-y { 0%, 7.14% { transform: translateY(10%); } 50%, 64.29% { transform: translateY(90%); } 92.86%, 100% { transform: translateY(10%); } }

/* =================================================================
   Shared section heads
   ================================================================= */
.sec-head { margin-bottom: 64px; }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.sec-head__lede { max-width: 44ch; color: var(--concrete-dim); font-size: 19px; padding-bottom: 12px; }
.sec-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 12px; }

/* =================================================================
   HOME 02 COACHING: the rack. Four full-height photo panels, whole-card links
   ================================================================= */
.coaching { padding: var(--section) 0 0; }
.coaching .sec-head { padding: 0 var(--gutter); }
.sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; height: min(92svh, 880px); min-height: 640px; background: var(--ink); }
.set { position: relative; overflow: clip; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 28px 32px; min-width: 0; text-decoration: none; }
.set__img { position: absolute; inset: 0; z-index: -1; background: var(--ink-2); overflow: clip; }
.set__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-hover); }
.set__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,17,19,.78) 0, rgba(16,17,19,.1) 32%, rgba(16,17,19,.15) 48%, rgba(16,17,19,.92) 82%); }
@media (hover: hover) { .set:hover .set__img img { transform: scale(1.05); } }
.set__tag { display: flex; justify-content: space-between; color: var(--concrete-dim); margin-bottom: 16px; }
.set__tag span { color: var(--concrete); }
.set__name { font: 400 clamp(48px, 4.6vw, 76px)/0.9 var(--display); text-transform: uppercase; }
.set__list li { padding: 9px 0; border-bottom: 1px solid rgba(216,216,212,.22); font-size: 15px; }
.set__price { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; }
.set__price::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 6px; background: var(--coral); }
.set__price b { font: 400 clamp(64px, 6vw, 104px)/0.8 var(--display); font-variant-numeric: tabular-nums; }
.set__price span { font-size: 13px; color: var(--concrete-dim); text-align: right; line-height: 1.35; }
.set__go { position: absolute; top: 24px; right: 24px; }

/* =================================================================
   HOME 03 PROGRAMMES: the build-up (load climbing, in plain words)
   ================================================================= */
.programmes { position: relative; overflow: clip; padding: var(--section) var(--gutter); }
.programmes__bg { position: absolute; inset: 0; z-index: 0; }
.programmes__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.programmes__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,17,19,.92) 0, rgba(16,17,19,.62) 45%, rgba(16,17,19,.92) 100%); }
.programmes > :not(.programmes__bg) { position: relative; z-index: 1; }

.ribbon { --h0: 28; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 260px; border-bottom: 2px solid var(--concrete); }
.rb { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.rb__bar { height: calc((var(--h0) + var(--w) * (100 - var(--h0)) / 11) * 1%); background: var(--steel); transform-origin: 50% 100%; }
.rb--up .rb__bar { background: var(--coral); }
.rb__wk i { font-style: normal; }
.rb__wk { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font: 600 11px/1 var(--body); letter-spacing: .1em; color: var(--concrete-dim); }
.rb__flag { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--coral); color: var(--ink); font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.rb--test .rb__flag { bottom: auto; top: -34px; }
.phases3 { display: grid; grid-template-columns: 4fr 4fr 4fr; margin-top: 64px; }
.ph3 { padding: 24px 32px 0 0; border-top: 1px solid var(--line); position: relative; }
.ph3 + .ph3 { padding-left: 32px; border-left: 1px solid var(--line); }
.ph3::before { content: ''; position: absolute; top: -1px; left: 0; width: 64px; height: 3px; background: var(--steel); }
.ph3 + .ph3::before { left: 32px; }
.ph3--up::before { background: var(--coral); }
.ph3__wk { color: var(--concrete-dim); font: 600 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.ph3 h3 { font: 400 clamp(40px, 3.6vw, 60px)/0.92 var(--display); text-transform: uppercase; margin: 12px 0; }
.ph3 p { color: #c4c5c1; max-width: 32ch; }
.programmes__foot { margin-top: 56px; }

/* =================================================================
   HOME 04 COACHES: two portraits on steel
   ================================================================= */
.coaches { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--steel); min-height: max(100svh, 760px); }
.coaches .h2, .coaches .tag__no { color: var(--ink); }
.coaches .tag { color: #22262b; }
.coach { position: relative; overflow: clip; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px var(--gutter); }
.coach__img { position: absolute; inset: 0; z-index: -1; background: #69737e; }
.coach__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.coach__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(16,17,19,.9) 88%); }
.coaches__side { display: flex; flex-direction: column; }
.coaches__head { padding: var(--section) var(--gutter) 48px; display: flex; flex-direction: column; align-items: flex-start; }
.coach--theo { flex: 1; min-height: 480px; }
.coach--theo .coach__img img { object-position: 48% 30%; }
.coach__role { color: var(--concrete-dim); }
.coach__name { font: 400 clamp(64px, 7vw, 120px)/0.86 var(--display); text-transform: uppercase; margin: 8px 0 16px; }
.coach__cue { font-size: 20px; line-height: 1.4; font-weight: 500; max-width: 26ch; margin-bottom: 24px; }
.cnums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 28px; border-top: 1px solid rgba(216,216,212,.3); padding-top: 14px; }
.cnums dt { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--concrete-dim); }
.cnums dd { font: 400 30px/1.1 var(--display); text-transform: uppercase; }

/* =================================================================
   HOME 05 NUMBERS: time under tension over the chalk bowl
   ================================================================= */
.proof { position: relative; overflow: clip; isolation: isolate; padding: var(--section) var(--gutter); min-height: max(100svh, 820px); display: flex; align-items: center; }
.proof__img { position: absolute; inset: 0; z-index: -1; }
.proof__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scaleX(-1); }
.proof__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,17,19,.94) 0, rgba(16,17,19,.84) 44%, rgba(16,17,19,.25) 72%, rgba(16,17,19,.05) 100%); }
.proof__body { width: min(780px, 100%); }
.proof__lede { margin: 24px 0 48px; color: #b9bab6; font-size: 19px; max-width: 40ch; }
.tut { display: grid; gap: 24px; }
.tut__row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 110px; gap: 24px; align-items: center; }
.tut__name { font-weight: 600; }
.tut__name span { display: block; font-weight: 400; font-size: 14px; color: var(--concrete-dim); }
.tut__track { position: relative; height: 52px; background: rgba(216,216,212,.1); overflow: clip; }
.tut__fill { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: 0 50%; }
.tut__fill--rush { width: 33.333%; background: var(--steel); }
.tut__fill--tempo { width: 100%; background: var(--coral); }
.tut__reps { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), var(--ink) calc(12.5% - 2px) 12.5%); pointer-events: none; }
.tut__row:first-child .tut__reps { right: 66.667%; }
.tut__n { font: 400 72px/0.8 var(--display); text-align: right; color: var(--steel); font-variant-numeric: tabular-nums; }
.tut__n--hi { color: var(--coral); }
.tut__axis { display: flex; justify-content: space-between; margin-left: 204px; margin-right: 134px; color: var(--concrete-dim); font-size: 11px; }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 64px; border-top: 2px solid var(--concrete); }
.nums div { padding: 16px 16px 0 0; }
.nums div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.nums dt { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--concrete-dim); }
.nums dd { font: 400 72px/0.9 var(--display); }
.nums dd small { font-size: .45em; margin-left: 4px; color: var(--concrete-dim); }

/* =================================================================
   HOME 06 STUDIO: the heading sits on the rooms
   ================================================================= */
.rooms { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.rooms__head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: calc(var(--section) - 24px) var(--gutter) 120px; background: linear-gradient(to bottom, rgba(16,17,19,.9) 0, rgba(16,17,19,.55) 60%, transparent); }
.rooms__head .sec-head { margin-bottom: 0; align-items: start; }
.rooms__head .sec-head__side { padding-top: 64px; }
.rooms__head .sec-head__lede { color: var(--concrete); padding: 0; }
.room { position: relative; height: max(100svh, 760px); overflow: clip; }
.room img { width: 100%; height: 100%; object-fit: cover; }
.room:nth-child(3) img { object-position: 50% 70%; }
.room figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 96px var(--gutter) 32px; background: linear-gradient(to top, rgba(16,17,19,.88), transparent); }
.room figcaption b { font: 400 56px/0.9 var(--display); text-transform: uppercase; }
.room figcaption span { font-size: 15px; }

/* =================================================================
   CLOSE ("the top"): coral flood with the photo under the right 55%.
   The headline crosses the seam: ink on coral, concrete on the photo.
   ================================================================= */
/* Row one was 1fr holding nothing but the little Top tag, so on a wide screen it swallowed
   the leftover height and left ~900px of bare coral above the heading. Rows size to content. */
.close { position: relative; display: grid; grid-template-columns: 45% 55%; grid-template-rows: auto auto auto; background: var(--coral); color: var(--ink); min-height: min(68svh, 620px); overflow: clip; isolation: isolate; }
.close__img { grid-column: 2; grid-row: 1 / -1; position: relative; overflow: clip; z-index: 0; background: #c9493b; }
/* absolutely filled, so a portrait master cannot set the height of the whole band: 55% of a
   1900px screen on a 2:3 photo came to 1568px and every row stretched to match it */
.close__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.close__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,17,19,.62) 0, rgba(16,17,19,.25) 50%, rgba(16,17,19,.05) 100%); }
.close__top { grid-column: 1; grid-row: 1; padding: clamp(44px, 6vh, 84px) var(--gutter) 0; position: relative; z-index: 2; align-self: end; }
.close__h { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; padding: 40px var(--gutter) 0; pointer-events: none; }
.close__hl { display: block; font: 400 clamp(120px, 15vw, 240px)/0.82 var(--display); text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap; text-box: trim-both cap alphabetic; }
.close__hl--ink { color: var(--ink); clip-path: inset(0 calc(55% + var(--gutter) * 0.1) 0 0); }
.close__hl--on { position: absolute; left: var(--gutter); top: 40px; color: var(--concrete); clip-path: inset(0 0 0 calc(45% - var(--gutter) * 0.1)); width: calc(100% - 2 * var(--gutter)); }
.close__row { grid-column: 1; grid-row: 3; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; margin: 40px var(--gutter) var(--section); padding-top: 24px; border-top: 2px solid var(--ink); }
.close__row p { max-width: 36ch; font-size: 20px; line-height: 1.4; font-weight: 500; }
.close__act { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.close__tel { font: 400 36px/1 var(--display); text-decoration: none; }
.close__tel:hover { text-decoration: underline; text-underline-offset: 6px; }
.close__trace { position: absolute; z-index: 1; left: 0; top: 16%; width: 100%; height: 56%; fill: none; pointer-events: none; }
.close__trace polyline { vector-effect: non-scaling-stroke; stroke-width: 2; }
.close__trace--ink { stroke: rgba(16,17,19,.2); clip-path: inset(0 55% 0 0); }
.close__trace--on { stroke: rgba(216,216,212,.35); clip-path: inset(0 0 0 45%); }

/* =================================================================
   FOOTER: the hours board. The week as bars on a 5am to 9pm axis
   ================================================================= */
.foot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 56px; padding: 88px var(--gutter) 32px; border-top: 1px solid var(--line); }
.foot__word { font: 400 112px/0.8 var(--display); text-transform: uppercase; }
.foot__line { margin-top: 16px; color: var(--concrete-dim); }
.glyph--foot { width: 120px; height: 40px; margin-top: 24px; stroke-width: 3; }
.foot h2 { font: 600 13px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 16px; }
.hb { position: relative; --tl: 56px; --tr: 128px; }
.hb__axis { display: flex; justify-content: space-between; margin: 0 var(--tr) 10px var(--tl); color: var(--concrete-dim); font-size: 10px; }
.hb__row { display: grid; grid-template-columns: var(--tl) minmax(0, 1fr) var(--tr); align-items: center; height: 36px; border-top: 1px solid var(--line); }
.hb__row:last-of-type { border-bottom: 1px solid var(--line); }
.hb__d { font: 400 22px/1 var(--display); text-transform: uppercase; }
.hb__track { position: relative; height: 12px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6.25%); }
.hb__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); background: var(--steel); }
.hb__t { padding-left: 18px; color: var(--concrete-dim); font-size: 13px; white-space: nowrap; }
.hb__row--off .hb__d, .hb__row--off .hb__t { color: #6a6c6f; }
.hb__row.is-today .hb__bar { background: var(--coral); }
.hb__row.is-today .hb__d, .hb__row.is-today .hb__t { color: var(--coral); }
.hb__now { position: absolute; top: 20px; bottom: 0; left: var(--tl); right: var(--tr); pointer-events: none; overflow: clip; }
.hb__now > span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(calc(var(--x, 0) * 100%)); border-left: 2px solid var(--concrete); font: 600 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding-left: 6px; }
.foot__col p { color: var(--concrete-dim); font-size: 15px; margin-bottom: 12px; }
.foot__col a { text-decoration: none; transition: color var(--dur-hover) var(--ease-hover); }
.foot__col a:hover { color: var(--coral); }
.foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 20px; font-size: 15px; }
.foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); color: #8a8c8f; font-size: 13px; }
.foot__base a { color: var(--concrete); }

/* =================================================================
   COACHING C2: sticky index. The list holds; the photos pass beside it
   ================================================================= */
.ways { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-left: var(--gutter); border-top: 1px solid var(--line); }
.ways__index { position: sticky; top: var(--nav-h); align-self: start; height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: space-between; padding: 64px 48px 48px 0; }
.ways__list li { border-top: 1px solid var(--line); }
.ways__list li:last-child { border-bottom: 1px solid var(--line); }
.ways__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; text-decoration: none; color: var(--concrete-dim); transition: color var(--dur-hover) var(--ease-hover); }
.ways__list b { font: 400 clamp(44px, 4.2vw, 68px)/0.9 var(--display); text-transform: uppercase; font-weight: 400; }
.ways__list span { font-size: 14px; white-space: nowrap; }
.ways__list a:hover { color: var(--concrete); }
.ways__list a.is-on { color: var(--coral); }
.ways__glyph { display: flex; align-items: center; gap: 12px; color: var(--concrete-dim); font-size: 14px; }
.way { position: relative; min-height: max(100svh, 760px); display: flex; align-items: flex-end; overflow: clip; isolation: isolate; padding: 48px var(--gutter); scroll-margin-top: var(--nav-h); }
.way + .way { border-top: 2px solid var(--ink); }
.way__img { position: absolute; inset: 0; z-index: -1; }
.way__img img { width: 100%; height: 100%; object-fit: cover; }
.way__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,17,19,.1) 30%, rgba(16,17,19,.88) 78%); }
.way__copy { width: min(560px, 100%); }
.way__copy .h3 { margin-bottom: 12px; }
.way__line { font-size: 20px; line-height: 1.4; font-weight: 500; margin-bottom: 20px; }
.way__pts li { padding: 10px 0; border-bottom: 1px solid rgba(216,216,212,.25); }
.way__note { margin-top: 18px; font-size: 15px; color: #c4c5c1; max-width: 46ch; }
.way__act { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.way__price { font: 400 44px/1 var(--display); }
.way__price span { font: 500 14px/1 var(--body); color: var(--concrete-dim); margin-left: 6px; }

/* =================================================================
   COACHING C3: memberships. A segmented Monthly / Yearly control on radio
   inputs; each plan carries a membership card. Works without JS (:has).
   ================================================================= */
.plans { position: relative; padding: var(--section) var(--gutter); background: var(--ink); overflow: clip; }
.plans__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 56px; }
.seg { display: inline-flex; position: relative; padding: 5px; border-radius: 999px; background: #232528; border: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--concrete); transition: color var(--dur-hover) var(--ease-hover); }
.seg label small { font: 600 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--coral); color: var(--ink); }
.seg:not(.is-js) .seg__pill { display: none; }
.seg:not(.is-js) input:checked + label { background: var(--concrete); }
.seg__pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: var(--pw, 50%); border-radius: 999px; background: var(--concrete); transition: transform 360ms var(--ease-enter); }
.seg input:checked + label { color: var(--ink); }
.seg input:focus-visible + label { outline: 2px solid var(--coral); outline-offset: 2px; }
.seg:has(#bill-y:checked) .seg__pill { transform: translateX(var(--px, 100%)); }
.plans__note { color: var(--concrete-dim); margin-top: 16px; font-size: 15px; }

.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.plan { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px 24px 28px; background: var(--ink); min-width: 0; }
.plan--hi { position: relative; background: #16171a; box-shadow: inset 0 0 0 2px var(--coral); }
.plan__pop { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  font: 600 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: var(--coral); color: var(--ink); }
/* the membership card: an object you own */
.mcard-wrap { position: relative; padding-bottom: 12px; }
.mcard-wrap::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 30px; border-radius: 0 0 12px 12px; background: #2a2d31; z-index: 0; }
.mcard { position: relative; z-index: 1; aspect-ratio: 1.586; border-radius: 14px; overflow: clip; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; color: var(--concrete); isolation: isolate; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.mcard__field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tint); opacity: .78; }
.mcard--steel { --tint: var(--steel); }
.mcard--coral { --tint: var(--coral); color: var(--ink); }
.mcard--concrete { --tint: var(--concrete); color: var(--ink); }
.mcard--ink { --tint: #25282c; }
.mcard__top { display: flex; justify-content: space-between; align-items: center; }
.mcard__brand { display: flex; align-items: center; gap: 8px; font: 400 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mcard__brand .glyph { stroke: currentColor; width: 30px; height: 10px; }
.mcard__tier { font: 600 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid currentColor; }
.mcard__tap { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.mcard__foot { display: flex; justify-content: space-between; align-items: flex-end; }
.mcard__name { font: 400 22px/0.95 var(--display); text-transform: uppercase; }
.mcard__num { font: 500 11px/1 var(--body); letter-spacing: .18em; opacity: .75; font-variant-numeric: tabular-nums; }
.plan__name { font: 400 40px/0.92 var(--display); text-transform: uppercase; margin-top: 4px; }
.plan__freq { color: var(--concrete-dim); font-size: 14px; margin-top: 6px; }
.price { position: relative; height: 84px; margin-top: 20px; }
.price__v { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 6px; transition: opacity 300ms var(--ease-hover), transform 300ms var(--ease-enter), visibility 0s linear 0s; }
.price__v b { font: 400 72px/0.8 var(--display); font-variant-numeric: tabular-nums; }
.price__v span { font-size: 13px; color: var(--concrete-dim); }
.price__v--y { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 300ms var(--ease-hover), transform 300ms var(--ease-enter), visibility 0s linear 300ms; }
.plans:has(#bill-y:checked) .price__v--m { opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 300ms var(--ease-hover), transform 300ms var(--ease-enter), visibility 0s linear 300ms; }
.plans:has(#bill-y:checked) .price__v--y { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-hover) 80ms, transform 300ms var(--ease-enter) 80ms, visibility 0s linear 0s; }
.plan__inc li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan .btn { width: 100%; }
.oneoffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.oneoff { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 24px 0; }
.oneoff + .oneoff { padding-left: 24px; border-left: 1px solid var(--line); }
.oneoff b { display: block; font: 400 30px/1 var(--display); text-transform: uppercase; }
.oneoff p { color: var(--concrete-dim); font-size: 14px; margin-top: 4px; }
.oneoff .oneoff__v { margin: 0; color: var(--concrete); font: 400 44px/1 var(--display); white-space: nowrap; }
.oneoff .oneoff__v--hi { color: var(--coral); }

/* =================================================================
   COACHING C4: a session as one bar of time (the quiet concrete band)
   ================================================================= */
.session { background: var(--concrete); color: var(--ink); padding: var(--section) 0; }
.session .sec-head { padding: 0 var(--gutter); }
.session .tag, .session .tag__no { color: var(--ink-60); }
.session .tag__no { color: var(--ink); }
.session .sec-head__lede { color: rgba(16,17,19,.72); }
.sbar { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: 10fr 25fr 15fr 10fr; height: 220px; margin: 0 var(--gutter); gap: 3px; }
.sseg { position: relative; overflow: clip; transform-origin: 0 50%; }
.sseg--1 { background: var(--steel); }
.sseg--2 { background: var(--ink); }
.sseg--2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .92; }
.sseg--3 { background: #e7836f; }
.sseg--4 { background: var(--coral); }
.sseg__m { position: absolute; left: 14px; bottom: 12px; font: 400 64px/0.8 var(--display); color: var(--ink); }
.sseg--2 .sseg__m { color: var(--concrete); }
.sseg__m small { font-size: .38em; margin-left: 2px; }
.slabels { display: grid; grid-template-columns: 10fr 25fr 15fr 10fr; gap: 3px; margin: 16px var(--gutter) 0; }
.slabels p { font: 600 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-left: 2px solid var(--ink); padding-left: 10px; }
.saxis { display: flex; justify-content: space-between; margin: 0 var(--gutter) 10px; font: 600 11px/1 var(--body); letter-spacing: .1em; color: var(--ink-60); }

/* =================================================================
   PROGRAMMES P2: the ribbon over three block panels
   ================================================================= */
.blocks { padding: var(--section) 0 0; border-top: 1px solid var(--line); }
.blocks .sec-head, .blocks .ribbon { margin-left: var(--gutter); margin-right: var(--gutter); }
.blocks .ribbon { margin-bottom: 0; height: 200px; }
.bpanels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 56px; }
.bpanel { position: relative; min-height: min(84svh, 760px); display: flex; flex-direction: column; justify-content: space-between; padding: 28px 28px 32px; overflow: clip; isolation: isolate; }
.bpanel__img { position: absolute; inset: 0; z-index: -1; background: var(--ink-2); }
.bpanel__img img { width: 100%; height: 100%; object-fit: cover; }
.bpanel__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,17,19,.7) 0, rgba(16,17,19,.05) 30%, rgba(16,17,19,.2) 50%, rgba(16,17,19,.9) 84%); }
.bpanel__wk { display: flex; justify-content: space-between; align-items: center; }
.bpanel__wk .label { color: var(--concrete); }
.bpanel__n { font: 400 64px/0.8 var(--display); color: var(--steel); }
.bpanel--up .bpanel__n { color: var(--coral); }
.bpanel h3 { font: 400 clamp(44px, 4vw, 68px)/0.92 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.bpanel p { max-width: 30ch; font-size: 18px; }
.bpanel__flag { display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: 999px; background: var(--coral); color: var(--ink); font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }

/* =================================================================
   PROGRAMMES P3: the retest sheet on concrete, a photo overlapping its edge
   ================================================================= */
.sheet-sec { background: var(--concrete); color: var(--ink); padding: var(--section) var(--gutter); overflow: clip; }
.sheet-sec .tag, .sheet-sec .tag__no { color: var(--ink); }
.sheet-sec .tag { color: var(--ink-60); }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.sheet-wrap { position: relative; padding-right: 22%; }
.sheet { position: relative; z-index: 1; background: #ecece8; border: 1px solid var(--line-ink); padding: 32px; box-shadow: 0 30px 60px -40px rgba(16,17,19,.5); }
.sheet__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.sheet__top b { font: 400 40px/1 var(--display); text-transform: uppercase; }
.sheet__top span { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); }
.sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sheet th { text-align: left; font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); padding: 12px 0; border-bottom: 1px solid var(--line-ink); }
.sheet td { padding: 16px 0; border-bottom: 1px solid var(--line-ink); font: 400 30px/1 var(--display); text-transform: uppercase; }
.sheet td.blank { width: 28%; }
.sheet td.blank span { display: block; height: 30px; border-bottom: 1.5px dashed rgba(16,17,19,.4); margin-right: 16px; }
.sheet__sign { margin-top: 20px; font-size: 14px; color: var(--ink-60); }
.sheet-photo { position: absolute; z-index: 2; right: 0; top: 30%; width: 28%; aspect-ratio: 3 / 4; overflow: clip; box-shadow: 0 24px 50px -24px rgba(16,17,19,.6); }
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.incl h3 { font: 600 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 12px; }
.incl li { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-ink); font-size: 18px; }
.incl li i { font: 400 24px/1 var(--display); font-style: normal; color: var(--ink-60); }
.incl__price { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.incl__price b { font: 400 80px/0.8 var(--display); }
.incl__price span { display: block; font-size: 14px; color: var(--ink-60); margin-top: 8px; }

/* =================================================================
   COACHES: K1 two portraits, K2 cue profile, K3 mirrored on steel, K4 lanes
   ================================================================= */
.hero__duo { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: 7fr 5fr; gap: 2px; background: var(--ink); }
.hero__duo figure { position: relative; overflow: clip; background: var(--ink-2); }
/* absolutely filled: the figures are auto-height grid rows, so height: 100% could not resolve
   and each portrait fell back to its intrinsic 1661px, which meant no crop at all, just the top */
.hero__duo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero__duo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,17,19,.8) 0, rgba(16,17,19,.15) 34%, rgba(16,17,19,.1) 60%); pointer-events: none; }
.duo-jobs { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }
.duo-job { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.duo-job b { display: block; font: 400 36px/1 var(--display); text-transform: uppercase; font-weight: 400; }
.duo-job span { color: var(--concrete-dim); font-size: 14px; }

.cue { position: relative; min-height: max(110svh, 820px); overflow: clip; isolation: isolate; display: grid; align-items: end; padding: var(--section) var(--gutter); }
.cue__img { position: absolute; inset: 0; z-index: -1; background: var(--ink-2); }
.cue__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.cue__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,17,19,.92) 0, rgba(16,17,19,.7) 36%, rgba(16,17,19,.1) 70%), linear-gradient(to top, rgba(16,17,19,.6), transparent 40%); }
.cue__body { width: min(620px, 100%); }
.cue__q { font: 400 clamp(72px, 9vw, 150px)/0.86 var(--display); text-transform: uppercase; margin: 12px 0 28px; }
.cue__bio { font-size: 18px; max-width: 42ch; color: #cfd0cc; }
.cue__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid rgba(216,216,212,.35); }
.cue__facts div { padding: 14px 16px 0 0; }
.cue__facts div + div { padding-left: 16px; border-left: 1px solid rgba(216,216,212,.2); }
.cue__facts dt { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--concrete-dim); }
.cue__facts dd { font: 400 32px/1.05 var(--display); text-transform: uppercase; margin-top: 4px; }
.cue__inset { position: absolute; right: var(--gutter); bottom: var(--section); width: min(30vw, 420px); aspect-ratio: 4 / 3; overflow: clip; border: 6px solid var(--ink); z-index: 1; }
.cue__inset img { width: 100%; height: 100%; object-fit: cover; }
.cue__act { margin-top: 32px; }

.cue--steel { background: var(--steel); grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); padding: 0; align-items: stretch; color: var(--ink); }
.cue--steel .cue__photo { position: relative; overflow: clip; min-height: max(110svh, 820px); background: #69737e; }
.cue--steel .cue__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; position: absolute; inset: 0; }
.cue--steel .cue__body { width: auto; padding: var(--section) var(--gutter); display: flex; flex-direction: column; justify-content: flex-end; }
.cue--steel .coach__role, .cue--steel .cue__facts dt { color: #22262b; }
.cue--steel .cue__bio { color: #1c1f22; }
.cue--steel .cue__facts { border-top-color: rgba(16,17,19,.35); }
.cue--steel .cue__facts div + div { border-left-color: rgba(16,17,19,.2); }
.cue--steel .cue__inset { right: auto; left: var(--gutter); bottom: var(--gutter); border-color: var(--steel); }

.lanes { padding: var(--section) var(--gutter); }
.lanes__board { position: relative; --tl: 80px; --tr: 0px; margin-top: 24px; }
.lanes__key { display: flex; gap: 24px; margin-bottom: 20px; font-size: 14px; color: var(--concrete-dim); }
.lanes__key span { display: inline-flex; align-items: center; gap: 8px; }
.lanes__key i { width: 28px; height: 8px; background: var(--steel); }
.lanes__key i.k-theo { background: var(--coral); }
.lanes__row { display: grid; grid-template-columns: var(--tl) minmax(0, 1fr); align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.lanes__row:last-of-type { border-bottom: 1px solid var(--line); }
.lanes__d { font: 400 30px/1 var(--display); text-transform: uppercase; }
.lanes__tracks { display: grid; gap: 6px; }
.lane { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6.25%); }
.lane__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); background: var(--steel); transform-origin: 0 50%; display: flex; align-items: center; padding-left: 8px; font: 600 11px/1 var(--body); color: var(--ink); white-space: nowrap; overflow: clip; }
.lane--theo .lane__bar { background: var(--coral); }
.lanes__row.is-today .lanes__d { color: var(--coral); }
.lanes__axis { display: flex; justify-content: space-between; margin-left: var(--tl); margin-bottom: 10px; font: 600 11px/1 var(--body); letter-spacing: .1em; color: var(--concrete-dim); }
.lanes__now { position: absolute; top: 0; bottom: 0; left: var(--tl); right: 0; pointer-events: none; overflow: clip; }
.lanes__now > span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(calc(var(--x, 0) * 100%)); border-left: 2px solid var(--concrete); font: 600 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding-left: 6px; }

/* =================================================================
   STUDIO: S2 the room holds (sticky); S3 the park slides over it
   ================================================================= */
.roomstack { position: relative; }
.pinroom { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; display: flex; align-items: flex-end; padding: var(--section) var(--gutter); }
.pinroom__img { position: absolute; inset: 0; z-index: -1; }
.pinroom__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pinroom__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,17,19,.9) 0, rgba(16,17,19,.45) 38%, rgba(16,17,19,.05) 70%), linear-gradient(to bottom, rgba(16,17,19,.5), transparent 25%); }
.pinroom__body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; width: 100%; }
.kit li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(216,216,212,.3); font-size: 18px; }
.kit li span { color: var(--concrete-dim); font-size: 14px; }
.parkover { position: relative; z-index: 2; min-height: 100svh; background: var(--ink); overflow: clip; isolation: isolate; display: flex; align-items: flex-end; padding: var(--section) var(--gutter); }
.parkover__img { position: absolute; inset: 0; z-index: -1; }
.parkover__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.parkover__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(16,17,19,.85) 0, rgba(16,17,19,.45) 45%, transparent 75%); }
.parkover__body { width: min(560px, 100%); }
.parkover__body p:not(.tag) { font-size: 20px; line-height: 1.4; font-weight: 500; margin-top: 20px; max-width: 30ch; }

.bring { background: var(--concrete); color: var(--ink); padding: var(--section) var(--gutter); }
.bring .tag { color: var(--ink-60); }
.bring .tag__no { color: var(--ink); }
.bring__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: 48px; }
.bring__item { padding: 24px 24px 0 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; }
.bring__item + .bring__item { padding-left: 24px; border-left: 1px solid var(--line-ink); }
.bring__n { font: 400 clamp(160px, 18vw, 280px)/0.78 var(--display); text-box: trim-both cap alphabetic; color: var(--ink); }
.bring__item:nth-child(3) .bring__n { color: var(--coral); }
.bring__item p { font: 400 44px/0.95 var(--display); text-transform: uppercase; margin-top: 24px; }
.bring__item p small { display: block; font: 500 15px/1.4 var(--body); text-transform: none; color: var(--ink-60); margin-top: 8px; }
.bring__foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-ink); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: rgba(16,17,19,.75); }

/* =================================================================
   BOOK: B2 a concrete panel overlapping the hero floor; B3 a process path
   ================================================================= */
.bookwrap { position: relative; z-index: 3; margin-top: -120px; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; }
.formpanel { background: var(--concrete); color: var(--ink); padding: 48px; }
.formpanel__intro { font-size: 19px; max-width: 40ch; margin-bottom: 32px; color: rgba(16,17,19,.8); }
.step { padding: 28px 0; border-top: 2px solid var(--ink); }
.step__h { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.step__h .glyph { stroke: var(--ink); width: 42px; height: 14px; }
.step__h b { font: 400 40px/1 var(--display); text-transform: uppercase; font-weight: 400; }
.step__h span { font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label, .chipset legend { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(16,17,19,.7); }
.field input, .field textarea { width: 100%; border: 1px solid rgba(16,17,19,.3); background: #ecece8; color: var(--ink); padding: 14px 14px; font-size: 16px; border-radius: 0; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: #b3261e; }
.chipset { margin-bottom: 20px; }
.chipset legend { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(16,17,19,.35); font-weight: 600; font-size: 15px; transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.chip input:checked + span { background: var(--ink); color: var(--concrete); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.chip:hover span { border-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 2px solid var(--ink); }
.form__foot .btn { height: 56px; }
.form__msg { font-weight: 600; }
.form__msg.is-err { color: #9c1d14; }
.form__small { font-size: 13px; color: var(--ink-60); flex-basis: 100%; }
.done { padding: 8px 0; }
.done b { display: block; font: 400 72px/0.9 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.done p { font-size: 18px; max-width: 40ch; }
.done p + p { margin-top: 12px; color: var(--ink-60); font-size: 15px; }
.bookside { padding-top: 168px; display: flex; flex-direction: column; gap: 28px; }
.bookside dl div { padding: 14px 0; border-top: 1px solid var(--line); }
.bookside dt { font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--concrete-dim); }
.bookside dd { font: 400 30px/1.1 var(--display); text-transform: uppercase; margin-top: 4px; }
.bookside dd a { text-decoration: none; }

.next { padding: var(--section) var(--gutter); }
.path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.path__line { position: absolute; left: 16.667%; right: 16.667%; top: 70px; height: 3px; background: linear-gradient(to right, var(--steel), var(--coral)); transform-origin: 0 50%; }
.pstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pstep__c { position: relative; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: var(--concrete); color: var(--ink); box-shadow: 0 0 0 10px var(--ink); }
.pstep__c b { font: 400 72px/1 var(--display); }
.pstep:nth-child(2) .pstep__c { background: var(--steel); }
.pstep:nth-child(4) .pstep__c { background: var(--coral); }
.pstep h3 { font: 400 36px/1 var(--display); text-transform: uppercase; margin-top: 28px; }
.pstep p { color: var(--concrete-dim); margin-top: 8px; max-width: 24ch; }

/* =================================================================
   PRIVACY (the quiet page) and 404
   ================================================================= */
.quiet { padding: calc(var(--nav-h) + 96px) var(--gutter) 48px; min-height: 40svh; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.quiet h1 { font: 400 clamp(96px, 14vw, 200px)/0.8 var(--display); text-transform: uppercase; }
.clauses { padding: 72px var(--gutter) var(--section); max-width: calc(68ch + 2 * var(--gutter)); counter-reset: c; }
.clauses li { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid var(--line); }
.clauses li::before { counter-increment: c; content: counter(c, decimal-leading-zero); font: 400 32px/1 var(--display); color: var(--steel); }
.clauses h2 { font: 600 17px/1.4 var(--body); margin-bottom: 6px; }
.clauses p { color: #bdbeba; }
.clauses a { color: var(--concrete); }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* =================================================================
   MOTION. Hero load, the rep, and quiet section entrances (E1 to E5)
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* hero load: 5 blocks, 200ms apart from 600ms */
  .js .enter { opacity: 0.001; transform: translateY(40px); transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter); }
  .js .enter--big { transform: translateY(80px); }
  .js .enter.is-in { opacity: 1; transform: none; }
  .js .enter.d1 { transition-delay: 600ms; }
  .js .enter.d2 { transition-delay: 800ms; }
  .js .enter.d3 { transition-delay: 1000ms; }
  .js .enter.d4 { transition-delay: 1200ms; }
  .js .enter.d5 { transition-delay: 1400ms; }

  /* the rep. 0-50% lower (3s), 50-66.67% pause (1s), 66.67-100% lift (2s) */
  .hero.is-live { --iter: infinite; }
  .hero.is-rep { --iter: 1; }
  .hero.is-live .rw, .hero.is-rep .rw { animation: rep-word 6s var(--iter) both; will-change: transform; }
  .hero.is-live .rw__steel, .hero.is-rep .rw__steel { animation: rep-steel 6s linear var(--iter) both; }
  .hero.is-live .rw__coral, .hero.is-rep .rw__coral { animation: rep-coral 6s linear var(--iter) both; }
  .hero.is-live .hero__mask, .hero.is-rep .hero__mask { animation: rep-mask 6s var(--iter) both; will-change: transform; }
  .hero.is-live .count__digits span { animation: 6s linear infinite both; }
  .hero.is-live .count__digits span:nth-child(1) { animation-name: dg-3; }
  .hero.is-live .count__digits span:nth-child(2) { animation-name: dg-1; }
  .hero.is-live .count__digits span:nth-child(3) { animation-name: dg-2; }
  .hero.is-live .count__digits span:nth-child(4) { animation-name: dg-0; }
  .hero.is-live .count__phase span:nth-child(1), .hero.is-rep .count__phase span:nth-child(1) { animation: dg-3b 6s linear var(--iter) both; }
  .hero.is-live .count__phase span:nth-child(2), .hero.is-rep .count__phase span:nth-child(2) { animation: dg-1b 6s linear var(--iter) both; }
  .hero.is-live .count__phase span:nth-child(3), .hero.is-rep .count__phase span:nth-child(3) { animation: dg-2b 6s linear var(--iter) both; }
  .hero.is-live .count__phase span:nth-child(4), .hero.is-rep .count__phase span:nth-child(4) { animation: dg-0b 6s linear var(--iter) both; }
  .hero.is-live .ph-x { animation: ph-x 6s linear infinite both; will-change: transform; }
  .hero.is-live .ph-y { animation: ph-y 6s infinite both; }
  .hero.is-paused * { animation-play-state: paused !important; }

  /* section entrances: start states only under .js, never the same twice in a row */
  .js [data-e="1"]:not(.is-in) [data-b] { opacity: 0.001; transform: translateY(40px); }
  .js [data-e="1"] [data-b] { transition: opacity var(--dur-enter) var(--ease-enter) calc(var(--i, 0) * 200ms), transform var(--dur-enter) var(--ease-enter) calc(var(--i, 0) * 200ms); }
  .js [data-e="2"]:not(.is-in) [data-b] { opacity: 0.001; transform: translateY(12px); }
  .js [data-e="2"] [data-b] { transition: opacity 600ms var(--ease-enter) calc(var(--i, 0) * 80ms), transform 600ms var(--ease-enter) calc(var(--i, 0) * 80ms); }
  /* E3 wipe up: a cover panel scales away from the bottom edge (transform only) */
  .js [data-e="3"] .cover { position: absolute; inset: 0; z-index: 6; background: var(--cover, var(--ink)); transform-origin: 50% 0; pointer-events: none; transition: transform 700ms var(--ease-wipe) calc(var(--i, 0) * 120ms); }
  .js [data-e="3"].is-in .cover { transform: scaleY(0); }
  .js [data-e="3"]:not(.is-in) [data-b] { opacity: 0.001; transform: translateY(12px); }
  .js [data-e="3"] [data-b] { transition: opacity 600ms var(--ease-enter) calc(300ms + var(--i, 0) * 80ms), transform 600ms var(--ease-enter) calc(300ms + var(--i, 0) * 80ms); }
  .js [data-e="4"]:not(.is-in) [data-bar] { transform: scaleY(0); }
  .js [data-e="4"]:not(.is-in) [data-bar="x"] { transform: scaleX(0); }
  .js [data-e="4"] [data-bar] { transition: transform 500ms var(--ease-enter) calc(var(--i, 0) * 40ms); }
  .js [data-e="4"]:not(.is-in) [data-b] { opacity: 0.001; transform: translateY(12px); }
  .js [data-e="4"] [data-b] { transition: opacity 600ms var(--ease-enter) calc(200ms + var(--i, 0) * 80ms), transform 600ms var(--ease-enter) calc(200ms + var(--i, 0) * 80ms); }
  /* numbers bar race: rushed 400ms, tempo 1200ms, both linear from 200ms */
  .js .proof:not(.is-in) .tut__fill { transform: scaleX(0); }
  .js .proof .tut__fill--rush { transition: transform 400ms linear 200ms; }
  .js .proof .tut__fill--tempo { transition: transform 1200ms linear 200ms; }
  .js .ribbon[data-e]:not(.is-in) .rb__flag { opacity: 0; }
  .js .ribbon[data-e] .rb__flag { transition: opacity 400ms var(--ease-hover) 600ms; }
}
@keyframes rep-word {
  0%      { transform: scaleY(1);    animation-timing-function: var(--ease-ecc); }
  50%     { transform: scaleY(.44); }
  66.667% { transform: scaleY(.44); animation-timing-function: var(--ease-con); }
  100%    { transform: scaleY(1); }
}
@keyframes rep-mask {
  0%      { transform: translateY(0); animation-timing-function: var(--ease-ecc); }
  50%     { transform: translateY(var(--drop)); }
  66.667% { transform: translateY(var(--drop)); animation-timing-function: var(--ease-con); }
  100%    { transform: translateY(0); }
}
@keyframes rep-steel { 0% { opacity: 0; } 8% { opacity: 1; } 62% { opacity: 1; } 69% { opacity: 0; } 100% { opacity: 0; } }
@keyframes rep-coral { 0%, 64% { opacity: 0; } 71% { opacity: 1; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ph-x { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes ph-y {
  0%      { transform: translateY(10%); animation-timing-function: var(--ease-ecc); }
  50%     { transform: translateY(90%); }
  66.667% { transform: translateY(90%); animation-timing-function: var(--ease-con); }
  100%    { transform: translateY(10%); }
}
@keyframes dg-3 { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: .22; } }
@keyframes dg-1 { 0%, 49.9% { opacity: .22; } 50%, 66.6% { opacity: 1; } 66.7%, 100% { opacity: .22; } }
@keyframes dg-2 { 0%, 66.6% { opacity: .22; } 66.7%, 95.9% { opacity: 1; } 96%, 100% { opacity: .22; } }
@keyframes dg-0 { 0%, 95.9% { opacity: .22; } 96%, 100% { opacity: 1; } }
@keyframes dg-3b { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dg-1b { 0%, 49.9% { opacity: 0; } 50%, 66.6% { opacity: 1; } 66.7%, 100% { opacity: 0; } }
@keyframes dg-2b { 0%, 66.6% { opacity: 0; } 66.7%, 95.9% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes dg-0b { 0%, 95.9% { opacity: 0; } 96%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .count__digits span { opacity: 1; }
  .hero--inner .count__phase span, .hero--book .count__phase span { opacity: 0; }
  .hero--inner .count__phase span:nth-child(4), .hero--book .count__phase span:nth-child(4) { opacity: 1; }
  .count__ctl { display: none; }
  .cover { display: none; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1100px) {
  .nav__links { gap: 20px; }
  .sets { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .set { min-height: 72svh; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__board { grid-column: 1 / -1; grid-row: 1; }
  .bookwrap { grid-template-columns: minmax(0, 1fr); }
  .bookside { padding-top: 0; }
  .hero--inner .hero__base, .hero--book .hero__base { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .floorjobs, .facts, .lost__links { justify-content: flex-start; }
  .facts li:first-child { padding-left: 0; }
}

@media (max-width: 809.98px) {
  body { font-size: 16px; }
  .nav { gap: 16px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__word { font-size: 30px; }
  .lede, .sec-head__lede { font-size: 17px; }

  .hero { grid-template-rows: auto auto auto auto; padding-bottom: 40px; }
  .hero--home { min-height: 0; }
  .hero--inner { min-height: 0; }
  .hero__top { padding-top: calc(var(--nav-h) + 24px); }
  .hero--home .hero__wordbox { margin-top: 12svh; }
  .hero--home .hero__top { padding-bottom: 16px; }
  .hero--home .hero__base { gap: 16px; padding-top: 20px; }
  .hero--inner .hero__wordbox, .hero--book .hero__wordbox { margin-top: 26svh; }
  .hero__rig { flex-direction: column; align-items: stretch; gap: 20px; --cw: 0px; }
  .hero__word, .hero__mask { --fs: min(calc(100cqw / var(--wr, 1.853)), var(--fcap-m, 44vw)); }
  .hero--inner, .hero--book { --fcap-m: 40svh; }
  .hero__photo img { object-position: 50% 0; }
  .hero__count { border-left: 0; padding-left: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
  .hero--inner .hero__count, .hero--book .hero__count { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .count__label { display: none; }
  .count__digits { font-size: 64px; grid-row: 1 / span 2; }
  .count__phase { margin-top: 0; height: 32px; font-size: 32px; }
  .hero--inner .count__phase, .hero--book .count__phase { height: 40px; font-size: 40px; flex: 1; }
  .count__row { margin-top: 4px; }
  .hero--inner .count__row, .hero--book .count__row { margin-top: 0; }
  .hero__floor { margin-top: 20px; }
  .hero__base { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; }
  .hero--book { padding-bottom: 136px; }
  .facts li { font-size: 26px; padding: 4px 14px; }
  .jump { height: 44px; font-size: 14px; padding: 0 16px; }

  .sec-head { margin-bottom: 40px; }
  .sec-head--split, .plans__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tag { gap: 12px; flex-wrap: wrap; }

  .method__stage { grid-template-columns: minmax(0, 1fr); }
  .method__photo { grid-column: 1; grid-row: auto; margin: 0 calc(-1 * var(--gutter)); }
  .method__photo-in { min-height: 480px; }
  .m-phase { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; }
  .m-num { font-size: 110px; }
  .m-copy h3 { font-size: 40px; }

  .sets { grid-template-columns: minmax(0, 1fr); }
  .set { min-height: 78svh; padding: 24px var(--gutter) 28px; }

  .ribbon { height: 180px; gap: 4px; }
  .rb__wk { font-size: 9px; letter-spacing: 0; }
  .phases3 { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .ph3, .ph3 + .ph3 { padding: 24px 0 0; border-left: 0; }
  .ph3 + .ph3 { margin-top: 24px; }
  .ph3 + .ph3::before { left: 0; }

  .coaches { grid-template-columns: minmax(0, 1fr); }
  .coach--dani { order: 2; min-height: 88svh; padding: 32px var(--gutter); }
  .coaches__side { display: contents; }
  .coaches__head { order: 1; padding: var(--section) var(--gutter) 40px; }
  .coach--theo { order: 3; min-height: 80svh; padding: 32px var(--gutter); }
  .cnums { gap: 0 16px; }
  .cnums dd { font-size: 24px; }

  .proof { display: block; min-height: 0; }
  .proof__img::after { background: linear-gradient(to bottom, rgba(16,17,19,.72) 0, rgba(16,17,19,.9) 40%, rgba(16,17,19,.94) 100%); }
  .tut__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .tut__track { grid-column: 1 / -1; grid-row: 2; height: 40px; }
  .tut__n { font-size: 48px; }
  .tut__axis { margin: 0; }
  .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
  .nums div + div { padding-left: 10px; }
  .nums dd { font-size: 44px; }

  .rooms { grid-template-columns: minmax(0, 1fr); }
  .room { height: 78svh; }
  .room:nth-of-type(1) { height: 100svh; }
  .rooms__head { padding-top: var(--section); }
  .rooms__head .sec-head__side { padding-top: 16px; }
  .room figcaption b { font-size: 40px; }

  .close { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56svh auto auto auto; min-height: 0; }
  .close__img { grid-column: 1; grid-row: 1; }
  .close__img::after { background: linear-gradient(to bottom, rgba(16,17,19,.05) 40%, rgba(16,17,19,.6) 100%); }
  .close__h { grid-column: 1; grid-row: 2; padding: 0 var(--gutter); margin-top: calc(-0.785 * 29vw); }
  .close__hl { font-size: 29vw; white-space: normal; }
  .close__hl--ink { clip-path: inset(calc(0.785 * 29vw) 0 0 0); }
  .close__hl--on { left: var(--gutter); top: 0; width: calc(100% - 2 * var(--gutter)); clip-path: inset(0 0 calc(100% - 0.785 * 29vw) 0); }
  .close__top { grid-column: 1; grid-row: 3; padding: 32px var(--gutter) 0; }
  .close__row { grid-row: 4; margin-top: 8px; }
  .close__row p { font-size: 18px; }
  .close__act { gap: 20px; }
  .close__trace--on { display: none; }
  .close__trace--ink { clip-path: none; top: 56svh; height: 30%; }

  .foot { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 72px; }
  .foot__word { font-size: 96px; }
  .hb { --tl: 44px; --tr: 108px; }
  .hb__t { font-size: 12px; padding-left: 10px; }
  .foot__base { flex-direction: column; gap: 8px; }

  .ways { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .ways__index { position: static; height: auto; padding: 48px var(--gutter) 40px; }
  .ways__glyph { display: none; }
  .way { min-height: 0; display: block; padding: 0; }
  .way__img { position: relative; height: 62svh; }
  .way__img::after { background: linear-gradient(to bottom, transparent 55%, rgba(16,17,19,.9) 100%); }
  .way__copy { padding: 28px var(--gutter) 56px; width: auto; }

  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .oneoffs { grid-template-columns: minmax(0, 1fr); }
  .oneoff, .oneoff + .oneoff { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .seg label { padding: 0 16px; font-size: 14px; }

  .sbar { height: 180px; grid-template-columns: 10fr 25fr 15fr 10fr; }
  .sseg__m { font-size: 36px; left: 6px; bottom: 8px; }
  .slabels p { font-size: 9px; letter-spacing: .04em; padding-left: 4px; word-break: break-word; }

  .bpanels { grid-template-columns: minmax(0, 1fr); }
  .bpanel { min-height: 72svh; padding: 24px var(--gutter) 28px; }

  .sheet-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sheet-wrap { padding-right: 0; padding-bottom: 30vw; }
  .sheet { padding: 20px; }
  .sheet td { font-size: 22px; }
  .sheet-photo { top: auto; bottom: 0; right: -8px; width: 44%; }
  .incl__price b { font-size: 64px; }

  .hero__duo { grid-template-columns: 1fr 1fr; }
  .duo-jobs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cue { min-height: 0; padding: 0 0 var(--section); display: block; }
  .cue__img { position: relative; height: 64svh; }
  .cue__img::after { background: linear-gradient(to top, rgba(16,17,19,1) 0, transparent 50%); }
  .cue__body { padding: 0 var(--gutter); margin-top: -64px; position: relative; }
  .cue__q { font-size: 72px; }
  .cue__inset { position: relative; right: auto; bottom: auto; width: 62%; margin: 40px var(--gutter) 0 auto; }
  .cue--steel { display: flex; flex-direction: column; padding: 0; }
  .cue--steel .cue__photo { min-height: 64svh; }
  .cue--steel .cue__body { padding: 40px var(--gutter) 40px; margin-top: 0; }
  .cue--steel .cue__inset { position: relative; left: auto; bottom: auto; margin: 0 var(--gutter) var(--section) auto; }
  .rb__wk i { display: none; }
  .sheet__sign { padding-right: 46%; }
  .cue__facts dd { font-size: 24px; }
  .lanes__board { --tl: 48px; }
  .lanes__d { font-size: 22px; }
  .lane__bar { font-size: 0; }

  .pinroom { min-height: 100svh; height: auto; }
  .pinroom__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bring__grid { grid-template-columns: minmax(0, 1fr); }
  .bring__item, .bring__item + .bring__item { padding: 24px 0; border-left: 0; min-height: 0; flex-direction: row; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--line-ink); }
  .bring__n { font-size: 120px; }
  .bring__item p { margin-top: 0; font-size: 36px; }

  .bookwrap { padding: 0; margin-top: -100px; }
  .formpanel { padding: 28px var(--gutter); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .bookside { padding: 0 var(--gutter); }
  .path { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .path__line { left: 69px; right: auto; top: 70px; bottom: 70px; width: 3px; height: auto; background: linear-gradient(to bottom, var(--steel), var(--coral)); transform-origin: 50% 0; }
  .pstep { flex-direction: row; text-align: left; align-items: center; gap: 24px; }
  .pstep__c { flex: none; }
  .pstep h3 { margin-top: 0; }

  .clauses li { grid-template-columns: 44px minmax(0, 1fr); }
}

/* The method phases perform the tempo once when the section arrives, each phase
   running for the number of seconds it names: 3 down, 1 still, 2 up, 0 at the top.
   Time-based and one-shot, never scroll-linked: the scroll-performed version of
   this was removed because it fought the reader on mobile. Transform and opacity
   only, per the performance floor. */
@media (prefers-reduced-motion: no-preference) {
  .method .m-phase { position: relative; }
  .method .m-phase::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--coral); transform: scaleX(0); transform-origin: left center;
  }
  .method.is-run .m-num { opacity: 0.26; }
  .method.is-run .m-phase--3::after { animation: ph-run 3s linear 0s both; }
  .method.is-run .m-phase--1::after { animation: ph-run 1s linear 3s both; }
  .method.is-run .m-phase--2::after { animation: ph-run 2s linear 4s both; }
  .method.is-run .m-phase--0::after { animation: ph-run 0.5s linear 6s both; }
  .method.is-run .m-phase--3 .m-num { animation: ph-lit 0.24s linear 0s both; }
  .method.is-run .m-phase--1 .m-num { animation: ph-lit 0.24s linear 3s both; }
  .method.is-run .m-phase--2 .m-num { animation: ph-lit 0.24s linear 4s both; }
  .method.is-run .m-phase--0 .m-num { animation: ph-lit 0.24s linear 6s both; }
  @keyframes ph-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ph-lit { to { opacity: 1; } }
}