/* fonts are served from this site (no outside requests): Anton for display, Archivo (variable, 400 to 800) for body */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============ TOKENS ============ */
:root{
  --ink:#0B0B0C; --ink-2:#121214; --ink-3:#1A1A1E; --steel:#25252B; --line:#2E2E35;
  --chalk:#F4F1EC; --chalk-2:#CFC9C1; --dim:#948E86;
  --crimson:#BA1F30; --crimson-lift:#D8293E; 
  --display:"Anton","Archivo Black","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:clamp(20px,5vw,80px);
  /* motion system: one language, three speeds */
  --t-micro:180ms; --t-el:620ms; --t-scene:1100ms;
  --ease:cubic-bezier(.16,1,.3,1);      /* entrances, expo out */
  --ease-io:cubic-bezier(.65,0,.35,1);  /* transforms both ways */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; text-wrap:balance; font-family:var(--display); font-weight:400;
  text-transform:uppercase; line-height:1.02; letter-spacing:.006em}
::selection{background:var(--crimson); color:#fff}
:focus-visible{outline:2px solid var(--crimson-lift); outline-offset:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--crimson); color:#fff;
  padding:12px 18px; z-index:200; font-weight:700}
.skip:focus{left:12px; top:12px}

/* ============ MATERIAL: grain + vignette ============ */
.grain{position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ TYPE UTILITIES ============ */
.eyebrow{font-family:var(--body); font-size:11px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--dim)}
.wrap{padding-inline:var(--gut)}
.inner{max-width:1320px; margin-inline:auto}
.lede{font-size:clamp(17px,1.4vw,19px); line-height:1.65; color:var(--chalk-2); max-width:54ch}
.band{padding-block:clamp(76px,9vw,138px)}

/* ============ MOTION: reveal ============
   Every starting state sits behind html.motion, which the head script adds only when
   reduced motion is off. Without it (reduced motion, or JavaScript off) the page is complete and static. */
.veil{overflow:hidden}
.motion .rise{translate:0 22px; transition:translate var(--t-el) var(--ease)}
.motion .rise.in{translate:none}
.motion .rise[data-d="1"]{transition-delay:80ms}
.motion .rise[data-d="2"]{transition-delay:160ms}
.motion .rise[data-d="3"]{transition-delay:240ms}

/* ============ SCROLL PROGRESS ============ */
.prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(244,241,236,.08)}
.prog i{display:block; height:100%; width:100%; background:var(--crimson-lift);
  transform-origin:left; transform:scaleX(0); will-change:transform}

/* ============ HEADER ============ */
.hdr{position:fixed; top:0; left:0; right:0; z-index:55;
  display:flex; align-items:center; gap:24px;
  padding:18px var(--gut); padding-top:calc(18px + env(safe-area-inset-top,0px));
  transition:background var(--t-el) var(--ease), padding var(--t-el) var(--ease),
             border-color var(--t-el) var(--ease);
  border-bottom:1px solid transparent;
  background:linear-gradient(to bottom,rgba(11,11,12,.86),rgba(11,11,12,0))}
.hdr.stuck{background:rgba(11,11,12,.93); backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  padding-block:11px; padding-top:calc(11px + env(safe-area-inset-top,0px))}
.hdr .logo{height:clamp(54px,6.2vw,88px); width:auto; transition:height var(--t-el) var(--ease)}
.hdr.stuck .logo{height:clamp(44px,4.8vw,64px)}
.nav{display:flex; gap:28px; margin-left:auto; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase}
.nav a{text-decoration:none; color:var(--chalk-2); position:relative; padding-block:6px}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--crimson-lift); transition:right var(--t-micro) var(--ease-io)}
.nav a:hover{color:var(--chalk)}
.nav a:hover::after{right:0}
@media(max-width:980px){.nav{display:none}}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:15px 26px; border:1px solid transparent; position:relative; overflow:hidden;
  transition:color var(--t-micro) var(--ease-io), border-color var(--t-micro) var(--ease-io)}
.btn span{position:relative; z-index:2}
.btn::before{content:""; position:absolute; inset:0; background:var(--crimson-lift);
  transform:translateY(101%); transition:transform var(--t-micro) var(--ease-io)}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:var(--crimson); color:#fff}
.btn-ghost{border-color:#484850; color:var(--chalk)}
.btn-ghost:hover{border-color:var(--crimson-lift); color:#fff}
.hdr .btn{min-height:40px; padding:11px 20px}
.row{display:flex; flex-wrap:wrap; gap:12px}

/* ============ HERO ============ */
.hero{position:relative; min-height:clamp(600px,88vh,940px); display:flex; align-items:center;
  padding-block:160px 96px; overflow:hidden}
.hero-bg{position:absolute; inset:-8% 0 -8% 0; will-change:transform}
.hero-media{position:absolute; inset:0; transition:transform 600ms var(--ease)}
.hero-media img,.hero-media video{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:58% 50%}
.hero-media video{opacity:0; object-position:50% 50%;
  transition:opacity 900ms var(--ease)}
.hero-media video.on{opacity:1}
.hero-scrim{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.56) 42%,rgba(11,11,12,.06) 78%),
    linear-gradient(to top,rgba(11,11,12,.82),transparent 50%),
    linear-gradient(to bottom,rgba(11,11,12,.58),transparent 22%)}
.hero-in{position:relative; z-index:3; width:100%}
.hero h1{font-size:clamp(38px,7.4vw,118px); margin:20px 0 0}
.hero h1 .red{color:var(--crimson-lift)}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln b{display:block; font-weight:400}
.motion .hero h1 .ln b{translate:0 102%; transition:translate var(--t-scene) var(--ease) 120ms}
.motion .loaded .hero h1 .ln b{translate:none}
.motion .hero h1 .ln:nth-child(2) b{transition-delay:240ms}
.hero .lede{margin-top:26px}
.hero .row{margin-top:36px}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:48px;
  padding-top:22px; border-top:1px solid rgba(244,241,236,.14)}
.hero-meta span{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); font-weight:700}
.cue{position:absolute; left:50%; transform:translateX(-50%); bottom:26px; z-index:3; display:flex; align-items:center;
  gap:12px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  font-weight:700}
.cue i{display:block; width:1px; height:36px; background:linear-gradient(var(--crimson-lift),transparent);
  animation:drop 2.1s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top}
  45%{transform:scaleY(1); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:bottom}
  100%{transform:scaleY(0); transform-origin:bottom}}
@media(max-width:700px){.cue{display:none}}


/* ============ SPLIT ============ */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(34px,5vw,84px); align-items:center}
.split h2{font-size:clamp(31px,3.9vw,57px); margin-top:16px}
.split .lede{margin-top:22px}
.split .lede+.lede{margin-top:16px}
.split figure{margin:0; position:relative}
.split figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.tag{position:absolute; left:0; bottom:0; background:var(--ink); color:var(--chalk);
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:13px 18px}
@media(max-width:880px){.split{grid-template-columns:1fr}}

/* ============ WHITEBOARD ============ */
.wb{background:var(--ink-2); border-block:1px solid var(--line)}
.wb h2{font-size:clamp(29px,3.5vw,48px); margin-top:14px}
.board{margin-top:48px; background:var(--ink-3); border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr)}
.blk{padding:34px 28px 38px; border-right:1px solid var(--line); position:relative}
.blk:last-child{border-right:0}
.blk::before{content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--crimson); transform-origin:left}
.motion .blk::before{transform:scaleX(0); transition:transform var(--t-el) var(--ease-io) calc(var(--dl,0ms) + 260ms)}
.motion .blk.in::before{transform:scaleX(1)}
.blk .mins{font-family:var(--display); font-size:34px; color:var(--crimson-lift); line-height:1;
  font-variant-numeric:tabular-nums}
.blk h3{font-size:21px; margin:14px 0 10px; letter-spacing:.03em}
.blk p{font-size:15px; color:#B0AAA3; line-height:1.55}
@media(max-width:540px){.board{grid-template-columns:1fr}
  .blk{border-right:0; border-bottom:1px solid var(--line)} .blk:last-child{border-bottom:0}}
.note{margin-top:22px; font-size:14px; color:var(--dim); max-width:62ch}

/* ============ PROGRAMS ============ */
.prog2{display:grid; grid-template-columns:1.3fr .7fr; gap:2px; background:var(--line)}
.prog2 article{position:relative; min-height:clamp(440px,54vw,620px); display:flex;
  align-items:flex-end; overflow:hidden; background:var(--ink)}
.prog2 .ph{position:absolute; inset:-8% 0 -8% 0; will-change:transform}
.prog2 .ph img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-scene) var(--ease)}
.prog2 article:hover .ph img{transform:scale(1.05)}
.prog2 article::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.96) 6%,rgba(11,11,12,.1) 66%)}
.pc{position:relative; z-index:2; padding:clamp(28px,3vw,48px); width:100%}
.prog2 h3{font-size:clamp(30px,3.2vw,48px); margin:12px 0 14px}
.prog2 p{font-size:16px; color:var(--chalk-2); max-width:40ch}
.go{display:inline-flex; align-items:center; gap:10px; margin-top:24px; min-height:44px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border-bottom:2px solid var(--crimson); padding-bottom:6px}
.go i{display:inline-block; transition:transform var(--t-micro) var(--ease-io); font-style:normal}
.go:hover i{transform:translateX(6px)}
@media(max-width:880px){.prog2{grid-template-columns:1fr}}

/* ============ HYBRID (light band: the only chalk ground on the page) ============ */
.hxb{background:var(--chalk); color:var(--ink); border-block:1px solid var(--chalk); overflow:hidden}
.hxb .eyebrow{color:var(--crimson)}
.hxb .lede{color:#45413C}
.hxb .btn-ghost{border-color:rgba(11,11,12,.3); color:var(--ink)}
.hxb ::selection{background:var(--ink); color:var(--chalk)}
.hx-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,76px); align-items:center}
.hxb h2{font-size:clamp(31px,3.9vw,57px)}
.hxb h2 em{font-style:normal; color:var(--crimson)}
.hxb .lede{margin-top:22px}
.hx-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.hx-strip figure{margin:0; overflow:hidden}
.hx-strip img,.hx-strip video{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.08)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.chips span{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(11,11,12,.24); color:var(--ink); padding:9px 13px}
@media(max-width:880px){.hx-grid{grid-template-columns:1fr}}

/* ============ GAME DAY MOSAIC ============ */
.ev{background:var(--ink)}
.ev-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(210px,22vw,340px);
  grid-auto-flow:dense; gap:6px; margin-top:52px}
.ev-grid figure{margin:0; position:relative; overflow:hidden; background:var(--ink-3)}
.ev-grid img{width:100%; height:100%; object-fit:cover}
.ev-grid figure:hover img{transform:scale(1.04)}
.ev-grid .veil>img{transition:transform var(--t-scene) var(--ease)}
.ev-grid .tall{grid-row:span 2}
.ev-grid .wide{grid-column:span 2}
.ev-grid figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 16px 14px;
  background:linear-gradient(to top,rgba(11,11,12,.82),transparent);
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--chalk)}
.ev-tile{background:var(--crimson)!important; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,2.2vw,32px)}
.ev-tile p{font-family:var(--display); text-transform:uppercase; line-height:1.02;
  font-size:clamp(24px,2.5vw,38px); color:#fff}
.ev-tile span{display:block; margin-top:14px; font-size:10.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.72)}
@media(max-width:760px){.ev-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw}}

.stats.fnl-stats{margin-top:40px; grid-template-columns:2fr 1fr}
.fnl-stats .stat-lead b{font-size:clamp(48px,6.4vw,96px); color:var(--crimson-lift)}
.fnl-stats .stat-lead span{max-width:none; font-size:12.5px}
@media(max-width:780px){.stats.fnl-stats{grid-template-columns:1fr 1fr} .fnl-stats .stat-lead{grid-column:1/-1}}
.fnl-stats .stat span{line-height:1.5}
.cal-head{margin-top:clamp(64px,7vw,104px)}
.cal-head h3{font-size:clamp(24px,2.6vw,36px); margin-top:12px}
.cal{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line);
  border:1px solid var(--line); margin-top:32px}
.mo{background:var(--ink-2); padding:22px 18px 26px; transition:background var(--t-micro) var(--ease-io)}
.mo:hover{background:var(--ink-3)}
.mo span{display:block; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--crimson-lift); padding-bottom:12px; border-bottom:1px solid var(--line)}
.mo h4{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(18px,1.5vw,22px);
  line-height:1.05; margin:14px 0 8px}
.mo p{font-size:14px; line-height:1.5; color:#B0AAA3}
.mo.hot{background:var(--crimson)}
.mo.hot span{color:#fff; border-bottom-color:rgba(255,255,255,.3)}
.mo.hot p{color:rgba(255,255,255,.85)}
@media(max-width:1000px){.cal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cal{grid-template-columns:repeat(2,1fr)}}

/* ============ PINNED GALLERY ============ */
.pin{position:relative; height:300vh; background:var(--ink-2); border-block:1px solid var(--line)}
.stage{position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden}
.stage-head{padding-inline:var(--gut); padding-bottom:26px}
.stage-head h2{font-size:clamp(27px,3vw,44px); margin-top:12px}
.track{display:flex; gap:clamp(14px,1.6vw,24px); padding-inline:var(--gut);
  will-change:transform; transform:translate3d(0,0,0)}
.shot{flex:0 0 clamp(230px,min(26vw,(100vh - 280px) * .75),560px)}
.shot img{width:100%; aspect-ratio:3/4; object-fit:cover}
.shot figcaption{margin-top:14px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim)}
@media(max-width:900px),(pointer:coarse){
  .pin{height:auto}
  .stage{position:static; height:auto; padding-block:clamp(70px,9vw,110px)}
  .track{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px;
    transform:none!important; -webkit-overflow-scrolling:touch}
  .shot{scroll-snap-align:start; flex:0 0 72vw}
}

/* ============ TRIPTYCH ============ */
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,32px); margin-top:52px}
.tri figure{margin:0}
.tri .veil{aspect-ratio:4/3}
.tri img{width:100%; height:100%; object-fit:cover}
.tri h3{font-size:23px; margin:22px 0 8px}
.tri p{font-size:15px; color:#B0AAA3}
@media(max-width:820px){.tri{grid-template-columns:1fr}}

/* ============ STEPS ============ */
.steps-s{background:var(--ink-2); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:48px}
.step{background:var(--ink-2); padding:clamp(30px,3vw,46px); transition:background var(--t-el) var(--ease)}
.step:hover{background:var(--ink-3)}
.step .n{font-family:var(--display); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--crimson-lift)}
.step h3{font-size:clamp(21px,2vw,28px); margin:18px 0 12px}
.step p{font-size:15px; color:#B0AAA3}
.steps.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.steps,.steps.two{grid-template-columns:1fr}}

/* ============ COACHES ============ */
.ch-head{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap}
.ch-head h2{font-size:clamp(29px,3.5vw,48px); margin-top:14px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr);
  gap:18px; overflow-x:auto; margin-top:44px; padding-bottom:14px; scroll-snap-type:x mandatory}
.coach{scroll-snap-align:start}
.coach .veil{aspect-ratio:1}
.coach img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);
  transition:filter var(--t-el) var(--ease), transform var(--t-scene) var(--ease)}
.coach:hover img{filter:grayscale(0)}
.coach h3{font-size:20px; margin:16px 0 4px}
.coach p{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700}

/* ============ STATS ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(18px,2vw,34px);
  border-top:1px solid var(--line); margin-top:56px}
.stat{position:relative; padding-block:clamp(26px,2.6vw,34px) clamp(16px,1.8vw,22px)}
.stat::before{content:""; position:absolute; top:-1px; left:0; width:46px; height:2px;
  background:var(--crimson)}
.stat b{display:block; font-family:var(--display); font-size:clamp(34px,4.4vw,64px);
  font-weight:400; line-height:.92; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:14px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-2)}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============ FINAL CTA ============ */
.cta{position:relative; min-height:clamp(500px,68vh,760px); display:flex; align-items:center; overflow:hidden}
.cta .ph{position:absolute; inset:-10% 0 -10% 0; will-change:transform}
.cta .ph img{width:100%; height:100%; object-fit:cover; object-position:62% 45%}
.cta::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 80% at 12% 50%,rgba(186,31,48,.2),transparent 60%),
    linear-gradient(92deg,rgba(11,11,12,.95),rgba(11,11,12,.6) 62%,rgba(11,11,12,.34))}
.cta .inner{position:relative; z-index:3; width:100%}
.cta h2{font-size:clamp(36px,5.6vw,86px); margin-top:18px}
.cta .lede{margin-top:22px}
.cta .row{margin-top:34px}

/* ============ FOOTER ============ */
footer{background:#07070A; border-top:1px solid var(--line);
  padding-block:clamp(60px,6vw,88px) 34px}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(30px,4vw,60px)}
.f-grid .logo{height:80px; width:auto; margin-bottom:24px}
.f-grid .fh{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin:0 0 18px}
.f-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.f-grid a{text-decoration:none; color:var(--chalk-2); font-size:15px;
  transition:color var(--t-micro) var(--ease-io)}
.f-grid a:hover{color:var(--crimson-lift)}
.f-grid address{font-style:normal; font-size:15px; color:#B0AAA3; line-height:1.8}
.f-bot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  margin-top:58px; padding-top:26px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6B665F}
@media(max-width:840px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.f-grid{grid-template-columns:1fr}}

/* ============ MOBILE THUMB BAR ============ */
.thumb{position:fixed; left:0; right:0; bottom:0; z-index:58; display:none;
  gap:10px; padding:12px var(--gut);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(11,11,12,.95); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.thumb .btn{flex:1}
@media(max-width:700px){.thumb{display:flex} footer{padding-bottom:110px}}


/* ============ SCHEDULE ============ */
.sched{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--line);
  border:1px solid var(--line); margin-top:40px}
.day{background:var(--ink-2); padding:22px 16px 26px; min-height:170px}
.day h3{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--chalk); margin:0 0 14px; padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.day ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.day li{font-size:15px; color:var(--chalk-2); font-variant-numeric:tabular-nums}
.day li b{display:block; font-family:var(--body); font-weight:700; font-size:9.5px;
  letter-spacing:.18em; color:var(--crimson-lift); margin-top:3px}
@media(max-width:900px){.sched{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.sched{grid-template-columns:repeat(2,1fr)} .day{min-height:0}}

/* ============ STORY ============ */
.story{background:var(--ink-2); border-block:1px solid var(--line)}
.story .split{grid-template-columns:.9fr 1.1fr}
.story figure img{aspect-ratio:1/1}
.story h2{font-size:clamp(29px,3.5vw,48px)}
.quote{margin:32px 0 0; padding:24px 0 0; border-top:1px solid var(--line)}
.quote p{font-family:var(--display); text-transform:uppercase; line-height:1.02;
  font-size:clamp(19px,2vw,28px); letter-spacing:.006em}
.quote cite{display:block; margin-top:14px; font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.third{margin-top:30px; border-left:2px solid var(--crimson); padding:4px 0 4px 20px}
.third p{font-size:15px; color:#B0AAA3; max-width:52ch}
@media(max-width:880px){.story .split{grid-template-columns:1fr}}

/* ============ ALIGNMENT ============
   Left for anything with reading length. Centered only for short section headers
   and the closing CTA. */
.hero-in .inner{text-align:left; max-width:1100px; margin-inline:0}
.hero .lede{margin-inline:0}
.hero .row,.hero-meta{justify-content:flex-start}
.cue{left:var(--gut); transform:none}

.sec-head{text-align:center; margin-inline:auto; max-width:740px}
.sec-head .lede{margin-inline:auto}
.stage-head{text-align:center}

.split,.hx-grid,.story .split{text-align:left}
.split .lede,.note,.prog2 p,.third p,.hxb .lede{margin-inline:0}
.split .row,.hxb .row,.chips{justify-content:flex-start}
.blk,.step,.pc,.stat,.day,.coach,.quote,.note,.shot figcaption{text-align:left}
.blk::before{transform-origin:left}
.third{border-left:2px solid var(--crimson); border-top:0; padding:4px 0 4px 20px; text-align:left}
.ch-head{flex-direction:row; align-items:flex-end; text-align:left}
.ch-head .lede{margin-inline:0}
.f-grid{text-align:left; justify-items:start}
.f-grid ul{align-items:flex-start}
.f-bot{justify-content:space-between}

.cta .inner{text-align:left; max-width:1100px; margin-inline:0}
.cta .lede{margin-inline:0}
.cta .row{justify-content:flex-start}
@media(max-width:820px){.ch-head{flex-direction:column; align-items:flex-start}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue i{animation:none}
  .rise,.veil>img,.hero h1 .ln b{transform:none!important; translate:none!important; transition:none!important}
}


/* ================================================================
   MULTI-PAGE ADDITIONS (shared by every page)
   ================================================================ */

/* nav: seven short labels, full nav from 1100px, menu button below */
.nav{gap:22px; font-size:11.5px; letter-spacing:.12em}
.nav a[aria-current="page"]{color:var(--chalk)}
.nav a[aria-current="page"]::after{right:0}
@media(max-width:1100px){.nav{display:none}}
@media(min-width:1101px){.menu-btn{display:none!important}}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; min-width:44px; padding:0 4px 0 14px; margin-left:auto; background:none; border:0;
  color:var(--chalk); font:700 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; cursor:pointer}
.menu-btn i{position:relative; display:block; width:22px; height:2px; background:currentColor;
  transition:background var(--t-micro) var(--ease-io)}
.menu-btn i::before,.menu-btn i::after{content:""; position:absolute; left:0; width:22px; height:2px;
  background:currentColor; transition:transform var(--t-micro) var(--ease-io)}
.menu-btn i::before{top:-7px} .menu-btn i::after{top:7px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1100px){.hdr .btn{margin-left:0}}
@media(max-width:560px){.hdr .btn{display:none} .menu-btn .lbl{display:none}}

.mnav{position:fixed; inset:0; z-index:54; background:var(--ink); display:flex; flex-direction:column;
  justify-content:center; padding:120px var(--gut) 60px; gap:4px;
  opacity:0; visibility:hidden; transition:opacity var(--t-el) var(--ease), visibility 0s linear var(--t-el)}
.menu-open .mnav{opacity:1; visibility:visible; transition:opacity var(--t-el) var(--ease)}
.mnav a{font-family:var(--display); text-transform:uppercase; text-decoration:none;
  font-size:clamp(32px,8vw,58px); line-height:1.12; color:var(--chalk)}
.mnav a[aria-current="page"]{color:var(--crimson-lift)}
.mnav .mnav-meta{margin-top:28px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.mnav .mnav-meta a{font:inherit; color:var(--chalk-2)}
.menu-open{overflow:hidden}

/* ---------- page hero (every inner page) ---------- */
.phero{position:relative; min-height:clamp(440px,64vh,660px); display:flex; align-items:flex-end;
  padding-block:180px clamp(56px,7vw,100px); overflow:hidden; background:var(--ink)}
.phero .ph{position:absolute; inset:-8% 0 -8% 0; will-change:transform}
.phero .ph img{width:100%; height:100%; object-fit:cover}
.phero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.6) 46%,rgba(11,11,12,.2) 80%),
    linear-gradient(to top,rgba(11,11,12,.9),transparent 55%),
    linear-gradient(to bottom,rgba(11,11,12,.6),transparent 26%)}
.phero .inner{position:relative; z-index:3; width:100%; max-width:1100px; margin-inline:0}
.phero h1{font-size:clamp(42px,6.6vw,104px); margin-top:18px}
.phero h1 .red{color:var(--crimson-lift)}
.phero .lede{margin-top:22px; margin-inline:0}
.crumb{display:flex; gap:10px; align-items:center}
.crumb a{text-decoration:none; color:var(--dim)} .crumb a:hover{color:var(--chalk)}
.crumb span{color:var(--crimson-lift)}

/* ---------- generic content helpers ---------- */
.band-alt{background:var(--ink-2); border-block:1px solid var(--line)}
.prose p+p{margin-top:16px}
.prose p{color:var(--chalk-2); font-size:clamp(16px,1.25vw,18px); line-height:1.7; max-width:62ch}
.h2{font-size:clamp(29px,3.5vw,48px); margin-top:14px}
.sec-left{max-width:760px}
.sec-left .lede{margin-top:20px}
.pull{font-family:var(--display); text-transform:uppercase; line-height:1.04;
  font-size:clamp(22px,2.3vw,32px); border-left:2px solid var(--crimson); padding:4px 0 4px 22px; margin-top:34px; max-width:28ch}

/* four-part class structure */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps.four{grid-template-columns:1fr}}

/* video figure */
.vfig{margin:0; position:relative; overflow:hidden; background:var(--ink-3)}
.vfig video{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}

/* ---------- timeline (about) ---------- */
.tl{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; background:var(--line); border:1px solid var(--line)}
.tl li{background:var(--ink-2); padding:26px 22px 30px}
.tl b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(30px,3vw,44px);
  line-height:1; color:var(--crimson-lift); font-variant-numeric:tabular-nums}
.tl h3{font-size:18px; margin:14px 0 8px; letter-spacing:.02em}
.tl p{font-size:14.5px; color:#B0AAA3; line-height:1.55}
@media(max-width:1000px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tl{grid-template-columns:1fr}}

/* ---------- commitments (about) ---------- */
.clist{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px,4vw,64px); counter-reset:c}
.clist li{counter-increment:c; position:relative; padding:24px 0 24px 64px; border-top:1px solid var(--line)}
.clist li::before{content:counter(c,decimal-leading-zero); position:absolute; left:0; top:22px;
  font-family:var(--display); font-size:28px; line-height:1; color:var(--crimson-lift)}
.clist h3{font-size:20px; letter-spacing:.02em; margin-bottom:8px}
.clist p{font-size:15px; color:#B0AAA3; line-height:1.6; max-width:52ch}
@media(max-width:820px){.clist{grid-template-columns:1fr}}
.tabs{display:flex; gap:8px; margin-top:36px; flex-wrap:wrap}
.tabs button{min-height:44px; padding:0 20px; background:none; border:1px solid #484850; color:var(--chalk-2);
  font:700 11.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:all var(--t-micro) var(--ease-io)}
.tabs button[aria-selected="true"]{background:var(--crimson); border-color:var(--crimson); color:#fff}
.tabpanel[hidden]{display:none}

/* ---------- team (meet the team) ---------- */
.team{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);
  border:1px solid var(--line); margin-top:52px}
.member{display:grid; grid-template-columns:minmax(150px,.8fr) 1.2fr; gap:clamp(20px,2.4vw,34px);
  background:var(--ink); padding:clamp(22px,2.4vw,34px); align-items:start}
.member .veil{aspect-ratio:1}
.member img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);
  transition:filter var(--t-el) var(--ease), transform var(--t-scene) var(--ease)}
.member:hover img{filter:grayscale(0)}
.member .role{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--crimson-lift)}
.member h2{font-size:clamp(24px,2.2vw,32px); margin:10px 0 14px}
.member p{font-size:15px; color:#B8B2AA; line-height:1.65}
.member p.soon{color:var(--dim); font-style:italic}
.member.lead{grid-column:1/-1; grid-template-columns:minmax(200px,.55fr) 1.45fr}
@media(max-width:980px){.team{grid-template-columns:1fr} .member.lead{grid-template-columns:minmax(150px,.8fr) 1.2fr}}
@media(max-width:560px){.member,.member.lead{grid-template-columns:1fr; gap:18px; padding:18px 18px 26px} .member .veil{max-width:none} .member h2{margin:8px 0 10px}}
.member.lit img,.coach.lit img{filter:grayscale(0)}
.member img,.coach img{transition:filter .9s var(--ease), transform var(--t-scene) var(--ease)}

/* ---------- plans (rates) ---------- */
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);
  border:1px solid var(--line); margin-top:52px}
.plan{position:relative; background:var(--ink-2); padding:clamp(26px,2.4vw,36px); display:flex; flex-direction:column}
.plan::before{content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:transparent}
.plan.hot::before{background:var(--crimson-lift)}
.plan .tag2{position:absolute; top:18px; right:18px; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; background:var(--crimson); padding:6px 9px}
.plan h2{font-size:clamp(22px,1.9vw,28px); letter-spacing:.02em}
.plan .price{margin-top:22px; font-family:var(--display); font-size:clamp(44px,4.2vw,62px); line-height:.95;
  font-variant-numeric:tabular-nums}
.plan .per{margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.plan ul{list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.plan li{position:relative; padding-left:20px; font-size:14.5px; color:#B8B2AA; line-height:1.5}
.plan li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--crimson-lift)}
.plan .fine{margin-top:auto; padding-top:22px; font-size:13px; color:var(--dim)}
.plan .btn{margin-top:24px; width:100%}
@media(max-width:1080px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plans{grid-template-columns:1fr}}

/* ---------- visit ---------- */
.addr{font-family:var(--display); text-transform:uppercase; font-size:clamp(30px,3.6vw,52px); line-height:1.02; margin-top:14px}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); margin-top:40px}
.facts div{background:var(--ink-2); padding:24px 22px}
.facts h3{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--dim); margin-bottom:10px}
.facts p,.facts a{font-size:16px; color:var(--chalk); text-decoration:none}
.facts a:hover{color:var(--crimson-lift)}
@media(max-width:760px){.facts{grid-template-columns:1fr}}
.gal{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:44px}
.gal figure{margin:0}
.gal img{width:100%; aspect-ratio:3/4; object-fit:cover}
.gal figcaption{margin-top:12px; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- contact form ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px}
.form .full{grid-column:1/-1}
.form label{display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:8px}
.form .req{color:var(--crimson-lift); margin-left:.3em; font-size:1.4em; line-height:0; vertical-align:-.12em}
.form input,.form select,.form textarea{width:100%; min-height:52px; padding:14px 16px; background:var(--ink-2);
  border:1px solid var(--line); color:var(--chalk); font:16px/1.4 var(--body); border-radius:0;
  transition:border-color var(--t-micro) var(--ease-io)}
.form textarea{min-height:150px; resize:vertical}
.form select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--chalk-2) 50%),linear-gradient(135deg,var(--chalk-2) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px; background-size:6px 6px; background-repeat:no-repeat}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--crimson-lift)}
.form .btn{justify-self:start; border:0; cursor:pointer}
.form-note{font-size:13px; color:var(--dim); margin-top:4px}
.form-ok{display:none; margin-top:18px; padding:16px 18px; border-left:2px solid var(--crimson-lift); background:var(--ink-2); color:var(--chalk-2); font-size:15px}
.form-ok.on{display:block}
@media(max-width:620px){.form{grid-template-columns:1fr}}
.side{border-left:1px solid var(--line); padding-left:clamp(24px,3vw,48px)}
.side h3{font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--dim); margin:0 0 10px}
.side p,.side a{font-size:16px; color:var(--chalk); text-decoration:none; line-height:1.7}
.side a:hover{color:var(--crimson-lift)}
.side div+div{margin-top:28px}
@media(max-width:880px){.side{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:32px}}

/* small closing CTA band used on inner pages */
.cta.slim{min-height:clamp(420px,54vh,580px)}

/* lets the script read the compact header height instantly */
.hdr.measuring,.hdr.measuring *{transition:none!important}

/* ---------- SEO / accessibility pass (2026-09-23) ---------- */
.step .n, .mo span, .day li b{color:#E8485B}          /* small red labels: 4.9:1 on ink, was 3.8:1 */
.ev-tile span{color:#F5DADD}                           /* was 3.9:1 on crimson */
.f-bot{color:#948E86}                                  /* was 3.5:1 */
.f-grid p.fh{margin:0 0 18px}
.day h3{line-height:1.2}
.f-serve{margin:18px 0 0; max-width:34ch; font-size:13px; line-height:1.6; color:#948E86}
.hero-in .eyebrow{margin-bottom:18px}
.faq{max-width:880px; margin-top:34px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px;
  align-items:center; padding:22px 4px; font:600 18px/1.35 var(--body); color:var(--chalk)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:0 0 auto; font:300 30px/1 var(--body); color:var(--crimson-lift);
  transition:transform var(--t-micro) var(--ease-io)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq .a{padding:0 4px 24px; max-width:70ch; color:var(--chalk-2); font-size:16px; line-height:1.7}
.faq .a p+p{margin-top:10px}
/* photo-free CTA band (inner pages) */
.cta.plain{min-height:clamp(380px,52vh,560px); background:radial-gradient(120% 140% at 88% 50%, #8e1624 0%, #3a0a10 38%, #0b0b0c 72%)}
.cta.plain::after{background:url("../img/dc-mark.png") no-repeat right clamp(16px,6vw,110px) center/auto 78%; opacity:.07; filter:grayscale(1) brightness(3)}
.gal.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.gal.g3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gal.g3{grid-template-columns:1fr 1fr}.gal.g3 figure:last-child{grid-column:span 2}.gal.g3 figure:last-child img{aspect-ratio:4/3}}

/* ---------- condensed homepage on phones ---------- */
.mob-only{display:none}
@media(max-width:700px){
  .mob-only{display:block}
  #inside{display:none}                                   /* "Where you train" track: desktop only */
  #start .sched, #start .sched + .eyebrow, #start p.eyebrow[style]{display:none}
  /* swipe rows instead of tall stacks */
  .board, .steps.two, #start .steps, .cal{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-right:calc(-1 * var(--gut, 20px))}
  .board::-webkit-scrollbar, .steps.two::-webkit-scrollbar, #start .steps::-webkit-scrollbar, .cal::-webkit-scrollbar{display:none}
  .board > .blk, .steps.two > .step, #start .steps > .step{flex:0 0 80%; scroll-snap-align:start}
  .cal > .mo{flex:0 0 62%; scroll-snap-align:start}
  .swipe-hint{display:block; margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
  /* events: five photos instead of eight */
  .ev-grid figure:nth-child(5), .ev-grid figure:nth-child(6), .ev-grid figure:nth-child(7){display:none}
  .story figure img{aspect-ratio:4/3}
}


/* ================= DILIGENCE GUIDE (chat) ================= */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.chat-fab{position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:70;
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 20px 0 16px;
  background:var(--crimson); color:#fff; border:0; border-radius:999px; cursor:pointer;
  font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:background var(--t-micro) var(--ease-io), transform var(--t-micro) var(--ease-io)}
.chat-fab:hover{background:var(--crimson-lift); transform:translateY(-2px)}
.chat-fab svg{width:20px; height:20px; fill:currentColor}
.chat-open .chat-fab{display:none}
@media(max-width:700px){
  .chat-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px)); right:14px; padding:0 16px; min-height:48px}
  .chat-fab span{display:none}
}
.menu-open .chat-fab{display:none}

.chat{position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:71;
  width:min(400px,calc(100vw - 32px)); height:min(620px,calc(100vh - 120px)); display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:chatIn var(--t-el) var(--ease)}
.chat[hidden]{display:none}
@keyframes chatIn{from{transform:translateY(16px); opacity:0}to{transform:none; opacity:1}}
@media(max-width:700px){.chat{inset:0; width:auto; height:auto; border:0; z-index:80}}

.chat-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 16px;
  border-bottom:1px solid var(--line); border-top:2px solid var(--crimson)}
.chat-k{font-family:var(--display); text-transform:uppercase; font-size:22px; line-height:1}
.chat-s{margin-top:6px; font-size:13px; color:var(--dim)}
.chat-x{min-width:44px; min-height:44px; margin:-8px -8px 0 0; background:none; border:0; color:var(--chalk-2);
  font-size:28px; line-height:1; cursor:pointer}
.chat-x:hover{color:#fff}

.chat-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain}
.msg{max-width:88%; padding:12px 14px; font-size:15px; line-height:1.55}
.msg p+p,.msg p+ul,.msg ul+p{margin-top:8px}
.msg ul{margin:6px 0 0; padding-left:18px}
.msg li+li{margin-top:4px}
.msg a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.msg.bot{align-self:flex-start; background:var(--ink-3); border:1px solid var(--line); color:var(--chalk)}
.msg.me{align-self:flex-end; background:var(--crimson); color:#fff}
.typing{display:flex; gap:5px; padding:4px 0}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--dim); animation:dot 1.1s infinite var(--ease-io)}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3; transform:none}40%{opacity:1; transform:translateY(-3px)}}

.chat-chips{display:flex; flex-wrap:wrap; gap:8px}
.chat-chips button{min-height:40px; padding:9px 12px; background:none; border:1px solid #484850; color:var(--chalk-2);
  font:500 13.5px/1.3 var(--body); text-align:left; cursor:pointer; transition:all var(--t-micro) var(--ease-io)}
.chat-chips button:hover{border-color:var(--crimson-lift); color:#fff}

.chat-f{display:flex; gap:8px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--line)}
.chat-f textarea{flex:1; resize:none; min-height:46px; max-height:120px; padding:12px 14px; background:var(--ink);
  border:1px solid var(--line); color:var(--chalk); font:16px/1.4 var(--body); border-radius:0}
.chat-f textarea:focus{outline:none; border-color:var(--crimson-lift)}
.chat-send{flex:0 0 46px; height:46px; display:grid; place-items:center; background:var(--crimson); border:0; color:#fff; cursor:pointer}
.chat-send:hover{background:var(--crimson-lift)} .chat-send:disabled{opacity:.5; cursor:default}
.chat-send svg{width:20px; height:20px; fill:currentColor}
.chat-foot{padding:0 14px 14px; font-size:11.5px; line-height:1.45; color:var(--dim)}
@media(prefers-reduced-motion:reduce){.chat{animation:none} .typing i{animation:none}}

/* ---------- playful skin: rounded, warm, friendly ---------- */
.chat-fab{border-radius:999px; font-family:var(--display); font-weight:400; letter-spacing:.04em; font-size:17px;
  padding:0 22px 0 18px; animation:fabHi 2.6s var(--ease) 1.2s 2 both}
@keyframes fabHi{0%,100%{transform:none}10%{transform:translateY(-6px) rotate(-3deg)}20%{transform:none}28%{transform:translateY(-3px) rotate(2deg)}36%{transform:none}}
.chat{border-radius:22px; overflow:hidden; border:0; background:var(--chalk); color:var(--ink);
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
@media(max-width:700px){.chat{border-radius:0}}
.chat-h{background:var(--crimson); color:#fff; border:0; padding:16px 16px 16px 18px; align-items:center;
  position:relative}
.chat-h::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:12px;
  background:radial-gradient(circle at 10px -2px, var(--crimson) 10px, transparent 11px) 0 0/20px 12px repeat-x}
.chat-id{display:flex; align-items:center; gap:12px}
.chat-av{flex:0 0 44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff;
  color:var(--crimson); font:400 26px/1 var(--display); transform:rotate(-6deg); box-shadow:0 3px 0 rgba(0,0,0,.18)}
.chat-k{font-size:24px; letter-spacing:.02em; color:#fff}
.chat-s{color:rgba(255,255,255,.85); margin-top:4px}
.chat-x{color:#fff; margin:0; border-radius:50%; background:rgba(255,255,255,.14)}
.chat-x:hover{background:rgba(255,255,255,.26)}
.chat-log{background:var(--chalk); padding:26px 16px 16px}
.msg{border-radius:18px; font-size:15px}
.msg.bot{background:#fff; border:0; color:#1d1b19; border-bottom-left-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.msg.me{background:var(--ink); color:#fff; border-bottom-right-radius:6px}
.msg a{color:var(--crimson)} .msg.me a{color:#fff}
.chat-try{font-size:12.5px; font-weight:700; color:#8a837b; margin:4px 0 -4px 4px}
.chat-chips button{border-radius:999px; border:1.5px solid rgba(186,31,48,.35); background:#fff; color:var(--crimson);
  font-weight:600; padding:9px 14px}
.chat-chips button:hover{background:var(--crimson); border-color:var(--crimson); color:#fff; transform:translateY(-1px)}
.typing i{background:#b3aca4}
.chat-f{background:var(--chalk); border-top:1px solid rgba(0,0,0,.08); padding:12px 12px 8px}
.chat-f textarea{border-radius:999px; background:#fff; border:1.5px solid rgba(0,0,0,.1); color:var(--ink); padding:12px 18px}
.chat-f textarea::placeholder{color:#9a938b}
.chat-f textarea:focus{border-color:var(--crimson)}
.chat-send{border-radius:50%; flex-basis:46px}
.chat-send:hover{transform:rotate(-12deg)}
.chat-foot{background:var(--chalk); color:#8a837b; text-align:center; padding:2px 14px 12px}
@media(prefers-reduced-motion:reduce){.chat-fab{animation:none}}
.chat-av img{display:block; height:30px; width:auto}

.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .btn:disabled{opacity:.6;cursor:wait}


/* ================================================================
   MOTION LAYER (2026-09-25)
   Rules: only transform, translate, scale, opacity, filter and clip-path move, so nothing
   changes layout and every link lands where it did. Every starting state sits behind html.motion.
   ================================================================ */

/* ---- header height for in-page jumps (set by the script, compact header size) ---- */
:root{--hdr:72px}
html{scroll-padding-top:var(--hdr)}

/* ---- small labels: a short rule, drawn before the text ---- */
p.eyebrow:not(.crumb)::before{content:""; display:inline-block; width:22px; height:1.5px; margin-right:12px;
  vertical-align:.32em; background:var(--crimson-lift)}
.hxb p.eyebrow::before{background:var(--crimson)}
/* the observed label stays unclipped (a zero-area element never reports as visible); the text rides in an inner span */
p.eyebrow:not(.crumb)::before{transform-origin:left}
.motion p.eyebrow:not(.crumb)::before{transform:scaleX(0); transition:transform .5s var(--ease-io)}
.motion p.eyebrow:not(.crumb).in::before{transform:scaleX(1)}
/* an animation rather than a transition, so the clip is gone afterward: a label that wraps to two lines
   is an inline box in two pieces, and any clip-path left on it hides the second line */
@keyframes ebIn{from{clip-path:inset(-3px 100% -3px 0)} to{clip-path:inset(-3px 0 -3px 0)}}
.motion p.eyebrow .eb{clip-path:inset(-3px 100% -3px 0)}
.motion p.eyebrow.in .eb{clip-path:none; animation:ebIn .8s var(--ease-io) .28s backwards}

/* ---- section headings: word by word, each word out of its own mask ---- */
.motion .words .wd{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em}
.motion .words .wd>span{display:inline-block; translate:0 110%;
  transition:translate .75s var(--ease) calc(var(--w,0) * 55ms + 60ms)}
.motion .words.in .wd>span{translate:none}
.motion .phero h1.words .wd>span{transition-delay:calc(var(--w,0) * 70ms + 140ms); transition-duration:1s}
.motion .loaded .phero h1.words .wd>span{translate:none}

/* ---- photos: clip wipe upward while the image settles inside the frame ---- */
/* the clip sits on the photo, not the observed frame, so the frame always reports when it is on screen */
.motion .veil>img,.motion .veil>video{scale:1.1; clip-path:inset(100% 0 0 0);
  transition:clip-path 1.05s var(--ease-io) var(--dl,0ms), scale 1.5s var(--ease) var(--dl,0ms),
             transform var(--t-scene) var(--ease), filter .9s var(--ease)}
.motion .veil.in>img,.motion .veil.in>video{scale:1; clip-path:inset(0 0 0 0)}
/* desktop only: a little parallax inside the frame, with overscan so no edge ever shows */
.motion .veil.px>img{scale:1.18}
.motion .veil.px.in>img{scale:1.09}

/* ---- things that arrive together come in with a short stagger ---- */
.motion .stg>*{opacity:0; translate:0 18px;
  transition:opacity var(--t-el) var(--ease) var(--dl,0ms), translate var(--t-el) var(--ease) var(--dl,0ms),
             background-color var(--t-micro) var(--ease-io)}
.motion .stg>.in{opacity:1; translate:none}
.motion .step{transition:opacity var(--t-el) var(--ease) var(--dl,0ms), translate var(--t-el) var(--ease) var(--dl,0ms),
  background-color var(--t-el) var(--ease)}
/* the class schedule assembles: each day, then its class times one after another */
.motion .sched .day li{opacity:0; translate:0 8px;
  transition:opacity .5s var(--ease) calc(var(--dl,0ms) + var(--j,0) * 70ms + 220ms),
             translate .5s var(--ease) calc(var(--dl,0ms) + var(--j,0) * 70ms + 220ms)}
.motion .sched .day.in li{opacity:1; translate:none}
/* the timeline draws its rule, then the years fall in */
.tl{position:relative}
.tl::before{content:""; position:absolute; z-index:1; left:-1px; right:-1px; top:-1px; height:2px;
  background:var(--crimson-lift); transform-origin:left}
.motion .tl::before{transform:scaleX(0); transition:transform 1.2s var(--ease-io)}
.motion .tl.in::before{transform:scaleX(1)}

/* ---- the key line lights up word by word as it scrolls through ---- */
.glow-line em{font-style:normal; color:var(--crimson-lift)}
.stat b .cu{font-style:normal}
/* unlit words stay readable (4.5:1 or better); lit words turn full color */
.motion .glow-line .gw{color:var(--dim); transition:color .4s linear}
.motion .glow-line .gw.on{color:var(--chalk)}
.motion .glow-line em .gw.on{color:var(--crimson-lift)}
@media(max-width:999px){.glow-line em,.motion .glow-line em .gw.on{color:#E8485B}}

/* ---- home hero: load sequence ---- */
.motion .hero-media{scale:1.09; transition:scale 2.4s var(--ease), transform 600ms var(--ease)}
.motion .loaded .hero-media{scale:1}
.motion .hero .lede,.motion .hero .row,.motion .hero .cue{opacity:0; translate:0 14px;
  transition:opacity .8s var(--ease), translate .8s var(--ease)}
.motion .loaded .hero .lede{opacity:1; translate:none; transition-delay:.62s}
.motion .loaded .hero .row{opacity:1; translate:none; transition-delay:.8s}
.motion .loaded .hero .cue{opacity:1; translate:none; transition-delay:1.05s}

/* ---- inner page heroes: same sequence ---- */
.motion .phero .ph img{scale:1.08; transition:scale 2.2s var(--ease)}
.motion .loaded .phero .ph img{scale:1}
.motion .phero .crumb,.motion .phero .lede{opacity:0; translate:0 12px;
  transition:opacity .8s var(--ease), translate .8s var(--ease)}
.motion .loaded .phero .crumb{opacity:1; translate:none; transition-delay:.05s}
.motion .loaded .phero .lede{opacity:1; translate:none; transition-delay:.6s}

/* ---- Visit Us: the lit sign powers on ---- */
@keyframes powerOn{
  0%{filter:brightness(.2) saturate(.6)} 9%{filter:brightness(.95) saturate(1)} 13%{filter:brightness(.28) saturate(.6)}
  21%{filter:brightness(1.08) saturate(1)} 25%{filter:brightness(.5) saturate(.8)} 38%{filter:brightness(1) saturate(1)}
  100%{filter:brightness(1) saturate(1)}}
.motion .phero.power .ph img{animation:powerOn 1.9s linear .45s both}

/* ---- signature: Friday Night Lights. The event photos wait in the dark, then switch on one at a time,
        each like an overhead light: one soft blink as it strikes, then a warm ramp up to full ---- */
@keyframes lightsOn{
  0%{filter:brightness(.14) saturate(.4); animation-timing-function:linear}
  9%{filter:brightness(.62) saturate(.75); animation-timing-function:linear}
  15%{filter:brightness(.3) saturate(.5); animation-timing-function:cubic-bezier(.3,.6,.2,1)}
  100%{filter:brightness(1) saturate(1)}}
.motion .ev-grid .veil>img{clip-path:none}
.motion .ev-grid .veil>img{filter:brightness(.14) saturate(.4)}
.motion .ev-grid.in .veil>img{animation:lightsOn 1.4s var(--bank,0ms) both}
.motion .ev-grid .ev-tile{opacity:0; scale:.96; transition:opacity .6s var(--ease) var(--bank,0ms), scale .8s var(--ease) var(--bank,0ms)}
.motion .ev-grid.in .ev-tile{opacity:1; scale:1}

/* ---- desktop hero: a live readout of the next class on the schedule ---- */
.hud-read{display:none}
@media(min-width:900px) and (pointer:fine){
  .hud-read:not(:empty){display:inline-flex; gap:26px; margin-left:22px; padding-left:22px;
    border-left:1px solid rgba(244,241,236,.22)}
  .hud-read b{font-weight:700; color:var(--chalk); margin-left:8px; font-variant-numeric:tabular-nums}
}

/* phones and tablets: the same readout sits under the hero buttons */
.next-m{display:none}
.next-m:not(:empty){display:flex; align-items:flex-start; gap:12px; margin-top:24px; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-2); line-height:1.3}
.next-m:not(:empty)::before{content:""; flex:0 0 7px; height:7px; margin-top:4px; border-radius:50%; background:var(--crimson-lift)}
.next-m b{display:block; margin-top:6px; font-size:14px; letter-spacing:.14em; font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
@media(min-width:900px) and (pointer:fine){.next-m:not(:empty){display:none}}
.motion .hero .next-m{opacity:0; translate:0 14px; transition:opacity .8s var(--ease), translate .8s var(--ease)}
.motion .loaded .hero .next-m{opacity:1; translate:none; transition-delay:.95s}

/* ---- pointer-only extras ---- */
.motion .btn{transition:color var(--t-micro) var(--ease-io), border-color var(--t-micro) var(--ease-io),
  translate .5s var(--ease), scale .14s var(--ease-io)}
.motion .btn:active{scale:.965}
.glow-host{position:relative; overflow:hidden}
.glow-host>.inner{position:relative; z-index:2}
.glow{position:absolute; left:0; top:0; z-index:1; width:620px; height:620px; margin:-310px 0 0 -310px;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(closest-side,rgba(216,41,62,.17),rgba(216,41,62,.06) 55%,rgba(216,41,62,0))}
.glow.on{opacity:1}
.cta .glow{z-index:2}

/* ---- micro-interactions ---- */
@keyframes pop{0%{scale:1} 40%{scale:1.04} 100%{scale:1}}
.motion .pop{animation:pop .34s var(--ease)}
@keyframes okIn{from{opacity:0; translate:0 10px} to{opacity:1; translate:none}}
.motion .form-ok.on{animation:okIn .6s var(--ease) both}

/* ---- phones: the bottom buttons slide up once the hero is behind you ---- */
@media(max-width:700px){
  .motion .thumb{translate:0 110%; transition:translate .55s var(--ease)}
  .motion.thumb-up .thumb{translate:none}
  .motion .chat-fab{transition:background var(--t-micro) var(--ease-io), transform var(--t-micro) var(--ease-io),
    translate .55s var(--ease)}
  .motion:not(.thumb-up) .chat-fab{translate:0 72px}
}

/* ============ 2026-09-28: CFD team round 2 ============ */
/* three programs, least to most intense */
.prog3{grid-template-columns:repeat(3,1fr)}
.prog3 article{min-height:clamp(460px,44vw,640px)}
.prog3 h3{font-size:clamp(30px,2.8vw,44px)}
@media(max-width:880px){.prog3{grid-template-columns:1fr} .prog3 article{min-height:clamp(380px,92vw,520px)} .prog3 .ph{inset:-14% 0}}

/* "Where you train": on screens wide enough to show every photo, the row sits still and centered */
.pin.fit{height:auto}
.pin.fit .stage{position:static; height:auto; padding-block:clamp(80px,8vw,130px)}
.pin.fit .track{justify-content:safe center; overflow-x:auto; scrollbar-width:none; transform:none!important}

/* StreamFit feature under the community line */
.appx{margin-top:30px; display:flex; gap:24px; align-items:center;
  border-left:2px solid var(--crimson); padding:4px 0 4px 20px; text-align:left}
.appx-qr{flex:0 0 auto; display:block; width:132px; padding:0; background:#fff; line-height:0}
.appx-qr img{width:100%; height:auto; image-rendering:pixelated}
.appx-k{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#E8485B}
.appx h3{font-size:clamp(24px,2.2vw,32px); margin:6px 0 8px}
.appx-copy > p:not(.appx-k){font-size:15px; color:#B0AAA3; max-width:52ch; margin:0}
.appx .appx-scan{margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim)}
.appx-btn{display:none; margin-top:18px}
@media(max-width:900px),(pointer:coarse){
  .appx-qr, .appx .appx-scan{display:none}
  .appx-btn{display:inline-flex}
}

/* the event calendar says which year it is */
.cal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cal-yr{font-family:var(--display); font-size:clamp(46px,6vw,88px); line-height:.85; color:var(--crimson-lift);
  letter-spacing:.01em; text-align:right; margin:0}
.cal-yr span{display:block; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px; font-family:var(--body)}
@media(max-width:700px){.cal-head{align-items:flex-start; flex-direction:column; gap:14px} .cal-yr{text-align:left; font-size:52px}}

/* Quad Cardio band (dark), sits above the light Hyrox band: photos left, words right */
.qcb{background:var(--ink); border-top:1px solid var(--line)}
.qx-grid{grid-template-columns:1.08fr .92fr}
.qcb h2{font-size:clamp(31px,3.9vw,57px)}
.qcb h2 em{font-style:normal; color:var(--crimson-lift)}
.qcb .lede{margin-top:22px}
.qcb .chips span{border-color:#484850; color:var(--chalk)}
.qx-fine{margin-top:18px; font-size:14px; color:var(--dim)}
@media(max-width:880px){.qx-grid{grid-template-columns:1fr} .qx-grid .hx-strip{order:2}}
.qcb .lede{margin-inline:0} .qcb .row{justify-content:flex-start} .qx-grid{text-align:left}

/* Powered by preflight.art credit, under the copyright line */
.f-own{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.pf-credit{display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none;
  font-size:12px; letter-spacing:.04em; text-transform:none;
  transition:color var(--t-micro) var(--ease-io)}
.pf-credit img{width:18px; height:18px; flex:none}
.pf-credit:hover{color:var(--chalk-2)}