/* ============================================================
   BLOOMHAUS HEALTH & WELLNESS. main.css
   Single source of truth for brand styling.
   Palette, type, and components are LOCKED per the Build Brief.
   Edit colors only here; every page inherits these tokens.
   ============================================================ */

/* ---- Fonts (self-hosted for speed + SEO; swapped from CDN at build) ---- */
/* Fraunces (headlines) and Inter (body) loaded via @font-face in fonts.css
   or temporarily via Google Fonts <link> during staging. */

:root {
  /* --- Recalibrated palette (June 24): sage-forward, softened wine mauve,
         warm-earth "outfit" palette (Jul 1): onyx / indigo / terracotta / amber /
         brass / bone / olive. Replaces the prior sage/mauve system entirely. --- */
  --charcoal:      #0C0D0F;  /* PRIMARY structural: headings, body, nav, footer (onyx) */
  --sage:          #6D7246;  /* PRIMARY accent: buttons, links, key highlights (olive) */
  --mauve:         #904B3F;  /* secondary accent: terracotta, primary CTA color */
  --clay:          #A07B56;  /* neutral buffer: tints, soft card backgrounds (amber) */
  --light-mauve:   #A07B56;  /* alias kept for back-compat; now amber */
  --blush:         #EFEAE1;  /* pale section background, alternating bands (warm bone tint) */
  --cream:         #FBFAF7;  /* primary page background (warm off-white) */

  /* --- Derived / functional --- */
  --charcoal-soft: #5C5A54;  /* secondary text */
  --sage-deep:     #566B41;  /* hover state for olive buttons/links */
  --mauve-deep:    #7D3F35;  /* deepened terracotta for hover/accent */
  --hairline:      #E4DCD3;  /* subtle borders, dividers (warm) */
  --white:         #FFFFFF;

  /* --- Plain-name aliases (for ported sections built this cycle) --- */
  --onyx:          #0C0D0F;
  --indigo:        #2E3A4D;
  --terracotta:    #904B3F;
  --amber:         #A07B56;
  --brass:         #9A8557;
  --bone:          #D5D2CA;
  --olive:         #6D7246;
  --bg:            #FBFAF7;
  --ink:           #0C0D0F;
  --muted:         #5C5A54;
  --card:          #F4F1EB;
  --row:           #F4F1EB;
  --hairline-soft: rgba(12,13,15,.06);
  --settle:        520ms;
  --settle-ease:   cubic-bezier(.22,.61,.36,1);

  /* --- Type (DM Sans, replacing Fraunces + Inter) --- */
  --font-display: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Spacing scale (generous, regulating rhythm) --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* --- Layout --- */
  --maxw: 1120px;
  --maxw-narrow: 720px;
  --radius: 14px;
  --radius-lg: 24px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* ~17px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-sm); max-width: 62ch; }
a { color: var(--sage-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mauve-deep); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sage);
  margin: 0 0 var(--space-sm);
}

.lead { font-size: 1.2rem; color: var(--charcoal-soft); max-width: 56ch; }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding: var(--space-xl) 0; }
.section--tight { padding: var(--space-lg) 0; }
.bg-blush { background: var(--blush); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-primary { background: var(--sage); color: var(--white); }
.btn-primary:hover { background: var(--sage-deep); color: var(--white); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---- Disclaimer microcopy (compliance, by construction) ---- */
.disclaimer {
  font-size: 0.82rem;
  color: var(--charcoal-soft);
  line-height: 1.5;
  max-width: 52ch;
}
.disclaimer--center { margin-left: auto; margin-right: auto; }

/* ---- Header / nav ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.72);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
  backdrop-filter: saturate(130%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 320ms var(--settle-ease), color 320ms var(--settle-ease), border-color 320ms var(--settle-ease);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { font-family: var(--font-display); font-size: 1.35rem; color: var(--charcoal); text-decoration: none; letter-spacing: -0.01em; transition: color 320ms var(--settle-ease); }
.nav-links { display: flex; gap: 1.6rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--charcoal); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 320ms var(--settle-ease); }
.nav-links a:hover { color: var(--mauve-deep); }
.nav-cta { padding: 0.65rem 1.2rem; font-size: 0.9rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 1.5rem; color: var(--charcoal); transition: color 320ms var(--settle-ease); }

/* ---- header over a DARK section: dark frosted tint + light text ---- */
.site-header.is-over-dark {
  background: rgba(12, 13, 15, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.site-header.is-over-dark .brand,
.site-header.is-over-dark .nav-links a,
.site-header.is-over-dark .nav-toggle { color: #fff; }
.site-header.is-over-dark .nav-links a:hover { color: var(--amber); }
/* keep the CTA readable on dark: light pill, dark label */
.site-header.is-over-dark .nav-cta.btn-primary {
  background: #fff; color: var(--onyx); border-color: #fff;
}
.site-header.is-over-dark .nav-cta.btn-primary:hover { background: var(--bone); border-color: var(--bone); }

/* ---- header over a LIGHT section: light frosted tint, dark text (default) ---- */
.site-header.is-over-light {
  background: rgba(251, 250, 247, 0.72);
  border-bottom-color: var(--hairline);
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; inset: -4%;   /* overscan so drift never reveals an edge */
  background-image: url("../img/bloomhaus-sanctuary.jpg");
  background-size: cover; background-position: center;
  opacity: 1;
  will-change: transform;
  animation: heroDrift 38s ease-in-out infinite alternate;
}
/* Slow, barely-perceptible scale + drift. the hero "breathes". */
@keyframes heroDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.4%, -1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; transform: scale(1.04); inset: -2%; }
}
.hero-bg::after {           /* cream/blush wash so text stays legible + soft */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,13,15,0.55) 0%, rgba(12,13,15,0.35) 45%, rgba(12,13,15,0.66) 100%);
}
.hero-inner { position: relative; padding: var(--space-2xl) 0 var(--space-xl); max-width: 40ch; }
.hero--compact .hero-inner { padding: var(--space-lg) 0 var(--space-md); max-width: 42ch; min-height: 42vh; display: flex; flex-direction: column; justify-content: center; }
.hero--compact .lead { margin-bottom: 0; }
.hero--compact h1 { margin-bottom: var(--space-sm); font-size: clamp(2rem, 4vw, 2.9rem); }
#home-map { padding-top: var(--space-md); scroll-margin-top: 80px; }
.hero h1 { margin-bottom: var(--space-md); }
.hero .lead { margin-bottom: var(--space-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--space-sm); }

/* ---- Recognition band ("does this sound familiar") ---- */
.recognition-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 56ch; }
.recognition-list li {
  padding-left: 1.8rem; position: relative; color: var(--charcoal);
}
.recognition-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sage);
}

/* ---- Steps (how it works) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: var(--space-lg); }
.step { }
.step-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--mauve); margin-bottom: 0.4rem; }
.step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.95rem; color: var(--charcoal-soft); }

/* ---- Cards (programs) ---- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: var(--space-lg); }
.card {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 34px -26px rgba(70,67,63,.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -22px rgba(70,67,63,.45); }
.card--feature { border-color: var(--light-mauve); box-shadow: 0 12px 30px rgba(160,107,130,0.08); }
.card .tier { font-family: var(--font-display); font-size: 1.45rem; color: var(--charcoal); margin-bottom: 0.2rem; }
.card .price { font-size: 1.05rem; color: var(--mauve-deep); font-weight: 600; margin-bottom: 0.2rem; }
.card .term { font-size: 0.82rem; color: var(--charcoal-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.card .essence { font-size: 0.95rem; color: var(--charcoal-soft); flex-grow: 1; }
.card .tag { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mauve-deep); background: var(--blush); padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 0.8rem; }

/* ---- Meet band ---- */
.meet { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-lg); align-items: center; }
.meet img { border-radius: var(--radius-lg); }

/* ---- CTA band ---- */
.cta-band { background: var(--charcoal); color: var(--cream); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; }
.cta-band h2 { color: var(--cream); }
.cta-band .lead { color: rgba(250,248,245,0.82); margin-left: auto; margin-right: auto; }
.cta-band .btn-primary { background: var(--sage); }
.cta-band .btn-primary:hover { background: var(--clay); color: var(--charcoal); }
.cta-band .disclaimer { color: rgba(250,248,245,0.6); }

/* ---- Divider ---- */
.peony-divider { height: 3px; width: 64px; background: var(--sage); border: 0; margin: 0 0 var(--space-md); border-radius: 2px; }
.peony-divider--center { margin-left: auto; margin-right: auto; }

/* ---- Footer ---- */
.site-footer { background: var(--charcoal); color: rgba(250,248,245,0.78); padding: var(--space-lg) 0 var(--space-md); font-size: 0.9rem; }
.site-footer a { color: rgba(250,248,245,0.9); }
.site-footer a:hover { color: var(--light-mauve); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-md); }
.footer-brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); margin-bottom: 0.6rem; }
.footer-col h4 { color: var(--cream); font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.8rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-legal { border-top: 1px solid rgba(250,248,245,0.18); padding-top: var(--space-md); font-size: 0.8rem; color: rgba(250,248,245,0.55); }
.footer-legal .placeholder { color: var(--light-mauve); }

/* ---- Scroll reveal (signature: sections settle in, slow + gentle) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Wellness Check-In quiz ---- */
.quiz-shell { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 12px 40px rgba(75,69,70,0.06); }
.quiz-progress { height: 4px; background: var(--blush); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-md); }
.quiz-progress span { display: block; height: 100%; background: var(--mauve); border-radius: 999px; transition: width .4s ease; }
.quiz-step { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); font-weight: 600; margin: 0 0 var(--space-sm); }
.quiz-q { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-md); }
.quiz-options { display: grid; gap: 0.75rem; margin-bottom: var(--space-md); }
.quiz-option {
  text-align: left; font-family: var(--font-body); font-size: 1rem; line-height: 1.45;
  color: var(--charcoal); background: var(--cream); border: 1.5px solid var(--hairline);
  border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.quiz-option:hover { border-color: var(--light-mauve); background: var(--blush); }
.quiz-option.is-selected { border-color: var(--mauve); background: var(--blush); }
@media (prefers-reduced-motion: no-preference) {
  .quiz-option:active { transform: scale(0.995); }
}
.quiz-nav { display: flex; justify-content: flex-start; }
.quiz-profile-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--mauve-deep); margin: 0 0 0.3rem; }
.quiz-result-body p { color: var(--charcoal); }
.quiz-magnet { margin-top: var(--space-lg); background: var(--blush); border-radius: var(--radius-lg); padding: var(--space-md); }
.quiz-magnet h3 { margin-bottom: 0.4rem; }
.quiz-magnet-form { display: grid; gap: 0.8rem; margin-top: var(--space-sm); max-width: 460px; }
.quiz-label { font-size: 0.85rem; font-weight: 600; color: var(--charcoal); }
.quiz-input { font-family: var(--font-body); font-size: 1rem; padding: 0.85rem 1rem; border: 1.5px solid var(--hairline); border-radius: var(--radius); background: var(--white); color: var(--charcoal); }
.quiz-input:focus { outline: none; border-color: var(--mauve); }
.quiz-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.82rem; line-height: 1.5; color: var(--charcoal-soft); }
.quiz-consent input { margin-top: 0.25rem; flex-shrink: 0; }
.quiz-magnet-msg { font-size: 0.9rem; margin: 0.4rem 0 0; min-height: 1.2em; }
.quiz-magnet-msg.is-error { color: #9a4444; }
.quiz-magnet-msg.is-success { color: var(--sage); }
.quiz-demo-note { display: block; font-size: 0.78rem; color: var(--charcoal-soft); margin-top: 0.2rem; }
.quiz-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: var(--space-lg) 0 var(--space-md); }
.btn-link { background: none; border: 0; color: var(--mauve-deep); font-family: var(--font-body); font-size: 0.95rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--charcoal); }

/* ---- Regulation Map infographic ---- */
.rm-figure { margin: var(--space-lg) 0 0; padding: 0; }
.rm-figure img { width: 100%; max-width: 640px; height: auto; margin: 0 auto; display: block; }
.rm-figure figcaption { text-align: center; font-size: 0.85rem; color: var(--charcoal-soft); margin-top: var(--space-sm); }
/* Wide variant for the landscape path map: break out of narrow containers, cap larger */
.rm-figure--wide img { max-width: 860px; }
.rm-figure--wide { width: 100%; }

/* ---- Interactive map teaser (homepage) ---- */
.rm-teaser { text-align: center; margin: var(--space-md) auto 0; padding: var(--space-md); background: var(--blush); border-radius: 16px; max-width: 540px; }
.rm-teaser__text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); margin: 0 0 var(--space-sm); }

/* ---- How It Works teaching page ---- */
.teach-lead { font-size: 1.15rem; line-height: 1.7; color: var(--charcoal); max-width: 40rem; }
.teach-prose p { font-size: 1.05rem; line-height: 1.75; color: var(--charcoal); max-width: 40rem; margin-bottom: 1.1rem; }
.teach-prose p:last-child { margin-bottom: 0; }
/* Idea + map two-column composition */
.idea-split { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: center; }
@media (min-width: 860px) { .idea-split { grid-template-columns: 1fr 1.1fr; gap: var(--space-lg); } }
.idea-split .idea-figure { margin: 0; background: var(--white); border: 1px solid var(--hairline); border-radius: 18px; padding: 1.25rem; box-shadow: 0 14px 34px -26px rgba(70,67,63,.4); }
.idea-split .idea-figure img { width: 100%; height: auto; display: block; border-radius: 8px; }
.idea-split .teach-prose p { font-size: 1.0rem; margin-bottom: .9rem; max-width: none; }
.pull { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.4; color: var(--charcoal); max-width: 36rem; margin: 0 auto; text-align: center; }
.factor-teach { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: var(--space-md); }
@media (min-width: 720px) { .factor-teach { grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.factor-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: 0 14px 34px -26px rgba(70,67,63,.45); transition: transform .25s ease, box-shadow .25s ease; }
.factor-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(70,67,63,.5); }
.factor-card .ftag { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.factor-card .fdot { width: .85rem; height: .85rem; border-radius: 50%; flex-shrink: 0; }
.factor-card .farea { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); }
.factor-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 .5rem; color: var(--charcoal); }
.factor-card p { font-size: .98rem; line-height: 1.65; color: var(--charcoal-soft); margin: 0; }
.expect-list { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: var(--space-md); }
@media (min-width: 720px) { .expect-list { grid-template-columns: 1fr 1fr 1fr; } }
.expect-item h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 .35rem; color: var(--charcoal); }
.expect-item p { font-size: .95rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
/* Step boxes (working together) */
.step-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: var(--space-md); }
@media (min-width: 600px) { .step-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .step-cards { grid-template-columns: repeat(4, 1fr); } }
.step-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 14px 34px -26px rgba(70,67,63,.45); transition: transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(70,67,63,.5); }
.step-card .step-num { font-family: var(--font-display); font-size: 1.7rem; color: var(--mauve); margin-bottom: .4rem; }
.step-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 .4rem; color: var(--charcoal); }
.step-card p { font-size: .95rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
/* Expanded program blocks (Programs page) */
.prog-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: var(--space-md); }
.prog-nav a { font-size: .9rem; font-weight: 500; color: var(--charcoal); text-decoration: none; padding: .5rem 1.1rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--white); transition: background .15s, border-color .15s, transform .15s; }
.prog-nav a:hover { background: var(--blush); border-color: var(--clay); transform: translateY(-2px); }
.prog-block { scroll-margin-top: 90px; background: var(--white); border: 1px solid var(--hairline); border-radius: 20px; padding: 2rem 2rem 2.1rem; box-shadow: 0 16px 38px -28px rgba(70,67,63,.42); margin-bottom: var(--space-md); }
.prog-block--feature { border-color: var(--light-mauve); }
.prog-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.prog-head .name { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; color: var(--charcoal); }
.prog-head .tagword { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); }
.prog-head .feat-tag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--mauve); padding: .25rem .6rem; border-radius: 999px; }
.prog-forwho { font-size: 1.05rem; line-height: 1.65; color: var(--charcoal); margin: 0 0 1.2rem; max-width: 44rem; }
.prog-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem 2rem; }
@media (min-width: 720px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
.prog-col h4 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); margin: 0 0 .55rem; }
.prog-col ul { list-style: none; margin: 0; padding: 0; }
.prog-col li { position: relative; padding-left: 1.3rem; font-size: .96rem; line-height: 1.5; color: var(--charcoal); margin-bottom: .5rem; }
.prog-col li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sage); }
.prog-col li.lab::before { background: var(--mauve); }
.prog-window { display: inline-block; margin-top: 1.3rem; font-size: .85rem; color: var(--charcoal-soft); background: var(--cream); border: 1px solid var(--hairline); border-radius: 999px; padding: .4rem 1rem; }
.prog-cta { margin-top: 1.3rem; }

/* ---- Interactive Regulation Map (on-site funnel) ---- */
.rmi-stage { background: var(--white); border: 1px solid var(--hairline); border-radius: 20px; padding: 1.5rem 1.25rem 1.75rem; box-shadow: 0 18px 40px -28px rgba(70,67,63,.4); margin-top: var(--space-md); }
.rmi-stage svg { width: 100%; height: auto; display: block; }
#rmiMarker { transition: transform .12s ease; }
.rmi-control { margin: 1.4rem auto 0; max-width: 620px; padding: 1rem 1rem .75rem; background: var(--cream); border: 1px solid var(--hairline); border-radius: 14px; }
.rmi-sliderlead { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: .5rem; }
.rmi-rangelabels { display: flex; justify-content: space-between; font-size: .74rem; color: var(--charcoal-soft); margin-bottom: .55rem; font-weight: 600; }
.rmi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--sage) 0%, var(--clay) 50%, var(--mauve) 100%); outline: none; cursor: pointer; }
.rmi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 5px solid var(--mauve); box-shadow: 0 3px 10px -2px rgba(70,67,63,.5); cursor: grab; }
.rmi-range::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 5px solid var(--mauve); box-shadow: 0 3px 10px -2px rgba(70,67,63,.5); cursor: grab; }
.rmi-range:focus-visible { box-shadow: 0 0 0 3px rgba(110,130,112,.4); }
.rmi-reflect { margin-top: 1.5rem; background: var(--blush); border-radius: 16px; padding: 1.5rem 1.4rem; border-top: 4px solid var(--sage); text-align: center; }
.rmi-pos { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--charcoal); margin: 0 auto .5rem; max-width: 34rem; text-align: center; }
.rmi-band { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sage-deep); margin: 0 auto .25rem; max-width: 34rem; text-align: center; }
.rmi-recognition { font-size: 1.02rem; line-height: 1.55; color: var(--charcoal); margin: 0 auto 1rem; max-width: 34rem; }
.rmi-startlabel { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); margin: 0 0 .35rem; }
.rmi-starting { font-size: 1rem; line-height: 1.55; color: var(--charcoal); margin: 0 auto 1.25rem; max-width: 34rem; }
.rmi-ctarow { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
/* Light email capture beneath the primary CTA */
.rmi-light { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--sage-deep); font-family: var(--font-body); font-size: .9rem; text-decoration: underline; cursor: pointer; margin-top: .8rem; padding: .3rem; }
.rmi-proglink { display: block; width: 100%; text-align: center; color: var(--mauve-deep); font-family: var(--font-body); font-size: .92rem; font-weight: 500; text-decoration: none; margin-top: .9rem; }
.rmi-proglink:hover { text-decoration: underline; }
.rmi-light:hover { color: var(--charcoal); }
.rmi-capture { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.rmi-capture.show { display: block; }
.rmi-capture h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 .2rem; color: var(--charcoal); }
.rmi-capture .ctx { font-size: .92rem; color: var(--charcoal-soft); margin: 0 auto .8rem; max-width: 32rem; }
.rmi-field { width: 100%; padding: .75rem .95rem; border: 1.5px solid var(--hairline); border-radius: 10px; font-family: var(--font-body); font-size: 1rem; margin-bottom: .6rem; background: var(--white); color: var(--charcoal); }
.rmi-field:focus { outline: none; border-color: var(--sage); }
.rmi-consent { display: flex; gap: .55rem; align-items: flex-start; margin: .4rem auto .9rem; font-size: .8rem; color: var(--charcoal-soft); line-height: 1.45; text-align: left; max-width: 30rem; }
.rmi-consent input { margin-top: .15rem; flex-shrink: 0; }
.rmi-err { color: var(--mauve-deep); font-size: .82rem; margin-bottom: .5rem; display: none; }
.rmi-err.show { display: block; }
.rmi-thanks { display: none; margin-top: 1rem; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; padding: 1.1rem 1.2rem; }
.rmi-thanks.show { display: block; }
.rmi-thanks p { font-size: .95rem; margin: 0; color: var(--charcoal); }
.rmi-disclaimer { font-size: .8rem; color: var(--charcoal-soft); line-height: 1.5; margin: 1.1rem auto 0; max-width: 36rem; }
@media (prefers-reduced-motion: reduce) { #rmiMarker { transition: none; } }

/* ---- Placeholder flag (internal staging marker) ---- */
.stub-flag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #8a5870; background: #fbeef3; border: 1px dashed #d6b1bf;
  padding: 0.15rem 0.5rem; border-radius: 6px; vertical-align: middle;
}

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .meet { grid-template-columns: 1fr; text-align: center; }
  .meet img { margin: 0 auto; max-width: 240px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--cream); padding: 1rem 1.5rem; border-bottom: 1px solid var(--hairline); gap: 1rem; }
  .nav-toggle { display: block; }
}
@media (max-width: 540px) {
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-inner { padding-top: var(--space-xl); }
}

/* ---- Calm depth: disable hover lift for reduced-motion (audience wellbeing) ---- */
@media (prefers-reduced-motion: reduce) {
  .card, .factor-card, .step-card { transition: none; }
  .card:hover, .factor-card:hover, .step-card:hover { transform: none; }
}

/* ============================================================
   DARK SECTION TREATMENT (Jul 1) — for the alternating
   light/dark rhythm. Apply .bg-charcoal to a <section>.
   ============================================================ */
.bg-charcoal{ background: var(--onyx); color: #fff; }
.bg-charcoal h1,.bg-charcoal h2,.bg-charcoal h3,.bg-charcoal h4{ color:#fff; }
.bg-charcoal p{ color: rgba(213,210,202,.82); }
.bg-charcoal .eyebrow,.bg-charcoal .section-eyebrow{ color: var(--amber); }
.bg-charcoal .hairline,.bg-charcoal hr{ border-color: rgba(255,255,255,.12); }
.bg-charcoal a{ color: var(--amber); }

/* Fixed transparent header: interior pages need clearance so content doesn't slide under it.
   The homepage hero is full-bleed and intentionally sits beneath the header. */
body:not(.has-hero) main > section:first-of-type { padding-top: calc(var(--space-xl) + 72px); }

/* Mobile: the open menu panel is always solid cream, so its links must stay dark
   even when the transparent header is in dark-over-hero mode. */
@media (max-width: 800px) {
  .site-header.is-over-dark .nav-links.open a { color: var(--charcoal); }
  .site-header.is-over-dark .nav-links.open a:hover { color: var(--mauve-deep); }
  .site-header.is-over-dark .nav-links.open .nav-cta.btn-primary {
    background: var(--terracotta); color: #fff; border-color: var(--terracotta);
  }
}

/* Eyebrows are <p> elements and were inheriting p{max-width:62ch}, which capped them
   at ~518px and pushed their centred text left of the heading. Clear the cap. */
.eyebrow, .bh-eyebrow, .hcw__eyebrow, .wm__eyebrow, .pp-hero__eyebrow { max-width: none; }


/* ============================================================
   Programs hub components. These live in main.css (not redesign.css)
   because programs.html does not load redesign.css.
   ============================================================ */
.prog-more{ display:inline-flex; align-items:center; gap:8px; margin-top:1.3rem; margin-left:.75rem; font-size:.9rem; font-weight:600; color:var(--terracotta); text-decoration:none; }
.prog-more:hover{ text-decoration:underline; }
.prog-more svg{ width:15px; height:15px; }
.prog-labnote{
  margin-top:14px; padding:12px 14px;
  background:rgba(144,75,63,.05); border-left:3px solid var(--terracotta);
  border-radius:0 8px 8px 0;
  font-size:13px; line-height:1.55; color:var(--muted);
}