/* =============================================================
   University of Trash — "The Operator Blueprint"
   Design tokens → primitives → sections
   Palette sampled from captured UOT crest + event flyer.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ink / dark surfaces */
  --ink-950:#0A0A0C;
  --ink-900:#101014;
  --ink-850:#16161A;
  --ink-800:#1C1C21;
  --ink-700:#2A2A31;

  /* paper / light surfaces */
  --paper:#F5F3EF;
  --paper-2:#EBE8E2;
  --paper-3:#DEDAD2;
  --white:#FFFFFF;

  /* brand */
  --accent:#D8201F;          /* UOT red */
  --accent-hover:#F0332F;
  --accent-deep:#8C0F0E;
  --accent-bright:#FF4438;   /* small red text on dark (AA) */
  --gold:#F5C518;            /* restrained flyer yellow */

  /* text on dark */
  --t-hi:#FFFFFF;
  --t-body:#C9C7C4;
  --t-mute:#8E8B87;

  /* text on paper */
  --i-hi:#131318;
  --i-body:#3A3A42;
  --i-mute:#6B6B74;

  /* lines */
  --hair:rgba(255,255,255,.11);
  --hair-strong:rgba(255,255,255,.20);
  --hair-ink:rgba(19,19,24,.14);
  --hair-ink-strong:rgba(19,19,24,.30);

  /* radius — flat, print-like */
  --r-xs:2px;
  --r-sm:3px;
  --r:4px;
  --r-lg:8px;

  /* shadow */
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 8px 24px -8px rgba(0,0,0,.55);
  --sh-3:0 24px 60px -18px rgba(0,0,0,.70);
  --sh-ink:0 18px 44px -20px rgba(19,19,24,.42);

  /* type */
  --f-display:"Anton","Arial Narrow",Impact,system-ui,sans-serif;
  --f-sans:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* layout */
  --shell:1240px;
  --gut:clamp(20px,5vw,56px);
  --header-h:70px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--ink-950);
  color:var(--t-body);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,iframe{max-width:100%;display:block}
img{height:auto}

::selection{background:var(--accent);color:#fff}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-160%);
  background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:var(--r);
  font:600 14px/1 var(--f-sans);text-decoration:none;
  transition:transform .18s ease;
}
.skip-link:focus-visible{transform:translateY(0)}

.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gut);
}

/* ---------- 2. TYPE PRIMITIVES ---------- */
.h-display{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  line-height:.96;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--i-hi);
  margin:0 0 .5em;
}
.h-display-light{color:var(--t-hi)}
.h-display-xl{font-size:clamp(2.4rem,6.4vw,5rem)}

.accent-text{color:var(--accent)}
.h-display-light .accent-text{color:var(--accent-bright)}

.eyebrow{
  font:600 11px/1 var(--f-mono);
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--accent-bright);
  display:flex;align-items:center;gap:10px;
  margin:0 0 20px;
}
.eyebrow-dark{color:var(--accent)}
.eyebrow-center{justify-content:center;color:var(--t-mute);margin-bottom:44px}
.rule-dash{width:26px;height:2px;background:currentColor;flex:none}

.pulse{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 0 0 rgba(255,68,56,.65);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,68,56,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,68,56,0)}
  100%{box-shadow:0 0 0 0 rgba(255,68,56,0)}
}

.section-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px)}
.section-head-split{
  display:grid;grid-template-columns:1fr;gap:24px;
  max-width:none;align-items:end;
}
@media (min-width:1025px){
  .section-head-split{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px)}
  .section-head-split > *:last-child{justify-self:end}
}
.section-lede{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--i-body);margin:0;max-width:56ch;
}
.section-lede-light{color:var(--t-body)}
.section-lede-right{padding-bottom:.35em}

/* ---------- 3. BUTTONS ---------- */
.btn{
  --btn-bg:var(--accent);
  --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  background:var(--btn-bg);color:var(--btn-fg);
  font:700 14px/1 var(--f-sans);
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;border-radius:var(--r);
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease;
}
.btn-sm{min-height:44px;padding:0 18px;font-size:12.5px}
.btn-block{display:flex;width:100%}

.btn-accent{box-shadow:0 10px 24px -12px rgba(216,32,31,.9)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-accent:active{background:var(--accent-deep);transform:translateY(1px)}

.btn-ghost{
  --btn-bg:transparent;--btn-fg:var(--t-hi);
  border-color:var(--hair-strong);box-shadow:none;
}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost:active{background:rgba(255,255,255,.12);transform:translateY(1px)}

/* .btn-ghost is a dark-surface variant — white on white in a paper panel.
   This is its light-surface twin. */
.btn-outline{
  --btn-bg:transparent;--btn-fg:var(--i-hi);
  border-color:var(--hair-ink-strong);box-shadow:none;
}
.btn-outline:hover{border-color:var(--i-hi);background:rgba(19,19,24,.05)}
.btn-outline:active{background:rgba(19,19,24,.10);transform:translateY(1px)}

.btn:focus-visible,
.brand:focus-visible,
.site-nav a:focus-visible,
.footer-nav a:focus-visible,
.nav-toggle:focus-visible,
.video-cover:focus-visible,
a:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.btn-play{width:11px;height:13px;fill:currentColor;flex:none}

/* ---------- 4. SCROLL PROGRESS + HEADER ---------- */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:120;
  background:transparent;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:var(--accent);
  box-shadow:0 0 12px rgba(216,32,31,.9);
}

.site-header{
  position:sticky;top:0;z-index:110;
  /* fully opaque at every scroll position — nothing may ghost through it */
  background:var(--ink-950);
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}
/* NB: no backdrop-filter — it would make this the containing block for the
   position:fixed mobile menu and collapse it, and it is what let type show through. */
.site-header.is-stuck{
  border-bottom-color:var(--hair-strong);
  box-shadow:0 1px 0 0 rgba(216,32,31,.42),0 6px 16px -12px rgba(0,0,0,.85);
}
.header-inner{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:24px;
}

.brand{
  display:flex;align-items:center;gap:12px;min-height:44px;
  text-decoration:none;margin-right:auto;flex:none;
}
.brand-chip{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;
  background:var(--paper);
  border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.brand-chip img{width:30px;height:auto}
.brand-type{display:grid;line-height:1}
.brand-abbr{
  font-family:var(--f-display);font-size:19px;letter-spacing:.06em;
  color:var(--t-hi);text-transform:uppercase;
}
.brand-full{
  font:500 9.5px/1 var(--f-mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--t-mute);margin-top:4px;
}
.brand-sep{color:var(--accent-bright);padding-inline:4px}

.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{
  position:relative;
  display:inline-flex;align-items:center;min-height:44px;
  font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mute);text-decoration:none;
  transition:color .16s ease;
}
/* the rule is pinned to the type, not the enlarged 44px hit area */
.site-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:12px;height:2px;
  background:var(--accent);transition:right .22s ease;
}
.site-nav a:hover{color:var(--t-hi)}
.site-nav a:hover::after,
.site-nav a.is-active::after{right:0}
.site-nav a.is-active{color:var(--t-hi)}

.header-actions{display:flex;align-items:center;gap:12px;flex:none}
/* matches .site-nav a's specificity so the in-menu CTA stays hidden on desktop */
.site-nav a.nav-cta{display:none}

.nav-scrim{
  position:fixed;inset:0;z-index:104;
  background:rgba(6,6,8,.62);
  opacity:0;transition:opacity .28s ease;
  pointer-events:none;
}
.nav-scrim.is-on{opacity:1;pointer-events:auto}
/* the sticky CTA outranks the scrim in z-order, so park it while the menu is open */
.nav-scrim.is-on ~ .mobile-cta{transform:translateY(130%)}

.nav-toggle{
  display:none;width:46px;height:46px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hair-strong);border-radius:var(--r-xs);
  cursor:pointer;padding:0;
  place-items:center;align-content:center;justify-items:center;gap:5px;
  transition:border-color .2s ease,background-color .2s ease;
}
.nav-toggle[aria-expanded="true"]{border-color:var(--accent);background:rgba(216,32,31,.12)}
.nav-toggle span{display:block;width:19px;height:2px;background:#fff;border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. BANDS ---------- */
.band{position:relative;padding:clamp(54px,6.1vw,88px) 0}
.band-paper{background:var(--paper);color:var(--i-body)}
.band-ink{background:var(--ink-900);color:var(--t-body)}
.band-paper + .band-ink,
.band-ink + .band-paper{border-top:3px solid var(--accent)}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink-950);
  padding-top:clamp(28px,3.4vw,44px);
  padding-bottom:0;
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 30% 20%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 20%,#000 0%,transparent 72%);
  opacity:.75;
}
.hero-slash{
  position:absolute;top:-18%;right:-6%;width:46%;height:150%;
  background:linear-gradient(180deg,rgba(216,32,31,.20),rgba(216,32,31,0));
  transform:skewX(-13deg);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,4.4vw,64px);
  align-items:center;
  padding-block:clamp(16px,2.4vw,28px);
}

.hero-title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.3rem,4.55vw,3.65rem);
  line-height:.94;letter-spacing:.004em;
  text-transform:uppercase;color:var(--t-hi);
  margin:0 0 20px;
  text-wrap:pretty;
}
.hero-title-line{display:block}
.hero-title-lower{display:block;color:var(--t-mute);font-size:.7em;margin-top:.14em}

/* the money line: figure never breaks, the slash is its own optically-set glyph
   so it can neither collide with the line above nor crowd "Month" */
.hero-money{color:var(--accent)}
.money-figure{white-space:nowrap}
.money-slash{
  display:inline-block;
  font-size:.74em;line-height:1;
  padding-inline:.07em;
  transform:translateY(-.06em);
  opacity:.66;
}
.ht-wrap{display:inline}

.hero-lede{
  font-size:clamp(1rem,1.28vw,1.09rem);
  color:var(--t-body);max-width:48ch;margin:0 0 26px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}

/* the deeper path is present but deliberately quieter than the two event CTAs */
.hero-tertiary{margin:0 0 14px}
.hero-tertiary a{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-mute);text-decoration:none;
  transition:color .16s ease;
}
.hero-tertiary a:hover{color:var(--t-hi)}
.hero-tertiary svg{
  width:14px;height:10px;flex:none;fill:none;stroke:var(--accent);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease;
}
.hero-tertiary a:hover svg{transform:translateX(3px)}

.trust-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  list-style:none;margin:0;padding:0;
}
.trust-strip li{
  font:500 11px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--t-mute);
}
.trust-strip li{display:flex;align-items:center;gap:9px}
.trust-strip li::before{
  content:"/";color:var(--accent);font-size:14px;letter-spacing:0;line-height:1;
}

/* hero media frame */
.hero-media{position:relative;justify-self:end;width:100%;max-width:470px}
.frame{
  position:relative;margin:0;
  border:1px solid var(--hair-strong);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--ink-850);
  box-shadow:var(--sh-3);
}
.frame-hero{aspect-ratio:1/1}
.frame-hero img{width:100%;height:100%;object-fit:cover;object-position:64% center}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.10) 0%,rgba(10,10,12,0) 34%,rgba(10,10,12,.72) 100%);
}
.frame-tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 18px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;color:#fff;
  background:linear-gradient(180deg,rgba(10,10,12,0),rgba(10,10,12,.86));
}
.frame-tag-k{
  font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:4px 7px;border-radius:var(--r-xs);
}
.frame-bracket{
  position:absolute;right:-14px;bottom:-14px;width:118px;height:118px;
  border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);
  border-bottom-right-radius:var(--r-sm);
  pointer-events:none;
}
.frame-bracket-dark{border-color:var(--accent)}

/* hero stat rail — teaser strip that straddles the fold */
.stat-rail{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:clamp(14px,2vw,24px) 0 0;padding:0;
  border-top:1px solid var(--hair);
}
.stat-rail li{
  padding:16px 8px 18px;
  border-right:1px solid var(--hair);
  display:grid;gap:5px;
}
.stat-rail li:last-child{border-right:0}
.stat-rail b{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,2.5vw,1.9rem);line-height:1;
  color:var(--t-hi);letter-spacing:.01em;
}
.stat-rail span{
  font:500 9.5px/1.3 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-mute);
}

/* ---------- 7. TRAINING ---------- */
.section-preview{border-top:3px solid var(--accent)}
.training-layout{
  display:grid;grid-template-columns:1.55fr .95fr;
  gap:clamp(24px,3.4vw,44px);align-items:start;
}

.stepper{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;min-width:min(340px,100%);
  border-top:2px solid var(--i-hi);
}
.stepper li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--hair-ink);
  font:500 13px/1.35 var(--f-sans);color:var(--i-mute);
}
.stepper span{
  font:600 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--i-mute);
}
.stepper .is-now{color:var(--i-hi);font-weight:600}
.stepper .is-now span{color:var(--accent)}

.video-frame{
  position:relative;aspect-ratio:16/9;
  background:var(--ink-950);
  border:1px solid var(--hair-ink-strong);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-ink);
  overflow:hidden;
}
.video-frame video{width:100%;height:100%;object-fit:contain;background:#000}

.video-cover{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  background:var(--ink-950);
  border:0;cursor:pointer;padding:0;
  overflow:hidden;
  transition:opacity .3s ease;
}
.video-cover.is-hidden{opacity:0;pointer-events:none}
.video-cover-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:58% 30%;
  filter:saturate(.72) contrast(1.06);
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.video-cover:hover .video-cover-img{transform:scale(1.05)}
/* the scrim is what makes white type + the play button legible over the photo */
.video-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 80% at 50% 44%,rgba(10,10,12,.34) 0%,rgba(10,10,12,.72) 100%),
    linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.30) 34%,rgba(10,10,12,.90) 100%),
    linear-gradient(275deg,rgba(216,32,31,.20) 0%,rgba(216,32,31,0) 46%);
}
.video-mark{
  position:absolute;left:20px;top:18px;
  width:min(64px,13%);height:auto;opacity:.9;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.video-play{
  position:relative;z-index:2;
  width:82px;height:82px;border-radius:50%;
  background:var(--accent);
  display:grid;place-items:center;
  box-shadow:0 18px 40px -14px rgba(216,32,31,.95);
  transition:transform .18s ease,background-color .18s ease;
}
.video-play svg{width:22px;height:24px;fill:#fff;margin-left:4px}
.video-cover:hover .video-play{transform:scale(1.07);background:var(--accent-hover)}
.video-cover:active .video-play{transform:scale(.98)}

.video-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;text-align:left;
  background:linear-gradient(180deg,rgba(10,10,12,0),rgba(10,10,12,.9));
}
.video-meta-k{
  font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--accent);padding:5px 8px;border-radius:var(--r-xs);
}
.video-meta-t{font:500 13px/1.3 var(--f-mono);color:var(--t-body);letter-spacing:.03em}
.video-meta-d{
  margin-left:auto;font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--t-mute);
}

.tick{position:absolute;width:16px;height:16px;z-index:4;pointer-events:none}
.tick-tl{top:9px;left:9px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.tick-tr{top:9px;right:9px;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
.tick-bl{bottom:9px;left:9px;border-bottom:2px solid var(--accent);border-left:2px solid var(--accent)}
.tick-br{bottom:9px;right:9px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}

.training-side{
  background:var(--white);
  border:1px solid var(--hair-ink);
  border-top:3px solid var(--ink-900);
  border-radius:var(--r-sm);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--sh-ink);
}
.side-title{
  font:700 13px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--i-hi);margin:0 0 20px;
}
.side-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:0}
.side-list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:15px 0;border-top:1px solid var(--hair-ink);
  font-size:15.5px;line-height:1.5;color:var(--i-body);
}
.side-list li:first-child{border-top:0;padding-top:0}
.side-list span{
  font:600 12px/1.5 var(--f-mono);color:var(--accent);letter-spacing:.06em;
}
.side-btn-2{margin-top:10px}
.side-note{
  margin:14px 0 0;text-align:center;
  font:500 11px/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--i-mute);
}

/* ---------- 8. PROOF LEDGER ---------- */
.section-proof{
  background:var(--ink-950);
  overflow:hidden;
  padding-block:clamp(40px,4.4vw,62px);
}
.proof-stripe{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 0 38%,rgba(216,32,31,.16) 38% 44%,transparent 44% 100%);
}
.section-proof .shell{position:relative}

/* Not a second copy of the hero stat rail: this band carries the five
   source-backed operator credentials as a compact transition ledger. */
.record{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);
}
.record li{
  display:grid;gap:12px;align-content:start;
  padding:22px clamp(12px,1.5vw,20px) 24px;
  border-right:1px solid var(--hair);
}
.record li:last-child{border-right:0}
.record-n{
  font-family:var(--f-display);font-weight:400;
  font-size:1.55rem;line-height:1;letter-spacing:.04em;
  color:var(--accent-bright);
}
.record-t{
  font:500 14px/1.45 var(--f-sans);color:var(--t-body);
  text-wrap:pretty;
}

.proof-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.proof-head .eyebrow{margin:0}
.seal{
  /* negative block margin keeps the seal from inflating the head row's height */
  margin:-24px 0;flex:none;
  display:grid;place-items:center;gap:2px;
  width:102px;height:102px;
  border:2px solid var(--accent);border-radius:50%;
  transform:rotate(-11deg);
  background:rgba(216,32,31,.06);
  text-align:center;
}
.seal-top{
  font-family:var(--f-display);font-size:20px;line-height:1;
  color:var(--t-hi);text-transform:uppercase;letter-spacing:.02em;
}
.seal-bottom{
  font:600 9px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-bright);
}

/* ---------- 9. BLUEPRINT MODULES ---------- */
.modules{
  list-style:none;margin:0;padding:0;
  position:relative;
}
.modules::before{
  content:"";position:absolute;left:29px;top:14px;bottom:14px;width:2px;
  background:repeating-linear-gradient(180deg,var(--hair-ink-strong) 0 7px,transparent 7px 15px);
}
.module{
  position:relative;
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);
  align-items:start;
  padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,28px) clamp(22px,2.6vw,30px) 0;
  border-top:1px solid var(--hair-ink);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0));
  transition:background .2s ease,transform .2s ease;
}
.module:first-child{border-top:2px solid var(--i-hi)}
.module-final{border-bottom:2px solid var(--accent)}
.module:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
  transform:translateX(3px);
}
.module-node{
  position:relative;z-index:1;
  width:60px;height:60px;flex:none;
  display:grid;place-items:center;
  background:var(--i-hi);color:#fff;
  border-radius:var(--r-xs);
  box-shadow:0 0 0 6px var(--paper);
  transition:background .2s ease;
}
.module:hover .module-node{background:var(--accent)}
.module-node span{
  font-family:var(--f-display);font-size:23px;line-height:1;letter-spacing:.02em;
}
.module-heading{
  display:flex;align-items:baseline;gap:16px;
}
.module-leader{
  flex:1 1 auto;min-width:24px;height:1px;
  background-image:linear-gradient(90deg,var(--hair-ink-strong) 0 3px,transparent 3px 8px);
  background-size:8px 1px;background-repeat:repeat-x;
  transform:translateY(-.28em);
}
.module:hover .module-leader{
  background-image:linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 8px);
}
.module-body h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:.008em;
  color:var(--i-hi);margin:0 0 12px;
}
.module-body > p{margin:0;color:var(--i-body);max-width:74ch;font-size:16px}
.module-tag{
  margin:0;flex:none;
  font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--i-mute);
  border:1px solid var(--hair-ink-strong);border-radius:var(--r-xs);
  padding:7px 10px;white-space:nowrap;
}
.module:hover .module-tag{color:var(--accent);border-color:var(--accent)}

/* ---------- 10. FIT CHECK ---------- */
.fit-layout{
  display:grid;grid-template-columns:1.45fr .95fr;
  gap:clamp(24px,3.2vw,44px);align-items:start;
}
.fit-panel{
  background:var(--ink-850);
  border:1px solid var(--hair);
  border-top:3px solid var(--accent);
  border-radius:var(--r-sm);
  padding:clamp(20px,2.6vw,32px);
  box-shadow:var(--sh-2);
}
.fit-panel-k{
  margin:0 0 6px;
  font:600 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-mute);
}
.fit-questions{list-style:none;margin:0;padding:0;counter-reset:fq}
.fit-questions > li{
  counter-increment:fq;
  padding:22px 0;border-top:1px solid var(--hair);
}
.fq-k{
  margin:0 0 8px;
  font:600 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-bright);
  display:flex;align-items:center;gap:10px;
}
.fq-k::before{
  content:"0" counter(fq);
  color:var(--t-mute);font-weight:500;letter-spacing:.1em;
}
.fq-q{
  margin:0 0 14px;color:var(--t-hi);
  font-size:16.5px;line-height:1.45;font-weight:500;max-width:52ch;
}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.chips li{
  font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;
  color:var(--t-body);
  border:1px solid var(--hair-strong);border-radius:var(--r-xs);
  padding:8px 10px;background:rgba(255,255,255,.03);
}

.fit-side{display:grid;gap:16px;align-content:start}
@media (min-width:1025px){
  .fit-side{position:sticky;top:calc(var(--header-h) + 26px)}
}
.callout{
  background:var(--accent);color:#fff;
  border-radius:var(--r-sm);
  padding:clamp(20px,2.4vw,26px);
}
.callout p{margin:0;font-size:15.5px;line-height:1.55}
.callout-k{
  font:700 11px/1 var(--f-mono)!important;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:12px!important;opacity:.92;
}
.callout-quiet{
  background:var(--ink-850);color:var(--t-body);
  border:1px solid var(--hair);
  border-left:3px solid var(--gold);
}
.callout-quiet .callout-k{color:var(--gold);opacity:1}

/* ---------- 11. DAVID ---------- */
.david-layout{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4vw,60px);align-items:center;
}
.david-media{position:relative;width:100%}
.frame-david{aspect-ratio:5/6;border-color:var(--hair-ink-strong);box-shadow:var(--sh-ink)}
.frame-david img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.frame-david::after{
  background:linear-gradient(180deg,rgba(10,10,12,0) 60%,rgba(10,10,12,.35) 100%);
}
.david-badge{
  position:absolute;left:-14px;top:-18px;z-index:3;
  margin:0;display:grid;gap:2px;text-align:center;
  background:var(--i-hi);color:#fff;
  padding:14px 18px;border-radius:var(--r-xs);
  box-shadow:var(--sh-2);
  transform:rotate(-3deg);
}
.david-badge b{
  font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
}
.david-badge span{
  font:600 9px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-bright);
}

.david-copy p{color:var(--i-body);margin:0 0 18px;max-width:58ch}
.david-kicker{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.1;
  text-transform:uppercase;color:var(--i-hi)!important;letter-spacing:.01em;
  border-left:4px solid var(--accent);padding-left:16px;
  margin:26px 0 28px!important;
}
.pull-quote{
  margin:30px 0 0;padding:26px 0 0;border-top:2px solid var(--i-hi);
  position:relative;
}
.pull-quote p{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.25rem,2.3vw,1.75rem);line-height:1.12;
  text-transform:uppercase;letter-spacing:.006em;
  color:var(--i-hi)!important;margin:0 0 14px;max-width:30ch;
}
.pull-quote p::before{content:"\201C";color:var(--accent)}
.pull-quote p::after{content:"\201D";color:var(--accent)}
.pull-quote footer{
  font:600 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--i-mute);
}

/* ---------- 12. STAGE / MEDIA GRID ---------- */
/* Three columns, two equal rows, no tall spans: one photographic anchor plus a row
   of four artefacts that all share the same frame height. Tall spans forced the
   posters into cells they could not fill, which is what made them read as
   screenshots with black bars. */
.media-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:minmax(0,400px) minmax(0,400px);
  gap:14px;
}
/* One system, two materials: a photographic tile (cover, edge to edge) and matted
   poster tiles. Captions sit in an identical bar below every image rather than
   fighting the flyers' own typography. */
.tile{
  position:relative;margin:0;overflow:hidden;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--ink-850);
  grid-column:span 1;grid-row:span 1;
}
.tile-media{position:relative;overflow:hidden;min-height:0}
.tile img{
  position:relative;z-index:1;
  width:100%;height:100%;min-height:0;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover img{transform:scale(1.045)}
.tile-wide{grid-column:1 / span 2;grid-row:1}
.tile-wide img{object-position:58% center}

/* Posters and verticals are artwork, so they are shown whole rather than cropped —
   but a contained image in a tall cell leaves dead letterbox. A blurred, darkened
   copy of the same artwork fills the cell behind it, so each reads as a framed
   piece instead of a screenshot with black bars. */
.tile-poster{background:#08080A}
.tile-bed{
  position:absolute;inset:0;z-index:0;
  background-image:var(--bed);
  background-size:cover;background-position:center;
  filter:blur(34px) saturate(.5) brightness(.3);
  transform:scale(1.25);
}
.tile-poster img{
  object-fit:contain;object-position:center;
  padding:clamp(14px,1.6vw,22px);box-sizing:border-box;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.85));
}
.tile-poster:hover img{transform:scale(1.02)}
.tile-flyer{grid-column:3;grid-row:1}
.tile-tall{grid-column:3;grid-row:2}
/* the two guest posters auto-place into row 2, columns 1 and 2 */

.tile figcaption{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;
  border-top:1px solid var(--hair);
  background:var(--ink-900);
  font:500 11px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--t-body);
}
.tile-k{
  font-weight:600;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:4px 7px;border-radius:var(--r-xs);
}
.tile-k-past{background:var(--ink-700);color:var(--t-body);box-shadow:inset 0 0 0 1px var(--hair-strong)}

.section-seminar{padding-bottom:clamp(44px,4.6vw,66px)}
.section-fit{
  padding-bottom:clamp(44px,4.6vw,68px);
  /* transform → fit → mentorship are all dark; the shared band rule only fires on a
     paper/ink change, so this seam is drawn explicitly */
  border-top:3px solid var(--accent);
}
.section-blueprint{padding-bottom:clamp(44px,4.6vw,70px)}
.section-david{padding-block:clamp(52px,5.6vw,82px)}

/* The completed seminar leads the section as an event masthead — the facts read
   first, the imagery supports them. Status is stated before anything else so the
   date can never be mistaken for an upcoming one. */
.event-masthead{
  display:grid;gap:clamp(16px,2vw,24px);
  margin-bottom:clamp(20px,2.4vw,30px);
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--hair);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--ink-850),var(--ink-900));
}
.event-status{
  display:flex;align-items:center;gap:12px;margin:0;
  font:600 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-mute);
}
.event-name{
  margin:0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.45rem,2.9vw,2.25rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:.008em;color:var(--t-hi);
}
@media (min-width:861px){
  .event-masthead{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
  .event-status{grid-column:1 / -1}
}
.event-facts{
  margin:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(16px,2vw,28px);
}
.event-facts > div{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;
  padding:11px 0;border-top:1px solid var(--hair);
}
.event-facts dt{
  font:600 9.5px/1.6 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-bright);
}
.event-facts dd{
  margin:0;font:500 13px/1.5 var(--f-mono);color:var(--t-body);letter-spacing:.01em;
}
.stage-note{
  margin:16px 0 0;
  font:400 12.5px/1.6 var(--f-sans);letter-spacing:.01em;color:var(--t-mute);
}

/* ---------- 13. TRANSFORMATION ---------- */
.section-transform{
  background:var(--ink-950);
  border-top:3px solid var(--accent);
  padding-top:clamp(48px,5.2vw,76px);
}
.transform-head{text-align:center;margin-bottom:clamp(28px,3.4vw,44px)}
.transform-head .eyebrow{justify-content:center}
.transform-head .h-display{margin-bottom:0}

.transform-split{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  border-top:1px solid var(--hair);
}
.transform-col{
  padding:clamp(34px,4.6vw,64px) var(--gut);
  display:grid;align-content:start;gap:26px;
}
.transform-col:first-child{justify-items:end;text-align:right}
.transform-from{background:var(--ink-900)}
.transform-to{
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.20)),
    var(--accent);
}
.transform-k{
  margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:.9;
  text-transform:uppercase;letter-spacing:.02em;
}
.transform-from .transform-k{color:var(--t-mute)}
.transform-to .transform-k{color:#fff}
.transform-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:34ch}
.transform-col li{
  padding:15px 0;border-top:1px solid var(--hair);
  font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.35;
}
.transform-from li{color:var(--t-mute)}
.transform-to li{color:#fff;border-top-color:rgba(255,255,255,.28);font-weight:500}
.transform-arrow{
  display:grid;place-items:center;width:clamp(56px,7vw,96px);
  background:var(--ink-900);
  border-inline:1px solid var(--hair);
}
.transform-arrow svg{
  width:40px;height:24px;fill:none;
  stroke:var(--accent);stroke-width:2.4;stroke-linecap:square;
}

/* ---------- 14. APPLY ---------- */
.section-mentorship{
  background:var(--ink-950);
  border-top:3px solid var(--accent);
  overflow:hidden;
}
.apply-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(90% 80% at 20% 30%,#000,transparent 70%);
}
.apply-layout{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);align-items:start;
}
.recap{
  list-style:none;margin:30px 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:460px;
}
.recap li{
  display:grid;gap:6px;
  border:1px solid var(--hair);border-radius:var(--r-xs);
  padding:12px 12px 13px;
  font:600 11.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-body);
}
.recap span{
  font-family:var(--f-display);font-size:15px;letter-spacing:.05em;
  color:var(--accent-bright);font-weight:400;
}
.trust-strip-apply{margin-top:4px}

.form-frame{
  background:var(--white);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-3);
  overflow:hidden;
  border-top:4px solid var(--accent);
}
.form-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0;padding:14px 18px;
  border-bottom:1px solid var(--hair-ink);
  background:var(--paper);
}
.form-head-k{
  font:700 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--i-hi);
}
.form-head-steps{
  font:500 10px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--i-mute);
}
.form-embed{
  position:relative;background:var(--white);
}
/* Only while the panel height is being animated into the frame height. The iframe is
   already at its full ladder height by then, so without this it would overflow the
   collapsed box and lie across the footer for the length of the transition. */
.form-embed.is-animating{overflow:hidden}
/* The frame is mounted on click, so there is always a beat before the cross-origin
   document paints. Sitting on an empty dark box reads as broken, so hold a caption
   over it until the iframe's load event. Above the iframe (z-index 2) because the
   iframe's own --ink-950 background would otherwise cover anything behind it. */
.form-embed.is-loading::after{
  content:"Loading the application";
  position:absolute;inset:0;z-index:2;
  /* Aligned to the TOP of the frame, not centred. The frame is 1563px here and up to
     2314px on a phone, and the reveal scrolls its top edge to just under the header —
     so a centred caption would sit hundreds of px below the fold and the visitor
     would tap Apply and watch an empty black box with no feedback at all. */
  display:grid;place-content:start center;
  padding-top:clamp(120px,22vh,240px);
  background:var(--ink-950);
  font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-mute);
  animation:formLoadPulse 1.5s ease-in-out infinite;
}
@keyframes formLoadPulse{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){
  .form-embed.is-loading::after{animation:none;opacity:.7}
}
.form-embed iframe{
  position:relative;z-index:1;
  width:100%;border:0;display:block;
  /* The embed is lazy-loaded and paints its own dark surface. Left transparent it
     showed a light slab against this dark section for the second it takes to arrive;
     --ink-950 is the page's own ground, so the wait reads as part of the layout
     rather than a broken box. */
  background:var(--ink-950);

  /* ---- frame height ----------------------------------------------------------
     The provider's snippet says height="900". It is too short: the form is
     1381-2314px depending on frame width, so 900px cut it mid-question with ~20
     fields and the submit button below the cut.

     There is no safe single value, and both errors are visible:
       too short -> the form is clipped and nests a scrollbar inside the page
       too tall  -> the embed's dark card ends at its content height and its light
                    #F9FAFB body shows as a slab underneath
     So the ladder below errs SHORT, never tall — the residual is at most 19px of
     internal scroll (which eats only the "Powered by BuiltFastCo" line), instead of
     a near-white stripe on a black page.

     Values are MEASURED against the live embed, not derived: for each viewport,
     the rendered frame width was read off this page, then the embed was loaded at
     that exact width and its scrollHeight recorded. Re-measure whenever the form's
     fields or styling change. main.js will override all of it the moment the embed
     starts posting a height — it does not today.
     ---------------------------------------------------------------------------- */
  height:1563px;                      /* two-column layout, frame ~441-538px wide */
}
@media (max-width:1024px){.form-embed iframe{height:1381px}}   /* stacks: frame widens */
@media (max-width:740px) {.form-embed iframe{height:1420px}}
@media (max-width:720px) {.form-embed iframe{height:1472px}}
@media (max-width:640px) {.form-embed iframe{height:1491px}}
@media (max-width:600px) {.form-embed iframe{height:1563px}}
@media (max-width:480px) {.form-embed iframe{height:1667px}}
@media (max-width:470px) {.form-embed iframe{height:1719px}}
@media (max-width:450px) {.form-embed iframe{height:1862px}}
@media (max-width:440px) {.form-embed iframe{height:1883px}}
@media (max-width:420px) {.form-embed iframe{height:1973px}}
@media (max-width:410px) {.form-embed iframe{height:2044px}}
@media (max-width:384px) {.form-embed iframe{height:2096px}}
@media (max-width:375px) {.form-embed iframe{height:2201px}}
@media (max-width:360px) {.form-embed iframe{height:2220px}}
@media (max-width:344px) {.form-embed iframe{height:2275px}}
@media (max-width:336px) {.form-embed iframe{height:2295px}}
/* Set by main.js only when the real iframe mounts. The embed carries its own
   Application / Calendar / Confirmation stepper, so ours would be the same three
   steps stated twice, four lines apart. The label on the left still earns its place. */
.form-frame.has-embed{background:var(--ink-950)}
.form-frame.has-embed .form-head-steps{display:none}
/* Application panel. The default contents of #applyEmbed, and what stands on any
   origin BuiltFastCo's per-tenant frame-ancestors policy does not admit — preview
   deploys, localhost, JS off. On a registered host main.js replaces it with the real
   iframe above. Not a placeholder: its CTA opens the same application in a new tab,
   which framing rules do not restrict, so this path converts too. Keep both. */
.form-panel{
  min-height:466px;
  display:grid;align-content:center;justify-items:center;gap:0;
  padding:44px 26px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,var(--paper) 62%);
}
.form-panel-mark{width:56px;height:auto;opacity:.92}
.form-panel-title{
  margin:20px 0 0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;color:var(--i-hi);
}
.form-panel-steps{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--hair-ink);border-bottom:1px solid var(--hair-ink);
}
.form-panel-steps li{
  display:flex;align-items:center;gap:9px;
  padding:14px clamp(12px,1.6vw,20px);
  font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--i-mute);
  border-left:1px solid var(--hair-ink);
}
.form-panel-steps li:first-child{border-left:0}
.form-panel-steps span{font:600 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--i-mute)}
.form-panel-steps .is-now{color:var(--i-hi);font-weight:600}
.form-panel-steps .is-now span{color:var(--accent)}
.form-panel-cta{margin-top:26px}
.form-panel-cta .cta-i{
  width:11px;height:11px;flex:none;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* The affordance must match what the click does. Default (no JS, or an origin
   BuiltFastCo will not frame from) is a real new-tab link, so the out-arrow and the
   "new tab" note show. main.js adds .is-inline only where it can actually reveal the
   form in place, which swaps both. Doing this in CSS rather than by rewriting nodes
   keeps the no-JS state correct with no work. */
.form-panel-cta .cta-i-down,
.form-panel .cta-note-inline{display:none}
.form-panel.is-inline .cta-i-out,
.form-panel.is-inline .cta-note-out{display:none}
.form-panel.is-inline .cta-i-down{display:block}
.form-panel.is-inline .cta-note-inline{display:block}
.form-panel.is-inline .form-panel-cta .cta-i-down{transition:transform .25s ease}
.form-panel.is-inline .form-panel-cta:hover .cta-i-down{transform:translateY(2px)}
.form-panel-note{
  margin:12px 0 0;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--i-mute);opacity:.8;
}

/* ---------- 15. FOOTER ---------- */
.site-footer{
  background:var(--ink-950);
  border-top:1px solid var(--hair);
  padding:38px 0 calc(38px + env(safe-area-inset-bottom));
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-inline:-10px}
.footer-nav a{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;
  font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mute);text-decoration:none;transition:color .16s ease;
}
.footer-nav a:hover{color:var(--t-hi)}
.footer-legal{
  margin:0;font:400 11.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--t-mute);
}

/* ---------- 16. MOBILE STICKY CTA ---------- */
.mobile-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:106;
  padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));
  background:var(--ink-950);
  /* a red hairline reads as brand; a full-weight red rule read as an alarm bar */
  border-top:1px solid rgba(216,32,31,.42);
  box-shadow:0 -14px 30px -22px rgba(0,0,0,.9);
  transform:translateY(130%);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.mobile-cta.is-visible{transform:translateY(0)}
/* content dissolves into the bar rather than being sliced by it */
.mobile-cta::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:30px;
  background:linear-gradient(180deg,rgba(10,10,12,0),rgba(10,10,12,.9));
  pointer-events:none;
}
.mobile-cta .btn{
  min-height:46px;font-size:13px;letter-spacing:.08em;
  box-shadow:none;
}
.mobile-cta .btn:active{transform:none}

/* ---------- 17. REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width:1120px){
  .site-nav{gap:20px}
  .site-nav a{font-size:11px;letter-spacing:.12em}
}

@media (max-width:1024px){
  :root{--header-h:64px}

  .site-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-950);
    border-bottom:1px solid var(--hair-strong);
    padding:8px var(--gut) 20px;
    transform:translateY(-120%);
    transition:transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow:var(--sh-3);
  }
  .site-nav.is-open{transform:translateY(0)}
  .site-nav a{
    padding:16px 0;border-bottom:1px solid var(--hair);
    font-size:13px;letter-spacing:.18em;min-height:44px;display:flex;align-items:center;
  }
  .site-nav a::after{display:none}
  .site-nav a.nav-cta{
    display:flex;margin-top:16px;border-bottom:0;
    color:#fff;font:700 14px/1 var(--f-sans);letter-spacing:.09em;
    justify-content:center;padding:0 26px;min-height:52px;
  }
  .site-nav a.nav-cta:hover{color:#fff}
  .nav-toggle{display:grid}
  .header-cta{display:none}

  .training-layout{grid-template-columns:1fr}
  .fit-layout{grid-template-columns:1fr}
  .david-layout{grid-template-columns:1fr;gap:36px}
  .david-media{max-width:none}
  .frame-david{aspect-ratio:16/11}
  .frame-david img{object-position:center 30%}
  .apply-layout{grid-template-columns:1fr}
  .section-head-split{gap:18px}
  .section-lede-right{padding-bottom:0}

  .mobile-cta{display:block}
  /* the sticky bar owns the bottom ~74px — keep anchors and the footer clear of it */
  html{scroll-padding-bottom:92px}
  .site-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .section-mentorship{padding-bottom:clamp(56px,7vw,84px)}
}

/* Short landscape viewports (1024x768, 1440x800 laptops): the fold is a height
   problem, not a width problem, so trim the hero on height rather than restyling
   it by width. Keeps the next band peeking without touching taller screens. */
@media (min-width:901px) and (max-height:820px){
  .hero{padding-top:18px}
  .hero-inner{padding-block:8px;gap:clamp(24px,3vw,44px)}
  .hero-title{font-size:clamp(2.05rem,3.8vw,2.95rem);margin-bottom:16px}
  .hero-lede{margin-bottom:20px}
  .hero-cta{margin-bottom:18px}
  .hero-media{max-width:392px}
  .stat-rail{margin-top:14px}
  .stat-rail li{padding:12px 8px 14px}
  .stat-rail b{font-size:1.5rem}
}

/* The hero holds its two-column composition further down than the nav does:
   at 1024x768 (short landscape laptops) stacking it pushed the next band 320px
   below the fold for no gain — there is plenty of horizontal room left. */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .hero-media{justify-self:stretch;max-width:none;margin-right:14px}
  .frame-hero{aspect-ratio:21/9}
  .frame-hero img{object-position:62% 34%}
}

@media (max-width:860px){
  .media-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;gap:12px}
  .tile,.tile-flyer,.tile-tall{
    grid-column:auto;grid-row:auto;
    grid-template-rows:auto auto;align-content:start;
  }
  .tile-wide{grid-column:1 / span 2}
  .tile img{
    height:auto;max-height:min(58vh,520px);
    object-fit:contain;transform:none!important;
  }
  .tile-poster img{padding:14px}
  .tile-bed{filter:blur(26px) saturate(.5) brightness(.3)}
  .event-facts{grid-template-columns:minmax(0,1fr)}

  .module-heading{flex-direction:column;align-items:flex-start;gap:12px}

  .record{grid-template-columns:repeat(2,1fr)}
  .record li{border-bottom:1px solid var(--hair);padding:18px 14px 20px}
  .record li:nth-child(2n){border-right:0}
  .record li:last-child{border-bottom:0;grid-column:1 / -1}
  .seal{width:92px;height:92px;transform:rotate(-6deg);margin:-14px 0}
  .seal-top{font-size:17px}
  .proof-stripe{opacity:.6}
}

@media (max-width:768px){
  body{font-size:16px}

  .hero{padding-top:16px}
  .hero-title{
    font-size:clamp(1.92rem,8.3vw,2.7rem);
    margin-bottom:15px;line-height:.98;
  }
  /* the headline sets on its own lines at phone width instead of being forced
     to hold long compounds: Build A / $10K-$50K/Month / Recurring Revenue /
     Business / Without Inventing Anything */
  .hero-title .ht-wrap{display:block}
  .hero-money{white-space:normal}
  .money-slash{padding-inline:.05em}
  .hero-lede{margin-bottom:18px;font-size:15px;line-height:1.5}
  .hero-cta{gap:10px;margin-bottom:10px}
  .hero-tertiary{margin:0 0 10px}
  .hero-inner{gap:20px;padding-block:8px}
  .trust-strip{gap:6px 12px}
  .trust-strip li{font-size:9.5px;letter-spacing:.11em}
  .stat-rail{margin-top:12px}
  .stat-rail li{padding:13px 6px 14px}
  .stat-rail b{font-size:1.24rem}
  .stat-rail span{font-size:8.5px;letter-spacing:.11em}
  .frame-bracket{width:80px;height:80px;right:-10px;bottom:-10px}

  .module{
    grid-template-columns:46px 1fr;
    gap:16px;padding-right:0;
  }
  .module-node{width:46px;height:46px;box-shadow:0 0 0 5px var(--paper)}
  .module-node span{font-size:18px}
  .modules::before{left:22px}
  .module-heading{flex-wrap:wrap;gap:10px}
  .module-leader{display:none}
  .module-tag{order:-1}

  .transform-split{grid-template-columns:1fr}
  .transform-col:first-child{justify-items:start;text-align:left}
  .transform-col ul{max-width:none;width:100%}
  .transform-arrow{
    width:auto;height:64px;border-inline:0;
    border-block:1px solid var(--hair);
  }
  .transform-arrow svg{transform:rotate(90deg)}

  /* wrapping the stepper left an orphan cell and a stray divider - stack it */
  .form-panel{min-height:400px;padding:36px 20px}
  .form-panel-steps{flex-direction:column;align-items:stretch;width:100%;max-width:280px}
  .form-panel-steps li{
    justify-content:flex-start;border-left:0;border-top:1px solid var(--hair-ink);
    padding:13px 4px;
  }
  .form-panel-steps li:first-child{border-top:0}

  .recap{grid-template-columns:repeat(2,1fr)}

  .footer-inner{justify-content:flex-start;gap:20px}
}

/* Mobile rhythm: every band below is already sitting on its clamp() floor, so the
   only way to shorten the page is to lower the floors. ~12% off the sections that
   read longest on a phone — spacing stays generous, the scroll gets shorter. */
@media (max-width:768px){
  .band{padding:47px 0}
  .section-proof{padding-block:35px}
  .section-blueprint{padding-bottom:38px}
  .section-fit{padding-bottom:38px}
  .section-david{padding-block:45px}
  .section-seminar{padding-bottom:38px}
  .section-transform{padding-top:42px}
  .transform-head{margin-bottom:26px}
  .section-head{margin-bottom:24px}

  .module{padding-block:19px}
  .fit-questions > li{padding:19px 0}
  .fit-panel{padding:20px 18px}
  .transform-col{padding-block:30px;gap:20px}
  .transform-col li{padding:13px 0}
  .creds li,.side-list li{padding-block:13px}
  .david-kicker{margin:22px 0 24px!important}
  .pull-quote{margin-top:26px;padding-top:22px}
  .event-masthead{padding:18px;margin-bottom:18px;gap:14px}
  .recap{margin:24px 0}

  /* the sticky bar owns ~70px; keep the last band and the footer clear of it */
  .section-mentorship{padding-bottom:70px}
}

@media (max-width:560px){
  /* On a phone the old one-per-row grid ran 2,513px — a quarter of the whole page.
     Two columns for the guest posters and fixed frames for the rest turns it into a
     contact sheet: same five assets, roughly half the scroll. */
  .media-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile-wide,.tile-flyer,.tile-tall{grid-column:1 / span 2}
  .tile img{max-height:none}
  .tile-media{aspect-ratio:16/10}
  .tile-wide img,.tile-tall img{object-fit:cover;height:100%}
  .tile-tall img{object-position:center 62%;padding:0;filter:none}
  .tile-flyer .tile-media{aspect-ratio:auto;height:420px}
  .tile-guest .tile-media{aspect-ratio:3/4}
  .tile-poster img{height:100%;padding:12px}

  .brand-full{display:none}
  .hero-cta .btn{flex:1 1 100%;min-height:50px}
  /* on a phone the deeper path lives in the menu and its own section; keeping it in
     the hero pushed the next band a full 66px below the fold for a tertiary action */
  .hero-tertiary{display:none}
  .stat-rail{margin-top:10px}
  .video-play{width:64px;height:64px}
  .video-play svg{width:18px;height:20px}
  .video-meta-t{display:none}
  .record{grid-template-columns:1fr}
  .record li{
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;gap:14px;
    border-right:0;padding:14px 0 15px;
  }
  .record li:last-child{grid-column:auto}
  .record-n{font-size:1.15rem}
  .chips li{font-size:11px}
}