/* Global: remove browser-default link underlines; rely on color + font-weight for emphasis */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* =========================================================
   Mary's Hands Network, Design Tokens
   Colors & Typography
   ========================================================= */

/* Libre Baskerville from Google Fonts (serif display/headings) */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ---------- BRAND PURPLE SCALE ---------- */
  --mhn-purple-900: #3F2449;   /* deepest, rare, for text on lightest tints */
  --mhn-purple-700: #5E376C;   /* PRIMARY, H1/H2, links, brand */
  --mhn-purple-500: #845995;   /* SECONDARY, H3, accents, "what if" border */
  --mhn-purple-300: #B8A0C0;   /* TERTIARY, dividers, subtle bg, captions */
  --mhn-purple-200: #D4BADD;   /* ACCENT, H2 underline accent, highlights */
  --mhn-purple-50:  #F8F5FA;   /* lightest tint, intro box background */

  /* ---------- NEUTRALS ---------- */
  --mhn-ink:       #1F1B24;    /* body text on light */
  --mhn-ink-soft:  #4A4351;    /* secondary body */
  --mhn-ink-mute:  #736B7A;    /* caption, meta */
  --mhn-paper:     #FFFFFF;    /* page */
  --mhn-paper-alt: #FAF8FB;    /* subtle panel bg */
  --mhn-line:      #E8E2EC;    /* hairline divider */
  --mhn-line-soft: #F1EDF3;

  /* ---------- SEMANTIC / CALLOUT SYSTEM ---------- */
  /* Each callout has a tinted bg + a strong left border color. */
  --mhn-intro-bg:      #F8F5FA;
  --mhn-intro-border:  #5E376C;

  --mhn-tip-bg:        #F0F7FA;
  --mhn-tip-border:    #0D9488;   /* teal */

  --mhn-warn-bg:       #FFFBEB;
  --mhn-warn-border:   #D97706;   /* amber */

  --mhn-clinical-bg:       #F0F9FF;
  --mhn-clinical-border:   #0284C7;   /* sky blue */

  --mhn-case-bg:       #FDF2F8;
  --mhn-case-border:   #DB2777;   /* pink, case study + doula script */

  --mhn-whatif-bg:     #FAF5FF;
  --mhn-whatif-border: #845995;   /* secondary purple */

  --mhn-takeaway-bg:       #F0FDF4;
  --mhn-takeaway-border:   #059669;   /* emerald */

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --mhn-font-serif: 'Libre Baskerville', 'Georgia', 'Times New Roman', serif;
  --mhn-font-sans:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --mhn-font-mono:  'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (print-aligned; 1pt ≈ 1.333px) ---------- */
  --mhn-text-xs:   11px;   /* footnotes, captions */
  --mhn-text-sm:   13px;   /* small body */
  --mhn-text-base: 16px;   /* 12pt body, the default */
  --mhn-text-md:   17px;   /* box body */
  --mhn-text-lg:   19px;   /* H4 uppercase (12pt) */
  --mhn-text-xl:   24px;   /* H3 (14pt + air) */
  --mhn-text-2xl:  30px;   /* H2 (18pt) */
  --mhn-text-3xl:  40px;   /* H1 / chapter title */
  --mhn-text-4xl:  56px;   /* display */

  /* ---------- SPACING (generous, "room to breathe") ---------- */
  --mhn-space-1:  4px;
  --mhn-space-2:  8px;
  --mhn-space-3:  12px;
  --mhn-space-4:  16px;
  --mhn-space-5:  20px;
  --mhn-space-6:  24px;
  --mhn-space-8:  32px;
  --mhn-space-10: 40px;
  --mhn-space-12: 48px;
  --mhn-space-16: 64px;

  /* ---------- RADII ---------- */
  --mhn-radius-sm: 4px;
  --mhn-radius-md: 8px;
  --mhn-radius-lg: 12px;   /* callout boxes, rounded-corners */
  --mhn-radius-xl: 20px;   /* cards, big containers */
  --mhn-radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm, restrained) ---------- */
  --mhn-shadow-sm: 0 1px 2px rgba(94, 55, 108, 0.06);
  --mhn-shadow-md: 0 4px 12px rgba(94, 55, 108, 0.08);
  --mhn-shadow-lg: 0 12px 32px rgba(94, 55, 108, 0.12);

  /* ---------- BORDERS ---------- */
  --mhn-border-width-callout: 4px;  /* colored left border on callout boxes */

  /* ---------- ANIMATION ---------- */
  --mhn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mhn-dur-fast: 140ms;
  --mhn-dur: 220ms;
}

/* =========================================================
   Semantic element styles, matching the MHN Training Manual
   Use these classes or element selectors directly.
   ========================================================= */

.mhn-body {
  font-family: var(--mhn-font-sans);
  font-size: var(--mhn-text-base);
  line-height: 1.6;
  color: var(--mhn-ink);
  background: var(--mhn-paper);
}

/* Headings, Libre Baskerville in brand purple */
.mhn-h1 {
  font-family: var(--mhn-font-serif);
  font-size: var(--mhn-text-3xl);
  line-height: 1.15;
  font-weight: 700;
  color: var(--mhn-purple-700);
  letter-spacing: -0.01em;
  margin: 0 0 var(--mhn-space-4);
}

.mhn-h2 {
  font-family: var(--mhn-font-serif);
  font-size: var(--mhn-text-2xl);     /* 18pt */
  line-height: 1.25;
  font-weight: 700;
  color: var(--mhn-purple-700);
  padding-bottom: var(--mhn-space-2);
  border-bottom: 2px solid var(--mhn-purple-200);
  margin: var(--mhn-space-8) 0 var(--mhn-space-4);
}

.mhn-h3 {
  font-family: var(--mhn-font-serif);
  font-size: var(--mhn-text-xl);      /* 14pt + */
  line-height: 1.3;
  font-weight: 700;
  color: var(--mhn-purple-500);
  margin: var(--mhn-space-6) 0 var(--mhn-space-3);
}

.mhn-h4 {
  font-family: var(--mhn-font-sans);
  font-size: var(--mhn-text-lg);      /* 12pt */
  font-weight: 700;
  color: var(--mhn-purple-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: var(--mhn-space-5) 0 var(--mhn-space-2);
}

.mhn-p {
  font-family: var(--mhn-font-sans);
  font-size: var(--mhn-text-base);
  line-height: 1.6;
  color: var(--mhn-ink);
  margin: 0 0 var(--mhn-space-4);
  text-wrap: pretty;
}

.mhn-lead {
  font-family: var(--mhn-font-serif);
  font-style: italic;
  font-size: var(--mhn-text-md);
  line-height: 1.55;
  color: var(--mhn-ink-soft);
}

.mhn-caption {
  font-family: var(--mhn-font-sans);
  font-size: var(--mhn-text-xs);
  color: var(--mhn-ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mhn-quote {
  font-family: var(--mhn-font-serif);
  font-style: italic;
  font-size: var(--mhn-text-xl);
  line-height: 1.4;
  color: var(--mhn-purple-700);
  border-left: 3px solid var(--mhn-purple-200);
  padding-left: var(--mhn-space-5);
  margin: var(--mhn-space-6) 0;
}

.mhn-quote cite {
  display: block;
  margin-top: var(--mhn-space-3);
  font-family: var(--mhn-font-sans);
  font-style: normal;
  font-size: var(--mhn-text-sm);
  letter-spacing: 0.04em;
  color: var(--mhn-ink-mute);
}

/* Doula script, italic Libre Baskerville on pink */
.mhn-script {
  font-family: var(--mhn-font-serif);
  font-style: italic;
  color: var(--mhn-purple-900);
}

/* =========================================================
   Callout box primitive, shared by all semantic callouts.
   Use .mhn-callout + a modifier class.
   ========================================================= */
.mhn-callout {
  padding: var(--mhn-space-5) var(--mhn-space-6);
  border-radius: var(--mhn-radius-lg);
  border-left: var(--mhn-border-width-callout) solid var(--mhn-purple-700);
  background: var(--mhn-purple-50);
  margin: var(--mhn-space-5) 0;
}
.mhn-callout__title {
  font-family: var(--mhn-font-serif);
  font-weight: 700;
  font-size: var(--mhn-text-md);
  color: var(--mhn-purple-700);
  margin: 0 0 var(--mhn-space-2);
}
.mhn-callout--tip      { background: var(--mhn-tip-bg);      border-left-color: var(--mhn-tip-border); }
.mhn-callout--tip .mhn-callout__title      { color: var(--mhn-tip-border); }
.mhn-callout--warn     { background: var(--mhn-warn-bg);     border-left-color: var(--mhn-warn-border); }
.mhn-callout--warn .mhn-callout__title     { color: var(--mhn-warn-border); }
.mhn-callout--clinical { background: var(--mhn-clinical-bg); border-left-color: var(--mhn-clinical-border); }
.mhn-callout--clinical .mhn-callout__title { color: var(--mhn-clinical-border); }
.mhn-callout--case     { background: var(--mhn-case-bg);     border-left-color: var(--mhn-case-border); }
.mhn-callout--case .mhn-callout__title     { color: var(--mhn-case-border); }
.mhn-callout--whatif   { background: var(--mhn-whatif-bg);   border-left-color: var(--mhn-whatif-border); }
.mhn-callout--whatif .mhn-callout__title   { color: var(--mhn-whatif-border); }
.mhn-callout--takeaway { background: var(--mhn-takeaway-bg); border-left-color: var(--mhn-takeaway-border); }
.mhn-callout--takeaway .mhn-callout__title { color: var(--mhn-takeaway-border); }

/* =========================================================
   Card / surface primitives
   ========================================================= */
.mhn-card {
  background: var(--mhn-paper);
  border: 1px solid var(--mhn-line);
  border-radius: var(--mhn-radius-xl);
  box-shadow: var(--mhn-shadow-sm);
  padding: var(--mhn-space-6);
}

/* =========================================================
   Button primitives, calm, serif-anchored
   ========================================================= */
.mhn-btn {
  font-family: var(--mhn-font-sans);
  font-size: var(--mhn-text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--mhn-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--mhn-dur) var(--mhn-ease),
              transform var(--mhn-dur-fast) var(--mhn-ease),
              color var(--mhn-dur) var(--mhn-ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mhn-btn--primary   { background: var(--mhn-purple-700); color: var(--mhn-paper); }
.mhn-btn--primary:hover   { background: var(--mhn-purple-900); }
.mhn-btn--primary:active  { transform: scale(0.98); }

.mhn-btn--secondary { background: var(--mhn-purple-50); color: var(--mhn-purple-700); border-color: var(--mhn-purple-200); }
.mhn-btn--secondary:hover { background: var(--mhn-purple-200); }

.mhn-btn--ghost     { background: transparent; color: var(--mhn-purple-700); }
.mhn-btn--ghost:hover     { background: var(--mhn-purple-50); }

/* =========================================================
   ACCORDION (progressive disclosure)
   ========================================================= */
.acc-group{display:flex;flex-direction:column;gap:10px;margin:24px 0}
.acc-group details{border:1px solid var(--mhn-purple-200);border-radius:14px;background:#fff;overflow:hidden;transition:all 0.2s ease;box-shadow:0 1px 0 rgba(94,55,108,0.04)}
.acc-group details[open]{box-shadow:0 4px 14px rgba(94,55,108,0.08);border-color:var(--mhn-purple-500)}
.acc-group summary{padding:18px 24px;cursor:pointer;font-family:var(--mhn-font-serif);font-size:19px;color:var(--mhn-purple-700);font-weight:700;display:flex;align-items:center;justify-content:space-between;list-style:none;line-height:1.3;text-wrap:balance}
.acc-group summary::-webkit-details-marker{display:none}
.acc-group summary::after{content:"+";font-size:25px;color:var(--mhn-purple-500);font-weight:300;margin-left:16px;line-height:1;flex-shrink:0;font-family:var(--mhn-font-sans);transition:transform 0.2s}
.acc-group details[open] summary::after{content:"−"}
.acc-group .acc-body{padding:0 24px 22px;color:var(--mhn-ink-soft);line-height:1.65;font-size:17px}
.acc-group .acc-body p{margin:8px 0}
.acc-group .acc-body p:first-child{margin-top:0}
.acc-group .acc-body ul{margin:8px 0;padding-left:22px}
.acc-group .acc-body li{margin-bottom:4px}
.acc-group .acc-body strong{color:var(--mhn-ink)}

/* =========================================================
   FLIP CARDS
   ========================================================= */
.flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.flip-card{perspective:1200px;height:400px;cursor:pointer}
.flip-inner{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.flip-card:hover .flip-inner,.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:24px 26px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;box-shadow:0 2px 8px rgba(94,55,108,0.08);overflow:auto}
.flip-front{background:var(--mhn-purple-50);border:1px solid var(--mhn-purple-200);text-align:center;align-items:center;justify-content:center}
.flip-front .ico{width:36px;height:36px;color:var(--mhn-purple-700);margin-bottom:14px}
.flip-front h3{font-family:var(--mhn-font-serif);font-size:21px;color:var(--mhn-purple-700);margin:0 0 8px;font-weight:700;line-height:1.2}
.flip-front .hint{font-family:var(--mhn-font-serif);font-style:italic;color:var(--mhn-purple-500);font-size:16px;margin-top:14px;letter-spacing:0.05em}
.flip-back{background:linear-gradient(135deg,var(--mhn-purple-700),var(--mhn-purple-900));color:#fff;transform:rotateY(180deg);justify-content:flex-start;padding-top:22px;text-align:left;align-items:flex-start}
.flip-back h4{font-family:var(--mhn-font-serif);font-size:19px;color:#fff;margin:0 0 10px;font-weight:700;flex-shrink:0}
.flip-back p,.flip-back li{font-size:16px;line-height:1.5;color:#F1EDF3;margin:0 0 6px}
.flip-back ul{padding-left:18px;margin:0;align-self:flex-start;width:100%}
@media (max-width:900px){
  .flip-grid{grid-template-columns:1fr}
  .flip-card{height:auto;min-height:auto}
  .flip-card .flip-inner{transform:none !important}
  .flip-card .flip-front,.flip-card .flip-back{position:relative;backface-visibility:visible;height:auto;transform:none}
  .flip-card .flip-back{display:none}
  .flip-card.flipped .flip-back{display:flex}
  .flip-card.flipped .flip-front{display:none}
}

/* =========================================================
   WARM ACCENT, for DONATE-related elements only
   ========================================================= */
:root {
  --mhn-warm-700: #B5824A;   /* PRIMARY warm accent, donate buttons */
  --mhn-warm-500: #D4A475;   /* secondary warm, hover, highlights */
  --mhn-warm-300: #EAC79F;   /* warm tint, donate card backgrounds */
  --mhn-warm-50:  #FBF5ED;   /* warm cream, alt section background */
  --mhn-cream:    #FAF6F0;   /* alt section base */
}

/* Donate buttons & CTAs */
.btn-donate, a.btn-donate {
  background: var(--mhn-warm-700);
  color: #fff;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(181,130,74,0.25);
  border: none;
  cursor: pointer;
}
.btn-donate:hover { background: var(--mhn-warm-500); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(181,130,74,0.35); }
.btn-donate-outline {
  background: transparent;
  color: var(--mhn-warm-700);
  border: 1.5px solid var(--mhn-warm-700);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.btn-donate-outline:hover { background: var(--mhn-warm-700); color: #fff; }

/* =========================================================
   "WHAT'S HAPPENING NOW" STRIP
   ========================================================= */
.now-strip {
  background: linear-gradient(95deg, var(--mhn-warm-50), #fff 60%);
  border-bottom: 1px solid var(--mhn-purple-200);
  padding: 14px 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--mhn-ink-soft);
  flex-wrap: wrap;
}
.now-strip .now-pill {
  background: var(--mhn-warm-700);
  color: #fff;
  font-size:16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}
.now-strip a {
  color: var(--mhn-purple-700);
  font-weight: 700;
  text-decoration: none;
  margin-left: auto;
}
@media (max-width: 700px) {
  .now-strip { padding: 12px 18px; font-size: 16px; }
  .now-strip a { margin-left: 0; margin-top: 6px; width: 100%; }
}

/* =========================================================
   LANGUAGE TOGGLE (visible EN | ES near logo)
   ========================================================= */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--mhn-purple-200);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 16px;
  font-size:16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-toggle a {
  padding: 6px 12px;
  text-decoration: none;
  color: var(--mhn-purple-500);
  transition: all 0.15s;
}
.lang-toggle a.active {
  background: var(--mhn-purple-700);
  color: #fff;
}
.lang-toggle a:not(.active):hover { background: var(--mhn-purple-50); color: var(--mhn-purple-700); }

/* =========================================================
   HERO SPLIT-LAYOUT (text + image)
   ========================================================= */
.hero-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 48px 72px;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-split .hero-img {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
  box-shadow: 0 20px 60px rgba(94,55,108,0.18);
}
.hero-split .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-split .hero-img .badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 999px;
  font-size:16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mhn-purple-700);
  font-weight: 700;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 48px; }
}

/* =========================================================
   STAT REFRAMED, bigger, with consequence text
   ========================================================= */
.stat-feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 32px auto;
  max-width: 1200px;
  padding: 0 48px;
}
.stat-feature .stat-card {
  background: #fff;
  border: 1px solid var(--mhn-purple-200);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-shadow: 0 4px 16px rgba(94,55,108,0.06);
}
.stat-feature .stat-card .big {
  font-family: var(--mhn-font-serif);
  font-size: 29px;
  line-height: 1;
  color: var(--mhn-purple-700);
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.stat-feature .stat-card .body h3 {
  font-family: var(--mhn-font-serif);
  font-size: 20px;
  color: var(--mhn-purple-700);
  margin: 0 0 8px;
  line-height: 1.2;
}
.stat-feature .stat-card .body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mhn-ink-soft);
  margin: 0;
}
.stat-feature .stat-card .body .compare {
  font-size:16px;
  color: var(--mhn-ink-mute);
  margin-top: 10px;
  font-style: italic;
}
@media (max-width: 900px) {
  .stat-feature { grid-template-columns: 1fr; padding: 0 20px; }
  .stat-feature .stat-card { flex-direction: column; padding: 24px; }
  .stat-feature .stat-card .big { font-size: 33px; }
}

/* =========================================================
   TEAM PREVIEW STRIP
   ========================================================= */
.team-strip {
  padding: 36px 48px 40px;
  background: var(--mhn-cream);
  text-align: center;
}
.team-strip .eyebrow { font-size:16px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mhn-purple-500); font-weight: 700; margin-bottom: 14px; }
.team-strip h2 { font-family: var(--mhn-font-serif); font-size: 27px; color: var(--mhn-purple-700); margin: 0 0 12px; letter-spacing: -0.01em; }
.team-strip .sub { font-family: var(--mhn-font-serif); font-style: italic; color: var(--mhn-ink-soft); font-size: 17px; margin: 0 auto 32px; max-width: 580px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
.team-grid .face { aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; position: relative; box-shadow: var(--mhn-shadow-sm); }
.team-grid .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-grid .face .name { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,0.95); padding: 6px 10px; border-radius: 8px; font-size:16px; color: var(--mhn-purple-700); font-weight: 700; text-align: center; }
.team-strip .more-cta { display: inline-block; margin-top: 28px; color: var(--mhn-purple-700); font-weight: 700; font-size: 16px; text-decoration: none; }
@media (max-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter {
  padding: 56px 48px;
  background: linear-gradient(135deg, var(--mhn-purple-700), var(--mhn-purple-900));
  color: #fff;
  text-align: center;
}
.newsletter h2 { font-family: var(--mhn-font-serif); font-size: 27px; color: #fff; margin: 0 0 12px; letter-spacing: -0.01em; }
.newsletter p { color: var(--mhn-purple-200); margin: 0 auto 24px; max-width: 520px; font-size: 17px; line-height: 1.55; }
.newsletter form { display: inline-flex; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  background: rgba(255,255,255,0.95);
  color: var(--mhn-ink);
  font-family: var(--mhn-font-sans);
}
.newsletter input[type="email"]::placeholder { color: var(--mhn-ink-mute); }
.newsletter button {
  background: var(--mhn-warm-700);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.newsletter button:hover { background: var(--mhn-warm-500); }
.newsletter .privacy { font-size:16px; color: var(--mhn-purple-300); margin-top: 14px; font-style: italic; }

/* =========================================================
   FOOTER UPGRADE, newsletter, social, EIN
   ========================================================= */
footer .foot-newsletter { background: rgba(255,255,255,0.06); padding: 22px 24px; border-radius: 14px; margin-bottom: 32px; }
footer .foot-newsletter h5 { color: #fff; font-family: var(--mhn-font-serif); font-size: 17px; margin: 0 0 8px; font-weight: 700; letter-spacing: 0; text-transform: none; }
footer .foot-newsletter p { color: var(--mhn-purple-200); font-size: 16px; margin: 0 0 12px; line-height: 1.5; }
footer .foot-newsletter form { display: flex; gap: 8px; }
footer .foot-newsletter input { flex: 1; padding: 10px 14px; border-radius: 999px; border: none; font-size: 16px; }
footer .foot-newsletter button { background: var(--mhn-warm-700); color: #fff; border: none; padding: 10px 16px; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer; }
footer .social-row { display: flex; gap: 12px; margin-top: 14px; }
footer .social-row a { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: background 0.2s; }
footer .social-row a:hover { background: var(--mhn-warm-700); }
footer .ein-line { font-size:16px; color: #845995; margin-top: 12px; letter-spacing: 0.04em; }

/* =========================================================
   STICKY MOBILE BOTTOM CTA BAR
   ========================================================= */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--mhn-purple-200);
  padding: 10px 12px;
  gap: 8px;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(94,55,108,0.1);
}
.sticky-mobile-cta a {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.sticky-mobile-cta a.apply { background: var(--mhn-purple-700); color: #fff; }
.sticky-mobile-cta a.donate { background: var(--mhn-warm-700); color: #fff; }
.sticky-mobile-cta a.call { background: transparent; color: var(--mhn-purple-700); border: 1.5px solid var(--mhn-purple-700); }
@media (max-width: 700px) {
  .sticky-mobile-cta { display: flex; }
  body { padding-bottom: 76px; }
}

/* =========================================================
   ALTERNATING SECTION BACKGROUNDS
   ========================================================= */
.bg-cream { background: var(--mhn-cream); }
.bg-paper-alt { background: var(--mhn-paper-alt); }
.bg-purple-50 { background: var(--mhn-purple-50); }

/* =========================================================
   SCROLL FADE-IN ANIMATIONS
   ========================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   FULL-BLEED PHOTO BAND (section break)
   ========================================================= */
.photo-band {
  width: 100%;
  height: 56vh;
  min-height: 360px;
  max-height: 540px;
  position: relative;
  overflow: hidden;
}
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band .caption {
  position: absolute;
  bottom: 32px;
  left: 48px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 18px 24px;
  border-radius: 14px;
  max-width: 420px;
}
.photo-band .caption .lbl { font-size:16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mhn-purple-500); font-weight: 700; margin-bottom: 8px; }
.photo-band .caption p { font-family: var(--mhn-font-serif); font-style: italic; color: var(--mhn-purple-700); font-size: 18px; margin: 0; line-height: 1.35; }
@media (max-width: 700px) {
  .photo-band { height: 40vh; }
  .photo-band .caption { left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; }
}

/* =========================================================
   REFINEMENT PASS, more warmth, better proportions
   ========================================================= */

/* ----- Gold rule divider (section break with ornament) ----- */
.gold-rule { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto; padding:18px 0; max-width:1100px }
.gold-rule .line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--mhn-warm-500) 30%, var(--mhn-warm-500) 70%, transparent) }
.gold-rule .ornament { color:var(--mhn-warm-700); font-family:var(--mhn-font-serif); font-size:19px; line-height:1; flex-shrink:0; opacity:0.85 }

/* ----- H2 (gold underline accent removed per design pass) ----- */
.h2-warm { display:inline-block; position:relative }

/* ----- TESTIMONIAL CARDS (shared site-wide) ----- */
.testimonials{padding:40px 48px;background:var(--mhn-paper-alt)}
.testimonials-head{max-width:620px;margin-bottom:36px}
.testimonials-head h3{font-family:var(--mhn-font-serif);font-size:27px;color:var(--mhn-purple-700);margin:10px 0 0;letter-spacing:-0.01em}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:#fff;border:1px solid var(--mhn-line);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.tcard .mark{font-family:var(--mhn-font-serif);font-size:33px;line-height:0.6;color:var(--mhn-purple-200);margin-bottom:4px}
.tcard blockquote{font-family:var(--mhn-font-serif);font-style:italic;font-size:17px;line-height:1.55;color:var(--mhn-purple-900);margin:0 0 20px;flex:1;text-wrap:pretty}
.tcard cite{font-family:var(--mhn-font-sans);font-style:normal;font-size:16px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mhn-ink-mute);font-weight:700;display:block}
.tcard .client{font-family:var(--mhn-font-serif);font-style:italic;font-size:16px;color:var(--mhn-purple-700);margin-top:4px}
@media (max-width:900px){.tgrid{grid-template-columns:1fr;gap:18px}.testimonials{padding:32px 20px}}

/* ----- Hero image sizing fix ----- */
.hero-split { padding:48px 48px 56px; max-height:none }
.hero-split .hero-img { aspect-ratio:5/6; max-height:560px }
@media (min-width:1200px){ .hero-split .hero-img { max-height:600px } }

/* ----- Photo band: smaller, more refined ----- */
.photo-band { height:44vh; min-height:320px; max-height:460px; border-radius:0 }
.photo-band-rounded { border-radius:24px; margin:32px 48px; overflow:hidden; max-width:1280px; margin-left:auto; margin-right:auto }
.photo-band .caption { padding:16px 20px; max-width:380px; bottom:24px; left:32px }
.photo-band .caption p { font-size:17px }

/* ----- Photo gallery: smaller, more proportional ----- */
.photo-gallery { padding:48px 48px }
.gallery-grid { gap:14px }
.gallery-grid .photo img { aspect-ratio:4/5; max-height:380px }
.gallery-grid .photo.wide img { aspect-ratio:4/3; max-height:340px }
.gallery-grid .photo .cap { padding:8px 12px; font-size:16px; bottom:10px; left:10px; right:10px }
@media (min-width:1200px){
  .gallery-grid .photo img { max-height:340px }
  .gallery-grid .photo.wide img { max-height:300px }
}

/* ----- Section background variants, alternating ----- */
.bg-warm-cream { background:var(--mhn-warm-50) }
.bg-warm-tint { background:linear-gradient(180deg, var(--mhn-warm-50), var(--mhn-cream)) }
.section-divider-warm { border-top:1px solid var(--mhn-warm-300); border-bottom:1px solid var(--mhn-warm-300) }

/* ----- Pull quote, refined with warm gold quote mark ----- */
.pull-quote { position:relative; padding:24px 24px 24px 64px; margin:24px 0; font-family:var(--mhn-font-serif); font-style:italic; color:var(--mhn-purple-700); font-size:19px; line-height:1.5; background:var(--mhn-warm-50); border-radius:14px; border-left:4px solid var(--mhn-warm-700) }
.pull-quote::before { content:"\201C"; position:absolute; top:8px; left:18px; font-size:29px; color:var(--mhn-warm-700); font-family:var(--mhn-font-serif); line-height:1; opacity:0.9 }
.pull-quote cite { display:block; margin-top:14px; font-family:var(--mhn-font-sans); font-style:normal; font-size:16px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mhn-ink-mute); font-weight:700 }

/* ----- Card border warm accent (alternative to purple) ----- */
.card-warm { background:#fff; border:1px solid var(--mhn-warm-300); border-radius:18px; padding:28px; box-shadow:0 4px 14px rgba(181,130,74,0.08) }
.card-warm h3 { color:var(--mhn-warm-700) }

/* ----- Gold inline icon/dot ----- */
.gold-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--mhn-warm-700); margin-right:8px; vertical-align:middle }

/* ----- TABS (replacing accordions on About page) ----- */
.tabs { margin:32px 0 }
.tabs-nav { display:flex; gap:4px; border-bottom:2px solid var(--mhn-purple-200); margin-bottom:32px; flex-wrap:wrap }
.tabs-nav button { background:none; border:none; padding:14px 20px; font-family:var(--mhn-font-serif); font-size:18px; color:var(--mhn-purple-500); cursor:pointer; position:relative; font-weight:700; transition:color 0.15s; border-bottom:3px solid transparent; margin-bottom:-2px }
.tabs-nav button.active { color:var(--mhn-purple-700); border-bottom-color:var(--mhn-warm-700) }
.tabs-nav button:hover:not(.active) { color:var(--mhn-purple-700) }
.tabs-panel { display:none }
.tabs-panel.active { display:block; animation:tabFade 0.3s ease }
@keyframes tabFade { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ----- Accordion grouping under sub-headings ----- */
.acc-section-head { font-family:var(--mhn-font-sans); font-size:16px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mhn-warm-700); font-weight:700; margin:32px 0 14px; display:flex; align-items:center; gap:12px }
.acc-section-head::before { content:""; width:24px; height:2px; background:var(--mhn-warm-700); display:inline-block }

/* ----- Ornament between sections (decorative purple/gold motif) ----- */
.ornament-row { text-align:center; padding:32px 0; color:var(--mhn-warm-700); font-family:var(--mhn-font-serif); font-size:21px; letter-spacing:1em; opacity:0.6 }

/* ----- Make donate buttons appear in MORE places with warmth ----- */
.donate-soft { background:var(--mhn-warm-50); border:1px solid var(--mhn-warm-300); border-radius:14px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0 }
.donate-soft .text { font-family:var(--mhn-font-serif); font-style:italic; color:var(--mhn-purple-700); font-size:17px; line-height:1.4 }

@media (max-width:900px){
  .photo-band-rounded { margin:24px 12px }
  .pull-quote { font-size:18px; padding:20px 18px 20px 50px }
  .pull-quote::before { font-size:33px; left:14px; top:6px }
  .donate-soft { flex-direction:column; align-items:stretch; text-align:center }
  .tabs-nav button { padding:12px 14px; font-size:17px }
}


/* ===== FRAMED PHOTO ROW (matches warm/gold theme) ===== */
.frame-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.mhn-frame {
  margin: 0;
  background: #fff;
  padding: 8px 8px 4px;
  border: 1px solid var(--mhn-warm-300, #E8D5BD);
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(94,55,108,0.10), 0 0 0 1px rgba(181,130,74,0.08) inset;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mhn-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(181,130,74,0.35);
  border-radius: 4px;
  pointer-events: none;
}
.mhn-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(94,55,108,0.16), 0 0 0 1px rgba(181,130,74,0.12) inset;
}
.mhn-frame img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.mhn-frame figcaption {
  font-family: var(--mhn-font-serif);
  font-style: italic;
  font-size:16px;
  color: var(--mhn-purple-700);
  text-align: center;
  padding: 8px 4px 4px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .frame-row { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; max-width: 600px; }
}
@media (max-width: 600px) {
  .frame-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; max-width: 380px; }
}


/* ===== PARTNERS & FUNDERS STRIP ===== */
.partners-strip {
  padding: 32px 0 36px;
  background: var(--mhn-paper-alt);
  border-top: 1px solid var(--mhn-line);
}
.partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mhn-line);
  border-radius: 12px;
  height: 92px;
  padding: 14px 12px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  text-align: center;
}
.partner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(94,55,108,0.12);
  border-color: var(--mhn-warm-300, #E8D5BD);
}
.partner-card .partner-name {
  font-family: var(--mhn-font-serif);
  font-size:16px;
  line-height: 1.3;
  color: var(--mhn-purple-700);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.partner-card img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 900px) {
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .partner-card { height: 80px; }
  .partner-card .partner-name { font-size:16px; }
}


/* Larger framed photos for Real Moments and similar */
.mhn-frame--lg img { aspect-ratio: 4/5; }
.mhn-frame--lg figcaption { font-size: 16px; padding-top: 10px; }


/* ===== FOOT QUICK HELP ROW (above copyright on every page) ===== */
.foot-quick-help {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 0;
  margin: 0 0 12px;
  border-top: 1px solid rgba(212,186,221,0.18);
  border-bottom: 1px solid rgba(212,186,221,0.18);
  font-size: 16px;
}
.foot-quick-help .qh-label {
  font-family: var(--mhn-font-serif);
  font-style: italic;
  color: #D4BADD;
  letter-spacing: 0.02em;
}
.foot-quick-help a {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(212,186,221,0.45);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.foot-quick-help a:hover {
  color: #FAEFE0;
  background: rgba(255,255,255,0.18);
  border-color: #B5824A;
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .foot-quick-help { gap: 10px 14px; padding: 14px 16px; font-size:16px; }
}


/* ===== IMPACT FLIP CARDS (BIG NUMBER ANIMATION) ===== */
.flip-grid.impact-flip .flip-card {
  animation: impactFadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.flip-grid.impact-flip .flip-card:nth-child(1) { animation-delay: 0.1s; }
.flip-grid.impact-flip .flip-card:nth-child(2) { animation-delay: 0.25s; }
.flip-grid.impact-flip .flip-card:nth-child(3) { animation-delay: 0.4s; }
@keyframes impactFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.flip-grid.impact-flip .flip-card .flip-front > div:first-of-type {
  background: linear-gradient(135deg, var(--mhn-purple-500), var(--mhn-purple-900));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.4s ease;
}
.flip-grid.impact-flip .flip-card:hover .flip-front > div:first-of-type {
  transform: scale(1.06);
}

@media (max-width: 700px) {
  .flip-grid.impact-flip { grid-template-columns: 1fr !important; }
  .flip-grid.impact-flip .flip-card { height: 240px !important; }
}

/* =========================================================
   COMPREHENSIVE MOBILE IMPROVEMENTS
   Added April 30 2026: tighter spacing, prevented overflow,
   bigger touch targets, smaller heroes on very narrow screens
   ========================================================= */
@media (max-width: 760px) {
  /* Prevent any horizontal overflow */
  html, body { overflow-x: hidden; }
  body, .page { max-width: 100%; }
  img, iframe, video { max-width: 100%; height: auto; }

  /* Tighter hero on phones */
  .hero { padding: 40px 20px 28px !important; }
  h1.t, .h1 { font-size: 25px !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; }
  .lede { font-size: 17px !important; line-height: 1.5 !important; }

  /* Hero side-by-side photo layout collapses to stacked */
  .hero-grid, .hero-split, .hero-art-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-art, .hero-img { max-width: 100% !important; margin: 0 auto !important; }

  /* All multi-col grids collapse to single column */
  .agrid, .rgrid, .cgrid, .qgrid, .mgrid, .scards, .rcards, .grid-3, .grid-2,
  .stats-grid, .ngrid, .gallery-grid, .partners-grid, .tgrid, .home-vision, .home-hotline,
  .contact-inner, .program {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Partners stay 2-up on phone (logos look better) */
  .partners-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Section padding tightens */
  section, .body, .actions, .resources, .contacts, .doula-gallery,
  .partners, .partners-strip, .qualify, .pathway, .materials, .appr,
  .scholarships, .policy, .photo-gallery, .testimonials, .stats, .mission,
  .services, .final, .outcomes, .home-hotline, .home-vision, .contact, .footprint, .numbers, .tl-wrap, .founder, .origin {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Bigger touch targets for nav links and buttons */
  .nav-links a { padding: 8px 6px; }
  .mhn-btn, .mhn-btn--primary, .mhn-btn--secondary, .mhn-btn--inline,
  .acard .go, .rcard .dl, .price-card a, .partner-card {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Stack buttons vertically when they're side-by-side on phones */
  .cta-row, .hero .cta-row { flex-direction: column; align-items: stretch; gap: 10px !important; }
  .cta-row .mhn-btn, .cta-row .mhn-btn--primary, .cta-row .mhn-btn--secondary {
    width: 100%;
    justify-content: center;
  }

  /* Big number stats shrink */
  .stat .n, .nitem .n, .ostat .pct { font-size: 29px !important; line-height: 1 !important; }
  h2 { font-size: 21px !important; }
  h3 { font-size: 19px !important; }

  /* Quotes / blockquotes more readable */
  blockquote, .quote { font-size: 18px !important; line-height: 1.5 !important; }

  /* Footer always 1-col on phone */
  .foot-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Foot quick help wraps properly with pill buttons */
  .foot-quick-help { padding: 14px 16px; gap: 10px 12px; }
  .foot-quick-help .qh-label { width: 100%; text-align: center; margin-bottom: 4px; }
  .foot-quick-help a { font-size:16px; padding: 7px 14px; }

  /* Sticky mobile CTA bar already shows up at <=700px from existing CSS */
  /* Make sure last footer content is visible above sticky bar */
  footer { padding-bottom: 28px !important; }
}

/* iPhone-specific narrow tightening */
@media (max-width: 420px) {
  h1.t, .h1 { font-size: 21px !important; }
  h2 { font-size: 21px !important; }
  .stat .n, .nitem .n { font-size: 27px !important; }
  .hero { padding: 32px 16px 22px !important; }
  section, .body, .actions, .resources, .contacts {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Partners: 2 columns even at this width, but tighter gap */
  .partners-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .partner-card { height: 76px !important; }
  .partner-card img { max-height: 52px !important; }
  .partner-card .partner-name { font-size:16px !important; line-height: 1.25 !important; }

  /* Field guide PDF viewer shorter on phone */
  .fg-viewer iframe { height: 320px !important; }
  .fg-head { flex-direction: column; gap: 14px; }
  .fg-head .dl { width: 100%; text-align: center; }
}

/* =========================================================
   MOBILE HAMBURGER NAV
   Activated by mobile-nav.js, which injects .nav-burger
   ========================================================= */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--mhn-line);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.15s, background 0.15s;
}
.nav-burger:hover, .nav-burger:focus {
  border-color: var(--mhn-purple-300);
  background: var(--mhn-purple-50);
  outline: none;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mhn-purple-700);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
}
.nav.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  /* Force horizontal nav header (override earlier flex-direction:column) */
  .nav, .page > nav.nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 18px !important;
    gap: 10px !important;
  }
  .nav .brand { flex-shrink: 0; }
  .nav-burger { display: flex; }

  /* Hide nav-links by default; show only when nav.nav-open */
  .nav-links {
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 8px 0 4px !important;
    margin-top: 6px;
    border-top: 1px solid var(--mhn-line-soft);
    align-items: stretch !important;
  }
  .nav.nav-open .nav-links { display: flex !important; }
  .nav-links a {
    padding: 12px 4px !important;
    font-size: 17px !important;
    border-bottom: 1px solid var(--mhn-line-soft);
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-links a:last-child { border-bottom: none; }

  /* Lang toggle inline above the donate button */
  .nav-links .lang-toggle {
    display: inline-flex !important;
    gap: 6px;
    padding: 12px 4px !important;
    border-bottom: 1px solid var(--mhn-line-soft);
  }
  .nav-links .lang-toggle a {
    display: inline-block !important;
    width: auto !important;
    padding: 6px 14px !important;
    border: 1px solid var(--mhn-line);
    border-radius: 999px;
    border-bottom: 1px solid var(--mhn-line) !important;
    font-size: 16px !important;
  }

  /* Donate button at the bottom of the drawer, full-width */
  .nav-links .btn-donate, .nav-links a.btn-donate {
    margin-top: 8px !important;
    background: var(--mhn-purple-700) !important;
    color: #fff !important;
    text-align: center;
    border-radius: 999px;
    padding: 12px 16px !important;
    border-bottom: none !important;
  }
}

/* =========================================================
   BRAND SEAL FIX
   The logo PNG fills its 1000x1000 canvas to the edges, so when
   the seal container squeezes it, the swirl looked clipped. Give
   the container a touch more room and use object-fit: contain.
   ========================================================= */
.brand .seal {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.brand .seal img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 760px) {
  .brand .seal { width: 46px !important; height: 46px !important; }
}


/* === LANGUAGE TOGGLE ICON (header nav) === */
.nav-links .lang-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  color:var(--mhn-purple-700); background:transparent;
  text-decoration:none; transition:background 0.15s, color 0.15s;
}
.nav-links .lang-icon:hover{background:var(--mhn-purple-50); color:var(--mhn-purple-900)}
.nav-links .lang-icon i, .nav-links .lang-icon svg{width:18px; height:18px}

/* === LANGUAGE TEXT TOGGLE (ENG / ESP) === */
.nav-links .lang-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--mhn-purple-200);
  font-family:var(--mhn-font-sans); font-size:13px; font-weight:700;
  letter-spacing:0.06em; text-decoration:none;
  color:var(--mhn-purple-700); background:#fff;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-links .lang-toggle:hover{background:var(--mhn-purple-700); color:#fff; border-color:var(--mhn-purple-700)}
.nav-links .lang-toggle:hover .lang-other{color:#fff}
.nav-links .lang-toggle .lang-active{color:var(--mhn-purple-700); font-weight:800}
.nav-links .lang-toggle .lang-sep{color:var(--mhn-purple-300); font-weight:400}
.nav-links .lang-toggle .lang-other{color:var(--mhn-ink-mute); font-weight:600}

/* === STICKY TOP NAVIGATION (site-wide override) === */
nav.nav{
  position:sticky !important;
  top:0;
  z-index:100;
  background:#fff;
  box-shadow:0 1px 0 var(--mhn-line-soft), 0 4px 16px rgba(94,55,108,0.04);
}