@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400.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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght.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:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-italic.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:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800-brand.woff2) format('woff2')}

/* LAYOUT CONCEPT
   One day, start to finish. The page runs night -> sunrise -> day -> night as you scroll,
   on an asymmetric, left-aligned grid. Ink and Sand are the two grounds. Ember is held back
   for the sun and one action per section. Steel appears only where lab data is shown.
   The single bold move is the scroll-driven sun path through the eight program modules. */
:root{
  --ink:#16130F; --ink-2:#211C17; --sand:#F6F1E8; --paper:#F4F1E9; --peach:#F9EAD6;
  --on-dark:#EFE7D9; --on-light:#1C1813; --muted:#8A8073;
  --on-light-soft:rgba(28,24,19,.74);
  --ember:#E2571E; --ember-deep:#B23E12; --steel:#35525C; --gold:#C9A96E;
  --line-dark:#322A20; --line-light:#DDD4C4;
  --display:'Anton','Impact','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --maxw:1240px;
  --nav-h:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{margin:0;background:var(--ink);color:var(--on-dark);font:400 1.0625rem/1.62 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;text-wrap:balance}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:3px}
.wrap{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--ember);color:var(--ink);padding:.6rem 1rem;border-radius:3px;font-weight:700;z-index:100}
.skip:focus{top:calc(var(--nav-h) + 8px)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;background:url(img/grain.webp) repeat;background-size:256px 256px;opacity:.05}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.85rem 1.5rem;border-radius:4px;background:var(--ember);color:var(--ink);font:700 1rem/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s,transform .2s}
.btn:hover{background:#F0682F;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{min-height:42px;padding:.55rem 1.05rem;font-size:.9375rem}
.btn--2l{flex-direction:column;gap:.15rem;text-align:center} /* the hero button reads "Start the Free" over "30-Day Strong Again Reset" at every width */
.btn--2l span{display:block}
.nav .btn{white-space:nowrap}
@media (max-width:599px){.btn--2l{width:100%}} /* on phones the hero button spans the column, as before */
@media (max-width:360px){.nav .btn--sm{padding-inline:.7rem}}
.btn--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--line:hover{background:var(--on-light);color:var(--sand)}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--ember)}
.tlink:hover{text-decoration-color:currentColor}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:var(--nav-h);background:rgba(22,19,15,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .25s}
.nav.is-scrolled{border-bottom-color:var(--line-dark)}
.nav__in{height:100%;display:flex;align-items:center;gap:clamp(12px,3vw,40px)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand img{width:52px;height:52px}
/* the wordmark follows the spelled-out caption of the logo: T-ROUTINE with an orange full stop */
.brand span{font:800 clamp(1.25rem,1.9vw,1.6rem)/1 'Montserrat',var(--body);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.brand .bdot{font-style:normal;color:var(--ember)}
.nav__links{display:flex;gap:clamp(14px,2.2vw,32px);list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-weight:500;font-size:.9375rem;opacity:.82;padding:.4rem 0;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.nav__links a:hover{opacity:1;border-bottom-color:var(--ember)}
@media (max-width:899px){.nav__links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(36px,6vw,84px) clamp(48px,7vw,96px)}
.hero__grid{--pc:clamp(300px,34vw,460px);--h:clamp(2.2rem,calc((100vw - 2 * var(--gutter) - var(--pc) * .85) / 7.3),7.7rem);position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) var(--pc);column-gap:clamp(28px,4vw,64px);row-gap:clamp(16px,2vw,28px);grid-template-rows:auto 1fr;align-items:start}
.hero h1{grid-column:1/-1;grid-row:1;position:relative;z-index:3;font-size:var(--h);line-height:.9;letter-spacing:.004em}
.hero__copy{grid-column:1;grid-row:2;align-self:center}
.ln{display:block;overflow:hidden;padding-block:.02em .06em}
.ln>span{display:block;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * .13s + .1s)}
.ln em{display:inline-block;font-style:normal;color:var(--ember);transform:skewX(-9deg);transform-origin:0 100%}
@keyframes lineUp{from{transform:translateY(108%)}}
/* GSAP takes over the headline entrance: it is held back for the first paint, then GSAP builds it letter by letter. The CSS slide-up above is the fallback when GSAP is not available. */
.gh .hero h1{visibility:hidden}
.gh .hero__bg,.gh .hero__photo{clip-path:inset(0 100% 0 0)}
.gh .hero__copy{opacity:0}
.gh .hero__rule{transform:scaleX(0)}
/* ember rule above the headline, drawn in by the "Founder, in the frame" entrance */
.hero__rule{position:absolute;left:0;top:calc(-1 * clamp(18px,2.2vw,30px));width:clamp(52px,5vw,72px);height:4px;background:var(--ember);transform-origin:left center;pointer-events:none}
.gsap-hero .ln>span{animation:none}
.lede{max-width:34rem;margin-top:clamp(20px,2.6vw,32px);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--on-dark)}
.lede b{font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(22px,3vw,36px)}
.hero__photo{position:relative;grid-column:2;grid-row:1 / span 2;margin:0;aspect-ratio:852/1230;max-height:min(68vh,700px);justify-self:end;width:100%;mix-blend-mode:lighten;animation:fadeIn 1.4s .3s ease backwards}
.hero__photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.02);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20%),linear-gradient(to top,transparent 0,#000 24%),linear-gradient(to left,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 8%);-webkit-mask-composite:source-in,source-in,source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 20%),linear-gradient(to top,transparent 0,#000 24%),linear-gradient(to left,transparent 0,#000 9%),linear-gradient(to bottom,transparent 0,#000 8%);mask-composite:intersect,intersect,intersect}
@keyframes fadeIn{from{opacity:0}}
.hero__sun{position:absolute;z-index:1;right:max(calc(var(--gutter) - 3vw),-2vw);bottom:-16%;width:clamp(340px,40vw,600px);animation:rise 2s cubic-bezier(.16,.8,.2,1) backwards}
.hero__sun svg{width:100%}
.hero__glow{position:absolute;z-index:0;inset:auto 0 0 auto;width:90%;height:75%;background:radial-gradient(60% 70% at 78% 100%,rgba(226,87,30,.34),transparent 70%);animation:fadeIn 2.4s ease backwards}
@keyframes rise{from{transform:translateY(58%)}}
@media (max-width:899px){
  .hero__grid{--h:clamp(2.2rem,calc((100vw - 2 * var(--gutter)) / 7.4),7rem);grid-template-columns:1fr;grid-template-rows:none}
  .hero h1,.hero__copy,.hero__photo{grid-column:auto;grid-row:auto}
  .hero__copy{align-self:start}
  .hero__photo{margin:0;max-height:none;max-width:440px;justify-self:start;aspect-ratio:4/5}
  .hero__sun{width:min(560px,110vw);right:-12vw;bottom:-14%}
  .hero[data-bg="cinematic"] .hero__grid{--h:clamp(2.2rem,calc((100vw - 2 * var(--gutter)) / 7.4),7rem)}
}

/* hero background switch: cinematic (full-bleed photo) or original (photo beside the headline) */
.hero__bg,.hero__scrim{display:none}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform}
.hero__bgwin{position:absolute;inset:0}
.hero__bgimg{position:absolute;inset:0;background:url(img/hero-cinematic.webp) center 18%/cover no-repeat;transform:scale(1.08);animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.18)}}
/* phones: the photo is a portrait, so "cover" shows it almost whole. Zoom in on the face like the wide screen does, and let it breathe a little more so the pulse is easy to see. */
@keyframes kenburnsM{from{transform:scale(2.8)}to{transform:scale(3.1)}}
@media (max-width:899px){
  /* close crop on the face, the same way the pull-up photo fills the training section. The crop point is measured from the top of the screen (the face does not move when the text block does), the lower part fades to dark behind the caption and buttons, and the headline gets the brand's thin black outline so it stays sharp over the face. */
  .hero__bgimg{background-position:50% 4%;transform-origin:48.9% 48.2vw;transform:scale(2.8);animation:kenburnsM 11s ease-in-out infinite alternate;will-change:transform;filter:brightness(1.25) contrast(1.06)}
  .hero[data-bg="cinematic"] .hero__scrim{background:linear-gradient(0deg,rgba(22,19,15,.94) 0,rgba(22,19,15,.9) 77vw,rgba(22,19,15,.55) 100vw,rgba(22,19,15,.28) 123vw,rgba(22,19,15,.12) 154vw,rgba(22,19,15,.06) 100%)}
  .hero h1{-webkit-text-stroke:max(.04em,2px) #000;paint-order:stroke fill}
  .hero .lede{text-shadow:0 1px 14px rgba(0,0,0,.85)}
}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(22,19,15,.95) 0%,rgba(22,19,15,.7) 38%,rgba(22,19,15,.15) 70%,rgba(22,19,15,.55) 100%),
  linear-gradient(0deg,rgba(22,19,15,.96) 2%,transparent 42%)}
.hero[data-bg="cinematic"]{min-height:calc(var(--vh,1vh) * 100 - var(--nav-h));display:flex;flex-direction:column;justify-content:flex-end;padding-block:clamp(28px,3.2vw,44px) clamp(36px,calc(var(--vh,1vh) * 8),96px)}
.hero[data-bg="cinematic"] .hero__bg,.hero[data-bg="cinematic"] .hero__scrim{display:block}
.hero[data-bg="cinematic"] .hero__photo,.hero[data-bg="cinematic"] .hero__sun{display:none}
.hero[data-bg="cinematic"] .hero__glow{z-index:1;inset:auto;right:-10%;top:20%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(226,87,30,.16),transparent 60%)}
.hero[data-bg="cinematic"] .hero__grid{--h:clamp(3.2rem,8.8vw,8.6rem);grid-template-columns:minmax(0,1fr);grid-template-rows:none}
.hero[data-bg="cinematic"] .hero__copy{align-self:start}
.bgswitch{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:4px;padding:5px 5px 5px 12px;border-radius:6px;background:rgba(22,19,15,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-dark);font:600 .75rem/1 var(--body);color:var(--on-dark)}
.bgswitch__g{display:flex;align-items:center;gap:4px}
.bgswitch__g+.bgswitch__g{margin-left:10px;padding-left:12px;border-left:1px solid var(--line-dark)}
.bgswitch__l{margin-right:6px;color:var(--muted)}
.bgswitch button{min-height:34px;padding:0 .8rem;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.bgswitch button:hover{background:rgba(239,231,217,.1)}
.bgswitch button[aria-pressed="true"]{background:var(--ember);color:var(--ink)}
@media (max-width:480px){.bgswitch{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 16px);padding:5px}.bgswitch__g+.bgswitch__g{margin-left:0;padding-left:0;border-left:0}.bgswitch__l{margin-right:2px}}

/* ---------- positioning strip ---------- */
.stance{background:var(--ink);border-top:1px solid var(--line-dark)}
.stance__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stance__item{position:relative;padding:clamp(24px,3.4vw,44px) clamp(18px,2.6vw,40px) clamp(24px,3.4vw,44px) 0;display:grid;gap:.7rem;align-content:start}
.stance__item+.stance__item{padding-left:clamp(18px,2.6vw,40px)}
.stance__item+.stance__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-dark);transform:scaleY(var(--rule,1));transform-origin:50% 0} /* --rule is driven by the scroll animation */
.stance h2{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1}
.stance p{color:rgba(239,231,217,.78);max-width:26rem}
@media (max-width:799px){
  .stance__grid{grid-template-columns:1fr}
  .stance__item,.stance__item+.stance__item{padding:24px 0}
  .stance__item+.stance__item::before{right:0;bottom:auto;width:auto;height:1px;transform:scaleX(var(--rule,1));transform-origin:0 50%}
}

/* ---------- story (sand) ---------- */
.story{background:var(--peach);color:var(--on-light);padding-block:clamp(64px,9vw,128px)}
.story h2{font-size:clamp(2.7rem,6.2vw,6rem);line-height:.93}
.story h2 .ember{color:var(--ember);display:inline-block;transform:skewX(-9deg);transform-origin:0 100%;-webkit-text-stroke:max(.028em,2px) #000;paint-order:stroke fill} /* thin black outline, drawn outside the letters */
.story__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.story__copy{display:grid;gap:1.15rem;max-width:36rem}
.story__copy h2{margin-bottom:.5rem}
.story__copy .big{font-size:clamp(1.15rem,1.7vw,1.375rem);line-height:1.5}
.portrait{margin:0;max-width:440px;justify-self:end;width:100%}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 34%;border-radius:4px;filter:saturate(.78) contrast(1.03)}
.portrait figcaption{text-align:center;font-style:italic} /* caption centred under the portrait, true italic */
figcaption{font-size:.875rem;line-height:1.45;margin-top:.7rem;color:var(--on-light-soft)}
.story__proof{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(48px,7vw,96px)}
.report{--num:clamp(3.4rem,6.4vw,5.6rem);background:var(--ember);color:var(--ink);border-radius:4px;padding:clamp(20px,3.2vw,40px);display:grid;gap:clamp(18px,2.4vw,28px)}
.report h3{font:600 .8125rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rep{display:grid;grid-template-columns:calc(var(--num) * 1.8) minmax(0,1fr);column-gap:clamp(12px,2vw,24px);align-items:end}
.rep__when{grid-column:1/-1;font-size:.9375rem;color:var(--ink);margin-bottom:.35rem}
.rep__num{font:400 var(--num)/.9 var(--display);font-variant-numeric:tabular-nums;color:var(--peach);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
/* 396 and 1219 shine like the buttons: a glossy peach face and a slow sweep of light clipped to the digits. The ink outline stays. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rep__num .count{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px var(--ink); /* with a clear fill the whole stroke shows, so it is a little thinner to keep the same outline weight */
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 44%,rgba(255,255,255,.96) 50%,rgba(255,255,255,0) 56%,rgba(255,255,255,0) 100%) 100% 0/300% 100% no-repeat,
               linear-gradient(180deg,#FFF7EA 0%,#FBEBD6 36%,#F6DDBF 62%,#E9C195 100%);
    -webkit-background-clip:text;background-clip:text;animation:numShine 3.8s ease-in-out 1.4s infinite}
  .rep__num .count[data-to="1219"]{animation-delay:1.9s}
}
@keyframes numShine{0%,62%{background-position:100% 0,0 0}100%{background-position:0% 0,0 0}}
@media (prefers-reduced-motion:reduce){.rep__num .count{animation:none}}
@media (forced-colors:active){.rep__num .count{background:none;color:CanvasText;-webkit-text-fill-color:currentColor;animation:none}}
.bar{height:16px;border-radius:2px;background:rgba(22,19,15,.2);margin-bottom:.45rem;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--v));transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
.bar--dim i{background:rgba(22,19,15,.66)}
.rep__axis{display:grid;grid-template-columns:calc(var(--num) * 1.8) minmax(0,1fr);column-gap:clamp(12px,2vw,24px);font-size:.8125rem;color:var(--ink);font-variant-numeric:tabular-nums}
.rep__axis div{position:relative;height:1.7rem;border-top:1px solid rgba(22,19,15,.5)}
.rep__axis div span{position:absolute;top:.3rem;left:var(--x);transform:translateX(-50%)}
.rep__axis div span:first-child{transform:none}
.rep__axis div span:last-child{transform:translateX(-100%)}
.lab{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px);align-items:center;border-top:1px solid rgba(22,19,15,.35);padding-top:clamp(18px,2.4vw,28px)}
.lab img{width:100%;border-radius:3px}
.lab p{font-size:.875rem;line-height:1.5;color:var(--ink);text-align:center;font-style:italic}
/* clickable scores: each card of the results graphic opens its original lab report */
.lab__fig{position:relative}
.hot{position:absolute;display:block;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:clamp(8px,1.5vw,18px);transition:box-shadow .2s,background-color .2s;-webkit-tap-highlight-color:transparent}
.hot:hover,.hot:focus-visible{background:rgba(226,87,30,.08);box-shadow:0 0 0 3px var(--ember),0 10px 26px -10px rgba(22,19,15,.55)}
.hot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* the popup: one dialog, three original lab reports */
dialog.labs{padding:0;margin:auto;border:1px solid var(--line-dark);border-radius:6px;background:var(--ink-2);color:var(--on-dark);width:min(calc(100vw - 24px),600px);max-width:none;height:min(calc(100dvh - 24px),940px);max-height:none;overflow:hidden;touch-action:pinch-zoom;overscroll-behavior:contain;box-shadow:0 40px 90px -20px rgba(0,0,0,.8)}
dialog.labs[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;animation:labsIn .22s cubic-bezier(.2,.8,.2,1)}
dialog.labs::backdrop{background:rgba(12,10,7,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes labsIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.labs__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.75rem .75rem .5rem 1.1rem}
.labs__title{font:400 clamp(1.3rem,3vw,1.6rem)/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.labs__x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--line-dark);border-radius:4px;background:transparent;color:var(--on-dark);cursor:pointer;transition:border-color .2s,color .2s}
.labs__x:hover{border-color:var(--ember);color:var(--ember)}
.labs__x svg{width:18px;height:18px}
.labs__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 .75rem .6rem}
.labs__tab{display:flex;align-items:baseline;justify-content:center;gap:.5rem;min-width:0;min-height:44px;padding:.35rem .4rem;border:1.5px solid var(--line-dark);border-radius:4px;background:transparent;color:var(--on-dark);font:500 .875rem/1.1 var(--body);cursor:pointer;transition:border-color .2s,background-color .2s}
.labs__tab b{font:400 1.3rem/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.labs__tab:hover{border-color:var(--ember)}
.labs__tab[aria-selected="true"]{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.labs__tab[aria-selected="true"] b{color:var(--ink)}
.labs__stage{position:relative;min-height:0;background:var(--ink-2)}
.labs__img{position:absolute;inset:0 .75rem;margin:auto;display:block;max-width:calc(100% - 1.5rem);max-height:100%;width:auto;height:auto;border-radius:4px;background:#fff}
.labs__note{padding:.6rem 1rem .8rem;font-size:.8125rem;line-height:1.45;color:var(--on-dark);opacity:.78;text-align:center}
@media (max-width:480px){.labs__tab{flex-direction:column;align-items:center;gap:.25rem;font-size:.75rem}}
@media (prefers-reduced-motion:reduce){dialog.labs[open]{animation:none}.hot,.labs__x,.labs__tab{transition:none}}
.ba{margin:0;width:100%;position:sticky;top:calc(var(--nav-h) + 24px)}  /* fills the right-hand column and stays alongside the tall results panel */
.ba img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 22px 44px -26px rgba(22,19,15,.5)}
.ba figcaption{text-align:center;font-style:italic} /* caption centred under the photo, true italic */
@media (min-width:1000px){.story__proof{grid-template-columns:minmax(0,11fr) minmax(0,13fr)}} /* wider photo column; below 1000px the results panel keeps its room */
@media (max-width:899px){
  .story__top,.story__proof{grid-template-columns:1fr}
  .ba{position:static;max-width:560px}
  .portrait{justify-self:start;max-width:380px}
  .lab{grid-template-columns:1fr}
}

/* ---------- the routine dial ---------- */
.dial{background:var(--ink);position:relative}
.dial__head{padding-block:clamp(64px,9vw,120px) clamp(24px,3vw,40px);display:grid;gap:clamp(1rem,2vw,1.6rem);justify-items:center;text-align:center}
.dial__head h2{font-size:clamp(3.2rem,9.6vw,9.6rem);line-height:.9}
.dial__head p{max-width:40rem;margin-inline:auto;color:rgba(239,231,217,.84);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55}
.dial__stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.mods{display:grid;gap:clamp(28px,4vw,48px)}
.mods__title{margin:0;font:400 1.625rem/1.15 var(--display);letter-spacing:.05em;text-transform:uppercase;transform:skewX(-9deg);color:#fff;text-align:center;-webkit-text-stroke:.045em #000;paint-order:stroke fill}
.mods__title .e{color:inherit}
.mods__title .hy{color:var(--ember);-webkit-text-stroke:.1em #000;paint-order:stroke fill} /* brand-orange hyphen with a thicker black outline */
.mod__n{font:600 .875rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}
.mod h3{font-size:clamp(2.5rem,5vw,4.8rem);line-height:.95;margin-block:.7rem 1rem;-webkit-text-stroke:.045em #000;paint-order:stroke fill} /* thin black outline, outside the letters */
.mod p{max-width:30rem;color:rgba(239,231,217,.9)}
.arc{position:relative;aspect-ratio:880/490;width:100%}
.arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the sun is the T-Routine logo animation, lifted off its cream backdrop so it sits straight on the dark section; the frames are 448x555 and the ball's centre sits at 49.9% x 42.7% of each one, so that point is what rides the arc */
.logo-sun{position:absolute;left:50%;top:50%;width:min(40%,220px);aspect-ratio:448/555;transform:translate(-50%,calc(-42.7% - var(--lift,0%)));pointer-events:none;background:url(img/logo/f112.webp) center/100% 100% no-repeat}
.logo-sun.on{background:none}
.logo-sun canvas{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){.logo-sun{background-image:url(img/logo/f036.webp)}}
.stop{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid var(--line-dark);background:var(--ink-2);color:rgba(239,231,217,.7);font:600 .75rem/1 var(--body);display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .25s,color .25s,border-color .25s}
.stop:hover{border-color:var(--ember);color:var(--on-dark)}
.stop.is-passed{border-color:var(--ember);color:var(--on-dark)}
.stop.is-on{background:var(--ember);border-color:var(--ember);color:var(--ink)}
.dial__foot--pin{display:none}
.dial__foot{padding-block:clamp(16px,2vw,28px) clamp(56px,7vw,96px);font-size:clamp(.72rem,1.2vw,.875rem);color:var(--muted);text-align:center;text-wrap:balance;margin-inline:auto}
/* pinned, scroll-linked version: wide screens that allow motion */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .dial__track{height:520vh}
  /* the stage fills the screen under the nav; the arc is the whole picture and the module text sits inside the dome */
  .dial__stage{--S:calc(100vh - var(--nav-h));--Wa:min(100vw,calc(var(--S) * 1.796));--Ha:calc(var(--Wa) / 1.796);
    display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h));height:var(--S);min-height:560px;width:100%;max-width:none;margin:0;padding:0}
  .arc{position:absolute;left:50%;top:50%;width:var(--Wa);transform:translate(-50%,-50%)}
  .logo-sun{width:16%}
  /* the footnote rides up into the empty band under the horizon, left of the sun's wordmark, instead of leaving a gap below the stage */
  .dial{--S:calc(100vh - var(--nav-h));--Wa:min(100vw,calc(var(--S) * 1.796));--Ha:calc(var(--Wa) / 1.796)}
  .dial__foot{position:relative;z-index:1;padding-block-start:0;max-width:calc(var(--Wa) * .55);margin-top:calc(-1 * ((var(--S) - var(--Ha)) / 2 + var(--Ha) * .1225 - 22px))}
  /* the module text is centred in the dome, not parked on the horizon */
  /* a fixed title sits just under the sun's highest point, with the module text hanging below it; all eight modules share one cell, so nothing shifts between modules */
  .mods{--n:clamp(.875rem,calc(var(--Wa) * .0095),1.125rem);position:absolute;z-index:2;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr);--f:clamp(2.8rem,calc(var(--Wa) * .06),5.6rem);--m:clamp(4px,calc((var(--Wa) - 900px) * .03),22px);--tf:clamp(1.5rem,calc(var(--Wa) * .0195),2.2rem);row-gap:max(calc(var(--n) * .6),calc(max(calc(var(--n) * 1.5),calc(var(--Ha) * .045)) + clamp(0px,calc((var(--Wa) - 1000px) * .05),30px) - var(--m) - (var(--tf) - var(--n) * 1.4) * 1.15));width:calc(var(--Wa) * .6);top:calc(var(--S) / 2 - var(--Ha) * .15 + var(--Wa) * .0125);pointer-events:none}
  .mods__title{grid-area:1/1;font-size:var(--tf);margin-top:var(--m)}
  .mod{grid-area:2/1;align-self:start;text-align:center;transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
  .mod.is-on{opacity:1;transform:none;pointer-events:auto}
  .mod p{margin-inline:auto}
  .mod p.mod__n{font-size:var(--n)}
  .mod h3{font-size:var(--f);margin-block:.55rem .8rem;max-width:9.2em;margin-inline:auto}
  .mod p:not(.mod__n){max-width:calc(var(--Wa) * .5);text-wrap:balance;font-size:clamp(1.125rem,calc(var(--Wa) * .0125),1.5rem);line-height:1.5}
}
@media (min-width:900px) and (max-height:640px) and (prefers-reduced-motion:no-preference){
  .mod h3{margin-block:.55rem .4rem}
  .mod p:not(.mod__n){line-height:1.38}
}
#glowG{pointer-events:none}
@media (max-width:899px),(prefers-reduced-motion:reduce){
  .dial{overflow:clip} /* the sun's glow is wider than the stage; unpinned, it must not spill over the story section above */
  .dial__stage{grid-template-columns:1fr}
  .arc{order:-1}
  .stop{display:none}
  .mods{counter-reset:m}
  .mod{padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--line-dark)}
}
/* phones that allow motion: the same pinned, scroll-linked sun as the wide layout. The sun rides the arc and the modules switch as you scroll; the stops are tappable. Reduced motion keeps the plain stacked list above. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  /* --S is the visible height under the nav; the pinned stage only takes what its content needs (capped), so tall phones are not left with an empty band */
  .dial{--S:calc(var(--vh,1vh) * 100 - var(--nav-h));--H:min(var(--S),610px)}
  .dial__track{height:calc(var(--H) + var(--vh,1vh) * 380)}
  .dial__stage{display:flex;flex-direction:column;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--nav-h) + (var(--S) - var(--H)) / 2);height:var(--H);min-height:500px;padding-block:8px 12px;gap:0;justify-content:space-between}
  /* the footnote lives inside the pinned stage, so it leaves with the last module instead of stranding a blank band between the two */
  .dial__footwrap{display:none}
  .dial__foot--pin{display:block;order:2;margin:0;padding:0;font-size:.8125rem;line-height:1.4}
  .logo-sun{width:24%}
  .stop{display:grid;width:34px;height:34px;margin:-17px 0 0 -17px;font-size:.8125rem}
  /* all eight modules share one cell, so nothing shifts between modules; the gap under the arc is where the spear and wordmark land */
  .mods{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px;margin-top:clamp(30px,8.5vw,48px)}
  .mods__title{grid-area:1/1;font-size:1.3rem}
  .mod{grid-area:2/1;align-self:start;text-align:center;padding-top:0;border-top:0;transform:translateY(14px);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
  .mod.is-on{opacity:1;transform:none;pointer-events:auto}
  .mod p{margin-inline:auto}
  .mod h3{font-size:clamp(2.3rem,10.8vw,3.2rem);margin-block:.5rem .7rem;max-width:11em;margin-inline:auto}
  .mod p:not(.mod__n){font-size:1.125rem;line-height:1.5;text-wrap:balance}
  /* the longest title takes two lines instead of three; the shared cell is as tall as the tallest module, so this also trims the space under the shorter ones */
  .mod[data-i="5"] h3{font-size:clamp(1.9rem,9.2vw,2.7rem);max-width:none}
}
/* short phones; .short is set by the script above from the measured height, so it does not flip when the toolbar moves */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .short .mods{margin-top:20px}
  .short .mod:not([data-i="5"]) h3{font-size:clamp(1.8rem,8vw,2.2rem)}
  .short .mod p:not(.mod__n){font-size:.96rem;line-height:1.42}
}

/* ---------- training ---------- */
.train{background:var(--ink-2);padding-block:clamp(64px,9vw,128px);overflow:hidden}
/* training background switch: the pull-up photo fills the section and breathes slowly like the hero photo ("photo"), or the photo sits beside the text as before ("classic") */
.train__bg,.train__scrim{display:none}
.train__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.train__bgimg{position:absolute;top:0;left:20%;width:80%;height:100%;object-fit:cover;object-position:50% 14%;max-width:none;transform-origin:62% 30%;transform:scale(1.08);animation:kenburns 14s ease-in-out infinite alternate;filter:saturate(.9) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.train__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(33,28,23,.94) 0%,rgba(33,28,23,.8) 34%,rgba(33,28,23,.3) 64%,rgba(33,28,23,.5) 100%),
  linear-gradient(0deg,var(--ink-2) 0%,rgba(33,28,23,.84) 22%,rgba(33,28,23,.5) 48%,rgba(33,28,23,.08) 74%),
  linear-gradient(180deg,var(--ink-2) 0%,rgba(33,28,23,0) 9%)}
.train[data-bg="photo"]{position:relative;isolation:isolate}
.train[data-bg="photo"] .train__bg,.train[data-bg="photo"] .train__scrim{display:block}
.train[data-bg="photo"] .train__photo{display:none}
.train[data-bg="photo"]>.wrap{position:relative;z-index:2}
@media (max-width:899px){
  .train__bgimg{left:0;width:100%;object-position:50% 30%}
  .train__scrim{background:linear-gradient(0deg,var(--ink-2) 0%,rgba(33,28,23,.9) 24%,rgba(33,28,23,.74) 60%,rgba(33,28,23,.66) 100%),linear-gradient(180deg,var(--ink-2) 0%,rgba(33,28,23,0) 7%)}
}
.train__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.train__intro{max-width:34rem;color:rgba(239,231,217,.86);margin-block:.9rem clamp(14px,2vw,24px)}
.cycle__title{font-size:clamp(2.2rem,4.4vw,4rem);line-height:.95}
/* "Two recovery days." is slanted with the brand's -9deg turn (Anton has no true italic) and sits in the same quiet colour as the REST days below */
.cycle__title .recov{display:inline-block;color:rgba(239,231,217,.34);transform:skewX(-9deg)}
.days{--dsz:clamp(2.6rem,6.2vw,6rem);--sg:clamp(26px,4.2vw,58px);display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;margin:0;padding:0} /* row two sits centred under row one */
.drow{display:flex;align-items:center;column-gap:var(--sg)}
.dg{position:relative;flex:none}
.dw{display:flex;overflow:hidden;padding-inline:.14em;margin-inline:-.14em} /* mask for the rise; padding keeps the slanted selected word from clipping */
.dw__in{display:flex}
.sep{position:absolute;left:100%;top:0;bottom:0;width:var(--sg);display:flex;align-items:center;justify-content:center;font:300 calc(var(--dsz) * .74)/1 var(--body);color:rgba(239,231,217,.34);user-select:none;pointer-events:none}
.day{background:none;border:0;padding:.05em 0 .1em;margin:0;cursor:pointer;color:rgba(239,231,217,.34);font:400 var(--dsz)/1 var(--display);text-transform:uppercase;letter-spacing:.004em;transition:color .25s,transform .25s,box-shadow .25s}
.day:hover{color:rgba(239,231,217,.7)}
.day:focus-visible{outline-offset:-3px} /* the ring stays inside the rise mask */
.day.is-lit,.day.is-lit:hover{color:var(--on-dark)} /* pull, push and legs sit in the light colour; rest stays quiet */
.day[aria-selected="true"]{color:var(--on-dark);transform:skewX(-9deg);box-shadow:inset 0 -.055em 0 var(--ember)}
.day[aria-selected="true"].is-turn{color:var(--ember)}
.day-detail{min-height:7.9rem;margin-top:clamp(12px,1.6vw,20px);max-width:34rem;color:var(--on-dark)}
@media (max-width:440px){.day-detail{min-height:8.7rem}}
@media (max-width:400px){.day-detail{min-height:10.3rem}}
@media (max-width:340px){.day-detail{min-height:12rem}}
.day-detail h3{font:600 clamp(1.3rem,2vw,1.7rem)/1.2 var(--body);text-transform:none;letter-spacing:-.01em;margin-bottom:.55rem}
.day-detail p{font-size:1.0625rem;line-height:1.55;color:rgba(239,231,217,.88)}
.cycle__rule{display:flex;gap:16px;align-items:flex-start;max-width:34rem;margin-top:clamp(8px,1.4vw,18px);padding-top:1.1rem;border-top:1px solid var(--line-dark);font-size:.9375rem;line-height:1.5;color:rgba(239,231,217,.84)}
.cycle__rule b{color:var(--ember);font:400 1.6rem/1 var(--body)}
.sets{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(28px,4vw,48px)}
.sets>div{background:var(--ink-2);border:1px solid var(--line-dark);padding:clamp(16px,1.8vw,22px) clamp(14px,1.6vw,20px) clamp(18px,2vw,24px);transform-origin:0 50%}
/* "The connected routine": GSAP adds a line, a square node under each set and a pulse that passes focus from one set to the next */
.sets--wired{padding-bottom:clamp(44px,4.6vw,60px)}
.sets__link{position:absolute;height:3px;background:var(--line-dark);transform-origin:0 50%;pointer-events:none}
.sets__node{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--ember);pointer-events:none}
.sets__pulse{position:absolute;width:20px;height:7px;margin:-3.5px 0 0 0;background:var(--on-dark);opacity:0;pointer-events:none}
.sets h3{font:600 .8125rem/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ember);margin-bottom:.5rem}
.sets p{font-size:.9375rem;line-height:1.5;color:rgba(239,231,217,.84)}
.levels{margin-top:clamp(36px,5vw,64px)}
.levels h3{font-size:clamp(2.2rem,4.4vw,4rem);line-height:.95;text-wrap:balance}
.lvl-tabs{display:flex;gap:10px;margin-top:1.2rem;flex-wrap:wrap}
/* every level button shines brand orange: a glossy ember face, a soft halo, and a slow light sweep that ripples from Level 1 to Level 4.
   The chosen level is marked with a cream ring and a stronger glow, so it still reads at a glance. */
.lvl{position:relative;isolation:isolate;overflow:hidden;min-width:84px;min-height:46px;padding:.5rem 1.1rem;border-radius:4px;border:1.5px solid #F47A44;
  background:linear-gradient(180deg,#F26A31 0%,var(--ember) 52%,#D24B15 100%);color:var(--ink);font:600 .9375rem/1 var(--body);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,222,196,.55),0 0 12px rgba(226,87,30,.42),0 0 30px rgba(226,87,30,.2);transition:box-shadow .3s,transform .2s}
.lvl:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,222,196,.65),0 0 16px rgba(226,87,30,.6),0 0 38px rgba(226,87,30,.3)}
.lvl[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,222,196,.6),0 0 0 2px var(--ink),0 0 0 4px var(--on-dark),0 0 22px rgba(226,87,30,.75),0 0 50px rgba(226,87,30,.4)}
.lvl::after,.btn--shine::after{content:"";position:absolute;z-index:-1;top:-12%;bottom:-12%;left:-55%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,236,218,.75),rgba(255,255,255,0));transform:translateX(0) skewX(-9deg);animation:lvlShine 3.8s ease-in-out calc(1s + var(--k,0) * .3s) infinite}
.lvl:nth-of-type(2){--k:1}.lvl:nth-of-type(3){--k:2}.lvl:nth-of-type(4){--k:3}
@keyframes lvlShine{0%,62%{transform:translateX(0) skewX(-9deg)}100%{transform:translateX(520%) skewX(-9deg)}}
/* the free-reset button shines the same way as the level buttons: glossy ember face, soft halo, slow light sweep behind the label */
.btn--shine{position:relative;isolation:isolate;overflow:hidden;border:1.5px solid #F47A44;
  background:linear-gradient(180deg,#F26A31 0%,var(--ember) 52%,#D24B15 100%);
  box-shadow:inset 0 1px 0 rgba(255,222,196,.55),0 0 12px rgba(226,87,30,.42),0 0 30px rgba(226,87,30,.2);transition:box-shadow .3s,transform .2s}
.btn--shine:hover{background:linear-gradient(180deg,#F26A31 0%,var(--ember) 52%,#D24B15 100%);box-shadow:inset 0 1px 0 rgba(255,222,196,.65),0 0 16px rgba(226,87,30,.6),0 0 38px rgba(226,87,30,.3)}
/* "Join the Club" is the same shining button in the brand gold: a glossy gold face, a soft gold halo, the same light sweep */
.btn--gold{border-color:#E8D3A0;background:linear-gradient(180deg,#E6CE97 0%,var(--gold) 52%,#A98A47 100%);
  box-shadow:inset 0 1px 0 rgba(255,248,230,.7),0 0 0 1px rgba(150,114,40,.28),0 0 12px rgba(201,169,110,.5),0 0 30px rgba(201,169,110,.26)}
.btn--gold:hover{background:linear-gradient(180deg,#EDD8A4 0%,#D2B478 52%,#B3924E 100%);box-shadow:inset 0 1px 0 rgba(255,248,230,.8),0 0 0 1px rgba(150,114,40,.32),0 0 16px rgba(201,169,110,.72),0 0 38px rgba(201,169,110,.38)}
.btn--gold::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,250,236,.85),rgba(255,255,255,0))}
/* "Book A Call" is the black shining button, the same glossy black and light sweep as the final "Start the Free Reset" button */
.btn--black{color:var(--on-dark);border-color:#3A3028;background:linear-gradient(180deg,#2C251F 0%,#16130F 52%,#0D0B09 100%);
  box-shadow:inset 0 1px 0 rgba(239,231,217,.24),0 0 0 1px rgba(22,19,15,.9),0 10px 24px -8px rgba(22,19,15,.65)}
.btn--black:hover{color:var(--on-dark);background:linear-gradient(180deg,#3A3129 0%,#211C17 52%,#14110D 100%);box-shadow:inset 0 1px 0 rgba(239,231,217,.3),0 0 0 1px rgba(22,19,15,.9),0 12px 28px -8px rgba(22,19,15,.75)}
.btn--black::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,236,218,.5),rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){.lvl::after,.btn--shine::after{animation:none;display:none}.lvl,.lvl:hover{transform:none}}
@media (max-width:480px){.lvl-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.lvl{min-width:0;padding-inline:.4rem}} /* all four levels sit on one row on a phone */
.lvl-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);margin-top:1.4rem;align-items:end}
.lvl-stat{border-top:3px solid var(--ember);padding-top:.7rem}
.lvl-stat small{display:block;font:600 .8125rem/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(239,231,217,.75)}
.lvl-stat b{display:block;font:400 clamp(3rem,6vw,5.2rem)/1 var(--display);margin-top:.3rem;font-variant-numeric:tabular-nums}
.lvl-stat span{display:block;font-size:.875rem;color:rgba(239,231,217,.72);min-height:1.3em}
.lvl-stat .rng{font-style:normal;margin-inline:.16em} /* breathing room around the dash in "1–3" */
.lvl-cap{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,28px)}
.lvl-text{flex:0 1 40rem;min-width:0;font-size:1.0625rem;color:rgba(239,231,217,.9)}
/* a cast-iron plate on each side of the caption, shown on level 4 (weighted) */
.plate{position:relative;display:none;flex:none;width:clamp(64px,14vw,164px);aspect-ratio:1/1;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.plate img{display:block;width:100%;height:100%}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 20%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%) var(--gx,-250%) 0/70% 100% no-repeat;
  -webkit-mask:radial-gradient(closest-side,#000 93%,transparent 100%);mask:radial-gradient(closest-side,#000 93%,transparent 100%)}
.lvl-cap[data-l4="1"] .plate{display:block}
.lvl-cap[data-l4="1"] .lvl-text{flex:0 1 auto;max-width:29rem;text-wrap:balance}
.safety{margin-top:clamp(24px,3.4vw,40px);font-size:.875rem;line-height:1.55;font-style:italic;color:var(--muted);max-width:40rem}
.train__photo{margin:0}
.train__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%;filter:saturate(.88) contrast(1.02);
  /* rounded corners with a light feather: a softly blurred rounded rectangle is used as the mask */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3Crect x='9' y='9' width='282' height='382' rx='36' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3C/filter%3E%3Crect x='9' y='9' width='282' height='382' rx='36' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the section's copy is centred in its column */
.train__grid>div:first-child{text-align:center}
/* set columns, levels and safety note: centred on the full page width, below the photo row */
.train__more{max-width:46rem;margin-inline:auto;text-align:center}
.train .days,.train__intro,.day-detail,.cycle__rule,.lvl-text,.safety{margin-inline:auto}
.cycle__rule{flex-direction:column;align-items:center;gap:6px}
.lvl-tabs{justify-content:center}
@media (max-width:899px){
  .train__grid{grid-template-columns:1fr}
  .train__photo{position:static;order:-1;max-width:420px;margin-inline:auto}
  .sets{grid-template-columns:1fr}
  .sets--wired{padding-bottom:0;padding-left:34px}
  .sets__link{width:3px;transform-origin:50% 0}
  .sets__pulse{width:7px;height:20px;margin:0 0 0 -3.5px}
}

/* ---------- ways in (sand) ---------- */
.ways{background:var(--sand);color:var(--on-light);padding-block:clamp(64px,9vw,128px) 0} /* no bottom padding: the ledger's closing rule is the only line before "Straight answers" */
.ways__head{display:grid;gap:1rem;margin-bottom:clamp(28px,4vw,56px)}
.ways__head h2{font-size:clamp(2.7rem,6.2vw,6rem);line-height:.93}
.ways__head p{max-width:36rem;font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--on-light-soft)}
/* headline is split into masked letters by the GSAP reveal; without GSAP it stays plain text */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.sc{display:inline-block;will-change:transform}
/* slanted words: the brand's -9deg turn, one word at a time so the line still wraps naturally. Anton has no true italic. The split script keeps the .sl class on the masked words. */
.sl{display:inline-block;transform:skewX(-9deg)}
.ledger{list-style:none;margin:0;padding:0;border-top:2px solid var(--on-light)}
.row{display:grid;grid-template-columns:minmax(0,3.5fr) minmax(0,2.4fr) minmax(0,4.7fr) minmax(0,2.2fr);gap:clamp(16px,2.4vw,36px);align-items:start;padding-block:clamp(24px,3.2vw,40px);border-bottom:1px solid var(--line-light)}
.row h3{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1}
.row__sub{margin-top:.5rem;font-size:.9375rem;color:var(--on-light-soft)}
.row__price{font:400 clamp(2.1rem,3.2vw,3rem)/1 var(--display);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.row__cta .btn{white-space:nowrap}
.row__price small{display:block;font:500 .875rem/1.4 var(--body);text-transform:none;color:var(--on-light-soft);margin-top:.4rem}
.row__cta{justify-self:end}
.row .btn--line:hover{background:var(--on-light)}
/* "Book a Call" is a link to the booking page (on phones it also shines, see the phone block below) */
.callink{color:inherit;text-decoration:none}
@media (min-width:600px){.callink:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.tier{padding-top:.9rem;border-top:3px solid var(--on-light)}
.tier--prem{border-top-color:var(--gold)}
.tier h4{margin:0 0 .7rem;text-align:center;font:700 1rem/1.3 var(--body)}
.tier ul{margin:0;padding:0 0 0 1.05rem;display:grid;gap:.35rem;font-size:.9375rem;line-height:1.45;color:var(--on-light-soft)}
.row__note{grid-column:1/-1;font-size:.875rem;font-style:italic;color:var(--on-light-soft)}
/* "Book a Call" sat tight against the Basic card; pull it left so it centers in the space between the title and the plans */
@media (min-width:1100px){.row__price--call{margin-left:calc(-1 * min(2.5vw, 36px))}}
@media (max-width:1099px){
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .row__body{grid-column:1/-1;order:3}
  .row__cta{justify-self:start;grid-column:1/-1;order:4}
}
@media (max-width:599px){
  .row{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:14px;padding-block:28px}
  .row__price{text-align:right}
  .row__price--call{grid-column:1/-1;text-align:left}
  .row__cta{justify-self:stretch}
  .row__cta .btn{display:flex;width:100%;justify-content:center;min-height:52px}
  .tiers{grid-template-columns:1fr;gap:26px}
  /* Basic and Premium sit in plain boxes (black and gold), set in the same Anton as "Book a Call" at the same 1rem size */
  .tier{padding-top:0;border-top:0}
  .tier h4{margin:0 0 .85rem;padding:.62rem .75rem .56rem;border:3px solid var(--on-light);border-radius:4px;
    font:400 1rem/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--on-light)}
  .tier--prem h4{border-color:#BF9D58}
  /* "Book a Call" is a link to the booking page: plain letters with a gold underline, like the other text links */
  .callink{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:.14em}
}
/* ---------- faq ---------- */
.faq{background:var(--sand);color:var(--on-light);padding-block:0 clamp(64px,9vw,128px)}
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);padding-top:clamp(40px,6vw,80px)}
.faq h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:.95}
details{border-bottom:1px solid var(--line-light)}
details:first-of-type{border-top:2px solid var(--on-light)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:1.15rem 0;font:600 1.1875rem/1.35 var(--body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 2rem/1 var(--display);color:var(--ember-deep);flex:none;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 2.5rem 1.4rem 0;max-width:42rem;color:var(--on-light-soft)}
@media (max-width:899px){.faq__grid{grid-template-columns:1fr}}

/* ---------- final cta ---------- */
.final{--blaze:#FF713D;position:relative;background:var(--blaze);color:var(--ink);overflow:hidden;padding-block:clamp(64px,9vw,128px)}
.final__grid{display:grid;grid-template-columns:clamp(240px,29vw,420px) minmax(0,1fr) clamp(236px,21vw,300px);gap:clamp(20px,2.6vw,44px);align-items:center}
.final__photo{margin:0;max-width:420px;aspect-ratio:3/4}
/* rounded corners and a soft edge that melts into the orange: the picture is masked by a blurred rounded rectangle */
.final__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(.88);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3C/filter%3E%3Crect x='16' y='16' width='268' height='368' rx='44' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3C/filter%3E%3Crect x='16' y='16' width='268' height='368' rx='44' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.final h2{color:var(--ink);font-size:clamp(3.75rem,12.4vw,11.5rem);line-height:.88;max-width:3.6em} /* two stacked lines, as in the reference */
/* "Start Today" shines like the black reset button: a glossy black face and the same slow sweep of light, clipped to the letters */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .final h2{color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,236,218,0) 45%,rgba(255,236,218,.72) 50%,rgba(255,236,218,0) 55%,rgba(255,255,255,0) 100%) 100% 0/300% 100% no-repeat,
               linear-gradient(180deg,#2A231D 0%,#16130F 45%,#0B0908 100%);
    -webkit-background-clip:text;background-clip:text;animation:headShine 3.8s ease-in-out 1s infinite}
}
@keyframes headShine{0%,62%{background-position:100% 0,0 0}100%{background-position:0% 0,0 0}}
@media (prefers-reduced-motion:reduce){.final h2{animation:none}}
@media (forced-colors:active){.final h2{background:none;color:CanvasText;-webkit-text-fill-color:currentColor;animation:none}}
.final__matte{position:absolute;top:-1px;bottom:-1px;left:-240px;right:-240px;z-index:6;background:var(--ink);pointer-events:none}
.final__copy{display:grid;gap:clamp(18px,2.4vw,28px)}
.final__copy p{font-size:clamp(1rem,1.25vw,1.125rem);color:var(--ink);max-width:34rem}
.final .btn{background:var(--ink);color:var(--on-dark);border-radius:0;justify-content:space-between;gap:1.6rem;min-width:min(100%,15.5rem);padding-inline:1.4rem}
.final .btn:hover{background:#2B241D}
/* the black "Start the Free Reset" shines like the level buttons: a glossy black face and the same slow sweep of light, color kept black */
.final .btn--shine{border-color:#3A3028;background:linear-gradient(180deg,#2C251F 0%,#16130F 52%,#0D0B09 100%);
  box-shadow:inset 0 1px 0 rgba(239,231,217,.24),0 0 0 1px rgba(22,19,15,.9),0 10px 24px -8px rgba(22,19,15,.65)}
.final .btn--shine:hover{background:linear-gradient(180deg,#3A3129 0%,#211C17 52%,#14110D 100%);box-shadow:inset 0 1px 0 rgba(239,231,217,.3),0 0 0 1px rgba(22,19,15,.9),0 12px 28px -8px rgba(22,19,15,.75)}
.final .btn--shine::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,236,218,.5),rgba(255,255,255,0))}
.final .btn svg{flex:none}
.final .tlink{text-decoration-color:var(--ink)}
.final :focus-visible{outline-color:var(--ink)}
@media (max-width:899px){
  .final__grid{grid-template-columns:1fr;align-items:start;gap:28px}
  .final__photo{max-width:min(100%,410px)}
  .final h2{font-size:clamp(4rem,34vw,9rem)}
}
.mailrow{font-size:.9375rem;color:var(--ink)}
.maillink{white-space:nowrap;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--ink)}
.maillink:hover{text-decoration-color:currentColor}

/* ---------- footer ---------- */
.foot{--fsun:clamp(180px,17vw,260px);position:relative;overflow:hidden;background:var(--ink);border-top:1px solid var(--line-dark);padding-block:clamp(36px,5vw,64px) calc(clamp(36px,5vw,64px) + 24px)}
.foot::before{content:"";position:absolute;z-index:0;right:0;bottom:0;width:min(60%,760px);height:100%;background:radial-gradient(60% 90% at 78% 100%,rgba(226,87,30,.2),transparent 72%);pointer-events:none}
/* the sun is a true half circle on the page's bottom edge, at the right, beside the copyright line */
.foot__sun{position:absolute;z-index:0;right:-2vw;bottom:calc(var(--fsun) / -2);width:var(--fsun);opacity:.92}
.foot__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.foot .brand img{width:64px;height:64px}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 28px;margin:1rem 0 0;padding:0;list-style:none;font-size:.9375rem}
.foot__links a{text-decoration:none;opacity:.86}
.foot__links a:hover{opacity:1;text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:5px;text-decoration-thickness:2px}
.foot small{display:block;font-size:.8125rem;line-height:1.6;color:var(--muted);max-width:46rem}
.foot small+small{margin-top:.8rem}
@media (max-width:799px){.foot{padding-bottom:calc(var(--fsun) / 2 + 28px)}.foot__grid{grid-template-columns:1fr}.foot__sun{right:auto;left:-2vw} /* the chat bubble sits at bottom right, so the sun moves to the left */}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ln>span,.hero__photo,.hero__sun,.hero__glow,.hero__bgimg,.train__bgimg{animation:none}
  .bar i{transition:none}
  .btn:hover{transform:none}
}

/* ---------- inner pages (Contact, Privacy) ---------- */
.page{background:var(--ink);color:var(--on-dark)}
.page__head{padding-block:clamp(44px,7vw,96px) clamp(16px,2.5vw,32px)}
.page__rule{display:block;width:clamp(48px,6vw,72px);height:4px;background:var(--ember);margin-bottom:clamp(16px,2vw,24px)}
.page__head h1{font-size:clamp(2.8rem,8vw,6.4rem);line-height:.92;letter-spacing:.004em}
.page__sub{margin-top:.9rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.page__body{padding-block:clamp(20px,3vw,40px) clamp(72px,10vw,136px)}
.prose{max-width:44rem}
.prose h2,.contact h2{font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1;letter-spacing:.004em}
.prose h2{margin:2.2em 0 .55em}
.prose p{margin:0 0 1.05em;color:rgba(239,231,217,.86);overflow-wrap:anywhere}
.prose strong{color:var(--on-dark);font-weight:600}
.contact{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{margin-bottom:.7em}
.contact__mail{font-weight:600;font-size:clamp(1.05rem,1.8vw,1.3rem);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--ember);overflow-wrap:anywhere}
.contact__mail:hover{text-decoration-color:currentColor}
.contact__lead{max-width:36rem;color:rgba(239,231,217,.86);margin-bottom:1.6rem}
.formcard{background:var(--sand);color:var(--on-light);border-radius:6px;padding:clamp(16px,2.4vw,28px)}
.formcard iframe{display:block;width:100%}
@media (max-width:899px){.contact{grid-template-columns:minmax(0,1fr)}}