/* =====================================================================
   SIXTEEN ELITE: homepage styles (Nov 2026 redesign). Loads after styles.css.
   ===================================================================== */
/* =====================================================================
   HERO LAB (Nov 2026) — six hero options built on the live site's
   styles.css (nav, buttons, tokens, fonts). Each option is scoped to
   its own block class (.hA ... .hF). Not shipped; lives in concepts/.
   ===================================================================== */

/* ---------- shared bits ---------- */
.lab-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab-title {
  font-family: var(--font-display); font-weight: 400; font-style: italic; text-transform: uppercase;
  line-height: 0.9; letter-spacing: 0.005em;
}
.lab-sub { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: #FFFFFF; max-width: 42ch; }
.lab-sub strong { color: #fff; font-weight: 700; }
.lab-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lab-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 0.95; letter-spacing: 0.01em; }
.lab-role { font-style: italic; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.lab-sig { width: clamp(140px, 12vw, 200px); height: auto; opacity: 0.92; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); }
.lab-loc {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 16px;
  background: rgba(11,12,14,0.55); box-shadow: inset 0 0 0 1.5px var(--line); backdrop-filter: blur(6px);
  transform: skewX(var(--skew));
}
.lab-loc > * { transform: skewX(calc(-1 * var(--skew))); }
.lab-loc__pin { color: var(--accent); }
.lab-kicker { font-style: italic; text-transform: uppercase; font-weight: 800; letter-spacing: 0.12em; font-size: 0.76rem; color: var(--accent); }

/* load-in: content rises once, then holds still (killed by reduced-motion rule in styles.css) */
@keyframes lab-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes lab-settle { from { transform: scale(1.06); } }
@keyframes lab-fade { from { opacity: 0; } }
.rise { animation: lab-rise .9s var(--ease) both; }
.rise-2 { animation-delay: .12s; } .rise-3 { animation-delay: .24s; } .rise-4 { animation-delay: .36s; }

/* program ticker (used by A and F) */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker__track { display: inline-flex; animation: ticker 38s linear infinite; }
.ticker__track span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; padding-inline: 22px; }
.ticker__track span::after { content: "/"; color: var(--accent); padding-left: 44px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* next-section peek under every option, so the hand-off is visible */
.peek { background: #fff; color: var(--ink); padding-block: clamp(56px, 8vw, 100px); }

/* lab navigator badge (top-level window only; hidden inside compare iframes) */
.labbar {
  position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px;
  background: rgba(10,11,13,0.9); color: #fff; font: 700 12px/1 var(--font-body); letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px);
}
.labbar a, .labbar span { padding: 11px 13px; }
.labbar a:hover { color: var(--accent); }
.labbar span { color: var(--accent); text-transform: uppercase; }
.in-frame .labbar { display: none; }

/* =====================================================================
   A · FRAMED PAT (round 2) — Pat is a LAYOUT ITEM, not a background:
   a three-track grid [copy | Pat | lockup] with space-between, so he
   always sits centered in the gap between the two text blocks at every
   desktop width. Eric's Photoshop cutout over the empty gym (same room
   and angle as the portraits).
   ===================================================================== */
.hA { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); padding-top: var(--nav-h); }
.hA__media img { object-position: 50% 62%; transform: scale(1.02); animation: lab-settle 2.6s var(--ease) both; }
.hA__media::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 62% at 14% 52%, rgba(11,12,14,0.72), transparent 72%),  /* behind the copy only */
    radial-gradient(30% 52% at 90% 48%, rgba(11,12,14,0.74), transparent 72%),  /* behind the lockup only */
    linear-gradient(180deg, rgba(11,12,14,0.5) 0%, transparent 14%, transparent 80%, rgba(11,12,14,0.55) 100%); }
.hA__copy .lab-sub, .hA__lockup { text-shadow: 0 1px 16px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.6); }
.hA__inner {
  position: relative; z-index: 2; flex: 1;
  display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; column-gap: 28px;
}
.hA__copy { max-width: 500px; min-width: 380px; padding-block: 40px; }
.hA__title { font-size: clamp(3.2rem, 6.8vw, 6.2rem); text-shadow: 0 3px 40px rgba(0,0,0,0.5); }
.hA__sub { margin: 24px 0 32px; }
.hA__pat { align-self: end; height: min(78svh, 50vw, 690px); width: auto; max-width: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.5)); animation: lab-fade 1.1s var(--ease) .15s both; }
.hA__lockup { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 9px; text-shadow: 0 2px 20px rgba(0,0,0,0.65); }
.hA__lockup .lab-loc { margin-top: 6px; }
.hA__sig-mob { display: none; }
.hA__rail { position: relative; z-index: 3; border-top: 1px solid var(--line); background: rgba(11,12,14,0.72); backdrop-filter: blur(8px); padding-block: 16px; }
.hA__rail .ticker__track span { font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: rgba(255,255,255,0.85); }

/* tablet: copy + Pat, lockup tucks away */
@media (max-width: 960px) {
  .hA__inner { grid-template-columns: auto auto; }
  .hA__lockup { display: none; }
  .hA__pat { height: min(70svh, 62vw); }
}
/* phone: Pat over the gym up top, copy below, signature over the photo */
@media (max-width: 700px) {
  .hA { padding-top: 0; }
  .hA__stage { position: relative; height: 62svh; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; }
  .hA__media { position: absolute; inset: 0; }
  .hA__media img { object-position: 30% 60%; }
  .hA__media::after { background: linear-gradient(180deg, rgba(11,12,14,0.45) 0%, transparent 18%, transparent 62%, rgba(11,12,14,0.85) 90%, var(--bg) 100%); }
  .hA__stage::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0 0; height: 22svh; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(11,12,14,0.75) 55%, var(--bg)); }
  .hA__inner { display: block; margin-top: -6svh; padding-bottom: 34px; }
  .hA__copy { max-width: none; padding-block: 0; }
  .hA__title { font-size: clamp(3.1rem, 15.5vw, 4.6rem); }
  .hA__sub { margin: 18px 0 26px; }
  .hA__cta { flex-direction: column; align-items: stretch; }
  .hA__sig-mob { display: block; position: absolute; z-index: 3; left: 20px; bottom: 15svh; width: 100px; height: auto; opacity: 0.75; pointer-events: none; }
  .hA__rail { padding-block: 13px; }
}
@media (min-width: 701px) { .hA__stage { display: contents; } .hA__pat--mob { display: none; } }
@media (max-width: 700px) { .hA__inner .hA__pat { display: none; } .hA__pat--mob { position: relative; z-index: 1; height: 58svh; } }

/* =====================================================================
   B · POSTER CUTOUT (round 2) — giant BE ELITE between gym and Pat.
   The giant line is sized by lab.js to the INK edges of the letters so
   the B sits on the logo's left edge and the last E on the nav button's
   right edge (B). B2 (body.nav-full) runs nav + type full width.
   Layers: gym (0) > shade (1) > giant type (2) > Pat (3) > fade (4) > copy (5)
   ===================================================================== */
.hB { position: relative; height: 100svh; min-height: 660px; overflow: hidden; background: var(--bg); }
.hB__bg img { object-position: 50% 62%; transform: scale(1.02); }
.hB__shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,12,14,0.5) 0%, rgba(11,12,14,0.08) 26%, rgba(11,12,14,0.08) 62%, rgba(11,12,14,0.35) 100%); }
.hB__h1 { position: static; }
.hB__giant {
  position: absolute; z-index: 2; left: 0; top: calc(var(--nav-h) + 2.5svh);
  white-space: nowrap; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 26vw; line-height: 0.8; letter-spacing: 0; color: #FFFFFF;
  opacity: 0; transition: opacity .5s var(--ease);
}
.hB__giant.is-fit { opacity: 1; }
.hB__giant .ln { display: inline; }
.hB__pat { position: absolute; z-index: 3; bottom: 0; left: 50%; height: 84svh; width: auto; max-width: none; transform: translateX(-50%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55)); animation: lab-fade 1.2s var(--ease) .25s both; }
.hB__fade { position: absolute; inset: auto 0 0 0; height: 62svh; z-index: 4; pointer-events: none;
  background: radial-gradient(50% 82% at 0% 100%, rgba(11,12,14,0.93), transparent 78%),
              radial-gradient(30% 52% at 98% 100%, rgba(11,12,14,0.85), transparent 75%),
              linear-gradient(180deg, transparent 70%, rgba(11,12,14,0.45)); }
.hB__left .lab-sub, .hB__right { text-shadow: 0 1px 16px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.6); }
.hB__foot { position: absolute; z-index: 5; inset: auto 0 0 0; padding-bottom: clamp(28px, 5svh, 52px); }
.hB__foot .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hB__left { max-width: 370px; }
.hB__left .lab-sub { max-width: 36ch; margin-bottom: 22px; font-size: 1rem; }
.nav-full .hB__left { max-width: 430px; }
.hB__age { display: block; color: var(--accent); font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: 12px; }
.hB__right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 8px; }
@media (min-width: 701px) { .hB__top { position: absolute; inset: 0; } .nav-full .hB__left .lab-cta { flex-wrap: nowrap; } }

/* B2: navigation (and the hero's text frame) run full width */
.nav-full .nav .container,
.nav-full .hB__foot .container { max-width: none; }

@media (max-width: 700px) {
  .hB { height: auto; min-height: 0; padding-bottom: 36px; }
  .hB__top { position: relative; height: 82svh; overflow: hidden; }
  .hB__bg { position: absolute; inset: 0; }
  .hB__giant { line-height: 0.8; top: calc(var(--nav-h) + 1.5svh); }
  .hB__giant .ln { display: block; }
  .hB__pat { height: calc(82svh - var(--nav-h) - 1.5svh - 49vw); }
  .hB__fade { height: 24svh; background: linear-gradient(180deg, transparent, rgba(11,12,14,0.8) 70%, var(--bg)); }
  .hB__bg img { object-position: 12% 60%; }
  .hB__foot { position: relative; padding-bottom: 0; margin-top: -4svh; }
  .hB__foot .container { flex-direction: column; align-items: stretch; }
  .hB__left { max-width: none; }
  .hB__age { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hB__right { display: none; }
  .hB__left .lab-cta { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   C · VIDEO TRIPTYCH — three vertical loops with the site's 4px seams.
   Scroll moment: panels pull in to a frame as the hero leaves.
   ===================================================================== */
.hC { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--bg); view-timeline: --hc block; }
.hC__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg); }
.hC__cell { position: relative; overflow: hidden; margin: 0; }
.hC__cell--mob { display: none; }
.hC__cell figcaption { position: absolute; z-index: 2; top: calc(var(--nav-h) + 14px); left: 18px; display: flex; gap: 10px; align-items: baseline;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.88); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hC__cell figcaption b { color: var(--accent); }
.hC__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 22%, transparent 45%, rgba(0,0,0,0.88) 100%); }
.hC__copy { position: absolute; z-index: 3; inset: auto 0 0 0; padding-bottom: clamp(30px, 6svh, 64px); }
.hC__copy .container { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; }
.hC__title { font-size: clamp(3.6rem, 9.2vw, 9.6rem); text-shadow: 0 4px 40px rgba(0,0,0,0.45); }
.hC__aside .lab-sub { margin-bottom: 24px; }
@supports (animation-timeline: view()) {
  .hC__grid { animation: hC-frame linear both; animation-timeline: --hc; animation-range: exit 0% exit 75%; }
  @keyframes hC-frame { to { clip-path: inset(5% 3.5% 5% 3.5%); gap: 18px; } }
}
.hC__grid { clip-path: inset(0 0 0 0); }

@media (max-width: 700px) {
  .hC { height: 100svh; min-height: 600px; }
  .hC__grid { grid-template-columns: 1fr; }
  .hC__cell { display: none; }
  .hC__cell--mob { display: block; }
  .hC__copy .container { grid-template-columns: 1fr; gap: 18px; }
  .hC__title { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .hC__aside .lab-sub { font-size: 1rem; margin-bottom: 18px; }
  .hC__aside .lab-cta { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   D · POSTER SPLIT — copy left, one tall framed video right, lockup
   bridging the two columns.
   ===================================================================== */
.hD { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--nav-h) + 3svh) 0 4svh;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(var(--accent-rgb),0.14), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(var(--accent-rgb),0.07), transparent 60%),
    var(--bg); }
.hD__inner { width: 100%; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.hD__title { font-size: clamp(3.6rem, 8.2vw, 8.4rem); margin: 16px 0 26px; }
.hD__copy .lab-sub { margin-bottom: 32px; }
.hD__frameWrap { position: relative; justify-self: end; }
.hD__frame { position: relative; height: min(80svh, 840px); aspect-ratio: 9 / 16; overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); animation: lab-rise 1s var(--ease) .15s both; }
.hD__lockup { position: absolute; z-index: 2; left: -42%; bottom: 9%; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 16px;
  background: rgba(11,12,14,0.82); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); animation: lab-rise 1s var(--ease) .45s both; }
.hD__lockup .lab-sig { width: 150px; margin-top: 4px; }
.hD__tag { position: absolute; right: 0; top: calc(100% + 12px); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

@media (max-width: 860px) {
  .hD { padding-top: var(--nav-h); align-items: flex-start; }
  .hD__inner { grid-template-columns: 1fr; padding-inline: 0; }
  .hD__frameWrap { order: -1; justify-self: stretch; }
  .hD__frame { height: 54svh; width: 100%; aspect-ratio: auto; }
  .hD__lockup { left: var(--gutter); bottom: 18px; padding: 12px 16px; }
  .hD__lockup .lab-sig { width: 110px; }
  .hD__tag { display: none; }
  .hD__copy { padding-inline: var(--gutter); }
  .hD__title { font-size: clamp(3.1rem, 15vw, 4.6rem); margin-top: 26px; }
  .hD__copy .lab-cta { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   E · GRID — headline tile + Pat + teen video + women's class.
   Square tiles, 4px seams, orange limited to the CTA.
   ===================================================================== */
.hE { min-height: 100svh; padding: calc(var(--nav-h) + 8px) 0 clamp(16px, 2.4svh, 28px); background: var(--bg); display: flex; }
.hE__grid { flex: 1; display: grid; gap: 4px; grid-template-columns: 1.55fr 0.8fr 0.75fr; grid-template-rows: 1fr 1fr;
  grid-template-areas: "head pat vid" "head pat women"; height: calc(100svh - var(--nav-h) - 30px); min-height: 600px; }
.hE__tile { position: relative; overflow: hidden; margin: 0; background: var(--panel); }
.hE__head { grid-area: head; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3.4vw, 54px);
  background: radial-gradient(90% 80% at 0% 0%, rgba(var(--accent-rgb),0.12), transparent 60%), var(--panel); }
.hE__title { font-size: clamp(3rem, 5.4vw, 6rem); margin: 12px 0 18px; }
.hE__head .lab-sub { margin-bottom: 24px; font-size: 1.02rem; }
.hE__head .btn--lg { padding: 15px 26px; font-size: .92rem; }
.hE__progs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 22px; }
.hE__progs a { padding: 16px 14px 4px 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; color: var(--text-dim); transition: color .2s; }
.hE__progs a b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; color: var(--text); letter-spacing: 0.02em; }
.hE__progs a:hover b { color: var(--accent); }
.hE__pat { grid-area: pat; } .hE__vid { grid-area: vid; } .hE__women { grid-area: women; }
.hE__pat img { object-position: 50% 30%; transition: transform .6s var(--ease); }
.hE__tile:hover img, .hE__tile:hover video { transform: scale(1.04); }
.hE__tile img, .hE__tile video { transition: transform .6s var(--ease); }
.hE__cap { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 40px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); display: flex; flex-direction: column; gap: 4px; }
.hE__cap small { font-weight: 800; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.hE__cap strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.02em; }
.hE__pat .lab-sig { width: 120px; margin-top: 6px; }

@media (max-width: 860px) {
  .hE { padding-top: var(--nav-h); padding-bottom: 0; }
  .hE__grid { grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 34svh auto; grid-template-areas: "pat vid women" "head head head"; height: auto; min-height: 0; }
  .hE__cap { padding: 26px 10px 10px; }
  .hE__cap small { font-size: .58rem; }
  .hE__pat .lab-sig { display: none; }
  .hE__head { padding: 30px var(--gutter) 30px; }
  .hE__title { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hE__head .lab-cta { flex-direction: column; align-items: stretch; }
  .hE__progs { grid-template-columns: 1fr; }
  .hE__progs a { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .hE__cap strong { font-size: .86rem; }
  .hE__pat .lab-sig { width: 90px; }
}

/* =====================================================================
   F · FILMSTRIP — giant type up top, endless strip of real photos and
   clips underneath (pauses on hover).
   ===================================================================== */
.hF { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 4svh; padding-top: calc(var(--nav-h) + 4svh); background: var(--bg); overflow: hidden; }
.hF__top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; }
.hF__title { font-size: clamp(3.8rem, 9vw, 9.4rem); }
.hF__aside .lab-sub { margin-bottom: 26px; }
.hF__who { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.hF__who .lab-sig { width: 120px; }
.hF__strip { overflow: hidden; padding-bottom: clamp(16px, 2.6svh, 28px); }
.hF__track { display: flex; gap: 4px; width: max-content; animation: ticker 70s linear infinite; }
.hF__strip:hover .hF__track { animation-play-state: paused; }
.hF__card { position: relative; flex: 0 0 auto; height: clamp(240px, 36svh, 440px); aspect-ratio: 3 / 4; overflow: hidden; margin: 0; background: var(--panel); }
.hF__card--tall { aspect-ratio: 9 / 14; }
.hF__card figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-weight: 800; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.7); }

@media (max-width: 760px) {
  .hF { padding-top: calc(var(--nav-h) + 3svh); gap: 26px; }
  .hF__top { grid-template-columns: 1fr; gap: 18px; }
  .hF__title { font-size: clamp(3.2rem, 17vw, 5rem); }
  .hF__aside .lab-cta { flex-direction: column; align-items: stretch; }
  .hF__who { display: none; }
  .hF__card { height: 30svh; }
}

/* hero ghost buttons sit on a busy gym now: give them a dark glass plate */
.hA .btn--ghost.btn--slant::before, .hB .btn--ghost.btn--slant::before { background: rgba(11,12,14,0.62); backdrop-filter: blur(6px); }

/* =====================================================================
   BACKDROP SWITCHER (A + B) — body[data-bg] picks the gym backdrop.
   floor-dark (default) / floor-lit: the wide room, two exposures.
   rack / dumbbells: portrait gym shots run as a center column behind Pat
   on desktop (sides fade to near-black under the text); full cover on phones.
   ===================================================================== */
.bgset img { display: none; }
body[data-bg="floor-dark"] .bgset .bg-floor,
body[data-bg="floor-lit"] .bgset .bg-floor,
body[data-bg="rack"] .bgset .bg-rack,
body[data-bg="dumbbells"] .bgset .bg-dumbbells { display: block; }
body[data-bg="floor-dark"] .bgset .bg-floor { filter: brightness(0.56); }
body[data-bg="rack"] .bgset .bg-rack,
body[data-bg="dumbbells"] .bgset .bg-dumbbells { filter: brightness(0.82); }
@media (min-width: 701px) {
  .bgset .bg-col { left: var(--colx, 50%); right: auto; width: min(54vw, 800px); transform: translateX(-50%); object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%); animation: lab-fade 1.2s var(--ease) both; }
}
@media (max-width: 700px) { .bgset .bg-col { object-position: 50% 35%; } }

.bgbar { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: calc(100vw - 28px);
  background: rgba(10,11,13,0.9); color: #fff; font: 700 12px/1 var(--font-body); letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.bgbar span { padding: 11px 6px 11px 13px; color: var(--text-dim); text-transform: uppercase; }
.bgbar button { font: inherit; color: inherit; background: none; border: 0; padding: 11px 12px; cursor: pointer; }
.bgbar button:hover { color: var(--accent); }
.bgbar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.in-frame .bgbar { display: none; }
@media (max-width: 700px) { .bgbar { bottom: 62px; } }

/* =====================================================================
   G · CINEMATIC — full-bleed real gym photo (Pat under the ELITE wall),
   headline pinned huge to the bottom-left, copy + CTAs bottom-right.
   Lines rise out of a mask on load. (Mobbin ref: The Performance Lab)
   ===================================================================== */
.hG { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; justify-content: flex-end; }
.hG__media img { object-position: 50% 30%; transform-origin: 0% 40%; transform: scale(1.14); animation: hG-settle 2.8s var(--ease) both; }
@keyframes hG-settle { from { transform: scale(1.2); } }
.hG__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 16%, transparent 46%, rgba(11,12,14,0.72) 72%, rgba(11,12,14,0.96) 100%); }
.hG__sig { position: absolute; z-index: 2; left: 9%; top: 42%; width: clamp(120px, 11vw, 170px); height: auto; opacity: 0.85; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7)); }
.hG__tag { position: absolute; z-index: 2; left: 9%; top: calc(42% + clamp(64px, 5.6vw, 84px)); font-style: italic; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
.hG__foot { position: relative; z-index: 3; padding-bottom: clamp(30px, 6svh, 64px); }
.hG__foot .container { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 40px; align-items: end; }
.hG__title { font-size: clamp(3.6rem, 9.6vw, 9.2rem); line-height: 0.88; }
.hG__line { display: block; overflow: hidden; padding-right: 0.08em; }
.hG__line > span { display: inline-block; animation: hG-up 1s var(--ease) both; }
.hG__line:nth-child(2) > span { animation-delay: .12s; }
@keyframes hG-up { from { transform: translateY(105%); } }
.hG__aside .lab-sub { margin-bottom: 22px; font-size: 1.02rem; }
.hG__aside .lab-cta { flex-wrap: nowrap; }
@media (max-width: 860px) {
  .hG__foot .container { grid-template-columns: 1fr; gap: 18px; }
  .hG__aside .lab-cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
  .hG { height: auto; min-height: 0; display: block; padding-bottom: 6px; }
  .hG__media { position: relative; height: 64svh; overflow: hidden; }
  .hG__media img { object-position: 50% 30%; transform: none; animation: lab-settle 2.6s var(--ease) both; }
  .hG__media::after { background: linear-gradient(180deg, rgba(11,12,14,0.45) 0%, transparent 16%, transparent 60%, rgba(11,12,14,0.85) 88%, var(--bg) 100%); }
  .hG__foot { margin-top: -9svh; }
  .hG__title { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .hG__sig { left: 18px; right: auto; top: 26svh; width: 96px; }
  .hG__tag { display: none; }
  .hG__aside .lab-sub { font-size: 0.98rem; margin-bottom: 18px; }
}

/* =====================================================================
   H · THE DECK — a centered stack of photo cards that rotates through
   who trains here (teens / women's classes / 1-on-1 with Pat); the
   headline wraps the deck, "AT ANY AGE." crossing over the front card.
   (Mobbin refs: Lovart card stack, Sweatpals headline over photo)
   ===================================================================== */
.hH { position: relative; min-height: 100svh; overflow: hidden; padding: calc(var(--nav-h) + 2svh) 0 clamp(22px, 4svh, 40px);
  background: radial-gradient(60% 55% at 50% 45%, rgba(var(--accent-rgb),0.12), transparent 70%), var(--bg); display: flex; flex-direction: column; }
.hH__stage { position: relative; flex: 1; min-height: 520px; }
.hH__deck { position: absolute; left: 50%; top: 50%; height: min(66svh, 640px); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); }
.hH__card { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--panel); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.85);
  transition: transform .9s var(--ease), filter .9s var(--ease), opacity .9s var(--ease); }
.hH__card[data-pos="0"] { transform: none; z-index: 3; }
.hH__card[data-pos="1"] { transform: translateX(46%) scale(0.8); z-index: 2; filter: brightness(0.42); }
.hH__card[data-pos="2"] { transform: translateX(-46%) scale(0.8); z-index: 1; filter: brightness(0.42); }
.hH__title { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hH__t1, .hH__t2 { position: absolute; font-family: var(--font-display); font-style: italic; text-transform: uppercase; line-height: 0.88; font-size: clamp(3.6rem, 8.6vw, 8.6rem); text-shadow: 0 6px 40px rgba(0,0,0,0.5); }
.hH__t1 { left: 0; top: 6%; }
.hH__t2 { right: 0; bottom: 8%; text-align: right; color: var(--accent); }
.hH__stage .container { position: absolute; inset: 0; margin-inline: auto; }
.hH__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 30px; margin-top: 2svh; }
.hH__foot .lab-sub { font-size: 1rem; max-width: 36ch; }
.hH__cap { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 260px; }
.hH__cap a { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; }
.hH__cap a small { font-family: var(--font-body); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--accent); }
.hH__bar { width: 100%; height: 2px; background: var(--line); overflow: hidden; }
.hH__bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.hH__bar i.run { animation: hH-bar 4.2s linear forwards; }
@keyframes hH-bar { to { transform: scaleX(1); } }
.hH__foot .lab-cta { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 860px) {
  .hH { padding-top: calc(var(--nav-h) + 8px); }
  .hH__stage { min-height: 0; flex: none; height: 64svh; }
  .hH__deck { height: 48svh; top: 56%; }
  .hH__card[data-pos="1"] { transform: translateX(34%) scale(0.82); }
  .hH__card[data-pos="2"] { transform: translateX(-34%) scale(0.82); }
  .hH__t1, .hH__t2 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hH__t1 { top: 0; } .hH__t2 { bottom: 0; }
  .hH__foot { grid-template-columns: 1fr; justify-items: stretch; gap: 18px; margin-top: 18px; }
  .hH__cap { order: -1; }
  .hH__foot .lab-cta { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   I · TYPE + PHOTO — the tagline set as one justified block with real
   gym photos/clips set INTO the lines, in the site's slant shape. The
   slots open on load, pushing the words apart. (Mobbin refs: Sweatpals,
   Studio Freight)
   ===================================================================== */
.hI { position: relative; min-height: 100svh; overflow: hidden; padding: calc(var(--nav-h) + 5svh) 0 clamp(26px, 5svh, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 5svh;
  background: radial-gradient(70% 60% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(var(--accent-rgb),0.06), transparent 60%), var(--bg); }
.hI > .container:first-child { margin-block: auto; }
.hI__title { font-family: var(--font-display); font-weight: 400; font-style: italic; text-transform: uppercase; line-height: 0.9; font-size: 10vw; opacity: 0; }
.hI__title.is-fit { opacity: 1; }
.hI__title.is-fit .hI__line { animation: lab-rise .9s var(--ease) both; }
.hI__title.is-fit .hI__line + .hI__line { animation-delay: .1s; }
.hI__line { display: block; width: max-content; white-space: nowrap; }
.hI__row { display: inline; }
.hI__line + .hI__line { margin-top: 0.06em; }
.hI__slot { display: inline-block; position: relative; vertical-align: baseline; height: 0.72em; width: 0; margin: 0 0.1em; overflow: hidden; transform: skewX(var(--i-skew, -14deg)) translateY(0.02em);
  background: var(--panel); }
.hI__slot > * { position: absolute; inset: 0 -16%; width: 132%; max-width: none; height: 100%; object-fit: cover; transform: skewX(calc(-1 * var(--i-skew, -14deg))); }
.hI__slot--pat > img { object-position: 52% 40%; }
.hI__slot--vid > video { object-position: 50% 34%; }
.hI__foot { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: end; border-top: 1px solid var(--line); padding-top: clamp(20px, 3svh, 30px); }
.hI__who { display: flex; align-items: center; gap: 16px; }
.hI__who .lab-sig { width: 120px; }
.hI__foot .lab-sub { font-size: 1rem; max-width: 46ch; justify-self: center; }
.hI__foot .lab-cta { flex-wrap: nowrap; }
@media (max-width: 860px) {
  .hI { padding-top: calc(var(--nav-h) + 3svh); gap: 26px; }
  .hI__line { width: auto; }
  .hI__row { display: block; width: max-content; line-height: 0.9; }
  .hI__row + .hI__row { margin-top: 0.03em; }
  .hI__row--age { display: flex; align-items: baseline; }
  .hI__row--age .hI__slot { order: 2; }
  .hI { min-height: 0; justify-content: flex-start; gap: 22px; padding-bottom: 28px; }
  .hI > .container:first-child { margin-block: 0; }
  .hI__foot { border-top: 0; padding-top: 0; gap: 16px; }
  .hI__foot .lab-sub { font-size: 0.98rem; }
  .hI__foot { grid-template-columns: 1fr; gap: 18px; }
  .hI__foot .lab-sub { justify-self: start; }
  .hI__who { order: 3; }
  .hI__foot .lab-cta { flex-direction: column; align-items: stretch; }
}

/* I · phone-first: the primary CTA must land in the first screen.
   Order on phones: headline > buttons > description > Pat lockup. */
@media (max-width: 700px) {
  .hI { padding-top: calc(var(--nav-h) + 6px); gap: 20px; }
  .hI__foot .lab-cta { order: 1; }
  .hI__foot .lab-sub { order: 2; }
  .hI__who { order: 3; }
}

/* =====================================================================
   PHONE-FIRST COMPS (P1-P3). Written for a 390 x 664 phone screen first.
   Rules: photo ~half the first screen, Pat's face clear, ONE type size
   (fit by lab.js to the widest row), Start Training in the first screen,
   no eyebrow. Slanted shapes lean at the italic's 14deg.
   ===================================================================== */
.hP { position: relative; background: var(--bg); overflow: hidden; }
.hP__type { font-family: var(--font-display); font-weight: 400; font-style: italic; text-transform: uppercase; line-height: 0.88; font-size: 22vw; opacity: 0; }
.hP__type .fr { display: block; width: max-content; }
.hP__type.is-fit { opacity: 1; }
.hP__type.is-fit .fr { animation: lab-rise .8s var(--ease) both; }
.hP__type.is-fit .fr:nth-child(2) { animation-delay: .07s; } .hP__type.is-fit .fr:nth-child(3) { animation-delay: .14s; }
.hP__cta .lab-cta { flex-direction: column; align-items: stretch; gap: 12px; }
.hP__cta .btn { width: 100%; }
.hP__more { padding: 22px 0 34px; }
.hP__more .lab-sub { font-size: 0.98rem; }
.hP__who { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.hP__who .lab-sig { width: 104px; }

/* P1 · BIG PANE — one large slanted photo, headline overlaps its lower edge */
.hP1__pane { position: relative; height: 50svh; min-height: 260px;
  clip-path: polygon(calc(50svh * 0.25) 0, 100% 0, calc(100% - 50svh * 0.25) 100%, 0 100%); }
.hP1__pane img { object-position: 49% 32%; }
.hP1__pane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.45) 0%, transparent 22%, transparent 62%, rgba(11,12,14,0.7) 100%); }
.hP1__body { position: relative; z-index: 2; margin-top: -0.5em; }
.hP1 .hP__type { margin-top: calc(-1 * var(--fr-size, 90px) * 0.5); }
.hP1 .hP__cta { margin-top: 16px; }

/* P2 · TWIN PANES — two tall slanted panes (Pat / teen clip), headline below */
.hP2 { padding-top: calc(var(--nav-h) + 6px); }
.hP2__panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 45svh; min-height: 250px;
  padding-inline: calc(var(--gutter) + 45svh * 0.125); }
.hP2__pane { position: relative; overflow: hidden; transform: skewX(-14.04deg); background: var(--panel); }
.hP2__pane > img, .hP2__pane > video { position: absolute; top: 0; bottom: 0; left: -30%; width: 160%; height: 100%; object-fit: cover; transform: skewX(14.04deg); max-width: none; }
.hP2__pane--pat > img { object-position: 50% 30%; }
.hP2__pane--vid > video { object-position: 50% 14%; }
.hP2 .hP__type { margin-top: 18px; }
.hP2 .hP__cta { margin-top: 16px; }

/* P3 · FULL SCREEN — Pat + a young athlete fill the phone; type over the floor */
.hP3 { height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 22px; }
.hP3__media img { object-position: 46% 30%; }
.hP3__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.5) 0%, transparent 15%, transparent 40%, rgba(11,12,14,0.78) 62%, rgba(11,12,14,0.96) 82%); }
.hP3 .container { position: relative; z-index: 2; }
.hP3 .hP__cta { margin-top: 16px; }
.hP3 .hP__cta .btn--ghost { display: none; }   /* one action on the photo; Meet Your Coach lives below */
.hP3 + .hP__more { padding-top: 26px; }

/* phone comps are designed at phone width; on big screens show them as a centered phone column */
@media (min-width: 701px) {
  body.pf { background: #050506; }
  body.pf #main, body.pf .nav { max-width: 430px; margin-inline: auto; left: 0; right: 0; }
  body.pf .nav__links { display: none; } body.pf .nav__toggle { display: flex; }
}

/* =====================================================================
   SLANTED PANES (S1-S3), phone-first. Panes lean at the italic's 14deg
   (skewX(-14.04deg)); media inside is counter-skewed so people stand
   upright. Outer panes bleed off-screen so only the seams show.
   Overhang of a skewed pane = tan(14deg) x height / 2 = 0.125 x height.
   ===================================================================== */
.hS { position: relative; background: var(--bg); overflow: hidden; }
.hS__pane { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transform: skewX(-14.04deg); background: var(--panel); }
.hS__pane .cut { position: absolute; top: 0; bottom: 0; left: -32%; width: 164%; height: 100%; object-fit: cover; transform: skewX(14.04deg); opacity: 0; max-width: none; }
.hS__pane .cut.on { opacity: 1; }
.hS__pane img.cut.on { animation: hS-kb 3.6s linear both; }   /* stills drift slightly while on screen */
@keyframes hS-kb { from { transform: skewX(14.04deg) scale(1.07); } to { transform: skewX(14.04deg) scale(1); } }

/* S1 · SPLIT-SCREEN CUTS — two full-height panes, each hard-cutting through
   clips and photos on a staggered beat; headline sits over the footage. */
.hS1 { height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 22px; }
.hS1__panes { position: absolute; inset: 0; display: flex; gap: 6px; margin-inline: calc(-0.125 * max(100svh, 560px) - 6px); }
.hS1::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 14%, transparent 46%, rgba(11,12,14,0.8) 66%, rgba(11,12,14,0.96) 84%); }
.hS1 .container { position: relative; z-index: 2; }
.hS1 .hP__cta { margin-top: 16px; }
.hS1 .hP__cta .btn--ghost, .hS3 .hP__cta .btn--ghost { display: none; }

/* S2 · REEL — four panes; the active one opens wide and plays, the rest
   wait as slivers. Each pane is a program with its own caption + link. */
.hS2 { padding-top: calc(var(--nav-h) + 6px); }
.hS2__reel { display: flex; gap: 5px; height: 50svh; min-height: 280px; margin-inline: calc(-0.125 * 50svh); }
.hS2 .hS__pane { cursor: pointer; transition: flex-grow .85s var(--ease); }
.hS2 .hS__pane.is-active { flex-grow: 7; cursor: default; }
.hS2 .hS__pane .cut { opacity: 1; transition: filter .6s var(--ease); }
.hS2 .hS__pane:not(.is-active) .cut { filter: brightness(0.5) saturate(0.7); }
.hS2 .hS__pane img.cut { animation: none; }
.hS__cap { position: absolute; z-index: 2; left: 18%; right: 10%; bottom: 14px; transform: skewX(14.04deg); opacity: 0; transition: opacity .4s ease; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
.hS__cap b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.02em; line-height: 1; }
.hS__cap span { font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.hS__cap span em { font-style: normal; color: var(--accent); }
.hS2 .hS__pane.is-active .hS__cap { opacity: 1; transition-delay: .35s; }
.hS2 .hS__pane:first-child .hS__cap { left: calc(18% + 0.125 * 50svh + 8px); }
.hS2 .hS__pane::after { content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7)); opacity: 0; transition: opacity .4s; }
.hS2 .hS__pane.is-active::after { opacity: 1; }
.hS2 .hP__type { margin-top: 16px; }
.hS2 .hP__cta { margin-top: 16px; }

/* S3 · TITLE PANE — two photo panes (wide Pat + clip) and the headline in
   its own orange pane cut at the same slant: dark + cream type, dark button
   (same language as the approved contact panel). */
.hS3 { height: 100svh; min-height: 560px; display: flex; flex-direction: column; }
.hS3__panes { flex: 0 0 56%; display: flex; gap: 6px; margin-inline: calc(-0.125 * 56svh - 6px); }
.hS3__panes .hS__pane:first-child { flex-grow: 1.9; }
.hS3__title { flex: 1; position: relative; margin-top: 6px; background: var(--accent);
  padding: 20px 0 22px; display: flex; flex-direction: column; justify-content: center; }
.hS3__title .hP__type .fr:first-child { color: var(--on-accent); }
.hS3__title .hP__type .fr.u-accent { color: var(--card); }
.hS3__title .hP__cta { margin-top: 14px; }
.hS3__title .btn--accent.btn--slant::before { background: #131417; box-shadow: none; }
.hS3__title .btn--accent { color: var(--text); }

/* =====================================================================
   MOTIONSITES-INSPIRED (M1-M3), phone-first, Eric's Photoshop cutout.
   ===================================================================== */
.hM { position: relative; background: var(--bg); overflow: hidden; }
.hM img { max-width: none; }   /* site styles cap images at 100%; these are sized deliberately */
.hM__gym img { filter: brightness(0.5) saturate(0.9); object-position: 30% 62%; }
.hM__fade { position: absolute; inset: auto 0 0 0; height: 34svh; z-index: 4; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(11,12,14,0.8) 55%, var(--bg)); }
.hM__foot { position: absolute; z-index: 5; inset: auto 0 0 0; padding-bottom: 22px; }
.hM__foot .hP__cta .btn--ghost { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* M1 · MARQUEE — two giant rows slide opposite ways BEHIND Pat (ref: Pink Rider).
   The type is behind him, so it can never cover his face. */
.hM1 { height: 100svh; min-height: 560px; }
.hM1__rows { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--nav-h) + 9svh); display: flex; flex-direction: column; gap: 0.04em;
  font-family: var(--font-display); font-style: italic; text-transform: uppercase; line-height: 0.86; font-size: min(30vw, 22svh); }
.hM1__row { white-space: nowrap; overflow: visible; }
.hM1__track { display: inline-flex; animation: hM-slide 22s linear infinite; will-change: transform; }
.hM1__track span { padding-right: 0.32em; }
.hM1__row--b .hM1__track { animation-direction: reverse; animation-duration: 26s; color: var(--accent); }
@keyframes hM-slide { to { transform: translateX(-50%); } }
.hM1__pat { position: absolute; z-index: 3; bottom: 0; left: 50%; height: 74svh; width: auto; transform: translateX(-50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }
@media (min-width: 701px) { .hM1__pat { height: 88svh; } .hM1__rows { font-size: min(19vw, 24svh); top: calc(var(--nav-h) + 6svh); } }

/* M2 · RIBBON — clips + photos on a slowly turning 3D ribbon (ref: Video Ribbon,
   VHS Archive). The angled panes, angled for real. Headline overlaps its base. */
.hM2 { padding-top: calc(var(--nav-h) + 4px); }
.hM2__stage { position: relative; height: 52svh; min-height: 290px; perspective: 1100px; perspective-origin: 50% 40%; }
.hM2__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: hM-turn 60s linear infinite; }
@keyframes hM-turn { from { transform: translateZ(calc(-1 * var(--r))) rotateY(0deg); } to { transform: translateZ(calc(-1 * var(--r))) rotateY(-360deg); } }
.hM2__pane { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); overflow: hidden; margin: 0;
  background: var(--panel); backface-visibility: hidden; transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r)); }
.hM2__pane > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hM2__ring { --w: 58vw; --h: 46svh; --r: calc(var(--w) * 1.207 + 6px); }   /* 8 sides: r = (w/2)/tan(22.5deg) */
@media (min-width: 701px) { .hM2__ring { --w: min(24vw, 300px); } }
.hM2 .container { position: relative; z-index: 3; }
.hM2 .hP__type { margin-top: -0.18em; text-shadow: 0 6px 30px rgba(0,0,0,0.6); }
.hM2 .hP__cta { margin-top: 16px; }

/* M3 · WOVEN — Pat stands INSIDE the word (refs: Living Portrait, Hover Ink).
   Layers: gym > BE + ELITE > Pat > lower half of ELITE + AT ANY AGE. > CTA. */
.hM3 { height: 100svh; min-height: 560px; }
.hM3__type { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 6px); }
.hM3__back, .hM3__front { position: absolute; inset: 0; }
.hM3__back { z-index: 1; } .hM3__front { z-index: 3; pointer-events: none; }
.hM3__front .hM3__weave { clip-path: inset(52% -10% -10% -10%); }
.hM3__front .hM3__be { visibility: hidden; }
.hM3__pat { position: absolute; z-index: 2; bottom: 0; left: 50%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }
.hM3__line2 { margin-top: 0.1em; }
.hM3 .hP__type { opacity: 1; }

.hM3__back .hM3__line2 { visibility: hidden; }

/* =====================================================================
   CLIENT REELS (R1-R3), phone-first. Show who trains here: kids/teens,
   women, men, 1-on-1 with Pat. Wipes and panes lean at the italic's 14deg.
   ===================================================================== */
@property --x { syntax: "<number>"; initial-value: 1; inherits: false; }
.hR { position: relative; background: var(--bg); overflow: hidden; }
.hR img, .hR video { max-width: none; }
.hR__slide { position: absolute; inset: 0; overflow: hidden; background: var(--panel);
  /* slanted wipe: --x 1 = hidden off the right edge, 0 = fully shown. 25svh = tan(14deg) x screen height */
  clip-path: polygon(calc(var(--x) * (100% + 25svh)) 0, 100% 0, 100% 100%, calc(var(--x) * (100% + 25svh) - 25svh) 100%); }
.hR__slide > img, .hR__slide > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hR__slide.kb > img { animation: hR-kb 5s linear both; }
@keyframes hR-kb { from { transform: scale(1.1); } to { transform: scale(1); } }
.hR__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 20%, transparent 46%, rgba(11,12,14,0.82) 70%, rgba(11,12,14,0.97) 88%); }
.hR__cap { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
.hR__cap b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; }
.hR__cap span { font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.88); }
.hR__cap span em { font-style: normal; color: var(--accent); font-weight: 800; }
.hR__cap.swap { animation: hR-cap .5s var(--ease) both; }
@keyframes hR-cap { from { opacity: 0; transform: translateY(8px); } }
.hR__foot { position: absolute; z-index: 3; inset: auto 0 0 0; padding-bottom: 22px; }
.hR__foot .hP__cta { margin-top: 14px; }
.hR__foot .hP__cta .btn--ghost { display: none; }

/* R1 · STORIES — full screen, auto-advancing, tap left/right, hold to pause */
.hR1 { height: 100svh; min-height: 560px; }
.hR1__slides { position: absolute; inset: 0; }
.hR1 .hR__slide.is-in { animation: hR-wipe .75s cubic-bezier(.7,0,.2,1) both; }
.hR1 .hR__slide.is-on { --x: 0; }
@keyframes hR-wipe { from { --x: 1; } to { --x: 0; } }
.hR1__bars { position: absolute; z-index: 4; top: calc(var(--nav-h) + 2px); left: var(--gutter); right: var(--gutter); display: flex; gap: 4px; }
.hR1__bars i { flex: 1; height: 3px; background: rgba(255,255,255,0.28); overflow: hidden; }
.hR1__bars i b { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.hR1__bars i.done b { transform: scaleX(1); }
.hR1__bars i.run b { animation: hR-bar var(--dur, 3.6s) linear forwards; }
.hR1.paused .hR1__bars i.run b { animation-play-state: paused; }
@keyframes hR-bar { to { transform: scaleX(1); } }
.hR1 .hR__cap { top: calc(var(--nav-h) + 18px); }
.hR1__tap { position: absolute; z-index: 2; top: var(--nav-h); bottom: 40%; width: 35%; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hR1__tap--prev { left: 0; } .hR1__tap--next { right: 0; width: 65%; }

/* R2 · SWIPE (round 2) — one continuous slanted strip: every pane the same
   height and size, even seams, endless loop (3 copies of the set, re-centered
   invisibly after each move). Native swipe on phones; auto-advances and waits
   after a touch or hover. body[data-sides="smaller"] restores the first version
   (shrunken, darkened neighbors) for comparison. */
.hR2 { padding-top: calc(var(--nav-h) + 6px); }
.hR2__track { position: relative; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  height: 50svh; min-height: 270px; padding-inline: 13vw; scroll-padding-inline: 13vw; }
.hR2__track::-webkit-scrollbar { display: none; }
.hR2__pane { position: relative; flex: 0 0 74vw; scroll-snap-align: center; overflow: hidden; background: var(--panel); margin: 0;
  transform: skewX(-14.04deg) scale(var(--s, 1)); transition: transform .5s var(--ease), filter .5s var(--ease); filter: brightness(var(--b, 0.72)); }
.hR2__pane.is-active { --b: 1; }
body[data-sides="smaller"] .hR2__pane { --s: 0.88; --b: 0.45; }
body[data-sides="smaller"] .hR2__pane.is-active { --s: 1; --b: 1; }
.hR2__pane > img, .hR2__pane > video { position: absolute; top: 0; bottom: 0; left: -22%; width: 144%; height: 100%; object-fit: cover; transform: skewX(14.04deg); }
.hR2__pane::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75)); }
.hR2__pane .hR__cap { position: absolute; left: 20%; right: 6%; bottom: 14px; transform: skewX(14.04deg); flex-direction: column; gap: 2px; opacity: 0; transition: opacity .4s; }
.hR2__pane.is-active .hR__cap { opacity: 1; transition-delay: .2s; }
.hR2__foot { position: relative; }
.hR2 .hP__type { margin-top: 18px; }
.hR2__side { display: flex; flex-direction: column; }
.hR2__side .hP__cta { order: 1; margin-top: 14px; }
.hR2__side .lab-sub { order: 2; margin-top: 22px; font-size: 0.98rem; }
.hR2__side .hP__cta .btn--ghost { display: none; }

/* desktop: three panes inside the page width, center one in the spotlight,
   neighbors dimmed, anything past the content edge fades out. Wide seams so
   each photo reads as its own frame. */
@media (min-width: 861px) {
  .hR2 { padding-top: calc(var(--nav-h) + 14px); min-height: 100svh; display: flex; flex-direction: column; }
  .hR2__track { --pw: calc((min(100vw, var(--maxw)) - 2 * var(--gutter) - 2 * 18px) / 3);
    gap: 18px; height: min(60svh, 680px); padding-inline: calc((100vw - var(--pw)) / 2); scroll-padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) - 110px), #000 calc(calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) - 6px), #000 calc(100% - calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) + 6px), transparent calc(100% - calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) + 110px));
            mask-image: linear-gradient(90deg, transparent calc(calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) - 110px), #000 calc(calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) - 6px), #000 calc(100% - calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) + 6px), transparent calc(100% - calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)) + 110px)); }
  .hR2__pane { flex-basis: var(--pw); --b: 0.42; }
  .hR2__pane:not(.is-active) > img, .hR2__pane:not(.is-active) > video { filter: saturate(0.45); }
  .hR2__pane .hR__cap { left: 22%; bottom: 18px; }
  .hR2__pane .hR__cap b { font-size: 1.8rem; }
  .hR2__foot { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding-block: 2svh; }
  .hR2 .hP__type { margin-top: 0; }
  .hR2__side .hP__cta { order: 2; margin-top: 22px; }
  .hR2__side .hP__cta .lab-cta { flex-direction: row; flex-wrap: nowrap; }
  .hR2__side .btn--lg { padding: 15px 24px; font-size: 0.9rem; }
  .hR2__side .hP__cta .btn { width: auto; }
  .hR2__side .hP__cta .btn--ghost { display: inline-flex; }
  .hR2__side .lab-sub { order: 1; margin-top: 0; font-size: 1.05rem; }
}

.optbar { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px;
  background: rgba(10,11,13,0.9); color: #fff; font: 700 12px/1 var(--font-body); letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.optbar span { padding: 11px 6px 11px 13px; color: var(--text-dim); text-transform: uppercase; }
.optbar button { font: inherit; color: inherit; background: none; border: 0; padding: 11px 12px; cursor: pointer; }
.optbar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.in-frame .optbar { display: none; }
@media (max-width: 700px) { .optbar { bottom: 62px; } }

/* R3 · SCROLL — the hero pins; scrolling wipes through client types (scrubbed,
   not timed). Headline + CTA stay put. */
.hR3 { height: calc(100svh + 4 * 62svh); overflow: visible; }
.hR3__pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hR3 .hR__slide { --x: var(--p, 1); }
.hR3 .hR__slide:first-child { --x: 0; }
.hR3 .hR__slide > img { transform: scale(calc(1 + 0.08 * var(--zoom, 0))); }
.hR3 .hR__cap { top: calc(var(--nav-h) + 12px); }
.hR3__count { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); }
.hR3__rail { position: absolute; z-index: 4; right: 10px; top: calc(var(--nav-h) + 16px); bottom: 46%; width: 2px; background: rgba(255,255,255,0.22); }
.hR3__rail b { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(var(--prog, 0)); }

/* =====================================================================
   OPTION 1 + 2 (Nov 5, round 6). Still photography, no carousels.
   ===================================================================== */
/* A + B phone fix (mobile-first): Start Training sits right under the headline */
@media (max-width: 700px) {
  .hA__stage { height: 56svh; }
  .hA__copy { display: flex; flex-direction: column; }
  .hA__title { order: 1; } .hA__cta { order: 2; margin-top: 18px; } .hA__sub { order: 3; margin: 22px 0 0; }
  .hA__cta .btn--ghost { display: none; }
  .hB__top { height: 74svh; }
  .hB__pat { height: calc(74svh - var(--nav-h) - 1.5svh - 49vw); }
  .hB__left { display: flex; flex-direction: column; }
  .hB__left .hB__age { order: 1; } .hB__left .lab-cta { order: 2; } .hB__left .lab-sub { order: 3; margin: 22px 0 0; }
  .hB__left .lab-cta .btn--ghost { display: none; }
}

/* OPTION 1 · DOORS — one big photo per client type, label set huge on it
   (refs: FARFETCH "SHOP MEN / KIDSWEAR", Rains category grid). */
.doors { background: var(--bg); padding: 4px 0; }
.doors__grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.door { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); color: var(--text); }
.door > img, .door > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s var(--ease); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,12,14,0.55) 70%, rgba(11,12,14,0.92) 100%); }
.door__txt { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.door__label { font-family: var(--font-display); font-style: italic; text-transform: uppercase; line-height: 0.88; font-size: clamp(3rem, 15vw, 5.4rem); }
.door__sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.door__sub em { font-style: normal; color: var(--accent); font-weight: 800; }
.door__arrow { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.2rem; color: var(--on-accent); position: relative; z-index: 0; }
.door__arrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: skewX(var(--skew)); }
.door:hover > img, .door:hover > video { transform: scale(1.04); }
.door:hover .door__arrow { transform: translateX(3px); transition: transform .3s var(--ease); }
@media (min-width: 861px) {
  .doors__grid { grid-template-columns: repeat(3, 1fr); }
  .door { aspect-ratio: 3 / 4.2; }
  .door__label { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
  .door__txt { left: 28px; right: 28px; bottom: 28px; }
}

/* OPTION 2 · SPLIT — three still photos edge to edge with 4px seams, ONE
   headline across all of them (refs: Face Formula, adidas, Nudie Jeans).
   Each photo is a door with its own label. */
.hO2 { position: relative; background: var(--bg); overflow: hidden; padding-top: var(--nav-h); }
.hO2__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 56svh; min-height: 300px; }
.hO2__col { position: relative; overflow: hidden; display: block; background: var(--panel); color: var(--text); }
.hO2__col > img, .hO2__col > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s var(--ease); }
.hO2__col::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 18%, transparent 58%, rgba(11,12,14,0.9) 100%); }
.hO2__lab { position: absolute; z-index: 2; left: 10px; right: 8px; top: 10px; font-family: var(--font-display); text-transform: uppercase; font-size: 1.02rem; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
.hO2__lab i { font-style: normal; color: var(--accent); }
.hO2__col:hover > img, .hO2__col:hover > video { transform: scale(1.04); }
.hO2__body { position: relative; z-index: 3; margin-top: -0.95em; }
.hO2 .hP__type { text-shadow: 0 6px 30px rgba(0,0,0,0.55); }
.hO2 .hP__cta { margin-top: 14px; }
.hO2 .hP__cta .btn--ghost { display: none; }
.hO2__sub { padding: 22px 0 34px; }
.hO2__sub .lab-sub { font-size: 0.98rem; }
/* load: columns rise in one after another; headline after */
.hO2__col { animation: lab-rise .9s var(--ease) both; }
.hO2__col:nth-child(2) { animation-delay: .08s; } .hO2__col:nth-child(3) { animation-delay: .16s; }
@media (min-width: 861px) {
  .hO2 { padding-top: 0; min-height: 100svh; display: flex; flex-direction: column; }
  .hO2__cols { height: 74svh; }
  .hO2__col::after { background: linear-gradient(180deg, rgba(11,12,14,0.6) 0%, transparent 16%, transparent 55%, rgba(11,12,14,0.92) 100%); }
  .hO2__lab { top: calc(var(--nav-h) + 16px); left: 24px; font-size: 1.6rem; }
  .hO2__body { margin-top: -1.05em; }
  .hO2__row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 20px 0 28px; }
  .hO2 .hP__cta { margin-top: 0; }
  .hO2 .hP__cta .lab-cta { flex-direction: row; flex-wrap: nowrap; }
  .hO2 .hP__cta .btn { width: auto; }
  .hO2 .hP__cta .btn--ghost { display: inline-flex; }
  .hO2__sub { padding: 0; }
  .hO2__sub .lab-sub { font-size: 1.05rem; max-width: 52ch; }
}
.hO2__col > img { object-position: var(--opm, 50% 40%); }
@media (min-width: 861px) { .hO2__col > img { object-position: var(--opd, 50% 40%); } }
@media (max-width: 860px) {
  .hO2 .hP__type .fr > span { display: block; }
  .hO2__row { display: flex; flex-direction: column; }
  .hO2__row .hP__cta { order: 1; } .hO2__row .hO2__sub { order: 2; }
}
/* B with the wider photo-36 cutout: Pat a touch smaller and right of center, copy column narrower */
@media (min-width: 701px) {
  .hB__pat { height: 78svh; left: calc(50% + clamp(40px, 5vw, 72px)); }
  .hB__left { max-width: 330px; }
  .hB__left .lab-sub { font-size: 0.96rem; }
  .hB__left .lab-cta { flex-wrap: wrap; }
}

/* =====================================================================
   A · REFINED (1A, Nov 6): the gym stays visible but quieter, with a soft
   circular lift behind Pat (a little brighter there, darker toward the
   edges) so he reads like a silhouette against it. No colored glow.
   Pat keeps his true proportions and real breathing room.
   ===================================================================== */
.hA--refined .hA__media img { object-position: 50% 58%; transform: scale(1.04); filter: brightness(0.62) saturate(0.75) blur(1.5px); }
.hA--refined .hA__media::after { background:
    radial-gradient(ellipse 30% 58% at var(--colx, 55%) 56%, rgba(11,12,14,0) 0%, rgba(11,12,14,0.12) 45%, rgba(11,12,14,0.62) 100%),
    linear-gradient(90deg, rgba(11,12,14,0.85) 0%, rgba(11,12,14,0.4) 26%, rgba(11,12,14,0) 42%),
    linear-gradient(180deg, rgba(11,12,14,0.6) 0%, transparent 22%, transparent 68%, rgba(11,12,14,0.9) 100%); }
.hA--refined .hA__inner { column-gap: clamp(48px, 5vw, 96px); }
.hA--refined .hA__copy { max-width: 430px; min-width: 0; }
.hA--refined .hA__pat { flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.65)); }
@media (min-width: 701px) {
  .hA--refined .hA__title { font-size: clamp(3rem, 5.4vw, 5.4rem); }
  .hA--refined .hA__inner .hA__pat { height: min(76svh, 46vw, 660px); width: auto; }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .hA--refined .hA__inner { grid-template-columns: auto auto; }
  .hA--refined .hA__lockup { display: none; }
  .hA--refined .hA__copy { max-width: 400px; }
}
@media (max-width: 700px) {
  .hA--refined .hA__media img { filter: brightness(0.62) saturate(0.75) blur(1px); transform: none; object-position: 30% 60%; }
  .hA--refined .hA__media::after { background:
    radial-gradient(ellipse 62% 48% at 50% 52%, rgba(11,12,14,0) 0%, rgba(11,12,14,0.15) 50%, rgba(11,12,14,0.6) 100%),
    linear-gradient(180deg, rgba(11,12,14,0.5) 0%, transparent 20%, transparent 62%, rgba(11,12,14,0.85) 88%, var(--bg) 100%); }
  .hA--refined .hA__copy { max-width: none; }
}
@media (max-width: 700px) {
  .hA--refined .hA__stage { height: 60svh; }
  .hA--refined .hA__pat--mob { height: 52svh; }
}

/* 1A fixes (Nov 6): wider copy so the subheading wraps less, buttons never wrap,
   and the hero row may run wider than the page column so Pat sits centered
   between the copy and the lockup with real room on both sides. */
@media (min-width: 701px) {
  .hA--refined .hA__inner { max-width: 1480px; }
  .hA--refined .hA__copy { max-width: clamp(440px, 40vw, 560px); }
  .hA--refined .hA__sub { max-width: none; }
  .hA--refined .hA__cta { flex-wrap: nowrap; }
  .hA--refined .hA__inner .hA__pat { height: min(76svh, 42vw, 660px); }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .hA--refined .hA__copy { max-width: 470px; }
}
/* phone: signature sits just above the headline, like today's site */
@media (max-width: 700px) {
  .hA--refined .hA__sig-mob { bottom: 8svh; }
}

/* 1A: the nav runs to the same left/right keylines as the wider hero row */
@media (min-width: 701px) { body.pg-1a .nav .container { max-width: 1480px; } }
/* the heading that peeks below the hero is always visible (no fade-in), or the tease is lost */
body.pg-1a .why__head.reveal { opacity: 1; transform: none; transition: none; }

/* Option 1 (1A): slim tease. Hero stops just short of the screen bottom so a
   strip of the next section shows (~60px desktop); its heading stays below. */
@media (min-width: 701px) {
  .hA--refined { min-height: 93svh; }
  .hA--refined .hA__inner .hA__pat { height: min(72svh, 42vw, 660px); }
}


/* =====================================================================
   FULL-PAGE COMPS (Nov 2026). Written phone-first; desktop at 861px+.
   Layers on the live site's styles.css (tokens, nav, buttons, .act
   contact panel) and lab.css (heroes).
   ===================================================================== */
.pg { background: var(--bg); }
.pg img { max-width: 100%; }
.pg [id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
.facility__dir { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; color: var(--accent); }

/* ---------- shared bits: price band, checks, Pat lockup ---------- */
.price { display: flex; align-items: flex-end; gap: 12px; }
.price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 12vw, 3.8rem); line-height: 0.78; letter-spacing: 0.01em; }
.price span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--text-dim); padding-bottom: 1px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.checks li { position: relative; padding-left: 24px; font-size: 0.95rem; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 1px; top: 0.36em; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.5; }
.lockup { display: flex; align-items: center; gap: 16px; }
.lockup > div { display: flex; flex-direction: column; gap: 6px; }
.lockup__sig { width: 120px; height: auto; opacity: 0.92; }
.pc__kicker { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--accent); margin-bottom: 10px; }
.pc__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 7vw, 2.15rem); line-height: 0.95; letter-spacing: 0.02em; }
.pc__who { margin-top: 12px; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.75); }

/* lab form note */
.act__form-status.is-lab { color: var(--on-accent); }

/* ---------- shared footer ---------- */
.ft { background: #08090B; color: var(--text); padding-top: clamp(56px, 9vw, 104px); overflow: hidden; }
.ft__top { display: grid; gap: 40px; }
.ft__logo { width: 64px; height: auto; margin-bottom: 24px; }
.ft__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.ft__cols > div:last-child { grid-column: 1 / -1; }
.ft__h { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.ft__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ft__list a { font-weight: 600; font-size: 0.98rem; line-height: 1.4; transition: color .2s; white-space: nowrap; }
.ft__list a:hover { color: var(--accent); }
.ft__bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(28px, 4vw, 48px); padding-block: 20px 26px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-dim); }
@media (min-width: 861px) {
  .ft__top { grid-template-columns: 1fr 1.25fr; align-items: end; }
  .ft__cols { grid-template-columns: repeat(3, 1fr); }
  .ft__cols > div:last-child { grid-column: auto; }
}

/* =====================================================================
   OPTION 1 · COLOR BLOCKS. Dark / white / dark / white / dark, hard
   edges; the gym photo straddles the white-to-dark seam to stitch the
   Why section into Meet Pat.
   ===================================================================== */
.o1-why { background: #fff; color: var(--ink); padding-top: clamp(64px, 9vw, 120px); }
.o1-why__h { margin-bottom: clamp(30px, 5vw, 56px); }
.o1-why__props { display: grid; gap: 34px; }
.o1-prop { border-top: 2px solid var(--ink); padding-top: 18px; }
.o1-prop__img { margin: 0 0 20px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--light); }
.o1-prop__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.o1-prop__n { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 4rem); line-height: 0.85; color: var(--accent); margin-bottom: 14px; }
.o1-prop h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1; letter-spacing: 0.02em; margin-bottom: 10px; }
.o1-prop p { color: #2C2D33; font-size: 1.02rem; }
.o1-why__band { margin-top: clamp(48px, 7vw, 90px); background: linear-gradient(180deg, #fff 50%, var(--bg) 50%); }
.o1-why__fig { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.o1-why__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.o1-why__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,12,14,0.85) 100%); }
.o1-why__addr { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.o1-why__addr p { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1; letter-spacing: 0.01em; }
@media (min-width: 861px) {
  .o1-why__props { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
  .o1-why__fig { aspect-ratio: 21 / 9; }
  .o1-why__addr { left: 36px; bottom: 32px; flex-direction: row; align-items: flex-end; justify-content: space-between; right: 36px; }
}

.o1-pat { background: var(--bg); padding-block: clamp(56px, 8vw, 110px); }
.o1-pat__grid { display: grid; gap: 34px; }
.o1-pat__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.o1-pat__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.o1-pat__copy .h2 { margin-bottom: 22px; }
.o1-pat__copy p { font-size: 1.06rem; margin-bottom: 16px; }
.o1-pat__sign { margin: 26px 0 30px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 861px) { .o1-pat__grid { grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: center; } }

.o1-prog { background: #fff; color: var(--ink); padding-block: clamp(64px, 9vw, 120px); }
.o1-prog .h2 { margin-bottom: clamp(30px, 4vw, 52px); }
.pc-grid { display: grid; gap: 4px; }
.pc { display: flex; flex-direction: column; background: var(--panel); color: var(--text); overflow: hidden; }
.pc__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease); }
.pc:hover .pc__media img { transform: scale(1.04); }
.pc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(23,26,31,0.6) 80%, var(--panel) 100%); }
.pc__body { padding: 20px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pc .price { margin: 20px 0 22px; padding: 18px 0; border-block: 1px solid var(--line); }
.pc .checks { margin-bottom: 26px; color: rgba(255,255,255,0.82); }
.pc__btn { margin-top: auto; align-self: stretch; }
@media (min-width: 861px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
  .pc__title { min-height: 1.9em; }
  .pc__who { min-height: 4.5em; }
  .pc .checks { min-height: 7.2em; }
}

.o1-q { background: var(--bg); padding-block: clamp(64px, 9vw, 120px); }
.o1-q__photo { margin: clamp(26px, 4vw, 48px) 0 0; aspect-ratio: 4 / 3; overflow: hidden; }
.o1-q__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 861px) { .o1-q__photo { aspect-ratio: 21 / 8; } }
.o1-q__grid { display: grid; margin-top: clamp(26px, 4vw, 52px); }
.o1-q__item { margin: 0; padding: 30px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.o1-q__mark { font-family: var(--font-display); font-size: 4rem; line-height: 0.6; height: 0.45em; color: var(--accent); }
.o1-q__item blockquote { font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.35; letter-spacing: -0.01em; color: #ECEAE3; }
.o1-q__item blockquote em { font-style: normal; font-weight: 600; color: var(--accent); }
.o1-q__item figcaption { margin-top: auto; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
@media (min-width: 861px) {
  .o1-q__grid { grid-template-columns: repeat(3, 1fr); }
  .o1-q__item { padding: 30px clamp(20px, 3vw, 44px); border-top: 0; border-left: 1px solid var(--line); }
  .o1-q__item:first-child { border-left: 0; padding-left: 0; }
}

/* =====================================================================
   OPTION 2 · THE GRID RUNS THE PAGE. The hero's three full-bleed columns
   continue down the page as hairline rules at the exact seam positions;
   sections alternate cream and dark underneath them.
   ===================================================================== */
.ruled { position: relative; --rule: var(--ink-line); }
.g3 { display: grid; grid-template-columns: 1fr; }
.col { padding-inline: var(--gutter); }
@media (min-width: 861px) {
  .g3 { grid-template-columns: repeat(3, 1fr); column-gap: 4px; }
  .col { padding-inline: clamp(24px, 2.6vw, 44px); }
  .col--span2 { grid-column: span 2; }
  .ruled::before, .ruled::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); pointer-events: none; z-index: 1; }
  .ruled::before { left: calc((100% - 8px) / 3 + 1.5px); }
  .ruled::after { left: calc((100% - 8px) * 2 / 3 + 5.5px); }
}
.o2-head { padding-block: clamp(64px, 9vw, 120px) clamp(26px, 4vw, 48px); }

.o2-why { background: var(--light); color: var(--ink); }
.o2-why__props { gap: 30px; padding-bottom: clamp(48px, 7vw, 90px); }
.o2-prop__n { display: block; font-family: var(--font-display); font-size: clamp(2.8rem, 9vw, 4.4rem); line-height: 0.85; color: var(--accent-deep); margin-bottom: 16px; }
.o2-prop h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1; margin-bottom: 10px; }
.o2-prop p { color: #2C2D33; font-size: 1.02rem; max-width: 40ch; }
.o2-trip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg); position: relative; z-index: 2; }
.o2-trip figure { position: relative; margin: 0; aspect-ratio: 3 / 5; overflow: hidden; }
.o2-trip img { width: 100%; height: 100%; object-fit: cover; }
.o2-trip figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11,12,14,0.8)); }
.o2-trip figcaption { position: absolute; z-index: 2; left: 10px; bottom: 10px; font-family: var(--font-display); text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--text); }
.o2-addr { padding-block: 22px 26px; gap: 10px; align-items: center; }
.o2-addr p { font-weight: 700; font-size: 1rem; }
@media (min-width: 861px) {
  .o2-trip figure { aspect-ratio: 4 / 5; }
  .o2-trip figcaption { left: clamp(24px, 2.6vw, 44px); bottom: 22px; font-size: 1.5rem; }
}

.o2-pat { background: var(--bg); color: var(--text); --rule: var(--line); }
.o2-pat__band { position: relative; margin: 0; height: 88svh; min-height: 520px; overflow: hidden; z-index: 2; }
.o2-pat__band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.o2-pat__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.35) 0%, transparent 20%, transparent 55%, rgba(11,12,14,0.92) 100%); }
.o2-pat__band figcaption { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 26px; }
.o2-pat__band .h2 { font-size: clamp(3rem, 12vw, 6.4rem); }
.o2-pat__copy { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 100px); gap: 28px; }
.o2-pat__text p { font-size: 1.06rem; margin-bottom: 16px; max-width: 62ch; }
.o2-pat__side { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
@media (min-width: 861px) {
  .o2-pat__band figcaption { left: clamp(24px, 2.6vw, 44px); bottom: 40px; }
  .o2-pat__text { columns: 2; column-gap: clamp(32px, 5vw, 88px); }
  .o2-pat__text p { break-inside: avoid; }
}

.o2-prog { background: var(--light); color: var(--ink); padding-bottom: clamp(56px, 8vw, 100px); }
.o2-row { border-top: 1px solid var(--ink-line); padding-block: 0 30px; gap: 20px; position: relative; }
.o2-row__media { padding: 0; }
.o2-row__media { position: relative; }
.o2-row__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; display: block; }
.o2-row__info .pc__kicker { color: var(--accent-deep); }
.o2-row__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 0.95; }
.o2-row__who { margin: 10px 0 16px; color: #2C2D33; }
.o2-row .checks { color: #2C2D33; }
.o2-row__buy { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.o2-row .price span { color: var(--ink-dim); }
@media (min-width: 861px) {
  .o2-row { padding-block: 0; align-items: stretch; }
  .o2-row__media { min-height: 340px; }
  .o2-row__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .o2-row__info { padding-block: 34px; }
  .o2-row__buy { padding-block: 34px; justify-content: flex-start; gap: 26px; align-items: flex-start; }
  .o2-row__buy .btn { align-self: stretch; }
}

.o2-q { background: var(--bg); color: var(--text); --rule: var(--line); padding-bottom: clamp(56px, 8vw, 110px); }
.o2-q__item { margin: 0 0 30px; display: flex; flex-direction: column; gap: 16px; }
.o2-q__item blockquote { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.01em; color: #ECEAE3; }
.o2-q__item blockquote em { font-style: normal; font-weight: 600; color: var(--accent); }
.o2-q__item figcaption { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* =====================================================================
   CINEMATIC · one continuous camera move. JS sets --p (scene progress)
   plus derived values (--a, --b, --e) on each [data-scene].
   ===================================================================== */
.pgc .act { background: var(--bg); }
.cx-pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }

/* scene 1 · HERO. One video, the BE ELITE lockup, the CTAs, and Pat's signature.
   Phone: full-bleed video, lockup at the bottom. Desktop: the vertical video sits
   in a tall slanted frame at center; BE ELITE crosses its left edge high,
   AT ANY AGE. crosses its right edge low, copy left, signature right.
   The hero stays put while the next scene slides up over it (curtain). */
.cx-open { position: relative; }
.cx-h { position: relative; z-index: 0; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }   /* scrolls away normally: no curtain */

.cx-h__bg { display: none; }
.cx-h__vid { position: absolute; inset: 0; z-index: 1; }
.cx-h__vid video { object-position: 50% 30%; }
.cx-h__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 16%, transparent 44%, rgba(11,12,14,0.8) 66%, rgba(11,12,14,0.97) 86%); }
.cx-h__title { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 96px; margin: 0; }
.cx-h__copy { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 22px; }
.cx-h__copy .lab-sub { display: none; }
.cx-h__copy .lab-cta { flex-direction: column; align-items: stretch; }
.cx-h__copy .btn { width: 100%; }
.cx-h__copy .btn--ghost { display: none; }
.cx-h__sign { position: absolute; z-index: 4; right: var(--gutter); bottom: calc(96px + 2 * var(--fr-size, 80px) * 0.9 + 8px); display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.cx-h__sig { width: 112px; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }
.cx-h__sign p { display: flex; flex-direction: column; gap: 3px; }
.cx-h__sign .lab-name { font-size: 1rem; }
.cx-h__sign .lab-role { font-size: 0.64rem; }
.cx-h__sign .lab-loc { display: none; }
@media (min-width: 861px) {
  .cx-h { --H: min(80svh, 760px); --W: calc(var(--H) * 0.6); --E: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  .cx-h__bg { display: block; position: absolute; inset: 0; z-index: 0; }
  .cx-h__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32) saturate(0.8) blur(3px); transform: scale(1.04); }
  .cx-h__vid { inset: auto; left: calc(50% - var(--W) / 2); top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--H)) / 2); width: var(--W); height: var(--H);
    clip-path: polygon(calc(var(--H) * 0.14) 0, 100% 0, calc(100% - var(--H) * 0.14) 100%, 0 100%); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); }
  .cx-h__shade { background: radial-gradient(60% 70% at 50% 50%, transparent 40%, rgba(11,12,14,0.6) 100%); }
  .cx-h__title { inset: 0; pointer-events: none; font-size: clamp(5rem, 9.4vw, 9.6rem) !important; }
  .cx-h__title .fr { position: absolute; line-height: 0.86; text-shadow: 0 6px 40px rgba(0,0,0,0.55); }
  .cx-h__l1 { left: var(--E); top: calc(var(--nav-h) + 9svh); }
  .cx-h__l2 { right: var(--E); bottom: 15svh; }
  .cx-h__copy { left: var(--E); right: auto; bottom: 12svh; width: calc(50% - var(--W) / 2 - var(--E) - 28px); max-width: 360px; }
  .cx-h__copy .lab-sub { display: block; font-size: 1rem; margin-bottom: 22px; }
  .cx-h__copy .lab-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cx-h__copy .btn { width: auto; }
  .cx-h__copy .btn--ghost { display: inline-flex; }
  .cx-h__sign { right: var(--E); bottom: auto; top: calc(var(--nav-h) + 10svh); gap: 8px; width: calc(50% - var(--W) / 2 - var(--E) - 28px); }
  .cx-h__sig { width: clamp(150px, 12vw, 200px); }
  .cx-h__sign .lab-name { font-size: clamp(1.3rem, 2vw, 1.9rem); }
  .cx-h__sign .lab-role { font-size: 0.76rem; }
  .cx-h__sign .lab-loc { display: inline-flex; margin-top: 8px; }
}

/* scene 2 · statement: cream slides up over the hero; the statement fills word
   by word while slanted photos of every kind of client gather around it */
.cx-scatter { position: relative; z-index: 1; height: 240svh; background: var(--light); }
.cx-scatter .cx-pin { background: var(--light); }
.cx-state { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0 auto; max-width: 900px;
  text-align: center; font-weight: 600; font-size: clamp(1.45rem, 6.4vw, 2.5rem); line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); }
.cx-state em { font-style: normal; color: var(--accent-deep); }
.cx-state .w { --n: 24; opacity: clamp(0.1, calc((var(--b, 0) * (var(--n) + 6) - var(--i)) / 6), 1); }
.cx-tile { position: absolute; z-index: 1; margin: 0; overflow: hidden; width: var(--w, 26vw); aspect-ratio: 3 / 4; left: var(--tx); top: var(--ty);
  clip-path: polygon(18.7% 0, 100% 0, 81.3% 100%, 0 100%);   /* 8deg, same lean as the buttons */
  --t: clamp(0, calc(var(--b, 0) * 1.6 - var(--k) * 0.08), 1);
  opacity: var(--t); transform: translate(calc((1 - var(--t)) * var(--dx, 0px)), calc((1 - var(--t)) * var(--dy, 0px))) scale(calc(0.75 + 0.25 * var(--t))) rotate(calc(var(--rot, 0deg) * var(--t))); }
.cx-tile img { width: 100%; height: 100%; object-fit: cover; }
/* tiles 7-8 are desktop-only unless a phone layout uses them */
.cx-tile:nth-child(7), .cx-tile:nth-child(8) { display: none; }
/* phone layout "now": organic scatter around the statement. Mixed sizes, two
   overlaps, two photos running off the edge; nothing crosses the statement. */
@media (max-width: 860px) {
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(1) { --tx: -5vw; --ty: 8svh; --w: 33vw; --dx: -20vw; --dy: -8svh; }
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(2) { --tx: 25vw; --ty: 17svh; --w: 21vw; --dx: -6vw; --dy: -14svh; }
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(3) { --tx: 70vw; --ty: 4svh; --w: 34vw; --dx: 20vw; --dy: -10svh; }
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(4) { --tx: 5vw; --ty: 68svh; --w: 24vw; --dx: -18vw; --dy: 8svh; }
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(5) { --tx: 33vw; --ty: 74svh; --w: 36vw; --dx: 0vw; --dy: 18svh; }
  .cx-scatter[data-layout="now"] .cx-tile:nth-child(6) { --tx: 66vw; --ty: 66svh; --w: 22vw; --dx: 18vw; --dy: 10svh; }
}
@media (min-width: 861px) {
  /* organic scatter: a top-left cluster, small top-center, medium top-right,
     one running off the right edge, big pair along the bottom */
  .cx-tile:nth-child(1) { --tx: 3vw; --ty: 9svh; --w: 13vw; --dx: -10vw; --dy: -6svh; }
  .cx-tile:nth-child(2) { --tx: 14.5vw; --ty: 24svh; --w: 7vw; --dx: -6vw; --dy: -12svh; }
  .cx-tile:nth-child(3) { --tx: 52vw; --ty: 11svh; --w: 8vw; --dx: 2vw; --dy: -16svh; }
  .cx-tile:nth-child(4) { --tx: 74vw; --ty: 12svh; --w: 10vw; --dx: 8vw; --dy: -10svh; }
  .cx-tile:nth-child(5) { --tx: 89vw; --ty: 31svh; --w: 9vw; --dx: 12vw; --dy: 0svh; }
  .cx-tile:nth-child(6) { display: block; --tx: 6vw; --ty: 60svh; --w: 9vw; --dx: -10vw; --dy: 6svh; }
  .cx-tile:nth-child(7) { display: block; --tx: 25vw; --ty: 69svh; --w: 12vw; --dx: -4vw; --dy: 14svh; }
  .cx-tile:nth-child(8) { display: block; --tx: 69vw; --ty: 63svh; --w: 14vw; --dx: 8vw; --dy: 14svh; }
}

/* scene 3 · WHY: dark, and it moves sideways. Vertical scroll drives a
   horizontal track of slanted photo panels (three reasons + the gym). */
.cx-why { height: 420svh; background: var(--bg); }
.cx-why .cx-pin { background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3svh, 36px); padding-top: var(--nav-h); }
.cx-why__head { display: flex; flex-direction: column; gap: 14px; }
.cx-why__head .h2 { font-size: clamp(1.9rem, 8vw, 4rem); }
.cx-why__bar { height: 2px; background: var(--line); }
.cx-why__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.cx-why__track { display: flex; gap: 18px; padding-inline: var(--gutter); width: max-content; will-change: transform; }
.cx-panel { width: 80vw; flex: 0 0 auto; display: flex; flex-direction: column; color: var(--text); }
.cx-panel__img { margin: 0; height: 40svh; overflow: hidden; clip-path: polygon(5.6svh 0, 100% 0, calc(100% - 5.6svh) 100%, 0 100%); }
.cx-panel__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cx-panel__n { font-family: var(--font-display); font-size: clamp(3.4rem, 15vw, 5.4rem); line-height: 0.8; color: var(--accent); margin: -0.42em 0 12px 6px; position: relative; z-index: 2; text-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.cx-panel h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1; letter-spacing: 0.02em; margin-bottom: 8px; }
.cx-panel p { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.8); max-width: 40ch; }
.cx-panel--gym .cx-panel__n { font-size: clamp(2.2rem, 10vw, 3.4rem); margin-top: -0.5em; }
.cx-panel--gym .facility__dir { margin-top: 14px; }
@media (min-width: 861px) {
  .cx-why { height: 360svh; }
  .cx-why__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .cx-why__bar { width: 240px; margin-bottom: 14px; }
  .cx-why__track { gap: 32px; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
  .cx-panel { width: clamp(340px, 30vw, 460px); }
  .cx-panel__img { height: 50svh; clip-path: polygon(7svh 0, 100% 0, calc(100% - 7svh) 100%, 0 100%); }
}

/* scene 4 · Pat's photo grows from a slanted card to full screen */
.cx-pat { height: 230svh; background: var(--light); }
.cx-pat .cx-pin { background: var(--light); }
.cx-pat__frame { position: absolute; inset: 0; --q: calc(1 - var(--e, 0));
  clip-path: polygon(calc(var(--q) * 12vw + var(--q) * 6svh) calc(var(--q) * 16svh), calc(100% - var(--q) * 12vw) calc(var(--q) * 16svh),
                     calc(100% - var(--q) * 12vw - var(--q) * 6svh) calc(100% - var(--q) * 16svh), calc(var(--q) * 12vw) calc(100% - var(--q) * 16svh)); }
.cx-pat__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cx-pat__frame::after { content: ""; position: absolute; inset: 0; opacity: var(--e, 0); background: linear-gradient(180deg, transparent 40%, rgba(11,12,14,0.55) 66%, rgba(11,12,14,0.88) 86%, var(--bg) 100%); }
.cx-pat__title { position: absolute; z-index: 2; inset: auto 0 0 0; padding-bottom: 28px;
  opacity: clamp(0, calc((var(--e, 0) - 0.55) * 3), 1); transform: translateY(calc((1 - var(--e, 0)) * 40px)); }
.cx-pat__title .h2 { font-size: clamp(3rem, 13vw, 6.4rem); margin-bottom: 16px; }
.cx-pat-copy { background: var(--bg); padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); position: relative; z-index: 1; margin-top: -2px; }   /* overlaps the seam: no hairline */
.cx-pat-copy__in p { font-size: 1.08rem; margin-bottom: 16px; max-width: 62ch; }
.cx-pat-copy__in .btn { margin-top: 18px; }
@media (min-width: 861px) {
  .cx-pat__frame { clip-path: polygon(calc(var(--q) * 22vw + var(--q) * 10svh) calc(var(--q) * 18svh), calc(100% - var(--q) * 22vw) calc(var(--q) * 18svh),
                     calc(100% - var(--q) * 22vw - var(--q) * 10svh) calc(100% - var(--q) * 18svh), calc(var(--q) * 22vw) calc(100% - var(--q) * 18svh)); }
  .cx-pat__title { padding-bottom: 48px; }
  .cx-pat__title .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .cx-pat__title .h2 { margin: 0; }
  .cx-pat-copy__in { columns: 2; column-gap: clamp(40px, 6vw, 100px); }
  .cx-pat-copy__in p { break-inside: avoid; }
}

/* scene 4 · program cards stack as you scroll (phones); three tall cards (desktop) */
.cx-prog { background: #fff; color: var(--ink); padding-block: clamp(56px, 8vw, 110px); }
.cx-card { color: var(--text); }
.cx-prog .h2 { margin-bottom: 24px; }
.cx-cards { display: flex; flex-direction: column; gap: 22px; }
.cx-card { position: sticky; top: calc(16px + var(--i) * 14px); height: min(78svh, 660px); min-height: 500px; overflow: hidden; background: var(--panel);
  display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 0 0 6px #fff;
  transform-origin: 50% 0; will-change: transform; }
.cx-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .7s var(--ease);
  transform: translate(var(--nx, 0%), var(--ny, 0%)) scale(var(--ns, 1)); }
.cx-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,12,14,0.1) 0%, transparent 20%, rgba(11,12,14,0.5) 42%, rgba(11,12,14,0.88) 60%, #0B0C0E 80%); }
.cx-card__body { position: relative; z-index: 2; padding: 0 22px 24px; display: flex; flex-direction: column; }
.cx-card .price { margin: 18px 0 20px; }
.cx-card:hover .cx-card__img { transform: translate(var(--nx, 0%), var(--ny, 0%)) scale(calc(var(--ns, 1) * 1.04)); }
@media (min-width: 861px) {
  .cx-prog .h2 { margin-bottom: 40px; }
  .cx-cards { flex-direction: row; gap: 4px; }
  .cx-card { position: relative; top: auto; flex: 1; height: 82svh; max-height: 780px; box-shadow: none; }
  .cx-card__body { padding: 0 28px 30px; }
  .cx-card .pc__who { min-height: 4.5em; }
}

/* scene 5 · results: the class photo with the heading, then the quotes as big
   editorial type (orange Anton quote marks, small-caps attribution). Desktop
   zigzags the quotes left and right. No boxes, no tabs. */
.cx-res { background: var(--bg); position: relative; padding-bottom: clamp(56px, 9vw, 120px); }
.cx-res__photo { position: relative; margin: 0; height: 62svh; min-height: 400px; overflow: hidden; }
.cx-res__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cx-res__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.35) 0%, transparent 30%, transparent 50%, rgba(11,12,14,0.85) 86%, var(--bg) 100%); }
.cx-res__photo figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; }
.cx-res__photo .h2 { font-size: clamp(2.4rem, 10vw, 5.2rem); }
.cx-res__list { display: flex; flex-direction: column; gap: clamp(40px, 7vw, 88px); margin-top: clamp(28px, 5vw, 64px); }
.cx-q { margin: 0; max-width: 860px; position: relative; padding-left: clamp(42px, 5vw, 76px); }
.cx-q blockquote { max-width: 22em; }
.cx-q__mark { position: absolute; left: 0; top: -0.08em; font-family: var(--font-display); font-size: clamp(4.2rem, 8vw, 7rem); line-height: 0.8; color: var(--accent); }
.cx-q blockquote { font-weight: 600; font-size: clamp(1.45rem, 3.4vw, 2.6rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--text); }
.cx-q blockquote em { font-style: normal; color: var(--accent); }
.cx-q figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.cx-q figcaption::before { content: ""; width: 22px; height: 2px; background: var(--accent); }
@media (min-width: 861px) {
  /* desktop: three columns with hairline dividers, like 1B */
  .cx-res__photo { height: 86svh; }
  .cx-res__photo figcaption { bottom: 48px; }
  .cx-res__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cx-q { max-width: none; padding: 8px clamp(22px, 3vw, 48px) 8px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
  .cx-q:first-child { border-left: 0; padding-left: 0; }
  .cx-q__mark { position: static; display: block; height: 0.5em; font-size: clamp(3.6rem, 5vw, 5rem); margin-bottom: 14px; }
  .cx-q blockquote { max-width: none; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.32; }
  .cx-q figcaption { margin-top: auto; padding-top: 22px; }
}

/* =====================================================================
   PHONE SCATTER LAYOUTS (?scatter=strips|drift|deal|duo; "now" = first pass).
   Phone only; desktop keeps its scattered layout. All shapes lean 8deg.
   ===================================================================== */
@media (max-width: 860px) {
  /* STRIPS: two edge-to-edge slanted strips of three, sliding in from opposite sides */
  .cx-scatter[data-layout="strips"] .cx-state,
  .cx-scatter[data-layout="drift"] .cx-state { font-size: 5.8vw; }
  .cx-scatter[data-layout="strips"] .cx-tile {
    --o: 3.65svh; --g: 6px; --tw: calc((100vw + 4 * var(--o) - 2 * var(--g)) / 3);
    width: var(--tw); height: 26svh; aspect-ratio: auto; top: var(--ty);
    left: calc(-1 * var(--o) + var(--c) * (var(--tw) - var(--o) + var(--g)));
    clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
    --t: clamp(0, calc(var(--b, 0) * 2.4 - var(--k) * 0.15), 1); --te: calc(var(--t) * (2 - var(--t)));
    opacity: 1; transform: translateX(calc((1 - var(--te)) * var(--dir) * 110vw)); }
  .cx-scatter[data-layout="strips"] .cx-tile:nth-child(-n+3) { --ty: 9svh; --dir: -1; }
  .cx-scatter[data-layout="strips"] .cx-tile:nth-child(n+4) { --ty: 65svh; --dir: 1; }
  .cx-scatter[data-layout="strips"] .cx-tile:nth-child(3n+1) { --c: 0; }
  .cx-scatter[data-layout="strips"] .cx-tile:nth-child(3n+2) { --c: 1; }
  .cx-scatter[data-layout="strips"] .cx-tile:nth-child(3n) { --c: 2; }

  /* DRIFT: bigger tiles in two rows of four that glide in opposite directions as you scroll */
  .cx-scatter[data-layout="drift"] .cx-tile {
    --o: 3.65svh; --g: 8px; --tw: 46vw;
    --ov: calc(4 * var(--tw) - 3 * var(--o) + 3 * var(--g) - 100vw - 2 * var(--o) + 4 * var(--o));
    display: block; width: var(--tw); height: 26svh; aspect-ratio: auto; top: var(--ty);
    left: calc(-1 * var(--o) + var(--c) * (var(--tw) - var(--o) + var(--g)));
    clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
    --t: clamp(0, calc(var(--p, 0) * 7 - var(--c) * 0.45), 1);
    opacity: var(--t); transform: translateX(var(--shift)); }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(-n+4) { --ty: 9svh; --shift: calc(var(--p, 0) * -1 * var(--ov)); }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(n+5) { --ty: 65svh; --shift: calc((var(--p, 0) - 1) * var(--ov)); }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(4n+1) { --c: 0; }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(4n+2) { --c: 1; }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(4n+3) { --c: 2; }
  .cx-scatter[data-layout="drift"] .cx-tile:nth-child(4n) { --c: 3; }

  /* DEAL: statement up top; big photos are dealt onto a pile one at a time */
  .cx-scatter[data-layout="deal"] .cx-state { top: 12svh; transform: none; font-size: 6vw; }
  .cx-scatter[data-layout="deal"] .cx-tile {
    width: 60vw; aspect-ratio: 3 / 4; left: 20vw; top: auto; bottom: 6svh; z-index: calc(1 + var(--k));
    box-shadow: 0 24px 40px -18px rgba(0,0,0,0.45);
    --t: clamp(0, calc(var(--b, 0) * 6.6 - var(--k) * 1.05), 1); --te: calc(var(--t) * (2 - var(--t)));
    opacity: clamp(0, calc(var(--t) * 5), 1);
    transform: translate(calc(var(--ox) + (1 - var(--te)) * 105vw), calc((1 - var(--te)) * 6svh)) rotate(calc(var(--r) + (1 - var(--te)) * 14deg)); }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(1) { --r: -5deg; --ox: -4vw; }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(2) { --r: 4deg; --ox: 4vw; }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(3) { --r: -2deg; --ox: -2vw; }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(4) { --r: 5deg; --ox: 3vw; }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(5) { --r: -4deg; --ox: -3vw; }
  .cx-scatter[data-layout="deal"] .cx-tile:nth-child(6) { --r: 1deg; --ox: 0vw; }

  /* DUO: two big photos at a time, swapping as the statement fills:
     kids & teens, then women, then men */
  .cx-scatter[data-layout="duo"] .cx-state { top: 55svh; transform: none; font-size: 6vw; }
  .cx-scatter[data-layout="duo"] .cx-tile {
    width: 45vw; aspect-ratio: 3 / 4; left: var(--tx); top: var(--ty); opacity: 0; transform: translateX(34vw);
    transition: opacity .55s var(--ease), transform .8s var(--ease); }
  .cx-scatter[data-layout="duo"] .cx-tile:nth-child(odd) { --tx: 3vw; --ty: 11svh; }
  .cx-scatter[data-layout="duo"] .cx-tile:nth-child(even) { --tx: 51vw; --ty: calc(11svh + 34px); transition-delay: .07s; }
  .cx-scatter[data-layout="duo"] .cx-tile[data-st="in"] { opacity: 1; transform: none; }
  .cx-scatter[data-layout="duo"] .cx-tile[data-st="past"] { opacity: 0; transform: translateX(-34vw); }
}

/* lab switcher for the phone photo layouts */
.scatbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 95; display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  background: rgba(10,11,13,0.92); color: #fff; font: 700 11px/1 var(--font-body); letter-spacing: 0.04em; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.scatbar span { padding: 10px 4px 10px 10px; color: var(--text-dim); text-transform: uppercase; }
.scatbar button { font: inherit; color: inherit; background: none; border: 0; padding: 10px 9px; cursor: pointer; }
.scatbar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.in-frame .scatbar { display: none; }
@media (min-width: 861px) { .scatbar { display: none; } }

/* =====================================================================
   OPTION D · full-screen video hero (body[data-vids] = 1 or 3).
   3 = three demographics cycle with slanted wipes and labeled progress tabs.
   ===================================================================== */
.cx-h__media { position: absolute; inset: 0; z-index: 1; }
.cx-h__slide { position: absolute; inset: 0; overflow: hidden; display: none; --x: 1;
  clip-path: polygon(calc(var(--x) * (100% + 25svh)) 0, 100% 0, 100% 100%, calc(var(--x) * (100% + 25svh) - 25svh) 100%); }
body[data-vids="1"] .cx-h__slide--solo, body[data-vids="3"] .cx-h__slide[data-i] { display: block; }
.cx-h__slide.is-on { --x: 0; }
.cx-h__slide.is-in { animation: hR-wipe .9s cubic-bezier(.7,0,.2,1) both; }
.cx-h__slide > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cx-h__slide .m-desk { display: none; }
.cx-h__slide.kb img { animation: cx-kb 7s linear both; }
@keyframes cx-kb { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.cx-h__reel { display: none; position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 4px); gap: 6px; }
body[data-vids="3"] .cx-h__reel { display: flex; }
.cx-h__tab { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: #fff; font: 800 0.62rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; transition: opacity .3s; text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.cx-h__tab[aria-selected="true"] { opacity: 1; }
.cx-h__tab i { display: block; height: 3px; background: rgba(255,255,255,0.28); overflow: hidden; }
.cx-h__tab i b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.cx-h__tab.done i b { transform: scaleX(1); background: #fff; }
.cx-h__tab.run i b { animation: hR-bar var(--dur, 6s) linear forwards; }
@media (min-width: 861px) {
  .cx-h__slide .m-mob { display: none; }
  .cx-h__slide .m-desk { display: block; }
  .cx-h--full { --rb: 7svh; --tb: 120px; }
  body[data-vids="3"] .cx-h--full { --rb: 96px; }
  .cx-h--full .cx-h__shade { background:
    linear-gradient(90deg, rgba(11,12,14,0.8) 0%, rgba(11,12,14,0.4) 42%, rgba(11,12,14,0.08) 68%, rgba(11,12,14,0.4) 100%),
    linear-gradient(180deg, rgba(11,12,14,0.55) 0%, transparent 18%, transparent 48%, rgba(11,12,14,0.9) 100%); }
  .cx-h--full .cx-h__title { inset: auto; left: var(--E); right: auto; bottom: calc(var(--rb) + var(--tb)); font-size: clamp(4.4rem, 8vw, 8.4rem) !important; }
  .cx-h--full .cx-h__title .fr { position: static; }
  .cx-h--full .cx-h__copy { left: var(--E); right: auto; bottom: var(--rb); width: auto; max-width: none; display: flex; align-items: center; gap: 36px; }
  .cx-h--full .cx-h__copy .lab-sub { max-width: 40ch; margin: 0; }
  .cx-h--full .cx-h__copy .lab-cta { flex-direction: row; flex-wrap: nowrap; }
  .cx-h--full .cx-h__sign { top: auto; bottom: var(--rb); right: var(--E); width: auto; }
  .cx-h--full .cx-h__reel { top: auto; bottom: 30px; left: var(--E); right: var(--E); gap: 24px; }
  .cx-h--full .cx-h__tab { font-size: 0.74rem; gap: 10px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .cx-h--full { --tb: 190px; }
  .cx-h--full .cx-h__copy { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.vidbar { position: fixed; left: 14px; bottom: 14px; z-index: 96; display: flex; align-items: center; gap: 2px;
  background: rgba(10,11,13,0.92); color: #fff; font: 700 12px/1 var(--font-body); letter-spacing: 0.04em; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.vidbar span { padding: 11px 6px 11px 13px; color: var(--text-dim); text-transform: uppercase; }
.vidbar button { font: inherit; color: inherit; background: none; border: 0; padding: 11px 12px; cursor: pointer; }
.vidbar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); }
.in-frame .vidbar { display: none; }
@media (max-width: 860px) { .vidbar { left: 10px; bottom: 56px; font-size: 11px; } }

/* =====================================================================
   OPTION D hero, considered layout (Nov 6). Phone borrows today's live
   hero: video on top with the signature over it, then headline,
   subheading, Start Training. Desktop borrows today's composition: copy
   left, name / role / signature / location right, over full-screen video.
   ===================================================================== */
.cx-h--full { display: flex; flex-direction: column; }
.cx-h--full .cx-h__stage { position: relative; flex: 1 1 auto; min-height: 36svh; overflow: hidden; }
.cx-h--full .cx-h__shade { background: linear-gradient(180deg, rgba(11,12,14,0.5) 0%, transparent 20%, transparent 58%, rgba(11,12,14,0.75) 82%, var(--bg) 100%); }
.cx-h__sigmob { position: absolute; z-index: 4; left: 22px; bottom: calc(9svh + 12px); width: 100px; height: auto; opacity: 0.72; pointer-events: none;
  filter: drop-shadow(0.35px 0 0 rgba(255,255,255,0.7)) drop-shadow(-0.35px 0 0 rgba(255,255,255,0.7)) drop-shadow(0 2px 10px rgba(0,0,0,0.55)); }
.cx-h__content { position: relative; z-index: 4; flex: none; margin-top: -9svh; padding-bottom: 24px; }
.cx-h__head { font-size: clamp(3rem, 14.5vw, 4.4rem); text-shadow: 0 3px 30px rgba(0,0,0,0.5); }
.cx-h__sub { margin: 16px 0 22px; font-size: 1rem; }
.cx-h__cta { flex-direction: column; align-items: stretch; }
.cx-h__cta .btn { width: 100%; }
.cx-h__cta .btn--ghost { display: none; }
.cx-h__lock { display: none; }
@media (min-width: 861px) {
  .cx-h--full { display: block; }
  .cx-h--full .cx-h__stage { position: absolute; inset: 0; min-height: 0; }
  .cx-h--full .cx-h__shade { background:
    linear-gradient(90deg, rgba(11,12,14,0.86) 0%, rgba(11,12,14,0.55) 30%, rgba(11,12,14,0.12) 52%, rgba(11,12,14,0.3) 66%, rgba(11,12,14,0.85) 100%),
    linear-gradient(180deg, rgba(11,12,14,0.6) 0%, transparent 22%, transparent 70%, rgba(11,12,14,0.8) 100%); }
  .cx-h__sigmob { display: none; }
  .cx-h__content { position: absolute; inset: 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px;
    padding-top: var(--nav-h); padding-bottom: 4svh; }
  body[data-vids="3"] .cx-h__content { padding-bottom: 80px; }
  .cx-h__main { max-width: 600px; }
  .cx-h__head { font-size: clamp(3.4rem, 7.2vw, 7.2rem); text-shadow: 0 3px 40px rgba(0,0,0,0.5); }
  .cx-h__sub { margin: 24px 0 34px; max-width: 42ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #FFFFFF; }
  .cx-h__cta { flex-direction: row; align-items: center; }
  .cx-h__cta .btn { width: auto; }
  .cx-h__cta .btn--ghost { display: inline-flex; }
  .cx-h__lock { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 9px; flex: 0 0 auto; text-shadow: 0 2px 20px rgba(0,0,0,0.65); }
  .cx-h__lock .lab-sig { margin: 6px 0 3px; }
  .cx-h__lock .lab-loc { margin-top: 5px; }
}

/* collapsing finished scenes adjusts scroll by hand; keep the browser from also doing it */
.pgc { overflow-anchor: none; }

/* never show the iPhone play button on the hero video (Low Power Mode): it reads as a still */
#hero video::-webkit-media-controls,
#hero video::-webkit-media-controls-panel,
#hero video::-webkit-media-controls-overlay-play-button,
#hero video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0; }

/* =====================================================================
   PHONE SCATTER · round 3 (?scatter=p1|p2|p3). 390x664 reference.
   ===================================================================== */
@media (max-width: 860px) {
  /* P1 · corners + peeks: statement narrows; two photos peek in from the
     side edges beside it, one photo near each corner */
  .cx-scatter[data-layout="p1"] .cx-state { left: 15vw; right: 15vw; font-size: 5.6vw; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(1) { --tx: 6vw; --ty: 7svh; --w: 32vw; --dx: -14vw; --dy: -10svh; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(2) { --tx: 64vw; --ty: 14svh; --w: 22vw; --dx: 12vw; --dy: -12svh; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(3) { --tx: 87vw; --ty: 38svh; --w: 24vw; --dx: 16vw; --dy: 0svh; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(4) { --tx: -12vw; --ty: 47svh; --w: 22vw; --dx: -16vw; --dy: 0svh; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(5) { --tx: 13vw; --ty: 72svh; --w: 28vw; --dx: -12vw; --dy: 12svh; }
  .cx-scatter[data-layout="p1"] .cx-tile:nth-child(6) { --tx: 56vw; --ty: 68svh; --w: 34vw; --dx: 14vw; --dy: 12svh; }

  /* P2 · diagonals: same-size photos stepping down left to right, above and
     below the statement (echoes the slant) */
  .cx-scatter[data-layout="p2"] .cx-tile { --w: 25vw; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(1) { --tx: -3vw; --ty: 5svh; --dx: -16vw; --dy: -6svh; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(2) { --tx: 34vw; --ty: 10svh; --dx: -6vw; --dy: -10svh; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(3) { --tx: 71vw; --ty: 15svh; --dx: 14vw; --dy: -8svh; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(4) { --tx: 4vw; --ty: 66svh; --dx: -14vw; --dy: 8svh; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(5) { --tx: 41vw; --ty: 71svh; --dx: 6vw; --dy: 10svh; }
  .cx-scatter[data-layout="p2"] .cx-tile:nth-child(6) { --tx: 78vw; --ty: 76svh; --dx: 16vw; --dy: 6svh; }

  /* P3 · tossed prints: the original three-above / three-below, with varied
     sizes, looser spacing and a few degrees of tilt each */
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(1) { --tx: -2vw; --ty: 9svh; --w: 29vw; --rot: -5deg; --dx: -18vw; --dy: -8svh; }
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(2) { --tx: 36vw; --ty: 5svh; --w: 24vw; --rot: 3deg; --dx: 0vw; --dy: -16svh; }
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(3) { --tx: 69vw; --ty: 12svh; --w: 27vw; --rot: -2deg; --dx: 18vw; --dy: -8svh; }
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(4) { --tx: 3vw; --ty: 69svh; --w: 26vw; --rot: 4deg; --dx: -18vw; --dy: 8svh; }
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(5) { --tx: 37vw; --ty: 75svh; --w: 29vw; --rot: -3deg; --dx: 0vw; --dy: 16svh; }
  .cx-scatter[data-layout="p3"] .cx-tile:nth-child(6) { --tx: 72vw; --ty: 68svh; --w: 25vw; --rot: 5deg; --dx: 18vw; --dy: 8svh; }
}
@media (max-width: 860px) {
  .cx-scatter[data-layout="p2"] .cx-state, .cx-scatter[data-layout="p3"] .cx-state { font-size: 5.6vw; }
}

/* =====================================================================
   OPTION E · Why (1B) slides up over the hero; then the location card
   expands to full screen and a slanted wipe cuts to Pat.
   ===================================================================== */
.cx-cover { position: relative; z-index: 1; padding-bottom: clamp(56px, 8vw, 110px); }
.cx-pat--visit, .cx-pat--visit .cx-pin { background: #fff; }
.cx-pat--visit { height: 170svh; }   /* shorter hold than C/D: ~0.7 screen of scroll */
.cx-pat--visit .cx-pat__frame { z-index: 2; }
.cx-pat__layer { position: absolute; inset: 0; display: block; }
.cx-pat__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* the cut to Pat: a slanted wipe across the frame once it is nearly full screen */
.cx-pat__pat { --wp: clamp(0, calc((var(--e, 0) - 0.55) / 0.3), 1);
  clip-path: polygon(0 0, calc(var(--wp) * (100% + 14svh)) 0, calc(var(--wp) * (100% + 14svh) - 14svh) 100%, 0 100%); }
.cx-pat--visit .cx-pat__frame::after { opacity: clamp(0, calc((var(--e, 0) - 0.6) * 3), 1); }
.cx-pat--visit .cx-pat__title { opacity: clamp(0, calc((var(--e, 0) - 0.84) * 7), 1); transform: translateY(calc((1 - var(--e, 0)) * 60px)); }
/* the location caption sits under the card; the card covers it as it grows */
.cx-visit { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); bottom: 3.5svh; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; opacity: clamp(0, calc(1 - var(--e, 0) * 3.5), 1); }
.cx-visit__addr { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.15rem, 5.2vw, 2rem); line-height: 1.02; letter-spacing: 0.01em; }
.cx-visit .facility__dir { color: var(--accent-deep); }
@media (min-width: 861px) {
  .cx-visit { left: calc(22vw); bottom: 5svh; flex-direction: row; align-items: flex-end; justify-content: space-between; right: 22vw; }
}

/* E: the menu bar slides away on scroll down and returns on scroll up, at every size */
body.nav-autohide .nav { transition: background .3s var(--ease), border-color .3s, backdrop-filter .3s, transform .35s var(--ease); }
body.nav-autohide .nav.is-hidden-up { transform: translateY(-100%); }
body.nav-autohide.menu-open .nav.is-hidden-up { transform: none; }

/* =====================================================================
   E · Meet your coach is just Pat (one photo). Location lives with his
   story: a darkened map (loaded only when near) + address + directions.
   ===================================================================== */
.cx-pat--e, .cx-pat--e .cx-pin { background: #fff; }
.cx-pat--e { height: 170svh; }
.cx-loc-grid { display: grid; gap: 36px; }
.cx-pat-copy--loc .cx-pat-copy__in { columns: auto; }
.cx-loc { display: flex; flex-direction: column; background: var(--panel); }
.cx-loc__map { position: relative; aspect-ratio: 4 / 3; background: #1b1d22; overflow: hidden; }
.cx-loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: invert(0.9) hue-rotate(180deg) saturate(0.55) contrast(0.92) brightness(0.95); }
.cx-loc__info { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; border-top: 3px solid var(--accent); }
.cx-loc__addr { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.02; letter-spacing: 0.01em; }
@media (min-width: 861px) {
  .cx-loc-grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .cx-pat-copy--loc .cx-pat-copy__in p { font-size: 1.12rem; }
  .cx-loc__info { padding: 24px 28px 26px; gap: 14px; }
  .cx-loc__addr { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
  .cx-loc .facility__dir { white-space: nowrap; }
}

/* =====================================================================
   E · Meet your coach, refined (Nov 6).
   Reveal ends on Pat with the headline + name line on clean dark space.
   Story: big lead sentence, two body paragraphs, signature sign-off, CTA.
   Map: grayscale-dark, Google's place card cropped off the top (bottom
   attribution kept), brand pin over the location, address once below.
   ===================================================================== */
.cx-pat--e .cx-pat__frame { background: var(--bg); }
.cx-pat__by { display: flex; flex-direction: column; gap: 5px; }
.cx-pat__by .lab-name { font-size: clamp(1.05rem, 4.4vw, 1.5rem); }
.cx-pat__by .lab-role { font-size: 0.7rem; }
@media (max-width: 860px) {
  /* phone: as the card fills the screen, Pat rises into the top ~80% and the
     bottom becomes dark space for the headline */
  .cx-pat--e .cx-pat__frame img { height: calc(100% - var(--e, 0) * 21%); object-position: 50% 12%; }
  .cx-pat--e .cx-pat__frame::after { background: linear-gradient(180deg, transparent 42%, rgba(11,12,14,0.6) 62%, var(--bg) 79%); }
  .cx-pat--e .cx-pat__title { padding-bottom: 26px; }
  .cx-pat--e .cx-pat__title .h2 { margin-bottom: 12px; }
  .cx-pat__by { flex-direction: row; align-items: baseline; gap: 12px; }
}
@media (min-width: 861px) {
  .cx-pat__by { align-items: flex-end; text-align: right; }
}

.cx-pat-copy--loc { padding-block: clamp(30px, 5vw, 64px) clamp(64px, 9vw, 120px); }
.cx-story { display: grid; gap: 44px; }
.cx-story__text p { font-size: 1.02rem; line-height: 1.66; color: rgba(255,255,255,0.74); margin-bottom: 14px; max-width: 56ch; }
.cx-story__text .cx-story__lead { font-size: clamp(1.32rem, 5.6vw, 1.95rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.018em; color: var(--text); margin-bottom: 22px; max-width: 26ch; }
.cx-story__sig { display: block; width: 150px; height: auto; opacity: 0.9; margin: 22px 0 28px; }
.cx-map { margin: 0; display: flex; flex-direction: column; --crop: 150px; }
.cx-map__frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #15171b; outline: 1px solid var(--line); }
.cx-map__frame iframe { position: absolute; left: 0; width: 100%; top: calc(-1 * var(--crop)); height: calc(100% + var(--crop)); border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.86) brightness(0.92); }
.cx-map__pin { position: absolute; left: 50%; top: calc(50% - var(--crop) / 2); width: 34px; height: 46px; transform: translate(-50%, -100%);
  pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); }
.cx-map__info { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.cx-map__addr { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 5.4vw, 1.75rem); line-height: 1.02; letter-spacing: 0.01em; }
.cx-map__info .facility__dir { white-space: nowrap; padding-bottom: 3px; }
@media (max-width: 420px) { .cx-map__info { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media (min-width: 861px) {
  .cx-story { grid-template-columns: 1.08fr 0.92fr; gap: clamp(48px, 6vw, 104px); align-items: stretch; }
  .cx-story__text p { font-size: 1.06rem; }
  .cx-map__frame { aspect-ratio: auto; flex: 1; min-height: 380px; }
}

/* Option 2 pricing cards: the program lines are back (between price and button).
   Neutral checks, accent kept to kicker + button. Phone cards a little taller
   so the extra lines don't cover the faces. */
.cx-card .price { margin: 16px 0 14px; }
.cx-card .checks { margin: 0 0 20px; gap: 6px; color: rgba(255,255,255,0.86); }
.cx-card .checks li { font-size: 0.9rem; line-height: 1.4; }
@media (max-width: 860px) { .cx-card { height: min(88svh, 720px); min-height: 560px; } }
@media (min-width: 861px) { .cx-card .checks { min-height: 4.6em; } }
/* small phones (iPhone SE class): keep the card inside the screen and the text
   compact enough that it stays below the faces */
@media (max-width: 860px) { .cx-card { min-height: min(560px, calc(100svh - 40px)); } }
@media (max-width: 380px) {
  .cx-card__body { padding: 0 18px 18px; }
  .cx-card .pc__kicker { font-size: 0.64rem; margin-bottom: 6px; }
  .cx-card .pc__title { font-size: 1.5rem; }
  .cx-card .pc__who { font-size: 0.84rem; line-height: 1.4; margin-top: 8px; }
  .cx-card .price { margin: 10px 0 10px; }
  .cx-card .price b { font-size: 2.6rem; }
  .cx-card .checks { gap: 3px; margin-bottom: 14px; }
  .cx-card .checks li { font-size: 0.8rem; line-height: 1.35; }
  .cx-card .pc__btn { padding-block: 13px; }
}

/* =====================================================================
   Option 2 pricing cards, calmer (Nov 6): photo on top, text on a solid
   panel below (soft fade between), one even rhythm, a hairline before the
   price, price unit in the body voice, neutral dashes instead of checks.
   Desktop rows align across the three cards.
   ===================================================================== */
.cx-card::before { background: linear-gradient(180deg, rgba(11,12,14,0.28) 0%, transparent 26%); }
.cx-card__body { background: linear-gradient(180deg, rgba(23,26,31,0) 0, var(--panel) 44px); padding: 44px 22px 24px; }
.cx-card .pc__kicker { margin-bottom: 8px; }
.cx-card .pc__title { min-height: 0; }
.cx-card .pc__who { margin-top: 10px; min-height: 0; font-size: 0.94rem; line-height: 1.5; color: rgba(255,255,255,0.72); }
.cx-card .price--inline { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.cx-card .price--inline b { font-size: clamp(2.5rem, 10vw, 3rem); line-height: 0.85; }
.cx-card .price--inline span { padding: 0; font-size: 0.92rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.3; color: rgba(255,255,255,0.62); }
.cx-card .checks { margin: 14px 0 24px; gap: 7px; color: rgba(255,255,255,0.78); }
.cx-card .checks li { font-size: 0.92rem; line-height: 1.45; padding-left: 20px; }
.cx-card .checks li::before { left: 0; top: 0.7em; width: 10px; height: 2px; border: 0; transform: none; opacity: 1; background: rgba(255,255,255,0.32); }
@media (max-width: 860px) { .cx-card { height: min(calc(100svh - 40px), 720px); min-height: 0; } }
@media (max-width: 380px) {
  .cx-card__body { padding: 36px 18px 18px; background: linear-gradient(180deg, rgba(23,26,31,0) 0, var(--panel) 36px); }
  .cx-card .pc__who { font-size: 0.84rem; }
  .cx-card .price--inline { margin-top: 12px; padding-top: 12px; }
  .cx-card .price--inline b { font-size: 2.3rem; }
  .cx-card .price--inline span { font-size: 0.8rem; }
  .cx-card .checks { margin: 10px 0 16px; gap: 4px; }
  .cx-card .checks li { font-size: 0.8rem; }
}
@media (min-width: 861px) {
  .cx-card { height: min(90svh, 840px); max-height: none; }
  .cx-card__body { padding: 56px 28px 30px; background: linear-gradient(180deg, rgba(23,26,31,0) 0, var(--panel) 56px); }
  .cx-card .pc__who { min-height: 4.5em; }
  .cx-card .checks { min-height: calc(3 * 1.45em + 14px); }
}

/* nav links: readable over video and photos */
body.pg .nav__links a:not(.btn), body.pg-1a .nav__links a:not(.btn) { color: rgba(255,255,255,0.84); text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
body.pg .nav__links a:not(.btn):hover, body.pg .nav__links a:not(.btn).is-active,
body.pg-1a .nav__links a:not(.btn):hover, body.pg-1a .nav__links a:not(.btn).is-active { color: #fff; }

/* Option 2: slim tease. A strip of the next section shows below the hero
   (~40px phone, ~60px desktop); its heading stays below the fold. */
.cx-h--full { height: 94svh; min-height: 500px; }
@media (min-width: 861px) { .cx-h--full { height: 93svh; min-height: 600px; } }
/* Big monitors: viewport-sized sections stop growing past a 1080p screen's size
   (laptops and 1080p are unchanged; 1200p / 1440p / 4K stop here). */
@media (min-width: 861px) {
  .cx-h--full { max-height: 1040px; }
  .cx-res__photo { max-height: 940px; }
  /* when the cap crops the video top and bottom (ultrawide), keep heads in frame */
  .cx-h--full .cx-h__slide .m-desk { object-position: 50% 22%; }
}
/* the heading that peeks below the hero is always visible (no fade-in), or the tease is lost */
.o1-why__h.reveal { opacity: 1; transform: none; transition: none; }

/* Option 2 Meet your coach: the story signs off like a note, signature over
   Pat's printed name and title (the reveal is just "Meet your coach.") */
.cx-sign { margin: 26px 0 30px; }
.cx-sign .cx-story__sig { margin: 0 0 10px; }
.cx-sign__by { display: flex; flex-direction: column; gap: 4px; }
.cx-sign__by .lab-name { font-size: clamp(1.15rem, 4.6vw, 1.35rem); }
.cx-sign__by .lab-role { font-size: 0.72rem; }

/* sign-off: more air under the signature, name in white, name / title on one line */
.cx-sign .cx-story__sig { margin: 0 0 18px; }
.cx-story__text .cx-sign__by { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; margin: 0; color: var(--text); }
.cx-sign__by .lab-name { color: #fff; line-height: 1; }
.cx-sign__by .lab-role { line-height: 1; white-space: nowrap; }
.cx-sign__slash { flex: none; width: 2px; height: 1.2em; background: var(--accent); transform: skewX(-20deg); }
@media (max-width: 380px) { .cx-sign__by .lab-name { font-size: 1.05rem; } .cx-sign__by .lab-role { font-size: 0.64rem; } .cx-story__text .cx-sign__by { gap: 10px; } }

/* =====================================================================
   Option 2 · Meet your coach as WINDOW PANES. One photo seen through three
   slanted panes (button lean, ~8deg, constant angle): a wide center pane on
   Pat and shorter side panes, with white gaps. As the reveal plays (--e 0->1)
   the panes grow, the gaps close and they merge into one full-screen photo.
   Each pane is the same image, aligned, so the merge is seamless.
   ===================================================================== */
.cx-pat--e .cx-pat__frame.cx-panes { clip-path: none; background: transparent; }
.cx-pat--e .cx-pat__frame.cx-panes::after { display: none; }
.cx-pane { position: absolute; inset: 0; overflow: hidden; background: var(--bg);
  --q: calc(1 - var(--e, 0));
  --L: calc(0.1405 * (100svh - 2 * var(--t)));            /* tan(8deg) x pane height */
  clip-path: polygon(calc(var(--a) + var(--L) / 2) var(--t), calc(var(--b) + var(--L) / 2) var(--t),
                     calc(var(--b) - var(--L) / 2) calc(100% - var(--t)), calc(var(--a) - var(--L) / 2) calc(100% - var(--t))); }
.cx-pane picture, .cx-pane img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cx-pane::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--e, 0);
  background: linear-gradient(180deg, transparent 40%, rgba(11,12,14,0.55) 66%, rgba(11,12,14,0.88) 86%, var(--bg) 100%); }
/* desktop: center Pat in the frame (he stands right of center in the photo) */
.cx-pane--l { --a: calc(13% - 22% * var(--e, 0)); --b: calc(27% + 4% * var(--e, 0)); --t: calc(var(--q) * 24svh); }
.cx-pane--c { --a: calc(30% - 1% * var(--e, 0)); --b: calc(70% + 1% * var(--e, 0)); --t: calc(var(--q) * 14svh); }
.cx-pane--r { --a: calc(73% - 4% * var(--e, 0)); --b: calc(87% + 22% * var(--e, 0)); --t: calc(var(--q) * 24svh); }
@media (min-width: 861px) {
  .cx-pane img { object-position: 50% 28%; transform: scale(1.1) translateX(-4.5%); }
}
/* phone: narrower side panes, a wider center on Pat; Pat rises as before */
@media (max-width: 860px) {
  .cx-pane--l { --a: calc(3% - 15% * var(--e, 0)); --b: calc(20% + 8% * var(--e, 0)); --t: calc(var(--q) * 22svh); }
  .cx-pane--c { --a: calc(25% - 1% * var(--e, 0)); --b: calc(75% + 1% * var(--e, 0)); --t: calc(var(--q) * 12svh); }
  .cx-pane--r { --a: calc(80% - 8% * var(--e, 0)); --b: calc(97% + 15% * var(--e, 0)); --t: calc(var(--q) * 22svh); }
  .cx-pane::after { background: linear-gradient(180deg, transparent 42%, rgba(11,12,14,0.6) 62%, var(--bg) 79%); }
}

/* phone panes, round 2: wide center pane (no gaps through Pat), side slivers
   at the screen edges, and Pat shifted to the middle of the frame */
@media (max-width: 860px) {
  .cx-pane--l { --a: calc(-20% - 10% * var(--e, 0)); --b: calc(6% + 6% * var(--e, 0)); --t: calc(var(--q) * 22svh); }
  .cx-pane--c { --a: calc(10% - 1% * var(--e, 0)); --b: calc(90% + 1% * var(--e, 0)); --t: calc(var(--q) * 12svh); }
  .cx-pane--r { --a: calc(94% - 6% * var(--e, 0)); --b: calc(120% + 10% * var(--e, 0)); --t: calc(var(--q) * 22svh); }
  .cx-pane img { transform: scale(1.14) translateX(-7%); transform-origin: 50% 30%; }
}

/* map: same lean as the panes and buttons on its left edge only; the right
   edge stays square on the page keyline so Google's attribution (bottom
   right) is never clipped */
.cx-map__frame { outline: 0; --lean: calc(0.1405 * 100%); }
.cx-map__frame { clip-path: polygon(var(--lx, 49px) 0, 100% 0, 100% 100%, 0 100%); }
@media (min-width: 861px) { .cx-map__frame { --lx: 76px; } }
@media (max-width: 860px) {
  .cx-pane--c { --a: calc(8% - 1% * var(--e, 0)); --b: calc(94% + 1% * var(--e, 0)); }
  .cx-pane--r { --a: calc(98% - 8% * var(--e, 0)); --b: calc(124% + 6% * var(--e, 0)); }
  .cx-pane--l { --b: calc(4% + 8% * var(--e, 0)); }
}

/* =====================================================================
   Option 2 · Meet your coach, ELITE variant (?coach=elite). The photo is
   seen through a giant slanted "ELITE" (Anton outlines, 8deg lean). As the
   reveal plays, the word zooms in through the "I" until the photo fills the
   screen, landing on the same final state as the panes.
   ===================================================================== */

.cx-pat--elite .cx-pane--l, .cx-pat--elite .cx-pane--r { display: none; }
.cx-pat--elite .cx-pane--c { clip-path: none; }
/* white layer with ELITE-shaped holes over a static photo; only this layer's
   transform changes per frame (no masks, no image resampling) */
.cx-elite { display: none; }
.cx-pat--elite .cx-elite { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.cx-pat--elite.is-open .cx-elite { display: none; }
/* ELITE reveal: the word scrolls in at full size, the section pins, the word zooms
   through the I (82.5% of a screen of scrolling), then the photo scrolls on.
   Once finished it stays finished WITHOUT shortening the page (iPhone Safari blocks the
   scroll correction that would need, which caused stuck frames or jumps): the pinned
   frame comes to rest at the bottom of the section (.is-done) and the space it used
   shows the opening frame, ELITE on white (.cx-elite-rest, built in home.js), above
   the photo. Heights in lvh (Safari toolbars hidden) so no band shows under the photo. */
.cx-pat--elite { position: relative; height: 182.5svh; height: 182.5lvh; }
.cx-pat--elite .cx-pin { height: 100svh; height: 100lvh; z-index: 1; }
.cx-pat--elite.is-done .cx-pin { position: absolute; left: 0; right: 0; top: auto; bottom: 0; }
.cx-elite-rest { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 100svh; height: 100lvh; min-height: 560px; overflow: hidden; background: #fff; --e: 0; }
.cx-pat--elite.is-open .cx-elite-rest .cx-elite { display: block; }
/* headline to story: one deliberate gap (the name line that used to sit under the
   headline is gone, so its margin goes too) */
.cx-pat--elite .cx-pat__title .h2 { margin-bottom: 0; }
.cx-pat--elite .cx-pat__title { padding-bottom: 18px; }
.cx-pat--elite + .cx-pat-copy--loc { padding-top: 22px; }
@media (min-width: 861px) {
  .cx-pat--elite .cx-pat__title { padding-bottom: 36px; }
  .cx-pat--elite + .cx-pat-copy--loc { padding-top: 36px; }
}


/* =====================================================================
   Option 2 map: a drawn map (OpenStreetMap data, site colors, Inter labels)
   instead of the Google embed. Desktop: full forward-lean shape, both edges.
   Phone: edge to edge, no slant. The whole map opens Google Maps.
   ===================================================================== */
.cx-map { --crop: 0px; }
.cx-map__frame { outline: 0; background: #15171b; }
.cx-map__link { position: absolute; inset: 0; z-index: 2; display: block; }
.cx-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-map__svg text { font-family: var(--font-body); }
.cx-map__labels { font-size: 30px; }
.cx-map__frame .cx-map__pin { transition: transform .3s var(--ease); }
.cx-map__frame:hover .cx-map__pin { transform: translate(-50%, calc(-100% - 4px)); }
.cx-map__credit { margin-top: 8px; font-size: 0.68rem; color: rgba(255,255,255,0.45); }
.cx-map__credit a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 861px) {
  .cx-map__labels { font-size: 21px; }
  .cx-map__frame { clip-path: polygon(var(--lx, 75px) 0, 100% 0, calc(100% - var(--lx, 75px)) 100%, 0 100%); }
}
@media (max-width: 860px) {
  .cx-map__frame { clip-path: none; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 3; }
}

/* =====================================================================
   Option 2 pricing cards on phones: a plain list (no stacking, borders or
   shrink) so prices can be compared while scrolling. Photo on top, solid
   panel below with a short fade.
   ===================================================================== */
@media (max-width: 860px) {
  .cx-cards { gap: 18px; }
  .cx-card { position: relative; top: auto; height: auto; min-height: 0; box-shadow: none; transform: none !important; display: block; }
  .cx-card::before { display: none; }
  .cx-card__img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; transform: none; }
  #pro .cx-card__img { object-position: 50% 16%; }
  #kicking .cx-card__img { object-position: 50% 30%; }
  .cx-card__body { margin-top: -40px; padding: 40px 20px 22px; background: linear-gradient(180deg, rgba(23,26,31,0) 0, var(--panel) 40px); }
}