:root {
  --M:#D92AA8; --MD:#A01E7C; --ML:#F5A8E5; --MX:#FDF0FA;
  --S:#5570F4; --SD:#3348C8; --SL:#B8C4FB; --SX:#EEF1FE;
  --G:#0AB763; --GL:#E6F9F0; --GD:#077A43;
  --O:#F5A623; --OL:#FEF6E8; --P:#7C3AED; --PL:#F1EEFE;
  --W:#FFFFFF; --OW:#F7F9FF; --D:#0F1B35; --GR:#64748B; --GLT:#E2E8F0;
  --fd:'Playfair Display', Georgia, serif; --fb:'DM Sans', sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--fb); color:var(--D); line-height:1.6; background:var(--W); }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--fd); line-height:1.2; }
.container { max-width:1180px; margin:0 auto; padding:0 1.5rem; }

/* ---------------- Header ---------------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--GLT); }
.header-inner { max-width:1180px; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:0.65rem; }
.logo-img { height:44px; width:44px; object-fit:contain; flex-shrink:0; }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1.2; }
.logo-text { font-family:var(--fd); font-weight:800; font-size:1.05rem; color:var(--D); }
.logo-tagline { font-family:var(--fb); font-weight:600; font-size:0.62rem; color:var(--M); text-transform:uppercase; letter-spacing:0.06em; }
.footer-brand .logo-text { color:#fff; }
.footer-brand .logo-tagline { color:var(--ML); }
.footer-brand .logo-text { color:#fff; }
.footer-brand .logo { align-items:center; }
.main-nav { display:flex; gap:1.75rem; align-items:center; font-size:0.9rem; font-weight:500; }
.main-nav a:hover { color:var(--M); }
.header-cta { display:flex; align-items:center; gap:1rem; }
.btn-donate { background:var(--M); color:#fff; padding:0.65rem 1.4rem; border-radius:24px; font-weight:700; font-size:0.9rem; }
.btn-donate:hover { background:var(--MD); }
.mob-nav-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; }
.mobile-nav { display:none; flex-direction:column; padding:1rem 1.5rem; border-top:1px solid var(--GLT); }
.mobile-nav a { padding:0.75rem 0; border-bottom:1px solid var(--GLT); }
.mobile-nav.open { display:flex; }

@media (max-width:900px) {
  .main-nav { display:none; }
  .mob-nav-toggle { display:block; }
}

/* ---------------- Page header banner ---------------- */
.page-hero { background:linear-gradient(135deg, var(--D), var(--MD)); color:#fff; padding:4rem 0 3rem; }
.page-hero .breadcrumb { font-size:0.8rem; opacity:0.8; margin-bottom:0.75rem; }
.page-hero .breadcrumb a { text-decoration:underline; }
.page-hero h1 { font-size:2.2rem; margin-bottom:0.75rem; }
.page-hero p { max-width:640px; opacity:0.9; }

/* ---------------- Buttons ---------------- */
.btn { display:inline-block; padding:0.8rem 1.75rem; border-radius:28px; font-weight:700; font-size:0.9rem; cursor:pointer; border:none; }
.btn-primary { background:var(--M); color:#fff; }
.btn-primary:hover { background:var(--MD); }
.btn-outline { background:transparent; border:2px solid #fff; color:#fff; }
.btn-outline:hover { background:#fff; color:var(--M); }
.btn-secondary { background:var(--SX); color:var(--SD); }

/* ---------------- Home hero ---------------- */
.hero { background:linear-gradient(160deg, var(--D) 0%, #4a1a5c 35%, var(--MD) 65%, var(--M) 100%); color:#fff; padding:5rem 0 4.5rem; text-align:center; }
.hero-badge { display:inline-flex; align-items:center; gap:0.6rem; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:24px; padding:0.5rem 1.2rem; font-size:0.78rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:2rem; }
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--ML); display:inline-block; }
.hero-title { font-family:var(--fd); font-weight:700; font-size:clamp(2.4rem, 6vw, 4rem); line-height:1.15; color:var(--ML); margin-bottom:1.5rem; }
.hero-quote { font-family:var(--fd); font-style:italic; font-size:1.15rem; opacity:0.9; margin-bottom:2.5rem; }
.hero-glass-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:900px; margin:0 auto 2.5rem; }
@media (max-width:800px) { .hero-glass-cards { grid-template-columns:1fr; } }
.glass-card { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:16px; padding:1.75rem; backdrop-filter:blur(10px); text-align:center; }
.glass-label { font-weight:700; font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ML); margin-bottom:0.85rem; }
.glass-card p { font-size:0.92rem; line-height:1.6; opacity:0.92; }
.hero .hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------------- Stats strip ---------------- */
.stats-strip { position:relative; background:var(--OW); padding:4rem 0; overflow:hidden; }
.stats-strip::before, .stats-strip::after { content:''; position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; z-index:0; }
.stats-strip::before { width:340px; height:340px; background:var(--ML); top:-160px; left:-100px; }
.stats-strip::after { width:280px; height:280px; background:var(--SL); bottom:-140px; right:-80px; }
.stats-strip .container { position:relative; z-index:1; }

.section-head { position:relative; text-align:center; max-width:640px; margin:0 auto 3.5rem; }
.eyebrow { text-transform:uppercase; letter-spacing:0.1em; font-size:0.78rem; font-weight:700; color:var(--M); margin-bottom:0.75rem; }
.section-head h2 { font-size:2.1rem; margin-bottom:1rem; position:relative; display:inline-block; }
.section-head h2::after { content:''; display:block; width:56px; height:4px; border-radius:2px; background:linear-gradient(90deg, var(--M), var(--S)); margin:0.85rem auto 0; }
.section-head p { color:var(--GR); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1.5rem; text-align:center; }
.stat-icon-badge { width:56px; height:56px; border-radius:50%; background:var(--MX); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 0.85rem; transition:transform 0.25s; }
.stat-block:hover .stat-icon-badge { transform:scale(1.08) rotate(-4deg); }
.stat-block strong { display:block; font-family:var(--fd); font-size:2.2rem; color:var(--M); }
.stat-block span { font-size:0.85rem; color:var(--GR); }

/* ---------------- Section generic ---------------- */
.section { padding:4.5rem 0; }

/* ---------------- Pillars grid ---------------- */
.pillars-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.75rem; }
.pillars-section { position:relative; }
.pillars-section::before { content:''; position:absolute; inset:0; background-image:radial-gradient(var(--GLT) 1.5px, transparent 1.5px); background-size:28px 28px; -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000 0%, transparent 75%); pointer-events:none; z-index:0; }
.pillars-section .container { position:relative; z-index:1; }
.pillar-card { position:relative; background:#fff; border:1px solid var(--GLT); border-radius:20px; padding:2rem 1.85rem; overflow:hidden; transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.pillar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent, var(--M)); transform:scaleX(0); transform-origin:left; transition:transform 0.35s; }
.pillar-card::after { content:attr(data-icon); position:absolute; right:-0.5rem; bottom:-1.2rem; font-size:6rem; opacity:0.05; line-height:1; transform:rotate(-8deg); transition:opacity 0.3s, transform 0.3s; pointer-events:none; }
.pillar-card:hover { transform:translateY(-8px); box-shadow:0 24px 48px rgba(15,27,53,0.12); border-color:transparent; }
.pillar-card:hover::before { transform:scaleX(1); }
.pillar-card:hover::after { opacity:0.1; transform:rotate(-4deg) scale(1.08); }
.pillar-icon { position:relative; width:64px; height:64px; border-radius:16px; background:var(--accent-tint, var(--MX)); display:flex; align-items:center; justify-content:center; font-size:1.9rem; margin-bottom:1.25rem; transition:transform 0.3s, box-shadow 0.3s; }
.pillar-card:hover .pillar-icon { transform:scale(1.1) rotate(-4deg); box-shadow:0 0 0 8px var(--accent-tint, var(--MX)); }
.pillar-card h3 { font-size:1.2rem; margin-bottom:0.55rem; position:relative; }
.pillar-card p { color:var(--GR); font-size:0.9rem; margin-bottom:1.1rem; position:relative; line-height:1.55; }
.pillar-card a { color:var(--accent, var(--M)); font-weight:700; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.3rem; transition:gap 0.2s; position:relative; }
.pillar-card a:hover { gap:0.55rem; }

.pillar-card[data-color="M"] { --accent:var(--M); --accent-tint:var(--MX); }
.pillar-card[data-color="S"] { --accent:var(--S); --accent-tint:var(--SX); }
.pillar-card[data-color="G"] { --accent:var(--GD); --accent-tint:var(--GL); }
.pillar-card[data-color="O"] { --accent:#B45309; --accent-tint:var(--OL); }
.pillar-card[data-color="P"] { --accent:var(--P); --accent-tint:var(--PL); }
.pillar-card[data-color="D"] { --accent:var(--D); --accent-tint:#EEF1F7; }

/* ---------------- Card grids (news/events/programmes) ---------------- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.75rem; }
.content-card { background:#fff; border:1px solid var(--GLT); border-radius:16px; overflow:hidden; transition:box-shadow 0.2s; }
.content-card:hover { box-shadow:0 12px 32px rgba(15,27,53,0.08); }
.content-card img { width:100%; height:190px; object-fit:cover; }

/* Event posters are tall/portrait infographics — cropping them into a
   short landscape box cuts off critical text, so they get their own
   taller, uncropped treatment with a tinted backdrop behind the image.
   Selector specificity here MUST beat ".content-card img" above. */
.event-poster-frame { width:100%; height:230px; background:linear-gradient(135deg, var(--MX), var(--SX)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.content-card .event-poster-frame img.event-poster-img { width:100%; height:100%; object-fit:contain; }
.event-detail-poster-frame { width:100%; max-height:560px; background:linear-gradient(135deg, var(--MX), var(--SX)); border-radius:16px; margin-bottom:2rem; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.event-detail-poster-img { width:100%; height:100%; max-height:560px; object-fit:contain; }

/* Generic reusable version of the above for any card/detail image that may
   be a tall infographic/poster rather than a simple photo (job postings,
   volunteer calls, etc.) — same non-cropping treatment as event posters. */
.card-poster-frame { width:100%; height:230px; background:linear-gradient(135deg, var(--MX), var(--SX)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.content-card .card-poster-frame img.card-poster-img { width:100%; height:100%; object-fit:contain; }
.detail-poster-frame { width:100%; max-height:560px; background:linear-gradient(135deg, var(--MX), var(--SX)); border-radius:16px; margin-bottom:2rem; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.detail-poster-img { width:100%; height:100%; max-height:560px; object-fit:contain; }
.content-card .card-body { padding:1.25rem; }
.content-card .card-tag { font-size:0.72rem; font-weight:700; text-transform:uppercase; color:var(--M); margin-bottom:0.5rem; letter-spacing:0.04em; }
.content-card h3 { font-size:1.05rem; margin-bottom:0.5rem; }
.content-card p { font-size:0.88rem; color:var(--GR); margin-bottom:0.75rem; }
.content-card .card-meta { font-size:0.78rem; color:var(--GR); }
.no-image-placeholder { width:100%; height:190px; background:linear-gradient(135deg, var(--MX), var(--SX)); display:flex; align-items:center; justify-content:center; font-family:var(--fd); color:var(--M); font-size:1.5rem; }

/* ---------------- CTA band ---------------- */
.cta-band { background:linear-gradient(135deg, var(--D), var(--M)); color:#fff; padding:3.5rem 0; text-align:center; }
.cta-band h2 { font-size:1.8rem; margin-bottom:0.75rem; }
.cta-band p { opacity:0.9; margin-bottom:1.75rem; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------------- Footer ---------------- */
.site-footer { background:var(--D); color:rgba(255,255,255,0.85); padding:3.5rem 0 1.5rem; }
.footer-inner { max-width:1180px; margin:0 auto; padding:0 1.5rem; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr; gap:2rem; }
.footer-brand p { opacity:0.75; font-size:0.88rem; }
.footer-col h4 { color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1rem; }
.footer-col a { display:block; padding:0.35rem 0; font-size:0.88rem; opacity:0.8; }
.footer-col a:hover { opacity:1; color:var(--ML); }
.footer-social { display:flex; gap:1rem; margin-top:0.75rem; }
.newsletter-blurb { font-size:0.85rem; opacity:0.75; margin-bottom:0.9rem; }
.newsletter-form { display:flex; border-radius:24px; overflow:hidden; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); }
.newsletter-form input { flex:1; min-width:0; background:none; border:none; padding:0.65rem 1rem; color:#fff; font-size:0.85rem; font-family:var(--fb); }
.newsletter-form input::placeholder { color:rgba(255,255,255,0.5); }
.newsletter-form input:focus { outline:none; }
.newsletter-form button { background:var(--M); border:none; color:#fff; width:38px; font-size:1rem; cursor:pointer; flex-shrink:0; }
.newsletter-form button:hover { background:var(--MD); }
.newsletter-form button:disabled { opacity:0.6; cursor:default; }
.newsletter-alert { font-size:0.78rem; padding:0.5rem 0.75rem; border-radius:8px; margin-bottom:0.75rem; }
.newsletter-alert.success { background:rgba(10,183,99,0.18); color:#6EE7B7; }
.newsletter-alert.error { background:rgba(217,42,168,0.18); color:var(--ML); }
.footer-bottom { text-align:center; font-size:0.78rem; opacity:0.6; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
@media (max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; } }

/* ---------------- Forms ---------------- */
.form-card { background:#fff; border:1px solid var(--GLT); border-radius:20px; padding:2rem; max-width:640px; margin:0 auto; }
.field-group { margin-bottom:1.1rem; }
.field-group label { display:block; font-size:0.8rem; font-weight:700; margin-bottom:0.4rem; }
.field-group input, .field-group select, .field-group textarea {
  width:100%; padding:0.7rem 0.9rem; border:1px solid var(--GLT); border-radius:10px; font-family:var(--fb); font-size:0.95rem;
}
.field-group textarea { min-height:120px; resize:vertical; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px) { .form-grid-2 { grid-template-columns:1fr; } }
.checkbox-row { display:flex; align-items:flex-start; gap:0.6rem; font-size:0.85rem; }
.checkbox-row input { width:auto; margin-top:0.2rem; }
.alert { padding:0.9rem 1.1rem; border-radius:10px; font-size:0.88rem; margin-bottom:1.25rem; }
.alert-success { background:var(--GL); color:var(--GD); }
.alert-error { background:#FEE2E2; color:#B91C1C; }

/* ---------------- Tabs (About page) ---------------- */
.page-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center; padding:2rem 1.5rem 0; }
.pt-btn { background:var(--OW); border:none; padding:0.7rem 1.3rem; border-radius:24px; font-weight:700; font-size:0.85rem; cursor:pointer; color:var(--GR); }
.pt-btn.active { background:var(--M); color:#fff; }
.about-sub { display:none; padding:3rem 0; }
.about-sub.active { display:block; }

.founder-grid { display:grid; grid-template-columns:320px 1fr; gap:3rem; align-items:start; }
@media (max-width:800px) { .founder-grid { grid-template-columns:1fr; } }
.founder-portrait { border-radius:20px; overflow:hidden; box-shadow:0 16px 48px rgba(217,42,168,0.18); background:var(--MX); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:3rem; color:var(--M); }
.founder-name { font-family:var(--fd); font-size:1.8rem; margin-bottom:0.3rem; }
.founder-title { color:var(--M); font-weight:700; margin-bottom:1.25rem; }
.founder-bio { margin-bottom:1rem; color:var(--GR); }
.founder-quote { background:var(--MX); border-left:4px solid var(--M); padding:1.25rem 1.5rem; border-radius:0 12px 12px 0; margin:1.5rem 0; font-style:italic; }

.timeline { position:relative; max-width:800px; margin:0 auto; }
.tl-item { display:flex; gap:1.5rem; margin-bottom:2rem; }
.tl-year { font-weight:800; color:var(--M); min-width:100px; }
.tl-content h3 { font-size:1.05rem; margin-bottom:0.4rem; }
.tl-content p { color:var(--GR); font-size:0.9rem; }

.mvv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem; }
.mvv-card { background:#fff; border:1px solid var(--GLT); border-radius:18px; padding:2rem; }
.mvv-card .ico { font-size:2rem; margin-bottom:1rem; }
.val-list { list-style:none; margin-top:0.75rem; }
.val-list li { padding:0.4rem 0; font-size:0.88rem; color:var(--GR); }

.gov-grid { display:grid; grid-template-columns:280px 1fr; gap:2.5rem; }
@media (max-width:800px) { .gov-grid { grid-template-columns:1fr; } }
.gov-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.gov-stat { text-align:center; background:var(--OW); border-radius:12px; padding:1rem; }
.gov-stat strong { display:block; font-size:1.6rem; color:var(--M); font-family:var(--fd); }
.subboard-row { display:flex; align-items:center; gap:1rem; padding:0.9rem; border:1px solid var(--GLT); border-radius:12px; margin-bottom:0.75rem; }
.subboard-row .ico { font-size:1.5rem; }

.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1.5rem; text-align:center; }
.team-avatar { width:80px; height:80px; border-radius:50%; background:var(--MX); color:var(--M); font-family:var(--fd); font-size:1.5rem; display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem; }

/* ---------------- Pillar detail (programmes category page) ---------------- */
.sdg-tags { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1rem; }
.sdg-tag { font-size:0.75rem; font-weight:700; padding:0.35rem 0.8rem; border-radius:14px; border:1px solid var(--GLT); }

/* ---------------- Gallery ---------------- */
.gallery-masonry { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; }
.gallery-masonry img { width:100%; height:220px; object-fit:cover; border-radius:12px; }

/* ---------------- Empty state ---------------- */
.empty-note { text-align:center; padding:3rem 1rem; color:var(--GR); }

/* ---------------- 404 ---------------- */
.error-page { text-align:center; padding:6rem 1.5rem; }
.error-page h1 { font-size:5rem; color:var(--M); }