/* =========================================================
   GLOBALINK MENTORS — Stylesheet
   Palette: forest green (growth) / warm red (energy) /
   marigold orange (warmth) / ink black / warm paper white
   Type: Fraunces (display, warm serif) + Inter (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* core palette */
  --ink:        #1C1712;
  --ink-soft:   #3A3129;
  --paper:      #FBF6EC;
  --paper-dim:  #F1E9D8;
  --green:      #07a84de7;
  --green-dark: #084F27;
  --green-tint: #E4EFE2;
  --red:        #ec0b0b;
  --red-dark:   #8F1D1D;
  --orange:     #E97F1B;
  --gold:       #F0AC3A;
  --white:      #FFFFFF;

  /* type */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;

  /* layout */
  --max: 1180px;
  --radius: 6px;
  --shadow: 0 12px 30px rgba(28, 23, 18, 0.10);
}
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
}

.logo-circle {
    width: 85px;
    height: 85px;
    min-width: 85px;
    background: #ffffff;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 3D effect */
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.30),
        0 10px 20px rgba(0, 0, 0, 0.18),
        inset 0 3px 5px rgba(255, 255, 255, 0.9),
        inset 0 -4px 6px rgba(0, 0, 0, 0.10);

    overflow: hidden;
}

.brand-logo {
    width: 65px;
    height: 65px;
    display: block;
    object-fit: contain;
}

.brand-word {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.brand-word span {
    color: #0E6B37;
}



*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 0.5em;
  color:var(--ink);
}
p{ margin:0 0 1em; color:var(--ink-soft); }
.container{ max-width:var(--max); margin:0 auto; padding:0 28px; }
section{ padding:88px 0; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .column {
    width: 100%; /* Stacks columns vertically on phones */
  }
}
/* ---------- eyebrow / kicker ---------- */
.kicker{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--green);
  margin:0 0 10px;
}
.kicker.on-dark{ color:var(--gold); }
.kicker.red{ color:var(--red); }

.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:0.98rem;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--green); color:var(--white); box-shadow:0 8px 20px rgba(14,107,55,0.30); }
.btn-primary:hover{ background:var(--green-dark); }
.btn-red{ background:var(--red); color:var(--white); box-shadow:0 8px 20px rgba(198,43,43,0.30); }
.btn-red:hover{ background:var(--red-dark); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline.on-dark{ border-color:var(--white); color:var(--white); }
.btn-outline.on-dark:hover{ background:var(--white); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--green); padding:8px 4px; }
.btn-ghost:hover{ color:var(--green-dark); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* =========================================================
   HEADER / NAV  — logo sits between Services and Impact
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#07ce22eb;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(28,23,18,0.08);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,30px);
}
.nav-links{ display:flex; align-items:center; gap:clamp(10px,2vw,26px); flex-wrap:wrap; }
.nav-links a{
  font-weight:600; font-size:0.95rem; color:var(--white);
  font-size: larger;
  padding:8px 2px; position:relative;
}
.nav-links a {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    padding: 8px 6px;
    position: relative;

    /* 3D text effect */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.35),
        2px 2px 0 rgba(0, 0, 0, 0.25),
        3px 3px 5px rgba(0, 0, 0, 0.35);

    transition: all 0.3s ease;
}

/* 3D effect when hovering */
.nav-links a:hover {
    transform: translateY(-3px);
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.3),
        4px 5px 8px rgba(0, 0, 0, 0.4);

    color: #ffffff;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand svg{ height:44px; width:44px; }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.1; color:var(--ink); }
.brand-word span{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.62rem; letter-spacing:0.08em; color:var(--red); text-transform:uppercase; }

.nav-cta{ flex-shrink:0; }
.nav-toggle{
  display:none; background:none; border:2px solid var(--ink); border-radius:8px;
  width:42px; height:38px; cursor:pointer; padding:0; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; position:absolute; left:9px; right:9px; height:2px; background:var(--ink);
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

@media (max-width: 940px){
  .nav{ justify-content:space-between; flex-wrap:wrap; }
  .nav-toggle{ display:block; order:2; }
  .brand{ order:1; }
  .nav-cta{ order:3; display:none; }
  .nav-links{
    order:4; width:100%; max-height:0; overflow:hidden; flex-direction:column; gap:0;
    transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:520px; padding-top:12px; }
  .nav-links a{ width:100%; padding:12px 4px; border-bottom:1px solid rgba(28,23,18,0.06); }
  .nav.mobile-open .nav-cta{ display:block; order:5; width:100%; text-align:center; margin-top:10px; }
  .nav.mobile-open .nav-cta .btn{ width:100%; justify-content:center; }
}

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    gap: 8px; /* reduce space between links */
}

.nav-links a {
    font-weight: 700;
    font-size: 1.25rem; /* bigger font */
    color: var(--white);
    padding: 8px 6px;
    position: relative;
    display: inline-block;

    /* 3D effect */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.25),
        3px 3px 5px rgba(0, 0, 0, 0.35);

    transition: all 0.3s ease;
}
.navbar {
    width: 100%;
    height: 98px;
    background: #20a900;
}

.nav-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 5.5%;
}

/* Logo */
.logo {
    flex-shrink: 0;
    margin-right: 35px;
}

.logo img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

/* Navigation */
.nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    padding: 10px 5px;
}

/* Active page */
.nav-links a.active {
    border-bottom: 2px solid red;
}

/* Donate button */
.nav-links .donate-btn {
    background: #f10d0d;
    padding: 17px 30px;
    border-radius: 35px;
    margin-left: 10px;
}

.nav-links a:hover {
    transform: translateY(-3px);

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 0 rgba(0, 0, 0, 0.3),
        4px 5px 8px rgba(0, 0, 0, 0.4);
}
/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */
.page-hero{
  background:var(--ink);
  background-image: url('../images/b1.jpg');
  background-size: cover;
  color:var(--paper);
  padding:76px 0 64px;
  position:relative;
  overflow:hidden;

}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .kicker{ color:var(--gold); }
.page-hero h1{ color:var(--white); font-size:clamp(2.3rem,5vw,3.6rem); max-width:16ch; }
.page-hero p{ color:#E7DFCF; max-width:56ch; font-size:1.08rem; }
.breadcrumb{ font-size:0.85rem; color:#C9BFA9; margin-bottom:18px; }
.breadcrumb a{ color:var(--gold); }

/* =========================================================
   HOME — HERO
   ========================================================= */
.hero{
  background:var(--ink); 
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding:70px 0 0;
  background-image: url('../images/b3.jpg');
  background-size: cover;
  font-weight: 300;
  
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  
  pointer-events:none;
}

.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  padding-bottom:56px;


}

  
.hero-copy .kicker{ color:var(--gold); }
.hero-copy h1{ color:var(--white); font-size:clamp(2.5rem,5.2vw,3.9rem); max-width:14ch; }
.hero-copy p{ color:#E7DFCF; font-size:1.12rem; max-width:48ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:34px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--gold); }
.hero-stats div span{ font-size:0.82rem; color:#C9BFA9; text-transform:uppercase; letter-spacing:0.04em; }

/* --- Home hero image slider (3 rotating images) --- */
.slider{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
  border:6px solid rgba(251,246,236,0.08);
}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
}
.slide.is-active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.slide-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 24px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color:var(--white);
}
.slide-caption .tag{ display:inline-block; background:var(--red); color:var(--white); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:999px; margin-bottom:8px; }
.slide-caption h3{ color:var(--white); margin:0; font-size:1.3rem; }
.slider-dots{
  position:absolute; top:18px; right:18px; z-index:5; display:flex; gap:8px;
}
.slider-dots button{
  width:9px; height:9px; border-radius:50%; border:2px solid rgba(255,255,255,0.7);
  background:transparent; padding:0; cursor:pointer;
}
.slider-dots button.is-active{ background:var(--gold); border-color:var(--gold); }
.slider-arrows{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 12px; pointer-events:none; }
.slider-arrows button{
  pointer-events:all; width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(28,23,18,0.55); color:var(--white); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.slider-arrows button:hover{ background:var(--red); }

/* =========================================================
   MARQUEE / TICKER (used for home strip + partners)
   ========================================================= */
.marquee-band{ background:var(--red); color:var(--white); overflow:hidden; padding:14px 0; }
.marquee-band .marquee-track{ display:flex; gap:48px; width:max-content; animation:marquee 26s linear infinite; }
.marquee-band .marquee-track span{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; white-space:nowrap; opacity:0.95; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
h2{
  text-align: center;
  font-weight: 100;

}
h1{
  text-align: center;
  font-weight: 100;
  font-weight: bold;

}
.cta-band{
  padding: auto;
}
/* =========================================================
   COUNTERS
   ========================================================= */
.counters{ background:var(--green); color:var(--white); position:relative; overflow:hidden; }
.counters::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(14,107,55,0.5), rgba(198,43,43,0.35));
  opacity:0.5;
}
.counters .container{ position:relative; z-index:2; }
.counter-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
.counter-card{ padding:20px; border-left:1px solid rgba(255,255,255,0.15); }
.counter-card:first-child{ border-left:none; }
.counter-num{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--gold); display:flex; justify-content:center; gap:4px; }
.counter-label{ text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; color:#E7DFCF; margin-top:6px; }
@media (max-width:760px){
  .counter-grid{ grid-template-columns:1fr; gap:20px; }
  .counter-card{ border-left:none; border-top:1px solid rgba(255,255,255,0.15); padding-top:24px; }
  .counter-card:first-child{ border-top:none; }
}

/* =========================================================
   CARD GRIDS (services / values / etc.)
   ========================================================= */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:920px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr; } }

.card {
  background:var(--orange); border-radius:var(--radius); padding:30px 26px;
  box-shadow:var(--shadow); border-top:4px solid var(--green);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(28,23,18,0.14); }
.card:nth-child(3n+2){ border-top-color:var(--red); }
.card:nth-child(3n+3){ border-top-color:var(--orange); }
.card .icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--green-tint); color:var(--green); margin-bottom:16px; font-size:1.4rem;
}
.card h3{ font-size:1.2rem; }

.alt-bg{ background:var(--paper-dim); }
.dark-bg{ background:var(--ink); color:var(--paper); }
.dark-bg h2, .dark-bg h3{ color:var(--white); }
.dark-bg p{ color:#DDD3BE; }

/* =========================================================
   ABOUT
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split.reverse .split-media{ order: 1px;; }
.split-media img{ border-radius:14px; box-shadow:var(--shadow); }
.stat-strip{ display:flex; gap:30px; margin-top:26px; flex-wrap:wrap; }
.stat-strip div strong{ font-family:var(--font-display); font-size:1.8rem; color:var(--red); display:block; }
.stat-strip div span{ font-size:0.8rem; text-transform:uppercase; color:var(--ink-soft); }

.split-image {
 image: url('../images/p2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
}

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:920px){ .values-grid{ grid-template-columns:repeat(2,1fr); } .split{ grid-template-columns:1fr; } .split.reverse .split-media{ order:0; } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ text-align:left; padding:24px 20px; border-radius:10px; background:var(--orange); box-shadow:var(--shadow); }
.value-card .num{ font-family:var(--font-display); font-size:1.6rem; color:var(--white); }

.timeline{ position:relative; padding-left:30px; border-left:3px solid var(--green-tint); }
.timeline-item{ position:relative; padding-bottom:36px; }
.timeline-item::before{
  content:''; position:absolute; left:-38px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--green); border:3px solid var(--paper);
}
.timeline-item .year{ font-family:var(--font-display); color:var(--red); font-weight:600; }
h2{
  text-align: center;
  font-weight: 100;
  color: hsl(0, 100%, 45%);
}
/* =========================================================
   TEAM
   ========================================================= */
.team-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.team-filter button{
  border:2px solid var(--ink); background:transparent; padding:9px 18px; border-radius:999px;
  font-weight:600; cursor:pointer; font-size:0.85rem; color:var(--ink);
}
.team-filter button.is-active{ background:var(--ink); color:var(--paper); }

.team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
@media (max-width:1100px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .team-grid{ grid-template-columns:1fr; } }

.team-card{
  background:var(--white); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; border-bottom:4px solid var(--green); transition:transform .2s ease;
}
.team-card:nth-child(3n+2){ border-bottom-color:var(--red); }
.team-card:nth-child(3n+3){ border-bottom-color:var(--orange); }
.team-card:hover{ transform:translateY(-6px); }
.team-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--green-tint); }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-info{ padding:16px 16px 18px; }
.team-info h3{ font-size:1.02rem; margin-bottom:2px; }
.team-role{ color:var(--red); font-weight:700; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px; display:block; }
.team-bio{ font-size:0.86rem; color:var(--ink-soft); margin-bottom:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.team-more{ font-size:0.8rem; font-weight:700; color:var(--green); margin-top:8px; display:inline-block; }

/* team modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(28,23,18,0.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:2000; padding:20px;
}
.modal-overlay.is-open{ display:flex; }
.modal-box{
  background:var(--paper); max-width:560px; width:100%; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.4); position:relative; max-height:88vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:var(--white); border:none; font-size:1.1rem; cursor:pointer; z-index:3;
}
.modal-photo{ aspect-ratio:16/9; overflow:hidden; }
.modal-photo img{ width:100%; height:100%; object-fit:cover; }
.modal-body{ padding:26px 28px 30px; }
.modal-body .team-role{ margin-bottom:12px; }

/* =========================================================
   SERVICES
   ========================================================= */
.service-row{
  display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid rgba(28,23,18,0.1);
}
.service-row .num{ font-family:var(--font-display); font-size:1.7rem; color:var(--orange); }
.service-row h3{ margin-bottom:6px; }
.process-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media (max-width:800px){ .process-strip{ grid-template-columns:repeat(2,1fr); } }
.process-step{ padding:24px; border-left:3px solid var(--green); position:relative; }
.process-step .step-no{ font-family:var(--font-display); font-size:2rem; color:var(--green); }

/* =========================================================
   IMPACT
   ========================================================= */
.impact-highlight{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:800px){ .impact-highlight{ grid-template-columns:1fr; } }
.impact-card{ background:var(--white); border-radius:12px; padding:28px; box-shadow:var(--shadow); }
.impact-card .big{ font-family:var(--font-display); font-size:2.6rem; color:var(--green); }

.testimonial{
  background:var(--white); border-radius:14px; padding:34px; box-shadow:var(--shadow);
  border-left:5px solid var(--red); position:relative;
}
.testimonial p{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink); }
.testimonial .who{ font-weight:700; color:var(--ink); font-style:normal; font-family:var(--font-body); }
.testimonial .who span{ display:block; font-weight:400; font-size:0.82rem; color:var(--ink-soft); }

.region-bar{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.region-bar .label{ width:150px; font-weight:600; font-size:0.9rem; flex-shrink:0; }
.region-bar .track{ flex:1; height:12px; background:var(--paper-dim); border-radius:999px; overflow:hidden; }
.region-bar .fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--gold)); }
.region-bar .pct{ width:44px; text-align:right; font-weight:700; font-size:0.86rem; flex-shrink:0; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; grid-auto-flow:dense; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{ border-radius:10px; overflow:hidden; cursor:pointer; position:relative; box-shadow:var(--shadow); }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; aspect-ratio:1/1; }
.gallery-item.tall img{ aspect-ratio:1/2.05; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px; color:var(--white); font-size:0.85rem; font-weight:600;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
}
.lightbox{
  position:fixed; inset:0; background:rgba(10,8,6,0.92); z-index:2000; display:none;
  align-items:center; justify-content:center; padding:30px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:min(900px,92vw); max-height:82vh; border-radius:8px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.12); border:none; color:var(--white); cursor:pointer;
  border-radius:50%; width:44px; height:44px; font-size:1.2rem; display:flex; align-items:center; justify-content:center;
}
.lightbox-close{ top:22px; right:22px; }
.lightbox-prev{ left:22px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:22px; top:50%; transform:translateY(-50%); }

/* =========================================================
   DONATE
   ========================================================= */
.donate-wrap{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; align-items:flex-start; }
@media (max-width:900px){ .donate-wrap{ grid-template-columns:1fr; } }
.donate-card{ background:var(--white); border-radius:16px; box-shadow:var(--shadow); padding:34px; }
.donate-tabs{ display:flex; gap:10px; margin-bottom:26px; }
.donate-tabs button{
  flex:1; padding:12px; border-radius:10px; border:2px solid var(--paper-dim); background:var(--paper-dim);
  font-weight:700; cursor:pointer; color:var(--ink-soft);
}
.donate-tabs button.is-active{ background:var(--green); border-color:var(--green); color:var(--white); }

.amount-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
@media (max-width:500px){ .amount-grid{ grid-template-columns:repeat(2,1fr); } }
.amount-btn{
  padding:16px 8px; border-radius:10px; border:2px solid var(--paper-dim); background:var(--paper);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; cursor:pointer; text-align:center;
  color:var(--ink); transition:all .15s ease;
}
.amount-btn small{ display:block; font-family:var(--font-body); font-weight:600; font-size:0.65rem; color:var(--ink-soft); }
.amount-btn:hover{ border-color:var(--orange); }
.amount-btn.is-selected{ background:var(--green); border-color:var(--green); color:var(--white); }
.amount-btn.is-selected small{ color:#DCEEE1; }

.custom-amount{ display:flex; align-items:center; border:2px solid var(--paper-dim); border-radius:10px; overflow:hidden; margin-bottom:22px; }
.custom-amount span{ background:var(--paper-dim); padding:14px 16px; font-weight:700; color:var(--ink-soft); }
.custom-amount input{ border:none; padding:14px; flex:1; font-size:1rem; font-family:var(--font-body); background:transparent; color:var(--ink); }
.custom-amount input:focus{ outline:none; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border-radius:8px; border:2px solid var(--paper-dim);
  font-family:var(--font-body); font-size:0.96rem; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr; } }

.mpesa-note{ display:flex; gap:12px; align-items:flex-start; background:var(--green-tint); border-radius:10px; padding:16px; margin:20px 0; font-size:0.86rem; color:var(--green-dark); }
.donate-status{ margin-top:16px; padding:14px 16px; border-radius:10px; font-size:0.9rem; display:none; }
.donate-status.show{ display:block; }
.donate-status.pending{ background:#FFF3D9; color:#7A5300; }
.donate-status.success{ background:var(--green-tint); color:var(--green-dark); }
.donate-status.error{ background:#FBE3E3; color:var(--red-dark); }

.donate-side .card{ margin-bottom:20px; }
.impact-list li{ display:flex; gap:12px; margin-bottom:14px; font-size:0.92rem; color:var(--ink-soft); }
.impact-list li strong{ color:var(--ink); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-wrap{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-info li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(28,23,18,0.08); }
.contact-info .ic{ width:42px; height:42px; border-radius:50%; background:var(--green-tint); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.map-box{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); margin-top:24px; }
.map-box iframe{ width:100%; height:260px; border:0; display:block; }
.form-status{ margin-top:14px; font-size:0.9rem; color:var(--green); display:none; }
.form-status.show{ display:block; }
.faq-item{ border-bottom:1px solid rgba(28,23,18,0.1); padding:16px 0; }
.faq-item button{ width:100%; text-align:left; background:none; border:none; font-family:var(--font-display); font-size:1.05rem; padding:0; cursor:pointer; display:flex; justify-content:space-between; color:var(--ink); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:0.92rem; }
.faq-item.is-open .faq-answer{ max-height:200px; margin-top:10px; }
.faq-item .plus{ transition:transform .2s ease; color:var(--red); }
.faq-item.is-open .plus{ transform:rotate(45deg); }

/* =========================================================
   PARTNERS marquee
   ========================================================= */
.partners-strip{ background:var(--white); border-top:1px solid var(--paper-dim); border-bottom:1px solid var(--paper-dim); overflow:hidden; padding:34px 0; }
.partner-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:marquee 30s linear infinite; }
.partner-track:hover{ animation-play-state:paused; }
.partner-logo{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--green-dark);
  display:flex; align-items:center; gap:10px; white-space:nowrap; opacity:0.8;
}
.partner-logo .dot{ width:10px; height:10px; border-radius:50%; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:var(--red);
  background-image:radial-gradient(circle at 80% 20%, rgba(233,127,27,0.55), transparent 55%);
  color:var(--white); text-align:center; padding:70px 0;
}
.cta-band h2{ color:var(--white); }
.cta-band p{ color:#FBE3E3; max-width:52ch; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:oklch(20.019% 0.00002 271.152);; color:var(--white); padding-top:64px; }
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .brand-word{ color:var(--white); }
.footer-brand p{ color:#0adf27; margin-top:14px; max-width:32ch; }

.footer-brand img {
  width: 20%;
  height: 20%;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 10x;
  padding-top: auto;
}
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:hwb(0 7% 9% / 0.91); display:flex;
  align-items:center; justify-content:center; transition:background .2s ease;
}
.footer-social a:hover{ background:var(--green); }
.footer-col { min-width:0; box-sizing:border-box; }
.footer-col h4{ color:var(--white); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ color:#C9BFA9; font-size:0.92rem; }
.footer-col a:hover{ color:var(--gold); }
.footer-join{ background:var(--red); border-radius:12px; padding:22px; }
.footer-join h4{ color:var(--white); }
.footer-join p{ color:#DCEEE1; font-size:0.86rem; }
.footer-join .btn{ margin-top:4px; }
.footer-bottom{ padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:hsl(0, 100%, 100%); }
.footer-bottom a{ color:#57b30b; }
.footer-bottom p {}
.footer-bottom a:hover{ color:var(--gold); }

.footer-logo {
    width: 65px;
    height: 65px;
    display: block;
    object-fit: contain;
}

/* Join Us card */
.footer-join {
    width: 100%;
    max-width: 100%;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    background: linear-gradient(135deg, hsl(0, 100%, 45%),);
    overflow: hidden;
}

/* Heading */
.footer-join h4 {
    color: #fff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Description */
/* Join Us Description */
.footer-join p {
    color: hsl(0, 85%, 3%);
    line-height: 1.6;
    margin: 0 0 25px;
    text-align: center;
    overflow-wrap: break-word;
}

/* Join Us Button */
.footer-join .join-btn {
    display: block;
    width: 100%;
    max-width: 100px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    background-color: #32e600;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    overflow-wrap: break-word;
    cursor: pointer;
}

/* Prevent Footer Columns from Overflowing */
.footer-col {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent Join Us Section from Overflowing */
.footer-join {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Ensure All Elements Respect Their Container Width */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Miscellaneous Utilities */
.mt-0 {
    margin-top: 0;
}

.text-center {
    text-align: center;
}

.badge {
    display: inline-block;
    background: var(--gold);
    max-width: 100%;
    box-sizing: border-box;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
   
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-join .join-btn {
        width: 100%;
        max-width: 100px;
    }

    .footer-col {
        width: 100%;
    }
}