/* ============================================================
   THE TRAINING LAB · dark system
   ============================================================ */
:root{
  --bg:#0D0E11;
  --bg-2:#15161C;
  --bg-3:#1D1F26;
  --text:#F2F1EC;
  --muted:#8E939D;
  --line:rgba(242,241,236,.1);
  --line-strong:rgba(242,241,236,.2);
  --accent:#FF5A1F;
  --accent-deep:#E04A12;
  --violet:#8B5CF6;

  --font-display:"Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --font-body:"Archivo", system-ui, -apple-system, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-brand:"WinnerSans", "Big Shoulders Display", "Archivo", system-ui, sans-serif;

  /* header: tall with a big mark at the top of the page, tight and small
     once you scroll. The mobile overrides at the bottom only touch these. */
  --nav-h:96px;
  --nav-h-sm:60px;
  --mark-h:56px;
  --mark-h-sm:32px;

  --max:1240px;
  --pad:clamp(20px, 4vw, 48px);
  --radius:3px;
}

/* Brand wordmark face, matches the logo lockup. Only Bold was supplied, so it is
   used for the brand name only. Falls back to Big Shoulders if the file cannot load,
   which includes some browsers opening the page from file:// */
@font-face{
  font-family:"WinnerSans";
  src:url("../assets/fonts/WinnerSans-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#0D0E11}
/* height:auto matters: the width/height attributes on an img are presentational
   hints, so without this a rule that only sets width leaves the attribute height
   in place and the picture stretches. */
img{max-width:100%;height:auto;display:block}
/* <picture> is only a wrapper for art direction, it should not affect layout,
   so the rules that target the inner img keep behaving exactly as before */
picture{display:contents}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);flex:0 0 auto}
.display{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  line-height:.92;letter-spacing:.005em;
}
.mono{font-family:var(--font-mono)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:16px 26px;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  border:1px solid var(--line-strong);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn-solid{background:var(--accent);border-color:var(--accent);color:#0D0E11}
.btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  --nav-h:var(--nav-h-sm);
  background:rgba(13,14,17,.86);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-color:var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
  transition:height .32s cubic-bezier(.2,.7,.2,1);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .brand-mark{
  width:var(--mark-h);height:var(--mark-h);flex:0 0 auto;
  transition:width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1);
}
header.scrolled .brand-mark{width:var(--mark-h-sm);height:var(--mark-h-sm)}
.brand-name{
  font-family:var(--font-brand);font-weight:700;text-transform:uppercase;
  font-size:23px;letter-spacing:.04em;line-height:1;
  white-space:nowrap;
  transition:font-size .32s cubic-bezier(.2,.7,.2,1);
}
/* matches the logo lockup: THE and LAB read white, TRAINING is the accent */
.bn-accent{color:var(--accent)}
header.scrolled .brand-name{font-size:19px}
@media (max-width:420px){
  .brand-name{font-size:17px}
  header.scrolled .brand-name{font-size:15px}
}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);transition:color .15s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--accent)}
.nav-links .btn{padding:11px 18px;color:#0D0E11}
.nav-toggle{display:none}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px var(--pad) 22px;
    /* clears the viewport whatever the menu height, so nav items can be added or removed */
    transform:translateY(calc(-100% - var(--nav-h)));
    visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
  }
  .nav-links.open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .25s ease, visibility 0s linear 0s;
  }
  .nav-links li{width:100%;border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border-bottom:0;padding-top:14px}
  .nav-links a{display:block;padding:16px 0;font-size:13px}
  .nav-links .btn{display:inline-flex;padding:14px 22px}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;background:none;border:0;cursor:pointer;
  }
  .nav-toggle span{width:22px;height:2px;background:var(--text);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)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);
  overflow:hidden;
}

/* photo side */
.hero-media{position:relative;min-height:100%}
.hero-media .slot{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 30%, #23252d 0%, #15161c 55%, #0d0e11 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.hero-media .slot .mark-ph{position:static;width:110px;height:auto;opacity:.35;filter:none}
.hero-media .slot p{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.8;
}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 18%;
  filter:grayscale(.15) contrast(1.06) brightness(.92);
}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(13,14,17,0) 55%, var(--bg) 100%),
    linear-gradient(180deg, rgba(13,14,17,.55) 0%, rgba(13,14,17,0) 26%, rgba(13,14,17,0) 60%, var(--bg) 100%);
}

/* content side */
.hero-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 6vh) var(--pad) clamp(48px,8vh,96px) clamp(24px, 4vw, 64px);
}
.hero-content h1{
  font-size:clamp(52px, 7vw, 108px);
  margin:22px 0 24px;
}
.hero-sub{max-width:44ch;color:var(--muted);font-size:17px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-stats{
  margin-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;
}
.hero-stats div{padding:16px 26px 0 0;margin-right:26px}
.hero-stats b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:28px;line-height:1;letter-spacing:.01em;
}
.hero-stats span{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

@media (max-width:1060px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;min-height:52svh}
  .hero-media::after{
    background:linear-gradient(180deg, rgba(13,14,17,.45) 0%, rgba(13,14,17,0) 30%, rgba(13,14,17,0) 55%, var(--bg) 100%);
  }
  .hero-content{padding:34px var(--pad) clamp(30px,5vh,54px)}
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--bg);
}
.ticker-track{display:flex;width:max-content;animation:ticker 26s linear infinite}
.ticker span{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  padding:13px 0;white-space:nowrap;
}
.ticker i{font-style:normal;color:var(--accent);padding:0 18px}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(76px, 12vh, 136px) 0}
.section-head{margin-bottom:clamp(36px, 6vh, 64px)}
.section-head h2{font-size:clamp(46px, 6.5vw, 88px);margin-top:18px}
.section-head p{max-width:56ch;color:var(--muted);margin-top:16px}

/* ---- method ---- */
.method-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.method-step{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 22px 34px;transition:background .2s ease;
}
.method-step:hover{background:var(--bg-2)}
.method-step .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--accent)}
.method-step h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:28px;margin:44px 0 12px;letter-spacing:.02em;
}
.method-step p{font-size:14.5px;color:var(--muted)}
@media (max-width:960px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.method-grid{grid-template-columns:1fr}}

/* ---- variables ---- */
.vars-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.var{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 22px 28px;transition:background .2s ease;
}
.var:hover{background:var(--bg-2)}
.var h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:23px;letter-spacing:.03em;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;
}
.var h3::before{content:"";width:9px;height:9px;background:var(--accent);flex:0 0 auto}
.var p{font-size:14.5px;color:var(--muted)}
@media (max-width:700px){.vars-grid{grid-template-columns:1fr}}

/* ---- programs ---- */
.programs{background:var(--bg-2)}
.program-list{border-top:1px solid var(--line-strong)}
.program{
  display:grid;
  grid-template-columns:minmax(64px,120px) 1fr minmax(200px,320px) auto;
  gap:clamp(16px,3vw,40px);align-items:center;
  padding:30px 0;border-bottom:1px solid var(--line-strong);
  text-decoration:none;transition:padding-left .2s ease;
}
.program:hover{padding-left:14px}
.program .code{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--accent)}
.program h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:.02em;line-height:1;
}
.program p{font-size:14px;color:var(--muted)}
.program .go{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:12px 18px;border-radius:var(--radius);
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.program:hover .go{background:var(--accent);border-color:var(--accent);color:#0D0E11}
@media (max-width:820px){
  .program{grid-template-columns:1fr;gap:10px;align-items:start}
  .program .go{justify-self:start;margin-top:6px}
}

/* ---- coach ---- */
.coach-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}
.photo-cap{
  position:absolute;bottom:12px;left:12px;z-index:3;
  background:rgba(13,14,17,.72);padding:5px 9px;border-radius:2px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.coach-head h2{font-size:clamp(42px,5.5vw,76px);margin:16px 0 0}
.coach-body{padding-top:clamp(6px,1.4vw,18px)}
.coach-kicker{
  margin-top:20px;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,28px);line-height:1.05;letter-spacing:.02em;
  color:var(--text);
}
.coach-body p{color:var(--muted);max-width:58ch}
.coach-body p + p{margin-top:14px}
.cred-list{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.cred-list li{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:13px;
}
.cred-list li::before{content:"→";color:var(--accent);flex:0 0 auto}
@media (max-width:900px){
  .coach-grid{grid-template-columns:1fr;gap:26px}
}

/* ---- exhibit: before/after ---- */
.exhibit{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-bottom:0;
}
.exhibit-media{position:relative;border:1px solid var(--line-strong)}
.exhibit-media::before,.exhibit-media::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid var(--accent);z-index:3;
}
.exhibit-media::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.exhibit-media::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.exhibit-media img{width:100%}
.exhibit-body h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(32px,4.2vw,56px);line-height:.95;letter-spacing:.005em;
  margin:14px 0 16px;
}
.exhibit-body p{color:var(--muted);max-width:52ch}
.exhibit-body p + p{margin-top:14px}
@media (max-width:900px){.exhibit{grid-template-columns:1fr}}

/* ---- exhibit panel: the coach's own retest ---- */
.exhibit-panel{
  margin-top:clamp(44px,7vh,80px);
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,56px);
}
.exhibit-stat{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.exhibit-stat b{
  display:block;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:.01em;
  color:var(--accent);
}
.exhibit-stat i{font-style:normal;color:var(--muted)}
.exhibit-stat small{
  display:block;margin-top:9px;
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ---- book ---- */
.book h2{font-size:clamp(54px,8.5vw,124px);margin:20px 0 24px}
.book h2 .accent{color:var(--accent)}
.book p{max-width:52ch;color:var(--muted)}
.book-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.contact-row{
  margin-top:clamp(44px,7vh,72px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;
}
.contact-row a{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  text-decoration:none;color:var(--text);
  padding:20px 34px 0 0;margin-right:24px;
  display:inline-flex;gap:10px;align-items:center;
}
.contact-row a span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.contact-row a:hover{color:var(--accent)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);color:var(--muted)}
.foot{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:26px 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.foot .brand-name{font-size:16px;color:var(--text)}

/* ============================================================
   PROTOCOL POPUP
   Native <dialog>, so Esc, focus trapping and returning focus to the
   card that opened it are handled by the browser rather than by us.
   ============================================================ */
.protocol-modal{
  /* the global *{margin:0} reset kills the UA's margin:auto on <dialog>,
     which is what centres it, so put it back explicitly */
  margin:auto;
  width:min(660px, calc(100vw - 32px));
  max-height:min(86vh, 900px);
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--bg-2);
  color:var(--text);
  overflow:hidden;
}
.protocol-modal::backdrop{
  background:rgba(6,7,9,.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.protocol-modal[open]{
  display:flex;flex-direction:column;
  animation:pm-in .26s cubic-bezier(.2,.7,.2,1);
}
@keyframes pm-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){
  .protocol-modal[open]{animation:none}
}

.pm-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--text);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.pm-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pm-close:hover{background:var(--bg-3);border-color:var(--text)}
.pm-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pm-head{
  display:flex;align-items:flex-start;gap:18px;
  padding:30px 64px 22px 30px;
  border-bottom:1px solid var(--line);
}
.pm-mark{width:56px;height:56px;flex:0 0 auto}
.pm-code{
  display:block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent);
}
.pm-head h2{font-size:clamp(28px,4vw,40px);line-height:.95}

.pm-body{
  padding:26px 30px 8px;
  overflow-y:auto;
}
.detail-lead{color:var(--text);font-size:16px;line-height:1.6}
.pm-body h4{
  margin:24px 0 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.pm-body ul{list-style:none;margin:0}
.pm-body li{
  position:relative;padding:9px 0 9px 26px;
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:14.5px;line-height:1.5;
}
.pm-body li:last-child{border-bottom:0}
.pm-body li::before{
  content:"";position:absolute;left:2px;top:16px;
  width:7px;height:7px;background:var(--accent);
}
.detail-fit{
  margin-top:20px;padding:14px 0 0;border-top:1px solid var(--line);
  color:var(--muted);font-size:14.5px;
}
.detail-fit b{color:var(--text)}
.detail-note{
  margin-top:16px;padding:14px 16px;
  background:var(--bg);border-left:2px solid var(--violet);
  color:var(--muted);font-size:13.5px;line-height:1.55;
}
.pm-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:22px 30px 26px;
  border-top:1px solid var(--line);
  margin-top:auto;
}
body.modal-open{overflow:hidden}

@media (max-width:560px){
  .pm-head{padding:24px 58px 18px 20px;gap:14px}
  .pm-mark{width:44px;height:44px}
  .pm-body{padding:20px 20px 6px}
  .pm-actions{padding:18px 20px 22px}
  .pm-actions .btn{flex:1 1 100%;justify-content:center}
}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none} }
@media (max-width:700px){
  :root{--nav-h:78px;--nav-h-sm:56px;--mark-h:44px;--mark-h-sm:30px}
}
@media (prefers-reduced-motion: reduce){
  .nav,.brand .brand-mark,.brand-name{transition:none}
}

/* footer links match the footer's quiet tone */
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}