@import url("components.css");
@import url("responsive.css");
@import url("home-slider.css");
@import url("team-carousel.css");

/* Clean heading placement without eyebrow/tagline labels site-wide */
.eyebrow,
.work-eyebrow,
.work-program-label,
.about-eyebrow,
.about-eyebrow-light,
.about-eyebrow-dark,
.about-card-label,
.about-initiative-label,
.career-eyebrow,
.career-eyebrow-light,
.career-opportunity-label,
.contact-eyebrow,
.contact-eyebrow-light,
.contact-card-label,
.pub-eyebrow,
.news-eyebrow,
.journey-eyebrow {
  display: none !important;
}

/* ==========================================================================
   HOL Foundation Brand Color Palette Architecture
   Green (#5EB93C): Primary brand color
   Yellow (#FAB831): CTA/action color, buttons, highlights
   Blue (#173667): Headings, dark anchor sections, banner overlays
   Gray (#535353): Secondary text, descriptions, subtle UI elements
   Pink (#D91B5C): Subtle accent for special categories and energy details
   ========================================================================== */

:root {
  --brand-green: #5EB93C;
  --brand-yellow: #FAB831;
  --brand-yellow-hover: #fbc756;
  --brand-blue: #173667;
  --brand-blue-deep: #102340;
  --brand-gray: #535353;
  --brand-pink: #D91B5C;
}

/* 1. Complete removal of unwanted global grey/translucent overlays and photo filters */
.home-donation-particles {
  display: none !important;
}
.about-photo-main:after {
  display: none !important;
}
.about-photo-secondary > img {
  filter: none !important;
}
.impact-photo-main:after {
  display: none !important;
}
.hero-photo,
.program-card img,
.story-panel img,
.founder img,
.work-feature-media img,
.home-story-media img {
  filter: none !important;
}

/* 2. Cohesive CTA button system with smooth lighter yellow hover */
.button,
.button.gold,
.footer-donate-button,
.cta-donate-button,
.mobile-donate-btn,
.donate-continue,
.cause-option.is-selected {
  background: #FAB831 !important;
  border-color: #FAB831 !important;
  color: #173667 !important;
  transition: all 0.25s ease !important;
}

.button:hover,
.button.gold:hover,
.footer-donate-button:hover,
.cta-donate-button:hover,
.mobile-donate-btn:hover,
.donate-continue:hover {
  background: #fbc756 !important;
  border-color: #fbc756 !important;
  color: #173667 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(250, 184, 49, 0.4) !important;
}

.button.outline {
  background: transparent !important;
  border-color: #173667 !important;
  color: #173667 !important;
}

.button.outline:hover {
  background: #173667 !important;
  color: #ffffff !important;
}

.hero-slide .button.outline {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}

.hero-slide .button.outline:hover {
  background: #ffffff !important;
  color: #173667 !important;
}

/* 3. Primary brand identity: Green #5EB93C */
.brand-mark {
  background: #5EB93C !important;
  color: #ffffff !important;
}
.main-navigation a:hover,
.main-navigation a[aria-current="page"] {
  color: #5EB93C !important;
}
.stat strong,
.counter-suffix,
.metric-plus,
.work-item-arrow,
.work-program-arrow {
  color: #5EB93C !important;
}

/* 4. Headings & Dark Anchors: Blue #173667 */
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.section-title,
.section-title em,
.values-title,
.values-title em,
.values-title span,
.strive-highlight,
.impact-title,
.founder-heading,
.founder-name,
.our-purpose-heading,
.about-story-copy .section-title,
.work-heading .section-title,
.leaders-heading .section-title,
.difference-intro .section-title {
  color: #173667 !important;
}

.hero-slide h1,
.cta-band h2,
.cta-band .section-title,
.site-footer h2,
.site-footer h3,
.journey-section h2,
.journey-promise h2,
.work-feature-copy h3,
.work-outcome h2,
.work-outcome-copy h2,
.partners-showcase h2,
.partners-showcase .section-title,
.partners-showcase-heading h2,
.partners-showcase-heading .section-title,
.about-founder h2,
.about-founder-copy h2,
.about-vision-card h3,
.career-application-intro h2,
.page-hero h1,
.story-panel h2,
.story-panel h3 {
  color: #ffffff !important;
}

/* Light card titles stay rich dark blue */
.home-story-title,
.home-stories-section .home-story-title {
  color: #173667 !important;
}

/* Sophisticated dark blue banner overlays */
.hero-overlay {
  background: linear-gradient(90deg, rgba(23, 54, 103, 0.78) 0%, rgba(23, 54, 103, 0.46) 45%, rgba(23, 54, 103, 0.05) 82%) !important;
}
.hero-slide.align-right .hero-overlay {
  background: linear-gradient(90deg, rgba(23, 54, 103, 0.05) 12%, rgba(23, 54, 103, 0.46) 50%, rgba(23, 54, 103, 0.82) 100%) !important;
}

/* ==========================================================================
   Footer: Clean White Theme with Brand Typography & Contrast
   ========================================================================== */
.site-footer {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 42px 0 14px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1F2937 !important;
  border-top: 4px solid #FAB831 !important; /* Yellow top border matching brand theme */
}

.site-footer:before {
  display: none !important;
}

.site-footer:after {
  display: none !important;
}

.site-footer > .container {
  position: relative !important;
  z-index: 2 !important;
}

.site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.3fr) minmax(220px, 1.2fr) minmax(160px, 0.9fr) !important;
  gap: 28px 42px !important;
  padding: 0 0 24px !important;
  align-items: start !important;
}

.site-footer .footer-identity {
  max-width: 290px !important;
}

.site-footer .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
}

.site-footer .footer-brand img {
  display: block !important;
  width: 96px !important;
  height: auto !important;
  max-height: 110px !important;
  filter: none !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.site-footer .footer-identity > p {
  max-width: 260px !important;
  margin: 0 !important;
  color: #4B5563 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.site-footer .footer-place {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 12px !important;
  padding: 4px 11px 4px 9px !important;
  border-radius: 999px !important;
  background: #F3F8F1 !important;
  border: 1px solid #D1E7CA !important;
  color: #1E5C1B !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.site-footer .footer-place i {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #5EB93C !important;
  box-shadow: none !important;
}

.site-footer .footer-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 18px !important;
}

.site-footer .footer-socials a {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border: 1px solid #E1E8DF !important;
  border-radius: 50% !important;
  background: #F7FAF5 !important;
  color: #173667 !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}

.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus-visible {
  transform: translateY(-2px) !important;
  border-color: #5EB93C !important;
  background: #5EB93C !important;
  color: #ffffff !important;
}

.site-footer .footer-socials svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

.site-footer .footer-socials a:nth-child(2) svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.site-footer .footer-socials a:nth-child(2) .footer-social-dot {
  fill: currentColor !important;
  stroke: none !important;
}

.site-footer .footer-column h3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  color: #173667 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.site-footer .footer-column h3:before {
  content: "" !important;
  display: inline-block !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #5EB93C !important;
}

.site-footer .footer-contact address {
  margin: 0 0 10px !important;
  color: #4B5563 !important;
  font-size: 13px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

.site-footer .footer-contact-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: #F9FAFB !important;
  border: 1px solid #E5E7EB !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}

.site-footer .footer-contact-link:hover {
  background: #F0FDF4 !important;
  border-color: #86EFAC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(94, 185, 60, 0.08) !important;
}

.site-footer .footer-contact-link > i {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: rgba(94, 185, 60, 0.12) !important;
  border: 1px solid rgba(94, 185, 60, 0.25) !important;
  color: #2E7D1C !important;
  font-size: 13px !important;
  font-style: normal !important;
  transition: all 0.2s ease !important;
}

.site-footer .footer-contact-link:hover > i {
  background: #5EB93C !important;
  color: #ffffff !important;
  border-color: #5EB93C !important;
}

.site-footer .footer-contact-link small {
  display: block !important;
  margin-bottom: 2px !important;
  color: #6B7280 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.site-footer .footer-contact-link strong {
  display: block !important;
  color: #173667 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
}

.site-footer .footer-contact-link:hover strong {
  color: #5EB93C !important;
}

.site-footer .footer-links {
  display: grid !important;
  gap: 8px !important;
}

.site-footer .footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.site-footer .footer-links a:hover {
  color: #5EB93C !important;
  font-weight: 600 !important;
  transform: translateX(3px) !important;
}

.site-footer .footer-bottom {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 42px !important;
  padding: 12px 0 8px !important;
  border-top: 1px solid #E5E7EB !important;
}

.site-footer .copyright {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #6B7280 !important;
  font-size: 12px !important;
}

.site-footer .footer-credit {
  justify-self: center !important;
  text-align: center !important;
  color: #6B7280 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.site-footer .footer-credit a {
  color: #173667 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.site-footer .footer-credit a:hover,
.site-footer .footer-credit a:focus-visible {
  color: #5EB93C !important;
  text-decoration: underline !important;
}

.site-footer .footer-bottom-note {
  display: inline-flex !important;
  justify-self: center !important;
  align-items: center !important;
  gap: 7px !important;
  color: #6B7280 !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.site-footer .footer-bottom-note i {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #5EB93C !important;
  box-shadow: none !important;
}

.site-footer .footer-home-link {
  display: inline-flex !important;
  justify-self: end !important;
  align-items: center !important;
  gap: 5px !important;
  color: #173667 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.site-footer .footer-home-link:hover {
  color: #5EB93C !important;
  transform: translateX(2px) !important;
}

@media (max-width: 860px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    padding-bottom: 20px !important;
  }
  .site-footer .footer-identity {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding: 24px 0 10px !important;
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .site-footer .footer-bottom {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  .site-footer .footer-bottom > * {
    justify-self: center !important;
    text-align: center !important;
  }
  .site-footer .footer-credit {
    grid-column: auto !important;
  }
}

/* ==========================================================================
   Before & After Adoption Labels
   ========================================================================== */
.campus-adoption-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  position: absolute !important;
  z-index: 5 !important;
  bottom: 16px !important;
  left: 16px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin: 0 !important;
}

.campus-adoption-label.label-before {
  border-left: 4px solid #FAB831 !important;
}

.campus-adoption-label.label-after {
  border-left: 4px solid #5EB93C !important;
}

@media (max-width: 600px) {
  .campus-adoption-label {
    bottom: 12px !important;
    left: 12px !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Hero Slider: Hide all navigation arrows, dots, and pause controls
   ========================================================================== */
.hero-controls,
.hero-dots,
[data-slide-prev],
[data-slide-next],
[data-slide-toggle] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Universal Header & Navigation Consistency Across All Pages
   ========================================================================== */

/* Site header positioning & containment reset so fixed children are viewport-relative */
.site-header {
  position: relative !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

body:has(.home-page-main) .site-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header .header-inner {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

/* Main navigation in header is hidden so floating Menu button is the universal menu */
.site-header .main-navigation {
  display: none !important;
}

/* Keep the existing Donate Now button visible and correctly styled on all pages */
.site-header .header-inner > .button.gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1px solid #FAB831 !important;
  border-radius: 999px !important;
  background: #FAB831 !important;
  color: #173667 !important;
  box-shadow: 0 6px 20px rgba(250, 184, 49, 0.35) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.site-header .header-inner > .button.gold:hover {
  background: #fbc756 !important;
  border-color: #fbc756 !important;
  color: #173667 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(250, 184, 49, 0.45) !important;
}

@media (max-width: 820px) {
  .site-header .header-inner > .button.gold {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 420px) {
  .site-header .header-inner > .button.gold {
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
}

/* Floating Menu Button - Identical on Homepage and All Other Pages */
.site-header .menu-toggle,
button.menu-toggle {
  position: fixed !important;
  left: 50% !important;
  bottom: 25px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 12px !important;
  min-height: 58px !important;
  padding: 7px 8px 7px 20px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 999px !important;
  background: #f7f4eb !important;
  color: #173667 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.site-header .menu-toggle:hover,
button.menu-toggle:hover {
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important;
}

.site-header .menu-toggle:before,
button.menu-toggle:before {
  content: "Menu" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #173667 !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
}

.site-header .menu-toggle:after,
button.menu-toggle:after {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background-color: #173667 !important;
  background-image: linear-gradient(#f7f4eb, #f7f4eb), linear-gradient(#f7f4eb, #f7f4eb), linear-gradient(#f7f4eb, #f7f4eb) !important;
  background-repeat: no-repeat !important;
  background-size: 15px 2px, 15px 2px, 15px 2px !important;
  background-position: center 13px, center 19px, center 25px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.site-header .menu-toggle[aria-expanded="true"]:before,
button.menu-toggle[aria-expanded="true"]:before {
  content: "Close" !important;
}

.site-header .menu-toggle[aria-expanded="true"]:after,
button.menu-toggle[aria-expanded="true"]:after {
  background-color: #5EB93C !important;
  background-image: linear-gradient(45deg, transparent 44%, #173667 45%, #173667 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #173667 45%, #173667 55%, transparent 56%) !important;
  background-size: 17px 17px, 17px 17px !important;
  background-position: center, center !important;
}

.site-header .menu-toggle:focus-visible,
button.menu-toggle:focus-visible {
  outline: 3px solid #5EB93C !important;
  outline-offset: 4px !important;
}

body.footer-in-view .site-header .menu-toggle {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  .site-header .menu-toggle,
  button.menu-toggle {
    bottom: 17px !important;
    min-height: 52px !important;
    padding: 6px 7px 6px 17px !important;
  }
  .site-header .menu-toggle:before,
  button.menu-toggle:before {
    font-size: 13px !important;
  }
  .site-header .menu-toggle:after,
  button.menu-toggle:after {
    width: 38px !important;
    height: 38px !important;
    background-size: 14px 2px, 14px 2px, 14px 2px !important;
    background-position: center 12px, center 18px, center 24px !important;
  }
}

/* Floating Navigation Modal System - Consistent Across All Pages */
.site-header .mobile-panel,
nav.mobile-panel {
  display: none !important;
}

.site-header .mobile-panel.open,
nav.mobile-panel.open {
  position: fixed !important;
  left: 50% !important;
  bottom: 94px !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(450px, calc(100vw - 28px)) !important;
  max-height: min(78vh, 580px) !important;
  overflow-y: auto !important;
  transform: translateX(-50%) !important;
  padding: 20px 18px 18px !important;
  border: 1px solid #dbe4d5 !important;
  border-radius: 26px !important;
  background: rgba(250, 249, 244, 0.98) !important;
  box-shadow: 0 24px 60px rgba(12, 34, 24, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

@media (max-width: 820px) {
  .site-header .mobile-panel.open,
  nav.mobile-panel.open {
    bottom: 81px !important;
  }
}

/* 5. Supporting text on light backgrounds: Gray #535353 */
p,
.section p,
.about-story-lead,
.about-story-detail,
.work-item-description,
.values-summary,
.founder-quote,
.stat span {
  color: #535353;
}

/* 6. Subtle Pink #D91B5C Accent Moments */
.badge-pink,
.pink-accent,
.contact-channel-badge.pink {
  background: rgba(217, 27, 92, 0.12) !important;
  color: #D91B5C !important;
  border-color: rgba(217, 27, 92, 0.3) !important;
}

/* ==========================================================================
   High-Contrast Legibility System on Dark Backgrounds
   Strict Rule: No #535353 gray on dark blue or dark green backgrounds.
   All body text must be white or soft off-white with strong readability.
   Main headings on dark backgrounds must be pure white.
   Links and small accents use #5EB93C or #FAB831.
   ========================================================================== */

/* 1. Partners Showcase Section ("Progress, built together.") */
.partners-showcase,
.section.partners-showcase {
  background: #173667 !important;
  color: #f0f6fa !important;
}

.partners-showcase h2,
.partners-showcase .section-title,
.partners-showcase-heading h2,
.partners-showcase-heading .section-title {
  color: #ffffff !important;
}

.partners-showcase p,
.partners-showcase-heading p,
.partners-showcase-heading > p,
.section.partners-showcase p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

.partners-showcase-footer {
  color: rgba(255, 255, 255, 0.85) !important;
}

.partners-showcase-footer > span {
  background: #5EB93C !important;
}

/* Partner Logo Continuous Automatic Slider ("Progress, built together.") */
.partner-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 20px 0 16px;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.partner-slider-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: partner-logo-slide 22s linear infinite;
}

.partner-slider:hover .partner-slider-track {
  animation-play-state: paused;
}

.partner-logo-group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
  flex-shrink: 0;
}

.partner-slider .partner-logo-card {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 130px !important;
  min-height: 130px !important;
  flex: 0 0 200px !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #fbfaf5 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  padding: 16px 22px !important;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.partner-slider .partner-logo-card:after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #5EB93C;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.partner-slider .partner-logo-card:hover {
  z-index: 2;
  border-color: rgba(94, 185, 60, 0.8) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-4px);
}

.partner-slider .partner-logo-card:hover:after {
  transform: scaleX(1);
}

.partner-slider .partner-logo-card img {
  display: block;
  width: auto;
  max-width: 82%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.partner-slider .partner-logo-card:hover img {
  transform: scale(1.05);
}

@keyframes partner-logo-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .partner-slider .partner-logo-card {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    height: 110px !important;
    min-height: 110px !important;
    flex: 0 0 165px !important;
    padding: 12px 18px !important;
  }
  .partner-slider .partner-logo-card img {
    max-height: 60px;
  }
  .partner-logo-group {
    gap: 12px;
    padding: 0 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-slider-track {
    animation: none;
    overflow-x: auto;
  }
}

/* 2. Hero Overlays and Slides */
.hero,
.hero-slider,
.hero-slide {
  color: #ffffff !important;
}

.hero h1,
.hero-slide h1,
.hero-inner h1 {
  color: #ffffff !important;
}

.hero p,
.hero-slide p,
.hero-inner p {
  color: rgba(255, 255, 255, 0.94) !important;
}

/* 3. CTA Band & Donation Calls */
.cta-band,
.cta-band.cta-donate {
  background-color: #173667 !important;
  color: #ffffff !important;
}

.cta-band h2,
.cta-band .section-title,
.cta-donate-copy h2 {
  color: #ffffff !important;
}

.cta-band p,
.cta-donate-copy p,
.cta-donate-copy > p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.cta-donate-kicker {
  color: #FAB831 !important;
}

.cta-donate-proof {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 4. Page Heroes on Inner Pages */
.page-hero {
  background: #173667 !important;
  color: #ffffff !important;
}

.page-hero h1 {
  color: #ffffff !important;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* 5. Work Outcome Section (Our Work Page) */
.work-outcome,
.work-outcome-copy {
  background: #173667 !important;
  color: #ffffff !important;
}

.work-outcome h2,
.work-outcome-copy h2 {
  color: #ffffff !important;
}

.work-outcome p,
.work-outcome-description,
.work-outcome-copy p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.work-outcome-number {
  color: #FAB831 !important;
}

.work-outcome-copy > a {
  color: #FAB831 !important;
}

.work-outcome-copy > a span {
  color: #5EB93C !important;
}

/* 6. Journey Promise Section (Our Journey Page) */
.journey-promise,
.journey-promise-copy {
  background: #173667 !important;
  color: #ffffff !important;
}

.journey-promise h2,
.journey-promise-copy h2 {
  color: #ffffff !important;
}

.journey-promise p,
.journey-promise-copy p,
.journey-promise-copy > p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* 7. About Founder Dark Section (About Us Page) */
.about-founder,
.about-founder-copy {
  background: #173667 !important;
  color: #ffffff !important;
}

.about-founder h2,
.about-founder-copy h2,
.about-founder-identity h2 {
  color: #ffffff !important;
}

.about-founder p,
.about-founder-copy p,
.about-founder-bio p,
.about-founder-identity p,
.about-founder-identity > p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.about-founder-copy .about-founder-lead {
  color: #ffffff !important;
}

.about-founder-quote strong {
  color: #ffffff !important;
}

.about-founder-quote > span {
  color: #5EB93C !important;
}

.about-founder-note strong {
  color: #ffffff !important;
}

.about-founder-role,
.about-founder-note span {
  color: #FAB831 !important;
}

/* 8. Vision Card on About Page */
.about-vision-card {
  background: #173667 !important;
  color: #ffffff !important;
}

.about-vision-card h3 {
  color: #ffffff !important;
}

.about-vision-card p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* 9. Career Application Intro on Careers Page */
.career-application-layout,
.career-application-intro {
  background: #173667 !important;
  color: #ffffff !important;
}

.career-application-intro h2 {
  color: #ffffff !important;
}

.career-application-intro p,
.career-application-intro > p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.career-contact-email {
  color: #FAB831 !important;
}

.career-intro-location {
  color: rgba(255, 255, 255, 0.8) !important;
}

.career-intro-location i {
  background: #FAB831 !important;
}

/* 10. STRIVE Value Cards: Equal Normal Size by Default & Smooth Hover Enlargement */
.values-section.strive-redesign .strive-path {
  grid-template-columns: var(--strive-grid-columns, repeat(6, minmax(0, 1fr))) !important;
  transition: grid-template-columns 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

@media (min-width: 1121px) {
  .values-section.strive-redesign .strive-path:has(.value-strength:hover) {
    --strive-grid-columns: minmax(0, 2.1fr) repeat(5, minmax(0, 1fr)) !important;
  }
  .values-section.strive-redesign .strive-path:has(.value-tenacity:hover) {
    --strive-grid-columns: minmax(0, 1fr) minmax(0, 2.1fr) repeat(4, minmax(0, 1fr)) !important;
  }
  .values-section.strive-redesign .strive-path:has(.value-respect:hover) {
    --strive-grid-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)) !important;
  }
  .values-section.strive-redesign .strive-path:has(.value-integrity:hover) {
    --strive-grid-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.1fr) repeat(2, minmax(0, 1fr)) !important;
  }
  .values-section.strive-redesign .strive-path:has(.value-vision:hover) {
    --strive-grid-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.1fr) minmax(0, 1fr) !important;
  }
  .values-section.strive-redesign .strive-path:has(.value-empathy:hover) {
    --strive-grid-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2.1fr) !important;
  }
}

.values-section.strive-redesign .value-select {
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.65s ease,
              box-shadow 0.65s ease,
              background 0.65s ease !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-select,
.values-section.strive-redesign .value-stop:hover .value-select {
  color: #ffffff !important;
  border-color: #173667 !important;
  box-shadow: 0 18px 36px rgba(13, 48, 34, 0.2) !important;
  transform: translateY(-4px) !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-select:after,
.values-section.strive-redesign .value-stop:hover .value-select:after {
  opacity: 1 !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-copy strong,
.values-section.strive-redesign .value-stop:hover .value-copy strong {
  color: #ffffff !important;
  font-size: 19px !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-card-description,
.values-section.strive-redesign .value-stop:hover .value-card-description {
  color: rgba(255, 255, 255, 0.92) !important;
  max-height: 64px !important;
  opacity: 1 !important;
  display: block !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-marker,
.values-section.strive-redesign .value-stop:hover .value-marker {
  color: #5EB93C !important;
  font-size: 40px !important;
}

.values-section.strive-redesign .value-stop.is-selected .value-icon,
.values-section.strive-redesign .value-stop:hover .value-icon {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

/* 11. Story Panels (Green Background) */
.story-panel {
  background: #5EB93C !important;
  color: #ffffff !important;
}

.story-panel h2,
.story-panel h3 {
  color: #ffffff !important;
}

.story-panel p {
  color: #ffffff !important;
}

/* 12. Site Footer Text Legibility on White Background */
.site-footer p,
.site-footer address {
  color: #4B5563 !important;
}

.site-footer .footer-identity > p {
  color: #4B5563 !important;
}

.site-footer .footer-column h3 {
  color: #173667 !important;
}

.site-footer .footer-links a {
  color: #374151 !important;
}

.site-footer .footer-links a:hover {
  color: #5EB93C !important;
}

.site-footer .footer-contact-link strong {
  color: #173667 !important;
}

.site-footer .footer-contact-link:hover strong {
  color: #5EB93C !important;
}

.site-footer .copyright {
  color: #6B7280 !important;
}

.site-footer .footer-bottom-note {
  color: #6B7280 !important;
}

/* 13. Light Background Cards: Maintain High-Contrast Dark Blue Headings */
.home-stories-section .home-story-title,
.home-story-card .home-story-title {
  color: #173667 !important;
}

.home-stories-section .home-story-description,
.home-story-card .home-story-description {
  color: #535353 !important;
}

/* ==========================================================================
   14. "Our Purpose" Section & Geometric Quote Cards
   ========================================================================== */
.our-purpose-section {
  position: relative;
  background-color: #F5F7F2 !important;
  padding: clamp(64px, 8vw, 96px) 0 !important;
  color: #2D3748;
}

.our-purpose-container {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
}

.our-purpose-frame {
  border: 1px solid rgba(45, 55, 72, 0.35) !important;
  border-radius: 0 !important;
  background-color: #F5F7F2 !important;
  padding: clamp(24px, 4.5vw, 64px) !important;
  box-sizing: border-box;
}

.our-purpose-header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.our-purpose-heading {
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4.2vw, 48px) !important;
  color: #173667 !important;
  text-align: center !important;
  margin: 0 0 14px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}

.our-purpose-subtitle {
  font-family: var(--font) !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  color: #4A5568 !important;
  line-height: 1.7 !important;
  max-width: 672px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.our-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 56px);
  align-items: stretch;
}

.purpose-card {
  position: relative;
  background-color: #F4F8F1 !important;
  border: 1px solid rgba(45, 55, 72, 0.40) !important;
  border-radius: 0 !important;
  padding: clamp(52px, 5vw, 60px) clamp(24px, 3.2vw, 40px) 40px !important;
  text-align: center !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.purpose-card:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 55, 72, 0.65) !important;
  box-shadow: 0 12px 28px rgba(45, 55, 72, 0.08);
}

/* Floating Central Pill Badge */
.purpose-pill {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #388E3C !important;
  color: #ffffff !important;
  padding: 10px 32px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(56, 142, 60, 0.35) !important;
  min-width: 155px !important;
  box-sizing: border-box;
  user-select: none;
}

.purpose-pill-prefix {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-transform: capitalize;
}

.purpose-pill-title {
  font-family: var(--font) !important;
  font-size: clamp(18px, 1.8vw, 20px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* Floating Cutout Quotation Marks */
.purpose-quote-mark {
  position: absolute;
  top: -14px;
  z-index: 5;
  background-color: #F4F8F1 !important;
  padding: 0 10px !important;
  font-family: Georgia, serif !important;
  font-size: clamp(26px, 2.8vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 0.8 !important;
  color: #59C438 !important;
  user-select: none;
  pointer-events: none;
}

.purpose-quote-mark.quote-mark-left {
  left: clamp(18px, 2.8vw, 32px);
}

.purpose-quote-mark.quote-mark-right {
  right: clamp(18px, 2.8vw, 32px);
}

.purpose-card-text {
  font-family: var(--font) !important;
  color: #2D3748 !important;
  font-size: clamp(14px, 1.15vw, 16.5px) !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ==========================================================================
   Section: HOL SDG Framework (Aligned with UN Sustainable Development Goals)
   Background #f5f4eb matching About Us section with hover wiggle on image
   ========================================================================== */
.about-story {
  padding-bottom: clamp(24px, 3.5vw, 40px) !important;
}

.sdg-framework-section {
  position: relative;
  background-color: #f5f4eb !important;
  padding: clamp(16px, 2.5vw, 32px) 0 clamp(48px, 6vw, 84px) !important;
  box-sizing: border-box;
}

.sdg-framework-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.sdg-framework-copy {
  min-width: 0;
}

.sdg-framework-copy .section-title {
  color: #173667 !important;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.sdg-framework-text {
  color: #4b5563 !important;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
  margin: 0;
  max-width: 540px;
}

.sdg-framework-visual {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Image Wrapper with seamless transparent background and interactive hover wiggle */
.sdg-framework-image-wrap,
.sdg-framework-image-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: clamp(320px, 42vw, 560px);
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  cursor: pointer;
  will-change: transform;
}

.sdg-framework-image-wrap:hover,
.sdg-framework-image-card:hover {
  animation: sdg-image-wiggle 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 36px rgba(23, 54, 103, 0.15));
}

@keyframes sdg-image-wiggle {
  0% {
    transform: translateY(-6px) rotate(0deg) scale(1.02);
  }
  33% {
    transform: translateY(-9px) rotate(-1.5deg) scale(1.025);
  }
  66% {
    transform: translateY(-6px) rotate(1.2deg) scale(1.025);
  }
  100% {
    transform: translateY(-9px) rotate(-0.6deg) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdg-framework-image-wrap:hover,
  .sdg-framework-image-card:hover {
    animation: none;
    transform: translateY(-4px);
  }
}

.sdg-framework-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: transparent !important;
  object-fit: contain;
}

@media (max-width: 960px) {
  .sdg-framework-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sdg-framework-copy {
    text-align: left;
  }
  .sdg-framework-image-wrap,
  .sdg-framework-image-card {
    max-width: clamp(280px, 80vw, 460px);
    margin: 0 auto;
  }
}

@media (max-width: 540px) {
  .sdg-framework-section {
    padding: 42px 0 48px !important;
  }
  .sdg-framework-copy .section-title {
    font-size: 26px;
  }
  .sdg-framework-text {
    font-size: 13.5px;
  }
  .sdg-framework-image-card {
    padding: 8px;
    border-radius: 16px;
  }
  .sdg-framework-image {
    border-radius: 10px;
  }
}

@media (max-width: 1024px) {
  .our-purpose-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}

@media (max-width: 640px) {
  .our-purpose-frame {
    padding: 24px 16px !important;
  }
  .purpose-card {
    padding: 48px 18px 32px !important;
  }
  .purpose-pill {
    padding: 8px 24px !important;
    min-width: 140px !important;
    top: -24px;
  }
  .purpose-quote-mark {
    font-size: 24px !important;
    padding: 0 6px !important;
    top: -12px;
  }
  .purpose-quote-mark.quote-mark-left {
    left: 12px;
  }
  .purpose-quote-mark.quote-mark-right {
    right: 12px;
  }
}

/* ==========================================================================
   Master Unified Hero System (Consistent Across All Pages)
   ========================================================================== */
.unified-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 88% 8%, rgba(94, 185, 60, 0.12), transparent 42%),
              radial-gradient(ellipse at 12% 90%, rgba(250, 184, 49, 0.08), transparent 38%),
              #F8FAF5;
  border-bottom: 1px solid #E4EBDD;
  padding: clamp(48px, 6vw, 76px) 0 clamp(44px, 5.5vw, 68px);
}

.unified-hero-container {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
}

.unified-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5.5vw, 80px);
  align-items: center;
}

.unified-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 620px;
}

.unified-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 750;
  color: #535353;
  margin-bottom: 14px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.unified-hero-back:hover {
  color: #173667;
  transform: translateX(-3px);
}

.unified-hero-kicker {
  display: none !important;
}

.unified-hero-badge {
  display: none !important;
}

.unified-hero-title {
  margin: 0 0 16px;
  font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.055em;
  color: #173667 !important;
}

.unified-hero-title em {
  color: #173667 !important;
  font-style: normal;
}

.unified-hero-lead {
  margin: 0 0 28px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: #535353;
  max-width: 540px;
}

.unified-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/* Hero Button: Perfectly matches the shape, pill radius, color, and elevation of the header 'Donate Now' button */
.unified-hero-actions .button,
.unified-hero-actions .button.gold,
.unified-hero .button,
.unified-hero .button.gold {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border: 1px solid #FAB831 !important;
  border-radius: 999px !important;
  background: #FAB831 !important;
  color: #173667 !important;
  box-shadow: 0 6px 20px rgba(250, 184, 49, 0.35) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  gap: 8px !important;
}

.unified-hero-actions .button:hover,
.unified-hero-actions .button.gold:hover,
.unified-hero .button:hover,
.unified-hero .button.gold:hover {
  background: #fbc756 !important;
  border-color: #fbc756 !important;
  color: #173667 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(250, 184, 49, 0.45) !important;
}

/* Secondary Hero Action Pill */
.unified-hero-actions .unified-hero-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1.5px solid #173667 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #173667 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}

.unified-hero-actions .unified-hero-link:hover {
  background: #173667 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(23, 54, 103, 0.2) !important;
}

.unified-hero-actions .unified-hero-link span {
  color: #5EB93C !important;
  font-size: 15px !important;
  transition: all 0.25s ease !important;
}

.unified-hero-actions .unified-hero-link:hover span {
  color: #FAB831 !important;
}

@media (max-width: 820px) {
  .unified-hero-actions .button,
  .unified-hero-actions .button.gold,
  .unified-hero-actions .unified-hero-link {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 420px) {
  .unified-hero-actions .button,
  .unified-hero-actions .button.gold,
  .unified-hero-actions .unified-hero-link {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
  }
}

.unified-hero-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
  max-height: 480px;
  background: #E5EADF;
  border: 1px solid rgba(23, 54, 103, 0.12);
  box-shadow: 0 20px 48px rgba(23, 54, 103, 0.08);
}

.unified-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.unified-hero-visual:hover img {
  transform: scale(1.025);
}

.unified-hero-badge {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .unified-hero {
    padding: 44px 0 40px;
  }
  .unified-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .unified-hero-copy {
    max-width: 100%;
  }
  .unified-hero-visual {
    max-height: 400px;
    aspect-ratio: 16/10;
  }
}

@media (max-width: 640px) {
  .unified-hero {
    padding: 34px 0 32px;
  }
  .unified-hero-container {
    width: min(100% - 32px, 1320px);
  }
  .unified-hero-grid {
    gap: 26px;
  }
  .unified-hero-title {
    font-size: clamp(32px, 8.5vw, 42px);
    margin-bottom: 12px;
  }
  .unified-hero-lead {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .unified-hero-visual {
    border-radius: 16px;
    aspect-ratio: 16/11;
    max-height: 290px;
  }
  .unified-hero-badge {
    bottom: 12px;
    left: 14px;
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* ==========================================================================
   Global Theme Heading Uniformity (Theme Blue: #173667)
   Ensures all headings and nested accents consistently use theme brand blue.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.section-title,
.section-title em,
.section-title span,
.values-title,
.values-title em,
.strive-highlight,
.founder-heading,
.founder-name,
.our-purpose-heading,
.home-story-title,
.bank-card h3,
.international-card h3,
.info-card h3,
.showcase-title,
.showcase-card-title,
.pub-library-heading h2,
.pub-document-card h3,
.work-programs-heading h2,
.work-programs-heading h2 em,
.work-program-copy h3,
.lee-impact-intro h2,
.lee-learning-heading h2,
.lee-learning-heading h2 em,
.lee-focus-list h3,
.lee-alumni-copy h2,
.lee-alumni-copy h2 em,
.donate-heading .section-title,
.bank-heading .section-title,
.donate-hero h1 {
  color: #173667 !important;
}

/* Maintain high-contrast readability on full-bleed dark banners/overlays */
.hero-slide h1,
.hero-slide .hero-inner h1,
.cta-band h2,
.cta-band .section-title,
.partners-showcase h2,
.partners-showcase .section-title,
.partners-showcase-heading h2,
.partners-showcase-heading .section-title,
.journey-promise h2,
.work-outcome h2,
.work-outcome-copy h2,
.story-panel h2,
.story-panel h3,
.donate-stories-heading h2,
.impact-overview-title .section-title,
.impact-overview-heading h2,
#difference-title,
.difference-section .section-title,
.difference-section h2,
.impact-overview-section .section-title,
.impact-overview-section h2 {
  color: #ffffff !important;
}


/* Contact Page Form Heading - White on dark card */
.contact-message-copy h2,
#contact-form-title,
.contact-message-section h2 {
  color: #ffffff !important;
}

/* ==========================================================================
   Mobile Homepage Hero Banners: Compact & Content-Preserving
   Keeps desktop layout 100% untouched while optimizing mobile viewport
   ========================================================================== */
@media (max-width: 768px) {
  .hero-slider {
    height: clamp(340px, 76vw, 410px) !important;
    min-height: 330px !important;
  }
  .hero-photo-picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .hero-photo-picture .hero-photo,
  .hero-slide .hero-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-mobile-position, center) center !important;
  }
  .hero-slide:first-child .hero-photo,
  .hero-slide-community .hero-photo {
    object-position: var(--hero-mobile-position, 70%) center !important;
  }
  .hero-slide:nth-child(2) .hero-photo {
    object-position: var(--hero-mobile-position, center) center !important;
  }
  .hero-slide:nth-child(3) .hero-photo,
  .hero-slide-campus .hero-photo {
    object-position: var(--hero-mobile-position, center) center !important;
  }
  .hero-overlay {
    background: linear-gradient(90deg, rgba(23, 54, 103, 0.90) 0%, rgba(23, 54, 103, 0.65) 58%, rgba(23, 54, 103, 0.22) 100%) !important;
    display: flex !important;
    align-items: flex-start !important;
  }
  .hero-slide .hero-inner {
    width: calc(100% - 32px) !important;
    padding: 104px 0 28px !important;
    margin: 0 auto !important;
  }
  .hero h1 {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
    max-width: 320px !important;
    margin: 0 0 8px 0 !important;
  }
  .hero p {
    font-size: clamp(12.5px, 3.2vw, 13.5px) !important;
    line-height: 1.48 !important;
    max-width: 290px !important;
    margin: 0 !important;
    color: #f0f5ef !important;
  }
}

@media (max-width: 440px) {
  .hero-slider {
    height: clamp(330px, 80vw, 370px) !important;
    min-height: 330px !important;
  }
  .hero-slide .hero-inner {
    padding: 98px 0 24px !important;
  }
  .hero h1 {
    font-size: 20.5px !important;
    line-height: 1.2 !important;
    max-width: 285px !important;
    margin-bottom: 7px !important;
  }
  .hero p {
    font-size: 12px !important;
    line-height: 1.44 !important;
    max-width: 260px !important;
  }
}

/* ==========================================================================
   "Opportunity changes lives." Section: Mobile Spacing, Typography & Icon Alignment
   - Prevents "Public education" and "Career pathways" text from overlapping icons
   - Keeps icons centered inside green circles with proper sizing and positioning
   - Desktop design, layout, and colors remain 100% untouched
   ========================================================================== */
@media (max-width: 768px) {
  .difference-section .impact-metric-card.stat {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(84px, auto) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    align-content: center !important;
    min-height: 96px !important;
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  .difference-section .impact-metric-card .metric-index {
    display: none !important;
  }

  /* Metric Count (Column 1, spanning both rows) */
  .difference-section .impact-metric-card.stat strong.metric-count {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: clamp(28px, 7vw, 36px) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Category title (Column 2, Row 1) - strictly prevents overlapping icon */
  .difference-section .impact-metric-category {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 4px !important;
    margin-right: 46px !important;
    padding: 0 !important;
    max-width: calc(100% - 46px) !important;
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: clamp(8px, 2.2vw, 9.5px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
  }

  /* Caption description (Column 2, Row 2) */
  .difference-section .impact-metric-card .metric-caption {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
  }

  /* Green circle icon - positioned top-right, perfectly centered SVG */
  .difference-section .impact-metric-icon {
    position: absolute !important;
    top: 12px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    background: #5EB93C !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .difference-section .impact-metric-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    margin: auto !important;
    stroke: #ffffff !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
    transform: none !important;
  }
}

@media (max-width: 440px) {
  .difference-section .impact-metric-card.stat {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding: 12px 8px !important;
  }

  .difference-section .impact-metric-card.stat strong.metric-count {
    font-size: clamp(26px, 8vw, 32px) !important;
  }

  .difference-section .impact-metric-category {
    margin-right: 42px !important;
    max-width: calc(100% - 42px) !important;
    font-size: 8px !important;
  }

  .difference-section .impact-metric-card .metric-caption {
    font-size: 11px !important;
  }

  .difference-section .impact-metric-icon {
    top: 11px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .difference-section .impact-metric-icon svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    flex: 0 0 15px !important;
  }
}

/* ==========================================================================
   "Meet Our Founder" Section: Universal Center-Alignment & Responsive Layout
   - Center-aligns both founder cards, images, wrappers, and info across all devices
   - Centers the section header above and positions both founder cards centered side-by-side
   - Maintains balanced spacing from left and right sides across desktop, tablet, and mobile
   ========================================================================== */
.meet-founders-section {
  text-align: center;
  padding-bottom: 96px !important; /* proper mobile bottom clearance */
}

@media (min-width: 640px) {
  .meet-founders-section {
    padding-bottom: 64px !important;
  }
}

@media (min-width: 1024px) {
  .meet-founders-section {
    padding-bottom: 80px !important;
  }
}

.meet-founders-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.meet-founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .meet-founders-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 32px !important;
    display: grid !important;
  }
  .meet-founders-col.meet-founders-left {
    grid-column: span 3 / span 3 !important;
    order: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .meet-founders-col.meet-founders-center {
    grid-column: span 6 / span 6 !important;
    order: 2 !important;
    transform: translateY(-2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .meet-founders-col.meet-founders-right {
    grid-column: span 3 / span 3 !important;
    order: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (min-width: 1280px) {
  .meet-founders-grid {
    gap: 48px !important;
  }
  .meet-founders-col.meet-founders-center {
    transform: translateY(-3rem) !important;
  }
}

@media (max-width: 1023px) {
  .meet-founders-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 36px !important;
    width: 100% !important;
  }

  .meet-founders-col.meet-founders-center {
    order: 1 !important;
    transform: none !important;
    margin-bottom: 8px !important;
  }

  .meet-founders-col.meet-founders-left {
    order: 2 !important;
    margin-top: 6px !important;
  }

  .meet-founders-col.meet-founders-right {
    order: 3 !important;
    margin-top: 6px !important;
  }
}

.meet-founders-col.meet-founders-left,
.meet-founders-col.meet-founders-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.founder-card {
  width: 100% !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 22px 20px 24px !important;
}

.founder-image-wrapper {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  aspect-ratio: 3 / 4 !important;
  display: block !important;
}

.founder-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.founder-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 2px 0 6px !important;
}

.founder-name {
  text-align: center !important;
  width: 100% !important;
}

.founder-designation {
  text-align: center !important;
  width: 100% !important;
}

.founder-accent-line {
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Home Page: "We S.T.R.I.V.E." Section (Mobile)
   - Centers the section title and "S.T.R.I.V.E." capital acronym
   - Centers the capital letters (S, T, R, I, V, E) within every card
   - Ensures selected and unselected value cards maintain centered alignment
   ========================================================================== */
@media (max-width: 768px) {
  .values-section.strive-redesign .values-heading,
  .values-section.strive-redesign .values-heading.values-heading-centered {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  .values-section.strive-redesign .values-title {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .values-section.strive-redesign .strive-highlight {
    text-align: center !important;
    display: inline-block !important;
  }

  .values-section.strive-redesign .values-summary {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    max-width: 420px !important;
  }

  .values-section.strive-redesign .value-select,
  .values-section.strive-redesign .value-stop.is-selected .value-select {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 10px !important;
  }

  .values-section.strive-redesign .value-icon,
  .values-section.strive-redesign .value-stop.is-selected .value-icon {
    margin: 2px auto 8px auto !important;
  }

  /* Center the capital letter (S, T, R, I, V, E) strictly on mobile */
  .values-section.strive-redesign .value-marker,
  .values-section.strive-redesign .value-stop.is-selected .value-marker {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 4px auto !important;
    line-height: 1.1 !important;
  }

  .values-section.strive-redesign .value-copy,
  .values-section.strive-redesign .value-stop.is-selected .value-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .values-section.strive-redesign .value-copy strong,
  .values-section.strive-redesign .value-stop.is-selected .value-copy strong {
    text-align: center !important;
    width: 100% !important;
  }

  .values-section.strive-redesign .value-card-description,
  .values-section.strive-redesign .value-stop.is-selected .value-card-description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .values-section.strive-redesign .value-detail-letter {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .values-section.strive-redesign .strive-path {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    transition: none !important;
  }

  .values-section.strive-redesign .value-stop,
  .values-section.strive-redesign .value-stop.is-selected {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .values-section.strive-redesign .value-select,
  .values-section.strive-redesign .value-stop.is-selected .value-select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 166px !important;
    padding: 13px 9px !important;
    transform: none !important;
  }

  .values-section.strive-redesign .value-stop:hover .value-select,
  .values-section.strive-redesign .value-stop.is-selected .value-select {
    transform: none !important;
  }

  .values-section.strive-redesign .value-icon,
  .values-section.strive-redesign .value-stop.is-selected .value-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    margin: 0 auto 6px !important;
  }

  .values-section.strive-redesign .value-marker,
  .values-section.strive-redesign .value-stop.is-selected .value-marker {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 2px !important;
    text-align: center !important;
    font-size: 25px !important;
  }

  .values-section.strive-redesign .value-copy,
  .values-section.strive-redesign .value-stop.is-selected .value-copy {
    min-width: 0 !important;
    align-items: center !important;
  }

  .values-section.strive-redesign .value-copy strong,
  .values-section.strive-redesign .value-stop.is-selected .value-copy strong,
  .values-section.strive-redesign .value-stop:hover .value-copy strong {
    width: auto !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .values-section.strive-redesign .value-stop.is-selected .value-card-description,
  .values-section.strive-redesign .value-stop:hover .value-card-description {
    max-height: 42px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Master Hero Section (Mobile): Single-Row Action Buttons
   - Applies to: Our Work page, Our Work inner program pages, Contact Us page,
     and all pages using .unified-hero-actions
   - Displays both buttons side-by-side in a single row on mobile screens
   - Balanced 50/50 flex widths, compact padding, and centered text & arrows
   ========================================================================== */
@media (max-width: 768px) {
  .unified-hero-actions,
  .kb-detail-page .unified-hero-actions,
  .donate-page .unified-hero-actions,
  .contact-page .unified-hero-actions,
  .work-page-main .unified-hero-actions,
  .preschool-page .unified-hero-actions,
  .lea-page .unified-hero-actions,
  .spp-page .unified-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 18px !important;
    box-sizing: border-box !important;
  }

  .unified-hero-actions .button,
  .unified-hero-actions .button.gold,
  .unified-hero-actions .unified-hero-link,
  .kb-detail-page .unified-hero-actions .button,
  .kb-detail-page .unified-hero-actions .button.gold,
  .kb-detail-page .unified-hero-actions .unified-hero-link,
  .donate-page .unified-hero-actions .button,
  .donate-page .unified-hero-actions .button.gold,
  .donate-page .unified-hero-actions .unified-hero-link,
  .contact-page .unified-hero-actions .button,
  .contact-page .unified-hero-actions .button.gold,
  .contact-page .unified-hero-actions .unified-hero-link,
  .work-page-main .unified-hero-actions .button,
  .work-page-main .unified-hero-actions .button.gold,
  .work-page-main .unified-hero-actions .unified-hero-link,
  .preschool-page .unified-hero-actions .button,
  .preschool-page .unified-hero-actions .button.gold,
  .preschool-page .unified-hero-actions .unified-hero-link,
  .lea-page .unified-hero-actions .button,
  .lea-page .unified-hero-actions .button.gold,
  .lea-page .unified-hero-actions .unified-hero-link,
  .spp-page .unified-hero-actions .button,
  .spp-page .unified-hero-actions .button.gold,
  .spp-page .unified-hero-actions .unified-hero-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 50% !important;
    min-height: 44px !important;
    max-height: 48px !important;
    padding: 0 8px !important;
    font-size: clamp(10px, 2.65vw, 12.5px) !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    gap: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .unified-hero-actions .button span,
  .unified-hero-actions .unified-hero-link span,
  .kb-detail-page .unified-hero-actions span,
  .contact-page .unified-hero-actions span,
  .preschool-page .unified-hero-actions span,
  .lea-page .unified-hero-actions span,
  .spp-page .unified-hero-actions span {
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 420px) {
  .unified-hero-actions,
  .kb-detail-page .unified-hero-actions,
  .donate-page .unified-hero-actions,
  .contact-page .unified-hero-actions,
  .work-page-main .unified-hero-actions,
  .preschool-page .unified-hero-actions,
  .lea-page .unified-hero-actions,
  .spp-page .unified-hero-actions {
    gap: 6px !important;
  }

  .unified-hero-actions .button,
  .unified-hero-actions .button.gold,
  .unified-hero-actions .unified-hero-link,
  .kb-detail-page .unified-hero-actions .button,
  .kb-detail-page .unified-hero-actions .button.gold,
  .kb-detail-page .unified-hero-actions .unified-hero-link,
  .donate-page .unified-hero-actions .button,
  .donate-page .unified-hero-actions .button.gold,
  .donate-page .unified-hero-actions .unified-hero-link,
  .contact-page .unified-hero-actions .button,
  .contact-page .unified-hero-actions .button.gold,
  .contact-page .unified-hero-actions .unified-hero-link,
  .work-page-main .unified-hero-actions .button,
  .work-page-main .unified-hero-actions .button.gold,
  .work-page-main .unified-hero-actions .unified-hero-link,
  .preschool-page .unified-hero-actions .button,
  .preschool-page .unified-hero-actions .button.gold,
  .preschool-page .unified-hero-actions .unified-hero-link,
  .lea-page .unified-hero-actions .button,
  .lea-page .unified-hero-actions .button.gold,
  .lea-page .unified-hero-actions .unified-hero-link,
  .spp-page .unified-hero-actions .button,
  .spp-page .unified-hero-actions .button.gold,
  .spp-page .unified-hero-actions .unified-hero-link {
    min-height: 42px !important;
    padding: 0 5px !important;
    font-size: clamp(9.5px, 2.5vw, 11px) !important;
    gap: 4px !important;
  }

  .unified-hero-actions .button span,
  .unified-hero-actions .unified-hero-link span,
  .kb-detail-page .unified-hero-actions span,
  .contact-page .unified-hero-actions span,
  .preschool-page .unified-hero-actions span,
  .lea-page .unified-hero-actions span,
  .spp-page .unified-hero-actions span {
    font-size: 11.5px !important;
  }
}

@media (max-width: 360px) {
  .unified-hero-actions,
  .kb-detail-page .unified-hero-actions,
  .contact-page .unified-hero-actions {
    gap: 4px !important;
  }

  .unified-hero-actions .button,
  .unified-hero-actions .button.gold,
  .unified-hero-actions .unified-hero-link,
  .kb-detail-page .unified-hero-actions .button,
  .kb-detail-page .unified-hero-actions .button.gold,
  .kb-detail-page .unified-hero-actions .unified-hero-link,
  .contact-page .unified-hero-actions .button,
  .contact-page .unified-hero-actions .button.gold,
  .contact-page .unified-hero-actions .unified-hero-link {
    min-height: 38px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    gap: 3px !important;
  }

  .unified-hero-actions .button span,
  .unified-hero-actions .unified-hero-link span,
  .kb-detail-page .unified-hero-actions span,
  .contact-page .unified-hero-actions span {
    font-size: 10px !important;
  }
}


.form-trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-form-note.is-error {
  color: #a12622;
}