/* ============================================================
   LYFT — DARK MATTE shared layer (gym / cafe / contact / salon / about)
   Whole page stays dark grey/matte, matching the home theme — no more
   flip to a light ivory body. One accent sitewide, no per-page overrides.
   Load AFTER style.css.
   ============================================================ */
:root{
  --bg:var(--matte);
  --bg-2:var(--matte-2);
  --surface:var(--lacquer);
  --surface-2:var(--lacquer-2);
}

body{background:var(--bg);color:var(--text)}

/* --- Nav: page never goes light, so text stays the same in both states —
   only the backing gains a translucent dark blur once scrolled --- */
.nav .brand b{color:var(--text-hi)}
.nav .brand b i{color:var(--accent)}
.nav .brand small{color:rgba(246,248,250,.55)}
.nav-links a{color:rgba(246,248,250,.82)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active{background:rgba(255,255,255,.12)}
.nav .burger{border-color:rgba(255,255,255,.3)}
.nav .burger span{background:var(--text-hi)}
.nav.scrolled{background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav.scrolled .brand b{color:var(--text)}
.nav.scrolled .brand small{color:var(--muted-2)}
.nav.scrolled .nav-links a{color:var(--muted)}
.nav.scrolled .nav-links a:hover,.nav.scrolled .nav-links a.active{color:var(--text)}
.nav.scrolled .nav-links a.active{background:rgba(236,238,241,.07)}
.nav.scrolled .burger span{background:var(--text)}
/* the mark's glow variant reads fine in both nav states — there is no
   light nav state to switch to anymore */
.nav.scrolled .brand-mark .bm-dark{display:block}
.nav.scrolled .brand-mark .bm-light{display:none}

/* --- Hero: dark cinematic band (ambient animation glows on it), matte
   dark body below — same ground, no seam between hero and body --- */
.phero{background:radial-gradient(130% 115% at 72% 16%,var(--lacquer-3) 0%,var(--matte) 55%,var(--matte-3) 100%)}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,5,.24) 0%,transparent 42%,rgba(4,4,5,.52) 100%)}
.phero-inner{position:relative;z-index:2}
.phero-inner h1,.phero-inner h2,.phero-inner .display{color:var(--text-hi)}
.phero-inner .lede,.phero-inner p{color:rgba(246,248,250,.86)}
.phero-inner .eyebrow{color:var(--accent-2)}

/* --- Preloader on dark --- */
.preloader{background:var(--bg)}
.pre-logo{color:var(--text)}

/* --- Matte card depth: solid fills, thin darker borders, tight low-opacity
   shadows. No glow, no gradient sheen (per design consult) --- */
.card,.temp,.split-media,.trainer,.stat,.info-card,.form-card,.cta-band,.panel{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.card:hover,.temp:hover{border-color:var(--line-2);box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* --- Footer + oversized watermark on dark --- */
.footer{background:var(--bg-2)}
.footer-watermark{color:rgba(236,238,241,.035)}

/* --- Buttons: gold/accent fill needs dark text regardless of theme --- */
.btn--primary{color:var(--btn-fg)}
.acc-item.open .acc-q .pm::before,.acc-item.open .acc-q .pm::after{background:var(--on-silver)}