/* Workout Gears — site styles. Tokens and rules: design/presence/result/handoff/HANDOFF.md */

@font-face{font-family:'Barlow';src:url(../fonts/Barlow-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/Barlow-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/Barlow-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url(../fonts/Barlow-ExtraBold.woff2) format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

:root{
  --accent:#D8332A;
  --bg:#08090B;
  --plate:#121418;
  --plate-2:#15171B;
  --plate-3:#0F1114;
  --deep:#0B0C0F;
  --footer:#050607;
  --text:#FFFFFF;
  --body:#D5D8DE;
  --muted:#B9BDC6;
  --muted-2:#C9CDD6;
  --work:#45D660;
  --rest:#B4B9FA;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg)}
a{color:var(--text)}
a:hover{color:#FF6A60}
a:focus-visible,summary:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
img{max-width:100%}
h1,h2,h3,p{margin:0}
.wg{font-family:'Barlow',system-ui,sans-serif;color:var(--text);background:var(--bg);overflow:hidden}
.wrap{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.hex{background-image:url(../img/hex-carbon.webp);background-size:520px auto;background-repeat:repeat}
.accent{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:#FFFFFF;color:var(--bg);padding:12px 18px;font-weight:700}
.skip:focus{left:0;color:var(--bg)}

/* Machined cuts */
.cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.cutband{clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%)}
.slant{clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%)}

/* Motion: slow gears, optional ticker. Nothing else moves. */
.spin{animation:wgspin 90s linear infinite}
.spinr{animation:wgspin 60s linear infinite reverse}
@keyframes wgspin{to{transform:rotate(360deg)}}
@keyframes wgticker{to{transform:translateX(-50%)}}

/* ---------- Type ---------- */
.label{font-size:14px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.label-sm{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.display{font-weight:900;font-size:clamp(44px,6vw,88px);line-height:.9;text-transform:uppercase;letter-spacing:-.01em}
.display-md{font-size:clamp(44px,5.6vw,84px);letter-spacing:0}
.lede{max-width:420px;font-size:19px;line-height:1.5;color:var(--body)}
.lede-wide{max-width:520px;line-height:1.55}
.small{font-size:15px;color:var(--muted)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:5;background:rgba(8,9,11,.92)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:flex;align-items:center}
.brand img{height:52px;width:auto;display:block}
.navlinks{display:flex;gap:32px;align-items:center;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.navlinks a,.menu-panel a{text-decoration:none}
.header-actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;background:var(--accent);color:#FFFFFF;font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn:hover{color:#FFFFFF;background:#B92A22}
.menu{display:none}
.menu summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--plate-2);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;list-style:none;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu-bars{display:inline-block;width:18px;height:2px;background:#FFFFFF;box-shadow:0 -6px 0 #FFFFFF,0 6px 0 #FFFFFF}
.menu[open] summary{background:#FFFFFF;color:var(--bg)}
.menu[open] .menu-bars{background:var(--bg);box-shadow:0 -6px 0 var(--bg),0 6px 0 var(--bg)}
.menu-panel{position:absolute;left:0;right:0;top:76px;background:var(--plate);display:flex;flex-direction:column;padding:8px 24px 20px;box-shadow:0 24px 40px rgba(0,0,0,.6)}
.menu-panel a{display:flex;align-items:center;min-height:52px;font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 -2px 0 var(--bg)}

/* ---------- Hero ---------- */
.hero-section{position:relative}
.hero-glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 72% 42%,rgba(216,51,42,.38),rgba(8,9,11,0) 70%)}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center;padding-top:56px;padding-bottom:72px}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--muted-2)}
.eyebrow::before{content:"";display:inline-block;width:40px;height:4px;background:var(--accent)}
.hero h1{font-weight:900;font-size:clamp(60px,8.6vw,132px);line-height:.86;letter-spacing:-.02em;text-transform:uppercase}
.hero-intro{max-width:540px;font-size:20px;line-height:1.5;color:var(--body)}
.tagband{align-self:flex-start;background:#FFFFFF;color:var(--bg);padding:10px 40px 10px 18px;font-weight:900;font-style:italic;font-size:26px;letter-spacing:.04em;text-transform:uppercase}
.stores{display:flex;flex-wrap:wrap;gap:14px}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-height:60px;padding:0 26px;background:#000000;color:#FFFFFF;text-decoration:none;box-shadow:inset 0 0 0 1px #3A3E46}
.store:hover{color:#FFFFFF;box-shadow:inset 0 0 0 1px #FFFFFF}
.store-pre{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.store-name{font-size:22px;font-weight:800}
.hero-art{position:relative;height:680px;display:flex;align-items:flex-end;justify-content:center}
.hero-gear{position:absolute;top:20px;left:50%;margin-left:-300px;width:600px;height:600px;max-width:none;opacity:.85}
.hero-gear-sm{position:absolute;top:0;right:0;width:150px;height:auto;opacity:.9}
.hero-lens{position:absolute;top:44px;right:41px;width:68px;height:68px}
.hero-coaches{position:relative;height:660px;width:auto;max-width:none;display:block}
.nextup{position:absolute;left:0;bottom:64px;background:#101216;padding:14px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.nextup-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--work)}
.nextup-combo{font-size:18px;font-weight:800;text-transform:uppercase}

/* ---------- Ticker ---------- */
.ticker{background:var(--accent);overflow:hidden}
.ticker-track{display:flex;width:max-content;padding:16px 0;white-space:nowrap;font-weight:900;font-style:italic;font-size:26px;text-transform:uppercase;letter-spacing:.02em;animation:wgticker 70s linear infinite}
.ticker-set{display:flex;gap:28px;padding-left:28px}
.ticker-set i{font-style:normal;opacity:.55}

/* ---------- Sections ---------- */
.section{padding-top:112px;padding-bottom:112px}
.stack{display:flex;flex-direction:column;gap:56px}
.stack-sm{gap:48px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.section-title{display:flex;flex-direction:column;gap:14px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.copy-col{display:flex;flex-direction:column;gap:26px}

/* How it works */
.step{background:var(--plate);display:flex;flex-direction:column}
.step-head{display:flex;align-items:baseline;justify-content:space-between;padding:28px 28px 0}
.step-num{font-size:88px;font-weight:900;line-height:.8;color:var(--accent)}
.step h3{margin:20px 28px 8px;font-size:32px;font-weight:800;text-transform:uppercase}
.step p{margin:0 28px 28px;font-size:17px;line-height:1.55;color:var(--body)}
.step-shot{margin-top:auto;background:var(--bg)}
.step-shot img{width:100%;height:auto;display:block}

/* Control language */
.controls{padding-top:128px;padding-bottom:128px;background-color:var(--plate-3)}
.controls .three{gap:40px;align-items:start}
.control{display:flex;flex-direction:column;gap:14px}
.control img{width:96px;height:96px}
.control h3{font-size:44px;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.95}
.control p{font-size:17px;line-height:1.5;color:var(--body)}
.plate-icon{width:96px;height:96px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.plate-icon span:first-child{height:18px;background:var(--accent)}
.plate-icon span:last-child{height:44px;background:#1A1D22}

/* Gears. Each gear owns one color: --g band, --gt band text, --glow behind the fighter. */
.gears-section{padding-top:112px;padding-bottom:96px}
.gears{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gear{position:relative;background-color:var(--plate);display:flex;flex-direction:column;--gt:#FFFFFF}
.gear-no{position:absolute;top:18px;left:20px}
.gear-art{height:380px;display:flex;justify-content:center;align-items:flex-end;background:radial-gradient(50% 50% at 50% 55%,rgb(var(--glow) / var(--ga,.34)),rgba(0,0,0,0) 70%)}
.gear-art img{height:360px;width:auto;display:block}
.gear-band{background:var(--g);color:var(--gt);padding:14px 40px 14px 20px;font-size:28px;font-weight:900;text-transform:uppercase}
.gear-copy{padding:18px 20px 24px;display:flex;flex-direction:column;gap:8px}
.gear-slogan{font-size:19px;font-weight:700;font-style:italic}
.gear-desc{font-size:16px;line-height:1.5;color:var(--muted-2)}
.g-muaythai{--g:#D8332A;--glow:216 51 42;--ga:.35}
.g-bootcamp{--g:#ECEEF2;--gt:#08090B;--glow:236 238 242;--ga:.22}
.g-taekwondo{--g:#D9A62C;--gt:#08090B;--glow:217 166 44;--ga:.32}
.g-hiit{--g:#D93A9B;--glow:217 58 155}
.g-mantis{--g:#1FA39A;--glow:31 163 154}
.g-yoga{--g:#6C5CE7;--glow:108 92 231}
.g-boxing{--g:#2F6FE0}
.g-kickboxing{--g:#EE7A22;--gt:#08090B}
.g-shotokan{--g:#ECEEF2;--gt:#08090B}
.g-krav{--g:#6F7F35}
.g-wingchun{--g:#8E3A8C}
.g-timer{--g:#36C45A;--gt:#08090B}
.more-wrap{display:flex;flex-direction:column;gap:18px;padding-top:16px}
.more-wrap .label{color:var(--muted-2)}
.more{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.more-gear{background:var(--plate);display:flex;flex-direction:column;--gt:#FFFFFF}
.more-art{height:150px;display:flex;justify-content:center;align-items:flex-end}
.more-art img{height:140px;width:auto}
.more-band{background:var(--g);color:var(--gt);padding:8px 12px;font-size:16px;font-weight:800;text-transform:uppercase}

/* Engine */
.engine{position:relative;background-color:var(--deep)}
.engine-glow{position:absolute;inset:0;background:radial-gradient(45% 55% at 70% 50%,rgba(31,163,154,.22),rgba(0,0,0,0) 70%)}
.engine .split{position:relative}
.engine-title{width:300px;height:auto;display:block;margin-left:-12px}
.rows{display:flex;flex-direction:column;gap:2px}
.row{display:flex;gap:18px;align-items:baseline;background:var(--plate-2);padding:16px 20px}
.row b{min-width:120px;font-size:18px;font-weight:900;text-transform:uppercase}
.row span{font-size:17px;color:var(--body)}
.engine-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:640px}
.engine-gear{position:absolute;width:560px;height:560px;max-width:none;opacity:.35}
.engine-shot{position:relative;width:300px;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.swatches{position:absolute;right:0;bottom:40px;display:flex;gap:8px}
.swatches span{width:28px;height:28px;background:var(--g)}

/* Record */
.record-art{display:flex;justify-content:center}
.record-frame{position:relative}
.record-frame img{width:320px;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.again{position:absolute;right:-36px;bottom:-18px;background:var(--accent);padding:12px 20px;font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{background:var(--plate-2);padding:12px 18px;font-size:17px;font-weight:800;text-transform:uppercase}
.note{font-size:17px;line-height:1.5;color:var(--muted-2)}

/* Respect for the arts */
.respect{background:var(--accent);position:relative;overflow:hidden}
.respect .split{gap:40px;padding-top:72px}
.respect-copy{display:flex;flex-direction:column;gap:22px;padding-bottom:72px}
.respect-quote{font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1.1}
.respect-body{font-size:18px;line-height:1.55;max-width:520px}
.respect-source{font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.respect-art{display:flex;justify-content:center;align-items:flex-end;align-self:end}
.respect-art img{height:460px;width:auto;display:block}

/* Built like a coach thinks */
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--bg)}
.feature{background:var(--plate);padding:32px 28px;display:flex;flex-direction:column;gap:10px}
.feature::before{content:"";width:32px;height:6px;background:var(--bar,var(--accent))}
.feature h3{font-size:24px;font-weight:800;text-transform:uppercase}
.feature p{font-size:17px;line-height:1.5;color:var(--body)}

/* Closing CTA */
.cta{position:relative;background-color:var(--deep);padding-top:120px;padding-bottom:120px;overflow:hidden}
.cta-gear{position:absolute;right:-180px;top:50%;margin-top:-330px;width:660px;height:660px;max-width:none;opacity:.4}
.cta-lens{position:absolute;right:25px;top:50%;margin-top:-125px;width:250px;height:250px;opacity:.95}
.cta .wrap{position:relative;display:flex;flex-direction:column;gap:30px}
.cta h2{font-weight:900;font-size:clamp(56px,9vw,150px);line-height:.84;text-transform:uppercase;letter-spacing:-.02em}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);padding-top:64px;padding-bottom:40px}
.site-footer .wrap{display:flex;flex-direction:column;gap:48px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:16px}
.foot-brand img{height:60px;width:auto;align-self:flex-start}
.foot-tag{font-size:18px;font-weight:800;font-style:italic;text-transform:uppercase}
.foot nav{display:flex;flex-direction:column;gap:12px;font-size:16px;align-items:flex-start}
.foot nav a{padding:4px 0}
.foot-rule{height:4px;background:var(--accent);width:80px}
.legal{font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- Text pages (support, privacy, terms, health) ---------- */
.page{padding-top:72px;padding-bottom:112px}
.page .wrap{max-width:860px;display:flex;flex-direction:column;gap:28px}
.page h1{font-weight:900;font-size:clamp(44px,6vw,80px);line-height:.9;text-transform:uppercase;letter-spacing:-.01em}
.page h2{margin-top:20px;font-size:26px;font-weight:800;text-transform:uppercase}
.page p,.page li{font-size:18px;line-height:1.6;color:var(--body)}
.page ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.page strong{color:#FFFFFF}
.page .draft{background:#FFFFFF;color:var(--bg);padding:14px 44px 14px 18px;font-size:17px;font-weight:700;align-self:flex-start}
.page .table-wrap{overflow-x:auto}
.page table{border-collapse:collapse;width:100%;min-width:560px}
.page th,.page td{text-align:left;vertical-align:top;padding:12px 14px;font-size:16px;line-height:1.5;color:var(--body);border-bottom:1px solid rgba(255,255,255,.12)}
.page th{color:#FFFFFF;font-weight:800;text-transform:uppercase;font-size:14px;background:var(--plate)}
.page mark.todo{background:#FFD400;color:#000;padding:0 3px}
.page code{font-size:.9em}
.page .callout{background:var(--plate);padding:22px 24px;font-weight:700;color:#FFFFFF}
.faq{display:flex;flex-direction:column;gap:2px}
.faq div{background:var(--plate);padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.faq h3{font-size:21px;font-weight:800}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero,.split,.three,.six{grid-template-columns:minmax(0,1fr)}
  .gears{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navlinks{display:none}
  .menu{display:block}
}
@media (max-width:560px){
  .gears{grid-template-columns:minmax(0,1fr)}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:minmax(0,1fr)}
  .site-header .wrap{gap:12px;padding-left:16px;padding-right:16px}
  .brand img{height:38px}
  .btn{padding:0 14px;font-size:13px}
  .menu summary{padding:0 12px;font-size:13px}
  .menu-panel{padding-left:16px;padding-right:16px}
  .hero h1{font-size:clamp(46px,15vw,60px)}
  .tagband{font-size:21px}
  .hero-art{height:480px}
  .hero-gear{top:20px;width:420px;height:420px;margin-left:-210px}
  .hero-gear-sm{width:110px}
  .hero-lens{top:32px;right:30px;width:50px;height:50px}
  .hero-coaches{height:460px}
  .nextup{bottom:36px}
  .again{right:-12px}
  .row{flex-direction:column;gap:4px}
  .section,.controls{padding-top:88px;padding-bottom:88px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spin,.spinr,.ticker-track{animation:none}
}