:root{
  --brand-blue: #00B4E6;
  --brand-green: #12A85B;
  --site-header-offset: calc(4.25rem + env(safe-area-inset-top, 0px));
}

/* Mobile + desktop: no horizontal scroll, readable text, notched screens */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  overflow-x: clip;
}
img, video, canvas, svg{
  max-width:100%;
  height:auto;
}
main, section{
  min-width:0;
}

/* Fixed header clears status / Dynamic Island */
.site-header{
  padding-top: env(safe-area-inset-top, 0px);
}
.site-main{
  padding-top: var(--site-header-offset);
}

/* Floating Donate - clear home indicator / rounded corners */
.donate-fab{
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px){
  .donate-fab{
    bottom: max(2rem, env(safe-area-inset-bottom, 0px));
    right: max(1.5rem, env(safe-area-inset-right, 0px));
  }
}

/* Long mobile nav: scroll inside panel, not the page */
.mobile-menu-panel:not(.hidden){
  max-height: min(70vh, calc(100dvh - var(--site-header-offset)));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: max(1rem, env(safe-area-inset-left, 0px));
  top: max(1rem, env(safe-area-inset-top, 0px));
  width:auto;
  height:auto;
  padding:0.6rem 0.8rem;
  border-radius:0.75rem;
  background:#0b1220;
  border:1px solid rgba(0,170,233,0.5);
  z-index:9999;
}

/* Nav styles */
.nav-link{
  font-size:0.95rem;
  color:rgba(55,65,81,0.9);
  text-decoration:none;
  padding:0.25rem 0;
  position:relative;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:linear-gradient(90deg, rgba(0,170,233,0.9), rgba(16,155,81,0.9));
  transition:width 180ms ease;
}
.nav-link:hover{ color:rgba(15,23,42,0.95); }
.nav-link:hover::after{ width:100%; }

.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:max(220px, max-content);
  width:max-content;
  padding:0.5rem;
  margin-top:0.25rem;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.96);
  box-shadow:0 16px 40px rgba(2, 6, 23, 0.10);
  display:none;
  z-index:60;
}
/* Wider menu so “Current/Future Programs” stays one line (Tailwind-safe) */
.nav-dropdown--programs{
  min-width:20rem;
}
.group:hover .nav-dropdown,
.group:focus-within .nav-dropdown{
  display:block;
}
/* Invisible bridge so hover works when moving from trigger to menu */
.group .nav-dropdown::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:0.5rem;
}
.nav-dropdown-link{
  display:block;
  padding:0.65rem 0.75rem;
  border-radius:0.85rem;
  text-decoration:none;
  font-weight:800;
  color:rgba(15,23,42,0.86);
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
.nav-dropdown-link:hover{
  background:rgba(0,180,230,0.08);
}

.mobile-link{
  display:block;
  padding:0.75rem 0.25rem;
  border-radius:0.75rem;
  color:rgba(15,23,42,0.9);
  text-decoration:none;
  border:1px solid rgba(15,23,42,0.1);
  background:rgba(255,255,255,0.9);
}
.mobile-link:hover{
  border-color:rgba(0,180,230,0.35);
  background:rgba(0,180,230,0.08);
}

.mobile-details > summary{
  list-style:none;
}
.mobile-details > summary::-webkit-details-marker{
  display:none;
}
.mobile-subgrid{
  margin-top:0.5rem;
  display:grid;
  gap:0.5rem;
  padding-left:0.75rem;
}
.mobile-sublink{
  display:block;
  padding:0.7rem 0.75rem;
  border-radius:0.75rem;
  text-decoration:none;
  font-weight:800;
  color:rgba(15,23,42,0.9);
  border:1px solid rgba(15,23,42,0.1);
  background:rgba(255,255,255,0.8);
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
@media (min-width: 480px){
  .mobile-sublink{
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
  }
}
.mobile-sublink:hover{
  border-color:rgba(0,180,230,0.35);
  background:rgba(0,180,230,0.08);
}

/* Mobile hamburger — three parallel bars (middle + box-shadow top/bottom) */
.menu-icon{
  display:block;
  width:20px;
  height:2px;
  flex-shrink:0;
  border-radius:999px;
  background:rgba(15,23,42,0.85);
  box-shadow:0 -6px 0 rgba(15,23,42,0.85), 0 6px 0 rgba(15,23,42,0.85);
}

/* Hero stat cards */
.stat-card{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Hero backdrop helpers */
.hero-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 30% 20%, black 0%, rgba(0,0,0,0.2) 55%, transparent 80%);
}
.hero-noise{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:0.07;
  pointer-events:none;
}

/* Hero slideshow */
.hero-slideshow{
  position:relative;
}
/* Home hero: single slideshow — min height on small screens; height from grid + flex on lg */
.hero-slideshow--home{
  min-height:min(85vw,22rem);
}
@media (min-width: 1024px){
  .hero-slideshow--home{
    min-height:0;
  }
}
.hero-slideshow .hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.hero-slideshow .hero-slide.active{
  opacity:1;
  z-index:1;
}

/* Hero headline: solid brand colors (avoids bg-clip-text cutting descenders like “g”) */

/* Sections */
.section-eyebrow{
  color: rgba(55, 65, 81, 0.95);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:0.8rem;
}
.section-title{
  margin-top:0.4rem;
  font-size:2rem;
  line-height:1.15;
  font-weight:900;
}
@media (min-width: 768px){
  .section-title{ font-size:2.45rem; }
}

/* Anchor offset for the fixed/sticky header + notch */
section[id]{
  scroll-margin-top: calc(7rem + env(safe-area-inset-top, 0px));
}
/* In-page targets (divs with Tailwind scroll-mt-28); !important beats Tailwind CDN order */
.scroll-mt-28{
  scroll-margin-top: calc(7rem + env(safe-area-inset-top, 0px)) !important;
}


.pill{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(0,180,230,0.08);
  padding:0.6rem 0.8rem;
  border-radius:999px;
  font-size:0.9rem;
  color:rgba(15,23,42,0.9);
}
.pill-link{
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.pill-link:hover{
  background:rgba(0,180,230,0.15);
  border-color:rgba(0,180,230,0.3);
}

.value-row{
  display:flex;
  gap:0.85rem;
}
.value-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  margin-top:0.35rem;
  box-shadow:0 0 0 4px rgba(0,0,0,0.03);
}
.vision-values-box .value-dot{ margin-top:0.2rem; }

.about-image-wrap{
  position:relative;
  overflow:hidden;
  min-height:0;
  border-radius:1.5rem;
  display:block;
}
.about-image-wrap > .about-section-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Cards / grids - What we do (interactive) */
.program-card{
  border-radius:1.25rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.25rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
  cursor:pointer;
  text-align:left;
  font:inherit;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.program-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(2,6,23,0.1);
  border-color:rgba(0,180,230,0.3);
}
.program-card:hover .program-icon{
  transform:scale(1.08);
  background:rgba(0,180,230,0.18);
  border-color:rgba(0,180,230,0.5);
}
.program-card-active,
.program-card:focus-visible{
  border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(0,180,230,0.25);
}
.program-card-active{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(2,6,23,0.1), 0 0 0 2px rgba(0,180,230,0.2);
}
.program-card-active .program-icon{
  background:rgba(0,180,230,0.2);
  border-color:var(--brand-blue);
}
.program-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(circle at 20% 0%, rgba(0,180,230,0.08), transparent 55%),
             radial-gradient(circle at 80% 10%, rgba(18,168,91,0.06), transparent 55%);
  opacity:0.8;
  pointer-events:none;
}
.program-card > *{ position:relative; z-index:1; }
.program-icon{
  width:40px;
  height:40px;
  border-radius:0.95rem;
  border:1px solid rgba(0,180,230,0.35);
  background:rgba(0,180,230,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--brand-blue);
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.program-title{
  margin-top:0.85rem;
  font-weight:900;
  font-size:1.1rem;
  color:rgba(15,23,42,0.92);
}
.program-body{
  margin-top:0.55rem;
  color:rgba(55,65,81,0.9);
  line-height:1.6;
  font-size:0.95rem;
}

.event-card,
.project-card,
.news-card,
.team-card,
.involve-card{
  border-radius:1.5rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
}
.event-card{ display:flex; flex-direction:column; gap:0.4rem; }
.event-meta{ display:flex; gap:0.5rem; align-items:center; }
.event-date{
  font-size:0.82rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.12);
  color:rgba(55,65,81,0.9);
}
.event-tag{
  font-size:0.82rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:rgba(0,180,230,0.12);
  border:1px solid rgba(0,180,230,0.25);
  color:var(--brand-blue);
}
.event-title{ margin-top:0.3rem; font-size:1.15rem; font-weight:900; color:rgba(15,23,42,0.92); }
.event-body{ color:rgba(55,65,81,0.9); line-height:1.6; font-size:0.95rem; margin-top:0.25rem; }
.event-link{
  margin-top:auto;
  color:var(--brand-blue);
  text-decoration:none;
  font-weight:700;
}
.event-link:hover{ text-decoration:underline; }

.project-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(17,24,39,0.45));
}
.project-year{
  font-weight:900;
  color:#d1d5db;
  letter-spacing:0.06em;
  font-size:0.85rem;
}
.project-title{ margin-top:0.35rem; font-size:1.15rem; font-weight:900; }
.project-body{ margin-top:0.35rem; color:rgba(209,213,219,0.92); line-height:1.6; font-size:0.95rem; }

/* Team cards - Garnet-style compact grid, click opens bio */
.team-card-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1rem;
  gap:0.5rem;
  cursor:pointer;
  border:none;
  background:transparent;
  box-shadow:none;
  width:100%;
  transition:background 0.2s ease, transform 0.15s ease;
}
.team-card-btn:hover{
  background:rgba(0,180,230,0.06);
}
.team-card-photo{
  width:100%;
  aspect-ratio:1;
  max-width:200px;
  border-radius:0.5rem;
  overflow:hidden;
  background:rgba(0,180,230,0.08);
}
.team-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.team-card-photo-placeholder{
  background:rgba(55,65,81,0.08);
}
.team-card-name{ font-weight:900; font-size:1.2rem; color:rgba(15,23,42,0.92); }
.team-card-role{ font-size:1.05rem; color:var(--brand-blue); font-weight:700; margin-top:-0.65rem; }

/* Team modal */
.team-modal-body{
  display:flex;
  gap:1.5rem;
  padding:1rem 1.2rem 1.4rem;
  flex-wrap:wrap;
}
.team-modal-photo-wrap{
  width:140px;
  height:140px;
  flex-shrink:0;
  border-radius:0.5rem;
  overflow:hidden;
  background:rgba(0,180,230,0.08);
}
.team-modal-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.team-modal-photo-placeholder{
  background:rgba(55,65,81,0.08);
}
.team-modal-content{ flex:1; min-width:200px; }
.team-modal-name{ font-size:1.5rem; font-weight:900; margin:0; color:rgba(15,23,42,0.94); }
.team-modal-role{ font-size:1rem; color:var(--brand-blue); font-weight:700; margin-top:0.25rem; }
.team-modal-award{
  font-size:0.85rem;
  color:#b45309;
  margin-top:0.5rem;
  background:linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
  border:1px solid rgba(245,158,11,0.35);
  padding:0.25rem 0.5rem;
  border-radius:999px;
  width:fit-content;
}
.team-modal-bio{ margin-top:0.75rem; line-height:1.6; color:rgba(55,65,81,0.9); }
.team-modal-link{
  display:inline-flex;
  align-items:center;
  margin-top:0.75rem;
  color:var(--brand-blue);
  font-weight:700;
  text-decoration:none;
}
.team-modal-link:hover{ text-decoration:underline; }
.team-name-link{ color:inherit; text-decoration:none; }
.team-name-link:hover{ text-decoration:underline; color:var(--brand-blue); }
.team-role{ color:var(--brand-blue); font-weight:700; font-size:0.95rem; }
.team-award{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.8rem;
  font-weight:700;
  color:#b45309;
  background:linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
  border:1px solid rgba(245,158,11,0.4);
  padding:0.25rem 0.6rem;
  border-radius:999px;
  margin-top:0.2rem;
  width:fit-content;
}
.team-award-star{
  color:#d97706;
  font-size:0.95rem;
}
.team-bio{ color:rgba(55,65,81,0.9); line-height:1.6; font-size:0.95rem; margin-top:0.25rem; }

.involve-card{
  min-height:160px;
  display:flex;
  flex-direction:column;
}
.involve-title{ font-weight:900; font-size:1.1rem; color:rgba(15,23,42,0.92); }
.involve-body{ color:rgba(55,65,81,0.9); line-height:1.6; margin-top:0.35rem; font-size:0.95rem; }
.involve-link{ margin-top:auto; color:var(--brand-blue); font-weight:800; text-decoration:none; }
.involve-link:hover{ text-decoration:underline; }

/* Support */
.support-card{
  border-radius:2rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
}
.support-top{ display:flex; flex-direction:column; gap:0.25rem; }
.support-title{ font-size:1.35rem; font-weight:950; color:rgba(15,23,42,0.92); }
.support-sub{ color:rgba(55,65,81,0.9); font-size:0.95rem; }
.support-bullet{
  border-radius:1rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(0,180,230,0.06);
  padding:0.75rem 0.9rem;
  font-weight:800;
  font-size:0.95rem;
  color:rgba(15,23,42,0.9);
}
.support-side{
  display:flex;
  align-items:stretch;
}

/* News */
.news-card{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.news-meta{ display:flex; gap:0.5rem; align-items:center; }
.news-date{
  font-size:0.82rem;
  color:rgba(55,65,81,0.9);
  padding:0.25rem 0.6rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.12);
}
.news-tag{
  font-size:0.82rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  background:rgba(18,168,91,0.12);
  border:1px solid rgba(18,168,91,0.25);
  color:var(--brand-green);
}
.news-title{ font-weight:950; font-size:1.15rem; margin-top:0.2rem; color:rgba(15,23,42,0.92); }
.news-body{ color:rgba(55,65,81,0.9); line-height:1.6; font-size:0.95rem; }
.news-more{
  margin-top:auto;
  align-self:flex-start;
  cursor:pointer;
  text-decoration:none;
  border-radius:0.95rem;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(0,180,230,0.06);
  color:var(--brand-blue);
  padding:0.55rem 0.9rem;
  min-height:44px;
  font-weight:900;
}
.news-more:hover{
  background:rgba(0,180,230,0.12);
  border-color:rgba(0,180,230,0.25);
}

/* Contact */
.form-label{
  display:block;
  font-weight:800;
  font-size:0.9rem;
  color:rgba(15,23,42,0.9);
  margin-bottom:0.35rem;
}
.form-input,
.form-textarea{
  width:100%;
  max-width:100%;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.95);
  padding:0.8rem 0.9rem;
  font-size:1rem;
  line-height:1.5;
  color:rgba(15,23,42,0.95);
  outline:none;
}
.form-input:focus,
.form-textarea:focus{
  border-color:rgba(0,180,230,0.55);
  box-shadow:0 0 0 3px rgba(0,180,230,0.18);
}
.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.contact-row--address{
  align-items:flex-start;
}
.contact-value--multiline{
  white-space:pre-line;
  text-align:right;
  line-height:1.5;
  max-width:min(16rem,100%);
}
@media (max-width: 639px){
  .contact-row{
    flex-direction:column;
    align-items:flex-start;
    gap:0.35rem;
  }
  .contact-value,
  .contact-value--multiline{
    text-align:left;
    max-width:100%;
  }
}
.contact-label{
  color:rgba(55,65,81,0.8);
  font-weight:800;
}
.contact-value{
  color:rgba(15,23,42,0.95);
  text-align:right;
}
.quick-link{
  text-decoration:none;
  color:rgba(15,23,42,0.9);
  font-weight:800;
  border:1px solid rgba(18,168,91,0.25);
  background:rgba(18,168,91,0.08);
  padding:0.75rem 1rem;
  border-radius:1rem;
  display:block;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.quick-link:hover{
  border-color:rgba(18,168,91,0.4);
  background:rgba(18,168,91,0.15);
}

.footer-link{
  color:rgba(55,65,81,0.9);
  text-decoration:none;
  font-weight:800;
}
.footer-link:hover{ color:rgba(15,23,42,0.95); text-decoration:underline; }

.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(18,168,91,0.55);
  transition:color 0.2s ease;
}
.social-link:hover{ color:var(--brand-green); }
.social-icon{
  width:1.35rem;
  height:1.35rem;
}
.header-social .social-icon{
  width:1.15rem;
  height:1.15rem;
}

/* Dialog modal */
.news-modal::backdrop{
  background:rgba(0,0,0,0.65);
}
.news-modal{
  width:min(720px, calc(100vw - 1.5rem));
  max-width:calc(100vw - 1.5rem);
  max-height:min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
  margin:auto;
  border:none;
  background:transparent;
  padding:0;
}
.news-modal-inner{
  border-radius:1.75rem;
  border:1px solid rgba(15,23,42,0.1);
  background:rgba(255,255,255,0.98);
  padding:1rem;
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
  max-height:min(85vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.news-modal-close{
  float:right;
  cursor:pointer;
  border-radius:0.95rem;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.9);
  padding:0.5rem 0.75rem;
  min-height:44px;
  min-width:44px;
  color:rgba(15,23,42,0.9);
  font-weight:900;
}
.news-modal-close:hover{
  background:rgba(0,180,230,0.1);
  border-color:rgba(0,180,230,0.35);
}
.news-modal-body{
  clear:both;
  padding:1rem 1.2rem 1.4rem;
}
#initiativeModalBody,
#projectBody{
  white-space:pre-line;
}

/* Past Projects - cards with image spots */
.project-cards-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1.25rem;
}
@media (min-width: 640px){
  .project-cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .project-cards-grid{ grid-template-columns: repeat(3, 1fr); }
}

.project-card-btn{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  border:none;
  border-radius:1.25rem;
  overflow:visible;
  cursor:pointer;
  text-align:left;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.project-card-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(2,6,23,0.1);
  border-color:rgba(0,180,230,0.3);
}

.project-card-image{
  position:relative;
  aspect-ratio:16/10;
  min-height:140px;
  background:linear-gradient(135deg, rgba(0,180,230,0.12), rgba(18,168,91,0.08));
  overflow:hidden;
}
.project-card-image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-card-placeholder-icon{
  font-size:3rem;
  opacity:0.4;
}
.project-card-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-card-flag{
  position:absolute;
  top:0.75rem;
  right:0.75rem;
  width:44px;
  height:30px;
  border-radius:0.5rem;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.9);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.project-card-flag-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.project-card-content{
  padding:1.1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.project-card-meta{
  font-size:0.8rem;
  font-weight:700;
  color:var(--brand-blue);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.project-card-title{
  font-size:1.1rem;
  font-weight:900;
  color:rgba(15,23,42,0.92);
  line-height:1.3;
}
.project-card-preview{
  font-size:0.9rem;
  color:rgba(55,65,81,0.85);
  line-height:1.5;
  margin-top:0.2rem;
}
.project-card-cta{
  font-size:0.9rem;
  font-weight:800;
  color:var(--brand-blue);
  margin-top:0.5rem;
}
.project-card-btns{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:0.75rem;
}
.project-card-read-more{
  font-size:0.9rem;
  font-weight:800;
  color:var(--brand-blue);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.project-card-read-more:hover{ text-decoration:underline; }
.project-card-press-wrap{
  position:relative;
}
.project-card-press{
  font-size:0.9rem;
  font-weight:800;
  color:var(--brand-green);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.project-card-press:hover{ text-decoration:underline; }
.project-card-press-dropdown{
  display:none;
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:0.25rem;
  min-width:180px;
  padding:0.5rem;
  border-radius:0.75rem;
  border:1px solid rgba(15,23,42,0.1);
  background:white;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  z-index:50;
}
.project-card-press-dropdown.is-open{ display:block; }
.project-card-press-link{
  display:block;
  padding:0.5rem 0.75rem;
  border-radius:0.5rem;
  color:rgba(15,23,42,0.9);
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
}
.project-card-press-link:hover{
  background:rgba(18,168,91,0.12);
  color:var(--brand-green);
}
.project-card-pictures{
  font-size:0.9rem;
  font-weight:800;
  color:#171717;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.project-card-pictures:hover{ text-decoration:underline; }

/* Pictures modal */
.pictures-modal .pictures-modal-inner{
  max-width:900px;
  max-height:min(85vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.pictures-modal-title{
  font-size:1.25rem;
  font-weight:900;
  color:rgba(15,23,42,0.95);
  margin:0 0 1rem 0;
}
.pictures-modal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap:1rem;
}
.pictures-modal-empty{
  grid-column:1 / -1;
  margin:0;
  padding:1.25rem 0.75rem;
  text-align:center;
  font-size:0.95rem;
  color:rgba(55,65,81,0.9);
  line-height:1.55;
}
.pictures-modal-item{
  aspect-ratio:1;
  overflow:hidden;
  border-radius:0.75rem;
  background:#f5f5f5;
}
.pictures-modal-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Project modal image */
.project-modal .project-modal-image-wrap{
  margin:-1rem -1rem 0 -1rem;
  width:calc(100% + 2rem);
  max-height:220px;
  overflow:hidden;
  border-radius:1.75rem 1.75rem 0 0;
  background:linear-gradient(135deg, rgba(0,180,230,0.08), rgba(18,168,91,0.06));
}
.project-modal .project-modal-image-wrap:empty{
  display:none;
}
.project-modal-image{
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  display:block;
}

/* Current Programs (featured cards) */
.current-program-card{
  border-radius:1.5rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.5rem 1.75rem;
  box-shadow:0 10px 40px rgba(2,6,23,0.06);
}
.current-program-subtitle{
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brand-blue);
  margin-bottom:0.5rem;
}
.current-program-title{
  font-size:1.35rem;
  font-weight:900;
  color:rgba(15,23,42,0.92);
  margin-top:0;
}
.current-program-summary{
  margin-top:0.75rem;
  color:rgba(55,65,81,0.9);
  line-height:1.6;
  font-size:0.95rem;
}
.current-program-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:1rem;
  padding:0.65rem 1.25rem;
  border-radius:1rem;
  font-weight:800;
  font-size:0.9rem;
  text-decoration:none;
  background:var(--brand-blue);
  color:#fff;
}
.current-program-cta:hover{
  background:rgba(0,180,230,0.9);
  color:#fff;
}

/* Upcoming Initiatives */
.upcoming-initiative-card{
  display:flex;
  flex-direction:column;
  border-radius:1.25rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.25rem 1.5rem;
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
}
.upcoming-initiative-btns{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:0.85rem;
  gap:0.5rem;
}
.upcoming-initiative-learn{
  font-size:0.85rem;
  font-weight:800;
  color:#fff;
  background:var(--brand-green);
  border:none;
  border-radius:0.5rem;
  padding:0.4rem 0.75rem;
  cursor:pointer;
}
.upcoming-initiative-learn:hover{
  background:rgba(18,168,91,0.9);
}
.upcoming-initiative-support{
  font-size:0.85rem;
  font-weight:800;
  color:var(--brand-blue);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:5.5rem;
  padding:0.45rem 0.85rem;
  border-radius:0.5rem;
  border:2px solid rgba(0,180,230,0.45);
  background:rgba(0,180,230,0.06);
}
.upcoming-initiative-support:hover{
  text-decoration:none;
  border-color:rgba(0,180,230,0.75);
  background:rgba(0,180,230,0.14);
}
/* Same footprint as Support link, non-interactive */
.upcoming-initiative-future{
  font-size:0.85rem;
  font-weight:800;
  color:rgba(71,85,105,0.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.25;
  min-height:44px;
  padding:0.45rem 0.75rem;
  border-radius:0.5rem;
  border:2px solid rgba(148,163,184,0.5);
  background:rgba(248,250,252,0.95);
  cursor:default;
  user-select:none;
  pointer-events:none;
  max-width:min(11.5rem, 48%);
  box-sizing:border-box;
}
.upcoming-initiative-meta{
  display:flex;
  gap:0.85rem;
  align-items:center;
  margin-bottom:0.35rem;
}
.upcoming-initiative-timeline{
  font-size:0.8rem;
  font-weight:800;
  color:rgba(55,65,81,0.9);
}
.upcoming-initiative-amount{
  font-size:0.8rem;
  font-weight:900;
  color:var(--brand-green);
}
.upcoming-initiative-title{
  font-size:1.1rem;
  font-weight:900;
  color:rgba(15,23,42,0.92);
  margin-top:0;
}
.upcoming-initiative-body{
  margin-top:0.5rem;
  font-size:0.9rem;
  color:rgba(55,65,81,0.88);
  line-height:1.55;
}

/* Support CTA buttons */
.support-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 1.25rem;
  border-radius:1.25rem;
  font-weight:900;
  font-size:0.95rem;
  text-decoration:none;
  text-align:center;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(255,255,255,0.95);
  color:rgba(15,23,42,0.9);
  box-shadow:0 8px 24px rgba(2,6,23,0.06);
}
.support-cta-btn:hover{
  border-color:var(--brand-blue);
  background:rgba(0,180,230,0.08);
  color:rgba(15,23,42,0.95);
}
.support-cta-highlight{
  background:var(--brand-blue);
  color:#fff;
  border-color:var(--brand-blue);
}
.support-cta-highlight:hover{
  background:rgba(0,180,230,0.9);
  color:#fff;
  border-color:rgba(0,180,230,0.9);
}

/* Donate page options */
.donate-option-card{
  border-radius:1.5rem;
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.95);
  padding:1.5rem 1.75rem;
  box-shadow:0 10px 40px rgba(2,6,23,0.06);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.donate-option-title{
  font-size:1.25rem;
  font-weight:900;
  color:rgba(15,23,42,0.92);
  margin:0;
}
.donate-option-desc{
  font-size:0.95rem;
  color:rgba(55,65,81,0.9);
  line-height:1.6;
  margin:0;
  flex:1;
  white-space:pre-line;
}
.donate-option-hint{
  font-size:0.875rem;
  color:var(--brand-green);
  margin:0.5rem 0 0;
}
.donate-option-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1.25rem;
  border-radius:1rem;
  font-weight:800;
  font-size:0.95rem;
  text-decoration:none;
  background:var(--brand-blue);
  color:#fff;
  align-self:flex-start;
}
.donate-option-btn:hover{
  background:rgba(0,180,230,0.9);
  color:#fff;
}

/* Sponsors & Partners - continuous scroll marquee */
.sponsors-marquee-wrap{
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.sponsors-marquee{
  overflow:hidden;
}
.sponsors-marquee-inner{
  display:flex;
  align-items:center;
  gap:2rem;
  width:max-content;
  animation:sponsors-scroll 40s linear infinite;
}
@media (min-width: 768px){
  .sponsors-marquee-inner{
    gap:2.25rem;
  }
}
.sponsors-marquee-inner:hover{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce) {
  .sponsors-marquee-inner{
    animation:none;
    justify-content:center;
  }
  .sponsors-marquee-inner .sponsor-logo-link[aria-hidden="true"]{
    display:none;
  }
  .sponsors-marquee-wrap{
    mask-image:none;
    -webkit-mask-image:none;
  }
}
@keyframes sponsors-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.sponsor-logo-link{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem;
  flex-shrink:0;
  min-width:165px;
  min-height:110px;
  transition:opacity 0.2s ease;
}
.sponsor-logo-link:hover{
  opacity:0.8;
}
.sponsor-logo{
  width:165px;
  height:110px;
  object-fit:contain;
}
.sponsor-logo-tabsa{
  transform:scale(1.3);
}
.sponsor-logo-link--fort-myers{
  min-width:0;
  min-height:125px;
  padding:0.25rem 0.35rem;
}
.sponsor-logo-fort-myers{
  width:188px;
  height:127px;
  max-width:none;
  object-fit:contain;
  object-position:left center;
}
/* Pull Tanzania closer - Fort Myers box + 3rem gap read as too wide */
.sponsor-logo-link--fort-myers + .sponsor-logo-link{
  margin-left:-0.75rem;
}