/* Shared Marylynes design tokens. Loaded last on every first-party page. */
:root {
  --mh-forest: #173e36;
  --mh-forest-hover: #24594d;
  --mh-sage: #dce9e1;
  --mh-canvas: #f4f6fa;
  --mh-paper: #ffffff;
  --mh-ink: #183c34;
  --mh-muted: #586d65;
  --mh-line: #d7e1dc;
  --mh-radius: 999px;
  --mh-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --marylynes-navy: #173e36;
  --marylynes-ink: #183c34;
  --marylynes-body: #586d65;
  --marylynes-paper: #f4f6fa;
  --marylynes-gold: #dce9e1;
  --marylynes-navy-2: #24594d;
  --marylynes-blue: #24594d;
  --marylynes-blue-soft: #4f806d;
  --marylynes-gold-light: #e8f0ec;
  --marylynes-gold-deep: #4f806d;
  --marylynes-metallic-gold: #173e36;
  --marylynes-ivory: #f4f8f5;
  --marylynes-white: #ffffff;
  --teal: #c0dfd0;
  --ink: #f5faf6;
  --ink-2: #e8f0ec;
}
body { font-family: var(--mh-font) !important; color: var(--mh-ink); -webkit-font-smoothing: antialiased; }
body :is(h1,h2,h3,h4,h5,p,a,button,input,textarea,select,label,blockquote,cite,span,li,strong,em) { font-family: var(--mh-font) !important; }
body :is(a,button,input,textarea,select):focus-visible { outline: 2px solid #40846d !important; outline-offset: 4px; }
body :is(.mh-button,.primary-action,.partner-link,.capabilities__button),
body #root :is(.marylynes-metallic-button,.black-liquid-glass-button):not([role="tab"]),
body .marylynes-back-to-top {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 13px 24px;
  border: 1px solid transparent !important; border-radius: var(--mh-radius) !important;
  color: #fff !important; background: var(--mh-forest) !important; background-image: none !important;
  box-shadow: none !important; font-size: 15px; font-weight: 500 !important; line-height: 1.35;
  text-decoration: none; cursor: pointer; transform: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
body :is(.mh-button,.primary-action,.partner-link,.capabilities__button):hover,
body #root :is(.marylynes-metallic-button,.black-liquid-glass-button):not([role="tab"]):hover,
body .marylynes-back-to-top:hover { background: var(--mh-forest-hover) !important; color: #fff !important; }
body :is(.mh-button,.marylynes-metallic-button)::before,
body :is(.mh-button,.marylynes-metallic-button)::after { display: none !important; }
body .mh-button:disabled, body .marylynes-metallic-button:disabled { opacity: .55; cursor: wait; }
body .mh-button svg { flex-shrink: 0; }
body #root :is(.features-popup-close,.core-prev,.core-next), body .marylynes-back-to-top { padding: 0 !important; min-height: 44px; width: 44px; height: 44px; }
body .marylynes-back-to-top { bottom: 20px; right: 20px; }
body .marylynes-back-to-top[aria-hidden="true"] { opacity: 0 !important; visibility: hidden; pointer-events: none; }
body .marylynes-back-to-top[aria-hidden="false"] { opacity: 1 !important; visibility: visible; pointer-events: auto; }

/* Hero: the existing video and entrance remain; all identity and links are housing-specific. */
body .brand { color: var(--mh-sage); font-size: clamp(18px, 2vw, 26px); letter-spacing: -.035em; }
body .headline { font-weight: 400; line-height: .99; }
body .title-line { letter-spacing: -.045em; }
body .hero-copy { width: min(calc(870 * var(--u)), calc(100vw - 2 * var(--gutter))); }
body .lede { max-width: 600px; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.6; }
body .logo { width: 184px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-radius: var(--mh-radius); background: rgba(23,62,54,.7); color: #fff; }
.hero-house-mark { flex-shrink: 0; width: 34px; height: 34px; color: #dce9e1; }
.hero-wordmark { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.hero-wordmark small { margin-top: 3px; font-size: 9px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; }
body .nav-pill { display: flex; align-items: center; gap: 22px; width: auto; height: 52px; padding: 4px 5px 4px 22px; right: 68px; border-radius: var(--mh-radius); background: rgba(14,37,32,.92); }
body .hero-nav-links { display: flex; gap: 22px; align-items: center; height: 100%; }
body .nav-link { position: static; font-size: 13px; height: 44px; }
body .partner-link { position: static; width: auto; height: 42px; min-height: 42px; padding: 0 18px; font-size: 13px; gap: 8px; background: var(--mh-sage) !important; color: var(--mh-forest) !important; }
body .partner-link:hover { color: #fff !important; }
body .partner-link .action-disc { display: none; }
body .primary-action { width: auto; height: auto; padding-right: 12px; gap: 24px; }
body .primary-action .action-disc { position: static; width: 32px; height: 32px; background: rgb(255 255 255 / .13); }
body .text-action, body .scroll-cue { font-size: 14px; }
body .sound-button, body .menu-button { width: 48px; height: 48px; color: var(--mh-sage); background: rgba(23,62,54,.78); }

/* Retained section designs now share the same palette and type. */
body #marylynes-sections #about { background: var(--mh-paper) !important; color: var(--mh-ink) !important; }
body #marylynes-sections #about h2, body #marylynes-sections #about h3 { color: var(--mh-ink) !important; }
body #marylynes-sections #about p, body #marylynes-sections #about .text-black\/60 { color: var(--mh-muted) !important; }
body #marylynes-sections #about .text-black\/40 { color: #647d72 !important; }
body #marylynes-sections #about .bg-black { background: var(--mh-forest) !important; }
body #marylynes-sections #about .bg-black\/80 { background: rgb(23 62 54 / .8) !important; }
body #marylynes-sections #about .text-black\/80 { color: var(--mh-ink) !important; }
body #marylynes-sections #services.capabilities, body #marylynes-sections #get-involved { background: var(--mh-canvas) !important; color: var(--mh-ink) !important; }
body #marylynes-sections .capabilities__intro h2 { color: var(--mh-ink) !important; }
body #marylynes-sections .capabilities__intro p { color: var(--mh-muted); }
body .cap-card--quote, body .cap-card--contact { background: linear-gradient(135deg,#fff,#e9f0eb) !important; border-color: var(--mh-line); }
body .cap-card--quote blockquote, body .cap-card--quote cite strong, body #marylynes-sections .cap-card--contact h3 { color: var(--mh-ink); }
body .cap-card--quote cite, body .cap-card--contact a:not(.cap-card__icon-button) { color: var(--mh-muted); }
body .cap-card__icon-button { background: var(--mh-forest); color: #fff; }

/* Benefits layout: housing content, honest 24/7 counter, and the requested remote media. */
body #marylynes-sections #get-involved h2, body #marylynes-sections #get-involved h3 { color: var(--mh-ink) !important; }
body #marylynes-sections #get-involved p { color: var(--mh-muted) !important; }
body #marylynes-sections #get-involved .benefit-heading { margin-bottom: 32px; }
body #marylynes-sections #get-involved .benefit-card-heading { margin-bottom: 32px; }
.benefit-eyebrow { color: var(--mh-muted); }
.benefit-inline-fallback { display: inline-flex; width: 1.2em; height: .8em; align-items: center; justify-content: center; vertical-align: middle; margin-inline: -.1em; transform: translateY(-.1em); color: var(--mh-forest); background: var(--mh-sage); border-radius: 999px; }
.benefit-inline-fallback svg { width: .65em; height: .65em; }
body #marylynes-sections .benefit-eyebrow > span { background: var(--mh-forest) !important; }
.benefit-pill { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--mh-radius); padding: 10px 20px; color: var(--mh-forest); background: #fff; font-size: 14px; box-shadow: 0 2px 8px rgb(0 0 0 / .04); }
.benefit-tab { background: transparent !important; color: var(--mh-ink) !important; border: none; box-shadow: none !important; border-radius: 0; }
body #marylynes-sections #get-involved .benefit-answer p { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.benefit-feature-label { color: var(--mh-forest); }
.benefit-media { background: var(--mh-sage); min-width: 0; }
.benefit-gift { white-space: nowrap; }
body #marylynes-sections .benefit-counter-footer { background: var(--mh-forest) !important; }
.benefit-counter { max-width: calc(100% - 48px); }
body #marylynes-sections .benefit-counter p { margin-bottom: 6px; }

/* Marylynes footer, email actions and standalone routes. */
body footer#contact { background: #eaf0ec !important; color: var(--mh-ink); border-top: 1px solid var(--mh-line); }
body footer#contact h4, body footer#contact a, body footer#contact a:visited { color: var(--mh-forest) !important; }
body footer#contact p, body footer#contact span { color: var(--mh-muted); }
body footer#contact .marylynes-form-consent span { font-size: 13px; line-height: 1.55; }
body footer#contact img.h-14 { width: 132px; height: 132px; }
body #root input:not([type="checkbox"]):not([type="radio"]), body #root textarea, body #root select { border: 1px solid var(--mh-line) !important; border-radius: 16px !important; background: #fff !important; color: var(--mh-ink) !important; box-shadow: none !important; }
body #root input[type="checkbox"], body #root input[type="radio"] { accent-color: var(--mh-forest); }
body .marylynes-cloudflare-form { color: var(--mh-ink); }
body .marylynes-email-action { display: grid; gap: 20px; justify-items: start; }
body .marylynes-email-action p { margin: 0; line-height: 1.65; }
body .marylynes-email-note { font-size: 13px; color: var(--mh-muted); }
body .marylynes-cloudflare-form label, body .marylynes-cloudflare-form legend { color: var(--mh-ink) !important; }
body .contact-page, body .contact-form-panel, body .legal-page { background: var(--mh-canvas) !important; color: var(--mh-ink) !important; }
body .contact-page-shell, body .legal-page-shell { background: var(--mh-canvas) !important; color: var(--mh-ink) !important; }
body #root nav.navbar { background: var(--mh-forest) !important; border-color: rgb(220 233 225 / .2) !important; box-shadow: 0 12px 28px rgb(23 62 54 / .12) !important; }
body #root nav.navbar::before, body #root nav.navbar::after { background: none !important; }
body #root .navbar .nav-links a { color: #f4f8f5 !important; }
body #root .navbar .nav-links a:hover { color: var(--mh-sage) !important; }
body #root .navbar .nav-links a.nav-contact-cta { border-radius: var(--mh-radius); background: var(--mh-sage) !important; color: var(--mh-forest) !important; padding: 10px 18px; }
body #root .navbar .nav-links a.nav-contact-cta:hover { background: #fff !important; color: var(--mh-forest) !important; }
body .contact-page-shell .contact-link-icon { background: var(--mh-sage); color: var(--mh-forest); }
body #root .navbar .nav-separator { background: rgb(220 233 225 / .2) !important; }
body .contact-page-shell :is(h1,h2,h3), body .legal-page-shell :is(h1,h2,h3) { color: var(--mh-ink) !important; }
body .contact-page h1, body .contact-page h2, body .legal-page h1, body .legal-page h2 { color: var(--mh-ink) !important; }
body .features-popup-panel { background: #102d27 !important; border: 1px solid rgb(220 233 225 / .18) !important; }
body .features-popup-panel :is(h2,h3,h4) { color: #f4f8f5 !important; }
body #root .core-tab-button { border-radius: var(--mh-radius) !important; background: rgb(220 233 225 / .1) !important; color: #e8f0ec !important; box-shadow: none !important; }
body #root .core-tab-button.is-active { background: var(--mh-sage) !important; color: var(--mh-forest) !important; }
body #root .features-popup-close { background: var(--mh-sage) !important; color: var(--mh-forest) !important; font-size: 24px; }
body .volunteer-form-content { padding: 48px 24px 24px; }
body .volunteer-form-content > h2 { font-size: clamp(28px,4vw,42px); line-height: 1.1; margin-bottom: 16px; }
body .volunteer-form-content > p { color: #dce9e1; margin-bottom: 28px; }
body .volunteer-form-content .marylynes-cloudflare-form { background: #f4f6fa; padding: clamp(18px,3vw,32px); border-radius: 24px; }

@media (min-width:1280px) {
  body #marylynes-sections .benefit-media { width: min(46%,410px) !important; min-height: 560px; }
  body #marylynes-sections .benefit-feature { padding: clamp(24px,2.5vw,48px) !important; }
}
@media (max-width:900px) {
  body .site-header { display: grid; grid-template-columns: minmax(0,1fr) 48px 48px; gap: 10px; align-items: start; height: 52px; }
  body .logo, body .menu-button, body .sound-button { position: relative; inset: auto; }
  body .logo { width: min(184px,100%); }
  body .menu-button { display: grid; grid-column: 2; }
  body .sound-button { grid-column: 3; }
  body .nav-pill { position: absolute; top: 64px; left: 0; right: 0; display: none; height: auto; padding: 12px; border-radius: 24px; }
  body .nav-pill.is-open { display: grid; gap: 8px; }
  body .hero-nav-links { display: grid; grid-template-columns: 1fr; gap: 0; }
  body .nav-link { height: 48px; padding: 0 16px; justify-content: flex-start; font-size: 16px; }
  body .partner-link { width: 100%; height: 48px; margin: 0; }
}
@media (max-width:480px) {
  body .logo { padding: 8px 10px; gap: 7px; }
  .hero-house-mark { width: 27px; height: 27px; }
  .hero-wordmark { font-size: 12px; }
  .hero-wordmark small { font-size: 8px; }
  body .lede { max-width: 100%; font-size: 14px; }
  body .actions { gap: 16px; }
  body .primary-action { font-size: 14px; }
  body .text-action { font-size: 13px; }
  body #marylynes-sections .benefit-heading { font-size: 42px !important; }
  body #marylynes-sections .benefit-tab { padding: 24px !important; }
  body #marylynes-sections .benefit-tab span { font-size: 20px; }
  body #marylynes-sections .benefit-gift { right: 16px; top: 16px; padding: 10px 16px; }
  body #marylynes-sections .benefit-counter { left: 16px; bottom: 16px; }
  body .volunteer-form-content { padding: 48px 0 0; }
}
@media (max-height:500px) and (min-aspect-ratio:1/1) {
  body .brand { font-size: 16px; margin-bottom: 8px; }
  body .headline { font-size: clamp(28px,9dvh,40px); }
  body .lede { margin-top: 10px; font-size: 12px; max-width: 480px; }
  body .actions { margin-top: 12px; }
  body .nav-pill { max-height: calc(100dvh - 95px); overflow-y: auto; z-index: 20; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
