/* =========================================================
   FITCIETY — where fitness meets society
   Design tokens
   ========================================================= */
:root{
  --black:      #0B0B0D;
  --charcoal:   #17171B;
  --cream:      #F5F2EA;
  --pink:       #FF2E63;
  --pink-dim:   #C71F4A;
  --yellow:     #F5C518;
  --gray:       #8C8C93;
  --gray-light: #D8D6D0;
  --white:      #FFFFFF;

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Space Mono', monospace;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.98;
  font-weight:400;
}
h1{font-size:clamp(2.6rem, 7vw, 5.6rem);}
h2{font-size:clamp(1.9rem, 4.2vw, 3.2rem);}
h3{font-size:clamp(1.2rem, 2.2vw, 1.6rem);}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--pink);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--pink);
  display:inline-block;
}

.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--pad);}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--cream{background:var(--cream); color:var(--black);}
.section--charcoal{background:var(--charcoal);}

/* -------------------- Equalizer / beat-bar signature -------------------- */
.beatbar{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:34px;
}
.beatbar span{
  display:block;
  width:5px;
  background:var(--pink);
  border-radius:2px;
  animation:beat 1.1s ease-in-out infinite;
}
.beatbar span:nth-child(1){height:40%; animation-delay:-0.9s;}
.beatbar span:nth-child(2){height:75%; animation-delay:-0.6s;}
.beatbar span:nth-child(3){height:100%; animation-delay:-1.1s;}
.beatbar span:nth-child(4){height:55%; animation-delay:-0.3s;}
.beatbar span:nth-child(5){height:85%; animation-delay:-0.75s;}
.beatbar span:nth-child(6){height:35%; animation-delay:-0.2s;}
@keyframes beat{
  0%,100%{transform:scaleY(0.35);}
  50%{transform:scaleY(1);}
}
@media (prefers-reduced-motion:reduce){
  .beatbar span{animation:none; transform:scaleY(0.8);}
  *{animation:none !important; transition:none !important;}
}

.divider-slash{
  width:100%;
  height:3px;
  background:repeating-linear-gradient(
    115deg, var(--pink) 0 26px, transparent 26px 40px
  );
  opacity:0.9;
}

/* -------------------------------- Header -------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,13,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--display);
  font-size:1.5rem;
  letter-spacing:0.02em;
}
.logo span{color:var(--pink);}
.logo small{
  display:block;
  font-family:var(--mono);
  font-size:0.55rem;
  letter-spacing:0.3em;
  color:var(--gray);
  margin-top:-2px;
}
.nav{display:flex; align-items:center; gap:34px;}
.nav a{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gray-light);
  transition:color .2s;
  position:relative;
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--white);}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:2px; background:var(--pink);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:13px 26px;
  border:2px solid var(--pink);
  background:var(--pink);
  color:var(--black);
  font-weight:700;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px); background:var(--yellow); border-color:var(--yellow);}
.btn--ghost{background:transparent; color:var(--white);}
.btn--ghost:hover{background:var(--white); color:var(--black); border-color:var(--white);}
.btn--dark{border-color:var(--black); background:var(--black); color:var(--white);}
.btn--dark:hover{background:var(--pink); border-color:var(--pink); color:var(--black);}

.menu-toggle{display:none; background:none; border:0; color:var(--white); font-size:1.6rem;}

/* -------------------------------- Hero -------------------------------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  padding:0 0 64px;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.35) 0%, rgba(11,11,13,0.55) 55%, rgba(11,11,13,0.98) 100%),
    repeating-linear-gradient(115deg, #1b1b20 0 3px, #131316 3px 60px);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(115deg, transparent 0 42%, rgba(255,46,99,0.10) 42% 44%, transparent 44% 100%),
    linear-gradient(115deg, transparent 0 60%, rgba(245,197,24,0.08) 60% 62%, transparent 62% 100%);
}
.hero .wrap{position:relative; z-index:2; width:100%;}
.hero-tag{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:18px;
}
.hero h1{max-width:900px;}
.hero h1 em{
  font-style:normal;
  color:var(--pink);
}
.hero-sub{
  max-width:560px;
  color:var(--gray-light);
  font-size:1.05rem;
  margin:22px 0 34px;
}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

/* ---------------------------- Logo strip (deactivated) ---------------------------- */
.logo-strip{
  padding:34px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.logo-strip .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.logo-strip .label{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; color:var(--gray);
  white-space:nowrap;
}
.logo-strip .marks{display:flex; gap:40px; flex-wrap:wrap; opacity:0.55;}
.logo-strip .marks span{font-family:var(--display); font-size:1.1rem; letter-spacing:0.03em;}

/* ------------------------------ Intro / two-col ------------------------------ */
.intro-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
.intro-grid h2{margin-bottom:6px;}
.intro-grid p{color:var(--gray-light); margin-top:16px;}
.section--cream .intro-grid p{color:#4a4a4a;}

/* --------------------------------- Cards --------------------------------- */
.card-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
}
.card{
  background:var(--charcoal);
  padding:38px 30px;
  transition:background .2s;
}
.card:hover{background:#1d1d22;}
.card .num{font-family:var(--mono); color:var(--pink); font-size:0.8rem; letter-spacing:0.15em;}
.card h3{margin:16px 0 12px;}
.card p{color:var(--gray-light); font-size:0.95rem;}

/* -------------------------------- CTA band -------------------------------- */
.cta-band{
  background:var(--yellow);
  color:var(--black);
  padding:64px 0;
}
.cta-band .wrap{
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
}
.cta-band h2{color:var(--black);}
.cta-band p{margin:16px 0 26px; font-weight:600;}
.store-badges{display:flex; gap:14px; flex-wrap:wrap;}
.store-badges a{
  border:2px solid var(--black); padding:10px 18px;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--black); color:var(--white);
}
.cta-visual{
  height:220px;
  background:repeating-linear-gradient(115deg, rgba(0,0,0,0.08) 0 10px, transparent 10px 26px);
  border:2px solid var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.4rem; text-align:center; padding:20px;
}

/* -------------------------------- Newsletter -------------------------------- */
.newsletter{
  background:var(--charcoal);
  padding:64px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.newsletter .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.newsletter h2{max-width:420px;}
.newsletter-form{display:flex; gap:0; max-width:420px; width:100%;}
.newsletter-form input{
  flex:1; padding:16px 18px; border:2px solid var(--gray); border-right:0;
  background:var(--black); color:var(--white); font-family:var(--body); font-size:0.92rem;
}
.newsletter-form input:focus{outline:2px solid var(--pink); outline-offset:-2px;}
.newsletter-form button{
  padding:0 26px; border:2px solid var(--pink); background:var(--pink); color:var(--black);
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
}
.newsletter-note{font-size:0.78rem; color:var(--gray); margin-top:10px;}

/* ---------------------------------- FAQ ---------------------------------- */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:0; color:var(--white); text-align:left;
  padding:24px 4px; font-family:var(--display); font-size:1.05rem; text-transform:uppercase; letter-spacing:0.01em;
}
.faq-q .icon{color:var(--pink); font-family:var(--mono); font-size:1.3rem; transition:transform .2s;}
.faq-item.open .icon{transform:rotate(45deg);}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  color:var(--gray-light); font-size:0.95rem;
}
.faq-a p{padding:0 4px 24px;}

/* ------------------------------- Instagram (deactivated) ------------------------------- */
.insta-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
}
.insta-grid div{
  aspect-ratio:1/1;
  background:repeating-linear-gradient(115deg,#1b1b20 0 8px,#131316 8px 20px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--gray); font-size:0.7rem;
}

/* ------------------------------ Disabled section note ------------------------------ */
.disabled-note{
  border:1px dashed rgba(255,255,255,0.25);
  padding:14px 18px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--gray);
  margin-bottom:28px;
}
.section--cream .disabled-note{border-color:rgba(0,0,0,0.25); color:#666;}

/* --------------------------------- Footer --------------------------------- */
.site-footer{
  background:var(--black);
  padding:64px 0 28px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:40px;
}
.footer-grid h4{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.18em; color:var(--pink);
  text-transform:uppercase; margin-bottom:18px;
}
.footer-grid li{margin-bottom:10px; color:var(--gray-light); font-size:0.92rem;}
.footer-grid a:hover{color:var(--pink);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--mono); font-size:0.72rem; color:var(--gray);
}

/* -------------------------------- Page hero (inner pages) -------------------------------- */
.page-hero{
  padding:120px 0 64px;
  background:
    linear-gradient(180deg, rgba(11,11,13,0.5), rgba(11,11,13,1)),
    repeating-linear-gradient(115deg, #1b1b20 0 3px, #131316 3px 60px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.page-hero .eyebrow{color:var(--yellow);}
.page-hero .eyebrow::before{background:var(--yellow);}

.spec-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid rgba(255,255,255,0.12);
}
.spec-list div{
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.12);
}
.spec-list div:nth-child(odd){padding-right:20px;}
.spec-list .k{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.15em; color:var(--pink); text-transform:uppercase; margin-bottom:6px;}

.two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.media-block{
  aspect-ratio:4/5;
  background:repeating-linear-gradient(115deg,#1b1b20 0 10px,#131316 10px 26px);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--gray); font-size:0.75rem; text-align:center; padding:20px;
}

/* --------------------------------- Classes table --------------------------------- */
.class-list{display:flex; flex-direction:column;}
.class-row{
  display:grid; grid-template-columns:1.4fr 2fr auto; gap:24px; align-items:center;
  padding:26px 0; border-bottom:1px solid rgba(255,255,255,0.12);
}
.class-row h3{font-size:1.3rem;}
.class-row p{color:var(--gray-light); font-size:0.92rem;}
.tag{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--pink); border:1px solid var(--pink); padding:5px 10px; display:inline-block; margin-top:8px;
}
.tag--event{color:var(--yellow); border-color:var(--yellow);}

/* --------------------------------- Pricing --------------------------------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.price-card{
  border:1px solid rgba(255,255,255,0.12);
  padding:34px 28px;
  display:flex; flex-direction:column;
}
.price-card.featured{border-color:var(--pink); background:var(--charcoal); position:relative;}
.price-card.featured::before{
  content:"MOST BOOKED"; position:absolute; top:-13px; left:28px;
  background:var(--pink); color:var(--black); font-family:var(--mono); font-size:0.65rem;
  letter-spacing:0.12em; padding:5px 10px;
}
.price-card .amount{font-family:var(--display); font-size:2.4rem; margin:14px 0;}
.price-card .amount span{font-family:var(--mono); font-size:0.9rem; color:var(--gray);}
.price-card ul{margin:18px 0 26px; flex:1;}
.price-card li{
  font-size:0.88rem; color:var(--gray-light); padding:8px 0; border-top:1px solid rgba(255,255,255,0.08);
}
.price-card li:first-child{border-top:0;}

/* --------------------------------- Form --------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{
  display:block; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray); margin-bottom:8px;
}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:14px 16px; background:var(--charcoal); border:1px solid rgba(255,255,255,0.15);
  color:var(--white); font-family:var(--body); font-size:0.92rem;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{outline:2px solid var(--pink); outline-offset:1px;}

/* --------------------------------- Utilities --------------------------------- */
.mt-64{margin-top:64px;}
.text-center{text-align:center;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px;}

/* --------------------------------- Responsive --------------------------------- */
@media (max-width:920px){
  .nav{
    position:fixed; inset:76px 0 0 0; background:var(--black);
    flex-direction:column; align-items:flex-start; padding:34px var(--pad);
    gap:26px; transform:translateX(100%); transition:transform .25s ease;
  }
  .nav.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  .intro-grid, .two-col, .cta-band .wrap, .grid-2{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .pricing-grid{grid-template-columns:1fr;}
  .class-row{grid-template-columns:1fr; gap:10px;}
  .form-grid{grid-template-columns:1fr;}
  .insta-grid{grid-template-columns:repeat(3,1fr);}
  .spec-list{grid-template-columns:1fr;}
}