:root {
  --warm-ivory: #f3ede0;
  --limestone: #e9e2d6;
  --taupe: #b8aa97;
  --warm-stone: #a7947e;
  --espresso: #231a10;
  --bronze: #8c6240;
  --espresso-soft: rgba(35, 26, 16, 0.68);
  --line: rgba(35, 26, 16, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--espresso);
  background: var(--warm-ivory);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  padding-block: 10px;
  padding-inline: clamp(16px, 4vw, 60px);
  color: var(--espresso);
  background: rgba(243, 237, 224, 0.78);
  border-bottom: 1px solid rgba(35, 26, 16, 0.12);
  box-shadow: 0 8px 28px rgba(35, 26, 16, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  transform: translate(-50%, -50%);
  justify-items: center;
  gap: 6px;
  min-width: 150px;
  height: 44px;
  overflow: hidden;
}

.header-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

html.zuvani-header-on-dark .site-header:not(.nav-overlay-active) .header-icon {
  filter: drop-shadow(0 2px 10px rgba(18, 12, 7, 0.34));
}

.menu-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--espresso);
  background: transparent;
  border: 0;
  font: var(--weight-label) var(--text-label)/var(--leading-label) var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle svg {
  width: 22px;
  height: 16px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.menu-toggle line {
  transition: transform 260ms ease, opacity 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.header-nav {
  display: none;
}

.inquire-link {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-left: auto;
  padding: 0 30px;
  border: 1px solid rgba(35, 26, 16, 0.32);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-label);
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.inquire-link:hover {
  color: var(--warm-ivory);
  border-color: var(--bronze);
  background: var(--bronze);
}

.impact-intro {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-top: 53px;
  background: var(--warm-ivory);
}

.impact-intro__copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1120px);
  padding: clamp(96px, 11vw, 150px) clamp(28px, 6vw, 96px);
  text-align: center;
}

.impact-intro .section-eyebrow::after {
  margin-inline: auto;
}

.section-eyebrow {
  margin: 0;
  color: var(--text-accent);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.section-eyebrow::after {
  display: block;
  width: 62px;
  height: 1px;
  margin-top: 17px;
  background: var(--bronze);
  content: "";
}

.impact-intro h2 {
  margin: var(--space-eyebrow) 0 var(--space-heading);
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 7.7vw, 8.8rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.impact-intro__body {
  display: grid;
  gap: 22px;
  max-width: 65ch;
  margin-inline: auto;
}

.impact-intro__body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  line-height: var(--leading-body);
}

.work-supported {
  background: var(--limestone);
}

.work-supported__inner {
  display: grid;
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: clamp(72px, 7vw, 104px) clamp(24px, 6vw, 96px);
  gap: clamp(32px, 4vw, 56px);
  text-align: left;
}

.work-supported__heading {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: end;
  gap: clamp(40px, 7vw, 100px);
}

.work-supported h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

.work-supported__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  text-wrap: balance;
}

.work-supported__areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.work-supported__areas li {
  min-width: 0;
  display: grid;
  align-items: center;
  /* Centre one- and two-line labels within the shared row height. The small
     padding adjustment accounts for the display face's optical baseline. */
  padding-block: 24px 26px;
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}

.work-supported__area {
  display: block;
  color: var(--espresso);
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: var(--weight-display);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.work-supported__area::first-letter { text-transform: uppercase; }

/* Keep the original sentence's conjunction/punctuation available to
   assistive technology when its four areas are presented as a list. */
.impact-copy-join {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.work-supported__note {
  max-width: 660px;
  margin: 0;
  color: var(--espresso);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  line-height: 1.45;
}

.impact-gallery-section {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: clip;
  color: var(--warm-ivory);
  background: var(--espresso);
}

.impact-gallery-section::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: clamp(120px, 17vh, 190px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 12, 7, 0.46), transparent);
  content: "";
}

.impact-gallery-section::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.38),
    rgba(0, 0, 0, 0.08) 45%,
    transparent 75%
  );
  content: "";
}

.impact-gallery__header {
  position: absolute;
  inset: 0 clamp(24px, 5vw, 80px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: fit-content;
  margin: auto 0;
  text-align: center;
}

.impact-gallery__eyebrow {
  margin: 0 0 var(--space-eyebrow);
  color: var(--warm-ivory);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.impact-gallery__title {
  margin: 0;
  color: var(--warm-ivory);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6vw, 6.6rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  line-height: 0.94;
  text-wrap: balance;
}

.impact-gallery__title-accent {
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.impact-gallery__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-arrow-gap, 16px);
  margin-top: 15px;
  padding-bottom: 5px;
  color: rgba(243, 237, 224, 0.9);
  border: 1px solid rgba(243, 237, 224, 0.65);
  background: rgba(35, 26, 16, 0.12);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-button);
  line-height: 1.2;
  text-transform: uppercase;
  transition: color 220ms ease, border-color 220ms ease;
}

.impact-gallery__cta span:last-child {
  transition: transform 220ms ease, opacity 180ms ease,
    max-width 220ms ease, margin-left 220ms ease;
}

/* Arrow appears on hover only; touch keeps it, having no hover to reveal it.
   The flex gap is zeroed as well, or a zero-width arrow still leaves its gap. */
@media (hover: hover) and (pointer: fine) {
  .impact-gallery__cta { gap: 0; }
  .impact-gallery__cta span:last-child {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
  }
  .impact-gallery__cta:hover span:last-child,
  .impact-gallery__cta:focus-visible span:last-child {
    max-width: 2.5em;
    margin-left: 12px;
    opacity: 1;
  }
}

/* Sits over photography, so it brightens to full ivory rather than to a
   bronze tint that was outside the palette. */
.impact-gallery__cta:hover {
  color: var(--warm-ivory, #f3ede0);
  border-color: var(--warm-ivory, #f3ede0);
}

.impact-gallery__cta:hover span:last-child {
  transform: translateX(var(--btn-arrow-shift, -4px));
}

.impact-gallery {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  /* A single hairline between photos, matching the Blog's 1px borders. */
  gap: 1px;
}

.impact-gallery__item {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #17110b;
  border: 0;
  border-radius: 0;
}

/* One leading community image, with two equally sized wildlife frames. */
.impact-gallery__item--community {
  grid-column: 1;
  grid-row: 1 / 3;
}

.impact-gallery__item--wetland {
  grid-column: 2;
  grid-row: 1;
}

.impact-gallery__item--rhinos {
  grid-column: 2;
  grid-row: 2;
}

.impact-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.98) brightness(0.98);
  transform: scale(1);
  transition: transform 700ms var(--ease-out), filter 700ms ease;
}

.impact-gallery__item--wetland img {
  object-position: 55% center;
}

.impact-gallery__item--rhinos img {
  object-position: 25% 48%;
}

.impact-gallery__item--community img {
  object-position: 65% 65%;
}

@media (hover: hover) and (pointer: fine) {
  .impact-gallery__item:hover img {
    filter: saturate(0.95) contrast(1) brightness(1);
    transform: scale(1.015);
  }

}

.impact-follow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  background: var(--warm-ivory);
}

.impact-follow__image {
  position: relative;
  min-height: clamp(560px, 48vw, 720px);
  overflow: hidden;
}

.impact-follow__image img {
  /* Keep the established frame when a portrait source replaces a landscape. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.impact-follow__content {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px);
  text-align: center;
}

.impact-follow__mark {
  width: clamp(112px, 10vw, 144px);
  height: auto;
  margin-bottom: 24px;
}

.impact-follow__statement {
  max-width: 26ch;
  /* 24px above the sign-up line and 24px below it (see .impact-follow__signup):
     the same 48px the block always had, shared evenly, and matching the 24px
     under the wordmark. */
  margin: 0 0 24px;
  color: var(--espresso);
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: var(--weight-display);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.impact-follow__button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-arrow-gap, 16px);
  padding: 16px 27px;
  color: var(--btn-secondary-ink, #231a10);
  background: var(--btn-secondary-fill, #a7947e);
  border: 1px solid var(--btn-secondary-edge, #a7947e);
  border-radius: var(--btn-radius, 999px);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-label);
  text-transform: uppercase;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.impact-follow__button span:last-child {
  transition: transform 200ms ease, opacity 180ms ease,
    max-width 220ms ease, margin-left 220ms ease;
}

/* Arrow appears on hover only; touch keeps it, having no hover to reveal it.
   The flex gap is zeroed as well, or a zero-width arrow still leaves its gap. */
@media (hover: hover) and (pointer: fine) {
  .impact-follow__button { gap: 0; }
  .impact-follow__button span:last-child {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
  }
  .impact-follow__button:hover span:last-child,
  .impact-follow__button:focus-visible span:last-child {
    max-width: 2.5em;
    margin-left: 18px;
    opacity: 1;
  }
}

/* Gated: an ungated fill would latch on touch after a tap. */
@media (hover: hover) and (pointer: fine) {
  /* Fill holds still; the arrow is the hover signal. */
  .impact-follow__button:hover {
    opacity: .9;
  }
}

.impact-follow__button:hover span:last-child {
  transform: translateX(var(--btn-arrow-shift, -4px));
}
@media (hover: hover) and (pointer: fine) {
  /* Label follows the arrow left, keeping the distance between them fixed. */
  .impact-follow__button:hover span:first-child,
  .impact-gallery__cta:hover span:first-child {
    transform: translateX(var(--btn-arrow-shift, -4px));
  }
}

.impact-follow__signup {
  max-width: 36ch;
  /* This line used to sit under the button, which is why its space was all on
     top: once it moved above, it measured 48px from the statement and 0px from
     the button. The space now sits evenly on both sides. */
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-body);
  line-height: var(--leading-caption);
}


.impact-page a:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 6px;
}

@media (max-width: 1000px) {
  /* Preserve the original centred introduction on tablet and phone. */
  .impact-intro { min-height: 0; }
  .impact-intro__copy { padding: 104px clamp(28px, 8vw, 84px) 72px; }
  /* Two columns: the rows share rules, as they do stacked on phones, so
     the first row's closing rule is not drawn 28px above the second row's
     opening one. Only the column gap is kept. */
  .work-supported__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .work-supported__areas li:nth-child(-n+2) { border-block-end: 0; }
}

@media (max-width: 760px) {
  .work-supported__heading { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-supported__heading { text-align: center; }
  .work-supported__note { margin-inline: auto; text-align: center; }
  .impact-follow { grid-template-columns: minmax(0, 1fr); }
  .impact-follow__image { min-height: 0; height: clamp(340px, 92vw, 480px); }

  .impact-gallery-section {
    height: 100svh;
    min-height: 640px;
  }

  .impact-gallery__eyebrow {
    margin-bottom: 12px;
  }

  .impact-gallery__title {
    font-size: clamp(2.6rem, 11.7vw, 3.65rem);
  }

  .impact-gallery__cta {
    margin-top: 10px;
  }

}

@media (min-width: 761px) and (max-height: 679px) {
  .impact-gallery-section {
    min-height: 100svh;
  }

}

@media (max-width: 640px) {
  .impact-page {
    overflow: clip;
  }

  .site-header {
    padding-inline: 16px;
  }

  .brand {
    min-width: 104px;
  }

  .header-icon {
    width: 110px;
  }

  .inquire-link {
    min-height: 38px;
    padding: 0 16px;
    font-size: var(--text-label);
  }

  /* A full-screen mobile reading panel with balanced breathing room. Use a
     minimum, not a fixed height, so small screens and larger text can grow.
     The existing flex centring shares any extra space above and below. */
  .impact-intro__copy {
    min-height: 100svh;
    min-height: 100dvh;
    padding: 72px 24px;
  }
  .impact-intro { min-height: 0; padding-top: 0; }
  .impact-intro h2 {
    margin: var(--space-eyebrow) 0 var(--space-heading);
    font-size: clamp(3.8rem, 18vw, 5.6rem);
    line-height: var(--leading-display);
  }
  .impact-intro__body {
    gap: 18px;
  }

  .impact-intro__body p {
    line-height: var(--leading-body);
  }

  .work-supported__inner { padding-block: 3.5rem; }
  .work-supported__areas { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Stacked, the rows share rules: each keeps its top rule and only the last
     row draws the closing one, so no two rules ever sit together. */
  .work-supported__areas li { padding-block: 22px; border-block-end: 0; }
  .work-supported__areas li:last-child { border-block-end: 1px solid var(--line); }
  .work-supported__area { text-align: center; hyphens: auto; }

  .impact-follow {
    min-height: 0;
    padding: 16px 16px 48px;
    background: var(--warm-ivory);
  }

  .impact-follow__image {
    height: clamp(340px, 92vw, 480px);
    min-height: 0;
    border-radius: 20px 20px 0 0;
  }

  .impact-follow__content {
    min-height: 0;
    padding: 40px 24px 44px;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 20px 20px;
  }

  .impact-follow__mark {
    width: 112px;
    margin-bottom: 20px;
  }
}