/* ============================================================================
   MARR STRENGTH(R) — system.css
   The shared system for every page on the site. Owner: web/design-system/MASTER.md.
   Lifted VERBATIM out of index.html on 2026-08-04 so a design change is ONE edit,
   not one per page — the single thing that made the Shopify site unmaintainable
   (every page was its own CSS blob in a Custom Liquid section).
   Page-specific rules stay in that page's own <style>. Nothing brand-new goes here
   unless two pages use it.
   ============================================================================ */

/* ============================================================ TOKENS
   Every value here comes from web/design-system/MASTER.md. Radius is 0.
   Shadows do not exist. One accent per screen. ============================ */
:root{
  --ink:#0b0c0d;
  --ink-2:#101113;
  --bone:#f4efe6;
  --bone-2:#efe9df;
  --red:#e0454b;
  --dim:#b3ab9f;
  --line:rgba(239,233,223,.16);
  --line-soft:rgba(239,233,223,.08);

  --s1:9px; --s2:14px; --s3:22px; --s4:34px; --s5:60px; --s6:96px; --s7:140px;
  --pad:clamp(22px,5vw,64px);
  --maxw:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--red); color:var(--ink)}

.disp,h1,h2,h3{
  font-family:'Oswald',system-ui,sans-serif; font-weight:500;
  text-transform:uppercase; margin:0; text-wrap:balance;
}
h1{font-size:clamp(46px,9.2vw,148px); line-height:.86; letter-spacing:-.018em; font-weight:600}
h2{font-size:clamp(32px,5.4vw,78px); line-height:.94; letter-spacing:-.012em}
h3{font-size:clamp(20px,2.4vw,30px); line-height:1.06; letter-spacing:0}

.lab{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
}
.lab.red{color:var(--red)}
.num{font-variant-numeric:tabular-nums}
p{margin:0 0 1.1em; max-width:62ch}

/* ============================================================ CHROME */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:padding .35s cubic-bezier(.16,1,.3,1);
}
/* A scrim rather than mix-blend-mode. Difference blending kept the links readable over any
   photograph, but it also INVERTS the logo wherever the image behind it is bright — and the
   logo index is explicit: do not recolor. A gradient keeps everything legible and leaves the
   white wordmark white. */
/* THE SCRIM HAS TO OUTLAST THE LOGO (2026-08-06). It was `inset:0`, so it ended exactly where the
   nav box ends — and the wordmark is a STACKED lockup that fills that box to its last pixel. Scroll
   a section label under it and the two collide: reading the homepage cold, "THE METHOD" in red sat
   directly behind the logo. The gradient now runs PAST the nav and fades out below it, so anything
   passing underneath is already dimmed before it reaches the mark. Nothing moves; the ramp is just
   longer than the thing it is protecting. */
.nav::before{
  content:""; position:absolute; inset:0 0 -46px 0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,12,13,.86) 0%, rgba(11,12,13,.62) 46%,
                             rgba(11,12,13,.30) 76%, transparent 100%);
  transition:opacity .4s ease;
}
.nav.tight{padding:14px var(--pad)}
/* The approved white wordmark (MS-LOGO-006) — a STACKED, arched lockup, not a single line.
   It needs real height to be legible: below ~34px "STRENGTH" closes up and reads as a smudge.
   Sized by height only, so the aspect ratio is never touched. */
.nav .mark{display:block; line-height:0}
.nav .mark img{height:42px; width:auto; transition:height .35s cubic-bezier(.16,1,.3,1)}
.nav.tight .mark img{height:34px}
@media(max-width:640px){.nav .mark img{height:34px} .nav.tight .mark img{height:28px}}
.nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0}
.nav ul a{
  font-family:'Oswald',sans-serif; font-weight:400; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; position:relative; padding-bottom:3px;
}
.nav ul a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.nav ul a:hover::after{transform:scaleX(1)}

/* ============================================================ MOBILE NAV
   Below 860px the horizontal list does not fit. Until 2026-08-04 it was simply hidden
   with nothing put in its place, so on a phone the site had NO menu at all, on every
   page — the footer was the only way to move around.

   The button and the panel are BUILT BY site.js out of this same <ul>. That is
   deliberate: the nav markup is repeated across nine hand-built pages AND the NAV
   constant in scripts/build_articles.py, so a second hand-maintained copy of the link
   list is a copy that goes stale. One list, ten consumers. ==================== */
.navtoggle{display:none}

@media(max-width:860px){
  .nav ul{display:none}

  /* Three bars. 44px is Apple's minimum tap target; the bars inside are 22px, and the
     negative margin pulls them back onto the page gutter so they line up with the
     wordmark rather than floating 10px inside the edge. */
  .navtoggle{
    display:block; position:relative; z-index:2; margin-right:-10px;
    width:44px; height:44px; padding:0; border:0; background:none;
    color:var(--bone); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .navtoggle i{
    display:block; position:absolute; left:11px; width:22px; height:1.5px;
    background:currentColor;
    transition:transform .26s ease-out, opacity .16s ease-out;
  }
  .navtoggle i:nth-child(1){top:15px}
  .navtoggle i:nth-child(2){top:21px}
  .navtoggle i:nth-child(3){top:27px}
  .navtoggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] i:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

.navscrim{
  position:fixed; inset:0; z-index:55; background:rgba(11,12,13,.62);
  opacity:0; pointer-events:none; transition:opacity .26s ease-out;
}
.navscrim.open{opacity:1; pointer-events:auto}

/* Slides in from the right against a change of ground and a 1px rule, never a shadow.
   Left short of the edge on purpose: the strip of scrim beside it is a second, larger
   way to close the thing with a thumb. */
.navpanel{
  position:fixed; top:0; right:0; bottom:0; z-index:58;
  width:min(420px,86vw);
  display:flex; flex-direction:column;
  background:var(--ink-2); border-left:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 92px) 0 calc(env(safe-area-inset-bottom,0px) + var(--s3));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform:translateX(101%); visibility:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.navpanel.open{
  transform:none; visibility:visible;
  transition:transform .3s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.navpanel .navlinks a{
  display:block; padding:var(--s3) var(--pad);
  font-family:'Oswald',sans-serif; font-weight:500; font-size:26px;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.05;
  border-bottom:1px solid var(--line-soft);
  transition:color .2s ease-out;
}
.navpanel .navlinks a:first-child{border-top:1px solid var(--line-soft)}
.navpanel .navlinks a[aria-current="page"],
.navpanel .navlinks a:active{color:var(--red)}
.navpanel .foot{margin-top:auto; padding:var(--s4) var(--pad) 0}
.navpanel .foot .lab{display:block; margin-bottom:var(--s2)}
.navpanel .foot .tel{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:22px; letter-spacing:.02em;
}
.navpanel .foot .adr{margin:var(--s1) 0 0; font-size:14px; color:var(--dim)}

/* The panel scrolls itself; the page behind it must not. Handled in site.js by pinning
   the body, because iOS Safari ignores overflow:hidden on <body> often enough to matter. */
body.navopen{overflow:hidden}

/* ============================================================ HERO */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.hero .plate{position:absolute; inset:0; z-index:0}
.hero .plate img,.hero .plate video{
  width:100%; height:100%; object-fit:cover; object-position:58% 32%;
  transform:scale(1.14); filter:grayscale(1) brightness(.58);
  animation:drift 26s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes drift{to{transform:scale(1.0)}}
.hero .scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, var(--ink) 0%, rgba(11,12,13,.78) 20%, rgba(11,12,13,.20) 44%, transparent 62%);
}

/* ---------------------------------------------------------------- THE KNOCKOUT
   Concept A, ruled 2026-08-12. The headline is a HOLE in the picture: an ink
   sheet on `mix-blend-mode:multiply` sits over the film, so black stays black
   and the white letters let the film through. Scroll opens the hole.
   Two things this depends on:
   - `.hero` must be `isolation:isolate` or the sheet multiplies with the whole
     page behind it and the section above goes black.
   - If a browser has no blend-mode support the sheet just draws as ink with a
     white headline on it, which is the page we already had. It fails safe. */
.hero,.khero{isolation:isolate}
.hero .knock,.khero .knock{
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background:var(--ink); mix-blend-mode:multiply; padding:0 var(--pad);
  will-change:opacity;
}
.hero .knock h1,.khero .knock h1{
  color:var(--bone); text-align:center; max-width:none; margin:0;
  font-size:clamp(52px,12.4vw,190px); line-height:.84; letter-spacing:-.022em; font-weight:600;
  transform-origin:50% 46%; will-change:transform;
}
/* the film is dimmed for legibility everywhere else; inside the letters it is
   the only thing you can see, so it gets its exposure back */
.hero .plate video, .hero .plate img{filter:grayscale(1) brightness(1.02) contrast(1.04)}
/* the exposure floor — see the note above */
.hero .plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, rgba(150,150,150,.30), rgba(90,90,90,.12) 55%, transparent 78%);
  mix-blend-mode:screen;
}
.hero .knock h1,.khero .knock h1{ text-shadow:0 0 46px rgba(0,0,0,.55) }
/* LEGIBILITY ON A PHONE. The knockout works because each letter is a window on
   the film. At 190px a letter is a big window and the word reads whatever is
   behind it; at 40px it is a small one, and wherever the film goes dark the
   letter merges into the ink around it and the headline turns to mud. So on a
   narrow screen the film behind the letters is lifted and flattened: brighter,
   less contrast, fewer black patches inside the type. Checked at 390px. */
@media(max-width:760px){
  /* Lifting the film was not enough on the darker clips: "A multidisciplinary
     team." at 40px still read as mud. The effect NEEDS large letterforms and a
     phone does not have them, so below 760px the sheet stops being a knockout
     and the headline is simply set in bone over a dimmed plate. Same layout,
     same type, same picture, and it is legible every time. */
  .hero .knock, .khero .knock{mix-blend-mode:normal; background:transparent}
  .hero .knock h1, .khero .knock h1{color:var(--bone)}
  .hero .plate video, .hero .plate img,
  .khero .plate video, .khero .plate img{filter:grayscale(1) brightness(.46) contrast(1.02)}
}

/* ---------------------------------------------- THE KNOCKOUT, INTERIOR
   The same device on the three interior pages that own media. It is
   shorter than the home hero so the page's argument still starts inside
   one screen, and the headline is smaller for the same reason the old
   .ihero h1 was (see the note above it).
   BOTH interior clips are PORTRAIT 1080x1620. Checked frame by frame
   before using them full bleed: the centre 16:9 band of care.mp4 is the
   therapist working on an athlete, and of reel.mp4 is an overhead press.
   Both are the right picture for their page, so no clip was moved. */
.khero{
  position:relative; min-height:min(84svh,780px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; border-bottom:1px solid var(--line);
}
.khero .plate{position:absolute; inset:0; z-index:0}
.khero .plate video,.khero .plate img{
  width:100%; height:100%; object-fit:cover; object-position:center 50%;
  filter:grayscale(1) brightness(1.02) contrast(1.04);
}
.khero .scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, var(--ink) 0%, rgba(11,12,13,.92) 26%, rgba(11,12,13,.42) 48%, transparent 68%);
}
.khero .knock h1{font-size:clamp(34px,6.6vw,96px); max-width:16ch; text-wrap:balance}
.khero .inner{position:relative; z-index:3; padding:0 var(--pad) var(--s5); max-width:var(--maxw); margin:0 auto; width:100%}
.khero .lab{display:block; margin-bottom:var(--s3)}
.khero .sub{font-size:clamp(16px,1.5vw,20px); color:var(--bone-2); opacity:.92; max-width:52ch; margin:0}
.hero .inner{position:relative; z-index:3; padding:0 var(--pad) var(--s5); max-width:var(--maxw); margin:0 auto; width:100%}
.hero .lab{display:block; margin-bottom:var(--s3)}
.hero h1{margin-bottom:var(--s3); max-width:17ch}
.hero .sub{font-size:clamp(17px,1.6vw,21px); color:var(--bone-2); max-width:48ch; margin-bottom:var(--s4); opacity:.82}

.scrollcue{
  position:absolute; z-index:3; bottom:var(--s3); right:var(--pad);
  display:flex; align-items:center; gap:10px;
}
.scrollcue i{display:block; width:44px; height:1px; background:var(--bone); opacity:.42; transform-origin:right;
  animation:cue 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue{0%,100%{transform:scaleX(.35); opacity:.25} 50%{transform:scaleX(1); opacity:.6}}

/* ============================================================ THE TWO DOORS */
.doors{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)}
@media(max-width:820px){.doors{grid-template-columns:1fr}}
.door{
  position:relative; min-height:clamp(400px,54vh,620px); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s4) clamp(22px,3.4vw,48px); border-right:1px solid var(--line);
  isolation:isolate;
}
.door:last-child{border-right:0}
@media(max-width:820px){.door{border-right:0; border-bottom:1px solid var(--line)}}
.door .bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.door .bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.72);
  object-position:50% 26%;          /* these are 2:3 portraits in a wide panel — without this the
                                       crop lands on a chest and the head is cut off entirely */
  transform:scale(1.06); transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .8s ease;
}
.door::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(11,12,13,.95) 4%, rgba(11,12,13,.62) 40%, rgba(11,12,13,.06) 88%);
  transition:background .6s ease;
}
.door:hover .bg img{transform:scale(1.0); filter:grayscale(1) brightness(.86)}
.door:hover::after{background:linear-gradient(to top, rgba(11,12,13,.92) 2%, rgba(11,12,13,.5) 44%, transparent 92%)}
.door .no{font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.24em; color:var(--red); margin-bottom:var(--s2)}
.door h3{margin-bottom:var(--s2); max-width:15ch}
.door p{font-size:15.5px; color:var(--bone-2); opacity:.76; max-width:38ch; margin-bottom:var(--s3)}
.door .go{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}
.door .go i{display:block; width:26px; height:1px; background:var(--red); transition:width .5s cubic-bezier(.16,1,.3,1)}
.door:hover .go i{width:54px}

/* ============================================================ SECTIONS */
section{position:relative}
.wrap{max-width:var(--maxw); margin:0 auto; padding:var(--s7) var(--pad)}
.rule{height:1px; background:var(--line); max-width:var(--maxw); margin:0 auto}

.head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s4) var(--s5); align-items:end; margin-bottom:var(--s5)}
@media(max-width:900px){.head{grid-template-columns:1fr}}
.head .lab{display:block; margin-bottom:var(--s2)}
.head .note{font-size:16.5px; color:var(--dim); max-width:52ch}

/* ---- the record: a data band, not cards ---- */
.record{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.record .row{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:var(--maxw); margin:0 auto;
}
@media(max-width:820px){.record .row{grid-template-columns:1fr}}
.stat{padding:var(--s4) clamp(20px,2.4vw,34px); border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
@media(max-width:820px){.stat{border-bottom:1px solid var(--line-soft); border-right:0}}
.stat .v{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(38px,4.6vw,64px);
  line-height:1; letter-spacing:-.014em; font-variant-numeric:tabular-nums; display:block;
}
.stat .k{display:block; margin-top:var(--s2); font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim); line-height:1.5}
.stat .src{display:block; margin-top:var(--s1); font-size:12px; color:var(--dim); opacity:.55}

/* ---- full-bleed plate with type over ---- */
.plate-sec{position:relative; min-height:clamp(520px,86vh,900px); display:flex; align-items:center; overflow:hidden}
.plate-sec .bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.plate-sec .bg img,.plate-sec .bg video{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.46)}
.plate-sec .scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(11,12,13,.94) 0%, rgba(11,12,13,.72) 40%, rgba(11,12,13,.12) 88%)}
.plate-sec .inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); width:100%}
.plate-sec h2{margin-bottom:var(--s3); max-width:13ch}
.plate-sec p{color:var(--bone-2); opacity:.82; max-width:46ch}
.plate-sec .facts{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5); margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line)}
.plate-sec .facts div{min-width:120px}
.plate-sec .facts b{display:block; font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(19px,1.8vw,24px); line-height:1.1; text-transform:uppercase; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.plate-sec .facts span{display:block; margin-top:6px; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}

/* ---- the roster marquee ---- */
.roster{padding:var(--s6) 0 var(--s5); overflow:hidden; border-top:1px solid var(--line)}
.roster .wrap{padding-top:0; padding-bottom:var(--s3)}
.roster .head{margin-bottom:var(--s4); align-items:end}
.marquee{display:flex; gap:0; width:max-content; animation:slide 46s linear infinite}
.roster:hover .marquee{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{
  font-family:'Oswald',sans-serif; font-weight:400; font-size:clamp(30px,4vw,58px);
  text-transform:uppercase; letter-spacing:-.005em; padding:0 clamp(20px,2.4vw,38px);
  color:transparent; -webkit-text-stroke:1px rgba(239,233,223,.28); white-space:nowrap;
  transition:color .45s ease, -webkit-text-stroke-color .45s ease;
}
.marquee span.on{color:var(--bone); -webkit-text-stroke-color:transparent}
.marquee span.dot{-webkit-text-stroke:0; color:var(--red); font-size:.5em; align-self:center}

/* ---- the method: a numbered sequence, not three cards ---- */
.seq{border-top:1px solid var(--line)}
.step{
  display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s4); align-items:start;
  padding:var(--s4) 0; border-bottom:1px solid var(--line-soft);
}
@media(max-width:820px){.step{grid-template-columns:56px 1fr; gap:var(--s3)} .step .body{grid-column:2}}
.step .n{font-family:'Oswald',sans-serif; font-weight:400; font-size:14px; letter-spacing:.18em; color:var(--red); padding-top:8px}
.step h3{align-self:start}
.step .body{color:var(--dim); font-size:16px; max-width:52ch}
.step .body p{margin:0}

/* ---- start ---- */
.start{border-top:1px solid var(--line); position:relative; overflow:hidden}
.start .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); align-items:end}
@media(max-width:900px){.start .wrap{grid-template-columns:1fr}}
.cta{
  display:inline-flex; align-items:center; gap:16px; margin-top:var(--s3);
  background:var(--red); color:var(--ink); padding:22px 34px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .5s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.cta i{display:block; width:26px; height:2px; background:currentColor; transition:width .5s cubic-bezier(.16,1,.3,1)}
.cta:hover{background:#f05a60}
.cta:hover i{width:46px}

/* ---- sign-off ---- */
.signoff{border-top:1px solid var(--line); padding:var(--s6) var(--pad) var(--s5); overflow:hidden}
.signoff img{
  width:100%; max-width:var(--maxw); height:auto; margin:0 auto; display:block;
  opacity:.13; transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
}
.signoff:hover img{opacity:.2}

footer{border-top:1px solid var(--line); padding:var(--s5) var(--pad) var(--s4)}
footer .wrapf{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4)}
footer .lab{display:block; margin-bottom:var(--s2)}
footer p{font-size:15px; color:var(--dim); margin:0 0 .4em}
footer .legal{max-width:var(--maxw); margin:var(--s5) auto 0; padding-top:var(--s3); border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--dim); opacity:.6}

/* ============================================================ REVEAL */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.hero .rv{transform:translateY(34px)}

/* ABOVE THE FOLD NEVER WAITS ON JAVASCRIPT (2026-08-06).
   Every hero headline on the site shipped as `.rv` — opacity:0 until site.js loads, builds an
   IntersectionObserver and adds `.in`. So the single most important sentence on each page was
   INVISIBLE until a script at the bottom of the document had downloaded and run. Measured cold at
   roughly four seconds: the first look at the homepage was a photograph, a sub-line, and no
   headline at all. site.js had a fast path for it, but the selector was `.hero .rv` and only the
   HOMEPAGE uses `.hero` — the eight interior pages are `.ihero` / `.startpage` and were never
   covered, so they waited for the observer as well.
   The hero is not a reveal. Nothing is being revealed: it is the first thing on the page and it is
   already on screen. MASTER.md §5 says motion signals cause and effect only, and a headline fading
   in on load is ambient — so this removes the animation there rather than trying to make it faster,
   and everything below the fold keeps it. */
.hero .rv, .ihero .rv, .startpage .rv{opacity:1; transform:none; transition:none}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================================
   INTERIOR-PAGE COMPONENTS  (added 2026-08-04 with /practice, /train, /roster)
   Everything below is used by two or more pages. Page-only rules do not live here.
   ============================================================================ */

/* --- the technical grid (MASTER §4). Specified since day one, never built until
       the interior pages needed texture that isn't another photograph. It is felt,
       not seen: 46px, ~3% bone. Sits UNDER content, never over it. --- */
.grid-bg{position:relative}
.grid-bg::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(244,239,230,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,230,.028) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
}
.grid-bg > *{position:relative; z-index:1}

/* --- corner tick: a 10px L of 1px rule. Marks a plate. ONCE per section. --- */
.tick{position:relative}
.tick::before,.tick::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  border-color:var(--red); border-style:solid;
}
.tick::before{top:0; left:0; border-width:1px 0 0 1px}
.tick::after{right:0; bottom:0; border-width:0 1px 1px 0}

/* --- interior hero. NOT the homepage's full-bleed plate: only three images in the
       library are landscape (1152x768) and all three are already spoken for on the
       home page. Everything else is ~2:3 portrait, which becomes a sliver of one
       man's face in a 16:9 band. So an interior page puts the portrait in a COLUMN,
       where its shape is right, and lets the type carry the width. --- */
.ihero{border-bottom:1px solid var(--line); overflow:hidden}
.ihero .wrap{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,440px);
  gap:var(--s5); align-items:end;
  /* --s7 top left ~370px of nothing above the headline on the shorter pages and
     pushed the hero past one screen. --s6 + the nav's height lands it inside 900px. */
  padding:calc(var(--s6) + 26px) var(--pad) var(--s6);
}
@media(max-width:940px){.ihero .wrap{grid-template-columns:1fr; gap:var(--s4)}}
.ihero .lab{display:block; margin-bottom:var(--s3)}
/* An interior headline is NOT the home page headline. The h1 clamp in the base
   system tops out at 148px, which was sized for five words over a full-bleed
   photograph; on a page that has to make an argument it eats 900px of height and
   pushes the first sentence below the fold. Interior tops out at 84px. */
.ihero h1{font-size:clamp(38px,5.4vw,84px); line-height:.92; letter-spacing:-.015em;
  max-width:17ch; margin-bottom:var(--s3)}
.ihero .sub{font-size:clamp(17px,1.5vw,20px); color:var(--bone-2); opacity:.8; max-width:52ch}
/* capped at 480px because the CDN only delivers ~511px on the long edge of a
   portrait — displaying one larger is an upscale on an already hard-graded file,
   and that is what made the Chad portrait read as blown out. See MASTER §3b. */
.ihero .plate{width:min(440px,100%); justify-self:end}
.ihero .plate img,.ihero .plate video{width:100%; height:auto; display:block; filter:grayscale(1) brightness(.74)}
.ihero .plate video{filter:brightness(.86)}
@media(max-width:940px){.ihero .plate{justify-self:start; width:min(420px,100%)}}

/* --- the ledger: a record, not cards. Name on the left, the number on the right,
       a hairline between. Used for franchises, positions and rates alike — when
       there are N things, the shape the CONTENT wants is a list you can read down. --- */
.ledger{border-top:1px solid var(--line); margin-top:var(--s4)}
.lrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--s3) var(--s4); align-items:baseline;
  padding:var(--s3) 0; border-bottom:1px solid var(--line-soft);
  transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.lrow:hover{padding-left:12px}
.lrow .n{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(19px,2vw,25px);
  text-transform:uppercase; letter-spacing:.005em; line-height:1.1;
}
.lrow .d{display:block; margin-top:5px; font-size:15px; color:var(--dim); max-width:56ch}
.lrow .v{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(19px,2vw,25px);
  font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap; text-align:right;
}
.lrow .v small{display:block; font-family:'Archivo',sans-serif; font-weight:400; font-size:12.5px;
  letter-spacing:0; color:var(--dim); margin-top:4px; text-transform:none}
.ledger .foot{padding:var(--s3) 0 0; font-size:13.5px; color:var(--dim); opacity:.72; max-width:62ch}

/* --- two-column band: a portrait plate beside a block of type. The interior
       equivalent of the homepage's full-bleed plate section. --- */
.split .wrap{display:grid; grid-template-columns:minmax(0,440px) minmax(28ch,1.1fr); gap:var(--s5); align-items:center}
.split.flip .wrap{grid-template-columns:minmax(28ch,1.1fr) minmax(0,440px)}
.split.flip .plate{order:2}
@media(max-width:1040px){
  .split .wrap,.split.flip .wrap{grid-template-columns:1fr; gap:var(--s4)}
  .split.flip .plate{order:0}
}
.split .plate{width:min(440px,100%)}
.split .plate img{width:100%; height:auto; filter:grayscale(1) brightness(.72)}
.split h2{margin-bottom:var(--s3); max-width:14ch}
.split .lab{display:block; margin-bottom:var(--s2)}

/* --- a source line. Every public figure says where it came from (MASTER §7b). --- */
.src-line{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line-soft);
  font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); opacity:.7;
}

/* --- the page you are on keeps its underline --- */
.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav ul a[aria-current="page"]{color:var(--bone)}

/* --- a section that carries a ledger --- */
.rates{border-top:1px solid var(--line)}

/* --- a quiet inline link out to another page. The home page's .door .go is the
       loud version; this is the same gesture inside a text block. --- */
.go{display:inline-flex; align-items:center; gap:12px; margin-top:var(--s3);
  font-family:'Oswald',sans-serif; font-weight:500; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase}
.go i{display:block; width:26px; height:1px; background:var(--red);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
.go:hover i{width:54px}

/* --- a band that carries two blocks of type side by side and nothing else --- */
.pro{border-top:1px solid var(--line)}
.pro .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5); align-items:end; padding-top:var(--s6); padding-bottom:var(--s6)}
@media(max-width:900px){.pro .wrap{grid-template-columns:1fr}}

/* ============================================================================
   ARTICLES  (added 2026-08-04 with the Shopify blog import)
   Used by the index and by all 24 generated pages, so it lives here.
   ============================================================================ */
.post{border-bottom:1px solid var(--line)}
.post .wrap{max-width:960px; padding:calc(var(--s6) + 26px) var(--pad) var(--s6)}
.post-head{padding-bottom:var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--line)}
.post-head .lab{display:block; margin-bottom:var(--s3)}
.post-head h1{font-size:clamp(32px,4.4vw,64px); line-height:.96; letter-spacing:-.015em; max-width:22ch}

/* Long-form is the ONE place the body type gets bigger. 16px is right for a page you
   scan; it is not right for two thousand words somebody actually reads. Measure stays
   inside MASTER §3 at 68ch. */
.prose{font-size:18px; line-height:1.68; max-width:68ch; color:var(--bone-2)}
.prose p{margin:0 0 1.25em; max-width:none}
.prose h2,.prose h3,.prose h4{margin:1.9em 0 .6em; text-wrap:balance}
.prose h2{font-size:clamp(22px,2.4vw,30px)}
.prose h3{font-size:clamp(19px,2vw,25px)}
.prose h4{font-size:17px; letter-spacing:.02em}
.prose strong{color:var(--bone); font-weight:600}
.prose a{border-bottom:1px solid var(--red); padding-bottom:1px}
.prose a:hover{color:var(--red)}
.prose ul,.prose ol{margin:0 0 1.25em; padding-left:1.15em}
.prose li{margin-bottom:.5em; padding-left:.2em}
.prose li::marker{color:var(--red)}
.prose blockquote{margin:1.6em 0; padding-left:var(--s3); border-left:2px solid var(--red)}
.prose blockquote p{margin:0; color:var(--bone)}
.post .go{margin-top:var(--s5)}

/* the index reuses the ledger; rows are links, so they need the reset */
.ledger a.lrow{color:inherit; text-decoration:none}
.ledger a.lrow .v{color:var(--dim); font-size:13px; letter-spacing:.06em; white-space:nowrap}
.ledger a.lrow:hover .n{color:var(--red)}

/* --- a simple page header: label, headline, one line of sub. Used by /start and
       /articles, so it belongs here rather than in either page. --- */
/* ================================================== B: THE INSTRUMENT
   Ruled 2026-08-12. The five pages with no picture at the top get the
   instrument language instead: the grid the page already carried, made
   visible; a measuring rail down the left edge with a live readout; and
   a headline that loads rather than simply being there.
   `.startpage` is on exactly these five and nothing else, so this block
   reaches faq, contact, articles, start and 404 and stops. Every piece
   is built by site.js, so a page needs no new markup and a browser with
   no JS gets the page exactly as it is today. */
.startpage{border-bottom:1px solid var(--line); position:relative; overflow:hidden}
/* the grid gets to be seen. 46px at 2.8% was a texture; 88px at 5% is a rule. */
.startpage.grid-bg::before{
  background-image:
    linear-gradient(to right, rgba(244,239,230,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,230,.05) 1px, transparent 1px);
  background-size:88px 88px;
}
.startpage .rail{position:absolute; left:20px; top:0; bottom:0; width:1px; background:var(--line); z-index:2; pointer-events:none}
.startpage .rail b{
  position:absolute; top:42%; writing-mode:vertical-rl; transform:translateX(7px);
  font-family:'Oswald',sans-serif; font-weight:500; font-size:10px; letter-spacing:.22em;
  color:var(--red); white-space:nowrap; font-variant-numeric:tabular-nums;
}
@media(max-width:1000px){.startpage .rail{display:none}}
.startpage .scan{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--red), transparent); opacity:0;
}
.startpage.lit .scan{animation:scanpass 1.9s cubic-bezier(.5,0,.2,1) .3s 1}
@keyframes scanpass{0%{opacity:0; top:0} 12%{opacity:.9} 100%{opacity:0; top:100%}}
/* NO CLIP-REVEAL ON THE HEADLINE. It was `overflow:hidden` on the h1 with the
   text sliding up from behind it, and on a slower page it could be caught
   mid-flight with the page's main heading half hidden, or stuck. A hero
   headline must never depend on an animation finishing. The scan line and the
   rail carry the "it loads" feeling and neither can hide anything. */
@media (prefers-reduced-motion:reduce){ .startpage.lit .scan{animation:none} }
.startpage .wrap{padding:calc(var(--s6) + 26px) var(--pad) var(--s4); max-width:var(--maxw)}
.startpage .lab{display:block; margin-bottom:var(--s3)}
.startpage h1{font-size:clamp(38px,5.4vw,84px); line-height:.92; letter-spacing:-.015em;
  max-width:17ch; margin-bottom:var(--s3)}
.startpage .sub{font-size:clamp(17px,1.5vw,20px); color:var(--bone-2); opacity:.8; max-width:52ch}
/* the h1 sits on a 0.92 line-height with a period on the end; without this the
   descender lands on top of the sub line */
.startpage h1{margin-bottom:var(--s4)}


/* ---------------------------------------------------------------- FILM
   B-roll dropped into the plates the photographs already occupy. No new
   layout, no new colour: a <video> sits exactly where an <img> sat. The
   clips ship pre-graded to black and white, so the CSS filter that a
   photograph needs is dialled back here, and the hero's slow zoom is off
   because the camera in the clip is already moving.
   Autoplay only ever works muted + playsinline; site.js also pauses any
   clip that is off screen and never starts one under prefers-reduced-motion,
   where the poster frame stands in and the section looks unchanged. */
.hero .plate video{animation:none; transform:none; filter:brightness(.8); object-position:center 44%}
.plate-sec .bg video{filter:brightness(.58)}
video[data-film]{background:var(--ink)}
/* A <video> paints its own poster attribute whenever it is not playing, and
   site.js never starts one under prefers-reduced-motion, so the still frame is
   the fallback with no second element and no second download. */
.ihero .plate video{width:100%; height:auto}


/* ---------------------------------------------------------------- PREMISE
   A single held sentence, used on /practice and /about. It lived in a <style>
   block inside practice.html while about.html used the same markup, so about's
   blockquote had been rendering as a browser default. One owner, two consumers. */
.tried{border-top:1px solid var(--line)}
.tried .wrap{padding-top:var(--s6); padding-bottom:var(--s6)}
.tried blockquote{
  margin:0; font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,46px); line-height:1.04; letter-spacing:-.008em;
  max-width:19ch; text-wrap:balance;
}
.tried blockquote em{font-style:normal; color:var(--red)}


/* ---------------------------------------------------------------- SIGN IN
   The one link in the nav that is not for somebody deciding. It carried a
   .signin class that styled nothing, so a member looking for the door read it
   as the fifth item in a row of five. It gets the red now, which is the only
   place on the site the accent is used as a surface outside a CTA, and that is
   the point: everything else in the bar is navigation, this is a door.
   The hover rule is the underline every other nav link has, switched off,
   because a filled button that also underlines looks broken. */
.nav ul a.signin{
  background:var(--red); color:var(--ink); padding:7px 14px; margin:-7px 0;
  letter-spacing:.16em; transition:background .2s;
}
.nav ul a.signin:hover{background:var(--bone); color:var(--ink)}
.nav ul a.signin::after{display:none}
/* and in the phone panel, where the links are stacked and full width */
.navpanel .navlinks a.signin{
  background:var(--red); color:#fff; padding-left:var(--pad); margin-top:var(--s3);
}
.navpanel .navlinks a.signin:hover{background:var(--bone); color:var(--ink)}


/* ---------------------------------------------------------------- CTA BAND
   A thin rule, one line, one button. Every page closed with a CTA and most had
   nothing before it, so on the long pages a reader who was convinced two thirds
   of the way down had nowhere to go but the footer. /faq, /contact and /404 had
   no button at all, which is backwards: those are the pages somebody lands on
   with a question already formed.
   Deliberately NOT another .start band. That block is a full section with a
   headline, and three of them on one page would be the same argument three
   times. This is a rule, a sentence and a door. */
.ctaband{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ctaband .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s4); padding-top:var(--s4); padding-bottom:var(--s4);
}
.ctaband p{margin:0; max-width:46ch; color:var(--bone-2); opacity:.86; font-size:16.5px}
.ctaband .cta{margin-top:0; padding:18px 28px}
@media(max-width:700px){
  .ctaband .wrap{flex-direction:column; align-items:flex-start; gap:var(--s3)}
}


/* ─────────────────────────────────────────────────────── TAP TARGETS (2026-08-14)
   Measured at 375px: 13 of 24 interactive elements were under the 44px minimum,
   with nav and footer links sitting at 16-19px tall. Type size is untouched; the
   padding grows and is pulled back with a negative margin, so the layout is
   identical and only the hittable area changes. */
@media (max-width:900px){
  nav a, footer a, .go, .lab a, .crumbs a{
    display:inline-flex; align-items:center; min-height:44px;
    padding-block:11px; margin-block:-11px;
  }
  nav a{ padding-inline:6px; margin-inline:-6px }
}

/* ───────────────────────────────────────────────────────── SKIP LINK (2026-08-14)
   First focusable element in the document. Off-screen until it takes focus, so a
   keyboard user can jump the nav and a mouse user never sees it. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--red); color:var(--bone);
  font:600 13px/1 var(--mono,monospace); letter-spacing:.08em; text-transform:uppercase;
  padding:14px 18px; text-decoration:none;
}
.skip:focus{ left:0 }


/* ───────────────────────────────────── LAST TWO TAP TARGETS (2026-08-14)
   Measured at 375px after the first pass: the skip link came in at 41px and the
   footer phone number at 32px. Both are links a thumb has to find. */
@media (max-width:900px){
  .tel, a[href^="tel:"]{
    display:inline-flex; align-items:center; min-height:44px;
    padding-block:9px; margin-block:-9px;
  }
}
.skip{ min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center }


/* ─────────────────────────────────────────── SIGN IN CONTRAST (2026-08-14)
   Ink on brand red measured 4.1:1 as rendered. The red is fixed by MASTER.md and
   the pairing is right, so what changes is the ink: a heavier weight at 11.5px
   lays down thicker strokes, which stops antialiasing thinning the glyphs into
   the background. The label looks the same size; it is simply less fragile. */
.nav ul a.signin{ font-weight:700 }


/* ──────────────────────────────────── SMALL RED NUMERALS (2026-08-14)
   The step and door numbers are brand red at 11-14px with wide tracking. The
   colour pairing is fine on paper; at that size the glyphs are mostly antialiased
   edge, and they measured 4.49:1 as rendered. Weight, not colour, is the fix. */
.door .no, .step .n{ font-weight:600 }