/* ========================================
   Jeevdayamai Foundation — style.css
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #0d3320;
  --green-mid:    #1a5c38;
  --green-light:  #2e7d52;
  --green-pale:   #e8f5ee;
  --orange:       #e8562a;
  --orange-light: #f27046;
  --orange-pale:  #fdf0ec;
  --text-dark:    #0d2218;
  --text-body:    #3d5244;
  --text-muted:   #7a8f83;
  --bg-cream:     #f4f9f5;
  --bg-light:     #eef5f1;
  --white:        #ffffff;
  --border:       #d1e4d9;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.07);
  --shadow-md:    0 6px 24px rgba(0,0,0,.11);
  --shadow-lg:    0 16px 48px rgba(0,0,0,.15);
  --radius:       12px;
  --radius-lg:    20px;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-sans:    'Nunito', system-ui, sans-serif;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font-sans); background: var(--bg-cream); color: var(--text-dark); margin: 0; overflow-x: clip; padding-top: 110px; width: 100%; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
em { font-style: italic; color: var(--green-light); }

/* ══════════════════════════════════════
   TYPOGRAPHY HELPERS
══════════════════════════════════════ */
.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--orange); display: block; margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-serif); font-size: clamp(26px, 4vw, 40px);
  font-weight: 700; color: var(--text-dark); line-height: 1.2; margin-bottom: 14px;
}
.section-sub {
  font-size: 16px; color: var(--text-body); max-width: 600px; line-height: 1.7;
}
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .section-sub { margin: 0 auto; }
.req { color: var(--orange); }

/* ══════════════════════════════════════
   TOP BAR  (desktop only)
══════════════════════════════════════ */
.top-bar {
  background: var(--green-dark); color: rgba(255,255,255,.85);
  font-size: 13px; position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: 36px;
}
.top-bar-inner {
  max-width: 1300px; margin: 0 auto; padding: 0 40px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.top-bar-left { display: flex; gap: 24px; }
.top-bar-left a { color: rgba(255,255,255,.85); transition: color .2s; font-size: 13px; }
.top-bar-left a:hover { color: #fff; }
.top-bar-left a i { margin-right: 6px; color: var(--orange-light); }
.top-bar-right { display: flex; gap: 10px; align-items: center; }
.top-bar-right a {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: rgba(255,255,255,.85); transition: background .2s;
}
.top-bar-right a:hover { background: var(--orange); color: #fff; }

/* ══════════════════════════════════════
   MAIN NAV
══════════════════════════════════════ */
.top-nav {
  background: var(--white); border-bottom: 2px solid var(--border);
  padding: 0 40px; height: 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: fixed; top: 36px; left: 0; right: 0; width: 100%; z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.logo-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-wrap img { height: 48px; width: auto; object-fit: contain; }
.logo-text-block { display: flex; flex-direction: column; }
.logo-name { font-family: var(--font-serif); font-size: 16px; font-weight: 400; color: var(--green-dark); line-height: 1.2; }
.logo-tagline { font-size: 10px; color: var(--text-muted); letter-spacing: 0.4px; margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; }
.nav-links li a {
  display: block; padding: 7px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 700; color: var(--text-dark); transition: all .2s;
}
.nav-links li a:hover { background: var(--bg-light); color: var(--green-mid); }
.nav-links li a.active { color: var(--green-mid); background: var(--green-pale); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-toggle i {
  font-size: 9px; margin-left: 4px;
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1);
  display: inline-block;
}
.nav-dropdown:hover .nav-dropdown-toggle i { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  background: var(--white);
  border-radius: 18px;
  min-width: 230px; list-style: none;
  box-shadow: 0 20px 60px rgba(13,51,32,.15), 0 4px 16px rgba(0,0,0,.08);
  border: 1px solid rgba(209,228,217,.6);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .3s cubic-bezier(0.16,1,0.3,1), visibility .25s;
  z-index: 200;
  padding: 10px;
  overflow: hidden;
}

/* Arrow pointer */
.nav-dropdown-menu::before {
  content: '';
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--white);
  border-left: 1px solid rgba(209,228,217,.6);
  border-top: 1px solid rgba(209,228,217,.6);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px 0 0 0;
}

/* Top accent bar */
.nav-dropdown-menu::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-mid), var(--orange));
  border-radius: 18px 18px 0 0;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nav-dropdown-menu li { margin: 0; }

.nav-dropdown-menu li a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 700;
  color: var(--text-dark); border-radius: 12px;
  transition: background .18s, color .18s, transform .18s, gap .18s;
  position: relative;
}

.nav-dropdown-menu li a .ddm-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1);
}

.nav-dropdown-menu li:nth-child(1) a .ddm-icon { background: var(--green-pale);  color: var(--green-mid); }
.nav-dropdown-menu li:nth-child(2) a .ddm-icon { background: var(--orange-pale); color: var(--orange); }
.nav-dropdown-menu li:nth-child(3) a .ddm-icon { background: #e8eaf6;            color: #3949ab; }

.nav-dropdown-menu li a .ddm-text { display: flex; flex-direction: column; }
.nav-dropdown-menu li a .ddm-text span { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }

.nav-dropdown-menu li a .ddm-arrow {
  margin-left: auto; font-size: 10px; color: var(--text-muted);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s, transform .18s;
}

.nav-dropdown-menu li a:hover {
  background: var(--bg-light); color: var(--green-mid); gap: 14px;
}
.nav-dropdown-menu li a:hover .ddm-icon { transform: scale(1.12) rotate(-4deg); }
.nav-dropdown-menu li a:hover .ddm-text span { color: var(--green-mid); }
.nav-dropdown-menu li a:hover .ddm-arrow { opacity: 1; transform: translateX(0); }

.nav-dropdown-menu li + li { border-top: 1px solid var(--border); }

.nav-cta-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-donate-btn {
  background: var(--orange); color: var(--white);
  padding: 9px 20px; border-radius: 50px; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 6px; transition: all .2s;
  white-space: nowrap;
}
.nav-donate-btn i { font-size: 12px; }
.nav-donate-btn:hover { background: var(--orange-light); transform: translateY(-1px); }

/* Hamburger — hidden on desktop */
.nav-menu-btn {
  background: var(--green-dark); color: var(--white);
  width: 40px; height: 40px; border-radius: 10px;
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  flex-shrink: 0;
}
.nav-menu-btn span { display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s; }

/* Mobile quick-action buttons shown only on mobile — hidden on desktop */
.nav-mobile-actions { display: none; }

/* ══════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════ */
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(6,25,15,.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
}
.mobile-nav-overlay.open { display: block; }

.mobile-nav-drawer {
  position: fixed; top: 0; right: 0;
  width: min(320px, 88vw); height: 100%;
  background: var(--green-dark);
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
  z-index: 2001;
  box-shadow: -8px 0 48px rgba(0,0,0,.4);
}
.mobile-nav-overlay.open .mobile-nav-drawer { transform: translateX(0); }

/* Gradient top accent */
.mobile-nav-drawer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-mid), var(--orange));
  flex-shrink: 0;
}

/* ── Drawer Header ── */
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.drawer-logo { display: flex; align-items: center; gap: 10px; }
.drawer-logo img { height: 40px; width: auto; border-radius: 8px; }
.drawer-logo-text { display: flex; flex-direction: column; }
.drawer-logo-text strong {
  font-family: var(--font-serif); font-size: 13px;
  color: var(--white); line-height: 1.2;
}
.drawer-logo-text span { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px; }

.mobile-nav-close {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s, color .2s;
}
.mobile-nav-close:hover { background: rgba(255,255,255,.16); color: var(--white); }

/* ── Nav Links ── */
.drawer-nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  flex: 1;
}

.drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 14px;
  color: rgba(255,255,255,.85);
  transition: background .2s, color .2s, padding-left .2s;
  text-decoration: none; position: relative; overflow: hidden;
}
.drawer-link:hover {
  background: rgba(255,255,255,.07);
  color: var(--white);
  padding-left: 16px;
}

/* Coloured icon boxes */
.dl-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.drawer-link:hover .dl-icon { transform: scale(1.1) rotate(-4deg); }

.dl-icon-home     { background: rgba(46,125,82,.3);   color: #7ee8a2; }
.dl-icon-about    { background: rgba(33,150,243,.2);  color: #64b5f6; }
.dl-icon-programs { background: rgba(232,86,42,.25);  color: #ffab91; }
.dl-icon-events   { background: rgba(251,192,45,.2);  color: #ffd54f; }
.dl-icon-team     { background: rgba(156,39,176,.2);  color: #ce93d8; }
.dl-icon-contact  { background: rgba(0,188,212,.2);   color: #80deea; }

/* Two-line text */
.dl-text {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.dl-text strong {
  font-size: 14px; font-weight: 700; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-text span {
  font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-link:hover .dl-text span { color: rgba(255,255,255,.6); }

/* Arrow */
.dl-arrow {
  font-size: 10px; color: rgba(255,255,255,.25);
  transition: transform .2s, color .2s; flex-shrink: 0;
}
.drawer-link:hover .dl-arrow {
  transform: translateX(3px);
  color: rgba(255,255,255,.6);
}

/* ── Donate CTA ── */
.drawer-donate-btn {
  display: flex; align-items: center; gap: 12px;
  margin: 0 12px 12px;
  padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, var(--orange), #c43a14);
  color: var(--white); text-decoration: none;
  box-shadow: 0 6px 24px rgba(232,86,42,.4);
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.drawer-donate-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.drawer-donate-btn:hover::after { transform: translateX(100%); }
.drawer-donate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(232,86,42,.5); color: var(--white); }
.drawer-donate-btn > i:first-child { font-size: 18px; flex-shrink: 0; }
.drawer-donate-btn .dl-text strong { font-size: 14px; font-weight: 800; color: var(--white); }
.drawer-donate-btn .dl-text span   { font-size: 11px; color: rgba(255,255,255,.75); }
.drawer-donate-btn > i:last-child  { font-size: 12px; margin-left: auto; flex-shrink: 0; }

/* ── Contact Row ── */
.drawer-contact-row {
  display: flex; gap: 8px;
  padding: 0 12px 12px;
  flex-shrink: 0;
}
.drawer-contact-row a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 10px; border-radius: 14px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.drawer-contact-row a:hover { transform: translateY(-2px); }
.drawer-contact-row a span { font-size: 13px; }
.dcr-call {
  background: rgba(46,125,82,.2); color: #7ee8a2;
  border: 1px solid rgba(126,232,162,.2);
}
.dcr-call:hover { background: rgba(46,125,82,.35); box-shadow: 0 4px 16px rgba(46,125,82,.3); }
.dcr-wa {
  background: rgba(37,211,102,.15); color: #25d366;
  border: 1px solid rgba(37,211,102,.2);
}
.dcr-wa:hover { background: rgba(37,211,102,.28); box-shadow: 0 4px 16px rgba(37,211,102,.3); }

/* ── Footer Tag ── */
.drawer-footer-tag {
  padding: 12px 20px 20px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.3);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06); margin-top: auto;
}
.drawer-footer-tag i { color: rgba(126,232,162,.5); }

/* ══════════════════════════════════════
   PAGE HERO (shared)
══════════════════════════════════════ */
.page-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  color: var(--white); padding: 80px 40px 0; text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding-bottom: 50px; }
.eyebrow-page {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.7); display: block; margin-bottom: 14px;
}
.eyebrow-page i { margin-right: 6px; color: var(--orange-light); }
.page-hero h1 {
  font-family: var(--font-serif); font-size: clamp(28px, 5vw, 52px);
  font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--white);
}
.page-hero h1 em { color: #9de8b8; font-style: italic; }
.page-hero-sub { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 20px; }
.hero-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.hero-breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s; }
.hero-breadcrumb a:hover { color: #fff; }
.hero-breadcrumb i { font-size: 10px; }
.page-hero-wave { position: relative; z-index: 1; margin-top: -1px; }

/* ══════════════════════════════════════
   HERO — New split design
══════════════════════════════════════ */
.hero-section {
  min-height: calc(100vh - 110px); position: relative;
  background: linear-gradient(135deg, #062213 0%, #0d3320 40%, #143d28 70%, #0a2b1a 100%);
  display: flex; align-items: center; overflow: hidden;
}
.hero-particles {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.hero-blob-1 {
  width: 500px; height: 500px; background: rgba(46,125,82,.25);
  top: -120px; right: -80px; animation: blobFloat 8s ease-in-out infinite;
}
.hero-blob-2 {
  width: 350px; height: 350px; background: rgba(232,86,42,.15);
  bottom: -80px; left: 10%; animation: blobFloat 10s ease-in-out infinite reverse;
}
@keyframes blobFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }

.hero-inner {
  position: relative; z-index: 2; max-width: 1280px; margin: 0 auto;
  padding: 100px 60px 80px; width: 100%;
  display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center;
}

/* Hero Text */
.hero-text-col { color: var(--white); }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 8px 20px; border-radius: 50px; margin-bottom: 28px;
}
.hero-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #7ee8a2;
  box-shadow: 0 0 8px #7ee8a2; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero-pill i { color: #7ee8a2; }

.hero-h1 {
  display: flex; flex-direction: column; margin-bottom: 22px;
}
.hero-h1-top {
  font-family: var(--font-serif); font-size: clamp(38px, 5vw, 64px);
  font-weight: 400; color: rgba(255,255,255,.9); line-height: 1.15;
}
.hero-h1-em {
  font-family: var(--font-serif); font-size: clamp(44px, 6vw, 78px);
  font-weight: 400; font-style: italic; color: #7ee8a2;
  line-height: 1.1; margin-top: 4px;
}

.hero-desc {
  font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,.75);
  line-height: 1.8; margin-bottom: 36px; max-width: 540px;
}
.hero-desc strong { color: rgba(255,255,255,.95); font-weight: 700; }

.hero-actions { display: flex; gap: 14px; flex-wrap: nowrap; margin-bottom: 44px; align-items: center; }

.ha-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--white);
  padding: 15px 32px; border-radius: 50px;
  font-size: 16px; font-weight: 800; letter-spacing: 0.3px;
  transition: all .25s;
  box-shadow: 0 8px 28px rgba(232,86,42,.45);
}
.ha-primary i { font-size: 15px; }
.ha-primary:hover { background: var(--orange-light); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(232,86,42,.55); color: var(--white); }

/* hide the now-unused icon wrapper */
.ha-primary .ha-icon { display: none; }

.ha-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.85); font-size: 15px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.35); padding: 13px 26px; border-radius: 50px;
  transition: all .25s;
}
.ha-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: #fff; }

.hero-trust-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.htr-item {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 50px;
  transition: background .2s, border-color .2s;
}
.htr-item:hover { background: rgba(255,255,255,.14); border-color: rgba(126,232,162,.4); }
.htr-item i { color: #7ee8a2; font-size: 13px; }
.htr-sep { display: none; }

/* Hero Stat Cards */
.hero-cards-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.hero-stat-card {
  border-radius: 20px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px); transition: transform .3s;
}
.hero-stat-card:hover { transform: translateY(-4px); }
.hsc-green  { background: rgba(46,125,82,.35); }
.hsc-orange { background: rgba(232,86,42,.3); }
.hsc-teal   { background: rgba(0,150,136,.3); }
.hsc-purple { background: rgba(103,58,183,.3); }
.hsc-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--white);
}
.hsc-body { display: flex; flex-direction: column; }
.hsc-num {
  font-family: var(--font-serif); font-size: 30px; font-weight: 400;
  color: var(--white); line-height: 1;
}
.hsc-num span { font-size: 20px; opacity: .7; }
.hsc-label { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; margin-top: 4px; }

/* Scroll indicator */
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.4); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  z-index: 2;
}
.hero-scroll-mouse {
  width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.3);
  border-radius: 11px; display: flex; justify-content: center; padding-top: 5px;
}
.hero-scroll-wheel {
  width: 4px; height: 7px; background: rgba(255,255,255,.5);
  border-radius: 2px; animation: wheelScroll 2s infinite;
}
@keyframes wheelScroll { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(10px)} }

/* ══════════════════════════════════════
   MARQUEE TICKER
══════════════════════════════════════ */
.marquee-wrap {
  background: var(--orange); color: var(--white);
  display: flex; align-items: stretch; overflow: hidden; height: 44px;
}
.marquee-label {
  background: rgba(0,0,0,.2); padding: 0 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.marquee-track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.marquee-content {
  display: flex; align-items: center; gap: 32px; white-space: nowrap;
  font-size: 13px; font-weight: 700;
  animation: marqueeScroll 30s linear infinite;
}
.mq-dot { color: rgba(255,255,255,.5); font-size: 10px; }
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ══════════════════════════════════════
   ABOUT SPLIT SECTION
══════════════════════════════════════ */
.about-split-section {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 600px;
}
.about-split-img {
  position: relative; overflow: hidden;
}
.about-split-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.about-split-section:hover .about-split-img img { transform: scale(1.04); }
.abs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,51,32,.5) 0%, transparent 60%);
}
.abs-floating-card {
  position: absolute; bottom: 32px; left: 32px;
  background: var(--white); border-radius: 14px;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  animation: cardFloat 4s ease-in-out infinite;
}
.abs-floating-card-2 {
  bottom: auto; top: 32px; left: auto; right: 32px;
  animation-delay: 2s;
}
@keyframes cardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.afc-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--green-pale); color: var(--green-mid);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.afc-orange { background: var(--orange-pale); color: var(--orange); }
.abs-floating-card strong { display: block; font-size: 15px; font-weight: 800; color: var(--text-dark); }
.abs-floating-card span  { font-size: 12px; color: var(--text-muted); }

.about-split-text {
  background: var(--bg-cream); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center;
}
.about-split-title {
  font-family: var(--font-serif); font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400; color: var(--text-dark); line-height: 1.2; margin-bottom: 24px;
}
.about-split-title em { font-style: italic; color: var(--green-mid); }
.about-split-quote {
  background: var(--green-pale); border-left: 4px solid var(--green-mid);
  border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 22px;
}
.about-split-quote i { color: var(--green-mid); margin-bottom: 6px; display: block; }
.about-split-quote blockquote { font-family: var(--font-serif); font-size: 15px; font-style: italic; color: var(--text-dark); line-height: 1.65; margin-bottom: 6px; }
.about-split-quote cite { font-size: 12px; font-weight: 700; color: var(--green-mid); }
.about-split-body { font-size: 15px; color: var(--text-body); line-height: 1.8; margin-bottom: 22px; }
.about-split-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.asc-item { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text-body); }
.asc-item i { color: var(--green-mid); font-size: 16px; flex-shrink: 0; }
.about-split-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.asc-btn-primary {
  background: var(--green-mid); color: var(--white);
  padding: 13px 28px; border-radius: 50px; font-size: 14px; font-weight: 800; transition: all .2s;
}
.asc-btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.asc-btn-outline {
  background: transparent; color: var(--orange); border: 2px solid var(--orange);
  padding: 11px 24px; border-radius: 50px; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 7px; transition: all .2s;
}
.asc-btn-outline:hover { background: var(--orange-pale); }

/* ══════════════════════════════════════
   PROGRAMS — New grid
══════════════════════════════════════ */
.programs-section { padding: 100px 60px; background: #06190f; }
.programs-inner { max-width: 1280px; margin: 0 auto; }
.programs-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 52px; flex-wrap: wrap; gap: 16px;
}
.programs-header .section-eyebrow { color: rgba(255,255,255,.5); }
.programs-header .section-title { color: var(--white); margin-bottom: 0; }
.programs-header .section-title em { color: #7ee8a2; }
.prog-header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--white);
  padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 800;
  transition: all .2s; white-space: nowrap;
}
.prog-header-cta:hover { background: var(--orange-light); transform: translateY(-2px); }

.programs-grid-new {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.pgn-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px; padding: 36px 30px; position: relative; overflow: hidden;
  transition: all .3s; display: flex; flex-direction: column; gap: 0;
  cursor: default;
}
.pgn-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 24px;
  opacity: 0; transition: opacity .3s;
}
.pgn-food::before   { background: radial-gradient(circle at 80% 20%, rgba(230,81,0,.2), transparent 60%); }
.pgn-edu::before    { background: radial-gradient(circle at 80% 20%, rgba(21,101,192,.2), transparent 60%); }
.pgn-health::before { background: radial-gradient(circle at 80% 20%, rgba(198,40,40,.2), transparent 60%); }
.pgn-senior::before { background: radial-gradient(circle at 80% 20%, rgba(106,27,154,.2), transparent 60%); }
.pgn-women::before  { background: radial-gradient(circle at 80% 20%, rgba(136,14,79,.2), transparent 60%); }
.pgn-animal::before { background: radial-gradient(circle at 80% 20%, rgba(46,125,82,.2), transparent 60%); }
.pgn-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.pgn-card:hover::before { opacity: 1; }

.pgn-num {
  font-family: var(--font-serif); font-size: 48px; font-weight: 400;
  color: rgba(255,255,255,.06); line-height: 1; position: absolute; top: 20px; right: 24px;
}
.pgn-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 20px;
}
.pgn-food   .pgn-icon { background: rgba(230,81,0,.2);    color: #ff8a50; }
.pgn-edu    .pgn-icon { background: rgba(21,101,192,.2);  color: #64b5f6; }
.pgn-health .pgn-icon { background: rgba(198,40,40,.2);   color: #ef9a9a; }
.pgn-senior .pgn-icon { background: rgba(106,27,154,.2);  color: #ce93d8; }
.pgn-women  .pgn-icon { background: rgba(136,14,79,.2);   color: #f48fb1; }
.pgn-animal .pgn-icon { background: rgba(46,125,82,.2);   color: #81c784; }

.pgn-card h3 {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  color: var(--white); margin-bottom: 12px;
}
.pgn-card p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.75; flex: 1; margin-bottom: 20px; }
.pgn-stat {
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 16px;
}
.pgn-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.5);
  transition: all .2s;
}
.pgn-card:hover .pgn-link { color: var(--white); gap: 12px; }

/* ══════════════════════════════════════
   DONATE BANNER
══════════════════════════════════════ */
.donate-banner-section {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--orange) 0%, #c43a14 50%, #a02e0a 100%);
  padding: 90px 60px;
}
.donate-banner-bg { position: absolute; inset: 0; pointer-events: none; }
.db-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
}
.db-blob-1 { width: 400px; height: 400px; background: rgba(255,255,255,.12); top: -100px; left: -80px; }
.db-blob-2 { width: 300px; height: 300px; background: rgba(0,0,0,.15); bottom: -80px; right: 10%; }
.donate-banner-inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
}
.donate-banner-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.donate-banner-title {
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 50px);
  font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 16px;
}
.donate-banner-title em { font-style: italic; color: rgba(255,255,255,.85); }
.donate-banner-sub { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.75; margin-bottom: 32px; }
.donate-pills-row { display: flex; flex-wrap: wrap; gap: 12px; }
.dp-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.25);
  padding: 12px 20px; border-radius: 14px; color: var(--white); transition: all .2s;
  min-width: 90px;
}
.dp-pill strong { font-size: 18px; font-weight: 800; line-height: 1; }
.dp-pill span { font-size: 11px; opacity: .75; margin-top: 3px; }
.dp-pill:hover, .dp-pill-featured {
  background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6);
  transform: translateY(-3px);
}

/* Quick Donate Mini Form */
.donate-form-mini {
  background: var(--white); border-radius: 24px; padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.dfm-title { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--text-dark); margin-bottom: 20px; }
.dfm-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.dfm-amt {
  background: var(--bg-light); color: var(--text-dark); border: 2px solid var(--border);
  padding: 10px; border-radius: 10px; font-size: 15px; font-weight: 800; transition: all .2s;
}
.dfm-amt:hover, .dfm-amt.active {
  background: var(--green-mid); color: var(--white); border-color: var(--green-mid);
}
.dfm-input {
  width: 100%; border: 2px solid var(--border); border-radius: 12px;
  padding: 13px 16px; font-size: 15px; font-family: var(--font-sans);
  color: var(--text-dark); margin-bottom: 14px; outline: none; transition: border-color .2s;
}
.dfm-input:focus { border-color: var(--green-mid); }
.dfm-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: var(--orange); color: var(--white);
  padding: 15px; border-radius: 12px; font-size: 16px; font-weight: 800;
  transition: all .2s;
}
.dfm-submit:hover { background: var(--orange-light); transform: translateY(-2px); }
.dfm-note {
  font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.dfm-note i { color: var(--green-mid); }

/* ══════════════════════════════════════
   EVENTS — New design
══════════════════════════════════════ */
.events-new-section { padding: 100px 60px; background: var(--bg-cream); }
.events-new-inner { max-width: 1280px; margin: 0 auto; }
.events-new-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; flex-wrap: wrap; gap: 16px;
}
.events-see-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800; color: var(--green-mid);
  border: 2px solid var(--green-mid); padding: 10px 22px; border-radius: 50px;
  transition: all .2s;
}
.events-see-all:hover { background: var(--green-mid); color: var(--white); }
.events-new-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.en-card {
  background: var(--white); border-radius: 24px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: all .3s; display: flex; flex-direction: column;
}
.en-card:hover { transform: translateY(-8px); box-shadow: 0 20px 56px rgba(0,0,0,.12); border-color: transparent; }
.en-card-img {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
}
.en-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.en-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.en-card:hover .en-card-img img { transform: scale(1.08); }
.en-card-tag {
  position: absolute; bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 50px; backdrop-filter: blur(8px);
}
.en-tag-food   { background: rgba(230,81,0,.9);    color: #fff; }
.en-tag-senior { background: rgba(106,27,154,.9);  color: #fff; }
.en-tag-animal { background: rgba(46,125,82,.9);   color: #fff; }
.en-card-date {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 50px;
}
.en-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.en-card-body h3 {
  font-family: var(--font-serif); font-size: 19px; font-weight: 400;
  color: var(--text-dark); margin-bottom: 10px; line-height: 1.3;
}
.en-card-body p { font-size: 14px; color: var(--text-body); line-height: 1.7; flex: 1; margin-bottom: 16px; }
.en-card-footer { display: flex; align-items: center; justify-content: space-between; }
.en-impact {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--green-mid);
  background: var(--green-pale); padding: 5px 12px; border-radius: 50px;
}
.en-read {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; color: var(--text-muted); transition: all .2s;
}
.en-read:hover { color: var(--green-mid); gap: 9px; }

/* ══════════════════════════════════════
   TESTIMONIALS — New dark design
══════════════════════════════════════ */
.testi-section {
  position: relative; padding: 100px 60px; overflow: hidden;
  background: linear-gradient(135deg, #06190f 0%, #0d3320 60%, #092618 100%);
}
.testi-bg-pattern {
  position: absolute; inset: 0; opacity: .04;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 32px 32px;
}
.testi-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.testi-header { text-align: center; margin-bottom: 56px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px; padding: 32px 28px; transition: all .3s;
  display: flex; flex-direction: column; gap: 0;
}
.testi-card:hover {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2);
  transform: translateY(-4px);
}
.testi-card-featured {
  background: rgba(46,125,82,.18); border-color: rgba(126,232,162,.25);
  transform: scale(1.03);
}
.testi-card-featured:hover { transform: scale(1.03) translateY(-4px); }
.testi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.testi-stars { color: #fbbf24; font-size: 14px; letter-spacing: 1px; }
.testi-ql { font-size: 22px; color: rgba(126,232,162,.5); }
.testi-text {
  font-size: 15px; font-style: italic; color: rgba(255,255,255,.8);
  line-height: 1.8; flex: 1; margin-bottom: 24px;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-mid); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--white); flex-shrink: 0;
}
.tav-orange { background: var(--orange); }
.tav-purple { background: #6a1b9a; }
.testi-author strong { display: block; font-size: 14px; font-weight: 800; color: var(--white); }
.testi-author span { font-size: 12px; color: rgba(255,255,255,.5); }

/* ══════════════════════════════════════
   GALLERY — Masonry new design
══════════════════════════════════════ */
.gallery-new-section { padding: 100px 60px; background: var(--bg-light); }
.gallery-new-inner { max-width: 1280px; margin: 0 auto; }
.gallery-new-header { margin-bottom: 40px; }
.gallery-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 16px;
}
.gng-item {
  border-radius: 18px; overflow: hidden; position: relative; cursor: pointer;
}
.gng-large { grid-column: span 2; grid-row: span 2; }
.gng-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gng-item:hover img { transform: scale(1.08); }
.gng-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,25,15,.8) 0%, transparent 60%);
  display: flex; align-items: flex-end; padding: 20px;
  opacity: 0; transition: opacity .3s;
}
.gng-item:hover .gng-overlay { opacity: 1; }
.gng-overlay span {
  color: var(--white); font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
}

/* ══════════════════════════════════════
   VOLUNTEER CTA — Bottom section
══════════════════════════════════════ */
.vcta-section {
  padding: 100px 60px;
  background: linear-gradient(135deg, var(--green-dark) 0%, #1a5c38 100%);
  overflow: hidden; position: relative;
}
.vcta-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center;
}
.vcta-title {
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 52px);
  font-weight: 400; color: var(--white); line-height: 1.15; margin-bottom: 16px;
}
.vcta-title em { font-style: italic; color: #7ee8a2; }
.vcta-sub { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 32px; }
.vcta-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.vcta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--white);
  padding: 14px 30px; border-radius: 50px; font-size: 15px; font-weight: 800; transition: all .2s;
  box-shadow: 0 6px 20px rgba(232,86,42,.4);
}
.vcta-btn-primary:hover { background: var(--orange-light); transform: translateY(-2px); }
.vcta-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.8); font-size: 15px; font-weight: 800;
  border: 2px solid rgba(255,255,255,.3); padding: 12px 24px; border-radius: 50px;
  transition: all .2s;
}
.vcta-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.vcta-stat-ring {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.vsr-item {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: all .3s;
}
.vsr-item:hover { background: rgba(255,255,255,.14); }
.vsr-big { grid-column: span 2; background: rgba(126,232,162,.12); border-color: rgba(126,232,162,.25); }
.vsr-num {
  font-family: var(--font-serif); font-size: 36px; font-weight: 400;
  color: #7ee8a2; line-height: 1;
}
.vsr-big .vsr-num { font-size: 48px; }
.vsr-lbl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }

/* Hero stat card active pulse */
.hero-stat-card.hsc-active {
  border-color: rgba(126,232,162,.4);
  box-shadow: 0 0 0 2px rgba(126,232,162,.2), 0 8px 32px rgba(0,0,0,.3);
}

/* impact-strip kept for other pages if needed */
.impact-strip { background: var(--green-mid); padding: 24px 40px; }
.impact-strip-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.impact-item { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-right: 1px solid rgba(255,255,255,.2); }
.impact-item:last-child { border-right: none; }
.impact-icon { width: 48px; height: 48px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #9de8b8; flex-shrink: 0; }
.impact-text { display: flex; flex-direction: column; }
.impact-text strong { font-size: 16px; font-weight: 700; color: var(--white); }
.impact-text span { font-size: 12px; color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════
   VIDEO GALLERY SECTION
══════════════════════════════════════ */
.vg-section { padding: 100px 60px; background: #06190f; }
.vg-section-page { background: var(--bg-light); }
.vg-section-page .section-title { color: var(--text-dark); }
.vg-section-page .section-eyebrow { color: var(--orange); }
.vg-section-page .section-sub { color: var(--text-body); }
.vg-inner { max-width: 1280px; margin: 0 auto; }

.vg-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; flex-wrap: wrap; gap: 16px;
}
.vg-header .section-eyebrow { color: rgba(255,255,255,.5); }
.vg-header .section-title   { color: var(--white); margin-bottom: 0; }
.vg-header .section-title em { color: #7ee8a2; }
.vg-header .draw-line { background: var(--orange); }

/* Featured + side layout */
.vg-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
}
.vg-side-col { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.vg-card { border-radius: 20px; overflow: hidden; position: relative; }
.vg-featured { border-radius: 24px; }

.vg-thumb {
  position: relative; cursor: pointer; overflow: hidden;
  aspect-ratio: 16/9; display: block;
}
.vg-featured .vg-thumb { aspect-ratio: 4/3; }
.vg-side-col .vg-card .vg-thumb { aspect-ratio: 16/7; }

.vg-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  display: block;
}
.vg-thumb:hover img { transform: scale(1.07); }

/* Dark gradient overlay */
.vg-thumb::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,25,15,.92) 0%, rgba(6,25,15,.3) 50%, transparent 100%);
  transition: opacity .3s;
}

/* Play button */
.vg-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; z-index: 3;
  background: rgba(255,255,255,.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--green-dark);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), background .2s, box-shadow .3s;
}
.vg-play-sm {
  width: 48px; height: 48px; font-size: 16px;
}
.vg-thumb:hover .vg-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--orange); color: var(--white);
  box-shadow: 0 12px 40px rgba(232,86,42,.5);
}

/* Card info overlay */
.vg-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 20px 20px 18px; pointer-events: none;
}
.vg-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9); padding: 4px 12px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.2);
  margin-bottom: 8px; display: inline-flex;
}
.vg-card-overlay h3 {
  font-family: var(--font-serif); font-size: 18px; font-weight: 400;
  color: var(--white); line-height: 1.3; margin-bottom: 8px;
}
.vg-featured .vg-card-overlay h3 { font-size: 24px; }
.vg-duration {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6);
}

/* Page grid — 3 cols */
.vg-page-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.vg-page-grid .vg-thumb { aspect-ratio: 16/10; }

/* ── Video Lightbox Modal ── */
.vg-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
}
.vg-modal.vg-open { display: flex; }
.vg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88); backdrop-filter: blur(6px);
  cursor: pointer;
}
.vg-modal-box {
  position: relative; z-index: 1;
  width: min(900px, 95vw);
  animation: modalPop .35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modalPop {
  from { opacity:0; transform: scale(0.92) translateY(20px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.vg-modal-close {
  position: absolute; top: -48px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.vg-modal-close:hover { background: var(--orange); }
.vg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 0 4px;
}
.vg-modal-title {
  font-family: var(--font-serif); font-size: 17px; font-weight: 400;
  color: rgba(255,255,255,.85); line-height: 1.3;
  max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vg-modal-close {
  position: static !important; top: auto !important; right: auto !important;
  flex-shrink: 0;
}
.vg-modal-player {
  border-radius: 16px; background: #000; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  line-height: 0;
}
.vg-modal-player video {
  width: 100%; max-height: 75vh;
  display: block; border-radius: 16px;
  outline: none; background: #000;
}

/* ══════════════════════════════════════
   GALLERY PAGE STYLES
══════════════════════════════════════ */
.gallery-filter-section {
  padding: 24px 40px; background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 110px; z-index: 100;
}
.gallery-filter-inner { max-width: 1280px; margin: 0 auto; }
.gallery-filter-tabs { display: flex; gap: 10px; }
.gft-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 50px; font-size: 14px; font-weight: 700;
  background: var(--bg-light); color: var(--text-body);
  border: 2px solid var(--border); cursor: pointer;
  transition: all .2s;
}
.gft-btn:hover { border-color: var(--green-mid); color: var(--green-mid); }
.gft-btn.active { background: var(--green-mid); color: var(--white); border-color: var(--green-mid); }

/* Photo masonry grid */
.gallery-pg-section { padding: 80px 60px; background: var(--bg-cream); }
.gallery-pg-inner { max-width: 1280px; margin: 0 auto; }

.photo-masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
  margin-top: 48px;
}
.pm-item {
  position: relative; overflow: hidden; border-radius: 16px; cursor: pointer;
  grid-row: span 1;
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s;
}
.pm-tall  { grid-row: span 2; }
.pm-wide  { grid-column: span 2; }
.pm-item:hover { transform: scale(1.02); box-shadow: 0 20px 48px rgba(0,0,0,.2); z-index: 2; }

.pm-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.pm-item:hover img { transform: scale(1.08); }

.pm-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,25,15,.9) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; opacity: 0; transition: opacity .35s;
}
.pm-item:hover .pm-overlay { opacity: 1; }
.pm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.9); padding: 3px 10px; border-radius: 50px;
  margin-bottom: 6px; width: fit-content;
}
.pm-overlay p { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.4; margin: 0; }

/* Photo lightbox modal */
.photo-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
}
.photo-modal.photo-open { display: flex; }
.photo-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.92); backdrop-filter: blur(8px); cursor: pointer;
}
.photo-modal-box {
  position: relative; z-index: 1; max-width: 90vw; max-height: 90vh;
  display: flex; align-items: center; gap: 16px;
  animation: modalPop .35s cubic-bezier(0.16,1,0.3,1);
}
.photo-modal-box img {
  max-width: 80vw; max-height: 85vh; border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,.7); object-fit: contain; display: block;
}
.photo-modal-caption {
  position: absolute; bottom: -36px; left: 0; right: 0; text-align: center;
  font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500;
}
.photo-modal-close {
  position: absolute; top: -48px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s;
}
.photo-modal-close:hover { background: var(--orange); }
.photo-modal-nav {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: var(--white); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s;
}
.photo-modal-nav:hover { background: rgba(255,255,255,.25); transform: scale(1.1); }

/* Responsive */
@media (max-width: 1100px) {
  .vg-grid { grid-template-columns: 1fr; }
  .vg-featured .vg-thumb { aspect-ratio: 16/9; }
  .vg-side-col { flex-direction: row; }
  .vg-side-col .vg-card { flex: 1; }
  .vg-page-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-masonry-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .vg-section { padding: 70px 20px; }
  .gallery-pg-section { padding: 60px 20px; }
  .vg-side-col { flex-direction: column; }
  .vg-page-grid { grid-template-columns: 1fr; }
  .photo-masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .pm-tall  { grid-row: span 1; }
  .pm-wide  { grid-column: span 2; }
  .vg-play-btn { width: 52px; height: 52px; font-size: 18px; }
  .gallery-filter-section { top: 60px; padding: 16px 20px; }
  .photo-modal-nav { display: none; }
  .photo-modal-box img { max-width: 94vw; }
}

/* ══════════════════════════════════════
   STATS STRIP
══════════════════════════════════════ */
.stats-strip { background: var(--green-dark); padding: 40px; }
.stats-strip-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0;
}
.stat-item { display: flex; flex-direction: column; align-items: center; padding: 12px 32px; }
.stat-number { font-family: var(--font-serif); font-size: 42px; font-weight: 800; color: #9de8b8; line-height: 1; }
.stat-plus { font-size: 28px; }
.stat-label { font-size: 13px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
.stat-divider { width: 1px; height: 50px; background: rgba(255,255,255,.2); margin: 0 8px; }

/* home-about-section replaced by about-split-section — styles above */

/* programs-section styles now in new pgn-* classes above */

/* donate-cta-section replaced by donate-banner-section — styles above */

/* events-preview replaced by events-new-* — styles above */
.view-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-mid); color: var(--white);
  padding: 14px 32px; border-radius: 50px; font-size: 15px; font-weight: 800; transition: all .2s;
}
.view-all-btn:hover { background: var(--green-dark); transform: translateY(-2px); }

/* testimonials replaced by testi-* — styles above */

/* gallery replaced by gallery-new-* and volunteer by vcta-* — styles above */

/* ══════════════════════════════════════
   ABOUT PAGE SECTIONS
══════════════════════════════════════ */
.about-section { padding: 90px 40px; background: var(--bg-cream); }
.about-section-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.about-img-wrap { position: relative; overflow: visible; }
.about-img-main { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3; }
.about-img-badge {
  position: absolute; bottom: -16px; right: -16px;
  background: var(--green-mid); color: var(--white);
  padding: 14px 20px; border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
}
.about-img-badge i { font-size: 20px; color: #9de8b8; }
.about-section-title { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--text-dark); line-height: 1.2; margin-bottom: 16px; }
.about-section-lead { font-size: 17px; color: var(--text-body); line-height: 1.7; margin-bottom: 14px; font-weight: 500; }
.about-section-body { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 24px; }
.about-highlights { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.about-highlight-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-body); }
.ahi-icon { color: var(--green-mid); font-size: 16px; flex-shrink: 0; }
.about-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--white);
  padding: 13px 28px; border-radius: 50px; font-size: 14px; font-weight: 700; transition: all .2s;
}
.about-cta-btn:hover { background: var(--orange-light); transform: translateY(-1px); }

/* Founder Section */
.founder-section { padding: 90px 40px; background: var(--bg-light); }
.founder-inner { max-width: 1100px; margin: 0 auto; }
.founder-card {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start;
  background: var(--white); border-radius: var(--radius-lg); padding: 48px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border); margin-top: 40px;
}
.founder-img-wrap { text-align: center; }
.founder-avatar {
  width: 180px; height: 180px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-pale), var(--green-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: var(--white); margin: 0 auto 16px;
}
.founder-tag {
  display: inline-block; background: var(--orange-pale); color: var(--orange);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px; margin-bottom: 10px;
}
.founder-name { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; }
.founder-bio { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 14px; }
.founder-quote {
  background: var(--green-pale); border-left: 4px solid var(--green-mid);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin-top: 20px;
}
.founder-quote i { color: var(--green-mid); font-size: 20px; margin-bottom: 10px; display: block; }
.founder-quote blockquote { font-family: var(--font-serif); font-size: 16px; font-style: italic; color: var(--text-dark); line-height: 1.6; margin-bottom: 8px; }
.founder-quote cite { font-size: 13px; color: var(--green-mid); font-weight: 600; }

/* Vision & Mission */
.vision-mission-section { padding: 90px 40px; background: var(--bg-cream); }
.vm-section-inner { max-width: 1100px; margin: 0 auto; }
.vm-section-header { text-align: center; margin-bottom: 48px; }
.vm-section-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.vm-section-sub { font-size: 16px; color: var(--text-body); max-width: 600px; margin: 0 auto; line-height: 1.7; }
.vm-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vm-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 40px 36px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.vm-card-vision { border-top: 4px solid var(--green-mid); }
.vm-card-mission { border-top: 4px solid var(--orange); }
.vm-card-icon-wrap { margin-bottom: 20px; }
.vm-icon { font-size: 36px; }
.vm-card-vision .vm-icon { color: var(--green-mid); }
.vm-card-mission .vm-icon { color: var(--orange); }
.vm-card-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 12px;
}
.vm-card-vision .vm-card-tag { background: var(--green-pale); color: var(--green-mid); }
.vm-card-mission .vm-card-tag { background: var(--orange-pale); color: var(--orange); }
.vm-card-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; line-height: 1.3; }
.vm-card-body { font-size: 14px; color: var(--text-body); line-height: 1.75; margin-bottom: 20px; }
.vm-card-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vm-card-list li { font-size: 14px; color: var(--text-body); padding-left: 20px; position: relative; }
.vm-card-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green-mid); font-weight: 700; }

/* Values */
.values-section { padding: 90px 40px; background: var(--bg-light); }
.values-section-inner { max-width: 1200px; margin: 0 auto; }
.values-header { text-align: center; margin-bottom: 48px; }
.values-section-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--text-dark); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px;
  border: 1px solid var(--border); text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-icon {
  font-size: 36px; color: var(--green-mid); margin-bottom: 16px;
  height: 60px; display: flex; align-items: center; justify-content: center;
}
.value-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.value-desc { font-size: 14px; color: var(--text-body); line-height: 1.7; }

/* About Bottom CTA */
.about-cta-section {
  padding: 90px 40px;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
  text-align: center; color: var(--white);
}
.about-cta-inner { max-width: 760px; margin: 0 auto; }
.about-cta-title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 44px); font-weight: 700; line-height: 1.2; margin-bottom: 14px; }
.about-cta-title em { color: #9de8b8; font-style: italic; }
.about-cta-sub { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 32px; }
.about-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.acta-btn {
  padding: 14px 28px; border-radius: 50px; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
}
.acta-btn.acta-primary { background: var(--orange); color: var(--white); }
.acta-btn.acta-primary:hover { background: var(--orange-light); transform: translateY(-2px); }
.acta-btn.acta-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); }
.acta-btn.acta-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════
   DONATION PAGE
══════════════════════════════════════ */
/* ── New Donation Page Layout ── */
.donate-main-section { padding: 80px 40px; background: var(--bg-cream); }
.donate-main-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 480px; gap: 40px; align-items: start;
}
.donate-left-col { display: flex; flex-direction: column; gap: 24px; }

/* Bank Card */
.donate-bank-card {
  background: var(--white); border-radius: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  padding: 28px; overflow: hidden;
}
.dbc-bank-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.dbc-bank-logo {
  width: 48px; height: 48px; border-radius: 14px;
  background: #004c8c; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.dbc-bank-name { display: block; font-size: 16px; font-weight: 800; color: var(--text-dark); }
.dbc-bank-sub  { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dbc-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-pale); color: var(--green-mid);
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 50px;
  flex-shrink: 0;
}

.dbc-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.dbc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.dbc-row:last-child { border-bottom: none; }
.dbc-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; min-width: 150px;
}
.dbc-label i { color: var(--green-mid); width: 14px; text-align: center; }
.dbc-val { font-size: 14px; font-weight: 700; color: var(--text-dark); flex: 1; }
.dbc-highlight {
  font-family: monospace; font-size: 15px; letter-spacing: 0.5px;
  color: var(--green-dark); background: var(--green-pale);
  padding: 3px 10px; border-radius: 6px;
}
.dbc-copy {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg-light); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.dbc-copy:hover { background: var(--green-pale); color: var(--green-mid); border-color: var(--green-mid); }

.dbc-share-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.dbc-share-row p { font-size: 13px; color: var(--text-muted); margin: 0; }
.dbc-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: all .2s;
}
.dbc-wa    { background: #e8f8ef; color: #25d366; border: 1.5px solid #25d366; }
.dbc-wa:hover { background: #25d366; color: #fff; }
.dbc-email { background: var(--green-pale); color: var(--green-mid); border: 1.5px solid var(--green-mid); }
.dbc-email:hover { background: var(--green-mid); color: #fff; }

/* QR Card */
.donate-qr-card {
  background: var(--white); border-radius: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  padding: 28px; text-align: center;
}
.dqr-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange); display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 6px;
}
.dqr-top h3 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 400;
  color: var(--text-dark); margin-bottom: 6px;
}
.dqr-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

.dqr-code-wrap {
  background: #f8fbff; border-radius: 18px;
  border: 1px solid #dce8f5; padding: 20px; margin-bottom: 20px;
}
.dqr-name-tag { margin-bottom: 14px; }
.dqr-name-tag strong {
  display: block; font-size: 17px; font-weight: 900;
  color: #004c8c; letter-spacing: 0.5px;
}
.dqr-name-tag span { font-size: 12px; font-weight: 700; color: #1565c0; margin-top: 3px; display: block; }

.dqr-img-wrap {
  width: 180px; height: 180px; margin: 0 auto 14px;
  border: 2px solid #dce8f5; border-radius: 12px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.dqr-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dqr-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted);
}
.dqr-placeholder i { font-size: 48px; color: var(--border); }
.dqr-placeholder span { font-size: 13px; font-weight: 600; }
.dqr-placeholder small { font-size: 11px; color: var(--text-muted); }
.dqr-hint {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.dqr-hint i { color: var(--green-mid); }

.dqr-apps {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.dqr-app {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dqr-app img { width: 36px; height: 36px; object-fit: contain; }
.dqr-app span { font-size: 10px; color: var(--text-muted); font-weight: 600; }

/* Donate Form Card */
.donate-right-col { position: sticky; top: 130px; }
.donate-form-card {
  background: var(--white); border-radius: 24px;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  padding: 32px;
}
.dfc-header {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
}
.dfc-icon {
  font-size: 28px; color: var(--orange); flex-shrink: 0; margin-top: 4px;
}
.dfc-header h2 {
  font-family: var(--font-serif); font-size: 24px; font-weight: 400;
  color: var(--text-dark); margin-bottom: 4px;
}
.dfc-header p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.dfc-trust-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; padding: 14px 0; margin-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.dfc-trust-row i { color: var(--green-mid); }

.dfc-contact-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 14px;
}
.dfc-contact-row span { font-size: 13px; color: var(--text-muted); }
.dfc-call, .dfc-wa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: all .2s;
}
.dfc-call { background: var(--green-pale); color: var(--green-mid); border: 1.5px solid var(--green-mid); }
.dfc-call:hover { background: var(--green-mid); color: #fff; }
.dfc-wa   { background: #e8f8ef; color: #25d366; border: 1.5px solid #25d366; }
.dfc-wa:hover { background: #25d366; color: #fff; }

/* Responsive */
@media (max-width: 1100px) {
  .donate-main-inner { grid-template-columns: 1fr; }
  .donate-right-col  { position: static; }
}
@media (max-width: 767px) {
  .donate-main-section { padding: 60px 20px; }
  .donate-bank-card, .donate-qr-card, .donate-form-card { padding: 20px; }
  .dbc-label { min-width: 120px; }
}

.donation-impact-section { padding: 80px 40px; background: var(--bg-light); }
.donation-impact-inner { max-width: 1200px; margin: 0 auto; }
.donation-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.di-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px 24px;
  border: 1px solid var(--border); text-align: center; position: relative;
  transition: transform .25s, box-shadow .25s;
}
.di-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.di-card-featured { border: 2px solid var(--orange); }
.di-featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: var(--white);
  font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 50px; white-space: nowrap;
}
.di-amount {
  font-family: var(--font-serif); font-size: 28px; font-weight: 800;
  color: var(--green-mid); margin-bottom: 12px;
}
.di-icon { font-size: 28px; margin-bottom: 12px; color: var(--orange); }
.di-card h4 { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.di-card p { font-size: 13px; color: var(--text-body); line-height: 1.65; }

/* Donation Form */
.donation-form-section { padding: 80px 40px; background: var(--bg-cream); }
.donation-form-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 56px; }
.donation-form-left h2 { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.donate-form-intro { font-size: 15px; color: var(--text-body); line-height: 1.7; margin-bottom: 28px; }
.donation-amount-quick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
}
.daq-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.daq-btn {
  background: var(--green-pale); color: var(--green-mid); border: 1.5px solid var(--green-mid);
  padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 700;
  transition: all .15s;
}
.daq-btn:hover { background: var(--green-mid); color: var(--white); }
.donate-submit-btn { background: var(--orange); }
.donate-submit-btn:hover { background: var(--orange-light); }

/* Bank Details */
.bank-details-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.bdc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bdc-header i { font-size: 24px; color: var(--green-mid); }
.bdc-header h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-dark); }
.bdc-note { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.bdc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.bdc-row span { color: var(--text-muted); }
.bdc-row strong { color: var(--text-dark); }
.bdc-share { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.bdc-share span { font-size: 13px; color: var(--text-muted); }
.bdc-wa-btn, .bdc-email-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: all .2s;
}
.bdc-wa-btn { background: #e8f8ef; color: #25d366; border: 1.5px solid #25d366; }
.bdc-wa-btn:hover { background: #25d366; color: var(--white); }
.bdc-email-btn { background: var(--green-pale); color: var(--green-mid); border: 1.5px solid var(--green-mid); }
.bdc-email-btn:hover { background: var(--green-mid); color: var(--white); }

/* Donation Trust Cards */
.donation-trust-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.dtrust-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border-radius: var(--radius); padding: 16px 18px;
  border: 1px solid var(--border);
}
.dtrust-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--green-mid); flex-shrink: 0;
}
.dtrust-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.dtrust-card p { font-size: 13px; color: var(--text-body); line-height: 1.6; }

.donate-quick-contact {
  background: var(--green-pale); border-radius: var(--radius); padding: 16px 18px;
}
.donate-quick-contact p { font-size: 13px; color: var(--text-body); margin-bottom: 10px; }
.dqc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 700;
  margin-right: 8px; transition: all .2s;
}
.dqc-call { background: var(--green-mid); color: var(--white); }
.dqc-call:hover { background: var(--green-dark); }
.dqc-wa { background: #25d366; color: var(--white); }
.dqc-wa:hover { background: #1ead54; }

/* ══════════════════════════════════════
   TEAM PAGE
══════════════════════════════════════ */
.team-section { padding: 80px 40px; background: var(--bg-cream); }
.team-section-alt { background: var(--bg-light); }
.team-section-inner { max-width: 1200px; margin: 0 auto; }

/* Leadership Grid */
.team-leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

/* Base team card */
.team-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(13,51,32,.13); }

/* ── Featured card (Founder) — full-width horizontal ── */
.team-card-featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 320px;
}

/* Featured photo side */
.tcf-photo-wrap {
  position: relative;
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-mid) 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcf-photo-frame {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tcf-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.tcf-photo-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 90px; color: rgba(255,255,255,.25);
}
.tcf-photo-frame.tcf-no-photo .tcf-photo { display: none; }
.tcf-photo-frame:not(.tcf-no-photo) .tcf-photo-fallback { display: none; }
.tcf-badge {
  position: absolute; top: 20px; left: 20px;
  background: var(--orange); color: var(--white);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(230,120,0,.4);
}

/* Featured body side */
.tcf-body {
  padding: 40px 36px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--white);
}
.tcf-role-tag {
  display: inline-block;
  background: var(--green-pale); color: var(--green-mid);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px; margin-bottom: 14px; width: fit-content;
}
.tcf-name {
  font-family: var(--font-serif); font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700; color: var(--text-dark); margin-bottom: 14px; line-height: 1.2;
}
.tcf-bio { font-size: 15px; color: var(--text-body); line-height: 1.75; margin-bottom: 22px; }
.tcf-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.tcf-contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-pale); color: var(--green-mid);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 50px;
  transition: background .2s, color .2s;
}
.tcf-contact-btn:hover { background: var(--green-mid); color: var(--white); }
.tcf-contact-btn.tcf-email { background: #fff3e0; color: #e65100; }
.tcf-contact-btn.tcf-email:hover { background: var(--orange); color: var(--white); }
.tcf-social { display: flex; gap: 10px; }
.tcf-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-pale); color: var(--green-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; transition: background .2s, color .2s, transform .2s;
}
.tcf-social a:hover { background: var(--green-mid); color: var(--white); transform: scale(1.12); }

/* ── Standard team card ── */
.team-card-std { display: flex; flex-direction: column; }

.tcs-photo-wrap {
  position: relative;
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-mid) 100%);
  height: 220px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tcs-photo-frame {
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tcs-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.tcs-photo-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 70px; color: rgba(255,255,255,.25);
}
.tcs-photo-frame.tcs-no-photo .tcs-photo { display: none; }
.tcs-photo-frame:not(.tcs-no-photo) .tcs-photo-fallback { display: none; }

.tcs-body { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }
.tcs-role-tag {
  display: inline-block;
  background: var(--green-pale); color: var(--green-mid);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; width: fit-content;
}
.tcs-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.tcs-bio { font-size: 13.5px; color: var(--text-body); line-height: 1.7; flex: 1; margin-bottom: 16px; }
.tcs-social { display: flex; gap: 8px; margin-top: auto; }
.tcs-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green-pale); color: var(--green-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: background .2s, color .2s, transform .2s;
}
.tcs-social a:hover { background: var(--green-mid); color: var(--white); transform: scale(1.1); }


/* Volunteer Stats */
.volunteer-stats-section {
  padding: 60px 40px; background: var(--green-mid);
}
.volunteer-stats-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.vs-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.2);
}
.vs-stat:last-child { border-right: none; }
.vss-num { font-family: var(--font-serif); font-size: 36px; font-weight: 800; color: #9de8b8; line-height: 1; }
.vss-num span { font-size: 24px; }
.vss-label { font-size: 13px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }

/* Join Team Section */
.join-team-section { padding: 90px 40px; background: var(--bg-cream); }
.join-team-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center;
}
.join-team-text h2 { font-family: var(--font-serif); font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; color: var(--text-dark); margin-bottom: 12px; }
.join-team-text h2 em { color: var(--green-mid); font-style: italic; }
.join-team-text p { font-size: 15px; color: var(--text-body); line-height: 1.7; margin-bottom: 20px; }
.join-team-perks { display: flex; flex-direction: column; gap: 10px; }
.jtp-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-body); }
.jtp-item i { color: var(--green-mid); }
.join-team-action { display: flex; flex-direction: column; gap: 14px; min-width: 220px; }
.jta-btn-primary {
  background: var(--green-mid); color: var(--white);
  padding: 14px 28px; border-radius: 50px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; transition: all .2s; justify-content: center;
}
.jta-btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.jta-btn-outline {
  background: transparent; color: var(--orange); border: 2px solid var(--orange);
  padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; transition: all .2s; justify-content: center;
}
.jta-btn-outline:hover { background: var(--orange-pale); }
.jta-contact { text-align: center; }
.jta-contact span { font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.jta-contact a { font-size: 15px; font-weight: 700; color: var(--green-mid); }

/* ══════════════════════════════════════
   EVENTS PAGE
══════════════════════════════════════ */
.events-filter-section { padding: 32px 40px; background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 117px; z-index: 100; }
.events-filter-inner { max-width: 1200px; margin: 0 auto; }
.events-filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.eft-btn {
  background: var(--bg-light); color: var(--text-body); border: 1.5px solid var(--border);
  padding: 8px 20px; border-radius: 50px; font-size: 13px; font-weight: 600; transition: all .2s;
}
.eft-btn:hover { background: var(--green-pale); color: var(--green-mid); border-color: var(--green-mid); }
.eft-btn.active { background: var(--green-mid); color: var(--white); border-color: var(--green-mid); }

.events-section { padding: 80px 40px; background: var(--bg-cream); }
.events-section-past { background: var(--bg-light); }
.events-inner { max-width: 1200px; margin: 0 auto; }

.upcoming-events-grid { display: flex; flex-direction: column; gap: 20px; }
.upcoming-event-card {
  display: flex; gap: 28px; align-items: flex-start;
  background: var(--white); border-radius: var(--radius-lg); padding: 28px 32px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.upcoming-event-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.uec-date-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--green-mid); color: var(--white); border-radius: var(--radius);
  min-width: 70px; padding: 12px 16px; text-align: center; flex-shrink: 0;
}
.uec-day { font-family: var(--font-serif); font-size: 28px; font-weight: 800; line-height: 1; }
.uec-month { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: .85; }
.uec-body { flex: 1; }
.uec-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px;
}
.uec-body h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.uec-body p { font-size: 14px; color: var(--text-body); line-height: 1.65; margin-bottom: 14px; }
.uec-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.uec-meta span { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.uec-meta i { color: var(--green-mid); }
.uec-register-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--orange); color: var(--white);
  padding: 10px 22px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: all .2s;
}
.uec-register-btn:hover { background: var(--orange-light); }

.past-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.event-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); transition: transform .25s, box-shadow .25s;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.event-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.event-card:hover .event-card-img img { transform: scale(1.05); }
.event-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 50px;
}
.event-card-body { padding: 22px; }
.event-meta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.event-date, .event-loc { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.event-date i, .event-loc i { color: var(--green-mid); }
.event-card-body h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; line-height: 1.3; }
.event-card-body p { font-size: 13px; color: var(--text-body); line-height: 1.65; margin-bottom: 14px; }
.event-impact-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ei-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-pale); color: var(--green-mid);
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 50px;
}

/* Tags colour coding */
.food-tag { background: #fff3e0; color: #e65100; }
.education-tag { background: #e3f2fd; color: #1565c0; }
.health-tag { background: #fce4ec; color: #c62828; }
.senior-tag { background: #f3e5f5; color: #6a1b9a; }
.animal-tag { background: #e8f5e9; color: #2e7d32; }
.women-tag { background: #fce4ec; color: #880e4f; }

/* ══════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════ */
.contact-info-strip { padding: 50px 40px; background: var(--bg-light); }
.contact-info-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.contact-info-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border-radius: var(--radius); padding: 20px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ci-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.phone-icon { background: #e8f5ee; color: var(--green-mid); }
.wa-icon { background: #e8f8ef; color: #25d366; }
.mail-icon { background: var(--orange-pale); color: var(--orange); }
.loc-icon { background: #e8eaf6; color: #3949ab; }
.ci-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.ci-value { font-size: 14px; font-weight: 600; color: var(--text-dark); transition: color .2s; }
a.ci-value:hover { color: var(--green-mid); }

.contact-form-section { padding: 80px 40px; background: var(--bg-cream); }
.contact-form-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 56px; }
.contact-form-left h2 { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.contact-form-left p { font-size: 15px; color: var(--text-body); line-height: 1.7; margin-bottom: 28px; }

.contact-side-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 24px 28px;
  border: 1px solid var(--border); margin-bottom: 20px;
}
.contact-side-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.contact-side-card h3 i { color: var(--green-mid); }
.contact-side-card p { font-size: 14px; color: var(--text-body); line-height: 1.7; }
.contact-side-hours { margin-top: 16px; }
.contact-side-hours h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.contact-side-hours h4 i { color: var(--orange); }
.csh-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-body); padding: 6px 0; border-bottom: 1px solid var(--border); }
.contact-get-involved { }
.cgi-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.cgi-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.donate-cgi { background: var(--orange-pale); color: var(--orange); }
.volunteer-cgi { background: var(--green-pale); color: var(--green-mid); }
.partner-cgi { background: #e3f2fd; color: #1565c0; }
.cgi-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.cgi-item p { font-size: 13px; color: var(--text-body); line-height: 1.5; margin-bottom: 4px; }
.cgi-item a { font-size: 13px; font-weight: 700; color: var(--green-mid); transition: color .2s; }
.cgi-item a:hover { color: var(--orange); }

.contact-quick-strip {
  background: var(--green-pale); border-radius: var(--radius); padding: 16px 18px;
}
.contact-quick-strip p { font-size: 13px; color: var(--text-body); margin-bottom: 10px; }
.cqs-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 700;
  margin-right: 8px; margin-bottom: 8px; transition: all .2s;
}
.cqs-call { background: var(--green-mid); color: var(--white); }
.cqs-call:hover { background: var(--green-dark); }
.cqs-whatsapp { background: #25d366; color: var(--white); }
.cqs-whatsapp:hover { background: #1ead54; }

.map-section { background: var(--bg-light); }
.map-label {
  display: flex; align-items: center; gap: 10px; padding: 16px 40px;
  font-size: 14px; color: var(--text-body); background: var(--white); border-bottom: 1px solid var(--border);
}
.map-label i { color: var(--orange); }
.map-wrap { line-height: 0; }

/* ══════════════════════════════════════
   CONTACT / DONATION FORMS (shared)
══════════════════════════════════════ */
.form-alert {
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500;
}
.form-alert i { font-size: 18px; }
.form-alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.form-alert-error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
.form-alert-error a { color: var(--orange); font-weight: 700; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 0; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 16px;
  font-size: 14px; font-family: var(--font-sans); color: var(--text-dark);
  background: var(--white); transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(46,125,82,.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit {
  background: var(--green-mid); color: var(--white); border: none;
  padding: 14px 36px; border-radius: 50px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all .2s; margin-top: 8px; width: 100%;
}
.form-submit:hover { background: var(--green-dark); transform: translateY(-1px); }
.contact-submit-btn { background: var(--green-mid); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer { background: var(--green-dark); color: rgba(255,255,255,.75); padding: 0; }
.footer-top {
  max-width: 1300px; margin: 0 auto; padding: 60px 40px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px;
}
.footer-logo { height: 60px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.65); margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: rgba(255,255,255,.7); transition: all .2s;
}
.footer-social a:hover { background: var(--orange); color: var(--white); }
.footer-col h4 { font-size: 14px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.65); transition: color .2s; }
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14px;
}
.footer-ci-icon { color: var(--orange-light); margin-top: 2px; flex-shrink: 0; }
.footer-contact-item a { color: rgba(255,255,255,.65); transition: color .2s; }
.footer-contact-item a:hover { color: var(--white); }
.footer-contact-item span { color: rgba(255,255,255,.65); line-height: 1.6; }
.footer-donate-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  background: var(--orange); color: var(--white);
  padding: 11px 22px; border-radius: 50px; font-size: 13px; font-weight: 700; transition: all .2s;
}
.footer-donate-btn:hover { background: var(--orange-light); transform: translateY(-1px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.55); transition: color .2s; }
.footer-bottom a:hover { color: var(--white); }
/* ══════════════════════════════════════
   FLOATING BUTTONS
══════════════════════════════════════ */
.float-call-btn,
.float-wa-btn {
  position: fixed; bottom: 28px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s;
}
.float-call-btn {
  left: 24px;
  background: var(--green-mid); color: var(--white);
  box-shadow: 0 6px 24px rgba(26,92,56,.45);
}
.float-wa-btn {
  right: 24px;
  background: #25d366; color: var(--white);
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
}
.float-call-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 32px rgba(26,92,56,.5);
  color: var(--white);
}
.float-wa-btn:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 32px rgba(37,211,102,.5);
  color: var(--white);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; padding: 80px 40px 60px; }
  .hero-cards-col { grid-template-columns: repeat(4, 1fr); }
  .programs-grid-new { grid-template-columns: repeat(2, 1fr); }
  .donation-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .testi-card-featured { transform: none; }
  .team-leadership-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card-featured { grid-column: span 2; grid-template-columns: 280px 1fr; }
  .founder-card { grid-template-columns: 1fr; }
  .donate-banner-inner { grid-template-columns: 1fr; }
  .vcta-inner { grid-template-columns: 1fr; }
  .join-team-inner { grid-template-columns: 1fr; }
  .vm-cards-row { grid-template-columns: 1fr; }
  .about-split-section { grid-template-columns: 1fr; }
  .about-split-img { min-height: 380px; }
  .gallery-new-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gng-large { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/6; }
}

@media (max-width: 900px) {
  .impact-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .contact-info-inner { grid-template-columns: repeat(2, 1fr); }
  .about-section-inner { grid-template-columns: 1fr; }
  .about-img-badge { position: static; margin-top: 16px; display: inline-flex; }
  .donation-form-inner, .contact-form-inner { grid-template-columns: 1fr; }
  .past-events-grid { grid-template-columns: repeat(2, 1fr); }
  .events-new-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .volunteer-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .vs-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); }
  .vcta-stat-ring { grid-template-columns: repeat(4, 1fr); }
  .vsr-big { grid-column: auto; }
}

@media (max-width: 767px) {
  /* ── body offset = top-bar(hidden) + nav(60px) ── */
  body { padding-top: 60px; }
  .hero-section { min-height: calc(100vh - 60px); }

  /* Hide desktop top bar entirely on mobile */
  .top-bar { display: none; }

  /* Nav sits at top: 0 on mobile */
  .top-nav {
    top: 0; height: 60px; padding: 0 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }

  /* Logo area — left */
  .logo-wrap { gap: 8px; }
  .logo-wrap img { height: 38px; }
  .logo-name { font-size: 13px; }
  .logo-tagline { display: none; }

  /* Center nav links — hide on mobile */
  .nav-links { display: none; }

  /* Right side: phone + WA icons + hamburger */
  .nav-cta-wrap { gap: 6px; }
  .nav-donate-btn { display: none; }          /* hide text donate btn */
  .nav-mobile-actions { display: flex; align-items: center; gap: 6px; } /* show icon row */
  .nma-btn {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: transform .2s;
  }
  .nma-call { background: var(--green-pale); color: var(--green-mid); }
  .nma-wa   { background: #e8f8ef; color: #25d366; }
  .nma-call:hover, .nma-wa:hover { transform: scale(1.1); }
  .nav-menu-btn { display: flex; width: 36px; height: 36px; border-radius: 8px; }

  /* Hero mobile */
  .hero-inner { padding: 60px 24px 48px; }
  .hero-h1-top { font-size: 34px; }
  .hero-h1-em  { font-size: 40px; }
  .hero-cards-col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hsc-num { font-size: 24px; }

  /* Marquee */
  .marquee-label { padding: 0 12px; font-size: 10px; }

  /* About split */
  .about-split-text { padding: 48px 24px; }
  .abs-floating-card-2 { display: none; }

  /* Programs */
  .programs-section { padding: 70px 24px; }
  .programs-grid-new { grid-template-columns: 1fr; }
  .programs-header { flex-direction: column; align-items: flex-start; }

  /* Donate banner */
  .donate-banner-section { padding: 60px 24px; }
  .donate-pills-row { flex-wrap: wrap; }

  /* Events */
  .events-new-section { padding: 70px 24px; }
  .events-new-grid { grid-template-columns: 1fr; }
  .events-new-header { flex-direction: column; align-items: flex-start; }

  /* Testimonials */
  .testi-section { padding: 70px 24px; }
  .testi-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-new-section { padding: 70px 24px; }
  .gallery-new-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gng-large { grid-column: auto; grid-row: auto; aspect-ratio: 16/9; }

  /* VCTA */
  .vcta-section { padding: 70px 24px; }
  .vcta-stat-ring { grid-template-columns: repeat(2, 1fr); }
  .vsr-big { grid-column: span 2; }

  /* Shared page */
  .page-hero { padding: 50px 20px 0; }
  .impact-strip-inner { grid-template-columns: 1fr; }
  .contact-info-inner { grid-template-columns: 1fr; }
  .stats-strip-inner { flex-wrap: wrap; }
  .stat-item { padding: 12px 20px; }
  .stat-divider { display: none; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
  .footer-bottom { padding: 16px 20px; flex-direction: column; text-align: center; }
  .values-grid { grid-template-columns: 1fr; }
  .upcoming-event-card { flex-direction: column; }
  .past-events-grid, .donation-impact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .events-filter-section { padding: 12px 0; top: 60px; }
  .events-filter-inner { padding: 0; }
  .events-filter-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 16px 8px; gap: 8px; }
  .events-filter-tabs::-webkit-scrollbar { display: none; }
  .eft-btn { flex-shrink: 0; white-space: nowrap; padding: 7px 16px; font-size: 12px; }

  /* Hero buttons — one row on mobile */
  .ha-primary { padding: 12px 20px; font-size: 14px; white-space: nowrap; }
  .ha-secondary { padding: 11px 16px; font-size: 14px; white-space: nowrap; }

  /* About badge — keep inside on mobile */
  .about-img-badge { right: 0; bottom: 0; }

  /* Team page mobile */
  .team-leadership-grid { grid-template-columns: 1fr; }
  .team-card-featured { grid-column: auto; grid-template-columns: 1fr; }
  .tcf-photo-wrap { height: 260px; }
  .tcf-body { padding: 24px 20px; }
  .tcs-photo-wrap { height: 200px; }
  .tcf-contact { flex-direction: column; }
  .tcf-contact-btn { justify-content: center; }
}

@media (max-width: 480px) {
  .photo-masonry-grid { grid-template-columns: repeat(2, 1fr); }
  .pm-tall, .pm-wide { grid-column: auto; grid-row: auto; }
}