/* The gym itself: rubber-floor black bands frame chalk-white rooms; class times sit on a clean grid; prices on plain paper
   cards; the logo red is used only for "Book my free class". Phone first, with a pinned booking bar.
   Spacing uses one scale (4, 8, 12, 16, 24, 32, 48, 64, 96 px) so every gap is a step on it. */
:root{
  color-scheme: light;
  --floor:#141415; --floor-2:#232427; --board:#f5f5f2; --paper:#ffffff; --ink:#18191b; --steel:#54575d;
  --rule:#dcdcd7; --frame:#b8bbc0; --red:#d7262e; --red-dark:#b01c23; --chalk:#f4f4f1; --chalk-2:#c3c5c9;
  --marker:#1c3d8c; --hl:#ffe36b; --today:#e7edfb;
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --sans:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --w:1120px; --gut:16px; --r:8px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}
@media (min-width:720px){:root{--gut:28px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--board);color:var(--ink);font:17px/1.6 var(--sans);padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (min-width:860px){body{padding-bottom:0}}
img{max-width:100%;height:auto}
a{color:var(--marker);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #2b6cff;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--paper);color:var(--ink);padding:10px 14px}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{text-wrap:balance}
h2{margin:0 0 var(--s4);font:800 clamp(32px,6.4vw,46px)/1.02 var(--display);letter-spacing:.005em}
h3{margin:0 0 var(--s2);font:800 22px/1.15 var(--display);letter-spacing:.01em}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
.measure{max-width:62ch}
.eyebrow{margin:0 0 var(--s3);font:700 13.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.dark .eyebrow{color:var(--chalk-2)}
.head{max-width:46em;margin-bottom:var(--s6)}
.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* review aids (preview only) */
.draftbar{background:var(--hl);color:#2a2400;font:600 14px/1.45 var(--sans)}
.draftbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;padding-block:var(--s2)}
.draftbar b{font-weight:700}
.draftbar button,.draftbar a{font:700 13px/1 var(--sans);color:#2a2400;background:transparent;border:1.5px solid #2a2400;border-radius:999px;padding:7px 12px;cursor:pointer;text-decoration:none}
mark.tbc{background:linear-gradient(transparent 52%,var(--hl) 52%);color:inherit;padding:0 1px}
mark.tbc sup,.phn{font:700 10.5px/1 var(--sans);color:#6b5200;background:var(--hl);border-radius:3px;padding:1px 3px;margin-left:2px;vertical-align:4px}
.dark mark.tbc,.foot mark.tbc,.site mark.tbc{background:none;border-bottom:2px dashed var(--hl)}
.standin{position:absolute;left:8px;top:8px;z-index:2;background:var(--hl);color:#2a2400;font:700 11px/1 var(--sans);padding:5px 7px;border-radius:4px;pointer-events:none}
.mnote{margin:var(--s3) 0 0;padding:9px 12px;background:#fff8d1;border:1px dashed #c9a800;border-radius:6px;font-size:14px;line-height:1.45;color:#3d3300}
.dark .mnote{background:#2b2814;color:#f3e7a6;border-color:#8a7a2a}
html.nomarks mark.tbc{background:none;border:0}
html.nomarks mark.tbc sup,html.nomarks .phn,html.nomarks .notes,html.nomarks .standin,html.nomarks .mnote{display:none}
.notes{background:#fff8d1;border-top:3px solid #c9a800}
.notes .wrap{padding-block:var(--s6)}
.notes h2{font-size:28px}
.notes ol{margin:var(--s4) 0 0;padding-left:0;list-style:none;display:grid;gap:var(--s3)}
.notes li{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:var(--s2);font-size:15.5px;line-height:1.5}
.notes li b.n{font:800 20px/1.1 var(--display);color:#6b5200}
.notes li .lab{display:block;font-weight:700}

/* header */
.site{background:var(--floor);color:var(--chalk)}
@media (min-width:1080px){.site{position:sticky;top:0;z-index:40;box-shadow:0 1px 0 #2c2d31}}
.site .wrap{display:flex;align-items:center;gap:var(--s3);min-height:68px;padding-block:10px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--chalk);text-decoration:none;margin-right:auto;min-height:44px}
.brand svg{width:52px;height:26px;flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .b1{font:700 10.5px/1 var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--chalk-2);margin-bottom:3px}
.brand .b2{font:900 26px/.9 var(--display);letter-spacing:.03em;text-transform:uppercase}
.langsw{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid #4a4c52;border-radius:999px;color:var(--chalk);text-decoration:none;font:700 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;flex:none}
.site a.langsw{color:var(--chalk)}
.langsw:hover{border-color:var(--chalk-2)}
.langsw .lw{display:none}
@media (min-width:1080px){.langsw .lw{display:inline}.langsw .ln{display:none}}
.navd{display:none}
.navd a{color:var(--chalk);text-decoration:none;font:700 15.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:12px 2px;border-bottom:2px solid transparent}
.navd a:hover,.navd a[aria-current="page"]{border-bottom-color:var(--chalk)}
.menu{position:relative;flex:none}
.menu summary{display:inline-flex;align-items:center;gap:9px;list-style:none;cursor:pointer;font:800 16px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--floor);background:var(--chalk);border:1.5px solid var(--chalk);border-radius:6px;padding:12px 15px 12px 13px;min-height:46px}
.menu summary:hover{background:#fff;border-color:#fff}
.menu .mi{position:relative;display:block;width:18px;height:14px;flex:none}
.menu .mi i{position:absolute;left:0;width:18px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu .mi i:nth-child(1){top:0}.menu .mi i:nth-child(2){top:5.75px}.menu .mi i:nth-child(3){top:11.5px}
.menu[open] .mi i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
.menu[open] .mi i:nth-child(2){opacity:0}
.menu[open] .mi i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}
@media (max-width:359px){.site .wrap{gap:8px}.brand{gap:8px}.brand svg{width:44px;height:22px}.langsw{padding:0 11px}.menu summary{gap:7px;padding-inline:10px 11px;letter-spacing:.06em}}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--floor-2);color:var(--chalk);border-color:var(--chalk-2)}
.menu nav{position:absolute;right:0;top:calc(100% + var(--s2));z-index:45;width:min(80vw,300px);background:var(--floor-2);border:1px solid #3a3b40;border-radius:var(--r);padding:var(--s2);display:grid;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.menu nav a{color:var(--chalk);text-decoration:none;font:700 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:13px 12px;border-radius:6px}
.menu nav a[aria-current="page"],.menu nav a:hover{background:#34363a}
.site .hbook{display:none}
@media (min-width:860px){.site .hbook{display:inline-flex}}
@media (min-width:1180px){.menu{display:none}.navd{display:flex;gap:18px;align-items:center;margin-right:var(--s2)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:12px 24px;border-radius:6px;border:2px solid transparent;
  font:800 18px/1.05 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer}
.btn svg{width:20px;height:20px;flex:none}
.btn-book{background:var(--red);color:#fff;border-color:var(--red)}
.btn-book:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.dark .btn-line{color:var(--chalk);border-color:var(--chalk-2)}
.btn-line:hover{background:rgba(127,127,127,.14)}
.btn-sm{min-height:44px;padding:9px 16px;font-size:16px}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
*+.ctas{margin-top:var(--s5)}
.textlink{font-weight:600}

/* pinned phone bar */
.pin{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--floor);border-top:1px solid #34363a;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s2)}
.pin .btn{min-height:52px;padding:8px 10px;font-size:17px;letter-spacing:.05em}
.pin .btn-line{color:var(--chalk);border-color:var(--chalk-2)}
@media (min-width:860px){.pin{display:none}}

/* bands */
.band{padding-block:var(--s8)}
@media (min-width:860px){.band{padding-block:var(--s9)}}
.dark{background:var(--floor);color:var(--chalk)}
.dark a{color:#a9c4ff}
.dark a.btn-book,.site a.btn-book,.pin a.btn-book,.foot a.btn-book{color:#fff}
.dark a.btn-line,.pin a.btn-line{color:var(--chalk)}
.paper{background:var(--paper)}
.rule-top{border-top:1px solid var(--rule)}

/* photos */
.photo{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:#2a2b2e}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:14px;line-height:1.35}
.ar-45{aspect-ratio:4/5}.ar-11{aspect-ratio:1/1}.ar-43{aspect-ratio:4/3}.ar-34{aspect-ratio:3/4}.ar-32{aspect-ratio:3/2}.ar-169{aspect-ratio:16/9}
.ph{margin:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s1);padding:var(--s4);border-radius:var(--r);max-width:100%;
  background:repeating-linear-gradient(135deg,#e7e7e2 0 12px,#efefea 12px 24px);color:#3d4046;border:1px solid var(--rule);overflow:hidden}
.dark .ph{background:repeating-linear-gradient(135deg,#26272a 0 12px,#2c2d31 12px 24px);color:var(--chalk-2);border-color:#3a3b40}
.ph-tag{font:700 11.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.ph-l{font:700 16px/1.3 var(--sans)}
.ph.sv{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.ph.sv .btn{align-self:flex-start;margin-top:var(--s2)}
.sv-frame{aspect-ratio:16/10}
.sv-frame iframe{display:block;width:100%;height:100%;border:0}

/* home hero */
.hero{padding-block:0 var(--s7)}
.hero-grid{display:grid;gap:var(--s5)}
.hero-photo{margin:0 calc(-1 * var(--gut));aspect-ratio:16/9;border-radius:0}
.hero-photo img{object-position:50% 30%}
.hero h1{margin:0 0 var(--s4);font:800 clamp(38px,9vw,66px)/.97 var(--display);letter-spacing:.005em}
.hero .lead{font-size:clamp(18px,4.4vw,20px);line-height:1.5;max-width:32em;margin:0 0 var(--s5)}
.rate{display:flex;align-items:center;gap:var(--s4);margin:0}
.rate b{font:900 clamp(64px,15vw,96px)/.8 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rate .s{display:block;color:#ffd24a;letter-spacing:3px;font-size:21px;line-height:1;margin-bottom:6px}
.rate .rt{font-size:16px;line-height:1.35;color:var(--chalk-2)}
.rate .rt a{font-weight:700}
.nextc{margin:var(--s4) 0 0;font-size:16px;color:var(--chalk-2)}
.nextc b{color:var(--chalk);font-weight:700}
.trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s4) 0 0;padding:0;list-style:none;font-size:15px;color:var(--chalk-2)}
.trust li{position:relative;padding-left:22px}
.trust li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border-left:2.5px solid #7fd18b;border-bottom:2.5px solid #7fd18b;transform:rotate(-45deg)}
.es-hint{margin:var(--s3) 0 0;font-size:15px;color:var(--steel)}
.dark .es-hint{color:var(--chalk-2)}
@media (min-width:860px){
  .hero{padding-block:var(--s8)}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:var(--s7)}
  .hero-photo{order:2;margin:0;aspect-ratio:1/1;border-radius:var(--r)}
  .hero-photo img{object-position:57% 50%}
}

/* member quotes */
.quotes{display:grid;gap:var(--s4)}
@media (min-width:860px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}}
.quote{margin:0;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.quote .s{color:#c98f00;letter-spacing:2px;font-size:15px;line-height:1}
.quote blockquote{margin:0;font:500 17.5px/1.5 var(--sans)}
.quote blockquote p{margin:0 0 var(--s3)}
.quote blockquote p:last-child{margin:0}
.quote figcaption{margin-top:auto;font-size:15px;color:var(--steel);line-height:1.45}
.quote figcaption b{display:block;color:var(--ink);font-weight:700}
.quote .disc{display:block;margin-top:var(--s1);font-size:13.5px}
.tr{display:block;margin-top:var(--s1);font-size:13px;font-style:italic;color:var(--steel)}
.long blockquote{font-size:16.5px}
.quote .qph{margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;width:calc(100% + 2 * var(--s5));max-width:none;border-radius:var(--r) var(--r) 0 0;border:0;border-bottom:1px solid var(--rule)}
.quote.slot{justify-content:flex-start;border-style:dashed}
.slot-l{margin:0;font-weight:700}

/* steps (a real sequence, so numbered) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}}
.steps li{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s4);align-content:start}
.steps .num{grid-row:span 2;font:900 56px/.82 var(--display);color:var(--ink);min-width:.62em}
.steps h3{margin:2px 0 0}
.steps p{margin:0;font-size:16px}
.steps .conf{display:block;margin-top:var(--s2);font-weight:600}

/* small classes */
.why{display:grid;gap:var(--s6)}
@media (min-width:860px){.why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s8)}}
.small-print{font-size:15.5px;color:var(--steel)}

/* is this for me */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s5)}
.strip .photo{aspect-ratio:3/4}
@media (min-width:860px){.strip{gap:var(--s4)}.strip .photo{aspect-ratio:1/1}}
.qa{display:grid;gap:var(--s3)}
@media (min-width:720px){.qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
.qa div{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.qa p{margin:0;font-size:16px}

/* coach band */
.coach{display:grid;gap:var(--s6)}
@media (min-width:860px){.coach{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:var(--s8)}}
.coach blockquote{margin:0 0 var(--s4);font:800 clamp(28px,5.6vw,40px)/1.08 var(--display);letter-spacing:.005em}
.who{font-size:16px;color:var(--chalk-2);margin:0}

/* class times grid */
.sg{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4) var(--s2) var(--s3)}
@media (min-width:560px){.sg{padding:var(--s5) var(--s5) var(--s4)}}
.sg table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.sg caption{text-align:left;padding:0 6px var(--s3);margin:0}
.sg th,.sg td{padding:3px 2px}
.sg thead th{font:800 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:8px 2px 7px;color:var(--ink)}
.sg abbr{text-decoration:none;border:0}
.sg thead th .tl{display:none;margin-top:4px;font:700 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--marker)}
.sg thead th.today .tl{display:block}
.sg .tcol{width:66px;text-align:left;font:800 15px/1.05 var(--display);letter-spacing:.02em;color:var(--ink);padding-left:6px;white-space:nowrap}
@media (min-width:560px){.sg .tcol{width:104px;font-size:17px}}
.sg .tcol small{display:block;margin-top:2px;font:600 11px/1.15 var(--sans);letter-spacing:0;color:var(--steel);white-space:normal}
.sg .c{display:flex;align-items:center;justify-content:center;height:38px;border-radius:5px;font:800 12.5px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-align:center}
@media (min-width:560px){.sg .c{height:42px;font-size:14.5px}}
.sg .c-class{background:var(--ink);color:#fff}
.sg .c-skill{background:var(--marker);color:#fff}
.sg .c-open{background:#fff;color:var(--steel);border:1.5px dashed #9da0a6;font-size:10.5px;line-height:1.05;padding:0 1px}
@media (min-width:560px){.sg .c-open{font-size:13px}}
.sg .c-none{background:#f2f2ee}
.sg .today{background:var(--today)}
.sg thead th.today{border-radius:6px 6px 0 0}
.sg tbody tr:last-child td.today{border-radius:0 0 6px 6px}
.sg tr.sep>*{padding:0;height:10px}
.sg-key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s3) 6px 0;padding:0;list-style:none;font-size:14px;line-height:1.4;color:var(--steel)}
.sg-key li{display:inline-flex;align-items:center;gap:6px}
.sg-key i{display:inline-block;width:20px;height:13px;border-radius:3px;flex:none}
.sg-key .k-class{background:var(--ink)}.sg-key .k-skill{background:var(--marker)}.sg-key .k-open{border:1.5px dashed #9da0a6;background:#fff}
.sg-note{margin:var(--s2) 6px 0;font-size:14px;line-height:1.45;color:var(--steel)}
.nextl{margin:0 0 var(--s4);font-size:16px}
.nextl b{font-weight:700}

/* prices */
.pgroup+.pgroup{margin-top:var(--s7)}
.pgroup>h3{font-size:26px;margin-bottom:var(--s4)}
.cards{display:grid;gap:var(--s4)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards.one{grid-template-columns:1fr}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.card .nm{font:800 16px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.card .pr{font:900 46px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;margin:2px 0}
.card .pr small{font:700 18px/1 var(--display);letter-spacing:.04em;margin-left:6px;color:var(--steel)}
.card p{margin:var(--s1) 0 0;font-size:15.5px;line-height:1.5}
.card.feature{border:2px solid var(--ink)}
.incl{display:grid;gap:var(--s2);margin:0;padding:0;list-style:none}
.incl li{padding-left:28px;position:relative}
.incl li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-45deg)}
.dark .incl li::before{border-color:var(--chalk)}
.fine{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.fine li{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:16px}

/* generic grids */
.g2{display:grid;gap:var(--s6)}
@media (min-width:860px){.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}}
.g2.center{align-items:center}
.stack>*+*{margin-top:var(--s6)}
.duo{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
.duo .photo{aspect-ratio:3/4}
.tlp{margin-top:var(--s7)}
.tl-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (min-width:860px){.tl-photos{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.tl-photos .photo{aspect-ratio:1/1}
.mstrip{margin:var(--s5) 0 var(--s2)}
.mstrip-note{margin:0 0 var(--s5)}
@media (min-width:860px){.quotes.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo.mt-4{margin-top:var(--s4)}.photo.mt-6{margin-top:var(--s6)}

/* inner page head */
.phead{padding-block:var(--s7)}
@media (min-width:860px){.phead{padding-block:var(--s8)}}
.phead h1{margin:0 0 var(--s4);font:800 clamp(42px,9vw,74px)/.95 var(--display);letter-spacing:.005em}
.phead p.lead{max-width:40em;font-size:clamp(18px,4.4vw,20px);margin:0;color:var(--chalk)}

/* timeline (start here) */
.tl-list{list-style:none;margin:var(--s5) 0 0;padding:0;border-left:3px solid var(--ink);display:grid;gap:var(--s5)}
.tl-list li{position:relative;padding-left:var(--s5)}
.tl-list li::before{content:"";position:absolute;left:-9px;top:6px;width:15px;height:15px;background:var(--paper);border:3px solid var(--ink);border-radius:50%}
.tl-list b{display:block;font:800 21px/1.2 var(--display);letter-spacing:.02em}
.tl-list .when{display:block;font:700 13px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:2px}
.tl-list p{margin:var(--s1) 0 0;font-size:16px}

/* faq */
.faq{display:grid;gap:var(--s2)}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) 52px var(--s4) var(--s5);position:relative;font:800 20px/1.2 var(--display);letter-spacing:.01em;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s5);top:13px;font:800 26px/1 var(--display)}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 var(--s5) var(--s4);font-size:16px}

/* coaches */
.coachcard{display:grid;gap:var(--s5);padding-block:var(--s7);border-top:1px solid var(--rule)}
.coachcard:first-of-type{border-top:0;padding-top:0}
.coachcard:last-of-type{padding-bottom:0}
@media (min-width:860px){.coachcard{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s7);align-items:start}}
.coachcard h2{margin-bottom:var(--s1)}
.role{font:700 15px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 0 var(--s4)}
.facts{display:grid;gap:var(--s1) var(--s4);margin:0 0 var(--s5);padding:var(--s4);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);font-size:15.5px}
@media (min-width:560px){.facts{grid-template-columns:auto minmax(0,1fr)}}
.facts dt{font:700 13px/1.6 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.facts dd{margin:0 0 var(--s2)}
.story p{max-width:65ch}
.story h3{margin-top:var(--s5)}
.certs{margin:0;padding-left:1.1em}
.certs li{margin:0 0 var(--s1)}

/* stories page */
.rating{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.rating .big{font:900 64px/.9 var(--display)}
.rating .s{color:#c98f00;font-size:22px;letter-spacing:3px}
.rating .ctas{margin-top:0}
.split-note{font-size:15px;color:var(--steel);margin-top:var(--s4)}

/* jiu-jitsu */
.contactbox{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4) var(--s5);margin-top:var(--s5)}
.contactbox p{margin:0 0 var(--s1)}

/* contact */
.addr-big{font:800 clamp(28px,6vw,40px)/1.05 var(--display);margin:0 0 var(--s4)}
.kv{display:grid;gap:var(--s3);margin:0}
.kv div{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3) var(--s4)}
.kv dt{font:700 13px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.kv dd{margin:2px 0 0;font-size:17px}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.copybtn{font:700 13px/1 var(--sans);padding:8px 12px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;min-height:36px}
.pics{display:grid;gap:var(--s3)}

/* message options and the short form */
.opts{display:grid;gap:var(--s2)}
.opt{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1.5px solid var(--rule);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--paper);min-height:68px}
.opt:hover{border-color:var(--ink)}
a.opt{color:var(--ink)}
.opt .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff}
.opt .ic svg{width:22px;height:22px}
.opt.sms .ic{background:#1f8a43}
.opt b{display:block;font:800 19px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.opt small{display:block;font-size:14px;line-height:1.35;color:var(--steel);margin-top:3px}
.or{margin:var(--s5) 0 var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);font-weight:700;font-size:16px;color:var(--ink)}
.qf{display:grid;gap:var(--s4)}
.qf .fld{display:grid;gap:6px}
.qf label.l,.qf legend{font-weight:600;font-size:15.5px;padding:0}
.qf input[type=text],.qf input[type=tel],.qf textarea{font:400 17px/1.4 var(--sans);padding:11px 14px;border:1.5px solid #b4b6bb;border-radius:8px;background:#fff;color:var(--ink);width:100%;min-height:50px}
.qf textarea{min-height:76px;resize:vertical}
.qf input:focus,.qf textarea:focus{outline:3px solid #2b6cff;outline-offset:1px;border-color:#2b6cff}
.qf .opt-l{font-weight:400;color:var(--steel)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;padding:0;margin:0;min-width:0}
.chips legend{margin-bottom:var(--s2)}
.chips label{display:inline-flex;position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label span{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border:1.5px solid #b4b6bb;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;background:#fff}
.chips label input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips label input:focus-visible+span{outline:3px solid #2b6cff;outline-offset:2px}
.qf .btn{width:100%}
.qf .fine-s{font-size:13.5px;line-height:1.45;color:var(--steel);margin:0}
.qf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qf-out{border-radius:8px;padding:var(--s3) var(--s4);font-weight:600;font-size:15.5px}
.qf-done{background:#eaf6ec;border:1px solid #a9d5b2}
.qf-err{background:#fdeceb;border:1px solid #f0b4b0}
.qf-prev{background:#fff8d1;border:1px solid #e5cf6a}
.formcard{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.formcard h3{font-size:24px}

/* the booking sheet */
.bk-step{border:0;padding:0;margin:0;min-width:0}
.bk-step legend{font-weight:700;font-size:16px;padding:0;margin-bottom:var(--s2)}
.bk-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.bk-chips label{display:inline-flex;position:relative}
.bk-chips input{position:absolute;opacity:0;width:1px;height:1px}
.bk-chips span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid #b4b6bb;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;background:#fff}
.bk-chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk-chips input:focus-visible+span{outline:3px solid #2b6cff;outline-offset:2px}
.bk-hint{margin:0;font-size:14.5px;color:var(--steel)}
.bk-pick{margin:0;padding:var(--s3) var(--s4);background:#eef3ff;border:1px solid #c9d6f5;border-radius:8px;font-weight:600}
.bk .btn-line{width:100%}
.bk-alt{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--rule);font-size:14px;line-height:1.45;color:var(--steel)}
.nextc .nextbook,.nextl .nextbook{margin-left:6px;font-weight:700;white-space:nowrap}

/* the message sheet */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:94dvh;border-radius:16px 16px 0 0;background:var(--board);color:var(--ink);box-shadow:0 -8px 40px rgba(0,0,0,.35)}
@media (min-width:640px){dialog.sheet{margin:auto;border-radius:14px;max-height:90dvh}}
dialog.sheet::backdrop{background:rgba(10,10,12,.62)}
.sheet-in{position:relative;padding:var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom,0px));overflow:auto;max-height:94dvh}
@media (min-width:640px){.sheet-in{padding:var(--s6);max-height:90dvh}}
.sheet h2{font-size:32px;margin:0 0 var(--s2);padding-right:52px}
.sheet .sub{font-size:15.5px;color:var(--steel);margin:0 0 var(--s4)}
.sheet-x{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;border-radius:50%;border:0;background:#e6e6e1;color:var(--ink);font:700 26px/1 var(--sans);cursor:pointer}
.sheet-x:hover{background:#d9d9d3}

/* legal pages */
.legal h2{font-size:28px;margin-top:var(--s6)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{max-width:68ch}
.legal ul{padding-left:1.2em;margin:0 0 var(--s4)}

/* closing call to action */
.close h2{max-width:18ch}
.close .sub{color:var(--chalk);max-width:40em}
.close .small{margin-top:var(--s4);font-size:15px;color:var(--chalk-2)}

/* footer */
.foot{background:var(--floor);color:var(--chalk-2);font-size:15px}
.foot .wrap{padding-block:var(--s7) var(--s6);display:grid;gap:var(--s6)}
@media (min-width:860px){.foot .wrap{grid-template-columns:1.2fr 1fr 1fr}}
.foot a{color:var(--chalk)}
.foot .flogo{display:inline-block}
.foot .flogo img{display:block;width:170px;height:auto}
.foot h3{color:var(--chalk);font-size:18px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.foot .legalline{grid-column:1/-1;border-top:1px solid #34363a;padding-top:var(--s4);font-size:13.5px;line-height:1.55}
.foot .legalline p{margin:0 0 6px}

/* the hook video (Dylan, 2026-10-12): plays by itself, muted, while it is on screen; Sound and Pause buttons; captions;
   on a phone held upright it fills the screen and the title sits on it, above the pinned booking bar */
.reel{position:relative;margin:0 auto;width:100%;max-width:360px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0d0d0e;
  box-shadow:0 30px 60px -28px rgba(20,20,21,.6)}
.reel video{display:block;width:100%;height:100%;object-fit:cover;background:#0d0d0e}
.reel.ctl video{cursor:pointer}
.reel .rctl,.reel .rcap{display:none}
.reel.ctl .rctl{display:flex}
.reel.ctl .rcap{display:block}
.rctl{position:absolute;top:12px;right:12px;z-index:2;gap:var(--s2)}
.rbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 15px;border:0;border-radius:999px;
  background:rgba(12,12,13,.6);color:#fff;font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rbtn svg{width:20px;height:20px;flex:none}
.rpause{padding:0}
.rbtn .i-on,.rbtn.is-on .i-off,.rpause .i-play,.rpause.is-paused .i-pause{display:none}
.rbtn.is-on .i-on,.rpause.is-paused .i-play{display:block}
.rsound.is-on{background:#fff;color:var(--ink)}
.rcap{position:absolute;left:14px;right:14px;bottom:18px;z-index:2;margin:0;text-align:center;pointer-events:none}
.rcap span{padding:3px 10px;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;font:600 17px/1.6 var(--sans);white-space:pre-line;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.rcap.top{top:64px;bottom:auto}
.reel button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #2b6cff}
.rplay{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;
  border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.rplay[hidden]{display:none}
.rplay svg{width:34px;height:34px;margin-left:5px}
@media (min-width:860px){.g2.reelband{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.reel{max-width:340px}}
@media (max-width:859px) and (orientation:portrait){
  .reelband-s{padding:0;background:var(--floor);border-top:0}
  .reelband-s .reelband{display:block;position:relative;max-width:none;padding:0}
  .reelband-s .reel{max-width:none;height:100vh;height:100svh;min-height:520px;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .reelband-s .rcopy{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:128px var(--gut) calc(96px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.42) 58%,transparent);color:#fff;pointer-events:none}
  .reelband-s .rcopy .eyebrow,.reelband-s .rcopy .ctas{display:none}
  .reelband-s .rcopy h2{margin:0;font-size:clamp(40px,11vw,54px)}
  .reelband-s .rcopy .measure{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .reelband-s .rcap{bottom:calc(96px + env(safe-area-inset-bottom,0px) + 100px)}
  .reelband-s .rcap.top{top:76px;bottom:auto}
  .reelband-s .rctl{top:16px;right:var(--gut)}
}
@media (max-width:859px) and (orientation:portrait) and (max-height:700px){.reelband-s .rcopy h2{font-size:34px}}
@media (max-width:859px) and (orientation:landscape){.reel{width:auto;height:min(calc(100svh - 100px),640px);min-height:240px;max-width:none}
  .rsound{padding:0}.rsound span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rcap span{font-size:14px;line-height:1.5}}

/* forms that open the visitor's messages app (no texting service yet) */
.qf-tip{margin:0;font-size:14px;line-height:1.45;color:var(--steel)}
.bk .btn-book{width:100%}

/* 404 */
.nf .ctas{margin-top:var(--s5)}
.stack .photo+.ph{margin-top:var(--s3)}

/* motion (Dylan, 2026-10-12: "more motion graphics", "wow"). One load sequence per page, then a few moments tied to what
   they show: the logo's two halves meet (the name), the 5.0 counts up, the LED clock counts down to the next class like
   the wall timer in the gym, the class grid lights up like a scoreboard, the coach's words light up as you read them.
   A device set to reduce motion gets none of it (and the video waits for a tap); without JavaScript everything shows. */
.mk-l,.mk-r{transform-box:fill-box;transform-origin:50% 50%}
.w,.w>span{display:inline-block}
.nextrow{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.nextrow .nextc{margin:0}
.led{flex:none;display:grid;gap:5px;padding:9px 12px 8px;background:#09090a;border:1px solid #303136;border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.35)}
.led[hidden]{display:none}
.led-l,.led-u{font:600 11px/1 var(--sans);letter-spacing:.02em;color:#a2a5ab}
.led-d{display:block;width:auto;height:34px;overflow:visible;transform:skewX(-6deg);filter:drop-shadow(0 0 5px rgba(255,59,47,.5))}
.led-d .s1{fill:#ff3b2f}
.led-d .s0{fill:#2b1311}
.led-u{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-weight:700;font-size:12px;color:#c9ccd1}
.led-u i{font-style:normal}

/* the ticker under the video (Home): it moves only as the page scrolls */
.ticker{overflow:hidden;background:var(--floor);color:var(--chalk);padding-block:var(--s5);border-block:1px solid #2c2d31}
.tk-track{display:flex;align-items:center;width:max-content;will-change:transform}
.tk-i{padding:0 .3em;font:900 clamp(54px,12vw,120px)/1 var(--display);letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
.tk-i.o{color:#6a6d73}
.tk-m{flex:none;width:clamp(56px,9vw,100px);height:auto;fill:var(--red)}

/* the closing band's big mark */
.close{position:relative;overflow:hidden}
.close .wrap{position:relative;z-index:1}
.bigmark{position:absolute;top:34%;right:-58%;width:min(1100px,170vw);transform:translateY(-50%);pointer-events:none}
@media (min-width:860px){.bigmark{top:50%;right:-14%;width:min(1000px,78vw)}}
.bigmark svg{display:block;width:100%;height:auto}
.bigmark path{fill:#232428}

@keyframes m-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-rise{from{transform:translateY(165%)}to{transform:none}}
@keyframes m-pop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}55%{opacity:1;transform:scale(1.35) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes m-settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes m-inl{from{opacity:0;transform:translateX(-34%)}to{opacity:1;transform:none}}
@keyframes m-inr{from{opacity:0;transform:translateX(34%)}to{opacity:1;transform:none}}
@keyframes m-led{0%{opacity:0}6%{opacity:.85}11%{opacity:.1}19%{opacity:1}24%{opacity:.3}32%,100%{opacity:1}}
@keyframes m-clank{0%,100%{filter:none}18%{filter:brightness(2.3)}}

/* the pinned booking bar (phones) and the sticky header (wide screens) never cover the element that has focus */
@media (max-width:859px){html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@media (min-width:1080px){html{scroll-padding-top:84px}}

@media screen and (prefers-reduced-motion:no-preference){
  .js .w{padding:.32em .1em .26em;margin:-.32em -.1em -.26em;clip-path:inset(0)}
  .js h1 .w>span{animation:m-rise .9s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(.16s + var(--i) * 70ms)}
  .js [data-fx] .w>span{transform:translateY(165%)}
  .js [data-fx].on .w>span{transform:none;transition:transform .9s cubic-bezier(.2,.75,.15,1) calc(var(--i) * 70ms)}
  .js .hero .eyebrow,.js .phead .eyebrow{animation:m-up .7s cubic-bezier(.2,.7,.2,1) .05s both}
  .js .hero .lead,.js .phead .lead{animation:m-up .7s cubic-bezier(.2,.7,.2,1) .45s both}
  .js .hero .rate{animation:m-up .7s cubic-bezier(.2,.7,.2,1) .6s both}
  .js .hero .rate .s i{display:inline-block;animation:m-pop .55s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(1s + var(--i) * 90ms)}
  .js .hero .ctas,.js .phead .ctas{animation:m-up .7s cubic-bezier(.2,.7,.2,1) .7s both}
  .js .hero .es-hint,.js .hero .nextrow,.js .hero .trust,.js .phead .nextrow,.js .phead .es-hint{animation:m-up .7s cubic-bezier(.2,.7,.2,1) .9s both}
  .js .hero-photo img{animation:m-settle 2s cubic-bezier(.2,.7,.2,1) both}
  .js .brand-anim .mk-l{animation:m-inl .85s cubic-bezier(.3,1.5,.5,1) .1s both}
  .js .brand-anim .mk-r{animation:m-inr .85s cubic-bezier(.3,1.5,.5,1) .1s both}
  .js .led.boot .s1{animation:m-led 1.2s steps(1,end) 1.15s both}
  .js .sg[data-fx] .c{opacity:.08;transform:scale(.8)}
  .js .sg[data-fx].on .c{opacity:1;transform:none;transition:opacity .35s steps(3,end) var(--d,0ms),transform .55s cubic-bezier(.3,1.5,.5,1) var(--d,0ms)}
  .js .strip[data-fx] .photo{clip-path:inset(100% 0 0 0)}
  .js .strip[data-fx] .photo img{transform:scale(1.2)}
  .js .strip[data-fx].on .photo{clip-path:inset(0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
  .js .strip[data-fx].on .photo img{transform:none;transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}
  .js .strip[data-fx].on .photo:nth-child(2),.js .strip[data-fx].on .photo:nth-child(2) img{transition-delay:.14s}
  .js .strip[data-fx].on .photo:nth-child(3),.js .strip[data-fx].on .photo:nth-child(3) img{transition-delay:.28s}
  .js [data-words] .qw{color:#7a7c81;transition:color .3s}
  .js [data-words] .qw.lit{color:var(--chalk)}
  .js .close[data-fx] .bigmark .mk-l{opacity:0;transform:translateX(-42%)}
  .js .close[data-fx] .bigmark .mk-r{opacity:0;transform:translateX(42%)}
  .js .close[data-fx].on .bigmark path{opacity:1;transform:none;transition:transform 1.1s cubic-bezier(.3,1.35,.45,1),opacity .6s}
  .js .close[data-fx].on .bigmark svg{animation:m-clank .9s .8s}
}

/* ---- round 4 (Dylan, 2026-10-14 10:52 PT): wide screens use their width; the "What is CrossFit?" photo band; the video
   without its title; the moving words loop on their own; the phone's pinned bar steps aside for the page's own buttons */

/* the pinned bar (phones) slides away while the page shows its own Book and Message buttons */
.pin{transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s}
.pin.is-away,.js .pin:not(.pin-ready){transform:translateY(calc(100% + 2px));visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s}
.js .pin:not(.pin-ready){transition:none}
@media (max-width:859px){body{padding-bottom:calc(73px + env(safe-area-inset-bottom,0px))}}

/* the video band, without a title; on a computer the video stands between four class photos */
.reelband{display:grid;justify-items:center;gap:var(--s5)}
.rside{display:none}
.reelband .rcopy{margin:0;justify-content:center}
@media (max-width:859px) and (orientation:portrait){.reelband-s .rcopy{display:none}}
@media (min-width:860px){
  .reelband{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-items:stretch;align-items:start;gap:var(--s5)}
  .reelband .reel{grid-column:2;grid-row:1;width:clamp(280px,24vw,360px);max-width:none;margin:0}
  .rside{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-self:stretch;min-height:0}
  .rside .photo{position:relative;min-height:0}
  .rside .photo img{position:absolute;inset:0}
  .reelband .rcopy{grid-column:1/-1}
}

/* the moving words: a slow loop of their own (they used to move only with the page), with a Pause button */
@keyframes tk{to{transform:translate3d(-50%,0,0)}}
.ticker{position:relative}
.ticker.tk-on .tk-track{animation:tk 60s linear infinite}
.ticker.is-paused .tk-track,.ticker.tk-off .tk-track{animation-play-state:paused}
.tk-btn{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:10px;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1.5px solid #55585e;border-radius:50%;background:rgba(20,20,21,.86);color:var(--chalk);cursor:pointer}
.tk-btn[hidden]{display:none}
.tk-btn svg{width:18px;height:18px}
.tk-btn .i-play,.tk-btn.is-paused .i-pause{display:none}
.tk-btn.is-paused .i-play{display:block}
.tk-btn:hover{border-color:var(--chalk)}
.tk-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #2b6cff}

/* "What is CrossFit?": the photo moves slower than the page (MOTION_JS); a dark wash keeps the words readable */
.pband{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(560px,88vh,780px);
  padding-block:var(--s8);background:var(--floor);color:var(--chalk)}
.pb-media{position:absolute;left:0;right:0;top:-15%;height:130%;margin:0;z-index:-2;will-change:transform}
.pb-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pband::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,13,14,.78)}
.pb-copy{width:100%}
.pb-copy h2{margin:0 0 var(--s5);font-size:clamp(48px,12vw,104px);line-height:.94;max-width:11ch}
.pb-copy p{margin:0;font-size:clamp(18px,4.6vw,22px);line-height:1.55;max-width:33em}
.pb-copy .ctas{margin-top:var(--s6)}
.pband a.btn-line{color:var(--chalk);border-color:var(--chalk)}
@media (min-width:860px){
  .pb-media{top:-30%;height:160%}
  .pband::before{background:linear-gradient(90deg,rgba(13,13,14,.93) 0%,rgba(13,13,14,.86) 38%,rgba(13,13,14,.6) 60%,rgba(13,13,14,.34) 100%)}
  .pb-media img{object-position:50% 30%}
}

/* the Home photo fills the first screen on a computer, with the headline on it */
@media (min-width:1080px){
  .hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding-block:0;
    min-height:clamp(640px,calc(100vh - 68px),1080px)}
  .hero-grid{display:block;width:100%;padding-block:var(--s8)}
  .hero-photo{position:absolute;inset:0;z-index:-1;margin:0;aspect-ratio:auto;border-radius:0}
  .hero-photo img{object-position:64% 40%}
  .hero-photo::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(13,13,14,.94) 0%,rgba(13,13,14,.86) 30%,rgba(13,13,14,.52) 52%,rgba(13,13,14,.14) 74%,rgba(13,13,14,0) 100%),
    linear-gradient(0deg,rgba(13,13,14,.55),rgba(13,13,14,0) 34%)}
  .hero-grid>div{max-width:min(660px,50%)}
  .hero h1{font-size:clamp(64px,5.4vw,100px)}
  .hero .lead{font-size:21px;max-width:30em}
}
@media (min-width:1080px) and (max-height:760px){
  .hero-grid{padding-block:var(--s5)}
  .hero-grid>div{max-width:min(620px,46%)}
  .hero .eyebrow{margin-bottom:var(--s2)}
  .hero h1{font-size:clamp(54px,4.4vw,70px);margin-bottom:var(--s3)}
  .hero .lead{margin-bottom:var(--s4)}
  .rate b{font-size:72px}
}

/* "Small classes, on purpose.": the photo runs to the screen's right edge on a computer */
@media (min-width:1080px){
  .band.why-s{padding-block:0}
  .why-s .wrap.why{max-width:none;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
  .why-s .why>div:first-child{align-self:center;padding-block:var(--s9);padding-right:var(--s8);
    padding-left:max(var(--gut),calc(100% - var(--w) / 2 + var(--gut)))}
  .why-s .why>div:last-child{position:relative;min-height:600px}
  .why-s .why .photo{position:absolute;inset:0;height:100%;border-radius:0;aspect-ratio:auto}
}

/* wide screens: a wider page and larger type */
@media (min-width:1280px){
  :root{--w:1360px;--gut:48px}
  body{font-size:18px}
  h2{font-size:clamp(48px,3.6vw,66px)}
  h3{font-size:24px}
  .eyebrow{font-size:14.5px}
  .head{max-width:52em}
  .band{padding-block:112px}
  .phead{padding-block:104px}
  .phead h1{font-size:clamp(78px,5.6vw,108px)}
  .phead p.lead{font-size:22px;max-width:36em}
  .quote{padding:var(--s6)}
  .quote blockquote{font-size:19px}
  .steps li{padding:var(--s6)}
  .steps .num{font-size:72px}
  .steps p{font-size:17px}
  .qa{grid-template-columns:repeat(4,minmax(0,1fr))}
  .coach{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .coach blockquote{font-size:clamp(40px,3.2vw,56px)}
  .close h2{font-size:clamp(56px,4.6vw,84px)}
  .tk-i{font-size:clamp(120px,7.6vw,150px)}
  .foot{font-size:16px}
}
@media (min-width:860px) and (min-height:760px){
  .stick,.coachcard>div:first-child{position:sticky;top:var(--s5);align-self:start}
}
@media (min-width:1080px) and (min-height:760px){
  .stick,.coachcard>div:first-child{top:92px}
}
@media (min-width:1600px){
  :root{--w:1520px;--gut:64px}
  .navd{gap:28px}
  .navd a{font-size:17px}
}
@media (min-width:2200px){:root{--w:1680px}}