/* ================================================================
   nav-fix.css — UPLUS v3.2  (loads last, wins all specificity)
   ================================================================ */

/* ── FONT: Inter (Wezesha-style clean humanist sans) ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;600;700;900&display=swap');

/* ── GLOBAL FONT REDUCTION ─────────────────────────────────────── */
html { font-size: 90% !important; }
@media (max-width: 768px) { html { font-size: 95% !important; } }

/* ── Apply Inter as the body font everywhere ─────────────────── */
body, input, select, textarea, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
}
/* Nav, buttons, labels stay Inter */
.nav-link, .btn, .drawer-links a, .drawer-toggle,
.section-label, .pill-label, .dd-title, .dd-desc,
label, .toast-title, .toast-msg,
p, li, td, th, span, small, figcaption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── SCROLLBAR REMOVAL ─────────────────────────────────────────── */
html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; overflow-x: hidden !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; }

/* ── HEADER ────────────────────────────────────────────────────── */
:root { --nav-h: 72px; --orange: #e8521a; --navy: #1c3048; --green: #1e8449; }
#main-header {
  position: fixed !important; top: 0; left: 0; right: 0;
  z-index: 9000 !important;
  transition: background .35s ease, box-shadow .35s ease;
}
#main-header.scrolled {
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.09) !important;
}

/* ── NAVBAR ────────────────────────────────────────────────────── */
.navbar {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  max-width: 1160px; margin: 0 auto;
  padding: 0 28px; height: var(--nav-h);
}
.navbar-brand img {
  height: 54px !important; width: auto;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.navbar-brand:hover img { transform: scale(1.05); }

/* ── NAV LIST — each li is the dropdown's positioning parent ────── */
.nav-list {
  display: flex !important; align-items: center !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
}
.nav-list > li,
.has-dropdown { position: relative !important; }

/* ── NAV LINKS ─────────────────────────────────────────────────── */
.nav-list > li > a.nav-link,
.nav-list > li.has-dropdown > a.nav-link {
  display: inline-flex !important; align-items: center !important;
  /* NO gap — arrows removed */
  padding: 0 14px !important; height: var(--nav-h) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .87rem !important; font-weight: 500 !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  border: none !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: color .2s ease !important;
}
/* Animated underline bar */
.nav-list > li > a.nav-link::before {
  content: ''; position: absolute; bottom: 0; left: 14px; right: 14px;
  height: 2px; background: var(--orange);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform .25s ease;
}
.nav-list > li > a.nav-link:hover { color: #fff !important; }
.nav-list > li > a.nav-link:hover::before { transform: scaleX(1); }
.nav-list > li > a.nav-link.active { color: #fff !important; }
.nav-list > li > a.nav-link.active::before { transform: scaleX(1); }
#main-header.scrolled .nav-list > li > a.nav-link { color: #2c3e50 !important; }
#main-header.scrolled .nav-list > li > a.nav-link:hover { color: var(--orange) !important; }
#main-header.scrolled .nav-list > li > a.nav-link.active { color: var(--orange) !important; }

/* ── HIDE ALL NAV ARROWS ───────────────────────────────────────── */
.nav-arrow,
.has-dropdown .nav-arrow {
  display: none !important;
}

/* ── DONATE BUTTON ─────────────────────────────────────────────── */
a.nav-donate {
  height: auto !important; padding: 9px 20px !important;
  margin-left: 8px; background: var(--orange) !important;
  color: #fff !important; border-radius: 6px !important;
  font-weight: 700 !important; font-size: .84rem !important;
  box-shadow: 0 3px 12px rgba(232,82,26,.3) !important;
  transition: background .2s, transform .2s !important;
}
a.nav-donate:hover { background: #c94315 !important; transform: translateY(-2px) !important; }
a.nav-donate::before { display: none !important; }
#main-header.scrolled a.nav-donate { color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   DROPDOWN — anchored under its own link, frosted glass, SQUARED
   ════════════════════════════════════════════════════════════════ */
.nav-dropdown {
  position: absolute !important;
  top: calc(var(--nav-h) + 2px) !important;
  left: 0 !important;
  transform: translateY(-10px) !important;
  /* Frosted glass */
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-radius: 0 !important;           /* SQUARED — no rounding */
  border: none !important;
  box-shadow: 0 10px 36px rgba(28,48,72,.13) !important;
  padding: 6px 4px !important;
  list-style: none !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease !important;
  z-index: 9100 !important;
  min-width: 230px !important;
}
/* Wide (Our Work) — anchor to right so it doesn't overflow left */
.has-dropdown.wide .nav-dropdown {
  min-width: 480px !important;
  left: auto !important;
  right: 0 !important;
}
/* Hover bridge */
.has-dropdown::before {
  content: ''; position: absolute; top: 66px; left: 0; right: 0;
  height: 10px; background: transparent; z-index: 9050;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1 !important; pointer-events: all !important;
  transform: translateY(0) !important;
}

/* Wide grid */
.has-dropdown.wide .nav-dropdown { padding: 12px 10px !important; }
.has-dropdown.wide .nav-dropdown > ul {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 2px !important; list-style: none !important; margin: 0; padding: 0;
}

/* Dropdown separator */
.nav-dropdown li.sep {
  height: 1px !important; background: rgba(0,0,0,.07) !important;
  margin: 4px 6px !important;
}

/* Dropdown links */
.nav-dropdown li a {
  display: flex !important; align-items: center !important; gap: 11px !important;
  padding: 9px 12px !important;
  border-radius: 0 !important;           /* SQUARED */
  text-decoration: none !important;
  transition: background .15s ease !important;
  border: none !important;
}
.nav-dropdown li a:hover {
  background: rgba(232,82,26,.07) !important;
}

/* ── DROPDOWN ICONS — dull/muted, not bright ───────────────────── */
.dd-icon {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .82rem;
  filter: saturate(0.4) brightness(0.85);  /* desaturate + dim */
  transition: filter .2s ease;
}
.nav-dropdown li a:hover .dd-icon {
  filter: saturate(0.7) brightness(0.9);   /* slightly more visible on hover */
}

/* Dropdown text */
.dd-text { display: flex; flex-direction: column; gap: 1px; }
.dd-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem; font-weight: 600; color: #1c3048; line-height: 1.2;
  transition: color .15s;
}
.dd-desc { font-size: .72rem; color: #9aa5b4; line-height: 1.3; }
.nav-dropdown li a:hover .dd-title { color: var(--orange); }

/* ── HAMBURGER ─────────────────────────────────────────────────── */
#nav-hamburger {
  display: none !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  gap: 5px !important; width: 40px !important; height: 40px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  border-radius: 7px !important; cursor: pointer !important;
  padding: 0 !important; flex-shrink: 0 !important;
  transition: background .2s !important;
}
#nav-hamburger:hover { background: rgba(255,255,255,.22) !important; }
#main-header.scrolled #nav-hamburger { background: #f4f6f9 !important; border-color: #d0d8e4 !important; }
.ham-bar { display: block !important; width: 18px !important; height: 2px !important; background: #fff !important; border-radius: 2px !important; transition: transform .3s ease, opacity .22s ease !important; }
#main-header.scrolled .ham-bar { background: #1c3048 !important; }
#nav-hamburger.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
#nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0 !important; }
#nav-hamburger.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ── MOBILE OVERLAY ────────────────────────────────────────────── */
#mobile-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.5) !important; backdrop-filter: blur(3px) !important;
  z-index: 9200 !important; opacity: 0 !important; pointer-events: none !important;
  transition: opacity .3s ease !important;
}
#mobile-overlay.open { opacity: 1 !important; pointer-events: all !important; }

/* ── MOBILE DRAWER ─────────────────────────────────────────────── */
#mobile-drawer {
  position: fixed !important; top: 0; left: 0; bottom: 0 !important;
  width: min(290px, 85vw) !important; background: #1c3048 !important;
  z-index: 9300 !important; display: flex !important; flex-direction: column !important;
  transform: translateX(-100%) !important;
  transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
  overflow-y: auto !important;
}
#mobile-drawer.open { transform: translateX(0) !important; }
.drawer-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 18px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; flex-shrink: 0 !important; }
.drawer-head img { height: 42px !important; }
#drawer-close { width: 32px; height: 32px; border-radius: 5px; background: rgba(255,255,255,.1) !important; border: none !important; color: rgba(255,255,255,.8) !important; font-size: .95rem; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .2s; }
#drawer-close:hover { background: rgba(255,255,255,.2) !important; }
.drawer-links { flex: 1 !important; padding: 8px 0 !important; display: flex !important; flex-direction: column !important; }
.drawer-links a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px !important; font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; font-weight: 500 !important; color: rgba(255,255,255,.7) !important; text-decoration: none !important; border-left: 3px solid transparent !important; transition: all .15s !important; }
.drawer-links a:hover, .drawer-links a.active { background: rgba(255,255,255,.07) !important; color: #fff !important; border-left-color: var(--orange) !important; }
.drawer-links a .dm-icon { font-size: .82rem; width: 16px; text-align: center; opacity: .6; }
.drawer-donate { color: rgba(255,175,95,.9) !important; }
.drawer-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 20px !important; font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; font-weight: 500 !important; color: rgba(255,255,255,.7) !important; cursor: pointer !important; border-left: 3px solid transparent !important; transition: all .15s !important; user-select: none !important; }
.drawer-toggle:hover, .drawer-toggle.open-state { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.dtoggle-arrow { font-size: .62rem !important; opacity: .6 !important; transition: transform .26s ease !important; display: inline-block !important; }
.drawer-toggle.open-state .dtoggle-arrow { transform: rotate(180deg) !important; }
.drawer-sub { overflow: hidden !important; max-height: 0 !important; transition: max-height .32s ease !important; background: rgba(0,0,0,.14) !important; }
.drawer-sub.open { max-height: 400px !important; }
.drawer-sub a { padding: 9px 20px 9px 30px !important; font-size: .85rem !important; color: rgba(255,255,255,.52) !important; border-left: none !important; }
.drawer-sub a:hover { color: rgba(255,255,255,.88) !important; border-left: none !important; }
.drawer-sep { height: 1px !important; background: rgba(255,255,255,.07) !important; margin: 6px 0 !important; }
.drawer-foot { padding: 14px 16px 22px !important; border-top: 1px solid rgba(255,255,255,.07) !important; flex-shrink: 0 !important; }
.drawer-donate-btn { display: block !important; text-align: center !important; padding: 13px !important; background: var(--orange) !important; color: #fff !important; border-radius: 7px !important; font-weight: 700 !important; font-size: .9rem !important; text-decoration: none !important; transition: background .2s !important; font-family: 'DM Sans', sans-serif !important; }
.drawer-donate-btn:hover { background: #c94315 !important; }

/* ── SHOW/HIDE ─────────────────────────────────────────────────── */
@media (max-width: 960px) { .nav-list { display: none !important; } #nav-hamburger { display: flex !important; } }
@media (min-width: 961px) { #nav-hamburger { display: none !important; } }

/* ── HERO — two-column: text LEFT, buttons RIGHT ───────────────── */
.hero .container {
  padding: 0 clamp(16px, 4vw, 48px) !important;
}
.hero-content {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto auto !important;
  align-items: end !important;
  gap: 0 40px !important;
  padding-top: 170px !important;
  padding-bottom: 100px !important;
  text-align: left !important;
}
/* Label spans full width above */
.hero-content > .section-label {
  grid-column: 1 / -1 !important;
  text-align: left !important;
  margin-bottom: 10px !important;
}
/* Heading on the left column */
.hero-content > h1 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  text-align: left !important;
  max-width: 520px !important;
}
/* Sub text on the left column */
.hero-content > p.hero-sub {
  grid-column: 1 !important;
  grid-row: 3 !important;
  text-align: left !important;
  max-width: 480px !important;
  margin: 14px 0 0 !important;
}
/* Buttons on the RIGHT column, vertically centred */
.hero-content > .hero-ctas {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-left: 20px !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
  margin-left: 10px !important;
}
.hero-content > .hero-ctas .btn {
  width: 100% !important;
  justify-content: center !important;
  white-space: nowrap !important;
  min-width: 180px !important;
}
/* Scroll indicator spans full width */
#hero-scroll-hint {
  grid-column: 1 / -1 !important;
}

/* Mobile — single column, buttons below text */
@media (max-width: 768px) {
  .hero .container { padding: 0 20px !important; }
  .hero-content {
    display: block !important;
    padding-top: 130px !important;
    padding-bottom: 80px !important;
  }
  .hero-content > h1 { max-width: 100% !important; }
  .hero-content > p.hero-sub { max-width: 100% !important; }
  .hero-content > .hero-ctas {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 22px !important;
  }
  .hero-content > .hero-ctas .btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 140px !important;
  }
}

/* ── PAGE HERO SPACING ─────────────────────────────────────────── */
.page-hero, .about-hero, .work-hero, .action-hero, .don-hero { padding-top: 140px !important; }
@media (max-width: 768px) { .page-hero, .about-hero, .work-hero, .action-hero, .don-hero { padding-top: 110px !important; } }

/* ── FOOTER BOTTOM ─────────────────────────────────────────────── */
.footer-bottom { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; padding: 20px 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; font-size: .78rem !important; color: rgba(255,255,255,.4) !important; }
.footer-bottom > span { flex: 1 1 200px; min-width: 0; }
.footer-bottom-links { display: flex !important; gap: 18px !important; flex-shrink: 0 !important; }
.footer-bottom-links a { color: rgba(255,255,255,.42) !important; text-decoration: none !important; white-space: nowrap !important; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.8) !important; }
@media (max-width: 560px) { .footer-bottom { flex-direction: column !important; align-items: flex-start !important; } }

/* ── TOAST STYLES ──────────────────────────────────────────────── */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; max-width: 340px; pointer-events: none; }
.uplus-toast { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18); display: flex; align-items: flex-start; gap: 12px; pointer-events: all; opacity: 0; transform: translateX(30px); transition: opacity .3s ease, transform .3s ease; font-family: 'DM Sans', sans-serif; }
.uplus-toast.show { opacity: 1; transform: translateX(0); }
.uplus-toast.out  { opacity: 0; transform: translateX(30px); }
.toast-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 700; color: #1a252f; font-size: .87rem; }
.toast-msg   { color: #777; font-size: .81rem; line-height: 1.4; margin-top: 2px; }
.toast-close { background: none; border: none; cursor: pointer; color: #aaa; font-size: .85rem; padding: 0; flex-shrink: 0; }
.uplus-toast.success { border-left: 4px solid #1e8449; }
.uplus-toast.error   { border-left: 4px solid #c0392b; }
.uplus-toast.warning { border-left: 4px solid #e67e22; }
.uplus-toast.info    { border-left: 4px solid #2980b9; }
.uplus-toast.loading { border-left: 4px solid #7f8c8d; }


/* ── RESPONSIVE GRIDS — stack vertically on mobile ─────────────── */
/* Stat boxes (African Problem section) */
.stat-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .stat-boxes-grid { grid-template-columns: 1fr !important; }
}

/* Causes of abandonment (3-col) */
.causes-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) { .causes-grid-3 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .causes-grid-3 { grid-template-columns: 1fr !important; } }

/* Our Work model grid */
.model-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .model-grid { grid-template-columns: 1fr !important; } }

/* Support cards (Take Action) */
.support-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .support-grid { grid-template-columns: 1fr !important; } }

/* Partner types (4-col) */
.partner-types {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .partner-types { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .partner-types { grid-template-columns: 1fr !important; } }

/* Impact numbers */
.numbers-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 700px) { .numbers-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 420px) { .numbers-grid { grid-template-columns: 1fr !important; } }

/* Pillars grid */
.pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 860px) { .pillars-grid { grid-template-columns: 1fr !important; } }

/* VM grid (About page) */
.vm-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 620px) { .vm-grid { grid-template-columns: 1fr !important; } }

/* Values grid (About page) */
.val-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 560px) { .val-grid { grid-template-columns: 1fr !important; } }

/* Founders grid (About page) */
.founders-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 640px) { .founders-grid { grid-template-columns: 1fr !important; } }

/* Two-col layouts (general) */
.two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px;
  align-items: center;
}
@media (max-width: 740px) { .two-col { grid-template-columns: 1fr !important; gap: 30px !important; } }

/* Helpline cards */
.helpline-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 520px) { .helpline-cards { grid-template-columns: 1fr !important; } }

/* About objectives 3-col — targets the GRID CONTAINER, not the cards */
.obj-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
/* Each card should stack vertically — override any inherited grid */
.obj-grid > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* Icon inside objective card */
.obj-grid > div > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 14px !important;
}
/* Title and paragraph stack below icon */
.obj-grid > div > h4 {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}
.obj-grid > div > p {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .obj-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .obj-grid { grid-template-columns: 1fr !important; }
}

/* Donation layout */
.don-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
}
@media (max-width: 800px) { .don-layout { grid-template-columns: 1fr !important; } }

/* Contact grid */
.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
}
@media (max-width: 740px) { .contact-grid { grid-template-columns: 1fr !important; } }

/* stat-row (Our Work page) */
.stat-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 560px) { .stat-row { grid-template-columns: 1fr !important; } }


/* ================================================================
   WEZESHA-INSPIRED CLEAN REDESIGN
   Minimal, open, generous whitespace, clear typography
   ================================================================ */

/* ── TYPOGRAPHY — cleaner, more open ─────────────────────────── */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1a1a1a !important;
  -webkit-font-smoothing: antialiased !important;
}
h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -.01em !important;
}
.section-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #111 !important;
}

/* ── SECTION LABELS — simpler, cleaner ───────────────────────── */
.section-label, .pill-label, .pill, .label-green, .label-orange, .label-navy, .label-white {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid currentColor !important;
  display: inline-block !important;
}
.label-green { color: #1e8449 !important; }
.label-orange { color: #e8521a !important; }
.label-navy { color: #1c3048 !important; }
.label-white { color: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.4) !important; }
/* Hero label exception */
.hero-content .section-label {
  background: rgba(255,255,255,.12) !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  border: none !important;
  font-size: .72rem !important;
  color: rgba(255,255,255,.9) !important;
}

/* ── SECTION PADDING — more breathing room ───────────────────── */
.section-pad { padding: 96px 0 !important; }
.section-pad-sm { padding: 64px 0 !important; }
.sw { padding: 96px 24px !important; }
@media (max-width: 768px) {
  .section-pad { padding: 60px 0 !important; }
  .section-pad-sm { padding: 44px 0 !important; }
  .sw { padding: 60px 16px !important; }
}

/* ── PILLAR CARDS — cleaner, border-based ────────────────────── */
.pillar-card {
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 36px 28px !important;
  transition: border-color .25s, transform .25s !important;
}
.pillar-card:hover {
  border-color: #1e8449 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.07) !important;
}
.pillar-card::before { display: none !important; }
.pillar-num {
  font-size: 1rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #e8521a !important;
  letter-spacing: .08em !important;
  margin-bottom: 18px !important;
}

/* ── OBJECTIVE CARDS — clean vertical stack ──────────────────── */
.obj-grid > div {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1.5px solid #e8e8e8 !important;
  padding: 32px 26px !important;
  transition: border-color .22s !important;
}
.obj-grid > div:hover { border-color: #1c3048 !important; }

/* ── MODEL CARDS — our work ──────────────────────────────────── */
.model-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1.5px solid #e8e8e8 !important;
}
.model-card:hover {
  box-shadow: none !important;
  border-color: #1c3048 !important;
  transform: none !important;
}

/* ── BUTTONS — cleaner, Wezesha-like ─────────────────────────── */
.btn {
  border-radius: 0 !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  padding: 12px 28px !important;
}
.btn-primary { background: #1e8449 !important; border-color: #1e8449 !important; }
.btn-primary:hover { background: #145a32 !important; box-shadow: none !important; }
.btn-orange { background: #e8521a !important; border-color: #e8521a !important; }
.btn-orange:hover { background: #c94315 !important; box-shadow: none !important; }
.btn-outline { border-color: #1a1a1a !important; color: #1a1a1a !important; }
.btn-outline:hover { background: #1a1a1a !important; color: #fff !important; }
.btn-outline-white { border-color: rgba(255,255,255,.6) !important; }
a.nav-donate { border-radius: 0 !important; }

/* ── CTA BAND — cleaner ──────────────────────────────────────── */
.cta-band {
  background: #1c3048 !important;
}
.cta-band::before { display: none !important; }

/* ── STORY CARDS ─────────────────────────────────────────────── */
.story-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1.5px solid #e8e8e8 !important;
}
.story-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #1c3048 !important;
}

/* ── PARTNER/SUPPORT CARDS ───────────────────────────────────── */
.pt-card, .support-card, .partner-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pt-card:hover { box-shadow: none !important; transform: none !important; }

/* ── FOUNDER CARDS ───────────────────────────────────────────── */
.founder-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1.5px solid #e8e8e8 !important;
}
.founder-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  transform: translateY(-3px) !important;
}

/* ── FOOTER — lighter ────────────────────────────────────────── */
footer { background: #111 !important; }
.footer-main { border-top: none !important; }

/* ── IMPACT NUMBERS — dark, clean ───────────────────────────── */
.impact-numbers { background: #111 !important; }
.number-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.06) !important; }

/* ── NEWSLETTER SECTION ──────────────────────────────────────── */
.newsletter-section { background: #1e8449 !important; }
.newsletter-section input { border-radius: 0 !important; background: rgba(0,0,0,.15) !important; }
.newsletter-section .btn { border-radius: 0 !important; }

/* ── IMPACT STRIP ────────────────────────────────────────────── */
.impact-strip { background: #111 !important; }

/* ── VM CARDS on About ───────────────────────────────────────── */
.vm-card.green { border-radius: 0 !important; }
.vm-card.light { border-radius: 0 !important; }

/* ── VALUE CARDS ─────────────────────────────────────────────── */
.val-card { border-radius: 0 !important; }
.val-card:hover { box-shadow: none !important; border-color: #1e8449 !important; }

/* ── CYCLE STEPS ─────────────────────────────────────────────── */
.cycle-step { border-bottom-color: #f0f0f0 !important; }

/* ── PAGE HEROES (About, Work, Action, Donate) ───────────────── */
.about-hero, .work-hero, .action-hero, .don-hero {
  position: relative;
  overflow: hidden;
}
.about-hero::after, .work-hero::after, .action-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: #e8521a;
}

/* ── FORM INPUTS — squared, cleaner ──────────────────────────── */
.cf-group input, .cf-group select, .cf-group textarea,
.don-form input, .don-form select, .don-form textarea,
.uplus-form input, .uplus-form select, .uplus-form textarea {
  border-radius: 0 !important;
}
.amount-btn { border-radius: 0 !important; }
.btn-don-submit { border-radius: 0 !important; }
.btn-submit-full { border-radius: 0 !important; }