/* Impact Fund only. Preserve the editorial design; reading never moves. */
html[data-motion-preferences="system"] { --nav-overlay-duration: 280ms; }

.site-header:not(.home-header-v3) {
  --impact-brand-slot: 112px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(44px, 220px) minmax(0, 1fr);
  gap: 12px;
  transition: none;
}
.site-header .brand,
.site-header.site-header--full-wordmark .brand {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-column: 2;
  height: 44px;
  justify-self: center;
  transform: none;
}
.site-header .header-icon.header-icon--full-name,
.site-header .header-icon:not(.header-icon--full-name) {
  width: 220px;
  max-width: none;
  pointer-events: none;
  transition: none;
  filter: none;
}
.site-header .menu-toggle { grid-column: 1; justify-self: start; min-width: 0; }
.site-header:not(.home-header-v3) .inquire-link {
  min-height: 44px;
  min-width: 0;
  margin-left: 0;
  justify-self: end;
  white-space: normal;
}
/* The compact sunmark header keeps a quiet reading surface below the hero. */
html[data-motion-preferences="system"] .site-header:not(.nav-overlay-active) {
  color: var(--espresso);
  background: rgba(243, 237, 224, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(35, 26, 16, .12);
  box-shadow: 0 8px 24px rgba(35, 26, 16, .08);
}
html[data-motion-preferences="system"] .site-header:not(.nav-overlay-active) .menu-toggle { color: var(--espresso); }

/* Let the full wordmark float over the opening photography. Keep this rule
   active while the drawer opens/closes, so no ivory bar flashes behind it. */
html[data-motion-preferences="system"] .site-header.site-header--full-wordmark {
  color: var(--warm-ivory);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-motion-preferences="system"] .site-header.site-header--full-wordmark .menu-toggle {
  color: var(--warm-ivory);
  text-shadow: 0 1px 3px rgba(18, 12, 7, .85);
}
html[data-motion-preferences="system"] .site-header.site-header--full-wordmark .menu-toggle svg {
  filter: drop-shadow(0 1px 2px rgba(18, 12, 7, .65));
}
html[data-motion-preferences="system"] .site-header.site-header--full-wordmark .header-icon {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(18, 12, 7, .6));
}

/* The heading stays real text. Natural-height sections support fast scrolling. */
.impact-page { overflow: visible; }
.impact-intro { min-height: 0; grid-template-columns: minmax(0, 1fr); }
.impact-intro__copy { min-width: 0; }
.impact-intro__body { width: 100%; grid-template-columns: minmax(0, 1fr); }
.work-supported__inner,
.impact-follow__content { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.impact-page :is(h1, h2, p, a, figcaption) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.impact-page :is(h1, h2) { font-optical-sizing: auto; }
.impact-intro { scroll-margin-top: var(--impact-header-height, 84px); }
/* Section reveal: the footer's fade-and-rise applied to each section's copy.
   data-impact-reveal is set by impact-refinements.js only once it is ready,
   so nothing is hidden without JavaScript, in print or with reduced motion,
   and the sign-up dialog is left out so an automatic opening is never
   invisible. Only the pending state is styled and the entrance is an
   animation filling backwards, so an arrived block's buttons keep their own
   hover and press states. The follow photograph moves as a frame rather than
   sliding inside its clipped box. */
.reveal-section { opacity: 1; transform: none; transition: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  .impact-follow__image { --impact-reveal-duration: 760ms; --impact-reveal-rise: 24px; }
  /* The hero text is on screen at load, so it waits from the very first
     frame: zuvani-loader.js marks the page in <head>, before anything paints,
     whereas the reveal script is deferred and can run a frame after it.
     Should that script never run, the text rises in on its own after 0.5s. */
  html.zuvani-js .impact-page .impact-gallery__header:not([data-impact-reveal], .is-revealed) > * {
    opacity: 0;
    transform: translateY(var(--impact-reveal-rise, 8px));
    animation: impact-reveal-late 240ms var(--ease-out) calc(0.5s + var(--impact-reveal-delay, 0ms)) both;
  }
  .impact-page .reveal-section[data-impact-reveal]:not(.is-revealed, .impact-follow__image) > :not(dialog),
  .impact-page .impact-follow__image[data-impact-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--impact-reveal-rise, 8px));
  }
  .impact-page .reveal-section[data-impact-reveal].is-revealed:not(.is-revealed-instant, .impact-follow__image) > :not(dialog),
  .impact-page .impact-follow__image[data-impact-reveal].is-revealed:not(.is-revealed-instant) {
    animation: impact-reveal var(--impact-reveal-duration, 240ms) var(--ease-out) var(--impact-reveal-delay, 0ms) backwards;
  }
  .impact-page .reveal-section > :nth-child(2) { --impact-reveal-delay: 30ms; }
  .impact-page .reveal-section > :nth-child(3) { --impact-reveal-delay: 60ms; }
  .impact-page .reveal-section > :nth-child(n + 4) { --impact-reveal-delay: 90ms; }
}
@keyframes impact-reveal {
  from { opacity: 0; transform: translateY(var(--impact-reveal-rise, 8px)); }
}
@keyframes impact-reveal-late {
  from { opacity: 0; transform: translateY(var(--impact-reveal-rise, 8px)); }
  to { opacity: 1; transform: none; }
}
.impact-gallery__item img { transition: none; }
.impact-gallery__item:hover img { transform: none; filter: saturate(.92) contrast(.98) brightness(.98); }

/* Reserve enough vertical space as text grows, without hiding overflow. */
.impact-gallery-section { min-height: max(100svh, 40rem); }
.impact-gallery-section::after {
  background: linear-gradient(to bottom, transparent 12%, rgba(18, 12, 7, .24) 30%, rgba(18, 12, 7, .54) 50%, rgba(18, 12, 7, .24) 70%, transparent 88%);
}
.impact-gallery__header { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.impact-gallery__eyebrow, .impact-gallery__cta { color: #fff; }
.impact-gallery__cta { min-height: 44px; padding: 8px 4px; justify-content: center; }
.impact-follow__button { max-width: 100%; }
.impact-follow__button span:first-child { min-width: 0; }
.impact-follow__button span:last-child { flex-shrink: 0; }
.impact-page .impact-follow__statement { max-width: 26ch; }
.impact-page .impact-follow__signup { max-width: 36ch; }

/* Occasional feedback only: acknowledge presses; never delay activation. */
html[data-motion-preferences="system"] :is(.menu-toggle, .inquire-link, .impact-gallery__cta, .impact-follow__button, .impact-signup-actions a, .impact-signup-actions button, .zuvani-nav-close, .legal-footer__contact) {
  transform: none;
  /* Colour and fill fade; position still never moves, and nothing here
     delays activation. Without background/colour in this list the Tier 2
     hover fill would snap in a single frame on this page only. */
  transition: opacity 100ms var(--ease-out),
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}
html[data-motion-preferences="system"] .is-pointer-pressed { opacity: .72; }
.impact-gallery__cta span:last-child,
.impact-follow__button span:last-child,
.legal-footer__contact-arrow { transform: none; transition: transform 160ms var(--ease-out); }
.impact-gallery__cta:hover span:last-child,
.impact-follow__button:hover span:last-child,
.legal-footer__contact:hover .legal-footer__contact-arrow { transform: none; }
@media (hover: hover) and (pointer: fine) {
  /* The footer contact arrow is a link, not a button: it keeps its original
     rightward nudge. Button labels and arrows travel left together. */
  .legal-footer__contact:hover .legal-footer__contact-arrow { transform: translateX(4px); }
  .impact-gallery__cta:hover span:last-child,
  .impact-follow__button:hover span:last-child,
  .impact-gallery__cta:hover span:first-child,
  .impact-follow__button:hover span:first-child { transform: translateX(var(--btn-arrow-shift, -4px)); }
}
/* Touch: the rules above pin these arrows to transform:none ungated. The
   pressed rules in public-refinements.css already outrank that, being (0,3,2)
   against (0,2,0), so this is belt and braces rather than a fix, and it adds
   the press-class trigger this page actually toggles. Only transform needs
   restating; max-width and margin-left are uncontested on touch.
   There is deliberately no resting transform: rest matches the desktop rest
   state, which has none, and the arrow has no width to offset. */
@media (hover: none) {
  .impact-gallery__cta:active span:last-child,
  .impact-gallery__cta.is-pointer-pressed span:last-child,
  .impact-follow__button:active span:last-child,
  .impact-follow__button.is-pointer-pressed span:last-child,
  .impact-gallery__cta:active span:first-child,
  .impact-gallery__cta.is-pointer-pressed span:first-child,
  .impact-follow__button:active span:first-child,
  .impact-follow__button.is-pointer-pressed span:first-child {
    transform: translateX(var(--btn-arrow-shift, -4px));
  }
}

html[data-motion-preferences="system"] :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Use the existing reversible navigation controller and easing token. */
.zuvani-nav-overlay.is-visible { transition-delay: 0s; }
.zuvani-nav-link { transition-duration: 160ms, 200ms; transition-delay: calc(var(--nav-index) * 30ms); }
.zuvani-nav-meta { transition-duration: 160ms, 200ms; transition-delay: 60ms; }
.zuvani-nav-backdrop, .zuvani-nav-backdrop.is-open { transition-duration: 160ms, 0s; }
.zuvani-nav-link-text, .zuvani-nav-close-icon { transition-duration: 160ms; }
.zuvani-nav-link-text { position: relative; }
.zuvani-nav-link .zuvani-nav-link-text::after {
  position: absolute;
  left: calc(100% + 14px);
  width: 24px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms var(--ease-out);
}
.zuvani-nav-link[aria-current="page"] .zuvani-nav-link-text::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .zuvani-nav-link:hover .zuvani-nav-link-text::after { transform: scaleX(1); }
}
.nav-motion-instant :is(.zuvani-nav-overlay, .zuvani-nav-overlay *, .zuvani-nav-backdrop),
html.impact-keyboard-input :is(a, button, a::after, a span, button svg) { transition: none !important; }
html.impact-keyboard-input { scroll-behavior: auto; }
html[data-motion-preferences="system"] .footer-legal-v2 .legal-footer__fora-profile .legal-footer__fora-lockup { transform: none; transition: none; }
html[data-motion-preferences="system"] .footer-legal-v2 .legal-footer__contact .legal-footer__contact-arrow { transform: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  html[data-motion-preferences="system"] .footer-legal-v2 .legal-footer__contact:hover .legal-footer__contact-arrow { transform: translateX(4px); }
}
html.impact-keyboard-input .footer-legal-v2 .legal-footer__contact .legal-footer__contact-arrow { transform: none; transition: none; }
html.impact-keyboard-input .zuvani-nav-link:focus-visible .zuvani-nav-link-text::after { transform: scaleX(1); }

.impact-signup-feedback { width: 100%; max-width: 440px; }
#impact-signup-status { margin: 1rem 0 0; font-size: var(--text-caption); color: var(--espresso); }
#impact-signup-status:empty { margin: 0; }
.impact-signup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 8px; }
.impact-signup-actions[hidden] { display: none; }
.impact-signup-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--espresso);
  font: inherit;
  font-size: var(--text-caption);
  background: transparent;
  border: 1px solid var(--bronze);
  cursor: pointer;
}

/* Flodesk owns fields, validation and submission. We own the modal boundary.
   Visibility changes immediately so focus never waits for an animation. */
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal {
  opacity: 0;
  visibility: hidden;
  z-index: 1040;
  pointer-events: none;
  overscroll-behavior: contain;
  background: rgba(35, 26, 16, .64);
  transition: opacity 200ms var(--ease-out), visibility 0s 200ms !important;
  scroll-behavior: auto;
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal.fd-is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s !important;
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal__dialog {
  width: calc(100% - 32px);
  min-height: calc(100% - 32px);
  margin: 16px auto;
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal__content { min-width: 0; border-radius: 12px; }
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal__close {
  position: sticky !important;
  top: 8px;
  right: auto;
  order: -1;
  align-self: flex-end;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 8px 8px -52px auto;
  color: var(--espresso);
  background: var(--limestone);
  border-radius: 50%;
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal__body { min-width: 0; padding-top: 32px; }
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 :is([class$="__title"], [class$="__subtitle"], [class$="__success-message"], .fd-form-check__label) { overflow-wrap: anywhere; }
/* Reuse the site's component/copy scale, not the provider's fixed px sizes.
   Field names, labels, validation and submission remain provider-owned. */
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 [class$="__title"] {
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-sm);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 :is([class$="__subtitle"], [class$="__success-message"]) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-form-control {
  height: auto;
  min-height: 44px;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-form-label {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal :is(.fd-form-check__label, .fd-form-feedback) {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-btn {
  min-height: 44px;
  height: auto;
  white-space: normal;
  font-size: var(--text-label);
  line-height: var(--leading-label);
}
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal :focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal:focus { outline: none; }
html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal[data-instant="true"] { transition: none !important; }

@media (max-width: 1000px) {
  .footer-legal-v2 .legal-footer__identity { grid-template-columns: minmax(0, 1fr); }
  .footer-legal-v2 :is(.legal-footer__brand-link, .legal-footer__zuvani-name, .legal-footer__credentials) { min-width: 0; }
}
@media (max-width: 760px) {
  .impact-gallery-section { min-height: max(100svh, 44rem); }
}
/* Equal-height rows on smaller screens: Rural Nigeria spans the top half,
   with the two wildlife frames side by side below the gallery's midpoint. */
@media (max-width: 1000px) {
  .impact-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .impact-gallery__header { inset-inline: 18px; }
  .impact-gallery__item--community { grid-column: 1 / -1; grid-row: 1; }
  .impact-gallery__item--wetland { grid-column: 1; grid-row: 2; }
  .impact-gallery__item--rhinos { grid-column: 2; grid-row: 2; }
  .impact-gallery__item--community img { object-position: 60% 65%; }
  .impact-gallery__item--wetland img { object-position: 75% center; }
}
/* Fit the first action on a short phone without reducing any type sizes.
   The rem minimum still lets the collage grow when text is enlarged. */
@media (max-width: 760px) and (max-height: 740px) {
  .impact-gallery-section {
    min-height: max(100svh, 32rem);
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .site-header:not(.home-header-v3) { grid-template-columns: auto minmax(var(--impact-brand-slot), 1fr) auto; gap: 8px; padding-inline: 16px; }
  .site-header:not(.home-header-v3) .inquire-link { padding-inline: 12px; }
  .site-header.header-is-crowded { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header.header-is-crowded .brand { grid-column: 1 / -1; grid-row: 1; width: 120px; height: 64px; }
  .site-header.header-is-crowded .menu-toggle, .site-header.header-is-crowded .inquire-link { grid-row: 2; }
  .site-header.header-is-crowded .inquire-link { grid-column: 2; }
  .site-header.header-is-crowded .menu-toggle { flex-direction: column; gap: 2px; align-items: start; }
  .impact-intro h2 { font-size: clamp(3rem, 18vw, 5.6rem); }
  .work-supported h2 { hyphens: manual; -webkit-hyphens: manual; }
  .footer-legal-v2 :is(.legal-footer__closing, .legal-footer__brand-line, .legal-footer__affiliation-copy, .legal-footer__protection-copy) { overflow-wrap: anywhere; }
  .footer-legal-v2 .legal-footer__zuvani-word { font-size: min(clamp(2.7rem, 14vw, 3.5rem), 17vw); }
  .footer-legal-v2 .legal-footer__collective-word { letter-spacing: .24em; text-indent: .24em; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-motion-preferences="system"] { scroll-behavior: auto; }
  html[data-motion-preferences="system"] :is(.zuvani-nav-overlay, .zuvani-nav-link, .zuvani-nav-meta) { transform: none; transition: none; }
  html[data-motion-preferences="system"] :is(.impact-gallery__cta span, .impact-follow__button span, .legal-footer__contact-arrow) { transform: none !important; }
  html[data-motion-preferences="system"] :is(a, button, a span, button svg) { transition: opacity 100ms ease; }
  html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal { transition: opacity 100ms ease !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  /* Accessibility preferences retain a solid surface and dark controls. */
  html[data-motion-preferences="system"] .site-header.site-header--full-wordmark {
    background: #f3ede0; color: #231a10; border-bottom-color: rgba(35, 26, 16, .12);
  }
  html[data-motion-preferences="system"] .site-header.site-header--full-wordmark .menu-toggle {
    color: #231a10; text-shadow: none;
  }
  html[data-motion-preferences="system"] .site-header.site-header--full-wordmark :is(.header-icon, .menu-toggle svg) { filter: none; }
  html[data-motion-preferences="system"] .site-header:not(.nav-overlay-active),
  html[data-motion-preferences="system"] .zuvani-nav-overlay {
    background: #f3ede0;
    color: #231a10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .zuvani-nav-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .impact-gallery__header { background: #231a10; padding: 16px; border-radius: 8px; }
  .impact-follow__content { background: #f3ede0; }
  html [data-ff-el="root"].ff-6a9720bf091ae8abb37227b5 .fd-modal { background: #231a10; }
}
@media (prefers-contrast: more) {
  html[data-motion-preferences="system"] .site-header:not(.nav-overlay-active) { border-bottom: 2px solid #231a10; }
  .zuvani-nav-overlay { border-right: 2px solid #231a10; }
  .impact-follow__content, .impact-follow__button { border: 2px solid #231a10; }
  .impact-page :is(.section-eyebrow, .impact-follow__button, .impact-follow__signup) { color: #231a10; }
}