/* =========================================================
   COHERENT ENERGY — LIGHT THEME
   Loaded after each page's inline <style>. Redefines the design
   tokens for a warm, welcoming light palette and restyles the
   shared components. Page-specific sections are scoped with
   html[data-page="…"] further down.

   Colour roles
     --ink      page background (warm cream)
     --sand     alternate section band
     --surface  cards
     --paper    main text (warm charcoal)
     --gold     Honey Gold — FILLS only (buttons, dots, strokes)
     --yellow   deep amber — small TEXT accents (AA on cream)
     --yellow-display  large italic headline accents
     --on-gold  text on a gold fill
     --earth    deep warm brown (footer, dark button on gold)
   ========================================================= */
:root {
  --ink: #FBF7F0;
  --ink-2: #FFFFFF;
  --ink-3: #F4EDE0;
  --sand: #F4EDE0;
  --surface: #FFFFFF;
  --surface-warm: #FFFBF2;
  --paper: #2B2521;
  --paper-2: #F2F1EA;
  --mute-2: #4F4740;
  --mute: #7A716A;
  --gold: #e6a817;
  --yellow: #946600;
  --yellow-display: #BD8408;
  --on-gold: #1E1A17;
  --line: rgba(43,37,33,0.10);
  --line-strong: rgba(43,37,33,0.20);
  --shadow-card: 0 14px 40px -22px rgba(43,37,33,0.28), 0 1px 2px rgba(43,37,33,0.04);
  /* Active-card shadow: the card shadow with a gold cast underneath. Used
     when a case card is engaged — hovered on desktop, or flipped to its
     back on touch (home Approach card, Case Records cards). */
  --shadow-gold: 0 22px 50px -22px rgba(230,168,23,0.35), var(--shadow-card);
  --earth: #2B2521;
}
::selection { background: var(--gold); color: var(--on-gold); }

/* ---------- Paper grain (soft) — a fixed, faint noise layer over the page ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.085;
  mix-blend-mode: multiply;
}

/* ---------- Large italic accents: deeper honey for contrast on cream ---------- */
.hero h1 .accent,
.approach h2 em,
.science h2 em,
.hp-intro h2 em,
.marquee-track em,
.cr-readout.post .num,
.display em[style*="--yellow"],
em.serif-italic[style*="--yellow"] { color: var(--yellow-display) !important; }

/* Eyebrow squiggle: deeper honey to match the amber text */
.eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23BD8408' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}

/* ---------- Anything sitting on a gold fill keeps dark text ---------- */
.btn-primary,
.mobile-menu .menu-cta,
.mobile-menu .menu-cta:hover,
.hero-video-play,
.video-lightbox-close:hover,
.video-lightbox-close:focus-visible,
.video-lb-sound:hover,
.lightbox-close:hover,
.contact-lightbox-close:hover,
.contact-lightbox-close:focus-visible,
.contact-form button[type=submit],
.cr-back-play,
.testimonial .avatar,
.testimonial-cta .cta-go,
.signup button { color: var(--on-gold); }

/* ---------- Fills that must stay bright Honey Gold (--yellow is now the text shade) ---------- */
.btn-primary,
.hero-video-play,
.cr-back-play,
.contact-form button[type=submit],
.signup button,
.testimonial-cta .cta-go,
.t-dot.active,
.cr-nav-dot.active,
.section-dots a.active .dot,
.section-dots a:hover .dot,
.marquee-track .dot,
.approach .paths-label::before,
.cr-row .live::before,
.science .principles::after,
.hero-video-label .live-dot,
.metric .value .yellow-mark,
.condition::before,
a.testimonial-link::after,
.hp-window::before,
.video-lightbox-close:hover,
.lightbox-close:hover,
.contact-lightbox-close:hover,
.video-lb-sound:hover { background: var(--gold); }
.testimonial-cta .cta-go { border-color: var(--gold); }
.testimonial .avatar { background: linear-gradient(135deg, var(--gold), #c9a012); }
.science .principles .principle-ring,
.hero-video-play::after,
.cr-back-play::after { border-color: var(--gold); }
.hero-scrollcue .line { background: linear-gradient(180deg, transparent, var(--gold)); }
.t-dot.active,
.cr-nav-dot.active { border-color: var(--gold); }
.hero-video-label .dur,
.hp-window .hp-tick { color: var(--gold); }   /* on photos */

/* ---------- Buttons ---------- */
.btn-ghost { border-color: var(--line-strong); }
.btn-primary:hover { box-shadow: 0 14px 36px -10px rgba(230,168,23,0.55); }

/* ---------- Nav + mobile menu ---------- */
.nav.scrolled {
  background: rgba(251,247,240,0.78);
  border-bottom-color: var(--line);
}
.nav-logo:hover img,
.nav-logo.tap-glow img { filter: brightness(1.04) drop-shadow(0 0 6px rgba(230,168,23,0.45)); }
.mobile-menu { background: rgba(251,247,240,0.97); }
.mobile-menu .menu-secondary { border-color: var(--line-strong); }

/* ---------- Section dots ---------- */
.section-dots .dot { background: rgba(43,37,33,0.25); }
.section-dots .label {
  background: rgba(251,247,240,0.95);
  color: var(--yellow);
  border-color: rgba(230,168,23,0.35);
  box-shadow: var(--shadow-card);
}

/* ---------- Modals: light frosted overlays instead of black ---------- */
.contact-lightbox,
.lightbox,
.video-lightbox { background: rgba(244,237,224,0.86); }
.contact-lightbox-stage {
  box-shadow: 0 0 0 1px rgba(230,168,23,0.18), 0 30px 80px -20px rgba(43,37,33,0.35), 0 0 90px rgba(230,168,23,0.18);
}
.contact-lightbox-close,
.lightbox-close {
  background: rgba(43,37,33,0.06);
  border-color: rgba(43,37,33,0.14);
}
.contact-form input,
.contact-form textarea { background: var(--ink); }
.contact-form-error { color: #B42318; background: rgba(180,35,24,0.06); border-color: rgba(180,35,24,0.3); }
.lightbox-body,
.lightbox-body iframe { background: #fff; }
.video-lightbox-stage { box-shadow: 0 0 0 1px rgba(230,168,23,0.18), 0 30px 80px -20px rgba(43,37,33,0.45), 0 0 90px rgba(230,168,23,0.2); }
.video-lightbox-close,
.video-lb-sound { color: #FAFAF7; }   /* both sit on the video */

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); }

/* ---------- Footer: one deep warm-brown anchor (keeps the light logo) ---------- */
footer.site-foot {
  background: var(--earth);
  color: #FBF7F0;
  border-top: none;
}
.foot-brand p,
.foot-col a,
.foot-contact a,
.foot-bottom,
.foot-col p { color: rgba(251,247,240,0.72) !important; }
.foot-col h5 { color: var(--gold); }
.foot-col a:hover,
.foot-contact a:hover,
.foot-bottom .legal a:hover { color: var(--gold) !important; }
.foot-bottom,
.foot-social { border-top-color: rgba(255,255,255,0.10); }
.foot-social a { border-color: rgba(255,255,255,0.14); color: rgba(251,247,240,0.72); }
.foot-social a:hover,
.foot-social a:focus-visible { color: var(--gold); border-color: var(--gold); }
.signup input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #FBF7F0;
}
.signup input::placeholder { color: rgba(251,247,240,0.45); }
.signup input:focus { border-color: var(--gold); }

/* =========================================================
   HOME PAGE
   ========================================================= */
/* Hero: cream with a soft gold glow, and the retouched studio photo
   (assets/home/hero-bg.jpg) faded in behind the video card */
html[data-page="home"] .hero {
  background:
    radial-gradient(ellipse 55% 60% at 22% 45%, rgba(230,168,23,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 30%, rgba(230,168,23,0.08) 0%, transparent 70%),
    var(--ink);
}
html[data-page="home"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("home/hero-bg.jpg") center 24% / cover no-repeat;
  opacity: 0.22;
  filter: saturate(0.7) sepia(0.28) contrast(0.95);
  /* fade the photo out toward the left so the headline sits on clean cream */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  pointer-events: none;
}
@media (max-width: 960px) {
  /* stacked layout: the photo sits behind everything, so fade it more evenly */
  html[data-page="home"] .hero::before {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
  }
}
html[data-page="home"] .hero-vignette {
  /* The bottom stop is FULLY opaque body cream (#FBF7F0): the vignette sits
     above the faded photo, the gold gradients and the wave canvas, so this
     guarantees the hero's last pixel rows are exactly the cream of the
     section below. Anything less (it was 0.85) leaves a faint tonal step at
     the section boundary that OLED phones render as a visible line. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(251,247,240,0.35) 70%, rgba(251,247,240,0.9) 100%),
    linear-gradient(180deg, rgba(251,247,240,0.55) 0%, transparent 25%, transparent 72%, rgba(251,247,240,0.85) 92%, rgb(251,247,240) 100%);
}
html[data-page="home"] .hero-video,
html[data-page="home"] .hero-video-surface { background: var(--sand); }
html[data-page="home"] .hero-video-label { color: #FAFAF7; }   /* sits on the video */
html[data-page="home"] .hero-video:hover,
html[data-page="home"] .hero-video:focus-visible { box-shadow: 0 30px 70px -20px rgba(43,37,33,0.35); }

/* Outcomes photo band (stays a photo band; text stays light on it) */
html[data-page="home"] .stat-fused-overlay .big-number,
html[data-page="home"] .stat-fused-overlay .caption { color: #FAFAF7; }
html[data-page="home"] .stat-fused-overlay .footnote { color: rgba(250,250,247,0.82); }
html[data-page="home"] .stat-fused-overlay .big-number .yellow,
html[data-page="home"] .stat-fused-overlay .big-number .slash,
html[data-page="home"] .stat-fused-overlay .big-number .plus,
html[data-page="home"] .stat-fused-overlay .eyebrow { color: var(--gold); }
html[data-page="home"] .stat-fused-overlay .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23e6a817' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
html[data-page="home"] .stat-fused-bg .hp-window img { filter: brightness(0.62) saturate(0.85) contrast(1.02) sepia(0.04); }

/* Approach: white cards with soft shadow */
html[data-page="home"] .approach .path-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-page="home"] .approach .path-card:hover { background: var(--surface-warm); border-color: rgba(230,168,23,0.55); }
html[data-page="home"] .case-record {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
  box-shadow: var(--shadow-card);
}
html[data-page="home"] .case-record:hover { box-shadow: var(--shadow-gold); }
/* Back face (photo + play): the front's shadow used to vanish the moment the
   card turned. The back now carries the card shadow, and takes the gold
   active shadow while the card is engaged — hovered to the back on desktop,
   or flipped by tap/scroll on touch. */
html[data-page="home"] .cr-back { box-shadow: var(--shadow-card); transition: box-shadow .35s ease; }
html[data-page="home"] .cr-stage.flipped .cr-back { box-shadow: var(--shadow-gold); }
@media (hover: hover) and (pointer: fine) {
  html[data-page="home"] .cr-stage:hover .cr-back { box-shadow: var(--shadow-gold); }
}
html[data-page="home"] .cr-nav-dot { border-color: rgba(43,37,33,0.28); }
html[data-page="home"] .cr-readouts { background: rgba(230,168,23,0.11); border-color: rgba(230,168,23,0.38); }
html[data-page="home"] .cr-back-label,
html[data-page="home"] .cr-back-name { color: #FAFAF7; }

/* Documented Results: a warm sand panel instead of white-on-black */
html[data-page="home"] .metrics { color: var(--paper); }
html[data-page="home"] .metrics::before { background: var(--sand); }
@media (max-width: 768px) { html[data-page="home"] .metrics { background: var(--sand); } }
html[data-page="home"] .metrics .eyebrow { color: var(--yellow); }
html[data-page="home"] .metrics .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23BD8408' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
html[data-page="home"] .metrics h2,
html[data-page="home"] .metrics-lead,
html[data-page="home"] .metric .value,
html[data-page="home"] .metrics-note a,
html[data-page="home"] .metric .sub a:hover { color: var(--paper); }
html[data-page="home"] .metrics-note { color: var(--mute-2); }
html[data-page="home"] .metric .label { color: #3E3733; }
html[data-page="home"] .metric.metric--lead { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35)); border-radius: 0 0 14px 14px; }
@media (hover: hover) {
  html[data-page="home"] .metric.metric--lead:hover { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.5)); }
}

/* Testimonials carousel: white cards, softer corners */
html[data-page="home"] .testimonial {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
html[data-page="home"] a.testimonial-link:hover { background: var(--surface-warm); }
html[data-page="home"] .testimonial .delta-condition { background: rgba(43,37,33,0.05); }
html[data-page="home"] .testimonial .delta { background: rgba(230,168,23,0.12); border-color: rgba(230,168,23,0.4); }
html[data-page="home"] .testimonial .quote-mark,
html[data-page="home"] .testimonial-cta .quote-mark { color: var(--gold); }
html[data-page="home"] a.testimonial-cta { background: linear-gradient(155deg, rgba(230,168,23,0.14) 0%, rgba(230,168,23,0.05) 60%, #fff 100%); }
html[data-page="home"] .t-dot { border-color: rgba(43,37,33,0.28); }

/* Conditions: sand band, white cells */
html[data-page="home"] .conditions { background: var(--sand); }
html[data-page="home"] .conditions-grid { border-radius: 14px; }
html[data-page="home"] .condition { background: var(--surface); }
html[data-page="home"] .condition:hover { background: var(--surface-warm); }
html[data-page="home"] .condition .condition-icon { background: rgba(230,168,23,0.12); }

/* Science */
html[data-page="home"] .science {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(230,168,23,0.09) 0%, transparent 60%),
    var(--ink);
}
html[data-page="home"] .science .principles::before { background: var(--line-strong); }

/* CTA band: gold stays; the button becomes deep warm brown */
.cta-band,
.cta-band .eyebrow { color: var(--on-gold); }
.cta-band .btn-on-yellow { background: var(--earth); color: #FBF7F0; }
.cta-band .btn-on-yellow:hover { background: #3A322D; }
.cta-band .ghost-on-yellow { color: var(--on-gold); }

/* In Practice photo strip */
html[data-page="home"] .hp-window { background: var(--sand); }
html[data-page="home"] .hp-window + .hp-window { box-shadow: inset 1px 0 0 rgba(255,255,255,0.55); }
html[data-page="home"] .hp-window img { filter: brightness(0.7) saturate(0.85) contrast(1.02) sepia(0.05); }
html[data-page="home"] .hp-window:hover img,
html[data-page="home"] .hp-window:focus-visible img { filter: brightness(0.9) saturate(0.95) contrast(1.02) sepia(0); }
html[data-page="home"] .hp-window .hp-tick .lbl { color: rgba(250,250,247,0.8); }
html[data-page="home"] .hp-window:hover .hp-tick .lbl,
html[data-page="home"] .hp-window:focus-visible .hp-tick .lbl { color: #FAFAF7; }
@media (max-width: 900px) {
  html[data-page="home"] .hp-stack > .hp-window:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); }
  html[data-page="home"] .hp-stack > .hp-window:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(255,255,255,0.55); }
}

/* =========================================================
   CONFIRMATION PAGE (confirmed.html — has its own small stylesheet)
   ========================================================= */
html[data-page="confirmed"] .nav { background: rgba(251,247,240,0.78); border-bottom-color: var(--line); }
html[data-page="confirmed"] .step { background: var(--surface); box-shadow: var(--shadow-card); }
html[data-page="confirmed"] .note { background: var(--surface); border-left-color: var(--gold); }
html[data-page="confirmed"] .badge { background: rgba(230,168,23,0.14); }
html[data-page="confirmed"] .badge svg { stroke: var(--gold); }
html[data-page="confirmed"] .foot img { opacity: 1; }


/* =========================================================
   PAGE: about
   ========================================================= */
/* =========================================================
   COHERENT ENERGY — about.html light-theme overrides
   Loads after assets/theme-light.css. Only page-specific
   components that the shared sheet does not cover.
   Every selector is scoped to html[data-page="about"].
   Section rhythm: hero (cream) → photo strip → mission (cream)
   → founder (sand) → standard (cream) → philosophy (sand)
   → location (cream) → cta (gold) → footer (earth).
   ========================================================= */

/* ---------- Base: ::selection used --yellow as a FILL with --ink text ---------- */
html[data-page="about"] ::selection {
  background: var(--gold);
  color: var(--on-gold);
}

/* =========================================================
   PAGE HERO (.page-hero — this page's own hero; shared sheet only
   restyles the home .hero)
   ========================================================= */
/* .page-hero::before — linear-gradient ran rgba(10,10,10,0) → var(--ink).
   Transparent BLACK → cream interpolates through muddy grey; use a
   transparent CREAM stop instead. Gold radial glow can stay. */
html[data-page="about"] .page-hero::before {
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(230,168,23,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(251,247,240,0) 0%, var(--ink) 92%);
}
/* .page-hero h1 em / .page-hero h1 .word.accent — big italic headline accents
   (page rules out-specify the shared display-accent rule) */
html[data-page="about"] .page-hero h1 em,
html[data-page="about"] .page-hero h1 .word.accent {
  color: var(--yellow-display);
}

/* =========================================================
   PRACTICE STATS PARALLAX (.treatment-parallax / .tp-*) — photo windows.
   Text sits ON PHOTOS so it must stay light; --paper / --mute-2 flipped dark.
   ========================================================= */
/* .tp-window img — brightness(0.42) was tuned for a black page; lift a little
   so the strip does not read as a black slab on cream. Dark overlays kept. */
html[data-page="about"] .tp-window img {
  filter: brightness(0.58) saturate(0.85) contrast(1.04) sepia(0.06);
}
html[data-page="about"] .tp-window:hover img,
html[data-page="about"] .tp-window:focus-visible img {
  filter: brightness(0.72) saturate(0.95) contrast(1.02) sepia(0);
}
/* .tp-window::after — overlays stay dark (on photo) but slightly lighter */
html[data-page="about"] .tp-window::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 14%, rgba(10,10,10,0.52) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.16) 50%, rgba(10,10,10,0.58) 100%);
}
html[data-page="about"] .tp-window:hover::after,
html[data-page="about"] .tp-window:focus-visible::after {
  background:
    radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(10,10,10,0.42) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.08) 50%, rgba(10,10,10,0.52) 100%);
}
/* .tp-window::before — 2px hover underline used --yellow as a FILL */
html[data-page="about"] .tp-window::before { background: var(--gold); }
/* .tp-window:focus-visible — outline is drawn on the photo, keep bright gold */
html[data-page="about"] .tp-window:focus-visible { outline-color: var(--gold); }
/* .tp-overlay text — was var(--paper)/var(--mute-2)/var(--yellow); on photo → light */
html[data-page="about"] .tp-overlay .tp-lbl { color: rgba(250,250,247,0.78); }
html[data-page="about"] .tp-overlay .tp-val { color: #FAFAF7; }
html[data-page="about"] .tp-overlay .tp-val em { color: var(--gold); }
/* .tp-tick — case number in the corner of the photo */
html[data-page="about"] .tp-window .tp-tick { color: var(--gold); }
html[data-page="about"] .tp-window .tp-tick .lbl { color: rgba(250,250,247,0.72); }
html[data-page="about"] .tp-window:hover .tp-tick .lbl,
html[data-page="about"] .tp-window:focus-visible .tp-tick .lbl { color: #FAFAF7; }

/* =========================================================
   MISSION (.mission stays cream via the flipped --ink token)
   ========================================================= */
/* .mission h2 em — big italic accent */
html[data-page="about"] .mission h2 em { color: var(--yellow-display); }
/* .mission .quote-card — 2px left rule used --yellow as a FILL */
html[data-page="about"] .mission .quote-card { border-left-color: var(--gold); }
/* .mission-venn — hard-coded #161616→#0d0d0d card gradient */
html[data-page="about"] .mission-venn {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-page="about"] .mission-venn::before {
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(230,168,23,0.07) 0%, transparent 65%);
}
/* .venn-circle — gold washes read a touch weaker on white; nudge the stroke */
html[data-page="about"] .venn-circle {
  fill: rgba(230,168,23,0.16);
  stroke: rgba(230,168,23,0.55);
}
/* .venn-core / .venn-core-ring — SVG fill + stroke used --yellow */
html[data-page="about"] .venn-core { fill: var(--gold); }
html[data-page="about"] .venn-core-ring { stroke: var(--gold); }

/* =========================================================
   FOUNDER (.founder — alternate band → sand)
   ========================================================= */
/* .founder — radial gold glow over var(--ink); switch base to sand so it
   alternates against mission (cream) and standard (cream) */
html[data-page="about"] .founder {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(230,168,23,0.09) 0%, transparent 55%),
    var(--sand);
}
/* .portrait — photo card; #0d0d0d fallback behind the photo → warm earth,
   plus the standard card shadow */
html[data-page="about"] .portrait {
  background: var(--earth);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
html[data-page="about"] .portrait:hover { border-color: rgba(230,168,23,0.45); }
/* .portrait .badge / .corner — text ON the photo (dark vignette kept) → stay light */
html[data-page="about"] .portrait .badge { border-top-color: rgba(255,255,255,0.22); }
html[data-page="about"] .portrait .badge .name { color: #FAFAF7; }
html[data-page="about"] .portrait .badge .role { color: rgba(250,250,247,0.72); }
html[data-page="about"] .portrait .badge .stamp { color: var(--gold); }
html[data-page="about"] .portrait .corner { color: rgba(250,250,247,0.62); }
/* .portrait .corner::before — pulsing dot used --yellow as FILL + glow */
html[data-page="about"] .portrait .corner::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}
/* .founder-body h2 em — big italic accent */
html[data-page="about"] .founder-body h2 em { color: var(--yellow-display); }
/* .founder-body .role-tag — gold pill; text stays amber, tint slightly stronger on sand */
html[data-page="about"] .founder-body .role-tag {
  background: rgba(230,168,23,0.12);
  border-color: rgba(230,168,23,0.40);
  color: var(--yellow);
}
/* .founder-body .sig-mark — large italic serif signature */
html[data-page="about"] .founder-body .sig-mark { color: var(--yellow-display); }

/* =========================================================
   STANDARD BAND (.standard-band — cream; pillars grid is hairline on cream)
   ========================================================= */
/* .standard-band h2 em — big italic accent */
html[data-page="about"] .standard-band h2 em { color: var(--yellow-display); }
/* .standard-band::before — gold radial is fine on cream; slightly stronger */
html[data-page="about"] .standard-band::before {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(230,168,23,0.08) 0%, transparent 70%);
}

/* =========================================================
   PHILOSOPHY (.philosophy — was the INVERTED light band: bg var(--paper),
   text var(--ink). With flipped tokens it would become a charcoal band with
   invisible borders/copy. Re-based as the sand alternate band, dark text.)
   ========================================================= */
html[data-page="about"] .philosophy {
  background: var(--sand);
  color: var(--paper);
}
/* .philosophy .eyebrow — original used the contrast colour (ink) instead of
   gold in this band; keep that intent with dark charcoal + dark squiggle */
html[data-page="about"] .philosophy .eyebrow { color: var(--paper); }
html[data-page="about"] .philosophy .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%232B2521' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* .philosophy h2 — color: var(--ink) would now be cream */
html[data-page="about"] .philosophy h2 { color: var(--paper); }
html[data-page="about"] .philosophy h2 em { color: var(--yellow-display); }
/* .philosophy-grid / .belief — hairlines used --line-dark (still a dark
   hairline); use the warm --line-strong so the grid reads on sand */
html[data-page="about"] .philosophy-grid {
  border-top-color: var(--line-strong);
  border-left-color: var(--line-strong);
}
html[data-page="about"] .belief {
  border-right-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
}
html[data-page="about"] .belief:hover { background: rgba(230,168,23,0.10); }
/* .belief p — hard-coded #404040 body copy */
html[data-page="about"] .belief p { color: var(--mute-2); }

/* =========================================================
   LOCATION (.location — cream)
   ========================================================= */
/* .location h2 em — big italic accent */
html[data-page="about"] .location h2 em { color: var(--yellow-display); }
/* .location-figure — placeholder hatch used rgba(255,255,255,0.018) over --ink-2 */
html[data-page="about"] .location-figure {
  background:
    repeating-linear-gradient(45deg, rgba(43,37,33,0.03) 0 14px, transparent 14px 28px),
    var(--surface);
}
/* .location-figure.has-image — photo frame; add the card shadow */
html[data-page="about"] .location-figure.has-image {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .location-card — rgba(255,255,255,0.02) glass panel → white card */
html[data-page="about"] .location-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

/* =========================================================
   CTA BAND (.cta-band — page has its own copy; shared sheet only covers the
   home page). Gold fill: text → --on-gold, dark button → --earth.
   ========================================================= */
/* .cta-band { color: var(--ink) } — --ink is now cream */
html[data-page="about"] .cta-band { color: var(--on-gold); }
/* .cta-band .eyebrow — ink text + #0A0A0A squiggle → on-gold */
html[data-page="about"] .cta-band .eyebrow { color: var(--on-gold); }
html[data-page="about"] .cta-band .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%231E1A17' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* .cta-band h2 em[style="color:#000"] — inline black on gold; keep it dark
   (NOT --yellow-display: this em sits on the gold band) but warm it */
html[data-page="about"] .cta-band h2 em[style] { color: var(--on-gold) !important; }
/* .cta-band .lede / .or — rgba(10,10,10,x) text on gold → warm dark */
html[data-page="about"] .cta-band .lede { color: rgba(30,26,23,0.78); }
html[data-page="about"] .cta-band .or { color: rgba(30,26,23,0.55); }
/* .btn-on-yellow — background var(--ink) would now be CREAM with dark text */
html[data-page="about"] .cta-band .btn-on-yellow {
  background: var(--earth);
  color: #FAFAF7;
}
html[data-page="about"] .cta-band .btn-on-yellow:hover { background: #3A322C; color: #FAFAF7; }
/* .ghost-on-yellow — color var(--ink) → on-gold; borders warm dark */
html[data-page="about"] .cta-band .ghost-on-yellow {
  border-color: rgba(30,26,23,0.35);
  color: var(--on-gold);
}
html[data-page="about"] .cta-band .ghost-on-yellow:hover {
  border-color: var(--on-gold);
  color: var(--on-gold);
  background: rgba(30,26,23,0.06);
}

/* =========================================================
   FOOTER — shared sheet owns footer.site-foot; the one thing it cannot reach
   is this page's INLINE style on the "Stay Attuned" blurb:
   <p style="color:var(--mute-2)"> — --mute-2 is now dark on the earth footer.
   Harmless duplicate if theme-light.css already covers it.
   ========================================================= */
html[data-page="about"] footer.site-foot .foot-col p[style] { color: rgba(250,250,247,0.65) !important; }


/* =========================================================
   PAGE: treatments
   ========================================================= */
/* =========================================================
   COHERENT ENERGY — light-theme overrides: treatments.html
   Loads after assets/theme-light.css. Every selector is scoped to
   html[data-page="treatments"]. Colours / backgrounds / borders /
   shadows / filters only — no layout, spacing, type or motion.

   Section rhythm (top → bottom):
     page-head          cream  (var(--ink))
     treatment-parallax photos (dark overlays kept, text stays light)
     experience         cream
     process            SAND   (was var(--ink); alternated so it doesn't blur into experience)
     multi-session      cream
     locations          SAND base + white sliding panel (was ink base + white panel)
     faq                cream
     cta-band           gold
     footer             shared (earth)
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL
   `::selection { background: var(--yellow); color: var(--ink) }`
   --yellow is now dark amber and --ink is cream → flip to gold / on-gold.
   --------------------------------------------------------- */
html[data-page="treatments"] ::selection {
  background: var(--gold);
  color: var(--on-gold);
}

/* ---------------------------------------------------------
   PAGE HEAD (this page's own hero — not covered by shared .hero rules)
   .page-head h1 em / .word.accent used var(--yellow) as a big italic accent.
   Gold radial gradients in ::before and the gold canvas strokes are fine on cream.
   --------------------------------------------------------- */
html[data-page="treatments"] .page-head h1 em,
html[data-page="treatments"] .page-head h1 .word.accent {
  color: var(--yellow-display);
}

/* ---------------------------------------------------------
   TREATMENT PARALLAX — four photo windows with light text on top.
   Text over photos must stay light; --paper / --mute-2 now resolve to dark.
   --------------------------------------------------------- */
/* .tp-window img — brightness(0.42) lifted per rule 6, but kept dark enough for light text */
html[data-page="treatments"] .tp-window img {
  filter: brightness(0.55) saturate(0.85) contrast(1.03) sepia(0.04);
}
html[data-page="treatments"] .tp-window:hover img,
html[data-page="treatments"] .tp-window:focus-visible img {
  filter: brightness(0.72) saturate(0.95) contrast(1.02) sepia(0);
}
/* .tp-window::after — dark vignette on a PHOTO: kept dark, slightly lighter */
html[data-page="treatments"] .tp-window::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 12%, rgba(10,10,10,0.5) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.15) 50%, rgba(10,10,10,0.55) 100%);
}
html[data-page="treatments"] .tp-window:hover::after,
html[data-page="treatments"] .tp-window:focus-visible::after {
  background:
    radial-gradient(ellipse at 50% 55%, transparent 28%, rgba(10,10,10,0.42) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.08) 50%, rgba(10,10,10,0.5) 100%);
}
/* .tp-window:focus-visible outline + ::before underline bar used var(--yellow) as a FILL */
html[data-page="treatments"] .tp-window:focus-visible {
  outline-color: var(--gold);
}
html[data-page="treatments"] .tp-window::before {
  background: var(--gold);
}
/* .tp-tick — gold italic case number on the photo; --yellow (amber) would vanish on a dark photo */
html[data-page="treatments"] .tp-window .tp-tick {
  color: var(--gold);
}
/* .tp-tick .lbl used var(--mute-2) → now dark; keep it a light mute on the photo */
html[data-page="treatments"] .tp-window .tp-tick .lbl {
  color: rgba(250,250,247,0.7);
}
html[data-page="treatments"] .tp-window:hover .tp-tick .lbl,
html[data-page="treatments"] .tp-window:focus-visible .tp-tick .lbl {
  color: #FAFAF7;
}
/* .tp-overlay text — label was var(--mute-2), value var(--paper), em var(--yellow) */
html[data-page="treatments"] .tp-overlay .tp-lbl {
  color: rgba(250,250,247,0.72);
}
html[data-page="treatments"] .tp-overlay .tp-val {
  color: #FAFAF7;
}
html[data-page="treatments"] .tp-overlay .tp-val em {
  color: var(--gold);
}

/* ---------------------------------------------------------
   EXPERIENCE — cream section
   --------------------------------------------------------- */
html[data-page="treatments"] .experience {
  background: var(--ink);
}
html[data-page="treatments"] .experience h2 em {
  color: var(--yellow-display);
}
/* .contrast-row.no .mark — rgba(255,255,255,0.06) chip on a light section */
html[data-page="treatments"] .contrast-row.no .mark {
  background: rgba(43,37,33,0.06);
  color: var(--mute-2);
}
/* .contrast-row.yes .mark — gold fill with var(--ink) text (now cream) → on-gold */
html[data-page="treatments"] .contrast-row.yes .mark {
  background: var(--gold);
  color: var(--on-gold);
}
/* strike-through colour was white at 0.18 */
html[data-page="treatments"] .contrast-row.no .text {
  text-decoration-color: rgba(43,37,33,0.2);
}

/* Field diagram — was a dark #161616→#0e0e0e panel with white/gold SVG strokes */
html[data-page="treatments"] .field-diagram {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .fd-eyebrow::before — pulsing dot: var(--yellow) as fill + glow */
html[data-page="treatments"] .fd-eyebrow::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}
/* .fd-wave — gold at 0.35 alpha reads near-invisible on white; use amber for the faint field lines */
html[data-page="treatments"] .fd-wave {
  stroke: rgba(148,102,0,0.42);
}
/* .fd-wave.w-bright — the "coherent" wave stays luminous gold with its glow */
html[data-page="treatments"] .fd-wave.w-bright {
  stroke: rgba(230,168,23,0.98);
  filter: drop-shadow(0 0 5px rgba(230,168,23,0.5));
}
/* gap rules / ticks — gold at low alpha → amber for legibility on white */
html[data-page="treatments"] .fd-gap-rule {
  stroke: rgba(148,102,0,0.4);
}
html[data-page="treatments"] .fd-gap-tick {
  stroke: rgba(148,102,0,0.65);
}
/* .fd-radiate-wave — animated "qi" strokes: keep gold (luminous fill), glow kept */
html[data-page="treatments"] .fd-radiate-wave {
  stroke: var(--gold);
  filter: drop-shadow(0 0 3px rgba(230,168,23,0.45));
}
/* .fd-skin / .fd-contour — white strokes on the dark panel → warm charcoal */
html[data-page="treatments"] .fd-skin {
  stroke: rgba(43,37,33,0.55);
}
html[data-page="treatments"] .fd-contour {
  stroke: rgba(43,37,33,0.14);
}
/* #fdBody gradient — <stop stop-color="#FAFAF7"> presentation attrs; white tint is invisible on white.
   stop-color is a CSS property, so this beats the attribute without a markup edit. */
html[data-page="treatments"] #fdBody stop {
  stop-color: #2B2521;
}
/* .fd-zone-label / .fd-measure use fill: var(--yellow) → already amber via the token (fine) */

/* ---------------------------------------------------------
   PROCESS — sand band (alternates with experience above / multi-session below)
   --------------------------------------------------------- */
html[data-page="treatments"] .process {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,168,23,0.05) 0%, transparent 50%),
    var(--sand);
}
/* .step — was var(--ink) cell, hover var(--ink-2); cream cells on sand, white on hover */
html[data-page="treatments"] .step {
  background: var(--ink);
}
html[data-page="treatments"] .step:hover,
html[data-page="treatments"] .step.cue {
  background: var(--surface);
}
/* .step::before — top rule uses var(--yellow) as a fill */
html[data-page="treatments"] .step::before {
  background: var(--gold);
}
/* .step-icon colour amber is legible on the gold-tinted disc; gold glows unchanged */

/* Session timeline — dark gradient card → white surface */
html[data-page="treatments"] .session-timeline {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-page="treatments"] .session-timeline.cue,
html[data-page="treatments"] .session-timeline:hover {
  border-color: rgba(230,168,23,0.45);
  box-shadow: var(--shadow-card), 0 0 34px -12px rgba(230,168,23,0.45);
}
html[data-page="treatments"] .st-bar {
  background: var(--ink);
  border-color: var(--line);
}
/* .st-seg.intake / .retest — rgba(255,255,255,x) tints → warm charcoal tints */
html[data-page="treatments"] .st-seg.intake {
  background: rgba(43,37,33,0.04);
  color: var(--mute-2);
}
html[data-page="treatments"] .st-seg.retest {
  background: rgba(43,37,33,0.08);
  color: var(--paper);
}
/* .st-seg.treat — gold fill with var(--ink) text → on-gold */
html[data-page="treatments"] .st-seg.treat {
  background: var(--gold);
  color: var(--on-gold);
}
/* .st-seg.seg-cue — inset ring used var(--yellow) as a fill */
html[data-page="treatments"] .st-seg.seg-cue {
  box-shadow: inset 0 0 0 2px var(--gold);
}
/* .st-loop-badge — hard-coded #0e0e0e disc */
html[data-page="treatments"] .st-loop-badge {
  background: var(--surface);
  border-color: rgba(230,168,23,0.6);
  color: var(--yellow);
}
html[data-page="treatments"] .st-bar:has(.st-seg.treat.seg-cue) .st-loop-badge,
html[data-page="treatments"] .st-bar:has(.st-seg.retest.seg-cue) .st-loop-badge {
  border-color: var(--gold);
}

/* ---------------------------------------------------------
   MULTI-SESSION — cream section
   --------------------------------------------------------- */
html[data-page="treatments"] .multi-session {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(230,168,23,0.04) 0%, transparent 70%),
    var(--ink);
  border-top-color: var(--line);
}
/* .session-arc — dark gradient card → white surface */
html[data-page="treatments"] .session-arc {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .sa-dot — var(--ink-2) disc with var(--yellow) border (fill) */
html[data-page="treatments"] .sa-dot {
  background: var(--surface);
  border-color: var(--gold);
}
html[data-page="treatments"] .sa-step:hover .sa-dot {
  background: var(--gold);
}
/* .sa-traveler + ring — var(--yellow) used as fill / border */
html[data-page="treatments"] .sa-traveler {
  background: var(--gold);
}
html[data-page="treatments"] .sa-traveler::after {
  border-color: var(--gold);
}
/* .sa-track::before gold gradient line and .sa-title / peak label (amber text) are fine */

/* ---------------------------------------------------------
   LOCATIONS — originally an INVERTED band: white panel (var(--paper)) sliding
   over a dark base (var(--ink)) with dark text (var(--ink)). With the tokens
   flipped it would become a dark panel with cream text and broken cards, so
   re-map it to: sand base, white sliding panel, dark text. The parallax
   motion (--locations-bg-y, JS) is untouched.
   --------------------------------------------------------- */
html[data-page="treatments"] .locations {
  /* Cream, matching .multi-session above and .faq below — a --sand base read
     as a third colour band between two cream sections. The white sliding
     panel still carries the parallax, now as a soft sheen rather than an
     edge-to-edge tone change. */
  background: var(--ink);
  color: var(--paper);
}
html[data-page="treatments"] .locations::before {
  background: var(--surface);
}
@media (max-width: 768px) {
  /* mobile: parallax disabled — cream too, so the section matches its
     neighbours instead of sitting as a white band between them. */
  html[data-page="treatments"] .locations {
    background: var(--ink);
  }
}
/* .locations .eyebrow was var(--ink) (dark-on-white) with a dark squiggle → amber */
html[data-page="treatments"] .locations .eyebrow {
  color: var(--yellow);
}
html[data-page="treatments"] .locations .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23946600' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* .locations h2 was var(--ink); its em and .body-lg were #404040 (deliberately monochrome) */
html[data-page="treatments"] .locations h2 {
  color: var(--paper);
}
html[data-page="treatments"] .locations h2 em {
  color: var(--mute-2);
}
html[data-page="treatments"] .locations .body-lg {
  color: var(--mute-2);
}
/* .loc-card — #fff card on a white panel; add the card shadow so it still separates */
html[data-page="treatments"] .loc-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-page="treatments"] .loc-card:hover,
html[data-page="treatments"] .loc-grid .loc-card.revealed {
  box-shadow: var(--shadow-card), 0 18px 40px -16px rgba(43,37,33,0.18);
  border-color: var(--gold);
}
/* .loc-icon — gold fill with var(--ink) icon → on-gold */
html[data-page="treatments"] .loc-card .loc-icon {
  background: var(--gold);
  color: var(--on-gold);
}
html[data-page="treatments"] .loc-card h4 {
  color: var(--paper);
}
html[data-page="treatments"] .loc-card p {
  color: var(--mute-2);
}
html[data-page="treatments"] .loc-card .loc-meta {
  border-top-color: var(--line);
  color: var(--mute);
}
/* .loc-go — ↗ button: rest state fine; active state was gold with var(--ink) text */
html[data-page="treatments"] .loc-go {
  border-color: var(--line-strong);
  color: var(--mute);
}
@media (hover: hover) {
  html[data-page="treatments"] .loc-card:hover .loc-go {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-gold);
  }
}
html[data-page="treatments"] .loc-card.revealed .loc-go {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

/* ---------------------------------------------------------
   FAQ — cream section
   --------------------------------------------------------- */
html[data-page="treatments"] .faq {
  background: var(--ink);
}
html[data-page="treatments"] .faq h2 em {
  color: var(--yellow-display);
}
/* .faq .side-note — rgba(255,255,255,0.015) panel */
html[data-page="treatments"] .faq .side-note {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .faq-item.open .plus — gold disc with var(--ink) bars → on-gold */
html[data-page="treatments"] .faq-item.open .faq-q .plus {
  background: var(--gold);
  border-color: var(--gold);
}
html[data-page="treatments"] .faq-item.open .faq-q .plus::before,
html[data-page="treatments"] .faq-item.open .faq-q .plus::after {
  background: var(--on-gold);
}

/* ---------------------------------------------------------
   CTA BAND — this page has its own .cta-band rules (shared ones are home-only).
   Gold fill: every var(--ink) text becomes var(--on-gold); dark button → earth.
   --------------------------------------------------------- */
html[data-page="treatments"] .cta-band {
  background: var(--gold);
  color: var(--on-gold);
}
html[data-page="treatments"] .cta-band .eyebrow {
  color: var(--on-gold);
}
html[data-page="treatments"] .cta-band .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%231E1A17' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* inline <em style="color:#000"> in the h2 — keep dark on gold, warmed */
html[data-page="treatments"] .cta-band h2 em {
  color: var(--on-gold) !important;
}
html[data-page="treatments"] .cta-band .lede {
  color: rgba(30,26,23,0.78);
}
html[data-page="treatments"] .cta-band .or {
  color: rgba(30,26,23,0.55);
}
/* .btn-on-yellow — was var(--ink) bg / var(--paper) text (both flip to the wrong thing) */
html[data-page="treatments"] .cta-band .btn-on-yellow {
  background: var(--earth);
  color: #FAFAF7;
}
html[data-page="treatments"] .cta-band .btn-on-yellow:hover {
  background: #3A322D;
}
/* .ghost-on-yellow — outline button on gold */
html[data-page="treatments"] .cta-band .ghost-on-yellow {
  border-color: rgba(30,26,23,0.35);
  color: var(--on-gold);
}
html[data-page="treatments"] .cta-band .ghost-on-yellow:hover {
  border-color: var(--on-gold);
  color: var(--on-gold);
  background: rgba(30,26,23,0.06);
}


/* =========================================================
   PAGE: membership
   ========================================================= */
/* =========================================================
   MEMBERSHIP — light-theme overrides for page-specific components.
   Loads after assets/theme-light.css. Every selector is scoped to
   html[data-page="membership"]. Colours / backgrounds / borders /
   shadows / filters only — no layout, spacing, type or motion.

   Section band rhythm (top → bottom):
     hero (cream + canvas) → cadence (photos) → concierge (cream)
     → benefits (sand) → best-for (cream) → how (sand) → cta (gold)
     → footer (earth, shared)
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL — ::selection used var(--yellow) fill + var(--ink) text;
   both tokens flipped meaning (amber text / cream). Use gold fill.
   --------------------------------------------------------- */
html[data-page="membership"] ::selection {
  background: var(--gold);
  color: var(--on-gold);
}


/* ---------------------------------------------------------
   HERO (sub-page variant — NOT the home hero, so the shared
   .hero rules do not apply here).
   --------------------------------------------------------- */

/* .hero-vignette — radial + linear fades used rgba(10,10,10,x) and
   var(--ink) to melt the canvas into the black page. Cream equivalents. */
html[data-page="membership"] .hero-vignette {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(251,247,240,0.5) 70%, var(--ink) 100%),
    linear-gradient(180deg, rgba(251,247,240,0.5) 0%, transparent 25%, transparent 70%, rgba(251,247,240,0.9) 100%);
}

/* .hero h1 .accent — large italic headline accent → display amber */
html[data-page="membership"] .hero h1 .accent {
  color: var(--yellow-display);
}


/* ---------------------------------------------------------
   THE CADENCE — .stat-reveal.stat-fused + .hp-* photo strip.
   Shared rules for .stat-* / .hp-* are home-page scoped, so
   everything here is handled locally. Text sits ON PHOTOS,
   so it stays light; only the photo treatment lightens.
   --------------------------------------------------------- */

/* .hp-window — placeholder behind the photo was var(--ink-2) (now white);
   a white flash behind a darkened photo looks wrong, use earth. */
html[data-page="membership"] .hp-window {
  background: var(--earth);
}

/* .hp-window img / .stat-fused-bg .hp-window img — brightness(0.5/0.55)
   → 0.72, saturate ~0.85 (rule 6). Hover states stay as-is (already bright). */
html[data-page="membership"] .hp-window img {
  filter: brightness(0.7) saturate(0.85) contrast(1.04) sepia(0.06);
}
html[data-page="membership"] .stat-fused-bg .hp-window img {
  filter: brightness(0.72) saturate(0.85) contrast(1.02) sepia(0.04);
}
html[data-page="membership"] .hp-window:hover img,
html[data-page="membership"] .hp-window:focus-visible img,
html[data-page="membership"] .stat-fused-bg .hp-window:hover img,
html[data-page="membership"] .stat-fused-bg .hp-window:focus-visible img {
  filter: brightness(0.85) saturate(0.95) contrast(1.02) sepia(0);
}

/* .hp-window::after — dark overlays ON PHOTOS: keep dark, slightly lighter */
html[data-page="membership"] .hp-window::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 18%, rgba(10,10,10,0.42) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.32) 0%, rgba(10,10,10,0.08) 50%, rgba(10,10,10,0.48) 100%);
}
html[data-page="membership"] .stat-fused-bg .hp-window::after {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10,10,10,0.2) 25%, rgba(10,10,10,0.42) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.05) 45%, rgba(10,10,10,0.38) 100%);
}
html[data-page="membership"] .hp-window:hover::after,
html[data-page="membership"] .hp-window:focus-visible::after,
html[data-page="membership"] .stat-fused-bg .hp-window:hover::after,
html[data-page="membership"] .stat-fused-bg .hp-window:focus-visible::after {
  background:
    radial-gradient(ellipse at 50% 60%, transparent 35%, rgba(10,10,10,0.4) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.12) 0%, rgba(10,10,10,0.05) 50%, rgba(10,10,10,0.48) 100%);
}

/* .hp-window::before — 2px hover underline is a FILL → gold */
html[data-page="membership"] .hp-window::before {
  background: var(--gold);
}
/* .hp-window:focus-visible — outline is a ring on a photo → gold */
html[data-page="membership"] .hp-window:focus-visible {
  outline-color: var(--gold);
}

/* .hp-tick — "Case № xx" sits on the photo: var(--yellow) is now deep
   amber (unreadable on a dark photo) → gold; .lbl was var(--mute-2)
   (now dark) → light; hover .lbl was var(--paper) (now dark) → light. */
html[data-page="membership"] .hp-window .hp-tick {
  color: var(--gold);
}
html[data-page="membership"] .hp-window .hp-tick .lbl {
  color: rgba(250,250,247,0.72);
}
html[data-page="membership"] .hp-window:hover .hp-tick .lbl,
html[data-page="membership"] .hp-window:focus-visible .hp-tick .lbl {
  color: #FAFAF7;
}

/* .stat-fused-overlay text — ON PHOTOS, so everything stays light.
   .big-number / .caption were var(--paper) (now dark) → #FAFAF7;
   .slash / .yellow were var(--yellow) (now amber) → gold;
   .footnote was var(--mute) (now dark grey) → translucent light;
   .eyebrow shared rule makes it amber + dark squiggle → gold on photo. */
html[data-page="membership"] .stat-fused-overlay .big-number,
html[data-page="membership"] .stat-fused-overlay .caption {
  color: #FAFAF7;
}
html[data-page="membership"] .stat-fused-overlay .big-number .slash,
html[data-page="membership"] .stat-fused-overlay .big-number .yellow {
  color: var(--gold);
}
html[data-page="membership"] .stat-fused-overlay .footnote {
  color: rgba(250,250,247,0.7);
}
html[data-page="membership"] .stat-fused-overlay .eyebrow {
  color: var(--gold);
}
html[data-page="membership"] .stat-fused-overlay .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%23e6a817' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* Text shadows on the overlay are rgba(10,10,10,x) ON PHOTOS — kept. */


/* ---------------------------------------------------------
   MEMBER BENEFITS (.concierge) — cream band. Only the h2 em
   and the .rhythm card need work.
   --------------------------------------------------------- */

/* .concierge h2 em — big italic accent → display amber */
html[data-page="membership"] .concierge h2 em {
  color: var(--yellow-display);
}

/* .rhythm — card was a #161616→#0e0e0e gradient → white surface */
html[data-page="membership"] .rhythm {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .rhythm::before — gold top glow at 0.06: fine on white, kept. */

/* .rhythm-row .live::before — 6px "live" dot is a FILL + glow → gold */
html[data-page="membership"] .rhythm-row .live::before {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(230,168,23,0.7);
}

/* .day — white-on-black tint rgba(255,255,255,0.025) → charcoal tint */
html[data-page="membership"] .day {
  background: rgba(43,37,33,0.03);
  border-color: var(--line);
}
/* .day .dot — idle dot rgba(255,255,255,0.08) → charcoal tint */
html[data-page="membership"] .day .dot {
  background: rgba(43,37,33,0.12);
}
/* .day.on .dot — active dot FILL was var(--yellow) → gold */
html[data-page="membership"] .day.on .dot {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(230,168,23,0.55);
}
/* .day.on — gold tint / border: kept (already gold rgba). */

/* .check svg — checkmark strokes via currentColor; var(--yellow) flips to
   deep amber, which reads fine as a small accent on white. Kept. */

/* .rhythm-dot — hover border / active FILL / focus ring were var(--yellow) → gold */
html[data-page="membership"] .rhythm-dot:hover {
  border-color: var(--gold);
}
html[data-page="membership"] .rhythm-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(230,168,23,0.45);
}
html[data-page="membership"] .rhythm-dot:focus-visible {
  outline-color: var(--gold);
}


/* ---------------------------------------------------------
   THE NEXT-LEVEL YOU (.benefits) — sand band with white cards.
   --------------------------------------------------------- */

/* .benefits — was var(--ink); alternate band → sand */
html[data-page="membership"] .benefits {
  background: var(--sand);
}

/* .benefits-grid — 1px gutter grid; hairline token flips, but pin the
   frame to --line-strong so the grid reads on sand. */
html[data-page="membership"] .benefits-grid {
  background: var(--line);
  border-color: var(--line-strong);
}

/* .benefit — cards were var(--ink) (now cream) → white surface;
   hover was var(--ink-2) → surface-warm */
html[data-page="membership"] .benefit {
  background: var(--surface);
}
html[data-page="membership"] .benefit:hover {
  background: var(--surface-warm);
}
/* .benefit::before — 1px top sweep is a FILL → gold */
html[data-page="membership"] .benefit::before {
  background: var(--gold);
}
/* .benefit-icon — gold-tinted badge: tokens and gold rgba values already
   read correctly on white. Kept. */

/* Inline style="color:var(--yellow)" on <em> in h2 headings (benefits,
   how) — big italic accents → display amber (rule 12). */
html[data-page="membership"] h2 em[style*="--yellow"] {
  color: var(--yellow-display) !important;
}


/* ---------------------------------------------------------
   BEST FOR (.bestfor) — cream band (token flip handles bg).
   --------------------------------------------------------- */

/* .bestfor-header h2 em — big italic accent → display amber */
html[data-page="membership"] .bestfor-header h2 em {
  color: var(--yellow-display);
}

/* .bestfor .bf-row:hover — was var(--ink-2) (now white); white on cream
   is the intended "lifted" hover. Pin explicitly. */
html[data-page="membership"] .bestfor .bf-row:hover {
  background: var(--surface);
}
/* .bestfor .bf-row::before — 2px accent bar is a FILL → gold */
html[data-page="membership"] .bestfor .bf-row::before {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(230,168,23,0.5);
}
/* .bf-list / .bf-row borders use var(--line) — token flips. Kept.
   .bf-icon / .bf-tag / .bf-index use gold rgba + amber text. Kept.
   .bestfor::before and .bf-spotlight are soft gold glows — fine on cream. */


/* ---------------------------------------------------------
   HOW IT WORKS (.how) — sand band.
   --------------------------------------------------------- */

/* .how — radial gold glow over var(--ink); alternate band → sand */
html[data-page="membership"] .how {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(230,168,23,0.06) 0%, transparent 60%),
    var(--sand);
}
/* .step::before — 2px glowing top line is a FILL → gold */
html[data-page="membership"] .step::before {
  background: var(--gold);
}
/* .step:hover p — hard-coded #d4d4d4 (lighten on dark) → darken on light */
html[data-page="membership"] .step:hover p {
  color: var(--paper);
}
/* .step border-top uses var(--line) — flips. .step-num / hover h4 amber. Kept. */


/* ---------------------------------------------------------
   CTA BAND (.cta-band) — shared rules are home-page scoped, so the
   gold band is handled here. var(--ink) was used as TEXT and as a
   button FILL on gold; both must not become cream.
   --------------------------------------------------------- */
html[data-page="membership"] .cta-band {
  background: var(--gold);
  color: var(--on-gold);
}
html[data-page="membership"] .cta-band .eyebrow {
  color: var(--on-gold);
}
html[data-page="membership"] .cta-band .eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8' fill='none' stroke='%231E1A17' stroke-width='1.2' stroke-linecap='round'><path d='M0,4 Q4,0 8,4 T16,4 T24,4 T32,4 T40,4 T48,4 T56,4 T64,4'/></svg>");
}
/* .cta-band h2 em inline style="color:#000" → on-gold */
html[data-page="membership"] .cta-band h2 em[style] {
  color: var(--on-gold) !important;
}
/* .cta-band .lede / .or — rgba(10,10,10,x) text on gold → on-gold tints */
html[data-page="membership"] .cta-band .lede {
  color: rgba(30,26,23,0.78);
}
html[data-page="membership"] .cta-band .or {
  color: rgba(30,26,23,0.55);
}
/* .btn-on-yellow — was background var(--ink) (now cream!) + color
   var(--paper) (now dark) → dark earth button with light text */
html[data-page="membership"] .cta-band .btn-on-yellow {
  background: var(--earth);
  color: #FAFAF7;
}
html[data-page="membership"] .cta-band .btn-on-yellow:hover {
  background: #3A322D;
  color: #FAFAF7;
}
/* .ghost-on-yellow — text/border were var(--ink) (now cream) → on-gold.
   Must also beat the shared .btn-ghost / .btn-ghost:hover rules. */
html[data-page="membership"] .cta-band .ghost-on-yellow {
  background: transparent;
  border-color: rgba(30,26,23,0.35);
  color: var(--on-gold);
}
html[data-page="membership"] .cta-band .ghost-on-yellow:hover {
  border-color: var(--on-gold);
  color: var(--on-gold);
  background: rgba(30,26,23,0.05);
}
/* .cta-band::before/::after white radial glows on gold — kept. */


/* =========================================================
   PAGE: case-records
   ========================================================= */
/* =========================================================
   CASE RECORDS — light-theme overrides (page-specific)
   Loads after assets/theme-light.css. Every selector is scoped to
   html[data-page="case-records"]. Colours / backgrounds / borders /
   shadows / filters only — no layout, spacing, type size or motion.
   ========================================================= */

/* ---------- Base ----------
   ::selection used --yellow as a FILL with --ink text (now cream). */
html[data-page="case-records"] ::selection { background: var(--gold); color: var(--on-gold); }

/* ---------- PAGE HEAD (this page's own hero) ----------
   h1 .word.accent / h1 em: big serif accent -> display amber. */
html[data-page="case-records"] .page-head h1 .word.accent,
html[data-page="case-records"] .page-head h1 em { color: var(--yellow-display); }
/* .featured-count::before is a 1px gold FILL line */
html[data-page="case-records"] .page-head .featured-count::before { background: var(--gold); }

/* ---------- HERO CHART CARD (.hero-chart) ----------
   Card chrome was a hard-coded near-black gradient; label text had
   black text-shadows meant for a dark card. */
html[data-page="case-records"] .hero-chart { background: var(--surface); }
html[data-page="case-records"] .hero-chart-surface {
  background: var(--surface);
  border-color: rgba(230,168,23,0.5);
  box-shadow: var(--shadow-card);
}
html[data-page="case-records"] .hero-chart:hover .hero-chart-surface,
html[data-page="case-records"] .hero-chart:focus-visible .hero-chart-surface { border-color: rgba(230,168,23,0.85); }
/* focus ring used --yellow as a FILL colour */
html[data-page="case-records"] .hero-chart:focus-visible .hero-chart-surface {
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(230,168,23,0.25);
}
/* bottom vignette rgba(10,10,10,x) sits on the card surface, not a photo -> white */
html[data-page="case-records"] .hero-chart-surface::after {
  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,0.55) 88%, rgba(255,255,255,0.9) 100%);
}
/* label/title/expand text: dark shadows no longer needed on a light card */
html[data-page="case-records"] .hero-chart-title,
html[data-page="case-records"] .hero-chart-label,
html[data-page="case-records"] .hero-chart-expand { text-shadow: none; }
html[data-page="case-records"] .hero-chart-label,
html[data-page="case-records"] .hero-chart-expand { color: var(--paper); }
/* .live-dot used --yellow as a FILL */
html[data-page="case-records"] .hero-chart-label .live-dot { background: var(--gold); }

/* ---------- SCATTER PLOT (mini + full) ----------
   .scatter-stage: hard-coded dark gradient + heavy black shadows. */
html[data-page="case-records"] .scatter-stage {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card), 0 0 140px -32px rgba(230,168,23,0.14);
}
html[data-page="case-records"] .scatter-stage.scatter-stage--mini { background: transparent; border: none; box-shadow: none; }
/* axes / grid were white hairlines */
html[data-page="case-records"] .scatter .ax-line   { stroke: rgba(43,37,33,0.20); }
html[data-page="case-records"] .scatter .grid-line { stroke: rgba(43,37,33,0.06); }
/* diagonal + 50% lines were hard-coded #0A0A0A / rgba(10,10,10) */
html[data-page="case-records"] .scatter .nochange-line { stroke: var(--paper); }
html[data-page="case-records"] .scatter .half-line     { stroke: rgba(43,37,33,0.6); }
/* zone labels were hard-coded #ffffff */
html[data-page="case-records"] .scatter .zone-label,
html[data-page="case-records"] .scatter .zone-label.red-zone-label,
html[data-page="case-records"] .scatter .zone-label.nochange-label { fill: var(--paper); }
/* standard dots: dark fill with a light hairline so overlapping beeswarm dots stay separable */
html[data-page="case-records"] .scatter .dot { fill: var(--paper); stroke: var(--surface); }
html[data-page="case-records"] .scatter .dot.standard { fill: rgba(43,37,33,0.9); stroke: rgba(255,255,255,0.85); }
/* case dots: --yellow FILL -> gold; --ink stroke (now cream) -> dark on-gold */
html[data-page="case-records"] .scatter .dot.case { fill: var(--gold); stroke: var(--on-gold); }
/* hover ring stroke used --yellow as a stroke colour */
html[data-page="case-records"] .scatter .dot-ring { stroke: var(--gold); }
/* play triangle inside gold dots was --ink (now cream) */
html[data-page="case-records"] .scatter .dot-play { fill: var(--on-gold); }

/* ---------- EVIDENCE LIGHTBOX ----------
   backdrop, stage shadow, close button, hover card. */
html[data-page="case-records"] .evidence-lightbox { background: rgba(244,237,224,0.86); }
html[data-page="case-records"] .evidence-lightbox-stage {
  background: var(--surface);
  border-color: rgba(230,168,23,0.35);
  box-shadow: 0 0 0 1px rgba(230,168,23,0.18), var(--shadow-card), 0 0 120px rgba(230,168,23,0.18);
}
html[data-page="case-records"] .evidence-lightbox-close {
  background: rgba(43,37,33,0.06);
  border-color: rgba(43,37,33,0.14);
  color: var(--paper);
}
html[data-page="case-records"] .evidence-lightbox-close:hover,
html[data-page="case-records"] .evidence-lightbox-close:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
/* big italic accent in the lightbox title */
html[data-page="case-records"] .evidence-head h2 em { color: var(--yellow-display); }

/* hover card: rgba(15,15,15,0.96) panel with black shadow */
html[data-page="case-records"] .evidence-lightbox .hover-card {
  background: rgba(255,255,255,0.97);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(43,37,33,0.03);
}
html[data-page="case-records"] .evidence-lightbox .hover-card.is-case {
  border-color: rgba(230,168,23,0.55);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(230,168,23,0.18), 0 0 30px -6px rgba(230,168,23,0.35);
}
html[data-page="case-records"] .evidence-lightbox .hover-card.is-case:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(230,168,23,0.35), 0 0 40px -6px rgba(230,168,23,0.5);
}
html[data-page="case-records"] .evidence-lightbox .hover-card .hc-close {
  background: rgba(43,37,33,0.06);
  border-color: rgba(43,37,33,0.14);
  color: rgba(43,37,33,0.7);
}
html[data-page="case-records"] .evidence-lightbox .hover-card .hc-close:hover,
html[data-page="case-records"] .evidence-lightbox .hover-card .hc-close:focus-visible {
  background: rgba(43,37,33,0.12);
  border-color: rgba(43,37,33,0.24);
  color: var(--paper);
}
/* "Watch case" pill: --yellow FILL with --ink text */
html[data-page="case-records"] .evidence-lightbox .hover-card .hc-watch { background: var(--gold); color: var(--on-gold); }

/* legend swatches: standard dot mirrors the chart's dark dot; case dot gold */
html[data-page="case-records"] .chart-legend .lg-dot { background: rgba(43,37,33,0.9); border-color: rgba(255,255,255,0.85); }
html[data-page="case-records"] .chart-legend .lg-dot.case { background: var(--gold); border-color: var(--on-gold); }

/* ---------- STATS STRIP / READ GUIDE ----------
   Alternate bands: head (cream) / stats (cream, hairlines) / guide (sand). */
html[data-page="case-records"] .read-guide { background: var(--sand); }
/* big serif stat numbers use --yellow -> display amber */
html[data-page="case-records"] .stat-cell .value .yellow { color: var(--yellow-display); }

/* ---------- FILTERS (sticky pill row) ----------
   rgba(10,10,10,0.85) frosted bar -> cream frosted bar. */
html[data-page="case-records"] .filters-wrap { background: rgba(251,247,240,0.85); border-bottom-color: var(--line); }
/* active chip: --yellow FILL, --ink text */
html[data-page="case-records"] .chip.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
html[data-page="case-records"] .chip.active .chip-count { color: rgba(30,26,23,0.55); }

/* ---------- SORT POPOVER ---------- */
html[data-page="case-records"] .sort-menu { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
html[data-page="case-records"] .sort-opt:hover { background: rgba(43,37,33,0.04); color: var(--paper); }

/* ---------- CASE CARDS ----------
   base card: --ink-2 (now white) + black-ish hover #181818. */
html[data-page="case-records"] .case-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
html[data-page="case-records"] .case-card:hover { background: var(--surface-warm); border-color: rgba(230,168,23,0.28); }
html[data-page="case-records"] .case-card.focus-highlight {
  background: var(--surface-warm);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(230,168,23,0.4), 0 20px 60px -10px rgba(230,168,23,0.35);
}
/* top hairline gradient uses --yellow as a FILL */
html[data-page="case-records"] .case-card::before,
html[data-page="case-records"] .case-card.has-flip .card-front::before {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* flip cards: front face carries the card chrome; wrapper stays transparent */
html[data-page="case-records"] .case-card.has-flip { background: transparent; border: none; box-shadow: none; }
html[data-page="case-records"] .case-card.has-flip:hover { background: transparent; border-color: transparent; }
html[data-page="case-records"] .case-card.has-flip .card-front { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
@media (hover: hover) and (pointer: fine) {
  html[data-page="case-records"] .case-card.has-flip:hover .card-front { background: var(--surface-warm); border-color: rgba(230,168,23,0.28); }
}
html[data-page="case-records"] .case-card.has-flip.flipped .card-front { background: var(--surface-warm); border-color: rgba(230,168,23,0.28); }

/* pain bars: "after" bar + endpoint marker used --yellow as FILLS */
html[data-page="case-records"] .pain-row .bar { background: var(--sand); }
html[data-page="case-records"] .pain-row.after .bar::before { background: linear-gradient(90deg, var(--gold), #ce9414); }
html[data-page="case-records"] .pain-row.after .bar::after { background: var(--gold); }

/* play buttons: --yellow FILL with --ink glyph */
html[data-page="case-records"] .watch .play,
html[data-page="case-records"] .front-watch .play { background: var(--gold); color: var(--on-gold); }

/* ---------- CARD BACK (photo face) ----------
   Photo overlay stays dark (text on it stays light); slightly lighter
   per the photo-treatment rule. Fallback bg behind the image -> earth. */
html[data-page="case-records"] .case-card.has-flip .card-back { background: var(--earth); border-color: rgba(230,168,23,0.32); }
html[data-page="case-records"] .card-back-overlay {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.52) 100%),
    radial-gradient(circle at 50% 52%, rgba(0,0,0,0.22) 0%, transparent 62%);
}
html[data-page="case-records"] .back-play { background: var(--gold); color: var(--on-gold); }
html[data-page="case-records"] .back-play::after { border-color: var(--gold); }
html[data-page="case-records"] .back-play-label,
html[data-page="case-records"] .back-name { color: #FAFAF7; }

/* ---------- CASE VIDEO LIGHTBOX (.lightbox) ----------
   Shared sheet covers .lightbox*; these are belt-and-suspenders for
   this page's own copy of the rules (backdrop, close, spinner). */
html[data-page="case-records"] .lightbox { background: rgba(244,237,224,0.86); }
html[data-page="case-records"] .lightbox-close { background: rgba(43,37,33,0.06); border-color: rgba(43,37,33,0.14); color: var(--paper); }
html[data-page="case-records"] .lightbox-close:hover { background: var(--gold); color: var(--on-gold); }
html[data-page="case-records"] .lightbox-body { background: var(--surface); border-color: var(--line); }
html[data-page="case-records"] .lightbox-body iframe { background: var(--surface); }
/* spinner top arc used --yellow as a border (stroke) colour */
html[data-page="case-records"] .lb-loading .ring { border-color: var(--line-strong); border-top-color: var(--gold); }

/* ---------- CTA BAND (page's own copy; shared one is home-only) ----------
   Gold band: all --ink text (now cream) -> on-gold; dark button -> earth. */
html[data-page="case-records"] .cta-band { background: var(--gold); color: var(--on-gold); }
html[data-page="case-records"] .cta-band .eyebrow { color: var(--on-gold); }
/* inline style="color:#000" on the em — keep it dark on the gold band */
html[data-page="case-records"] .cta-band h2 em { color: var(--on-gold) !important; }
html[data-page="case-records"] .cta-band .lede { color: rgba(30,26,23,0.75); }
html[data-page="case-records"] .cta-band .or { color: rgba(30,26,23,0.5); }
html[data-page="case-records"] .cta-band .btn-on-yellow { background: var(--earth); color: #FAFAF7; }
html[data-page="case-records"] .cta-band .btn-on-yellow:hover { background: #3A322D; }
html[data-page="case-records"] .cta-band .ghost-on-yellow { border-color: rgba(30,26,23,0.3); color: var(--on-gold); }
html[data-page="case-records"] .cta-band .ghost-on-yellow:hover { border-color: var(--on-gold); color: var(--on-gold); background: rgba(30,26,23,0.04); }


/* =========================================================
   PAGE: testimonials
   ========================================================= */
/* =====================================================================
   TESTIMONIALS — light-theme overrides for page-specific components
   Loads after assets/theme-light.css. Every selector is scoped to
   html[data-page="testimonials"]. Colours / backgrounds / borders /
   shadows / filters only — no layout, spacing, typography or motion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   GLOBAL (page copy of the design system)
   ::selection used var(--yellow) fill + var(--ink) text; both tokens
   flipped, so restore gold fill + on-gold text.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] ::selection { background: var(--gold); color: var(--on-gold); }

/* ---------------------------------------------------------------------
   PAGE HERO
   .page-hero::before — gradient started from transparent BLACK
   rgba(10,10,10,0); use a transparent-cream stop so the fade to var(--ink)
   (now cream) has no grey mid-tone.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .page-hero::before {
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(230,168,23,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(251,247,240,0) 0%, var(--ink) 90%);
}

/* Big italic headline accents → deep display amber (rule 8 / 12) */
html[data-page="testimonials"] .page-hero h1 em,
html[data-page="testimonials"] .page-hero h1 .word.accent,
html[data-page="testimonials"] .featured-head h2 em { color: var(--yellow-display); }

/* ---------------------------------------------------------------------
   HERO BODY FIGURE CARD
   .hero-body-surface — hard-coded dark gradient (#1b1a17 → #050504)
   behind the transparent Three.js canvas. Treated as a card (rule 2):
   white → sand, with the faint warm top-light kept. The slate-grey
   figure (0x3a3a40) reads well on this.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .hero-body {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
html[data-page="testimonials"] .hero-body:hover {
  box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(230,168,23,0.28);
}
html[data-page="testimonials"] .hero-body-surface {
  border-color: rgba(230,168,23,0.55);
  background:
    linear-gradient(180deg, rgba(230,168,23,0.07) 0%, transparent 14%),
    linear-gradient(135deg, #FFFFFF 0%, var(--sand) 55%, #EFE6D6 100%);
}
html[data-page="testimonials"] .hero-body:hover .hero-body-surface {
  border-color: rgba(230,168,23,0.9);
}

/* .hero-body-surface::after — spotlight cone was near-white stops with
   mix-blend-mode: screen (invisible on a light surface). Re-tinted as a
   warm amber beam composited with multiply so it still reads as a shaft
   of light entering the frame. Mask / geometry unchanged. */
html[data-page="testimonials"] .hero-body-surface::after {
  background: conic-gradient(
    from 0deg at 100% 0%,
    transparent 200deg,
    rgba(230,168,23,0.10) 208deg,
    rgba(230,168,23,0.16) 229deg,
    rgba(230,168,23,0.10) 250deg,
    transparent 258deg
  );
  mix-blend-mode: multiply;
}

/* Overlay dots — .dot border used var(--ink) as the dark "ink stroke"
   (now cream). Keep it dark. .dot-ring border is a stroke of the gold
   dot, so it uses the FILL gold, not the amber text colour. */
html[data-page="testimonials"] .hero-body-dots .dot {
  background: var(--gold);
  border-color: var(--earth);
}
html[data-page="testimonials"] .hero-body-dots .dot-ring { border-color: var(--gold); }

/* .hero-body-cue — dark frosted pill rgba(10,10,10,.55/.75) on the card.
   Cream frosted pill instead; text tokens already flipped. */
html[data-page="testimonials"] .hero-body-cue {
  background: rgba(251,247,240,0.78);
  box-shadow: 0 0 0 1px var(--line);
}
html[data-page="testimonials"] .hero-body:hover .hero-body-cue {
  background: rgba(251,247,240,0.92);
}
html[data-page="testimonials"] .hero-body-cue .live-dot { background: var(--gold); }

/* ---------------------------------------------------------------------
   HERO HOVER CARD (.hero-body .hover-card)
   Dark frosted panel rgba(15,15,15,.96) with black drop shadow. → white
   frosted card, card shadow, gold glow kept.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .hero-body .hover-card {
  background: rgba(255,255,255,0.96);
  border-color: rgba(230,168,23,0.55);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(230,168,23,0.18),
    0 0 30px -6px rgba(230,168,23,0.30);
}
html[data-page="testimonials"] .hero-body .hover-card.show:hover,
html[data-page="testimonials"] .hero-body .hover-card.show:active {
  border-color: var(--gold);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(230,168,23,0.45),
    0 0 42px -4px rgba(230,168,23,0.5);
}
html[data-page="testimonials"] .hero-body .hover-card.show:active {
  box-shadow:
    var(--shadow-card),
    0 0 0 1.5px var(--gold),
    0 0 50px -4px rgba(230,168,23,0.6);
}
/* .hc-close — white-alpha round button (rule 9) */
html[data-page="testimonials"] .hero-body .hover-card .hc-close {
  background: rgba(43,37,33,0.06);
  border-color: rgba(43,37,33,0.14);
  color: rgba(43,37,33,0.7);
}
html[data-page="testimonials"] .hero-body .hover-card .hc-close:hover,
html[data-page="testimonials"] .hero-body .hover-card .hc-close:focus-visible {
  background: rgba(43,37,33,0.12);
  border-color: rgba(43,37,33,0.24);
  color: var(--paper);
}
/* .hc-watch — gold fill with var(--ink) text (now cream) → on-gold */
html[data-page="testimonials"] .hero-body .hover-card .hc-watch {
  background: var(--gold);
  color: var(--on-gold);
}

/* ---------------------------------------------------------------------
   FEATURED STORIES (.story cards)
   Card gradient used --ink-2 → --ink (flips to white → cream on its own);
   add the card shadow. Media frame stays black because it holds the
   video poster; badge / play button live ON the photo.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .story {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-page="testimonials"] .story:hover { border-color: rgba(230,168,23,0.45); }

/* .story-play — gold play button; svg fill used var(--ink) (now cream) */
html[data-page="testimonials"] .story-play { background: var(--gold); }
html[data-page="testimonials"] .story-play svg { fill: var(--on-gold); }

/* .story-badge — dark frosted pill on the poster photo: stays dark, but
   its border used var(--line-strong) (now a dark hairline, invisible on a
   dark pill) and its text used var(--yellow) (now deep amber, too dim on
   dark). Restore light hairline + bright gold for the on-photo context. */
html[data-page="testimonials"] .story-badge {
  background: rgba(10,10,10,0.7);
  border-color: rgba(255,255,255,0.18);
  color: var(--gold);
}
html[data-page="testimonials"] .story-badge .dot {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* .story-media .poster-fallback — dark placeholder tile shown when a
   poster is missing; kept dark to match the black media frame, but its
   faint gold name should use the fill gold. */
html[data-page="testimonials"] .story-media .poster-fallback { color: rgba(230,168,23,0.40); }

/* .story.highlight — gold ring flash after clicking a body marker (kept,
   gold glows are fine). Nothing to override. */

/* ---------------------------------------------------------------------
   FILTER BAR + PILLS  (CSS present; no .filter-bar markup in the DOM today)
   Sticky bar was rgba(10,10,10,.85) frosted; active pill used
   var(--yellow) fill + var(--ink) text.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .filter-bar {
  background: rgba(251,247,240,0.86);
  border-bottom-color: var(--line);
}
html[data-page="testimonials"] .pill { border-color: var(--line); color: var(--mute-2); }
html[data-page="testimonials"] .pill:hover { border-color: var(--line-strong); color: var(--paper); }
html[data-page="testimonials"] .pill.active {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}

/* ---------------------------------------------------------------------
   CASE GRID (.case)  (CSS present; no #caseGrid markup in the DOM today)
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .case {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .case:hover — hard-coded #1c1c1c + rgba(255,255,255,.12) */
html[data-page="testimonials"] .case:hover {
  background: var(--surface-warm);
  border-color: rgba(43,37,33,0.12);
}
html[data-page="testimonials"] .case.has-video:hover { border-color: rgba(230,168,23,0.45); }
/* .case::before — 1px top rule fill used var(--yellow) → gold */
html[data-page="testimonials"] .case::before { background: var(--gold); }

/* ---------------------------------------------------------------------
   MODAL — video lightbox (page-specific; not the shared .lightbox)
   --------------------------------------------------------------------- */
/* .modal-backdrop — rgba(0,0,0,.85) (rule 9) */
html[data-page="testimonials"] .modal-backdrop { background: rgba(244,237,224,0.86); }
/* .modal-frame — match the case lightboxes: white frame, hairline, card shadow
   (the Instagram embed is white, so a black frame just showed as a dark edge) */
html[data-page="testimonials"] .modal-frame {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .modal-info — --ink-2 panel (flips to white); add card shadow */
html[data-page="testimonials"] .modal-info {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
/* .modal-close — same button as the case lightboxes: sits inside the top-right
   corner of the info panel, gold on hover */
html[data-page="testimonials"] .modal-close {
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  background: rgba(43,37,33,0.06);
  border: 1px solid rgba(43,37,33,0.14);
  color: var(--paper);
  font-size: 1.1rem;
  transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
html[data-page="testimonials"] .modal-close:hover,
html[data-page="testimonials"] .modal-close:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  transform: rotate(90deg);
  outline: none;
}
html[data-page="testimonials"] .modal-info { padding-right: 4.5rem; }   /* keep the case number clear of the button */
@media (max-width: 820px) {
  /* mobile: the button is pinned to the viewport by the page's own CSS; keep it frosted cream */
  html[data-page="testimonials"] .modal-close {
    background: rgba(251,247,240,0.9);
    border-color: rgba(43,37,33,0.16);
  }
  html[data-page="testimonials"] .modal-info { padding-right: 2rem; }
}
/* pain row: use the same amber/gold roles as the case lightbox pill */
html[data-page="testimonials"] .modal-pain-cell.post .val { color: var(--yellow); }
html[data-page="testimonials"] .modal-pain-arrow { color: var(--yellow); }

/* ---------------------------------------------------------------------
   CTA BAND — page's own copy (shared .cta-band rules are home-only).
   Gold band; every var(--ink) used as TEXT on the gold fill → on-gold.
   The dark button used var(--ink) as a FILL → --earth.
   --------------------------------------------------------------------- */
html[data-page="testimonials"] .cta-band {
  background: var(--gold);
  color: var(--on-gold);
}
html[data-page="testimonials"] .cta-band .eyebrow { color: var(--on-gold); }
html[data-page="testimonials"] .cta-band .lede { color: rgba(30,26,23,0.78); }
html[data-page="testimonials"] .cta-band .or { color: rgba(30,26,23,0.55); }
/* inline <em style="color:#000"> in the h2 — keep dark, unify with on-gold */
html[data-page="testimonials"] .cta-band h2 em { color: var(--on-gold) !important; }
html[data-page="testimonials"] .cta-band .btn-on-yellow {
  background: var(--earth);
  color: #FAFAF7;
}
html[data-page="testimonials"] .cta-band .btn-on-yellow:hover { background: #3A322C; }
html[data-page="testimonials"] .cta-band .ghost-on-yellow {
  border-color: rgba(30,26,23,0.32);
  color: var(--on-gold);
}
html[data-page="testimonials"] .cta-band .ghost-on-yellow:hover {
  border-color: var(--earth);
  color: var(--on-gold);
  background: rgba(30,26,23,0.05);
}


/* =========================================================
   NAV — about.html and testimonials.html give the fixed nav an
   always-on dark frosted background (not just when scrolled)
   ========================================================= */
/* Match the other pages: transparent over the hero, frosted only once
   the page has scrolled (the pages now add .scrolled via a tiny script). */
html[data-page="about"] .nav,
html[data-page="testimonials"] .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
html[data-page="about"] .nav.scrolled,
html[data-page="testimonials"] .nav.scrolled {
  background: rgba(251,247,240,0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--line);
}


/* =========================================================
   WARM PHOTO TREATMENT — photo strips + About portraits
   Photos are lifted and warmed instead of dimmed; the black vignettes
   become a light warm-brown wash; legibility comes from a soft scrim
   behind the text only; hover is a gentle lift, not a brightness jump.
   Applies to: home + membership (.stat-fused / .hp-window), treatments +
   about (.tp-window), the About founder portrait and studio photo.
   ========================================================= */

/* ---- Home + Membership: Outcomes / Cadence band ---- */
html[data-page="home"] .stat-fused-bg .hp-window img,
html[data-page="membership"] .hp-window img,
html[data-page="membership"] .stat-fused-bg .hp-window img {
  filter: brightness(0.88) saturate(0.9) contrast(1.0) sepia(0.18);
}
html[data-page="home"] .stat-fused-bg .hp-window:hover img,
html[data-page="home"] .stat-fused-bg .hp-window:focus-visible img,
html[data-page="membership"] .hp-window:hover img,
html[data-page="membership"] .hp-window:focus-visible img,
html[data-page="membership"] .stat-fused-bg .hp-window:hover img,
html[data-page="membership"] .stat-fused-bg .hp-window:focus-visible img {
  filter: brightness(0.95) saturate(0.95) contrast(1.0) sepia(0.08);
}
html[data-page="home"] .stat-fused-bg .hp-window::after,
html[data-page="membership"] .hp-window::after,
html[data-page="membership"] .stat-fused-bg .hp-window::after {
  background:
    linear-gradient(180deg, rgba(43,30,15,0.16) 0%, rgba(43,30,15,0.04) 45%, rgba(43,30,15,0.30) 100%),
    linear-gradient(0deg, rgba(230,168,23,0.08), rgba(230,168,23,0.08));
}
html[data-page="home"] .stat-fused-bg .hp-window:hover::after,
html[data-page="home"] .stat-fused-bg .hp-window:focus-visible::after,
html[data-page="membership"] .hp-window:hover::after,
html[data-page="membership"] .hp-window:focus-visible::after,
html[data-page="membership"] .stat-fused-bg .hp-window:hover::after,
html[data-page="membership"] .stat-fused-bg .hp-window:focus-visible::after {
  background:
    linear-gradient(180deg, rgba(43,30,15,0.10) 0%, rgba(43,30,15,0.02) 45%, rgba(43,30,15,0.26) 100%),
    linear-gradient(0deg, rgba(230,168,23,0.05), rgba(230,168,23,0.05));
}
/* legibility scrim behind the centred stat only */
html[data-page="home"] .stat-fused-overlay,
html[data-page="membership"] .stat-fused-overlay { isolation: isolate; }
html[data-page="home"] .stat-fused-overlay::before,
html[data-page="membership"] .stat-fused-overlay::before {
  content: '';
  position: absolute;
  inset: -45% -6%;
  z-index: -1;
  background: radial-gradient(ellipse 38% 58% at 50% 50%, rgba(43,30,15,0.6) 0%, rgba(43,30,15,0.32) 42%, rgba(43,30,15,0.08) 66%, transparent 80%);
  pointer-events: none;
}
@media (max-width: 900px) {
  html[data-page="home"] .stat-fused-overlay::before,
  html[data-page="membership"] .stat-fused-overlay::before {
    /* On mobile the overlay starts at the section's top edge, so a scrim
       that reaches above it (it was inset -25%) gets sliced flat by the
       section's overflow:hidden — a faint dark blob with a hard top edge,
       which OLED phones render as a visible line under the hero video.
       Start the scrim AT the overlay's top and fade it in from transparent
       over its first fifth, so nothing is left for the clip to cut. */
    /* ...and the same at the BOTTOM: the overlay ends at the section's
       midline, exactly where row 2 of the 2×2 photo grid begins. A scrim that
       ran past it (it was bottom:-10%, ~60px into row 2) laid a dim band with
       a hard edge across the top of the bottom two photos. Keep it inside the
       overlay's box and fade both ends to transparent. */
    inset: 0 -4% 0;
    background: radial-gradient(ellipse 60% 60% at 50% 62%, rgba(43,30,15,0.62) 0%, rgba(43,30,15,0.34) 45%, rgba(43,30,15,0.08) 70%, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%);
  }
}
html[data-page="home"] .stat-fused-overlay .big-number,
html[data-page="membership"] .stat-fused-overlay .big-number { text-shadow: 0 4px 30px rgba(43,30,15,0.55), 0 2px 8px rgba(43,30,15,0.4); }
html[data-page="home"] .stat-fused-overlay .caption,
html[data-page="membership"] .stat-fused-overlay .caption   { text-shadow: 0 1px 10px rgba(43,30,15,0.55); }
html[data-page="home"] .stat-fused-overlay .footnote,
html[data-page="membership"] .stat-fused-overlay .footnote  { text-shadow: 0 1px 6px rgba(43,30,15,0.55); }
html[data-page="home"] .stat-fused-bg .hp-window .hp-tick,
html[data-page="membership"] .hp-window .hp-tick { opacity: 0.85; text-shadow: 0 1px 6px rgba(43,30,15,0.6); }
html[data-page="membership"] .hp-window { background: var(--sand); }

/* ---- Home: hero video card — lighter vignette on the footage ---- */
html[data-page="home"] .hero-video-surface::after {
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(10,10,10,0.02) 0%, rgba(10,10,10,0.28) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.08) 0%, transparent 30%, transparent 65%, rgba(10,10,10,0.62) 100%);
}
html[data-page="home"] .hero-video:hover .hero-video-surface::after { opacity: 0.8; }

/* ---- Treatments + About: practice-stats photo strip (.tp-window) ----
   Each window carries its own centred stat, so the scrim sits at the
   centre of every window. */
html[data-page="treatments"] .tp-window img,
html[data-page="about"] .tp-window img {
  filter: brightness(0.88) saturate(0.9) contrast(1.0) sepia(0.18);
}
html[data-page="treatments"] .tp-window:hover img,
html[data-page="treatments"] .tp-window:focus-visible img,
html[data-page="about"] .tp-window:hover img,
html[data-page="about"] .tp-window:focus-visible img {
  filter: brightness(0.95) saturate(0.95) contrast(1.0) sepia(0.08);
}
html[data-page="treatments"] .tp-window::after,
html[data-page="about"] .tp-window::after {
  background:
    radial-gradient(ellipse 72% 56% at 50% 50%, rgba(43,30,15,0.52) 0%, rgba(43,30,15,0.24) 45%, rgba(43,30,15,0.05) 78%),
    linear-gradient(180deg, rgba(43,30,15,0.16) 0%, rgba(43,30,15,0.04) 45%, rgba(43,30,15,0.30) 100%),
    linear-gradient(0deg, rgba(230,168,23,0.08), rgba(230,168,23,0.08));
}
html[data-page="treatments"] .tp-window:hover::after,
html[data-page="treatments"] .tp-window:focus-visible::after,
html[data-page="about"] .tp-window:hover::after,
html[data-page="about"] .tp-window:focus-visible::after {
  background:
    radial-gradient(ellipse 72% 56% at 50% 50%, rgba(43,30,15,0.46) 0%, rgba(43,30,15,0.2) 45%, rgba(43,30,15,0.04) 78%),
    linear-gradient(180deg, rgba(43,30,15,0.10) 0%, rgba(43,30,15,0.02) 45%, rgba(43,30,15,0.26) 100%),
    linear-gradient(0deg, rgba(230,168,23,0.05), rgba(230,168,23,0.05));
}
html[data-page="treatments"] .tp-overlay .tp-val,
html[data-page="about"] .tp-overlay .tp-val { text-shadow: 0 2px 14px rgba(43,30,15,0.55), 0 1px 4px rgba(43,30,15,0.4); }
html[data-page="treatments"] .tp-overlay .tp-lbl,
html[data-page="about"] .tp-overlay .tp-lbl,
html[data-page="treatments"] .tp-window .tp-tick,
html[data-page="about"] .tp-window .tp-tick { text-shadow: 0 1px 6px rgba(43,30,15,0.6); }
html[data-page="treatments"] .tp-window,
html[data-page="about"] .tp-window { background: var(--sand); }

/* ---- About: founder portrait — warm, lighter fade behind the name plate ---- */
html[data-page="about"] .portrait { background: var(--sand); }
html[data-page="about"] .portrait .vignette {
  background:
    linear-gradient(180deg, rgba(43,30,15,0) 0%, rgba(43,30,15,0) 56%, rgba(43,30,15,0.42) 82%, rgba(43,30,15,0.78) 100%),
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(230,168,23,0.10) 0%, transparent 55%);
}
html[data-page="about"] .portrait .badge { border-top-color: rgba(255,255,255,0.28); }

/* ---- About: studio neighbourhood photo — natural photo, light warm grade ---- */
html[data-page="about"] .location-figure.has-image img {
  filter: saturate(0.92) sepia(0.14) contrast(1.02) brightness(1.02);
}


/* =========================================================
   WARM PHOTO TREATMENT — card backs + testimonial posters
   Same idea as the photo strips: warm, lifted photos, a warm-brown
   wash instead of a black one, a soft scrim only where text sits.
   ========================================================= */

/* ---- Home: Approach case-record card, back face ---- */
html[data-page="home"] .cr-back { background: var(--sand); border-color: rgba(230,168,23,0.4); }
html[data-page="home"] .cr-back-img { filter: brightness(0.9) saturate(0.9) contrast(1.0) sepia(0.18); }
html[data-page="home"] .cr-back-overlay {
  background:
    linear-gradient(180deg, rgba(43,30,15,0.14) 0%, rgba(43,30,15,0.06) 45%, rgba(43,30,15,0.55) 100%),
    radial-gradient(circle at 50% 52%, rgba(43,30,15,0.28) 0%, transparent 60%),
    linear-gradient(0deg, rgba(230,168,23,0.08), rgba(230,168,23,0.08));
}
html[data-page="home"] .cr-back-label,
html[data-page="home"] .cr-back-name { text-shadow: 0 1px 8px rgba(43,30,15,0.7); }

/* ---- Case Records: flip-card back face ---- */
html[data-page="case-records"] .case-card.has-flip .card-back { background: var(--sand); }
html[data-page="case-records"] .card-back-img { filter: brightness(0.9) saturate(0.9) contrast(1.0) sepia(0.18); }
html[data-page="case-records"] .card-back-overlay {
  background:
    linear-gradient(180deg, rgba(43,30,15,0.14) 0%, rgba(43,30,15,0.06) 45%, rgba(43,30,15,0.55) 100%),
    radial-gradient(circle at 50% 52%, rgba(43,30,15,0.28) 0%, transparent 60%),
    linear-gradient(0deg, rgba(230,168,23,0.08), rgba(230,168,23,0.08));
}
html[data-page="case-records"] .back-play-label,
html[data-page="case-records"] .back-name { text-shadow: 0 1px 8px rgba(43,30,15,0.7); }
/* Back-face shadow: the front's card shadow used to vanish when a card
   turned. The back carries the card shadow, and takes the gold active
   shadow while the card is engaged — flipped by tap/scroll on touch, or
   hovered to the back on desktop. In Videos view every card is on its back,
   so backs rest on the plain card shadow and only a hovered one goes gold
   (the lift rule below). */
html[data-page="case-records"] .case-card.has-flip .card-back { box-shadow: var(--shadow-card); transition: box-shadow .35s ease; }
html[data-page="case-records"] .case-card.has-flip.flipped .card-back { box-shadow: var(--shadow-gold); }
@media (hover: hover) and (pointer: fine) {
  html[data-page="case-records"] .case-card.has-flip:hover .card-back { box-shadow: var(--shadow-gold); }
}
html[data-page="case-records"].view-videos .case-card.has-flip.flipped .card-back { box-shadow: var(--shadow-card); }
/* Videos view hover (desktop): warm lift shadow under the photo face, and
   the photo brightens as its sepia eases off — the tile comes forward. */
@media (hover: hover) and (pointer: fine) {
  html[data-page="case-records"].view-videos .case-card.has-flip:hover .card-back {
    box-shadow: 0 28px 56px -20px rgba(43,37,33,0.48), 0 0 44px -12px rgba(230,168,23,0.5);
  }
  html[data-page="case-records"].view-videos .case-card.has-flip:hover .card-back-img {
    filter: brightness(1) saturate(0.95) contrast(1.0) sepia(0.06);
  }
}

/* ---- Testimonials: featured story posters ---- */
html[data-page="testimonials"] .story-media { background: var(--sand); }
/* Lighter treatment: no brightness cut, a touch of warmth (not full sepia),
   and a soft edge vignette instead of a heavy brown one — the posters sit on
   cream cards, so they should read as photos, not moody stills. */
html[data-page="testimonials"] .story-media .poster { filter: brightness(1.04) saturate(0.95) contrast(1.02) sepia(0.10); }
html[data-page="testimonials"] .story:hover .story-media .poster { filter: brightness(1.07) saturate(1.0) contrast(1.02) sepia(0.05); }
html[data-page="testimonials"] .story-media::before {
  background:
    radial-gradient(ellipse 85% 60% at 50% 50%, transparent 0%, rgba(43,30,15,0.20) 100%),
    linear-gradient(180deg, rgba(43,30,15,0.06) 0%, transparent 25%, transparent 72%, rgba(43,30,15,0.22) 100%),
    linear-gradient(0deg, rgba(230,168,23,0.06), rgba(230,168,23,0.06));
}
html[data-page="testimonials"] .story:hover .story-media::before { opacity: 0.5; }
html[data-page="testimonials"] .story-media .poster-fallback {
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(230,168,23,0.16) 0%, transparent 60%),
    linear-gradient(135deg, #F4EDE0 0%, #E9DFCC 100%);
  color: rgba(148,102,0,0.55);
}
/* "Video" badge on the poster: cream frosted pill instead of a black one */
html[data-page="testimonials"] .story-badge {
  background: rgba(251,247,240,0.86);
  border-color: rgba(43,37,33,0.12);
  color: var(--paper);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-page="testimonials"] .story-badge .dot { background: var(--gold); box-shadow: 0 0 8px rgba(230,168,23,0.7); }


/* =========================================================
   CASE LIGHTBOX — pain-score change promoted into the header
   (home Approach card + Case Records page). Date · location moves to the foot.
   ========================================================= */
.lightbox-head .lb-delta {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .7rem;
  padding: .45rem .85rem .4rem;
  border-radius: 999px;
  background: rgba(230,168,23,0.14);
  border: 1px solid rgba(230,168,23,0.45);
}
.lightbox-head .lb-delta .lbl { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin-right: .1rem; }
.lightbox-head .lb-delta .from,
.lightbox-head .lb-delta .to { font-family: var(--serif); font-size: 1.45rem; line-height: 1; }
.lightbox-head .lb-delta .from { color: var(--paper); }
.lightbox-head .lb-delta .arr { color: var(--yellow); font-size: 1.1rem; }
.lightbox-head .lb-delta .to { color: var(--yellow); }
.lightbox-head .lb-delta .pct { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); font-weight: 600; margin-left: .35rem; }
.lb-foot .lb-meta { font-size: .8rem; color: var(--mute); margin-top: 0; }


/* =========================================================
   TESTIMONIALS MODAL — info panel reordered around the result
   Order: case № → name → condition → RESULT BLOCK → story → quote →
   date · location pinned to the bottom as a quiet footer line.
   (The panel is a flex column, so this is done with `order`; the markup
   built in openModal() is unchanged.)
   ========================================================= */
html[data-page="testimonials"] .modal-info { gap: 1.1rem; }
html[data-page="testimonials"] .modal-cond { margin-top: -0.35rem; }
/* result block: gold-tinted panel, the biggest type in the modal */
html[data-page="testimonials"] .modal-pain-row {
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.35rem;
  padding: 1.15rem 1.35rem 1.05rem;
  border-radius: 14px;
  background: rgba(230,168,23,0.11);
  border: 1px solid rgba(230,168,23,0.38);
}
html[data-page="testimonials"] .modal-pain-cell .lbl { color: var(--mute); margin-bottom: 0.5rem; }
html[data-page="testimonials"] .modal-pain-cell .val { font-size: 2.9rem; letter-spacing: -0.02em; }
html[data-page="testimonials"] .modal-pain-cell .val .of { color: var(--mute); }
html[data-page="testimonials"] .modal-pain-cell.post .val { color: var(--yellow); }
html[data-page="testimonials"] .modal-pain-arrow { color: var(--yellow); font-size: 2.1rem; align-self: center; margin-top: 0.9rem; }
/* the improvement cell (last) becomes the headline number */
html[data-page="testimonials"] .modal-pain-row .modal-pain-cell:last-child {
  margin-left: auto;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(230,168,23,0.35);
}
html[data-page="testimonials"] .modal-pain-row .modal-pain-cell:last-child .val { font-size: 3.4rem; color: var(--yellow) !important; }
/* story + quote follow the result */
html[data-page="testimonials"] .modal-desc { color: var(--mute-2); }
html[data-page="testimonials"] .modal-quote { padding: 1rem 0 0; border-top: 1px solid var(--line); }
/* date · location: last, pinned to the bottom of the panel */
html[data-page="testimonials"] .modal-when {
  order: 10;
  margin-top: auto;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--mute);
}
@media (max-width: 540px) {
  html[data-page="testimonials"] .modal-pain-row { flex-wrap: wrap; gap: 0.9rem 1rem; padding: 1rem 1.1rem 0.95rem; }
  html[data-page="testimonials"] .modal-pain-cell .val { font-size: 2.3rem; }
  html[data-page="testimonials"] .modal-pain-row .modal-pain-cell:last-child { flex-basis: 100%; margin-left: 0; padding-left: 0; padding-top: 0.85rem; border-left: 0; border-top: 1px solid rgba(230,168,23,0.35); text-align: left !important; }
  html[data-page="testimonials"] .modal-pain-row .modal-pain-cell:last-child .val { font-size: 2.6rem; }
}


/* Membership: the stat scrim waits for the photos to fly in, then fades up —
   otherwise it hangs as a brown blob over empty cream during the entrance. */
html[data-page="membership"] .stat-fused-overlay::before {
  opacity: 0;
  transition: opacity .9s ease .95s;
}
html[data-page="membership"] .stat-fused.in .stat-fused-overlay::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-page="membership"] .stat-fused-overlay::before { opacity: 1; transition: none; }
}


/* =========================================================
   INTERIOR HERO RHYTHM — one position and scale for the five interior
   pages (Treatments, Membership, Case Records, Testimonials, About).
   Desktop only; phone sizes were already consistent. Home keeps its own
   full-height, vertically centred hero on purpose.
     eyebrow ≈ 200px from the top · headline 112px at 1440 · lead ≈ 21px
   ========================================================= */
@media (min-width: 961px) {
  html[data-page="treatments"] .page-head,
  html[data-page="case-records"] .page-head,
  html[data-page="testimonials"] .page-hero,
  html[data-page="about"] .page-hero { padding-top: 12.5rem; }
  /* Membership centred its text inside a 78vh box, which is why its eyebrow sat highest */
  html[data-page="membership"] .hero {
    min-height: 0;
    padding-top: 12.5rem;
    padding-bottom: 6rem;
    align-items: flex-start;
  }
  /* Case Records + Testimonials centre the text column against a taller graphic; top-align instead */
  html[data-page="case-records"] .page-head-inner,
  html[data-page="testimonials"] .hero-grid { align-items: start; }
  /* headline: 112px at 1440, scaling down on smaller desktops, capped above */
  html[data-page="treatments"] .page-head h1,
  html[data-page="case-records"] .page-head h1,
  html[data-page="testimonials"] .page-hero h1,
  html[data-page="about"] .page-hero h1,
  html[data-page="membership"] .hero h1 { font-size: clamp(4rem, 7.78vw, 7rem); margin-bottom: 1.5rem; }
  /* lead paragraph */
  html[data-page="treatments"] .page-head .lede,
  html[data-page="case-records"] .page-head .lede,
  html[data-page="testimonials"] .page-hero .lede,
  html[data-page="about"] .page-hero .lede,
  html[data-page="membership"] .hero p.tagline { font-size: clamp(1.0625rem, 1.45vw, 1.3rem); }
  /* eyebrow spacing */
  html[data-page="treatments"] .page-head .eyebrow,
  html[data-page="case-records"] .page-head .eyebrow,
  html[data-page="testimonials"] .page-hero .eyebrow,
  html[data-page="about"] .page-hero .eyebrow,
  html[data-page="membership"] .hero .hero-eyebrow { margin-bottom: 1.5rem; }
}


/* Home hero joins the interior rhythm: eyebrow ≈ 200px from the top on desktop.
   The text column top-aligns; the video card keeps its own height, so on short
   laptop viewports (< 861px tall) the hero falls back to vertical centring so the
   card is never clipped by the 100vh hero. */
@media (min-width: 961px) and (min-height: 861px) {
  html[data-page="home"] .hero { align-items: flex-start; padding-top: 12.5rem; }
  html[data-page="home"] .hero-inner { align-items: start; }
  html[data-page="home"] .hero-eyebrow { margin-bottom: 1.5rem; }
}


/* About hero: a client photo faded behind the headline, using the home-page treatment; and a little more room at
   the bottom so the wave canvas is not clipped by the photo strip. */
html[data-page="about"] .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("case%20studies/40.webp") center calc(30% + 200px) / cover no-repeat;   /* smiling client in a cap (option 21), net shifted up 200px */
  opacity: 0.22;
  filter: saturate(0.7) sepia(0.28) contrast(0.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  pointer-events: none;
}
@media (max-width: 960px) {
  html[data-page="about"] .page-hero::before {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
  }
}
html[data-page="about"] .page-hero { padding-bottom: calc(5rem + 10px); }


/* =========================================================
   TREATMENTS + MEMBERSHIP HEROES — faded photo, same treatment as home
   Treatments: option 27 (greenery, ankle treatment) · Membership: option 31 (outdoors, hat)
   ========================================================= */
html[data-page="treatments"] .page-head,
html[data-page="membership"] .hero { position: relative; }
html[data-page="treatments"] .page-head::before,
html[data-page="membership"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: saturate(0.7) sepia(0.28) contrast(0.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  pointer-events: none;
}
html[data-page="treatments"] .page-head::before { background-image: url("case%20studies/121.jpg"); background-position: center calc(24% + 200px);   /* net: shifted up 200px from the original crop */ }
html[data-page="membership"] .hero::before { background-image: url("membership/1.JPG"); background-position: center calc(25% + 200px);   /* net: shifted up 200px from the original crop */ }
/* keep the text (and the wave canvas) above the photo */
html[data-page="treatments"] .page-head > .wrap,
html[data-page="membership"] .hero-inner { position: relative; z-index: 1; }
@media (max-width: 960px) {
  html[data-page="treatments"] .page-head::before,
  html[data-page="membership"] .hero::before {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
  }
}


/* =========================================================
   CASE RECORDS + TESTIMONIALS HEROES — faded photo, same treatment
   Case Records: option 4 (older client, painting) · Testimonials: option 12 (golden window light)
   ========================================================= */
html[data-page="case-records"] .page-head,
html[data-page="testimonials"] .page-hero { position: relative; }
html[data-page="case-records"] .page-head::before,
html[data-page="testimonials"] .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: saturate(0.7) sepia(0.28) contrast(0.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0.9) 70%, #000 100%);
  pointer-events: none;
}
html[data-page="case-records"] .page-head::before { background-image: url("case%20studies/141.JPG"); background-position: center calc(30% + 100px); }   /* option 4, net shifted up 100px */
html[data-page="testimonials"] .page-hero::before { background-image: url("membership/2.JPG"); background-position: center 35%; }   /* option 12 (golden window light), original crop */
html[data-page="case-records"] .page-head > .wrap,
html[data-page="testimonials"] .page-hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 960px) {
  html[data-page="case-records"] .page-head::before,
  html[data-page="testimonials"] .page-hero::before {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 55%, rgba(0,0,0,0.6) 100%);
  }
}


/* =========================================================
   MOBILE HERO PHOTOS — top-aligned, edge faded
   On a phone the portrait photos scale down to ~667px tall and have almost
   no vertical slack, so the desktop pixel offsets pushed the photo's bottom
   edge up into the hero as a hard horizontal line. Below 960px every hero
   photo is pinned to the top and its top edge fades in, so no edge can show.
   ========================================================= */
@media (max-width: 960px) {
  html[data-page="home"] .hero::before,
  html[data-page="treatments"] .page-head::before,
  html[data-page="membership"] .hero::before,
  html[data-page="case-records"] .page-head::before,
  html[data-page="testimonials"] .page-hero::before,
  html[data-page="about"] .page-hero::before {
    background-position: center top;
    background-size: cover;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 18%, #000 45%, #000 75%, rgba(0,0,0,0.55) 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 18%, #000 45%, #000 75%, rgba(0,0,0,0.55) 100%);
  }
}


/* =========================================================
   MOBILE MENU — buttons match the hero buttons on phones
   The menu is a flex column; .btn sets overflow:hidden, which lets the two
   buttons shrink when the menu is taller than a short phone screen. Pin
   them, make them full width, and give them the hero button's height.
   ========================================================= */
@media (max-width: 820px) {
  .mobile-menu ul,
  .mobile-menu .menu-contact { flex-shrink: 0; }
  .mobile-menu .menu-cta,
  .mobile-menu .menu-secondary {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.3rem;
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .mobile-menu .menu-cta { margin-top: 1.75rem; }
  .mobile-menu .menu-secondary { margin-top: 0.75rem; }
  .mobile-menu .menu-cta:hover,
  .mobile-menu .menu-secondary:hover { padding-left: 1.3rem; }   /* the desktop hover nudge has no place in a full-width button */
  .mobile-menu .menu-contact { margin-top: 1.5rem; }
}

/* ---- Case Records: pain scores as chips ----
   The Before/After values used to be plain serif numerals at the end of
   each bar. Render them as small pills — Before in the bar's rose, After in
   gold and bold — so the scores read at a glance. Just the number: no
   "/10" suffix (the BEFORE/AFTER labels already say what the number is). */
html[data-page="case-records"] .pain-row .val {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0.18rem 0.5rem 0.14rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}
html[data-page="case-records"] .pain-row.before .val {
  background: rgba(220,100,100,0.12);
  border: 1px solid rgba(220,100,100,0.22);
  color: var(--paper);
}
html[data-page="case-records"] .pain-row.after .val {
  background: rgba(230,168,23,0.16);
  border: 1px solid rgba(230,168,23,0.42);
  color: var(--yellow);
  font-weight: 600;
}

/* ---- Case Records: the headline drop (upper-right pill) ----
   "↓ 75%" is the single most important number on the card, so give it real
   presence: a deeper gold tint, a firmer border, and a larger serif figure
   with the arrow in the display italic. */
html[data-page="case-records"] .case-delta {
  padding: 0.38rem 0.85rem 0.34rem;
  gap: 0.35rem;
  background: rgba(230,168,23,0.20);
  border: 1px solid rgba(230,168,23,0.62);
  color: var(--yellow);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  box-shadow: 0 6px 16px -8px rgba(230,168,23,0.55);
}
html[data-page="case-records"] .case-delta.full {
  background: rgba(230,168,23,0.28);
  border-color: rgba(230,168,23,0.8);
}
/* The arrow stays in front (it works like a sign) but recedes a little so
   the figure leads: smaller, lighter, italic. */
html[data-page="case-records"] .case-delta .arr {
  font-style: italic;
  font-weight: 400;
  font-size: 0.82em;
  opacity: 0.72;
  transform: translateY(-0.04em);
}

/* ---- Home: case-card pain scores as chips (matches Case Records) ---- */
html[data-page="home"] .cr-bar-row .val {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 2.2rem;
  padding: 0.18rem 0.5rem 0.14rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
}
html[data-page="home"] .cr-bar-row.before .val {
  background: rgba(220,100,100,0.12);
  border: 1px solid rgba(220,100,100,0.22);
  color: var(--paper);
}
html[data-page="home"] .cr-bar-row.after .val {
  background: rgba(230,168,23,0.16);
  border: 1px solid rgba(230,168,23,0.42);
  color: var(--yellow);
  font-weight: 600;
}