/* ============================================================
   BKL GYM
   ------------------------------------------------------------
   HOW TO EDIT THIS SITE — everything the owner changes is
   marked with an  << EDIT >>  comment. Search the file for
   "<< EDIT" to jump between them. Change the text only, never
   the tags around it, and the layout takes care of itself.
   ============================================================ */
@font-face{font-family:'Evogria';src:url('fonts/Evogria.woff2') format('woff2'),url('fonts/Evogria.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa-Light.woff2') format('woff2'),url('fonts/Comfortaa-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa-Regular.woff2') format('woff2'),url('fonts/Comfortaa-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa-Medium.woff2') format('woff2'),url('fonts/Comfortaa-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('fonts/Comfortaa-Bold.woff2') format('woff2'),url('fonts/Comfortaa-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --paper:#E8E5DC; --paper-2:#DFDBD0; --paper-3:#D2CDC0;
  --ink:#0C0C0C; --bone:#F2F0EB; --ash:#7A776E;
  --quiet:#3E8E4E; --peak:#B4342B;
  --rule:rgba(12,12,12,.18); --rule-2:rgba(12,12,12,.32);
  --rule-b:rgba(242,240,235,.18);
  --display:'Evogria','Arial Black',Impact,sans-serif;
  --body:'Comfortaa',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --gut:clamp(18px,4vw,56px);
  --maxw:1280px;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* ---- paper: creases + vignette underneath, fine grain on top ---- */
/* crumpled stock. low-frequency turbulence lit from the side reads as soft folds. */
body::before{content:"";position:fixed;inset:0;z-index:398;pointer-events:none;
  opacity:.50;mix-blend-mode:multiply;
  background-image:
    radial-gradient(120% 95% at 50% 45%, rgba(255,255,255,0) 52%, rgba(96,92,84,.20) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27700%27%20height%3D%27700%27%3E%20%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%275%27%20seed%3D%2711%27%20result%3D%27n%27%2F%3E%20%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%272.4%27%20result%3D%27l%27%3E%20%3CfeDistantLight%20azimuth%3D%2748%27%20elevation%3D%2762%27%2F%3E%20%3C%2FfeDiffuseLighting%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%27700%27%20height%3D%27700%27%20filter%3D%27url%28%23c%29%27%2F%3E%20%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.042'%20numOctaves='4'%20seed='23'%20result='n'/%3E%3CfeDiffuseLighting%20in='n'%20lighting-color='%23ffffff'%20surfaceScale='1.1'%3E%3CfeDistantLight%20azimuth='60'%20elevation='68'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width='300'%20height='300'%20filter='url%28%23f%29'/%3E%3C/svg%3E");
  background-size:cover, 760px 760px, 300px 300px;
  background-repeat:no-repeat, repeat, repeat}

/* creases get lost in multiply over the carbon blocks, so lift them back with soft-light */
.sec--ink,.hero,.pbanner,.foot{position:relative}
.sec--ink::before,.foot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.30;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27700%27%20height%3D%27700%27%3E%20%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%275%27%20seed%3D%2711%27%20result%3D%27n%27%2F%3E%20%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%272.4%27%20result%3D%27l%27%3E%20%3CfeDistantLight%20azimuth%3D%2748%27%20elevation%3D%2762%27%2F%3E%20%3C%2FfeDiffuseLighting%3E%20%3C%2Ffilter%3E%20%3Crect%20width%3D%27700%27%20height%3D%27700%27%20filter%3D%27url%28%23c%29%27%2F%3E%20%3C%2Fsvg%3E");background-size:760px 760px}
.sec--ink > *,.foot > *{position:relative;z-index:2}

/* fine film grain, sits above the creases */
body::after{content:"";position:fixed;inset:-50%;z-index:399;pointer-events:none;opacity:.22;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
  padding:12px 18px;z-index:900;font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(56px,9vw,120px) 0;position:relative}
.sec--ink{background:var(--ink);color:var(--bone)}
.sec--alt{background:var(--paper-2)}

/* type */
.d1,.d2,.d3{font-family:var(--display);text-transform:uppercase;font-weight:400;
  letter-spacing:-.012em;line-height:.92;margin:0}
.d1{font-size:clamp(42px,8.4vw,104px);line-height:.88}
.d2{font-size:clamp(30px,5.2vw,62px)}
.d3{font-size:clamp(20px,2.4vw,28px);line-height:1}
.lbl{font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:11px;line-height:1.5;margin:0 0 14px;color:var(--ash)}
.sec--ink .lbl{color:rgba(242,240,235,.55)}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.66;max-width:56ch;margin:0;font-weight:300}
.sec--ink .lede{color:rgba(242,240,235,.78)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;
  padding:15px 26px;border:1px solid currentColor;background:transparent;color:inherit;
  text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease),background 200ms var(--ease),color 200ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sec--ink .btn--solid,.hero .btn--solid,.closer .btn--solid,.foot .btn--solid,.nf .btn--solid,.pbanner .btn--solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--ink);color:var(--paper)}
  .sec--ink .btn:hover,.hero .btn:hover,.closer .btn:hover,.foot .btn:hover,.nf .btn:hover,.pbanner .btn:hover{background:var(--bone);color:var(--ink)}
  .btn--solid:hover{background:transparent;color:var(--ink)}
  .sec--ink .btn--solid:hover,.hero .btn--solid:hover,.closer .btn--solid:hover,.foot .btn--solid:hover,.nf .btn--solid:hover,.pbanner .btn--solid:hover{background:transparent;color:var(--bone)}
}

/* ---------- x divider (echoes the crossbones + the ceiling lights) ---------- */
.xrule{display:flex;align-items:center;gap:16px;margin:0 0 clamp(28px,4vw,48px)}
.xrule::before,.xrule::after{content:"";height:1px;background:var(--rule);flex:1}
.sec--ink .xrule::before,.sec--ink .xrule::after{background:var(--rule-b)}
.xrule span{font-family:var(--body);font-weight:500;text-transform:uppercase;
  font-size:11px;letter-spacing:.26em;opacity:.55;white-space:nowrap}
@media(max-width:520px){.xrule span{font-size:9.5px;letter-spacing:.18em}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;
  transition:background 260ms var(--ease),border-color 260ms var(--ease)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:18px}
.nav__logo{display:block;flex:0 0 auto}
.nav__logo img{width:118px;transition:width 260ms var(--ease)}
.nav__links{display:flex;gap:24px;margin-left:auto;align-items:center;list-style:none;padding:0;margin-block:0}
.nav__links a{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:10.5px;color:var(--bone);text-decoration:none;opacity:.72;transition:opacity 180ms var(--ease)}
.nav__links a:hover{opacity:1}
.nav.is-stuck{background:rgba(12,12,12,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-b)}
.nav.is-stuck .nav__logo img{width:96px}
.nav__toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule-b);
  color:var(--bone);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;
  font-size:15px;line-height:1;transition:transform 160ms var(--ease)}
.nav__toggle:active{transform:scale(.94)}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
}
/* mobile menu overlay */
.menu{position:fixed;inset:0;z-index:310;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;padding:18px var(--gut) 34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 260ms}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.menu__top img{width:118px}
.menu__close{background:none;border:1px solid var(--rule-b);color:var(--bone);
  width:44px;height:44px;font-size:19px;line-height:1;cursor:pointer}
.menu__links{list-style:none;margin:0;padding:0}
.menu__links a{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(30px,9vw,46px);line-height:1.18;text-decoration:none;color:var(--bone)}
.menu__foot{margin-top:auto;padding-top:24px}
.menu__social{display:flex;gap:20px;list-style:none;margin:14px 0 0;padding:0}
.menu__social a{font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;text-decoration:none;color:rgba(242,240,235,.72)}

/* ---------- pride rule — the only colour on the page ---------- */
.pride{height:3px;width:100%;max-width:280px;
  background:linear-gradient(90deg,#E40303,#FF8C00,#FFED00,#008026,#004DFF,#750787)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--bone);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.12);opacity:.5}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.72) 0%,rgba(12,12,12,.35) 38%,rgba(12,12,12,.88) 100%)}
.hero__in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:clamp(110px,15vh,170px) var(--gut) 0;flex:1;display:flex;flex-direction:column;justify-content:center}
.hero__mark{width:clamp(38px,3.8vw,52px);margin-bottom:clamp(16px,2.4vw,24px)}  /* sits under the headline cap-height, per JB's mockup - the X reads smaller than the skull */
.hero h1{margin:0 0 clamp(16px,2.4vw,26px)}
.hero__sub{max-width:46ch;font-size:clamp(15px,1.55vw,19px);line-height:1.6;font-weight:300;
  color:rgba(242,240,235,.82);margin:0 0 clamp(24px,3.4vw,36px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(30px,5vw,52px)}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;margin-bottom:18px;
  color:rgba(242,240,235,.82)}
.status__dot{width:7px;height:7px;background:#3FBF5F;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(63,191,95,.6);animation:pulse 2.6s var(--ease) infinite}
.status.is-closed .status__dot{background:#E0553F;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,95,.55)}70%{box-shadow:0 0 0 9px rgba(63,191,95,0)}100%{box-shadow:0 0 0 0 rgba(63,191,95,0)}}
@media (prefers-reduced-motion:reduce){.status__dot{animation:none}}
.hero__facts{position:relative;z-index:2;border-top:1px solid var(--rule-b);
  max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr)}
.hero__facts div{padding:16px 0;font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:10.5px;color:rgba(242,240,235,.7)}
.hero__facts div + div{padding-left:18px;border-left:1px solid var(--rule-b)}
@media(max-width:700px){
  .hero__facts{grid-template-columns:1fr}
  .hero__facts div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule-b)}
  .hero__facts div{padding:11px 0}
}

/* ---------- generic section head ---------- */
.head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,56px);
  align-items:end;margin-bottom:clamp(30px,4.4vw,54px)}
@media(max-width:820px){.head{grid-template-columns:1fr;align-items:start}}

/* ---------- photo treatment ---------- */
.ph{position:relative;overflow:hidden;background:var(--paper-3)}
.sec--ink .ph{background:#1a1a1a}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* colour photos sit in mono until touched — the signature move */
.rev img{filter:grayscale(1) contrast(1.14);transition:filter 460ms var(--ease),transform 700ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .rev:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.02)}
}
.rev.is-lit img{filter:grayscale(0) contrast(1.02)}
/* photos that were shot in black and white stay that way — no false promise */
.mono img{filter:contrast(1.06)}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(30px,4vw,48px)}
.value{background:var(--paper);padding:clamp(18px,2.2vw,28px)}
.value__n{font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  color:var(--ash);margin:0 0 12px}
.value h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.7vw,22px);
  font-weight:400;margin:0 0 9px;letter-spacing:-.01em}
.value p{font-size:14px;line-height:1.58;font-weight:300;margin:0}
@media(max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.values{grid-template-columns:1fr}}

/* ---------- culture layout ---------- */
.cult{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,60px);align-items:start}
@media(max-width:900px){.cult{grid-template-columns:1fr}}
.quote{border-left:2px solid var(--ink);padding:4px 0 4px 18px;margin:0 0 26px}
.quote p{font-size:clamp(16px,1.7vw,20px);line-height:1.5;font-weight:300;font-style:italic;margin:0 0 8px}
.quote cite{font-family:var(--body);font-weight:500;font-style:normal;text-transform:uppercase;
  letter-spacing:.16em;font-size:10.5px;color:var(--ash)}
.welcome{margin-top:26px}
.welcome p{margin-top:12px;font-size:15.5px;line-height:1.6;font-weight:300;max-width:52ch}
.mottos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.motto{position:relative}
.motto .ph{aspect-ratio:1}
.motto figcaption{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;color:var(--ash);margin-top:9px}

/* ---------- facilities ---------- */
.fac{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.fac__wide{grid-column:span 4;aspect-ratio:16/6.6}
.fac figure{margin:0}
.fac figure .ph{aspect-ratio:3/4}
.fac h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.5vw,19px);
  font-weight:400;margin:13px 0 6px;letter-spacing:-.01em}
.fac p{font-size:13.5px;line-height:1.55;font-weight:300;color:#3a3a36;margin:0}
@media(max-width:900px){.fac{grid-template-columns:repeat(2,1fr)}.fac__wide{grid-column:span 2;aspect-ratio:16/9}}
@media(max-width:520px){.fac{grid-template-columns:1fr}.fac__wide{grid-column:span 1}}
.amen{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(22px,3vw,34px)}
.amen span{background:var(--paper);padding:14px 12px;font-family:var(--body);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;font-size:10px;text-align:center}
@media(max-width:900px){.amen{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.amen{grid-template-columns:repeat(2,1fr)}}

/* ---------- rates ---------- */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.rate{border:1px solid var(--rule-2);padding:clamp(20px,2.6vw,30px);background:var(--paper);
  display:flex;flex-direction:column}
.rate--feat{border-width:2px;border-color:var(--ink);background:var(--paper-2)}
.rate__k{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  font-size:10.5px;color:var(--ash);margin:0 0 14px}
.rate__p{font-family:var(--display);font-size:clamp(36px,4.6vw,54px);line-height:.9;margin:0 0 6px}
.rate__u{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--ash);margin:0 0 12px}
.rate__d{font-size:13.5px;line-height:1.55;font-weight:300;margin:0}
.rate__save{display:inline-block;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;background:var(--ink);color:var(--paper);padding:5px 10px}
.rates--promo{grid-template-columns:repeat(2,1fr);margin-top:clamp(12px,1.6vw,18px)}
.rates--extra{grid-template-columns:repeat(2,1fr);margin-top:clamp(12px,1.6vw,18px);
  border:1px solid var(--rule-2);gap:1px;background:var(--rule)}
.rates--extra div{background:var(--paper);padding:16px 20px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;flex-wrap:wrap}
.rates--extra b{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.rates--extra span{font-family:var(--display);font-size:20px}
@media(max-width:820px){
  .rates{grid-template-columns:1fr;gap:10px}
  .rates--promo{grid-template-columns:1fr 1fr;gap:10px}
  .rates--extra{grid-template-columns:1fr}
  .rate{padding:18px 20px}
  .rate__p{font-size:40px}
  .rates--promo .rate__p{font-size:30px}
  .rates--promo .rate__u{font-size:11.5px}
}
@media(max-width:430px){
  .rates--promo{grid-template-columns:1fr}
  .rates--extra div{padding:14px 16px}
}
.rates__note{margin-top:clamp(20px,2.6vw,30px);display:flex;gap:clamp(16px,3vw,34px);
  align-items:center;flex-wrap:wrap}
.rates__note p{font-size:14px;line-height:1.58;font-weight:300;max-width:46ch;margin:0}

/* ---------- social ---------- */
.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.social{border:1px solid var(--rule-2);padding:clamp(18px,2.2vw,26px);text-decoration:none;
  display:flex;flex-direction:column;gap:16px;transition:background 220ms var(--ease),color 220ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .social:hover{background:var(--ink);color:var(--paper)}
  .social:hover .social__h,.social:hover .social__m{color:inherit;opacity:.7}
  .social:hover .social__btn{border-color:currentColor}
}
.social__h{font-family:var(--display);text-transform:uppercase;font-size:clamp(16px,1.7vw,21px);margin:0}
.social__m{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--ash);margin:4px 0 0}
.social__btn{margin-top:auto;border:1px solid var(--rule-2);padding:11px;text-align:center;
  font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:10.5px}
@media(max-width:820px){.socials{grid-template-columns:1fr}}

/* ---------- merch ---------- */
.merch{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.merch article{margin:0}
.merch .ph{aspect-ratio:4/5;background:#141414}
.merch h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(14px,1.4vw,17px);
  font-weight:400;margin:13px 0 5px}
.merch .m__meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.merch .m__c{font-family:var(--body);font-weight:400;font-size:12px;color:rgba(242,240,235,.55)}
.merch .m__p{font-family:var(--display);font-size:17px}
@media(max-width:900px){.merch{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:420px){.merch{grid-template-columns:repeat(2,1fr);gap:10px}
  .merch h3{font-size:13px;margin:10px 0 4px}
  .merch .m__meta{flex-direction:column;gap:2px}
  .merch .m__p{font-size:16px}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(112px,13vw,180px);
  gap:clamp(8px,1.1vw,14px)}
.gal .ph{width:100%;height:100%}
.gal .g--big{grid-column:span 2;grid-row:span 2}
.gal .g--tall{grid-row:span 2}
.gal .g--wide{grid-column:span 2}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,56px);align-items:start}
@media(max-width:900px){.visit{grid-template-columns:1fr}}
.map{aspect-ratio:4/3;background:var(--paper-3);border:1px solid var(--rule);position:relative}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.hours{border:1px solid var(--rule-2);margin:22px 0}
.hours__row{display:flex;justify-content:space-between;gap:14px;padding:13px 17px;
  font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.hours__row + .hours__row{border-top:1px solid var(--rule)}
.hours__row.is-today{background:var(--ink);color:var(--paper);font-weight:500}
/* the crowd guide lives on the rates page now - this keeps it findable from
   Visit, which is where people actually ask "when should I come?" */
.visit__pointer{margin:clamp(20px,2.6vw,30px) 0 0;font-size:14px;line-height:1.6;
  font-weight:300;color:var(--ash)}
.visit__pointer .tlink{margin-left:6px}

/* ---------- crowd guide: isotype poster, after BKL's own graphic ---------- */
.pk__head{margin-bottom:clamp(26px,4vw,44px)}
.pk__h{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(30px,5vw,60px);line-height:.9;margin:6px 0 0;letter-spacing:-.01em}
.pk__h em{font-style:normal;color:var(--ash)}

.pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(24px,4vw,56px);align-items:stretch}
.pk__main{min-width:0}
.pk__shot{margin:0;position:relative;overflow:hidden;background:var(--paper-3)}
.pk__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.06);display:block}
.pk__rows{display:flex;flex-direction:column}
.pk__row{display:grid;grid-template-columns:clamp(104px,13vw,168px) minmax(0,1fr);
  align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:clamp(7px,1.1vw,12px) 0;border-bottom:1px solid rgba(12,12,12,.09)}
.pk__row:first-child{border-top:1px solid rgba(12,12,12,.09)}
.pk__time{font-family:var(--display);font-size:clamp(15px,1.9vw,25px);letter-spacing:.02em;
  color:var(--ink);white-space:nowrap}
.pk__figs{display:flex;align-items:flex-end;gap:clamp(5px,.9vw,12px);flex-wrap:wrap}
.pk__over{display:flex;gap:inherit;margin-left:clamp(3px,.5vw,7px)}
.pk__f{width:clamp(17px,2.4vw,32px);height:auto;fill:var(--ink);flex:0 0 auto;
  display:block}
/* the emptiest hour and the over-capacity figures carry BKL's own colour coding */
.pk__row.is-quiet .pk__time{color:var(--quiet)}
.pk__row.is-quiet .pk__f{fill:var(--quiet)}
.pk__row.is-peak .pk__time{color:var(--peak)}
.pk__row.is-peak .pk__over .pk__f{fill:var(--peak)}
.pk__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

.pk__week{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(6px,1.2vw,18px);
  margin-top:clamp(26px,3.4vw,40px)}
.pk__day{text-align:center}
.pk__dl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);margin-bottom:10px}
.pk__dg{display:flex;justify-content:center;gap:2px}
.pk__dg .pk__f{width:clamp(12px,1.6vw,21px)}
.pk__day.is-quiet .pk__dl{color:var(--quiet);font-weight:600}
.pk__day.is-quiet .pk__f{fill:var(--quiet)}

.pk__note{margin:clamp(22px,3vw,32px) 0 0;font-size:13px;line-height:1.65;font-weight:300;
  color:var(--ash);max-width:56ch;text-wrap:pretty}

@media(max-width:900px){
  .pk{grid-template-columns:1fr}
  .pk__shot{aspect-ratio:16/9}
}
@media(max-width:640px){
  .pk__row{grid-template-columns:1fr;gap:5px;padding:11px 0}
  .pk__time{font-size:14px}
  .pk__week{gap:4px}
  .pk__dl{font-size:9.5px;letter-spacing:.05em}
}

.addr{font-size:15.5px;line-height:1.6;font-weight:300;margin:0 0 20px;max-width:46ch}
.visit__cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:8px}

/* ---------- footer: see MULTI-PAGE COMPONENTS below ---------- */

/* ---------- persistent DM call to action ---------- */
/* the sticky bar is mobile-only, so desktop had no standing way to contact them */
.nav__dm{margin-left:22px;flex:0 0 auto;color:var(--bone);font-family:var(--body);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;text-decoration:none;
  padding:9px 16px;border:1px solid currentColor;white-space:nowrap;
  transition:background 200ms var(--ease),color 200ms var(--ease)}
@media (hover:hover){.nav__dm:hover{background:var(--bone);color:var(--ink)}}
@media(max-width:900px){.nav__dm{display:none}}

.closer__dm{font-size:clamp(14px,1.4vw,16.5px);line-height:1.6;font-weight:500;
  margin:0 0 18px;color:var(--bone)}

/* ---------- sticky mobile bar ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:290;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-b);
  border-top:1px solid var(--rule-b);transform:translateY(101%);
  transition:transform 300ms var(--ease)}
.sticky.is-up{transform:none}
.sticky a{background:var(--ink);color:var(--bone);padding:15px 10px;text-align:center;
  text-decoration:none;font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:10.5px}
.sticky a.is-primary{background:var(--bone);color:var(--ink)}
@media(max-width:900px){.sticky{display:grid}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.no-js .rv{opacity:1;transform:none}

/* ================= MULTI-PAGE COMPONENTS ================= */

/* nav on interior pages sits on a solid bar from the start */
.nav--solid{background:rgba(12,12,12,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-b)}
.nav__links a.is-here{opacity:1;position:relative}
.nav__links a.is-here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor}
.menu__links a.is-here{opacity:.55}

/* page banner (interior page hero) */
.pbanner{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  padding:clamp(126px,17vh,196px) 0 clamp(52px,7vw,92px);
  /* tall enough that the photo reads as a room, not a cropped strip */
  min-height:clamp(380px,62vh,660px);display:flex;align-items:flex-end}
.pbanner__bg{position:absolute;inset:0;z-index:0}
.pbanner__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* per-page object-position ships inline on the <img> (see banner() in _src/build.py) */
.pbanner__bg.mono img{filter:grayscale(1) contrast(1.08);opacity:.66}
.pbanner__bg.rev img{filter:grayscale(1) contrast(1.06);opacity:.72}
.pbanner__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,12,12,.90) 0%,rgba(12,12,12,.62) 42%,rgba(12,12,12,.22) 100%),
    linear-gradient(180deg,rgba(12,12,12,.45) 0%,rgba(12,12,12,.18) 42%,rgba(12,12,12,.78) 100%)}
.pbanner__in{position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,4vw,64px);align-items:end}
.pbanner__lead{min-width:0}
.pbanner .lbl{color:rgba(242,240,235,.6)}
.pbanner h1{margin:0 0 16px;font-size:clamp(32px,5.1vw,64px);line-height:.94;text-wrap:balance}
.pbanner__sub{max-width:52ch;font-size:clamp(14.5px,1.35vw,17px);line-height:1.62;font-weight:400;
  color:rgba(242,240,235,.88);margin:0 0 6px;text-wrap:pretty}
@media(max-width:900px){
  .pbanner__in{grid-template-columns:1fr;gap:16px;align-items:start}
  .pbanner__sub{max-width:56ch}
}
@media(max-width:720px){
  /* portrait crops the photo sideways, not top-to-bottom, so the banner
     does not need the extra height to show the whole frame */
  .pbanner{min-height:clamp(320px,46vh,430px)}
}

/* 404 */
.nf{background:var(--ink);color:var(--bone);min-height:100svh;display:flex;align-items:center;
  padding:clamp(120px,18vh,200px) 0 clamp(70px,10vh,120px);text-align:center}
.nf__in{width:100%;display:flex;flex-direction:column;align-items:center}
.nf__mark{width:clamp(56px,7vw,88px);height:auto;opacity:.9;margin-bottom:clamp(22px,3vw,34px)}
.nf .lbl{color:rgba(242,240,235,.55)}
.nf__h{margin:10px 0 0;font-size:clamp(46px,10vw,120px);line-height:.9}
.nf__p{max-width:38ch;margin:clamp(16px,2vw,22px) 0 0;color:rgba(242,240,235,.78);
  font-size:clamp(15px,1.4vw,17.5px);line-height:1.62;text-wrap:pretty}
.nf__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(28px,4vw,40px)}

/* rates: the section title the client asked for, sitting over the cards */
.ratetitle{margin:0 0 clamp(16px,2vw,24px);font-size:clamp(28px,4.4vw,54px);line-height:.96;
  display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
.ratetitle::after{content:"";flex:1;height:1px;background:var(--rule);opacity:.9}
@media(max-width:560px){.ratetitle::after{display:none}}

/* home teaser cards */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.tcard{text-decoration:none;color:inherit;display:block}
.tcard .ph{aspect-ratio:4/5;margin-bottom:14px}
.tcard h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.8vw,22px);
  font-weight:400;margin:0 0 6px;letter-spacing:-.01em}
.tcard p{font-size:13.5px;line-height:1.55;font-weight:300;color:#3a3a36;margin:0}
@media (hover:hover) and (pointer:fine){
  .tcard:hover h3{text-decoration:underline;text-underline-offset:4px}
}
@media(max-width:900px){.tgrid{grid-template-columns:repeat(2,1fr)}}

/* next-up cards at the foot of every page */
.nxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.nx{background:var(--paper);padding:clamp(20px,2.6vw,30px);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:8px;
  transition:background 220ms var(--ease),color 220ms var(--ease)}
.nx__k{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  font-size:10px;color:var(--ash)}
.nx__t{font-family:var(--display);text-transform:uppercase;font-size:clamp(19px,2.1vw,26px);
  line-height:1;letter-spacing:-.01em}
.nx__go{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;margin-top:6px}
@media (hover:hover) and (pointer:fine){
  .nx:hover{background:var(--ink);color:var(--paper)}
  .nx:hover .nx__k{color:rgba(244,244,240,.6)}
}
@media(max-width:820px){.nxgrid{grid-template-columns:1fr}}

/* Two same-tone sections in a row stack their vertical padding, which reads as
   a hole rather than a section break (240px on rates / gym / home). The previous
   section's bottom padding is the whole gap we need. */
.sec--alt + .sec--alt,
.sec--ink + .sec--ink{padding-top:0}

/* faq - question left, answer right, one per row.
   Was a 2-col grid of boxes, which left a dead cell on any odd number of
   questions. A row list takes any count, so questions can be added or
   dropped without the layout breaking. */
.faq{margin-top:clamp(20px,3vw,30px);border-top:1px solid var(--rule)}
.faq__i{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--rule)}
.faq__i h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.6vw,19px);
  font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance;text-align:center}
.faq__i p{font-size:14.5px;line-height:1.65;font-weight:300;margin:0;color:#3a3a36;
  max-width:56ch;text-wrap:pretty}
@media (hover:hover){
  .faq__i{transition:background 220ms var(--ease)}
  .faq__i:hover{background:rgba(12,12,12,.028)}
}
@media(max-width:760px){
  /* stacked on mobile, so centring the question would strand it above a
     left-aligned answer - keep both flush left there */
  .faq__i{grid-template-columns:1fr;gap:7px;align-items:start}
  .faq__i h3{text-align:left}
}

/* footer gains a 5th column on interior pages */
.foot__grid{grid-template-columns:1.4fr repeat(4,1fr)}
.foot__tribe{margin-top:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  font-size:10.5px;color:rgba(242,240,235,.55)}
@media(max-width:1000px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ================= CLOSER + FOOTER ================= */

/* closing statement, sits directly above the footer */
.closer{background:var(--ink);color:var(--bone);position:relative;
  padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px);
  border-bottom:1px solid var(--rule-b)}
.closer__in{position:relative;z-index:2}
.closer__h{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(34px,6.6vw,80px);line-height:.92;letter-spacing:-.015em;margin:0 0 20px;max-width:16ch}
.closer__p{max-width:52ch;font-size:clamp(14.5px,1.4vw,17px);line-height:1.65;font-weight:300;
  color:rgba(242,240,235,.78);margin:0 0 22px}
.closer__pride{max-width:200px;margin-bottom:26px}
.closer__cta{display:flex;align-items:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap}

/* text link with an animated underline + arrow */
.tlink{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;text-decoration:none;color:inherit;position:relative;padding-bottom:4px}
.tlink span{display:inline-block;transition:transform 240ms var(--ease)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .tlink:hover::after{transform:scaleX(1)}
  .tlink:hover span{transform:translateX(5px)}
}

/* footer */
.foot{background:var(--ink);color:var(--bone);position:relative;
  padding:clamp(44px,6vw,72px) 0 clamp(22px,2.6vw,32px)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1.15fr .85fr .85fr 1.15fr;
  gap:clamp(20px,3vw,44px);align-items:start}
.foot__brand img{width:clamp(116px,10.5vw,158px);margin-bottom:18px}
.foot__tribe{margin:0;font-family:var(--body);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;font-size:10.5px;color:rgba(242,240,235,.6)}
.foot h4{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:10px;color:rgba(242,240,235,.5);margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--rule-b)}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot address{font-style:normal}
.foot p,.foot a,.foot address,.foot dd,.foot dt{font-size:13.5px;line-height:1.62;font-weight:300;
  color:rgba(242,240,235,.82);text-decoration:none}
.hrs{margin:0;display:grid;gap:9px}
.hrs > div{display:flex;justify-content:space-between;gap:12px}
.hrs dt{margin:0;color:rgba(242,240,235,.58)}
.hrs dd{margin:0;font-weight:400}
.foot__mail{display:inline-block;margin-top:14px;word-break:break-word}

/* underline-on-hover for every footer link */
.ulink{position:relative;display:inline-block}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
.ulink .ext{display:inline-block;transition:transform 240ms var(--ease);opacity:.6}
@media (hover:hover) and (pointer:fine){
  .ulink:hover{color:var(--bone)}
  .ulink:hover::after{transform:scaleX(1)}
  .ulink:hover .ext{transform:translate(2px,-2px);opacity:1}
}
.ulink:focus-visible::after{transform:scaleX(1)}

/* legal row */
.foot__bot{border-top:1px solid var(--rule-b);margin-top:clamp(30px,4vw,50px);padding-top:18px;
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--body);font-weight:400;text-transform:uppercase;letter-spacing:.13em;
  font-size:9.5px;color:rgba(242,240,235,.5)}
.foot__bot a{font-size:9.5px;letter-spacing:.13em;color:rgba(242,240,235,.5)}
.foot__legal{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}

@media(max-width:1080px){
  .foot__grid{grid-template-columns:1fr 1fr 1fr;row-gap:clamp(26px,4vw,38px)}
  .foot__brand{grid-column:1 / -1}
}
@media(max-width:620px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .closer__cta{flex-direction:column;align-items:stretch;gap:16px}
  .closer__cta .btn{width:100%}
  .tlink{text-align:center}
  .foot__bot{flex-direction:column;gap:10px}
  .foot__legal{gap:14px}
}
@media(max-width:400px){
  .foot__grid{grid-template-columns:1fr}
}


/* ---- designer credit: its own row, always visible ---- */
.foot .foot__credit{margin:clamp(26px,3.6vw,44px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule-b);text-align:center;font-family:var(--body);font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;line-height:1.7;
  color:rgba(242,240,235,.68)}
.foot .foot__credit a{font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--bone)}
.foot__bot{justify-content:center;text-align:center;border-top:0;margin-top:12px;padding-top:0}

/* social links with marks */
.slink{display:inline-flex;align-items:center;gap:9px}
.sico{width:15px;height:15px;flex:0 0 auto;display:block;opacity:.75;
  transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
.slink::after{left:24px}
@media (hover:hover) and (pointer:fine){
  .slink:hover .sico{opacity:1;transform:translateY(-1px)}
}

/* the fixed Directions/Message bar must never sit on top of the credit */
@media(max-width:900px){
  .foot{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 26px)}
}
@media(max-width:620px){
  .foot .foot__credit{font-size:11px;letter-spacing:.1em}
  .foot__bot{flex-direction:column;gap:8px;font-size:9.5px}
}


/* ---- scroll-driven colour (touch + narrow screens) ----
   --lit runs 0 (mono) to 1 (full colour) and is set from scroll position in app.js.
   Photos shot in black and white keep .mono and are deliberately left alone. */
.scroll-colour .rev img{
  filter:grayscale(calc(1 - var(--lit,0))) contrast(calc(1.14 - (var(--lit,0) * 0.12)));
  transition:none}
.scroll-colour .rev.is-lit img{filter:grayscale(calc(1 - var(--lit,0))) contrast(1.02)}

/* on a real pointer, hover forces full colour and beats the scroll-set value.
   filter stays instant so it never lags the scroll; only the scale eases. */
@media (hover:hover) and (pointer:fine){
  .scroll-colour .rev img{transition:transform 700ms var(--ease)}
  .scroll-colour .rev:hover{--lit:1!important}
  .scroll-colour .rev:hover img{transform:scale(1.02)}
}

/* ================= FEEDBACK ROUND 1 ================= */

/* ---- core values on a concrete panel, no numbers, more air ---- */
.values-wrap{position:relative;margin-top:clamp(34px,5vw,60px);
  padding:clamp(30px,5vw,64px) clamp(20px,4vw,52px);
  background:var(--ink);color:var(--bone);overflow:hidden}
.values-wrap::before{content:"";position:absolute;inset:0;z-index:0;
  background:url('img/texture-concrete.jpg') center/cover no-repeat;opacity:.55;
  filter:grayscale(1) contrast(1.25)}
.values-wrap::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,12,12,.58),rgba(12,12,12,.74))}
.values-head{position:relative;z-index:2;text-align:center;margin-bottom:clamp(26px,4vw,44px)}
.values-tag{display:inline-block;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.26em;font-size:11px;background:var(--bone);color:var(--ink);padding:7px 16px}
.values-wrap .values{position:relative;z-index:2;background:transparent;border:0;
  grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin:0}
.values-wrap .value{background:transparent;padding:0;text-align:center}
.values-wrap .value h3{font-size:clamp(20px,2.2vw,27px);margin:0 0 12px;color:var(--bone)}
.values-wrap .value p{color:rgba(242,240,235,.72);font-size:14.5px;line-height:1.65;max-width:30ch;
  margin:0 auto}
@media(max-width:900px){.values-wrap .values{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:520px){.values-wrap .values{grid-template-columns:1fr;gap:28px}}

/* ---- life-around-the-gym strip ---- */
.hangout{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(20px,3vw,30px)}
.hangout figure{margin:0}
.hangout .ph{aspect-ratio:4/5}
@media(max-width:820px){.hangout{grid-template-columns:repeat(2,1fr)}}

/* ---- social feed: see the marquee below ---- */

/* ---- prepaid promos: the deals lead, and they look like deals ---- */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.promo{background:var(--ink);color:var(--bone);padding:clamp(20px,2.6vw,30px);position:relative;
  display:flex;flex-direction:column}
.promo--best{outline:2px solid var(--ink);outline-offset:4px}
.promo__k{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;margin:0 0 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.promo__slots{font-weight:500;letter-spacing:.12em;font-size:9px;background:var(--bone);
  color:var(--ink);padding:3px 8px}
.promo__p{font-family:var(--display);font-size:clamp(34px,4.4vw,52px);line-height:.9;margin:0 0 6px}
.promo__u{font-family:var(--body);font-size:12.5px;color:rgba(242,240,235,.62);margin:0 0 14px}
.promo__s{margin:auto 0 0;font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;background:var(--bone);color:var(--ink);
  padding:6px 10px;align-self:flex-start}
@media(max-width:820px){.promos{grid-template-columns:1fr}}

.rates--extra{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.rates--extra{grid-template-columns:1fr}}

/* ---- closer background ---- */
.closer__bg{position:absolute;inset:0;z-index:0}
.closer__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:grayscale(1) contrast(1.08);opacity:.42}
.closer__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.68),rgba(12,12,12,.88))}

/* ---- stop the one-word orphan in banner sublines ---- */
.pbanner__sub,.hero__sub,.lede{text-wrap:pretty}

/* ================= HOVER: every clickable thing responds ================= */
/* One language: the image eases in, an underline draws left to right, arrows
   slide. Gated behind a real pointer so nothing sticks on touch, and all of it
   is transform/opacity/filter so it stays on the compositor. */
@media (hover:hover) and (pointer:fine){

  /* home teaser cards */
  .tcard .ph{overflow:hidden}
  .tcard .ph img{transition:transform 620ms var(--ease),filter 460ms var(--ease)}
  .tcard:hover .ph img{transform:scale(1.045)}
  .tcard h3{position:relative;display:inline-block}
  .tcard h3::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform 380ms var(--ease)}
  .tcard:hover h3{text-decoration:none}
  .tcard:hover h3::after{transform:scaleX(1)}

  /* social post grid */
  .feed__i .ph{overflow:hidden}
  .feed__i .ph img{transition:transform 620ms var(--ease),filter 460ms var(--ease)}
  .feed__i:hover .ph img{transform:scale(1.06)}

  /* social account cards */
  .social{transition:background 220ms var(--ease),color 220ms var(--ease),
    transform 220ms var(--ease)}
  .social:hover{transform:translateY(-3px)}
  .social__btn{transition:background 220ms var(--ease),color 220ms var(--ease),
    border-color 220ms var(--ease)}
  .social:hover .social__btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}

  /* next-up cards: the arrow walks */
  .nx{transition:background 220ms var(--ease),color 220ms var(--ease)}
  .nx__go{display:inline-block;transition:transform 300ms var(--ease)}
  .nx:hover .nx__go{transform:translateX(7px)}

  /* nav: underline draws in */
  .nav__links a{position:relative}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform 300ms var(--ease)}
  .nav__links a:hover::after{transform:scaleX(1)}
  .nav__links a.is-here::after{transform:scaleX(1)}

  /* buttons lift a touch before the press pushes them back */
  .btn{transition:transform 200ms var(--ease),background 220ms var(--ease),color 220ms var(--ease)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.97)}

  /* mobile-menu links slide */
  .menu__links a{transition:transform 260ms var(--ease),opacity 260ms var(--ease)}
  .menu__links a:hover{transform:translateX(8px)}

  /* merch tiles breathe even though the card itself is not a link */
  .merch .ph{overflow:hidden}
  .merch .ph img{transition:transform 620ms var(--ease)}
  .merch article:hover .ph img{transform:scale(1.04)}

  /* gallery tiles already recolour; add a touch of scale for feedback */
  .gal .ph{overflow:hidden}
}

/* keyboard users get the same affordance */
.tcard:focus-visible h3::after,
.nav__links a:focus-visible::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .tcard:hover .ph img,.feed__i:hover .ph img,.merch article:hover .ph img{transform:none}
  .social:hover,.btn:hover{transform:none}
  .nx:hover .nx__go,.menu__links a:hover{transform:none}
}

/* ================= ENDLESS POST CAROUSEL ================= */
/* Seamless because the track holds THREE identical copies and shifts by exactly
   one third. Spacing uses margin-right, not gap: `gap` would not divide evenly
   across the copy boundary and you would see a jump on every loop. */
.social-sec{position:relative;overflow:hidden}
.social-sec::before{content:"";position:absolute;inset:0;z-index:0;
  background:url('img/texture-concrete.jpg') center/cover no-repeat;
  opacity:.16;filter:grayscale(1) contrast(1.2)}
.social-sec > *{position:relative;z-index:1}

.mq{position:relative;margin-top:clamp(20px,3vw,32px);overflow:hidden;
  /* fade the ends so tiles enter and leave instead of being chopped */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq__track{display:flex;width:max-content;will-change:transform;
  animation:mq-scroll 48s linear infinite}
.mq__i{flex:0 0 auto;display:block;
  width:clamp(150px,17vw,230px);margin-right:clamp(8px,1.1vw,14px);
  background:var(--paper-3);overflow:hidden}
.mq__i img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.14);
  transition:filter 420ms var(--ease),transform 620ms var(--ease)}

@keyframes mq-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.3333%,0,0)}
}
/* hovering anywhere on the strip holds it still so a tile can be clicked */
@media (hover:hover) and (pointer:fine){
  .mq:hover .mq__track{animation-play-state:paused}
  .mq__i:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.05)}
}
/* keyboard users must be able to stop it too */
.mq__track:focus-within{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .mq{-webkit-mask-image:none;mask-image:none;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .mq__track{animation:none}
}

/* ================= THE GYM — editorial layout ================= */
.gym__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:end;
  padding-bottom:clamp(24px,3.4vw,40px);margin-bottom:clamp(26px,3.6vw,44px);
  border-bottom:1px solid var(--rule)}
.gym__title .lbl{margin-bottom:12px}
.gym__title .d2{font-size:clamp(34px,5.4vw,68px);line-height:.92;margin:0}
.gym__lede{font-size:clamp(15px,1.45vw,17.5px);line-height:1.62;font-weight:400;
  color:#26261F;max-width:46ch;margin:0}   /* darker than the old grey, easier to read */

/* dominant image left, 2x2 beside it */
.gymgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.25fr);
  gap:clamp(14px,2vw,26px);align-items:stretch}
.gymgrid__main{margin:0;display:flex}
.gymgrid__main .ph{width:100%;height:100%;min-height:clamp(360px,46vw,660px)}
.gymgrid__main img{width:100%;height:100%;object-fit:cover}
.gymgrid__cards{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,26px) clamp(14px,2vw,26px)}
.fcard{margin:0;display:flex;flex-direction:column}
.fcard .ph{aspect-ratio:4/5}          /* one ratio for all four */
.fcard h3{font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:-.01em;margin:12px 0 5px;
  padding-top:10px;border-top:1px solid var(--rule)}
.fcard p{font-size:13.5px;line-height:1.55;font-weight:400;color:#33332C;margin:0}

/* restrained hover: tone and 2% scale only, never the layout */
.gymgrid .ph{overflow:hidden}
.gymgrid .ph img{transition:transform 620ms var(--ease),filter 420ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .gymgrid figure:hover .ph img{transform:scale(1.02)}
}
.gymgrid figure:focus-within .ph img{transform:scale(1.02)}

/* closing amenity band */
.amenband{list-style:none;margin:clamp(26px,3.6vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.amenband li{padding:clamp(14px,1.8vw,20px) 12px;text-align:center;
  font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:10.5px;color:var(--ink);
  border-left:1px solid var(--rule)}
.amenband li:first-child{border-left:0}

@media(max-width:1040px){
  .gym__head{grid-template-columns:1fr;gap:18px;align-items:start}
  .gymgrid{grid-template-columns:1fr}
  .gymgrid__main .ph{min-height:0;aspect-ratio:16/10}
  .amenband{grid-template-columns:repeat(3,1fr)}
  .amenband li:nth-child(3n+1){border-left:0}
  .amenband li:nth-child(n+4){border-top:1px solid var(--rule)}
}
@media(max-width:620px){
  .gymgrid__cards{grid-template-columns:1fr}
  .gymgrid__main .ph{aspect-ratio:4/3}
  .amenband{grid-template-columns:1fr 1fr}
  .amenband li:nth-child(odd){border-left:0}
  .amenband li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){
  .gymgrid figure:hover .ph img,.gymgrid figure:focus-within .ph img{transform:none}
}

/* lede that survives on its own once the duplicate section head is stripped */
.standalone-lede{max-width:62ch;margin:0 0 clamp(26px,3.4vw,42px);
  font-size:clamp(15px,1.45vw,17.5px);line-height:1.62;color:#26261F}

/* ============ ANNIVERSARY VIDEO ============ */
/* 9:16 source, so the frame is capped rather than full-width. */
.vid{max-width:400px;margin:0 auto}
.vid__frame{position:relative;line-height:0;background:#1a1a1a;
  border:1px solid var(--rule-b);outline:0}
.vid__el{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.vid__cap{margin:14px 0 0;text-align:center;font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,240,235,.5)}
@media(max-width:520px){.vid{max-width:100%}}