/* ============================================================
   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(--ink);
  --bg-2:#1A1815;
  --surface:var(--grey);
  --surface-2:var(--grey-hi);
  --line:rgba(229,228,226,.08);
  --line-2:rgba(229,228,226,.13);
  --text:var(--text-on-dark);
  --muted:var(--muted-on-dark);
  --muted-2:#8C8B89;
  --accent:var(--gold);
  --accent-2:var(--gold-hi);
}

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:#FBF7F0}
.nav .brand b i{color:var(--accent)}
.nav .brand small{color:rgba(251,247,240,.55)}
.nav-links a{color:rgba(251,247,240,.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:#FBF7F0}
.nav.scrolled{background:rgba(20,18,15,.86);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(229,228,226,.06)}
.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%,#1c1712 0%,var(--ink) 55%,#0a0908 100%)}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.22) 0%,transparent 42%,rgba(10,9,8,.5) 100%)}
.phero-inner{position:relative;z-index:2}
.phero-inner h1,.phero-inner h2,.phero-inner .display{color:#FBF7F0}
.phero-inner .lede,.phero-inner p{color:rgba(251,247,240,.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(229,228,226,.03)}

/* --- Buttons: gold/accent fill needs dark text regardless of theme --- */
.btn--primary{color:#241708}
.acc-item.open .acc-q .pm::before,.acc-item.open .acc-q .pm::after{background:#241708}