/* =====================================================================
   FITNESS ZONE: shared design system (gym site + FZ Lifestyle store)
   Direction: after-hours training floor. Black/charcoal grit, one red
   (#DE1818, measured from the vectorized FZ logo), thin red brush strokes.
   Type follows the brand portfolio: Chakra Petch only, Regular and Bold,
   self-hosted from the kit's 07-fonts. Brush lettering is logo art, never a font.
   ===================================================================== */
@font-face{font-family:'Chakra Petch';src:url("fonts/ChakraPetch-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url("fonts/ChakraPetch-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#0a0a0a; --char:#111111; --char-2:#171717; --char-3:#1f1f1f; --line:#262626; --line-2:#333;
  --bone:#f4f1ec; --bone-2:#d9d4cc; --mute:#a39e97; --dim:#6e6a65;
  --red:#de1818; --red-hot:#f0302f; --red-deep:#9a1010;
  /* one family, three roles: headlines, uppercase labels/UI, running text */
  --display:'Chakra Petch', sans-serif;
  --label:'Chakra Petch', sans-serif;
  --body:'Chakra Petch', sans-serif;
  --wrap:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M2 16 C34 10 76 8 124 7 C176 6 232 4 299 1 L296 7 C262 9 240 10 216 11 L232 12.5 C190 14 142 16 98 17.5 C62 18.5 32 19.5 4 21 Z' fill='%23de1818'/%3E%3C/svg%3E");
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1 2 L9 .6 L17 1.8 L26 .4 L35 1.5 L44 .3 L53 1.6 L62 .5 L71 1.7 L80 .4 L89 1.4 L99 .6 L98.6 9 L99.6 18 L98.4 27 L99.5 36 L98.3 45 L99.6 54 L98.5 63 L99.4 72 L98.4 81 L99.5 90 L98.8 99.2 L90 98.4 L81 99.6 L72 98.3 L63 99.5 L54 98.4 L45 99.6 L36 98.2 L27 99.4 L18 98.5 L9 99.6 L.8 98.8 L1.6 90 L.4 81 L1.5 72 L.3 63 L1.6 54 L.5 45 L1.7 36 L.4 27 L1.5 18 L.5 9 Z' fill='%23000'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- atmosphere ---------- */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.06;pointer-events:none;z-index:1;mix-blend-mode:screen}
.grain > *{position:relative;z-index:2}
.concrete{background:
  radial-gradient(120% 80% at 15% 0%, #1d1d1d 0%, transparent 55%),
  radial-gradient(90% 70% at 100% 100%, #161616 0%, transparent 60%),
  linear-gradient(180deg,#0e0e0e,#0a0a0a)}
.spot{background:
  radial-gradient(60% 55% at 70% 38%, rgba(222,24,24,.12), transparent 70%),
  radial-gradient(80% 90% at 20% 10%, #202020 0%, transparent 60%),
  #0a0a0a}

/* ---------- type ---------- */
.brush{font-family:var(--display);font-weight:700;line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.red{color:var(--red)}
.cond{font-family:var(--label);text-transform:uppercase}
.label{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.label i{font-style:normal;color:var(--red);margin:0 .7em}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.label .pip{margin-right:12px;vertical-align:middle}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(36px,4.4vw,66px);line-height:1;letter-spacing:-.01em}
.h3{font-family:var(--label);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:.04em;line-height:1.05}
.lead{color:#c8c3bb;font-size:19px;font-weight:400;max-width:50ch;line-height:1.65}
.body-l{color:#b9b4ac;font-weight:400}
.u{position:relative;display:inline-block;z-index:0}
.u::after{content:"";position:absolute;left:-3%;right:-6%;bottom:-.2em;height:.24em;background:var(--stroke) no-repeat center/100% 100%;z-index:-1}
.stroke-line{display:block;width:120px;height:10px;background:var(--stroke) no-repeat center/100% 100%}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(244,241,236,.22)}
.num{font-family:var(--label);font-weight:400;letter-spacing:.2em;font-size:13px;color:var(--red)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:17px 28px;border:1.5px solid transparent;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease);white-space:nowrap;line-height:1}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-red{background:var(--red);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);padding-right:40px}
.btn-red:hover{background:var(--red-hot)}
.btn-ghost{border-color:#56524d;color:var(--bone)}
.btn-ghost:hover{border-color:var(--bone);background:rgba(244,241,236,.04)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:#fff}
.btn-block{width:100%}
.link-ar{font-family:var(--label);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:15px;display:inline-flex;gap:10px;align-items:center;border-bottom:1.5px solid var(--red);padding-bottom:4px}
.link-ar:hover{color:#fff}

/* ---------- brand lockup ---------- */
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:40px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1.15}
.brand .wm b{font-weight:400;letter-spacing:.42em;font-size:13px}
.brand .wm span{font-size:9.5px;letter-spacing:.5em;color:var(--mute);font-weight:400}

/* ---------- nav ---------- */
.util{background:#050505;border-bottom:1px solid #1a1a1a;font-family:var(--label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#aaa49c}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.util .live{display:flex;align-items:center;gap:10px;color:var(--bone);font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(222,24,24,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(222,24,24,0)}100%{box-shadow:0 0 0 0 rgba(222,24,24,0)}}
.util .r{display:flex;gap:28px}
.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #1d1d1d}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:28px}
.nav-links{display:flex;gap:34px;font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#cbc6be}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links .shop{color:var(--bone)}
.nav-links .shop .pip{margin-left:5px;vertical-align:super}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav .btn{padding:13px 22px 13px 22px;font-size:15px}
.nav .btn-red{padding-right:30px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;background:var(--bone);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-7px}.burger span::after{top:7px;width:16px}
.mobile-menu{display:none}
.mobile-menu.open{display:block;border-top:1px solid #222;padding:8px 20px 22px;background:#0c0c0c}
.mobile-menu a{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #1d1d1d;font-family:var(--label);font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* ---------- ticker ---------- */
.ticker{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;position:relative;z-index:3}
.ticker .row{display:inline-flex;gap:0;padding:15px 0;font-family:var(--label);font-weight:700;font-size:21px;letter-spacing:.26em;text-transform:uppercase;animation:tick 40s linear infinite}
.ticker .row span{padding:0 28px}
.ticker .row i{font-style:normal;color:rgba(0,0,0,.45)}
.ticker.dark{background:#0d0d0d;border-block:1px solid #1f1f1f;color:var(--bone)}
.ticker.dark .row i{color:var(--red)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- media frames ---------- */
.torn{-webkit-mask:var(--torn) center/100% 100% no-repeat;mask:var(--torn) center/100% 100% no-repeat}
.ph{position:relative;overflow:hidden;background:
  radial-gradient(70% 60% at 30% 20%, #262626, transparent 70%),
  linear-gradient(160deg,#1a1a1a,#0d0d0d)}
.ph::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.09;mix-blend-mode:screen}
.ph-tag{position:absolute;left:14px;bottom:12px;font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#77726c;display:flex;gap:8px;align-items:center;z-index:2}
.ph-tag::before{content:"";width:6px;height:6px;border:1px solid #77726c;border-radius:50%}

/* ---------- reveal (content visible by default; JS opts in) ---------- */
html.js .rv{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
html.js .rv.in{opacity:1;translate:0 0}
html.js .rv.d1{transition-delay:.08s}html.js .rv.d2{transition-delay:.16s}html.js .rv.d3{transition-delay:.24s}html.js .rv.d4{transition-delay:.32s}
html.js .load{opacity:0;animation:up 1s var(--ease) forwards}
.l1{animation-delay:.05s!important}.l2{animation-delay:.18s!important}.l3{animation-delay:.3s!important}.l4{animation-delay:.42s!important}.l5{animation-delay:.54s!important}
@keyframes up{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .load{opacity:1!important;translate:none!important;animation:none!important;transition:none!important}
  .ticker .row,.dot{animation:none!important}
}

/* ---------- forms ---------- */
.field{display:grid;gap:8px}
.field label{font-family:var(--label);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);font-weight:400}
.field input,.field select,.field textarea{background:#0e0e0e;border:1px solid #2c2c2c;padding:15px 16px;font-size:16px;outline:none;transition:border-color .2s;border-radius:0;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.field input::placeholder,.field textarea::placeholder{color:#5f5b56}

/* ---------- footer ---------- */
.footer{background:#060606;border-top:1px solid #1a1a1a;padding:90px 0 34px;position:relative;overflow:hidden}
.footer .big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,9.4vw,140px);line-height:.9;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px #252525;white-space:nowrap;margin:0 0 70px}
.footer .grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:56px}
.footer h4{font-family:var(--label);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:20px;font-weight:700}
.footer ul{list-style:none;display:grid;gap:11px;color:#d0cbc3;font-size:15px;font-weight:400}
.footer ul a:hover{color:#fff}
.footer p{color:#9a958e;font-weight:400;font-size:15px;max-width:34ch}
.footer .legal{display:flex;justify-content:space-between;gap:20px;margin-top:70px;padding-top:26px;border-top:1px solid #1a1a1a;color:var(--dim);font-size:13px;flex-wrap:wrap;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:42px;height:42px;border:1px solid #2f2f2f;display:grid;place-items:center;transition:.2s}
.socials a svg{width:17px;height:17px;fill:#cfcac2}
.socials a:hover{border-color:var(--red)}
.socials a:hover svg{fill:var(--red)}

@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .footer .grid{grid-template-columns:1fr 1fr}
  .util .r{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .nav .wrap{height:66px;gap:10px}
  .brand img{height:34px}
  .brand .wm b{font-size:11px;letter-spacing:.34em}
  .brand .wm span{font-size:8px;letter-spacing:.42em}
  .nav .btn{padding:11px 14px;font-size:13px;letter-spacing:.12em}
  .nav .btn-red{padding-right:22px}
  .footer .grid{grid-template-columns:1fr;gap:40px}
  .btn{padding:16px 22px;font-size:15px}
  .btn-red{padding-right:30px}
  .ticker .row{font-size:16px;padding:12px 0}
  .ticker .row span{padding:0 18px}
  .lead{font-size:17px}
  .util{font-size:11px;letter-spacing:.14em}
}