/* ==========================================================================
   Rhino Action Group
   Static rebuild of the WordPress/Elementor site.
   Design tokens mirror the original Elementor global kit.
   ========================================================================== */

/* ------------------------------- Fonts ---------------------------------- */
@font-face {
  font-family: 'RAG Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Lora-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'RAG Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Lora-MediumItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'RAG Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
}

/* ------------------------------- Tokens --------------------------------- */
:root {
  --c-primary:      #18251B;
  --c-secondary:    #4C764C;
  --c-text:         #637463;
  --c-white:        #FFFFFF;
  --c-offwhite:     #FAF8F5;
  --c-cream:        #F1EFEB;
  --c-secondary-45: #4C764C73;
  --c-stone:        #D3CEC6;
  --c-gold:         #CFA059;
  --c-line:         #DAD5CE;
  --c-secondary-15: #4C764C26;
  --c-primary-88:   #18251BE0;
  --c-cream-65:     #F1EFEBA6;
  --c-cream-47:     #F1EFEB78;
  --c-sand:         #DFD5C4;
  --c-sand-dark:    #DACDB7;

  --font-head: 'RAG Lora', Georgia, serif;
  --font-body: 'RAG Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1280px;
  --logo-max:  800px;   /* header and footer logos share one size */
}

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--c-sand);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
svg { display: block; }
a { color: #000; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.15;
}
h1 { color: var(--c-white);   font-size: 5.5rem; }
h2 { color: var(--c-primary); font-size: 3.75rem; }
h3 { color: var(--c-primary); font-size: 1.875rem; }
h4 { color: var(--c-primary); font-size: 1.375rem; }
p  { margin: 0 0 1rem; }

@media (max-width: 1024px) {
  h1 { font-size: 4rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.7rem; }
}

.sr-only,
.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  background: var(--c-white); color: var(--c-primary);
  padding: 10px 16px; border-radius: 8px;
}

/* --------------------------- Shared helpers ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.section { position: relative; }

.pre-title {
  display: block;
  color: var(--c-secondary);
  font-size: 0.75rem;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
}

.text-secondary { color: var(--c-secondary) !important; }
.heading--stacked .text-secondary { display: block; }

.btn {
  display: inline-block;
  background-color: var(--c-secondary);
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 400;
  border: 0;
  border-radius: 30px;
  padding: 18px 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s ease;
}
.btn:hover, .btn:focus { background-color: var(--c-primary); color: var(--c-white); }

.photo-credit {
  position: absolute;
  right: 8px;
  bottom: 0;
  margin: 0;
  padding: 0 1rem 1rem 0;
  text-align: end;
  font-size: 11px;
  color: var(--c-stone);
  z-index: 2;
}
.photo-credit a { color: inherit; }
.photo-credit a:hover { color: var(--c-cream); }

/* Scroll reveal (mirrors Elementor's fadeIn entrance animation) */
.reveal { opacity: 0; transition: opacity .9s ease; }
.reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transition: none; }
}

/* =============================== HEADER ================================= */
.site-header {
  background: transparent;
  padding: 0 2rem;
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.site-header__logo {
  display: block;
  width: 100%;
  max-width: var(--logo-max);
  padding: 10px;
}

/* ================================ HERO ================================== */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0rem 2rem 7rem;
  background-color: #000;
  background-image: url('../assets/img/hero-rhino.webp');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #000000CC 0%, #0000002B 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.hero__title,
.hero__text,
.hero__cta { width: 56%; }
.hero .mainnav { width: 100%; }

.hero__title { margin: 4rem 0 0; }
.hero__title .pre-title { color: var(--c-stone); }
.hero__text { color: var(--c-stone); }
.hero__text p:last-child { margin-bottom: 0; }

/* On desktop the photograph sits beside the copy, so no spacer is needed. */
.hero__spacer { display: none; }

@media (max-width: 1024px) {
  /* The photograph moves out of the section background and onto its own
     element in the flow, so the copy always starts exactly where the image
     ends — no matter how tall the menu above it happens to be. */
  .hero { background-image: none; padding-top:0;}
  .hero__title, .hero__text, .hero__cta, .hero .mainnav { width: 100%; }
  .hero__inner { align-items: stretch; }

  .hero__spacer {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1100 / 1130;   /* the image's own dimensions */
    background-image: url('../assets/img/hero-rhino.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  /* The photograph now paints inside .hero__inner, which stacks above
     .hero__overlay — so the spacer carries its own copy of the gradient. */
  .hero__spacer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, #000000CC 0%, #0000002B 100%);
    pointer-events: none;
  }
}
@media (min-width: 1025px) {
  .hero { min-height: 90vh; }
}

/* ------------------------------ Main nav -------------------------------- */
.mainnav-slot { width: 100%; }
.mainnav { position: relative; display: flex; justify-content: center; align-items: center; }
.mainnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.mainnav__list a {
  display: block;
  padding: 13px 18px;
  color: var(--c-sand);
  font-family: var(--font-body);
  transition: color .3s ease;
}
.mainnav__list a:hover,
.mainnav__list a:focus { color: var(--c-white); }

.mainnav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Fixed hit area, so the target height does not depend on the label's
     font metrics. */
  height: 3rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* The toggle sits over the dark hero, so it is light rather than the
     dark ink used for the desktop nav links. */
  color: var(--c-stone);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: color .3s ease;
}
.mainnav__toggle:hover,
.mainnav__toggle:focus-visible { color: var(--c-white); }

/* "Menu" while collapsed, "Close" while open. */
.mainnav__toggle-text--close { display: none; }
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-text--close { display: inline; }
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-text--open  { display: none; }

@media (max-width: 767px) {
  /* Let the photograph run straight up to the site header, and float the
     toggle over the top of it rather than pushing it down. */
  .hero { padding-top: 0; }
  /* The slot rather than the nav leaves the flow, so it never adds an extra
     flex gap at the top of the hero. */
  .hero .mainnav-slot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }
  .mainnav__toggle { display: flex; }
  .mainnav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--c-offwhite);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }
  .mainnav__list.is-open { display: flex; }
  .mainnav__list a {
    padding: 1rem;
    font-size: 16px;
    color: var(--c-primary);
    text-align: center;
  }
  .mainnav__list a:hover,
  .mainnav__list a:focus { color: var(--c-secondary); }
}

/* Pinned state — added by main.js once the menu reaches the top of the
   viewport. The nav sits inside the hero, so `position: sticky` would release
   it as soon as the hero scrolled past; fixed positioning carries it down the
   whole page instead, with .mainnav-slot holding its place in the flow. */
.hero .mainnav.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--c-primary-88);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid #FFFFFF14;
  box-shadow: 0 8px 24px #00000026;
}

/* Pinning happens at the exact moment the menu reaches y=0, so the bar must
   not move — only the background fades up behind it. */
.mainnav { transition: background-color .3s ease, box-shadow .3s ease; }

/* Anchor links must clear the pinned menu when they land. */
[id^="section-"] { scroll-margin-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
  .mainnav { transition: none; }
}

/* =============================== ABOUT ================================== */
.section--about { padding: 9rem 2rem; }
.about__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.full-width { width: 100%; }

.section__heading { margin: 0; }

.blockquote {
  width: calc(50% - 2rem);
  margin: 0;
}
.blockquote blockquote {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--c-gold);
}
.blockquote__content {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-primary);
  line-height: 1.35;
  margin: 0 0 .75rem;
}
.blockquote__author { font-size: 12px; font-style: normal; }

.about__body { width: calc(50% - 2rem); }
.about__body p:last-child { margin-bottom: 0; }

/* Bordered panel used for "Our Purpose", "Why it Matters", bank details */
.panel {
  padding: 3rem;
  border: 1px solid var(--c-gold);
  border-radius: 20px;
}
.panel__title { margin: 0; }
.panel__description { margin: 0; }

@media (min-width: 1025px) {
  .panel--split {
    display: flex;
    column-gap: 4rem;
  }
  .panel--split .panel__title { width: 530px; flex: none; }
  .panel--split .panel__description { margin-top: -5px; }
  .panel--narrow-title .panel__title { width: 130px; }
}

@media (max-width: 1024px) {
  .section--about { padding: 9rem 2rem; }
  .about__inner { align-items: flex-start; gap: 3rem; }
}
@media (max-width: 767px) {
  .section--about { padding: 6rem 2rem; }
  .blockquote, .about__body { width: 100%; }
  .panel { padding: 2rem; }
}

/* ============================= WHAT WE DO =============================== */
.section--work {
  padding: 9rem 2rem;
  border-top: 1px solid var(--c-line);
  background-color: var(--c-sand-dark);
}
.work__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.half { width: calc(50% - 2rem); }
.section__intro { color: var(--c-text); }
.section__intro p:last-child { margin-bottom: 0; }

.cta {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  box-shadow: 3px 3px 17px 0 #FFFFFF;
  overflow: hidden;
}
/* Wrapper lets the credit sit over the photo without inheriting the hover zoom */
.cta__media {
  position: relative;
  display: grid;
  overflow: hidden;
}
.photo-credit--cta {
  right: 0;
  padding: 4px 8px;              /* base padding becomes the pill's inner spacing */
  margin: 0 1rem 1rem 0;         /* ...so the offset from the corner moves to margin */
  color: var(--c-white);
  background-color: rgba(0, 0, 0, .5);
  border-radius: 4px;
}

.cta__bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1.5s cubic-bezier(.25, .1, .25, 1);
}
.cta:hover .cta__bg { transform: scale(1.1); }
.cta__content {
  text-align: start;
  padding: 5rem 3rem;
  background-color: var(--c-stone);
}
.cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5em;
  height: 3.5em;
  font-size: 24px;
  border-radius: 50%;
  background-color: var(--c-secondary-15);
  margin-bottom: 20px;
}
.cta__icon svg { width: 1em; height: 1em; font-size: 24px; fill: var(--c-secondary); }
.cta__title {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--c-primary);
}
.cta__description { color: var(--c-text); }

@media (min-width: 768px) {
  .cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .cta--flip .cta__content { order: -1; }
}
@media (max-width: 1024px) {
  .work__inner { gap: 3rem; }
}
@media (max-width: 767px) {
  .section--work { padding: 6rem 2rem; }
  .half { width: 100%; }
  .cta__content { padding: 2rem; }
  .cta__bg { min-height: 220px; }  /* stacked layout needs an explicit image height */
}

/* =========================== MONITORING CENTRE ========================== */
.section--monitoring {
  padding: 9rem 2rem;
  border-top: 1px solid var(--c-line);
}
.monitoring__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.gallery {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gallery__item { margin: 0; overflow: hidden; border-radius: 8px; }
/* Maps must never be cropped — they render at their natural aspect ratio. */
.gallery__item img { width: 100%; height: auto; }

/* Both maps are 460px tall (500x460 and 660x460), so giving each column a
   flex-grow equal to its natural width sizes the pair to a matching height
   with nothing trimmed off. */
.gallery__item--sa { flex: 500 1 0; }
.gallery__item--wc { flex: 660 1 0; }

@media (max-width: 1024px) {
  .monitoring__inner { gap: 3rem; }
}
@media (max-width: 767px) {
  .section--monitoring { padding: 6rem 2rem; }
  /* Side by side gets too small to read on a phone — stack them instead. */
  .gallery__item--sa,
  .gallery__item--wc { flex: 0 0 100%; }
}

/* ============================= OBJECTIVES =============================== */
.section--objectives {
  padding: 9rem 2rem;
  border-top: 1px solid var(--c-line);
  background-color: var(--c-sand-dark);
  counter-reset: objective-counter;
}
.objectives__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.objectives__heading { width: 300px; padding-bottom: 3.5rem; }
.objectives__intro   { width: calc(100% - 530px); padding-bottom: 3.5rem; }
.objectives__intro p { margin-bottom: 0; }

.objective { width: 100%; padding: 1.5rem 1rem; }
.objective + .objective { border-top: 1px solid var(--c-secondary-45); }

.objective__wrapper {
  counter-increment: objective-counter;
  position: relative;
  display: flex;
  gap: 15px;
}
.objective__wrapper::before {
  content: counter(objective-counter, decimal-leading-zero);
  display: block;
  color: var(--c-secondary-45);
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 600;
  line-height: 36px;
}
.objective__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 50%;
  background-color: var(--c-secondary-15);
}
.objective__icon svg { width: 1em; height: 1em; font-size: 18px; fill: var(--c-secondary); }

.objective__title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}
.objective__description {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

@media (min-width: 1025px) {
  .objective__wrapper { flex-direction: row; }
  .objective__icon { margin-left: 114px; }
  .objective__content { display: flex; flex: 1; }
  .objective__title { width: 300px; flex: none; line-height: 36px; }
  .objective__description { width: calc(100% - 300px); margin-top: 9px; }
}
@media (max-width: 1024px) {
  .objectives__heading { width: 100%; }
  .objectives__intro { width: calc(100% - 300px); }
  .objective__wrapper { flex-direction: row; align-items: flex-start; }
  .objective__content { flex: 1; }
}
@media (max-width: 767px) {
  .section--objectives { padding: 6rem 2rem; }
  .objectives__heading { width: 100%; padding-bottom: 0; }
  .objectives__intro { width: 100%; padding: 3rem 0; }
  .objective { padding: 1.5rem 0; }
}

/* ============================== PARTNERS ================================ */
.section--partners { padding: 9rem 1rem; }
.partners__inner {
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.partner {
  width: 180px;
  max-width: 180px;
  padding: 0.7rem;
  background-color: var(--c-white);
  border-radius: 8px;
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, .1);
  transition: background-color .3s ease;
}
.partner:hover { background-color: var(--c-offwhite); }
.partner img { width: 100%; aspect-ratio: 1; object-fit: contain; }

@media (max-width: 767px) {
  .section--partners { padding: 6rem 2rem; }
}

/* ============================== DOCUMENTS =============================== */
.section--documents {
  padding: 9rem 2rem;
  background-color: var(--c-sand-dark);
}
.documents__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.doclist {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.doclist a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.8em 1.4em;
  background: #fff;
  border-radius: 100px;
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, .1);
  transition: all .2s ease;
  color: var(--c-primary);
}
.doclist a:hover { background: transparent; box-shadow: none; }
.doclist__icon svg { width: 1.6rem; height: 1.6rem; fill: var(--c-secondary); transition: fill .3s ease; }
.doclist a:hover .doclist__icon svg { fill: var(--c-primary); }
.doclist__text { transition: color .3s ease; font-size: 0.875rem;}

@media (min-width: 1024px) {
  .doclist { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}
@media (max-width: 1023px) {
  .doclist li + li { margin-top: 0.5rem; }
}
@media (max-width: 767px) {
  .section--documents { padding: 6rem 2rem; }
}

/* =============================== IMPACT ================================= */
.section--impact {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 60vh;
  padding: 0 1rem 6rem;
  background-image: url('../assets/img/impact-rhinos-veld.webp');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Shared by the Impact and Support heroes — the gradient is what makes the
   white heading readable over the photograph. */
.impact__overlay,
.support-hero__overlay {
  position: absolute;
  inset: 0;
  opacity: .97;
  background-image: linear-gradient(180deg, #18251B00 0%, #1D211E 100%);
  pointer-events: none;
}
.impact__inner { position: relative; z-index: 1; }
.impact__heading { width: 50%; color: var(--c-white); }
.impact__heading .pre-title { color: var(--c-line); }
.photo-credit--impact { right: 0; padding: 0 1rem 3rem 0; }

@media (max-width: 767px) {
  .impact__heading { width: 100%; }
}

/* ------------------------------ Counters -------------------------------- */
.section--counters {
  padding: 0 2rem;
  background-color: var(--c-cream);
  display: flow-root;
}
.counters__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: -16px auto 3rem;
  position: relative;
  z-index: 2;
}
.counter {
  background-color: var(--c-offwhite);
  padding: 2rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  box-shadow: 3px 3px 17px 0 rgba(0, 0, 0, .1);
  text-align: center;
}
.counter__title {
  color: var(--c-secondary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.counter__number-wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
}
.counter--ha .counter__suffix { font-size: 0.5em; margin-left: .15em; }

@media (max-width: 1024px) {
  .counters__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .counters__inner { grid-template-columns: 1fr; }
}

/* ---------------------------- Impact copy ------------------------------- */
.section--impact-text {
  padding: 0 2rem 9rem;
  background-color: var(--c-cream);
}
.impact-text__columns { columns: 2; column-gap: 3rem; }
.impact-text__columns p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .section--impact-text { padding: 0rem 2rem 6rem; }
  .impact-text__columns { columns: 1; }
}

/* ------------------------- Poaching statistics -------------------------- */
.poaching-chart {
  --chart-max: 1215;          /* tallest bar sets the scale */
  --chart-bar: var(--c-secondary);
  --chart-bar-hover: var(--c-primary);

  margin: 4rem 0 0;
  padding: 3rem;
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 20px;
}
.poaching-chart__caption { margin-bottom: 2.5rem; }
.poaching-chart__title {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
}
.poaching-chart__subtitle {
  margin: 0;
  font-size: .9375rem;
}

/* overflow-x forces overflow-y to compute as auto, and sub-pixel rounding in the
   plot is enough to raise a full-height scrollbar — pin the vertical axis shut. */
.poaching-chart__scroll { overflow-x: auto; overflow-y: hidden; }
.poaching-chart__plot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 320px;
  height: 420px;
  padding-top: 64px;          /* headroom for the value labels */
  padding-bottom: 2px;        /* absorbs the rounding so nothing real is clipped */
}
.poaching-chart__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* Bar area: baseline plus one recessive gridline behind each bar */
.poaching-chart__track {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--c-stone);
}
.poaching-chart__track::before {
  content: '';
  position: absolute;
  top: -64px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--c-line);
}

.poaching-chart__bar {
  position: relative;
  width: 12px;
  max-width: 45%;
  height: calc(var(--v) / var(--chart-max) * 100%);
  background-color: var(--chart-bar);
  border-radius: 4px 4px 0 0;
  transition: background-color .2s ease;
}
.poaching-chart__col:hover .poaching-chart__bar { background-color: var(--chart-bar-hover); }

/* Value labels read bottom-to-top so 18 years fit at any width */
.poaching-chart__value {
  position: absolute;
  right: 0;
  bottom: calc(var(--v) / var(--chart-max) * 100% + 10px);
  left: 0;
  display: flex;
  justify-content: center;
}
.poaching-chart__value > span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  padding: 4px 1px;
  background-color: var(--c-white);   /* masks the gridline behind the label */
  color: var(--c-text);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .02em;
}
.poaching-chart__col--peak .poaching-chart__value > span,
.poaching-chart__col--latest .poaching-chart__value > span {
  color: var(--c-primary);
  font-weight: 600;
}

.poaching-chart__year {
  padding-top: .75rem;
  color: var(--c-text);
  font-size: .8125rem;
  line-height: 1;
  text-align: center;
}

.poaching-chart__source {
  margin: 1.5rem 0 0;
  color: var(--c-text);
  font-size: .8125rem;
}

.poaching-chart__data { margin-top: 1.25rem; }
.poaching-chart__data > summary {
  color: var(--c-primary);
  font-size: .875rem;
  cursor: pointer;
}
.poaching-chart__data-scroll { overflow-x: auto; }
.poaching-chart__data table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: .875rem;
}
.poaching-chart__data th,
.poaching-chart__data td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
}
.poaching-chart__data thead th { color: var(--c-primary); }
.poaching-chart__data tbody th { color: var(--c-text); font-weight: 400; }

/* Bars grow in as the figure scrolls into view */
.poaching-chart .poaching-chart__bar { height: 0; }
.poaching-chart .poaching-chart__value { bottom: 10px; opacity: 0; }
.poaching-chart.is-visible .poaching-chart__bar {
  height: calc(var(--v) / var(--chart-max) * 100%);
  transition: height .8s cubic-bezier(.22,.85,.3,1) calc(var(--i) * 45ms), background-color .2s ease;
}
.poaching-chart.is-visible .poaching-chart__value {
  bottom: calc(var(--v) / var(--chart-max) * 100% + 10px);
  opacity: 1;
  transition: bottom .8s cubic-bezier(.22,.85,.3,1) calc(var(--i) * 45ms),
              opacity .4s ease calc(var(--i) * 45ms + .3s);
}

@media (max-width: 1024px) {
  .poaching-chart { padding: 2.5rem 2rem; }
  .poaching-chart__plot { height: 380px; }
}
@media (max-width: 767px) {
  .poaching-chart { margin-top: 3rem; padding: 1.75rem 1rem; }
  .poaching-chart__plot { min-width: 250px; height: 320px; gap: 2px; }
  .poaching-chart__bar { width: 8px; }
  .poaching-chart__value > span,
  .poaching-chart__year { font-size: .6875rem; }
  /* Years turn on their side once the columns are narrower than "2008" */
  .poaching-chart__year > span {
    display: inline-block;
    writing-mode: vertical-rl;
    rotate: 180deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poaching-chart .poaching-chart__bar { height: calc(var(--v) / var(--chart-max) * 100%); }
  .poaching-chart .poaching-chart__value {
    bottom: calc(var(--v) / var(--chart-max) * 100% + 10px);
    opacity: 1;
  }
  .poaching-chart .poaching-chart__bar,
  .poaching-chart .poaching-chart__value { transition: none; }
}

/* ============================== SUPPORT ================================= */
/* Same treatment as the Impact hero: full-bleed photograph, dark gradient,
   heading sitting bottom-left. */
.section--support-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 60vh;
  padding: 0 1rem 6rem;
  background-image: url('../assets/img/support-donate.webp');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}
.support-hero__inner { position: relative; z-index: 1; }
.support-hero__heading { width: 50%; color: var(--c-white); }
.support-hero__heading .pre-title { color: var(--c-line); }

@media (max-width: 767px) {
  .support-hero__heading { width: 100%; }
}

.section--donate {
  padding: 4rem 2rem 9rem;
  border-top: 1px solid var(--c-line);
}
.donate__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.donate__heading { width: 100%; margin-bottom: 1.4rem; }
.donate__copy { width: 50%; padding-right: 3rem; }
.donate__bank { width: 50%; }
.donate__bank p:last-child { margin-bottom: 0; }
.donate__bank strong { color: var(--c-primary); }

@media (max-width: 1024px) {
  .donate__copy { width: 100%; padding: 0 0 2rem; }
  .donate__bank { width: 100%; }
}
@media (max-width: 767px) {
  .section--donate { padding: 4rem 2rem 6rem; }
  .donate__bank { padding: 2rem; }
}

/* =============================== CONTACT ================================ */
/* The copy, form and credentials now live inside .section--donate, so this
   section carries nothing but the photograph — no overlay over it. */
/* An <img> rather than a background, so the whole photograph is shown instead
   of being cropped to the band by `cover`. The band's height now follows the
   image's own 1920x1279 ratio. */
.section--contact {
  border-top: 1px solid var(--c-line);
}
.section--contact img { width: 100%; }
.contact__inner {
  max-width: 640px;
  position: relative;
  text-align: center;
}
/* Separates the Get In Touch block from the copy/bank columns above it. */
.section--donate .contact__inner { margin-top: 5rem; }

.contact__heading { width: calc(50% - 2rem); }
.contact__intro   { width: calc(50% - 2rem); color: var(--c-primary); }
.contact__intro p { margin-bottom: 0; }

/* Phone and email, offered above the form as the direct alternative to it. */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem 1rem;
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}
.contact-details li { position: relative; }
.contact-details li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -.5rem;
  width: 1px;
  height: 1.5rem;
  transform: translateY(-50%);
  background-color: var(--c-stone);
}
/* Padding rather than font size does the work here, so the tap target clears
   the 44px minimum without the details shouting louder than the heading. */
.contact-details a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: 100px;
  color: var(--c-primary);
  transition: color .3s ease, background-color .3s ease;
}
.contact-details a:hover,
.contact-details a:focus {
  color: var(--c-secondary);
  background-color: var(--c-secondary-15);
}
.contact-details__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--c-secondary);
}

@media (max-width: 767px) {
  .contact-details { flex-direction: column; gap: .25rem; }
  .contact-details li + li::before { display: none; }
}

.contact-form { width: 100%; max-width: 720px; }
.contact-form__fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.75rem -1.5rem;
}
.field { padding: 0 0.75rem; margin-bottom: 1.5rem; }
.field--full { width: 100%; }
.field--half { width: 50%; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  background-color: #fff;
  color: var(--c-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  border: 1px solid var(--c-line);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-text); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--c-secondary);
  outline-offset: 1px;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.btn--submit { width: 100%; }
.contact-form.is-sending .btn--submit { opacity: .6; pointer-events: none; }

.form-message {
  margin: 30px 0 0;
  padding: 20px 5px;
  text-align: center;
  border-radius: 0.75rem;
  display: none;
}
.form-message.is-visible { display: block; }
.form-message.is-success { background: #bef264; color: var(--c-secondary); }
.form-message.is-error   { background: #fecaca; color: #7f1d1d; }

@media (max-width: 1024px) {
  .contact__inner { align-items: center; gap: 3rem; }
  .contact-form { max-width: 100%; }
}
@media (max-width: 767px) {
  .section--donate .contact__inner { margin-top: 3rem; }
  .contact__heading, .contact__intro { width: 100%; }
  .field--half { width: 100%; }
}

/* ---------------------------- Credentials ------------------------------- */
.credentials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 9rem;
}
.credential { width: 200px; text-align: center; }
.credential img { width: 154px; margin: 0 auto; transition: transform .3s ease; }
.credential__title {
  margin: 1rem 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--c-text);
}
.credential__number {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--c-text);
}
.credential--izinga { width: 160px; padding: 10px; }
.credential--izinga img { width: 100%; border-radius: 8px; }

.izinga-tooltip { position: relative; display: inline-block; }
.izinga-tooltiptext {
  visibility: hidden;
  opacity: 0;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 6px 8px;
  border-radius: 6px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: max-content;
  max-width: 240px;
  font-size: .85rem;
  line-height: 1.4;
  transition: opacity .3s ease;
}
.izinga-tooltip:hover .izinga-tooltiptext { visibility: visible; opacity: 1; }

/* =============================== FOOTER ================================= */
.site-footer {
  padding: 5rem 2rem 2rem;
  background-color: var(--c-primary);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.site-footer__col { padding: 1rem 0 3rem; align-self: flex-start; }

/* The logo sits on its own full-width row above the columns, so all four
   column headings start on the same line beneath it. */
.site-footer__brand {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
/* Same box as .site-header__logo, so both marks render at the same size. */
.site-footer__logo { width: 100%; max-width: var(--logo-max); padding: 10px; }

.footer-list, .footer-nav {
  list-style: none;
  margin: 0;
  padding: 0 0 0.8rem;
}
.footer-list li, .footer-nav li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--c-cream-65);
  padding-block-end: .3rem;
  margin-block-start: .3rem;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.footer-list a, .footer-nav a {
  color: var(--c-cream-65);
  display: flex;
  align-items: baseline;
  gap: 10px;
  transition: color .3s ease;
}
.footer-list a:hover, .footer-nav a:hover { color: var(--c-white); }

.footer-list__heading {
  color: var(--c-cream-47) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: 1.2rem !important;
}
/* The nav list now carries its own heading as its first item, exactly like the
   other footer columns, so it inherits their spacing rather than overriding it. */

.dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-secondary);
  display: inline-block;
  animation: pulseDot 1.8s infinite ease-in-out;
  transform-origin: center;
}
@keyframes pulseDot {
  0%, 100% { opacity: .6; filter: brightness(.8) drop-shadow(0 0 2px #4caf50); transform: scale(1); }
  50%      { opacity: 1;  filter: brightness(1.8) drop-shadow(0 0 8px #8dff8d); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.footer-credit {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6em;
  color: var(--c-cream-65);
  margin: 1rem 0 0;
}
.footer-credit a { color: inherit; padding: 0.5rem 0; transition: color .3s ease;}
.footer-credit a:hover { color: var(--c-cream-47); }

.site-footer__copyright {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-cream-47);
  margin: 0;
}
.site-footer__by { width: 100%; display: flex; justify-content: center; }
.site-footer__by a { padding: 10px; line-height: 18px; }
.site-footer__by svg { width: 21px; height: 21px; fill: #EC008C; transition: fill .3s ease; }
.site-footer__by a:hover svg { fill: var(--c-cream); }

@media (min-width: 768px) {
  .site-footer__col--brand { width: 34%; }
  .site-footer__col:not(.site-footer__col--brand) { width: 22%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Matched on the modifier rather than nth-child, so inserting the logo row
     above the columns cannot shift which column each width lands on. */
  .site-footer__col--brand { width: 100%; }
  .site-footer__col:not(.site-footer__col--brand) { width: 33.333%; }
}
@media (max-width: 767px) {
  /* One column per row, so everything reads centred rather than ragged left. */
  .site-footer__col { width: 100%; text-align: center; }
  /* The rows are flex containers (dot + label), so centring the text is not
     enough — the flex line itself has to be centred too. */
  .footer-list li,
  .footer-nav li,
  .footer-list a,
  .footer-nav a { justify-content: center; }
}