/*
==========================================================================
SPROUT FOUNDATION (legacy) · sprout-foundation.css
Moved here on 8 Nov 2026 from Ohio > Theme Settings > Custom CSS (original saved in
Sprout Backups/ohio-settings/ohio-custom-css-20261108.css and the server settings backup).
Loaded on every page by inc/sprout-assets.php.

Used by the pages built before the rebuild (.sprout-* classes, 19 pages on 8 Nov 2026).
New pages use sprout.css (.sp, --sp-*). As each page is rebuilt it stops needing this file;
delete the file when no page uses .sprout-* any more.

Aligned with sprout.css on 8 Nov 2026 (owner approved): light background #fffdf7, body text #55445e,
links #603075 / #3b1f49, buttons 10px corners, dark background #1b1220.
Section 8.5 styles Ohio's own header (#masthead): delete it when the Sprout header goes live.
==========================================================================
*/
/*Custom paddings for page headlines*/
.page-headline {
  
  	.holder {
      	padding-top: var(--clb-grid-gutter-2x);
    	padding-bottom: var(--clb-grid-gutter-3x);
  	}
}
.color-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: var(--clb-color-switcher-height);
  padding: 0;
  border-radius: 0.9rem;
  background-color: #3b1f49;
  box-shadow: 0 0 2px color-mix(in srgb, var(--clb-color-neutral) 10%, transparent) inset;
  font-size: 0.85em;
  font-weight: var(--clb-text-medium);
  cursor: var(--clb-cursor-pointer);
}

.color-switcher-item-state svg {
  fill: #70bf44;
}
/**
 * Sprout Life Skills — Universal Theme Foundation
 * Version: 1.1.0
 *
 * Install once at theme level (preferably in the Ohio child theme).
 * Page snippets should use the .sprout-* classes below and must not redeclare
 * colors, typography, resets, or dark-mode rules.
 *
 * The companion mode script sets <html data-sprout-mode="light|dark">.
 * Until the script is added, visitors using dark system preference are covered
 * by the final prefers-color-scheme fallback in this file.
 */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — LIGHT MODE
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand primitives. Use these for identity and decoration, not blindly as text. */
  --sprout-lime: #70bf44;
  --sprout-purple: #603075;
  --sprout-purple-deep: #3b1f49;
  --sprout-mustard: #fec124;
  --sprout-pink: #ee4a62;

  /* Semantic colors. Page code should use these variables. */
  --sprout-canvas: #fffdf7;
  --sprout-surface: #ffffff;
  --sprout-surface-soft: #f3f6ef;
  --sprout-surface-tint: #f7f5f8;
  --sprout-surface-strong: #e5f0df;
  --sprout-ink: #261d2c;
  --sprout-heading: #3b1f49;
  --sprout-text: #55445e;
  --sprout-text-muted: #625a67;
  --sprout-border: #ddd6e0;
  --sprout-border-strong: #c8bdcc;

  /* Accessible action colors for text links and controls. */
  --sprout-link: #603075;
  --sprout-link-hover: #3b1f49;
  --sprout-focus: #603075;
  --sprout-danger: #b7203a;
  --sprout-success: #376e22;

  --sprout-on-lime: #2b1835;
  --sprout-on-purple: #ffffff;
  --sprout-on-mustard: #2b1835;
  --sprout-on-pink: #ffffff;

  --sprout-gradient-soft:
    radial-gradient(circle at 8% 4%, rgb(112 191 68 / 12%), transparent 32%),
    radial-gradient(circle at 94% 14%, rgb(96 48 117 / 9%), transparent 36%),
    var(--sprout-canvas);
  --sprout-gradient-ink:
    radial-gradient(circle at 86% 8%, rgb(112 191 68 / 22%), transparent 34%),
    radial-gradient(circle at 9% 100%, rgb(238 74 98 / 16%), transparent 37%),
    linear-gradient(135deg, #21122a 0%, #3b1f49 56%, #1a1120 100%);
  --sprout-page-gradient:
    radial-gradient(circle at 7% 9%, rgb(112 191 68 / 11%), transparent 24%),
    radial-gradient(circle at 94% 43%, rgb(96 48 117 / 7.5%), transparent 29%),
    radial-gradient(circle at 12% 82%, rgb(254 193 36 / 7%), transparent 25%),
    linear-gradient(180deg, #fffdf7 0%, #faf6f9 48%, #fffdf7 100%);

  --sprout-shadow-sm: 0 6px 18px rgb(44 25 52 / 8%);
  --sprout-shadow-md: 0 18px 48px rgb(44 25 52 / 10%);
  --sprout-shadow-lg: 0 30px 80px rgb(31 16 40 / 15%);

  --sprout-radius-sm: 10px;
  --sprout-radius-md: 22px;
  --sprout-radius-lg: 30px;
  --sprout-radius-pill: 999px;

  --sprout-font-body: Arial, Helvetica, sans-serif;
  --sprout-font-display: "Roboto Slab", Georgia, serif;
  --sprout-page-max: 1280px;
  --sprout-content-max: 760px;
  --sprout-gutter: clamp(20px, 4.5vw, 64px);
  --sprout-section-space: clamp(72px, 10vw, 156px);
  --sprout-transition: 180ms ease;
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS — DARK MODE
   -------------------------------------------------------------------------- */

html[data-sprout-mode="dark"],
html.sprout-mode-dark,
body.dark-scheme {
  color-scheme: dark;

  --sprout-canvas: #1b1220;
  --sprout-surface: #21112b;
  --sprout-surface-soft: #281532;
  --sprout-surface-tint: #2d1838;
  --sprout-surface-strong: #35203f;
  --sprout-ink: #fbf8fc;
  --sprout-heading: #ffffff;
  --sprout-text: #f1ebf3;
  --sprout-text-muted: #d2c7d7;
  --sprout-border: #4d4054;
  --sprout-border-strong: #716176;

  --sprout-link: #a6dc84;
  --sprout-link-hover: #c2ecaa;
  --sprout-focus: #fec124;
  --sprout-danger: #ff9aa9;
  --sprout-success: #a6dc84;

  --sprout-gradient-soft:
    radial-gradient(circle at 8% 4%, rgb(112 191 68 / 16%), transparent 30%),
    radial-gradient(circle at 94% 14%, rgb(254 193 36 / 12%), transparent 34%),
    var(--sprout-canvas);
  --sprout-gradient-ink:
    radial-gradient(circle at 86% 8%, rgb(112 191 68 / 25%), transparent 34%),
    radial-gradient(circle at 9% 100%, rgb(238 74 98 / 20%), transparent 37%),
    linear-gradient(135deg, #130c18 0%, #352041 56%, #110b15 100%);
  --sprout-page-gradient:
    radial-gradient(circle at 7% 10%, rgb(112 191 68 / 7%), transparent 25%),
    radial-gradient(circle at 94% 42%, rgb(96 48 117 / 17%), transparent 32%),
    radial-gradient(circle at 13% 82%, rgb(254 193 36 / 4%), transparent 24%),
    #1b1220;

  --sprout-shadow-sm: 0 6px 18px rgb(0 0 0 / 20%);
  --sprout-shadow-md: 0 16px 42px rgb(0 0 0 / 28%);
  --sprout-shadow-lg: 0 28px 70px rgb(0 0 0 / 38%);
}

/* Ohio’s native color switcher adds/removes .dark-scheme on <body>. */
html:has(body.dark-scheme) { background: #1b1220; color-scheme: dark; }

/* Removed 8 Nov 2026 (owner): the site stays light by default and goes dark only through Ohio's switch,
   until every page is ready for dark mode. (A device-dark fallback block used to be here.) */

/* --------------------------------------------------------------------------
   3. LOW-RISK GLOBAL BASE
   -------------------------------------------------------------------------- */

html { background: var(--sprout-canvas); }

body {
  background: var(--sprout-canvas);
  color: var(--sprout-text);
  font-family: var(--sprout-font-body);
  text-rendering: optimizeLegibility;
}

:where(.sprout-page, .sprout-site) {
  color: var(--sprout-text);
  font-family: var(--sprout-font-body);
  font-size: 16px;
  line-height: 1.6;
}

:where(.sprout-page, .sprout-site) *,
:where(.sprout-page, .sprout-site) *::before,
:where(.sprout-page, .sprout-site) *::after { box-sizing: border-box; }

:where(.sprout-page, .sprout-site) img { display: block; max-width: 100%; height: auto; }

:where(.sprout-page, .sprout-site) a {
  color: var(--sprout-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

:where(.sprout-page, .sprout-site) a:hover { color: var(--sprout-link-hover); }

:where(.sprout-page, .sprout-site) ::selection {
  background: var(--sprout-mustard);
  color: var(--sprout-purple-deep);
}

:where(.sprout-page, .sprout-site) :focus-visible,
.sprout-mode-toggle:focus-visible {
  outline: 3px solid var(--sprout-focus);
  outline-offset: 4px;
}

.sprout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. PAGE FRAME, TYPE, AND LAYOUT
   -------------------------------------------------------------------------- */

.sprout-page { overflow: clip; background: var(--sprout-page-gradient); }

.sprout-shell {
  width: min(var(--sprout-page-max), calc(100% - (var(--sprout-gutter) * 2)));
  margin-inline: auto;
}

.sprout-shell--narrow { width: min(var(--sprout-content-max), calc(100% - (var(--sprout-gutter) * 2))); }

.sprout-section { padding-block: var(--sprout-section-space); }
.sprout-section--soft,
.sprout-section--surface,
.sprout-section--tint { background: transparent; }
.sprout-section--ink { background: var(--sprout-gradient-ink); color: #f9f5fa; }
.sprout-section--ink :is(h1, h2, h3, h4, h5, h6) { color: #ffffff; }
.sprout-section--ink :is(p, li, .sprout-lede) { color: #ebe2ee; }
.sprout-section--ink a:not(.sprout-button) { color: #c2ecaa; }

.sprout-display,
.sprout-title,
.sprout-heading {
  margin: 0;
  color: var(--sprout-heading);
  font-family: var(--sprout-font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.sprout-display { max-width: 14ch; font-size: clamp(2.35rem, 5.4vw, 5.25rem); }
.sprout-title { font-size: clamp(2rem, 3.8vw, 3.6rem); }
.sprout-heading { font-size: clamp(1.45rem, 2.35vw, 2.25rem); }

.sprout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  color: var(--sprout-success);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.sprout-eyebrow::before {
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  border-radius: var(--sprout-radius-pill);
  content: "";
}

.sprout-section--ink .sprout-eyebrow { color: var(--sprout-mustard); }

.sprout-lede {
  max-width: 63ch;
  margin: 1.25rem 0 0;
  color: var(--sprout-text-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.65;
}

.sprout-prose { max-width: 70ch; }
.sprout-prose > * + * { margin-top: 1rem; }
.sprout-prose :is(h2, h3, h4) { margin-top: 2rem; }
.sprout-prose :is(ul, ol) { padding-left: 1.25rem; }

.sprout-grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.sprout-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sprout-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sprout-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sprout-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.sprout-stack > * + * { margin-top: var(--sprout-stack-space, 1.15rem); }

/* --------------------------------------------------------------------------
   5. BUTTONS, TAGS, AND INTERACTIVE CONTROLS
   -------------------------------------------------------------------------- */

.sprout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 1.7rem; }

.sprout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--sprout-radius-sm);
  background: var(--sprout-lime);
  color: var(--sprout-on-lime);
  cursor: pointer;
  font: 700 0.9rem/1.2 var(--sprout-font-body);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--sprout-transition), border-color var(--sprout-transition), color var(--sprout-transition), transform var(--sprout-transition), box-shadow var(--sprout-transition);
}

.sprout-button:hover,
.sprout-button:focus-visible {
  background: #8bd060;
  color: var(--sprout-on-lime);
  box-shadow: var(--sprout-shadow-sm);
  transform: translateY(-2px);
}

/* Add the arrow as the button's final span: <span aria-hidden="true">↗</span>.
   The micro-interaction is CSS-driven so it remains instant and dependable
   even when the larger motion library is unavailable. */
.sprout-button > span:last-child,
.sprout-link-arrow > span:last-child {
  display: inline-block;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sprout-button:is(:hover, :focus-visible) > span:last-child,
.sprout-link-arrow:is(:hover, :focus-visible) > span:last-child {
  transform: translate3d(5px, -2px, 0);
}

.sprout-button--purple { background: var(--sprout-purple); color: var(--sprout-on-purple); }
.sprout-button--purple:hover,
.sprout-button--purple:focus-visible { background: var(--sprout-purple-deep); color: var(--sprout-on-purple); }

.sprout-section--ink .sprout-button--purple { background: var(--sprout-lime); color: var(--sprout-on-lime); }
.sprout-section--ink .sprout-button--purple:hover,
.sprout-section--ink .sprout-button--purple:focus-visible { background: var(--sprout-mustard); color: var(--sprout-on-mustard); }

.sprout-button--mustard { background: var(--sprout-mustard); color: var(--sprout-on-mustard); }
.sprout-button--mustard:hover,
.sprout-button--mustard:focus-visible { background: #ffcf4a; color: var(--sprout-on-mustard); }

.sprout-button--outline {
  border-color: var(--sprout-border-strong);
  background: transparent;
  color: var(--sprout-heading);
}

.sprout-button--outline:hover,
.sprout-button--outline:focus-visible {
  border-color: var(--sprout-purple);
  background: var(--sprout-surface-tint);
  color: var(--sprout-heading);
}

.sprout-section--ink .sprout-button--outline { border-color: rgb(255 255 255 / 42%); color: #ffffff; }
.sprout-section--ink .sprout-button--outline:hover,
.sprout-section--ink .sprout-button--outline:focus-visible { border-color: var(--sprout-lime); background: rgb(255 255 255 / 10%); color: #ffffff; }

.sprout-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--sprout-border);
  border-radius: var(--sprout-radius-pill);
  background: var(--sprout-surface);
  color: var(--sprout-heading);
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.2;
}

.sprout-tag--lime { border-color: transparent; background: color-mix(in srgb, var(--sprout-lime) 22%, var(--sprout-surface)); color: var(--sprout-heading); }
.sprout-tag--mustard { border-color: transparent; background: color-mix(in srgb, var(--sprout-mustard) 27%, var(--sprout-surface)); color: var(--sprout-heading); }

/* --------------------------------------------------------------------------
   6. SURFACES, CONTENT CARDS, STATS, AND QUOTES
   -------------------------------------------------------------------------- */

.sprout-card {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--sprout-border);
  border-radius: var(--sprout-radius-md);
  background: var(--sprout-surface);
  color: var(--sprout-text);
}

.sprout-card--soft { background: var(--sprout-surface-soft); }
.sprout-card--tint { background: var(--sprout-surface-tint); }
.sprout-card--raised { box-shadow: var(--sprout-shadow-md); }
.sprout-card--dark { border-color: rgb(255 255 255 / 13%); background: #24172d; color: #eee7f0; }
.sprout-card--dark :is(h2, h3, h4) { color: #ffffff; }
.sprout-card--dark p { color: #dfd4e2; }

.sprout-card-title {
  margin: 0;
  color: var(--sprout-heading);
  font-family: var(--sprout-font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}

.sprout-card-title + * { margin-top: 0.75rem; }
.sprout-card p:last-child { margin-bottom: 0; }

.sprout-card {
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease, border-color 240ms ease, box-shadow 380ms ease;
}

html[data-sprout-mode="dark"] .sprout-card:hover,
html.sprout-mode-dark .sprout-card:hover,
body.dark-scheme .sprout-card:hover {
  border-color: rgb(166 220 132 / 42%);
  background: #2a2031;
  box-shadow: 0 22px 50px rgb(0 0 0 / 24%);
  transform: translateY(-5px);
}

.sprout-link-label { position: relative; display: inline-block; padding-bottom: 0.3rem; }
.sprout-link-label::after {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transition: right 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
a:is(:hover, :focus-visible) .sprout-link-label::after { right: 0; }

.sprout-icon-tile {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sprout-lime) 22%, var(--sprout-surface));
  color: var(--sprout-purple-deep);
}

.sprout-icon-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.sprout-stat { min-width: 0; padding: 0.5rem 0; }
.sprout-stat-value { display: block; color: var(--sprout-heading); font-family: var(--sprout-font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.sprout-stat-label { display: block; margin-top: 0.55rem; color: var(--sprout-text-muted); font-size: 0.86rem; font-weight: 700; line-height: 1.4; }
.sprout-section--ink .sprout-stat-value { color: var(--sprout-lime); }
.sprout-section--ink .sprout-stat-label { color: #e6dce9; }

.sprout-quote {
  position: relative;
  margin: 0;
  padding: clamp(24px, 3vw, 38px);
  border-left: 4px solid var(--sprout-lime);
  border-radius: 0 var(--sprout-radius-md) var(--sprout-radius-md) 0;
  background: var(--sprout-surface-soft);
}

.sprout-quote p { margin: 0; color: var(--sprout-heading); font-family: var(--sprout-font-display); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.45; }
.sprout-quote figcaption { margin-top: 1rem; color: var(--sprout-text-muted); font-size: 0.88rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   7. LISTS, FAQS, AND FORMS
   -------------------------------------------------------------------------- */

.sprout-checklist { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.sprout-checklist li { position: relative; padding-left: 1.85rem; }
.sprout-checklist li::before { position: absolute; top: 0.25em; left: 0; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sprout-lime); color: var(--sprout-on-lime); content: "✓"; font-size: 0.7rem; font-weight: 800; line-height: 1rem; text-align: center; }

.sprout-faq { border-top: 1px solid var(--sprout-border); }
.sprout-faq details { border-bottom: 1px solid var(--sprout-border); }
.sprout-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; color: var(--sprout-heading); cursor: pointer; font-family: var(--sprout-font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.35; list-style: none; }
.sprout-faq summary::-webkit-details-marker { display: none; }
.sprout-faq summary::after { flex: 0 0 auto; color: var(--sprout-link); content: "+"; font-family: Arial, Helvetica, sans-serif; font-size: 1.55rem; font-weight: 400; line-height: 1; }
.sprout-faq details[open] summary::after { content: "−"; }
.sprout-faq-answer { max-width: 70ch; padding: 0 2rem 1.25rem 0; color: var(--sprout-text-muted); }
.sprout-faq-answer > :first-child { margin-top: 0; }
.sprout-faq-answer > :last-child { margin-bottom: 0; }

.sprout-form { display: grid; gap: 1rem; }
.sprout-form label { color: var(--sprout-heading); font-size: 0.88rem; font-weight: 700; }
.sprout-form :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 0.74rem 0.85rem; border: 1px solid var(--sprout-border-strong); border-radius: var(--sprout-radius-sm); background: var(--sprout-surface); color: var(--sprout-text); font: inherit; line-height: 1.35; transition: border-color var(--sprout-transition), box-shadow var(--sprout-transition), background-color var(--sprout-transition); }
.sprout-form textarea { min-height: 130px; resize: vertical; }
.sprout-form :is(input, select, textarea)::placeholder { color: var(--sprout-text-muted); opacity: 1; }
.sprout-form :is(input, select, textarea):focus { border-color: var(--sprout-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sprout-focus) 20%, transparent); outline: 0; }

/* --------------------------------------------------------------------------
   8. MODE TOGGLE — PLACE THIS BUTTON IN THE GLOBAL HEADER
   -------------------------------------------------------------------------- */

.sprout-mode-toggle {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--sprout-border-strong);
  border-radius: 50%;
  background: var(--sprout-surface);
  color: var(--sprout-heading);
  cursor: pointer;
  transition: border-color var(--sprout-transition), background-color var(--sprout-transition), color var(--sprout-transition), transform var(--sprout-transition);
}

.sprout-mode-toggle:hover { border-color: var(--sprout-lime); background: var(--sprout-surface-soft); transform: translateY(-1px); }
.sprout-mode-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sprout-mode-toggle .sprout-icon-moon { display: none; }
html[data-sprout-mode="dark"] .sprout-mode-toggle .sprout-icon-sun,
html.sprout-mode-dark .sprout-mode-toggle .sprout-icon-sun,
body.dark-scheme .sprout-mode-toggle .sprout-icon-sun { display: none; }
html[data-sprout-mode="dark"] .sprout-mode-toggle .sprout-icon-moon,
html.sprout-mode-dark .sprout-mode-toggle .sprout-icon-moon,
body.dark-scheme .sprout-mode-toggle .sprout-icon-moon { display: block; }

/* --------------------------------------------------------------------------
   8.5 OHIO THEME CHROME — HEADER, MENU, SEARCH, SWITCHER, AND SCROLL RAIL
   These controls live outside .sprout-page, so they must be styled globally.
   -------------------------------------------------------------------------- */

#masthead.header {
  z-index: 10000;
  overflow: visible;
  border-bottom: 1px solid rgb(59 31 73 / 10%);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 10px 34px rgb(44 25 52 / 6%);
  backdrop-filter: blur(16px);
  isolation: isolate;
}

#masthead :is(.header-wrap, .header-wrap-inner, .left-part, .right-part, #site-navigation, #mega-menu-wrap) { overflow: visible; }
#masthead .header-wrap { z-index: 10001; }
#masthead #site-navigation { z-index: 10002; }
#masthead .nav-item.has-submenu { z-index: 10003; }
#masthead .menu-depth-1.sub-menu {
  z-index: 10004;
  border: 1px solid rgb(59 31 73 / 12%);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgb(44 25 52 / 16%);
}

body:not(.dark-scheme) #masthead :is(.main-menu-link, .sub-menu-link, .hamburger-button) { color: #3b1f49; }
#masthead :is(.main-menu-link, .sub-menu-link) { transition: color var(--sprout-transition); }
#masthead :is(.main-menu-link, .sub-menu-link):is(:hover, :focus-visible),
#masthead .nav-item.current-menu-item > .menu-link { color: #437a2a; }

#masthead .hamburger.icon-button,
button.search-global.icon-button {
  border: 1px solid rgb(59 31 73 / 12%);
  background: #f7f5f8;
  color: #3b1f49;
  box-shadow: 0 8px 24px rgb(44 25 52 / 7%);
  transition: color var(--sprout-transition), background-color var(--sprout-transition), border-color var(--sprout-transition), transform var(--sprout-transition);
}

#masthead .hamburger-button:is(:hover, :focus-visible) .hamburger.icon-button,
button.search-global.icon-button:is(:hover, :focus-visible) {
  border-color: #70bf44;
  background: #eef8e8;
  color: #315d1d;
  transform: translateY(-2px);
}

#masthead .hamburger .icon,
#masthead .hamburger .icon::before,
#masthead .hamburger .icon::after { background-color: currentColor; }

#masthead a.button.btn-optional { border-color: transparent; background: #70bf44; color: #2b1835; }
#masthead a.button.btn-optional:is(:hover, :focus-visible) { background: #fec124; color: #2b1835; }

.elements-bar.left { z-index: 9000; }
.elements-bar.left :is(.scroll-top, .color-switcher) { color: #3b1f49; }
.elements-bar.left .scroll-top-bar { background: rgb(59 31 73 / 16%); }
.elements-bar.left .scroll-track { background: #70bf44; }
.elements-bar.left .color-switcher {
  border: 1px solid rgb(59 31 73 / 14%);
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 8px 24px rgb(44 25 52 / 10%);
  backdrop-filter: blur(12px);
}
.elements-bar.left .color-switcher-toddler { background: #f3f6ef; color: #3b1f49; }
.elements-bar.left .color-switcher svg { fill: currentColor; }

body.dark-scheme #masthead.header {
  border-bottom-color: rgb(255 255 255 / 12%);
  background: rgb(27 18 32 / 94%);
  box-shadow: 0 14px 40px rgb(0 0 0 / 24%);
}
body.dark-scheme #masthead .menu-depth-1.sub-menu {
  border-color: rgb(255 255 255 / 14%);
  background: #21112b;
  box-shadow: 0 26px 70px rgb(0 0 0 / 38%);
}
body.dark-scheme #masthead :is(.main-menu-link, .sub-menu-link, .hamburger-button) { color: #f6f0f8; }
body.dark-scheme #masthead :is(.main-menu-link, .sub-menu-link):is(:hover, :focus-visible),
body.dark-scheme #masthead .nav-item.current-menu-item > .menu-link { color: #a6dc84; }

body.dark-scheme #masthead .hamburger.icon-button,
body.dark-scheme button.search-global.icon-button {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 8%);
  color: #a6dc84;
  box-shadow: none;
}
body.dark-scheme #masthead .hamburger-button:is(:hover, :focus-visible) .hamburger.icon-button,
body.dark-scheme button.search-global.icon-button:is(:hover, :focus-visible) {
  border-color: #fec124;
  background: rgb(254 193 36 / 12%);
  color: #fec124;
}

body.dark-scheme .elements-bar.left :is(.scroll-top, .color-switcher) { color: #f6f0f8; }
body.dark-scheme .elements-bar.left .scroll-top-bar { background: rgb(255 255 255 / 20%); }
body.dark-scheme .elements-bar.left .color-switcher {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(27 18 32 / 88%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
}
body.dark-scheme .elements-bar.left .color-switcher-toddler { background: #2d1838; color: #a6dc84; }

@media (max-width: 768px) {
  #masthead.header { z-index: 10000; }
  #masthead .slide-in-overlay.menu-slide-in-overlay { z-index: 10005; }
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE AND MOTION SAFEGUARDS
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .sprout-grid--3,
  .sprout-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sprout-grid--2,
  .sprout-grid--3,
  .sprout-grid--4 { grid-template-columns: 1fr; }
  .sprout-actions .sprout-button { width: 100%; }
  .sprout-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}