/* ============================================================================
   CORE The Gym — shared design system
   Single source of truth for tokens, chrome (nav + footer), hero, sections
   and all responsive rules. Every page links this file; page-specific section
   styles stay inline on each page. Change something here → every page updates.
   ============================================================================ */

:root{
  --bg:      #0F1210;
  --bg-2:    #131714;
  --surf:    #191E19;
  --surf-2:  #202720;
  --line:    #2A322A;
  --line-2:  #384038;

  --ink:      #F2F5EF;
  --ink-dim:  #A7B1A3;
  --ink-faint:#717C6E;

  --green:    #38D430;
  --green-d:  #2AA824;
  --pink:     #FF40B4;
  --pink-d:   #E02A9C;

  --brand: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --disp:  "Archivo", system-ui, sans-serif;
  --ui:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1220px;
  --r: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:17px; line-height:1.6;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--green); color:#04120a; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:5px; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 30px; }

.dot{ color:var(--pink); }

/* CORE. wordmark inline (Impact italic) */
.core{ font-family:var(--brand); font-style:italic; font-weight:400; color:var(--green); text-transform:uppercase; letter-spacing:.01em; }
.core .dot{ color:var(--pink); }

.eyebrow{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
          display:inline-flex; align-items:center; gap:9px; color:var(--ink-dim); }
.eyebrow b{ width:7px; height:7px; border-radius:50%; background:var(--pink); flex:0 0 auto; }

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--ui); font-weight:700;
      font-size:15px; padding:15px 26px; border-radius:100px; border:1.6px solid transparent; cursor:pointer;
      transition:transform .2s var(--ease), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap; }
.btn.sm{ padding:11px 19px; font-size:14px; }
.btn .ar{ transition:transform .2s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn-green{ background:var(--green); color:#04120a; }
.btn-green:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(56,212,48,.7); }
.btn-out{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-out:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); }

/* LOGO — stacked (THE GYM underneath) */
.logo{ font-family:var(--brand); font-style:italic; font-weight:400; display:inline-flex; flex-direction:column; align-items:center;
       line-height:.78; text-transform:uppercase; }
.logo .top{ font-size:45px; letter-spacing:.01em; }
.logo .w{ color:var(--green); } .logo .top .dot{ color:var(--pink); }
.logo .sub{ font-style:normal; font-family:var(--ui); font-weight:600; font-size:10.5px; letter-spacing:.34em; color:var(--ink-dim); margin-top:5px; text-align:center; padding-left:.34em; }

/* SCROLL PROGRESS */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; }
.progress .fill{ height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:var(--pink); }

/* NAV */
.nav{ position:fixed; inset:2px 0 auto 0; z-index:150; height:82px; display:flex; align-items:center;
      transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; border-bottom:1px solid transparent; }
.nav.solid{ background:rgba(15,18,16,.9); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px; }
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links > a, .more-btn{ font-family:var(--ui); font-size:14px; font-weight:500; color:var(--ink-dim); transition:color .2s ease; position:relative; background:none; border:none; cursor:pointer; }
.nav-links > a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--green); transition:width .25s var(--ease); }
.nav-links > a:hover{ color:var(--ink); } .nav-links > a:hover::after{ width:100%; }
.nav-links > a.here{ color:var(--ink); } .nav-links > a.here::after{ width:100%; }
.more{ position:relative; }
.more-btn{ display:inline-flex; align-items:center; gap:6px; }
.more:hover .more-btn{ color:var(--ink); }
.more::after{ content:""; position:absolute; top:100%; left:-20px; right:-20px; height:18px; }
.more-menu{ position:absolute; top:calc(100% + 16px); right:0; min-width:216px; background:rgba(18,22,19,.98); backdrop-filter:blur(14px);
            border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:2px;
            opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility .2s; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); }
.more:hover .more-menu, .more:focus-within .more-menu, .more.open .more-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.more-menu a{ padding:10px 12px; border-radius:9px; font-size:14px; color:var(--ink-dim); }
.more-menu a:hover{ background:var(--surf-2); color:var(--green); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta-mobile{ display:none; }
.nav-join-m{ display:none; }

.burger{ display:none; position:relative; width:46px; height:46px; background:none; border:1px solid var(--line-2); border-radius:11px; cursor:pointer; padding:0; }
.burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--ink); border-radius:2px;
              transition:transform .25s var(--ease), opacity .18s ease, top .25s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:22px; } .burger span:nth-child(3){ top:29px; }
.nav.menu-open .burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav.menu-open .burger span:nth-child(2){ opacity:0; }
.nav.menu-open .burger span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ============================================================================
   HERO — the unified page header. Same size on every page.
   Content pages use .hero (animated headline). Placeholder pages use .ph.
   ============================================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:128px 0 70px; overflow:hidden; }
.hero::before{ content:""; position:absolute; right:-18vw; bottom:-26vw; width:70vw; height:70vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(56,212,48,.15), rgba(56,212,48,0) 64%); filter:blur(24px); pointer-events:none; }
.hero-top{ position:absolute; left:0; top:128px; width:100%; height:1px; background:linear-gradient(90deg,var(--line),transparent 60%); }
.hero-in{ position:relative; z-index:2; max-width:960px; }
.hero h1{ margin:0; }
.hero h1 .l{ display:block; overflow:hidden; padding-bottom:.22em; }
.hero h1 .line{ font-family:var(--brand); font-style:normal; font-weight:400; font-size:clamp(64px,12.5vw,178px); line-height:.9; letter-spacing:.005em;
                text-transform:uppercase; color:var(--ink); display:block; }
.hero h1 .word{ display:inline-block; }
.hero h1 .accent{ position:relative; color:var(--green); }
.hero h1 .accent .d{ color:var(--pink); }
.hero .uline{ position:absolute; left:0; bottom:-.07em; height:.07em; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; border-radius:3px; }
.hero-sub{ font-size:clamp(17px,2vw,20px); color:var(--ink-dim); max-width:560px; margin:30px 0 0; opacity:0; }
.hero-sub .nl{ display:block; margin-top:8px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; opacity:0; }
.scrollcue{ position:absolute; z-index:2; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
            color:var(--ink-faint); font-size:11px; letter-spacing:.26em; text-transform:uppercase; opacity:0; }
.scrollcue .bar{ width:1px; height:38px; background:linear-gradient(var(--green),transparent); }

/* PLACEHOLDER hero (coming-soon pages) — same footprint as .hero */
.ph{ position:relative; min-height:100svh; display:flex; align-items:center; text-align:center; padding:128px 0 90px; overflow:hidden; }
.ph::before{ content:""; position:absolute; right:-18vw; bottom:-26vw; width:70vw; height:70vw; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(56,212,48,.13), rgba(56,212,48,0) 64%); filter:blur(24px); pointer-events:none; }
.ph-in{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.ph .soon{ display:inline-block; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green);
           border:1px solid var(--line-2); border-radius:100px; padding:7px 15px; opacity:0; }
.ph h1{ font-family:var(--brand); font-weight:400; font-size:clamp(64px,13vw,150px); line-height:.9; letter-spacing:.005em; text-transform:uppercase; color:var(--ink); margin:20px 0 0; }
.ph h1 .dot{ color:var(--pink); }
.ph .lead{ color:var(--ink-dim); font-size:clamp(17px,2vw,20px); margin:24px auto 0; max-width:580px; opacity:0; }
.ph-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; opacity:0; }

/* ============================================================================
   SECTIONS
   ============================================================================ */
.sec{ padding:112px 0; position:relative; }
.sec.alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* section header — home uses .head, interior pages use .dept-head */
.head{ max-width:780px; }
.head h2{ font-family:var(--disp); font-weight:800; font-size:clamp(34px,5vw,62px); line-height:1; letter-spacing:-.025em; margin:16px 0 0; }
.head h2 .core{ font-size:1.08em; }
.head p{ font-size:18px; color:var(--ink-dim); margin-top:18px; max-width:590px; }
.dept-head{ max-width:820px; margin-bottom:44px; }
.dept-head h2{ font-family:var(--disp); font-weight:800; font-size:clamp(32px,4.6vw,58px); line-height:1; letter-spacing:-.025em; margin:16px 0 0; }
.dept-head p{ font-size:18px; color:var(--ink-dim); margin-top:18px; max-width:620px; }
.g{ color:var(--green); } .p{ color:var(--pink); }
.count{ font-family:var(--disp); font-weight:800; color:var(--ink-faint); font-size:15px; }

/* shared closing CTA band (team / personal training) */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta .glow{ position:absolute; z-index:0; width:520px; height:520px; border-radius:50%; filter:blur(120px); left:50%; top:50%; transform:translate(-50%,-50%);
            background:radial-gradient(circle, rgba(56,212,48,.16), transparent 62%); }
.cta-in{ position:relative; z-index:2; max-width:720px; margin:0 auto; }
.cta h2{ font-family:var(--disp); font-weight:800; font-size:clamp(34px,5vw,60px); line-height:1; letter-spacing:-.025em; }
.cta p{ color:var(--ink-dim); font-size:18px; margin:18px auto 30px; max-width:520px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================================
   FOOTER
   ============================================================================ */
footer{ background:var(--bg); border-top:1px solid var(--line); padding:62px 0 34px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.15fr; gap:38px; }
footer h4{ font-family:var(--disp); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; font-weight:700; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
footer a, footer li{ color:var(--ink-dim); font-size:14.5px; }
footer a:hover{ color:var(--green); }
.foot-blurb{ color:var(--ink-dim); font-size:14.5px; margin-top:16px; max-width:290px; }
.foot-bot{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.foot-bot .cp{ color:var(--ink-faint); font-size:13px; }

/* sticky mobile CTA bar (phones only) */
.mcta{ display:none; }

/* reveal-on-scroll base */
.rv{ opacity:0; transform:translateY(28px); }

/* ============================================================================
   RESPONSIVE (shared chrome + hero + sections + footer)
   ============================================================================ */
@media (max-width:1040px){
  .burger{ display:inline-flex; }
  .nav-right .ghost{ display:none; }
  .nav-links{ display:flex; position:fixed; top:84px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
              background:rgba(13,16,14,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
              padding:6px 30px 26px; max-height:calc(100svh - 84px); overflow-y:auto;
              transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
              transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
  .nav.menu-open .nav-links{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .nav-links > a{ padding:16px 2px; border-bottom:1px solid var(--line); font-size:17px; color:var(--ink); }
  .nav-links > a::after{ display:none; }
  .more{ position:static; } .more::after{ display:none; } .more-btn{ display:none; }
  .more-menu{ position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; box-shadow:none; padding:0; min-width:0; }
  .more-menu a{ padding:16px 2px; border-bottom:1px solid var(--line); font-size:17px; border-radius:0; color:var(--ink); }
  .more-menu a:hover{ background:none; color:var(--green); }
  .nav-cta-mobile{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
  .nav-cta-mobile .btn{ width:100%; }
}
@media (max-width:920px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  body{ font-size:16px; }
  h1,h2,h3,p,li,a,span{ overflow-wrap:break-word; }
  .core,footer a{ overflow-wrap:anywhere; }

  .nav{ height:68px; }
  .nav-in{ position:relative; gap:8px; }
  .nav .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  .nav .logo .top{ font-size:29px; }
  .nav .logo .sub{ font-size:8px; letter-spacing:.24em; margin-top:3px; }
  .nav-join-m{ display:inline-flex; padding:11px 16px; font-size:13px; }
  .nav-right .btn{ display:none; }
  .nav-cta-mobile{ display:none; }
  .burger{ display:inline-flex; min-width:46px; min-height:46px; }
  .nav-links{ top:calc(68px + env(safe-area-inset-top,0px)); max-height:calc(100dvh - 68px - env(safe-area-inset-top,0px)); }

  .mcta{ display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:140;
         padding:9px clamp(10px,3vw,16px) calc(9px + env(safe-area-inset-bottom,0px));
         background:rgba(13,16,14,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); transition:transform .25s var(--ease); }
  .mcta .btn{ flex:1 1 0; min-width:0; min-height:50px; font-size:clamp(12px,3.5vw,15px); padding:14px 6px; }
  .nav.menu-open ~ .mcta{ transform:translateY(130%); }
  footer{ padding-bottom:calc(26px + 76px + env(safe-area-inset-bottom,0px)); }

  .hero{ min-height:100svh; padding:88px 0 40px; }
  .hero h1 .line{ font-size:clamp(54px,16vw,104px); }
  .hero-sub{ font-size:16px; margin-top:22px; }
  .hero-actions{ margin-top:26px; gap:10px; }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; }
  .scrollcue{ bottom:calc(88px + env(safe-area-inset-bottom,0px)); }

  .ph{ padding:100px 0 60px; }
  .ph h1{ font-size:clamp(56px,17vw,110px); }
  .ph-actions .btn{ flex:1 1 auto; text-align:center; }

  .sec{ padding:58px 0; }
  .head h2{ font-size:clamp(29px,8.4vw,46px); }
  .head p{ font-size:16px; }
  .dept-head{ margin-bottom:30px; }
  .dept-head h2{ font-size:clamp(28px,8vw,44px); }
  .dept-head p{ font-size:16px; }

  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  footer ul{ gap:14px; }
  footer li a{ display:inline-block; padding:3px 0; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .wrap{ padding:0 16px; }
  .nav .logo .top{ font-size:26px; }
  .nav-join-m{ padding:10px 13px; font-size:12px; }
  .hero h1 .line{ font-size:clamp(46px,14.5vw,80px); }
  .ph h1{ font-size:clamp(48px,15vw,88px); }
}