/* ============================================================
   STRIKELINE — shell.css
   Global chrome on every page: grain, cursor, curtain, nav,
   mobile menu, buttons, section headers, footer.
   Load after tokens.css, before page css.
   z-index scale: cursor 250 · curtain 180 · nav 170 ·
   mobile menu 160 · grain 118 · (preloader 200, home only)
   ============================================================ */

/* grain — film texture over everything, below chrome */
body::after{
  content:"";position:fixed;inset:-50%;z-index:118;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}30%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,3%)}}

/* custom cursor — fine pointers only, killed under reduced motion */
#cursorDot,#cursorRing{position:fixed;top:0;left:0;pointer-events:none;z-index:250;border-radius:50%;transform:translate(-50%,-50%)}
#cursorDot{width:6px;height:6px;background:var(--red)}
#cursorRing{width:36px;height:36px;border:1px solid rgba(244,242,238,.4);transition:width .3s,height .3s,border-color .3s,background .3s}
#cursorRing.grow{width:64px;height:64px;border-color:var(--red);background:rgba(229,116,43,.08)}
@media(pointer:coarse){#cursorDot,#cursorRing{display:none}}
html.reduced #cursorDot,html.reduced #cursorRing{display:none}

/* curtain — dark page-transition wipe (0.8s round trip) */
#curtain{position:fixed;inset:0;z-index:180;background:var(--bg);transform:translateY(100%);pointer-events:none}

/* nav */
nav{
  position:fixed;top:0;left:0;right:0;z-index:170;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--pad-x);height:var(--nav-h);
  transition:background .5s,border-color .5s;border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(28,28,30,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.25rem;letter-spacing:.06em}
.logo .mark{width:34px;height:34px;display:grid;place-items:center;transition:transform .5s var(--ease-out)}
.logo .mark img{display:block;width:100%;height:100%;object-fit:contain}
.logo:hover .mark{transform:rotate(90deg)}
nav .logo{white-space:nowrap;flex-shrink:0}
.nav-links{display:flex;gap:clamp(16px,1.6vw,26px);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;transition:color .3s}
.nav-links .nav-contact{color:var(--ink);font-weight:600}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--tan)}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-call{
  display:inline-flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:6px;min-height:44px;
  padding:10px 18px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  transition:background .35s,border-color .35s;
}
.nav-call img{display:block;flex:0 0 16px;width:16px;height:16px}
.nav-call span{display:block;line-height:1;white-space:nowrap}
.nav-call:hover{background:var(--red);border-color:var(--red)}
.nav-call:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.nav-cta{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
  background:var(--red);color:var(--ink);padding:12px 22px;
  transition:background .35s,color .35s;
}
.nav-cta:hover{background:var(--ink);color:var(--bg)}
.nav-burger{display:none;position:relative;width:44px;height:44px;flex-shrink:0;border:1px solid var(--ink-faint);transition:border-color .35s}
.nav-burger:hover{border-color:var(--ink)}
.nav-burger span{position:absolute;left:8px;right:8px;height:1px;background:var(--ink);transition:transform .4s var(--ease-out)}
.nav-burger span:nth-child(1){top:16px}
.nav-burger span:nth-child(2){top:23px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(min-width:1201px) and (max-width:1440px){
  nav .logo{font-size:0;gap:0}
  .nav-links{gap:16px;font-size:.7rem;letter-spacing:.12em}
  .nav-cta{padding:12px 16px}
}
@media(max-width:1200px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
  .nav-actions{margin-left:auto}
}
@media(max-width:600px){
  nav{gap:12px}
  nav .logo{font-size:0;gap:0}
  .nav-call{padding:10px 14px}
}

/* mobile menu — sits under the persistent nav bar */
.mobile-menu{
  position:fixed;inset:0;z-index:160;background:var(--bg);
  display:flex;flex-direction:column;justify-content:safe center;
  padding:calc(var(--nav-h) + 24px) var(--pad-x) 24px;visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu .mm-link{
  font-family:var(--display);font-size:clamp(2rem,6vw,3rem);
  text-transform:uppercase;line-height:1.05;padding:10px 0;
  border-bottom:1px solid var(--line);color:var(--ink);flex-shrink:0;
}
.mobile-menu .mm-link[aria-current="page"]{color:var(--tan)}
.mobile-menu .mm-cta{margin-top:var(--s-6);align-self:flex-start;flex-shrink:0}
html.mobile-nav-open,html.mobile-nav-open body{overflow:hidden}
nav :focus-visible,.mobile-menu :focus-visible{outline:2px solid var(--ink);outline-offset:4px}
:where(section[id],article[id],form[id],div[id]){scroll-margin-top:calc(var(--nav-h) + 20px)}
@media(max-width:1200px){
  html:not(.js) .nav-burger{display:none}
  html:not(.js) .mobile-menu{position:relative;visibility:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;padding:calc(var(--nav-h) + 16px) var(--pad-x) 16px}
  html:not(.js) .mobile-menu .mm-link{font-family:var(--body);font-size:.78rem;line-height:1.4;min-height:44px;display:flex;align-items:center}
  html:not(.js) .mobile-menu .mm-cta{grid-column:1/-1;margin-top:8px;justify-content:center}
}

/* buttons — sharp 0px corners per system */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:16px 30px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  position:relative;overflow:hidden;transition:color .4s;
}
.btn i{width:7px;height:7px;background:var(--red);position:relative;z-index:1;transition:background .4s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--bg)}
.btn:hover i{background:var(--bg)}
.btn.solid{background:var(--red);border-color:var(--red);color:var(--ink)}
.btn.solid i{background:var(--ink)}
.btn.solid::before{background:var(--ink)}
.btn.solid:hover{color:var(--bg)}
.btn.solid:hover i{background:var(--bg)}

/* section headers and labels */
.sec-tag{display:flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(44px,6vw,84px)}
.sec-head :is(h1,h2){font-size:clamp(3rem,7vw,6.2rem);line-height:.9;text-transform:uppercase;margin-top:16px}
.sec-head :is(h1,h2) em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink)}
.sec-head p{max-width:400px;color:var(--ink-dim);font-size:.93rem;line-height:1.7;font-weight:300}

/* app store badges — styled text slots until official artwork lands */
/* Monochrome vector arrows never depend on a phone's emoji font. */
.ui-arrow,.store-badge .sb-name::after{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.12em;background:currentColor;-webkit-mask:url('../assets/media/icons/arrow.svg') center/contain no-repeat;mask:url('../assets/media/icons/arrow.svg') center/contain no-repeat}
.ui-arrow--out{transform:rotate(-45deg)}
.ui-arrow--down{transform:rotate(90deg)}
.ui-arrow--back{transform:rotate(180deg)}
.store-badge{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--ink-faint);padding:12px 22px;transition:border-color .35s,background .35s}
.store-badge:hover{border-color:var(--ink);background:rgba(244,242,238,.04)}
.store-badge .sb-top{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.store-badge .sb-name{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;line-height:1}
.store-badge .sb-name::after{content:"";margin-left:.3em;transform:rotate(-45deg);color:var(--ink-dim)}

/* footer — global, all pages */
footer{border-top:1px solid var(--line);padding:60px var(--pad-x) 40px}
.footer-quick-links{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.footer-quick-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-quick-links a:hover{text-decoration:underline;text-underline-offset:5px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;margin-bottom:50px}
.foot-badges{display:flex;gap:14px;flex-wrap:wrap}
.foot-word{font-family:var(--display);font-size:clamp(4rem,14vw,13rem);line-height:.9;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.15);user-select:none;letter-spacing:.03em}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:.7rem;color:var(--ink-faint);letter-spacing:.08em}

/* footer aux row — legal/utility placeholders + clients dropdown (bridges until exercise.com is live) */
.foot-aux{display:flex;gap:clamp(40px,6vw,90px);flex-wrap:wrap;padding:24px 0;margin-bottom:44px;border-top:1px solid var(--line)}
.aux-col{display:flex;flex-direction:column;gap:14px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.aux-col a:hover{color:var(--ink)}
.aux-col.aux-cta a{color:var(--ink)}
.aux-col.aux-cta a:hover{color:var(--red)}
.clients-drop{position:relative}
.clients-btn{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink-dim);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:color .3s}
.clients-btn:hover{color:var(--ink)}
.cd-caret{color:var(--red);font-size:.8em;transition:transform .3s}
.clients-menu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);min-width:200px;background:var(--bg-2);border:1px solid var(--line);padding:8px 0;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:5}
.clients-menu a{display:block;padding:11px 18px;font-size:.7rem;letter-spacing:.14em;color:var(--ink-dim)}
.clients-menu a:hover{color:var(--ink);background:rgba(244,242,238,.04)}
.clients-drop:hover .clients-menu,.clients-drop:focus-within .clients-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.clients-drop:hover .cd-caret,.clients-drop:focus-within .cd-caret{transform:rotate(180deg)}

/* footer app tile — borderless; photo mask-fades into the footer background */
.foot-app{display:flex;margin-top:36px}
.app-tile{display:flex;align-items:center;gap:20px}
.app-tile .at-img{width:64px;aspect-ratio:263/550;overflow:hidden;flex-shrink:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent)}
.app-tile .at-img img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.9}
.app-tile b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;display:block}
.app-tile .at-sub{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin-top:4px;display:block}
.app-tile:hover .at-sub{text-decoration:underline}

/* reveal initial states — only hidden when JS is running;
   reduced motion shows everything static */
.js [data-reveal]{opacity:0;transform:translateY(60px)}

/* Submission feedback is independent of animation and visible to assistive technology. */
.form-status{font-family:var(--body);font-size:.88rem;line-height:1.6;margin:16px 0 0;overflow-wrap:anywhere}
.form-status:empty{display:none}
.form-status[data-state="error"]{color:var(--ink);border-left:3px solid var(--red);padding-left:12px}
.form-status[data-state="success"]{color:var(--tan)}
.form-delivery{margin-top:24px}
.form-delivery .btn{margin-top:12px}
.form-delivery [hidden]{display:none}
form[aria-busy="true"] button[type="submit"]{cursor:wait}
html:not(.js) .i-wizard-nav{display:none}
.js [data-clip]{clip-path:inset(0 0 100% 0)}
.js.motion-unavailable [data-reveal]{opacity:1;transform:none}
.js.motion-unavailable [data-clip]{clip-path:none}
.motion-unavailable body::after{animation:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-clip]{clip-path:none}
  body::after{animation:none}
}

/* split headlines — scroll-triggered char reveals [data-split-scroll] */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.sch{display:inline-block;transform:translateY(110%);will-change:transform}
.sec-head :is(h1,h2) .sch.em,.page-hero h1 .sch.em,.shop-wrap h1 .sch.em,.ty-wrap h1 .sch.em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink)}
.ty-wrap h1 .sch.em{color:var(--red);-webkit-text-stroke:0}
@media(prefers-reduced-motion:reduce){.sch{transform:none}}