/* =========================================================================
   WORKOUTZONE — "Alabaster premium" re-skin
   Loads AFTER site.css and re-themes the shared components.
   Direction: warm alabaster ground · espresso ink · restrained brass.
   (Boutique-studio palette — warm neutrals + one quiet metallic.)
   Markup & content unchanged.
   Scope: home + disciplines · the difference · the team · membership.
   ========================================================================= */

:root{
  /* grounds — warm alabaster / greige */
  --bg:#e9e4da;
  --bg-2:#e0dace;
  --panel:#f1ede5;
  --panel-2:#e6e1d7;

  /* hairlines (warm ink on light) */
  --line:rgba(28,26,22,.12);
  --line-2:rgba(28,26,22,.22);

  /* ink — warm espresso text on the alabaster ground */
  --bone:#1f1c18;
  --bone-dim:#45403a;
  --muted:#756e63;
  --muted-2:#9c958a;

  /* accent — refined brass / cognac */
  --orange:#97653e;
  --orange-soft:#b88a5b;
  --orange-deep:#7c5230;
  --glow:rgba(151,101,62,.16);
}

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

/* =========================================================================
   NAV
   ========================================================================= */
.nav.scrolled{border-bottom-color:var(--line)}
.nav.scrolled::before{background:rgba(238,233,224,.84)}
.nav-burger span{background:var(--bone)}
@media(max-width:980px){
  .nav-links{background:rgba(241,237,229,.98);backdrop-filter:blur(20px)}
}

/* =========================================================================
   INTERIOR PAGE HERO — light treatment
   Headline sits on near-solid alabaster ground; the photo whispers in from
   the right and feathers out to the left (echoes the hero preview seam).
   ========================================================================= */
.page-hero{background:var(--bg);padding:212px 0 110px}
@media(max-width:760px){.page-hero{padding:150px 0 64px}}
.page-hero .ph-bg{
  filter:contrast(1.03) saturate(.92) brightness(1.04);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 33%,#000 72%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 33%,#000 72%,#000 100%);
}
.page-hero .ph-grad{background:
  linear-gradient(90deg,var(--bg) 25%,rgba(233,228,218,.55) 50%,rgba(233,228,218,0) 82%),
  linear-gradient(0deg,rgba(233,228,218,.72),rgba(233,228,218,0) 40%)}
.page-hero .ph-led{opacity:.5}
.page-hero.solid{background:var(--bg)}
.page-hero.solid .ph-grad{background:radial-gradient(120% 100% at 85% -8%,rgba(151,101,62,.12),transparent 55%)}

/* =========================================================================
   FEATURE / BIO / PILLARS / TERMS / FAQ / STATS
   These all key off the flipped tokens, so they re-theme automatically.
   A couple of literal-colour surfaces need explicit overrides:
   ========================================================================= */

/* film grain reads as a faint darkening on light — soften it */
.grain::after{opacity:.025;mix-blend-mode:multiply}

/* =========================================================================
   MEMBERSHIP — packages
   ========================================================================= */
/* popular card: warm brass tint instead of the old orange wash */
.plan4.popular{border-color:var(--orange);
  background:linear-gradient(180deg,rgba(151,101,62,.08),transparent 46%)}
/* the freq pill + popular tag stay brass with white text (inherited) */

/* =========================================================================
   CTA BANDS — light premium treatment (was dark/cinematic).
   Alabaster ground, dark headline, brass accent, photo whispering underneath.
   ========================================================================= */
.cta{background:var(--bg-2)}
.cta .cta-bg{filter:contrast(1.02) saturate(.9) brightness(1.06);opacity:.18}
.cta .cta-grad{background:
  linear-gradient(180deg,rgba(224,218,206,.82),rgba(224,218,206,.9)),
  radial-gradient(120% 90% at 50% 0%,rgba(151,101,62,.10),transparent 60%)}
.cta .h2,.cta h2{color:var(--bone)}
.cta .lede{color:var(--bone-dim)}
.cta .eyebrow,.cta .accent{color:var(--orange-deep)}
.cta .eyebrow::before{background:var(--orange-deep)}

/* =========================================================================
   FOOTER — grounded warm-charcoal block (complements the alabaster pages)
   ========================================================================= */
.footer{background:#1c1a17;border-top-color:rgba(255,255,255,.08)}
.footer h4{color:#8d877c}
.footer ul a{color:#d2cdc4}
.footer ul a:hover{color:var(--orange-soft)}
.footer-tag{color:#9c968b}
.footer-bottom span{color:#776f64}