:root{
  --xf-green:#00c800;
  --xf-black:#0a0a0a;
  --xf-bg:#000;
  --xf-grey:#c1c1c1;
  --xf-font-head:"Anybody Condensed",system-ui,sans-serif;
  --xf-font-body:"Helvetica Neue","Helvetica","Arial",sans-serif;
}
*,
*::before,
*::after{box-sizing:border-box;}
html,body{font-family:var(--xf-font-body,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);font-size:16px;line-height:1.7;color:#f5f5f5;background:#000;}
body{
  font-family:var(--xf-font-body);
  font-weight:300;
  font-size:14px;
  background:var(--xf-bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
/* Ticker */
.ticker{
  background:#bcfd3e;
  color:#000;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.ticker-viewport{overflow:hidden;}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;}
.ticker-item{padding:6px 40px;}
/* Nav */
.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.5);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  padding:12px 24px;
  display:flex;align-items:center;gap:32px;
}
.nav-logo{height:34px;}
.nav-center{
  display:flex;gap:28px;margin:0 auto;
  font-size:12px;text-transform:uppercase;
  letter-spacing:.18em;font-weight:900;
}
.nav-center a:hover{color:var(--xf-green);}
.nav-right{display:flex;align-items:center;gap:8px;position:relative;}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;gap:6px;}
.pill--join{background:#fff;color:#000;border-color:#fff;}
.pill--join:hover{background:var(--xf-green);border-color:var(--xf-green);color:#000;}
.pill--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.pill--outline:hover{background:#fff;color:#000;}
.pill--green-fill{background:var(--xf-green);color:#fff;border-color:var(--xf-green);}
.pill--green-fill:hover{background:var(--xf-green);color:#fff;border-color:#fff;}
.pill--grey{background:var(--xf-grey);color:#000;border-color:var(--xf-grey);}
.pill--grey:hover{background:var(--xf-green);border-color:var(--xf-green);color:#000;}
.dropdown{
  position:absolute;right:0;top:120%;
  min-width:220px;padding:10px;
  border-radius:18px;
  background:#111;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  display:none;
}
.dropdown.open{display:block;}
.pill-link{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border-radius:12px;
  font-size:11px;color:#fff;
}
.pill-link span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.pill-link small{font-size:10px;opacity:.7;}
.pill-link:hover{background:#1b1b1b;}
.nav-menu-toggle{display:none;}
.mobile-menu{display:none;}
/* Hero */
.hero{
  position:relative;
  min-height:540px;
  padding:160px 0 100px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-1;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-inner h1{
  margin:0 0 12px;
  font-family:var(--xf-font-head);
  font-weight:900;
  font-style:italic;
  font-size:48px;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hero-inner p{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
}
/* Studio / Club Selection */
.studio-row{
  position:relative;
  padding:76px 0;
  color:#fff;
  overflow:hidden;
}
.studio-bg{position:absolute;inset:0;z-index:0;}
.studio-bg img{width:100%;height:100%;object-fit:cover;}
.studio-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.9));
}
.mission-label{
  font-family:var(--xf-font-head);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#bcfd3e;
  margin-bottom:18px;
}
.studio-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
}
.studio-card{
  position:relative;
  padding:18px 18px 16px;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  flex:0 0 calc((100% - 32px)/3);
  max-width:calc((100% - 32px)/3);
  aspect-ratio:1 / 1.5; /* updated: 1 wide x 1.5 tall */
  transition:transform .2s,box-shadow .2s;
}
.studio-card::before{
  content:"";
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:.9;
}
.studio-card--liverpool::before{
  background-image:url("../images/studio_liverpool_bg.png");
}
.studio-card--manchester::before{
  background-image:url("../images/studio_manchester_bg.png");
}
.studio-card--merryhill::before{
  background-image:url("../images/studio_merryhill_bg.png");
}
.studio-inner{position:relative;z-index:1;}
.studio-inner h4{
  margin:0 0 4px;
  font-family:var(--xf-font-head);
  font-size:22px;
  text-transform:uppercase;
}
.studio-inner p{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.08em;
}
.studio-card .pill{
  font-size:9px;
  padding:5px 14px;
}
.studio-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.8);
}
.studio-scroll{display:none;}
/* Mission row (unchanged) */
.mission-row{
  position:relative;
  padding:156px 0;
  color:#fff;
  overflow:hidden;
}
.mission-bg{position:absolute;inset:0;z-index:0;}
.mission-bg img{width:100%;height:100%;object-fit:cover;}
.mission-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.22),rgba(0,0,0,.42));}
.mission-inner{position:relative;}
.mission-card{
  max-width:720px;
  padding:28px 26px 24px;
  border-radius:22px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.08);
}
.mission-copy{margin:0 0 16px;font-size:14px;line-height:1.9;}
.mission-join{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.mission-join-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#d0d0d0;}
.mission-join-pills{display:flex;flex-wrap:wrap;gap:6px;}
/* Features (same as previous minimal version) */
.features-row{
  position:relative;
  padding:152px 0;
  color:#fff;
}
.features-bg{position:absolute;inset:0;z-index:0;}
.features-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s;
}
.features-bg-img.active{opacity:1;}
.features-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.92));}
.features-inner{position:relative;}
.features-grid{display:flex;gap:16px;}
.feature-card{
  flex:1;
  padding:20px 18px 22px;
  border-radius:18px;
  background:rgba(0,0,0,.76);
  display:flex;flex-direction:column;gap:8px;
  cursor:pointer;
  transition:background .25s,transform .25s,box-shadow .25s;
}
.feature-card .bar{width:42px;height:3px;border-radius:999px;background:#bcfd3e;}
.feature-card h4{
  margin:0;
  font-family:var(--xf-font-head);
  font-size:16px;
  text-transform:uppercase;
}
.feature-card p{margin:0 0 10px;font-size:13px;line-height:1.8;}
.feature-card:hover,
.feature-card.active{
  background:rgba(0,0,0,.96);
  box-shadow:0 18px 40px rgba(0,0,0,.95);
  transform:translateY(-2px);
}
/* Memberships row (same as before) */
.memberships-row{
  position:relative;
  padding:92px 0;
  color:#fff;
}
.memberships-bg{position:absolute;inset:0;z-index:0;}
.memberships-bg img{width:100%;height:100%;object-fit:cover;}
.memberships-dim{position:absolute;inset:0;background:radial-gradient(circle at top,rgba(0,0,0,.35),rgba(0,0,0,.9));}
.memberships-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.memberships-copy-inner{max-width:60%;padding-right:40px;}
.memberships-title{
  margin:0 0 12px;
  font-family:var(--xf-font-head);
  font-size:26px;
  text-transform:uppercase;
}
.memberships-sub{
  margin:16px 0 10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#e0e0e0;
}
.philo-pills.vertical{display:flex;flex-direction:column;gap:8px;}

.membership-stack{display:flex;flex-direction:column;gap:14px;}
.membership-card{
  padding:16px 16px 14px;
  border-radius:16px;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.08);
}
.m-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.m-title{
  margin:0;
  font-family:var(--xf-font-head);
  font-size:17px;
  text-transform:uppercase;
}
.m-price{
  margin:0;
  font-family:var(--xf-font-head);
  font-size:17px;
  font-weight:900;
  color:var(--xf-green);
}
.m-rule{height:1px;margin:6px 0;background:rgba(255,255,255,.18);}
.m-text{margin:0;font-size:12px;line-height:1.9;}
.memberships-note{margin:2px 0 0;font-size:10px;opacity:.8;}
/* Footer */
.site-footer{padding:32px 0 24px;background:#000;color:#fff;}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.footer-nav{
  display:flex;gap:18px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:10px;
}
.footer-bottom{font-size:9px;opacity:.7;display:flex;gap:10px;}
/* Responsive */
@media(max-width:768px){
  .nav-center,.nav-right{display:none;}
  .nav-menu-toggle{
    display:inline-flex;
    margin-left:auto;
    padding:4px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.5);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.16em;
    background:transparent;
    color:#fff;
  }
  .mobile-menu{
    display:block;
    position:fixed;inset:0;z-index:60;
    pointer-events:none;
  }
  .mobile-menu::before{
    content:"";position:absolute;inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;transition:opacity .25s;
  }
  .mobile-menu-panel{
    position:absolute;top:0;right:0;
    height:100%;width:min(86%,360px);
    background:#0f0f0f;
    border-left:1px solid rgba(255,255,255,.1);
    transform:translateX(100%);
    transition:transform .3s;
  }
  .mobile-menu.open{pointer-events:auto;}
  .mobile-menu.open::before{opacity:1;}
  .mobile-menu.open .mobile-menu-panel{transform:translateX(0);}
  .hero{min-height:420px;padding:130px 0 56px;}
  .hero-inner h1{font-size:32px;}
  .studio-grid{display:none;}
  .studio-scroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .studio-scroll .studio-card{
    min-width:70%;
    flex:0 0 70%;
    max-width:70%;
    aspect-ratio:1 / 1.5;
  }
}

.hero-inner{
  text-align:left;
}


/* FINAL OVERRIDE: zone pages spacing under nav */
.page-wrap.zone-page{
  padding-top: 96px !important;
}


/* Mobile menu content styling */
@media(max-width:768px){
  .mobile-menu-panel{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .mobile-close{
    align-self:flex-end;
    background:none;
    border:none;
    color:#fff;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.16em;
    padding:4px 0 8px;
  }
  .mobile-section{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .mobile-section h4{
    margin:0 0 4px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--xf-green);
  }
  .mobile-section a.pill{
    display:block;
    width:100%;
    text-align:center;
  }
}


/* ---------- Shared page headers ---------- */
.page-header{
  max-width:720px;
  margin:0 auto 2.5rem;
}
.page-headline{
  margin:0 0 8px;
  font-family:var(--xf-font-head);
  font-size:28px;
  text-transform:uppercase;
}
.page-header-lead{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--xf-grey,#c2c2c2);
}
.eyebrow{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--xf-green,#00c800);
}

/* ---------- Zone page backgrounds ---------- */
body.page-fitness{
  background:
    radial-gradient(circle at 0% -20%, rgba(0,200,0,.32) 0%, transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(0,200,0,.18) 0%, transparent 55%),
    #000;
}
body.page-recovery{
  background:
    radial-gradient(circle at -10% -10%, rgba(255,184,92,.45) 0%, transparent 55%),
    radial-gradient(circle at 110% 0%, rgba(0,200,0,.16) 0%, transparent 55%),
    #030202;
}
body.page-community{
  background:
    radial-gradient(circle at 0% -20%, rgba(0,200,0,.4) 0%, transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(255,0,128,.25) 0%, transparent 55%),
    radial-gradient(circle at 50% 120%, rgba(0,180,255,.2) 0%, transparent 60%),
    #000010;
}
body.page-classes{
  background:
    radial-gradient(circle at 0% -20%, rgba(0,200,0,.3) 0%, transparent 55%),
    radial-gradient(circle at 100% 10%, rgba(0,120,255,.18) 0%, transparent 55%),
    #02030a;
}

/* ---------- Zone grid layout ---------- */
.zone-grid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:4rem;
}
.zone-card{
  background:rgba(0,0,0,.86);
  border-radius:24px;
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  flex:1 1 calc(50% - 12px);
}
.zone-card-media{
  border-radius:18px;
  background-size:cover;
  background-position:center;
  aspect-ratio:1 / 1;
  margin-bottom:12px;
}
.zone-card-title{
  margin:0 0 4px;
  font-family:var(--xf-font-head);
  font-size:18px;
  text-transform:uppercase;
}
.zone-card-copy{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.8;
  color:#f3f3f3;
}
.zone-card-availability{
  margin-top:auto;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.6);
}

/* ---------- Legal & careers pages ---------- */
body.page-legal .legal-page{
  padding-top:96px;
}
.legal-body{
  max-width:800px;
  margin:0 auto 4rem;
  font-size:14px;
  line-height:1.9;
  color:#f5f5f5;
}
.legal-body h2{
  margin:2rem 0 .5rem;
  font-family:var(--xf-font-head);
  font-size:18px;
  text-transform:uppercase;
}
.legal-body p{
  margin:0 0 1rem;
}
.legal-body a{
  color:var(--xf-green,#00c800);
  text-decoration:none;
}
.legal-body a:hover{
  text-decoration:underline;
}

/* Careers */
.careers-page .careers-body{
  max-width:800px;
  margin:0 auto 4rem;
  font-size:14px;
  line-height:1.8;
  color:#f5f5f5;
}
.careers-list{
  margin-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.career-row{
  padding:18px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.career-row h2{
  margin:0 0 .35rem;
  font-family:var(--xf-font-head);
  font-size:18px;
  text-transform:uppercase;
}
.career-meta{
  margin:0 0 .5rem;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.7);
}
.career-meta span{
  display:inline-block;
  margin-right:12px;
}
.career-meta-label{
  opacity:.7;
}
.career-description{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#f0f0f0;
}

/* ---------- Membership row mobile layout ---------- */
.memberships-sub--top{}
.memberships-sub--bottom{}
.memberships-join-list--top{}
.memberships-join-list--bottom{}
.memberships-join-bottom{
  display:none;
}

@media(max-width:768px){
  .memberships-row{
    padding:64px 0;
  }
  .memberships-inner{
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .memberships-copy-inner{
    max-width:none;
    padding-right:0;
  }
  .memberships-sub--top,
  .memberships-join-list--top{
    display:none;
  }
  .membership-stack{
    order:2;
  }
  .memberships-join-bottom{
    display:block;
    order:3;
    margin-top:4px;
  }
  .memberships-join-bottom .philo-pills.vertical a{
    width:100%;
    text-align:center;
  }
  .zone-grid{
    gap:14px;
  }
  .zone-card{
    flex:1 1 100%;
  }
}


/* FINAL OVERRIDE: Membership join link visibility */
@media(min-width:769px){
  /* Desktop / tablet: show only top join list */
  .memberships-sub--top,
  .memberships-join-list--top{
    display:block !important;
  }
  .memberships-join-bottom{
    display:none !important;
  }
}

@media(max-width:768px){
  /* Mobile: hide top join list, show bottom */
  .memberships-sub--top,
  .memberships-join-list--top{
    display:none !important;
  }
  .memberships-join-bottom{
    display:block !important;
  }
}


/* XF pill tweaks: green pills always use white text */
.pill--green-fill{
  background:var(--xf-green,#00c800);
  color:#ffffff;
  border-color:var(--xf-green,#00c800);
}

/* Desktop membership layout: prevent overlapping join pills */
@media(min-width:769px){
  .memberships-inner{
    display:flex;
    align-items:stretch;
    gap:32px;
  }
  .memberships-copy{
    flex:0 0 32%;
  }
  .membership-stack{
    flex:1 1 auto;
  }
  .memberships-join-list .pill{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    max-width:260px;
  }
}


/* ===== XF Typography tuning (Nike / Third Space inspired) ===== */

/* Desktop / tablet header scale */
@media (min-width:769px){
  .page-header{
    max-width:760px;
    margin:0 auto 2.75rem;
  }
  .page-headline{
    font-size:34px;
    line-height:1.2;
    letter-spacing:.04em;
  }
  .page-header-lead{
    font-size:15px;
    line-height:1.9;
  }

  /* Zone cards */
  .zone-card-title{
    font-size:20px;
  }
  .zone-card-copy{
    font-size:14px;
    line-height:1.85;
  }
  .zone-card-availability{
    font-size:11px;
    letter-spacing:.18em;
  }

  /* Legal & careers */
  .legal-body{
    font-size:15px;
    line-height:1.9;
  }
  .legal-body h2{
    font-size:20px;
    margin:2.25rem 0 .75rem;
  }
  .careers-page .careers-body{
    font-size:15px;
    line-height:1.9;
  }
  .career-row h2{
    font-size:20px;
  }

  /* Membership stack */
  .membership-card .m-title{
    font-size:16px;
    letter-spacing:.14em;
  }
  .membership-card .m-price{
    font-size:24px;
  }
  .membership-card .m-text{
    font-size:14px;
    line-height:1.9;
  }
}

/* Mobile header + zone scale */
@media (max-width:768px){
  .page-header{
    margin:0 auto 2rem;
  }
  .page-headline{
    font-size:24px;
    line-height:1.25;
  }
  .page-header-lead{
    font-size:14px;
    line-height:1.8;
  }
  .zone-card-title{
    font-size:18px;
  }
  .zone-card-copy{
    font-size:13px;
  }
}

/* Nav links styling */
.nav-links a{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
}

/* Vertical pill stacks */
.philo-pills.vertical{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.philo-pills.vertical a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}