/* ===========================================================
   FRAME — Athletic Club
   Design tokens
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;700;800&family=Archivo:wght@400;500;600&display=swap');

:root{
  --black:        #EDEBE4;
  --graphite:     #E1DED4;
  --panel:        #DAD6C9;
  --walnut:       #5C4630;
  --oak:          #1C150E;
  --concrete:     #B9B2A6;
  --brass:        #9C7A45;
  --brass-bright: #96723F;
  --bone:         #17140F;
  --bone-dim:     #6E685C;
  --line:         rgba(23,20,15,0.14);
  --accent:       #0044FF;

  --paper:        #F3F1EA;
  --paper-dim:    #B8B2A2;
  --ink:          #100D0A;
  --noir:         #100D0A;

  --display: 'Archivo Expanded', 'Archivo', sans-serif;
  --body:    'Archivo', sans-serif;

  --wide:  0.14em;
  --wider: 0.22em;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.eyebrow{
  font-family:var(--display);
  font-size:0.72rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--wide);
  line-height:1.05;
}

.container{
  max-width:1360px;
  margin:0 auto;
  padding:0 clamp(24px,5vw,72px);
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(24px,5vw,72px);
  background:linear-gradient(to bottom, rgba(10,9,8,0.85), transparent);
  transition:background 0.4s ease, padding 0.4s ease;
}
.nav.scrolled{
  background:rgba(10,9,8,0.92);
  backdrop-filter:blur(10px);
  padding:16px clamp(24px,5vw,72px);
  border-bottom:1px solid var(--line);
}
.nav-logo{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:0.1em;
  color:var(--paper);
  position:relative;
  padding:0 12px;
}
.nav-logo::before, .nav-logo::after{
  content:'';
  position:absolute;
  top:-4px; bottom:-4px;
  width:5px;
  border-top:1.5px solid var(--brass);
  border-bottom:1.5px solid var(--brass);
}
.nav-logo::before{ left:0; border-left:1.5px solid var(--brass); }
.nav-logo::after{ right:0; border-right:1.5px solid var(--brass); }
.nav-links{
  display:flex;
  gap:40px;
  list-style:none;
}
.nav-links a{
  font-size:0.72rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:color 0.25s ease;
}
.nav-links a:hover{ color:var(--brass-bright); }
.nav-cta{
  font-size:0.72rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  border:1px solid var(--brass);
  padding:11px 22px;
  color:var(--paper);
  transition:background 0.25s ease, color 0.25s ease;
}
.nav-cta:hover{ background:var(--brass); color:var(--ink); }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:26px;
  height:18px;
  position:relative;
  z-index:101;
  padding:0;
}
.nav-toggle span{
  position:absolute;
  left:0; right:0;
  height:1.5px;
  background:var(--paper);
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:8px; }
.nav-toggle span:nth-child(3){ top:16px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  z-index:99;
  background:var(--noir);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.35s ease, visibility 0.35s ease;
}
.mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu a{
  font-family:var(--display);
  font-size:1.3rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
  font-weight:700;
}
.mobile-menu a:hover{ color:var(--brass); }
.mobile-menu .btn{ margin-top:14px; }
body.menu-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .mobile-menu, .nav-toggle span{ transition:none; }
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
/* ---------- Frame corners (brand motif) ---------- */
.frame-corners{ position:relative; }
.frame-corners::before{
  content:'';
  position:absolute;
  z-index:2;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to bottom, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to left, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to bottom, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to right, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to top, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to left, var(--brass) 0 14px, transparent 14px),
    linear-gradient(to top, var(--brass) 0 14px, transparent 14px);
  background-repeat:no-repeat;
  background-size:14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position:
    top left, top left,
    top right, top right,
    bottom right, bottom right,
    bottom left, bottom left;
}
/* Static, always-on: hero and detail-hero photography */
.frame-corners.static::before{
  inset:28px;
  opacity:0.55;
}
/* Interactive: card imagery reveals its frame on hover */
.frame-corners.on-hover::before{
  inset:22px;
  opacity:0;
  transition:opacity 0.4s ease, inset 0.4s ease;
}
.frame-corners.on-hover:hover::before{
  inset:14px;
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .frame-corners.on-hover::before{ transition:none; }
}

.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  animation:hero-in 8s ease-out forwards;
  transform:scale(1.08);
}
@keyframes hero-in{ to{ transform:scale(1); } }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.35) 46%, rgba(10,9,8,0.55) 100%);
}
.hero-content{
  position:relative; z-index:1;
  width:100%;
  padding-bottom:clamp(48px,8vh,96px);
}
.hero-eyebrow{
  color:var(--brass);
  font-size:0.75rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  display:block;
  margin-bottom:18px;
  opacity:0;
  animation:rise 0.9s ease-out 0.5s forwards;
}
.hero h1{
  font-size:clamp(2.8rem,9vw,7.2rem);
  color:var(--paper);
  opacity:0;
  animation:rise 1s ease-out 0.7s forwards;
}
.hero-sub{
  max-width:520px;
  margin-top:22px;
  color:var(--paper-dim);
  font-size:1rem;
  opacity:0;
  animation:rise 1s ease-out 0.7s forwards;
}
.hero-scroll{
  position:absolute;
  bottom:32px; left:50%;
  transform:translateX(-50%);
  z-index:1;
  font-size:0.65rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  color:var(--paper-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
  animation:rise 1s ease-out 1.05s forwards;
}
.hero-scroll::after{
  content:'';
  width:1px; height:36px;
  background:linear-gradient(to bottom, var(--brass), transparent);
  animation:scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Section scaffolding ---------- */
section{ position:relative; }
.section-pad{ padding:clamp(80px,12vh,160px) 0; }
.dark{ background:var(--black); }
.panel-bg{ background:var(--graphite); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.8rem,4vw,3rem); color:var(--bone); max-width:640px; }
.section-head p{ max-width:360px; color:var(--bone-dim); font-size:0.95rem; }

/* ---------- Centered intro block ---------- */
.intro-block{
  text-align:center;
  max-width:720px;
  margin:0 auto 56px;
}
.intro-block .eyebrow{ display:block; margin-bottom:16px; }
.intro-block .kicker{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-size:clamp(1.15rem,2.6vw,1.65rem);
  color:var(--brass);
  margin-bottom:22px;
}
.intro-block h2{
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  color:var(--bone);
  margin-bottom:20px;
}
.intro-block p{
  color:var(--bone-dim);
  font-size:1.02rem;
  max-width:600px;
  margin:0 auto;
}
.intro-block.on-dark h2{ color:var(--paper); }
.intro-block.on-dark p{ color:var(--paper-dim); }

/* ---------- Vanishing word (Turf Room heading) ---------- */
.vanish{
  position:relative;
  display:inline-block;
  color:transparent;
  -webkit-text-stroke:1px var(--bone-dim);
  white-space:nowrap;
}
.vanish::before{
  content:'disappear';
  position:absolute; left:0; top:0;
  color:var(--bone);
  -webkit-text-stroke:0;
  -webkit-mask-image:linear-gradient(to right, black 0%, black 28%, transparent 78%);
  mask-image:linear-gradient(to right, black 0%, black 28%, transparent 78%);
  -webkit-mask-size:230% 100%;
  mask-size:230% 100%;
  -webkit-mask-position:0% 0%;
  mask-position:0% 0%;
  transition:mask-position 0.8s ease, -webkit-mask-position 0.8s ease;
  white-space:nowrap;
}
.intro-block h2:hover .vanish::before{
  -webkit-mask-position:100% 0%;
  mask-position:100% 0%;
}
@media (prefers-reduced-motion:reduce){
  .vanish::before{ transition:none; }
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Pillars (Fuel / Focus / Perform) ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pillar{
  background:var(--black);
  padding:56px 40px;
}
.pillar-num{
  font-family:var(--display);
  font-size:0.75rem;
  color:var(--brass);
  letter-spacing:var(--wider);
}
.pillar h3{
  font-size:1.6rem;
  margin:22px 0 16px;
  color:var(--bone);
}
.pillar p{ color:var(--bone-dim); font-size:0.92rem; max-width:280px; }
@media (max-width:800px){
  .pillars{ grid-template-columns:1fr; }
}

/* ---------- Spaces grid ---------- */
.spaces-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:300px;
  gap:14px;
}
.space-card{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  display:block;
}
.space-card img{
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.space-card:hover img{ transform:scale(1.07); }
.space-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.08) 55%);
  pointer-events:none;
}
.space-label{
  position:absolute; left:0; right:0; bottom:0;
  z-index:1;
  padding:24px 28px;
}
.space-label .eyebrow{ display:block; margin-bottom:6px; }
.space-label h3{
  font-size:1.35rem;
  color:var(--paper);
}
@media (max-width:900px){
  .spaces-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:240px; }
}
@media (max-width:600px){
  .spaces-grid{ grid-template-columns:1fr; grid-auto-rows:280px; }
}

/* ---------- Progress Wall (signature) ---------- */
.wall-section{
  background:var(--noir);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(156,122,69,0.10), transparent 60%);
}
.wall-intro{
  max-width:620px;
  margin-bottom:64px;
}
.wall-intro .eyebrow{ margin-bottom:16px; }
.wall-intro h2{ font-size:clamp(2rem,4.4vw,3.4rem); color:var(--paper); margin-bottom:20px; }
.wall-intro p{ color:var(--paper-dim); font-size:1.02rem; }

.plaque-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:8px;
}
.plaque{
  position:relative;
  aspect-ratio:1.5/1;
  background:linear-gradient(to bottom, #c9a468 0%, #9c7a45 55%, #8a6a3c 100%);
  border:1px solid rgba(16,13,10,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 4px rgba(16,13,10,0.25);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:8px;
  cursor:default;
  transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.plaque:hover{
  transform:translateY(-3px);
  background:linear-gradient(to bottom, #d9b678 0%, #ab8752 55%, #96723f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(16,13,10,0.2), 0 10px 22px rgba(0,0,0,0.5);
  z-index:2;
}
.plaque .p-name{
  font-family:var(--display);
  font-size:0.62rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:#231a0d;
  font-weight:700;
}
.plaque .p-since{
  font-size:0.5rem;
  color:#4a3722;
  margin-top:3px;
  letter-spacing:0.05em;
}
.plaque .p-line{
  font-size:0.56rem;
  color:#231a0d;
  margin-top:7px;
  font-style:normal;
  opacity:0;
  max-width:92%;
  transition:opacity 0.3s ease;
}
.plaque:hover .p-line{ opacity:1; }
.plaque.you{
  background:rgba(243,241,234,0.04);
  border:1px dashed rgba(243,241,234,0.25);
  box-shadow:none;
}
.plaque.you:hover{
  background:rgba(243,241,234,0.07);
  box-shadow:0 10px 22px rgba(0,0,0,0.4);
}
.plaque.you .p-name{ color:var(--paper-dim); font-size:0.6rem; }
.plaque.you .p-since{ color:var(--paper-dim); }

/* ---------- Membership teaser ---------- */
.tiers-teaser{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.tier-col{
  position:relative;
  background:var(--black);
  padding:40px 28px;
  transition:background 0.3s ease, transform 0.3s ease;
}
.tier-col:hover{ transform:translateY(-4px); }
.tier-col.featured{ background:rgba(156,122,69,0.07); }
.tier-col .tier-badge{
  position:absolute; top:18px; right:18px;
  font-family:var(--display);
  font-size:0.58rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--black);
  background:var(--brass);
  padding:4px 9px;
}
.tier-col .eyebrow{ display:block; margin-bottom:10px; }
.tier-col h3{ font-size:1.25rem; color:var(--bone); margin-bottom:16px; }
.tier-col ul{ list-style:none; }
.tier-col li{
  font-size:0.85rem;
  color:var(--bone-dim);
  padding:7px 0 7px 22px;
  position:relative;
}
.tier-col li::before{
  content:'';
  position:absolute; left:0; top:14px;
  width:9px; height:5px;
  border-left:1.5px solid var(--brass);
  border-bottom:1.5px solid var(--brass);
  transform:rotate(-45deg);
}
@media (max-width:900px){
  .tiers-teaser{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .tiers-teaser{ grid-template-columns:1fr; }
}

/* ---------- Quote strip ---------- */
.quote-strip{
  padding:clamp(70px,10vh,120px) 0;
  text-align:center;
}
.quote-strip blockquote{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  max-width:840px;
  margin:0 auto;
  line-height:1.3;
  color:var(--bone);
  text-transform:none;
  letter-spacing:0.01em;
  font-weight:600;
}
.quote-strip cite{
  display:block;
  margin-top:26px;
  font-style:normal;
  font-size:0.75rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  color:var(--brass);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  padding:clamp(90px,14vh,160px) 0;
  text-align:center;
  overflow:hidden;
}
.cta-band .container{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(2.2rem,6vw,4.2rem); color:var(--bone); margin-bottom:28px; }
.cta-band p{ color:var(--bone-dim); max-width:480px; margin:0 auto 40px; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:0.78rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  padding:18px 36px;
  border:1px solid var(--brass);
  color:var(--bone);
  transition:background 0.3s ease, color 0.3s ease;
}
.btn:hover{ background:var(--brass); color:var(--ink); }
.btn.solid{ background:var(--brass); color:var(--ink); }
.btn.solid:hover{ background:var(--brass-bright); }

/* ---------- In-page jump nav (Spaces) ---------- */
section[id]{ scroll-margin-top:90px; }
.toc-strip{
  position:sticky;
  top:64px;
  z-index:50;
  background:rgba(10,9,8,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.toc-inner{
  display:flex;
  gap:28px;
  overflow-x:auto;
  padding:18px clamp(24px,5vw,72px);
  scrollbar-width:none;
}
.toc-inner::-webkit-scrollbar{ display:none; }
.toc-inner a{
  font-size:0.68rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--paper-dim);
  white-space:nowrap;
  transition:color 0.2s ease;
}
.toc-inner a:hover{ color:var(--brass-bright); }

/* ---------- Splash intro (homepage only) ---------- */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:var(--noir);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 0.9s ease, visibility 0.9s ease;
  cursor:pointer;
}
#splash.splash-hide{ opacity:0; visibility:hidden; pointer-events:none; }
#splash .splash-mark{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:0.16em;
  font-size:clamp(2.6rem,10vw,5.4rem);
  color:var(--paper);
  opacity:0;
  transform:scale(0.94);
  animation:splashMark 0.9s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
}
#splash .splash-tag{
  margin-top:20px;
  font-family:var(--display);
  font-size:0.72rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--brass);
  opacity:0;
  animation:splashTag 0.8s ease 0.85s forwards;
}
#splash .splash-rule{
  width:1px; height:0;
  background:var(--brass);
  margin-bottom:22px;
  animation:splashRule 0.6s ease 0.15s forwards;
}
@keyframes splashMark{ to{ opacity:1; transform:scale(1); } }
@keyframes splashTag{ to{ opacity:1; } }
@keyframes splashRule{ to{ height:46px; } }
body.splash-active{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  #splash .splash-mark, #splash .splash-tag, #splash .splash-rule{ animation:none; opacity:1; height:auto; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  position:relative; z-index:2;
  padding:120px 0 0;
}
.breadcrumb .container{
  display:flex; align-items:center; gap:10px;
  font-size:0.7rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--paper-dim);
}
.breadcrumb a:hover{ color:var(--brass-bright); }
.breadcrumb span{ color:var(--brass); }

/* ---------- Detail hero ---------- */
.detail-hero{
  position:relative;
  height:78vh;
  min-height:520px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  margin-top:-1px;
}
.detail-hero .hero-media img{ animation:none; transform:none; }
.detail-hero .hero-content{ padding-bottom:clamp(48px,7vh,88px); }
.detail-hero h1{ font-size:clamp(2.4rem,7vw,5.4rem); color:var(--paper); }

/* ---------- Detail intro / feature layout ---------- */
.detail-intro{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:start;
}
.detail-intro .lede{
  font-size:1.15rem;
  color:var(--bone);
  font-weight:500;
  max-width:520px;
}
.detail-intro .body-copy p{
  color:var(--bone-dim);
  margin-bottom:18px;
  font-size:0.98rem;
}
.feature-list{
  list-style:none;
  border-top:1px solid var(--line);
}
.feature-list li{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:0.9rem;
  color:var(--bone-dim);
}
.feature-list li strong{
  color:var(--bone);
  font-weight:600;
  font-family:var(--display);
  font-size:0.72rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:900px){
  .detail-intro{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- Gallery ---------- */
.gallery-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gallery-row img{ height:340px; }
@media (max-width:900px){
  .gallery-row{ grid-template-columns:1fr; }
  .gallery-row img{ height:260px; }
}

/* ---------- Schedule / list table (Cardio Cinema) ---------- */
.schedule-table{
  width:100%;
  border-collapse:collapse;
}
.schedule-table tr{ border-bottom:1px solid var(--line); }
.schedule-table td{
  padding:18px 0;
  font-size:0.95rem;
}
.schedule-table td:first-child{
  font-family:var(--display);
  font-size:0.72rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--brass);
  width:120px;
}
.schedule-table td:last-child{ color:var(--bone); }

/* ---------- Brand strip (equipment) ---------- */
.brand-strip{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  padding-top:36px;
  border-top:1px solid var(--line);
  margin-top:36px;
}
.brand-strip span{
  font-family:var(--display);
  font-size:0.85rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--bone-dim);
}

/* ---------- Related spaces nav ---------- */
.related-spaces{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
}
.related-card{
  position:relative;
  height:260px;
  overflow:hidden;
  background:var(--black);
}
.related-card img{ transition:transform 0.9s ease; opacity:0.85; }
.related-card:hover img{ transform:scale(1.06); opacity:1; }
.related-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,0.9), rgba(10,9,8,0.15));
}
.related-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 24px;
  z-index:1;
}
.related-label span{ display:block; }
.related-label h4{
  font-family:var(--display);
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:var(--wide);
  color:var(--paper);
  margin-top:6px;
}
@media (max-width:900px){
  .related-spaces{ grid-template-columns:1fr; }
}

/* ---------- Directory grid (spaces.html) ---------- */
.directory-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
.directory-card{
  position:relative;
  background:var(--black);
  height:420px;
  overflow:hidden;
}
.directory-card img{ transition:transform 1s ease; }
.directory-card:hover img{ transform:scale(1.06); }
.directory-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,0.95) 10%, rgba(10,9,8,0.1) 60%);
}
.directory-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px;
  z-index:1;
}
.directory-label .num{
  font-family:var(--display);
  font-size:0.7rem;
  color:var(--brass);
  letter-spacing:var(--wider);
}
.directory-label h3{ color:var(--paper); font-size:1.5rem; margin-top:10px; }
.directory-label p{ color:var(--paper-dim); font-size:0.85rem; margin-top:8px; max-width:280px; }
@media (max-width:900px){
  .directory-grid{ grid-template-columns:1fr 1fr; }
  .directory-card{ height:300px; }
}
@media (max-width:600px){
  .directory-grid{ grid-template-columns:1fr; }
}

/* ---------- Membership table ---------- */
.membership-table-wrap{ overflow-x:auto; }
.membership-table{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
}
.membership-table th, .membership-table td{
  padding:16px 20px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:0.86rem;
  color:var(--bone-dim);
}
.membership-table thead th{
  font-family:var(--display);
  font-size:0.85rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--bone);
  background:var(--panel);
  position:sticky; top:0;
}
.membership-table thead th:first-child{ background:transparent; }
.membership-table td:first-child, .membership-table th:first-child{
  font-family:var(--display);
  font-size:0.68rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--brass);
  min-width:160px;
}
.membership-table tbody tr:hover{ background:rgba(156,122,69,0.05); }
.tier-price-row td{
  font-family:var(--display);
  color:var(--bone) !important;
  font-size:1.1rem;
  padding-top:24px;
  padding-bottom:24px;
}

.tier-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  margin-top:60px;
}
.tier-card{
  background:var(--black);
  padding:40px 30px;
  display:flex;
  flex-direction:column;
}
.tier-card.highlight{ background:rgba(156,122,69,0.09); border:1px solid var(--brass); }
.tier-card h3{ font-size:1.3rem; color:var(--bone); margin:16px 0 10px; }
.tier-card .tier-tag{ color:var(--bone-dim); font-size:0.85rem; margin-bottom:24px; }
.tier-card ul{ list-style:none; flex:1; }
.tier-card li{
  font-size:0.85rem;
  color:var(--bone-dim);
  padding:9px 0;
  border-top:1px solid var(--line);
}
.tier-card li:first-child{ border-top:none; }
.tier-card .btn{ margin-top:28px; text-align:center; justify-content:center; }
@media (max-width:1000px){
  .tier-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .tier-cards{ grid-template-columns:1fr; }
}

/* ---------- Visit / form page ---------- */
.visit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.form-group{ margin-bottom:26px; }
.form-group label{
  display:block;
  font-size:0.68rem;
  letter-spacing:var(--wide);
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:10px;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 2px;
  color:var(--bone);
  font-family:var(--body);
  font-size:0.95rem;
}
.form-group textarea{ resize:vertical; min-height:90px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-bottom-color:var(--brass);
}
.visit-info h3{ font-size:1.1rem; color:var(--bone); margin:26px 0 10px; }
.visit-info p{ color:var(--bone-dim); font-size:0.92rem; }
@media (max-width:900px){
  .visit-grid{ grid-template-columns:1fr; gap:48px; }
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:64px 0 32px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px;
  margin-bottom:56px;
}
.footer-logo{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:0.1em;
  position:relative;
  padding:0 14px;
}
.footer-logo::before, .footer-logo::after{
  content:'';
  position:absolute;
  top:-4px; bottom:-4px;
  width:5px;
  border-top:1.5px solid var(--brass);
  border-bottom:1.5px solid var(--brass);
}
.footer-logo::before{ left:0; border-left:1.5px solid var(--brass); }
.footer-logo::after{ right:0; border-right:1.5px solid var(--brass); }
.footer-cols{
  display:flex;
  gap:64px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-size:0.7rem;
  letter-spacing:var(--wider);
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:16px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:0.86rem;
  color:var(--bone-dim);
  margin-bottom:10px;
}
.footer-col a:hover{ color:var(--bone); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:0.72rem;
  color:var(--bone-dim);
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom a{ color:var(--bone-dim); transition:color 0.2s ease; }
.footer-bottom a:hover{ color:var(--brass-bright); }