/* ═══════════════════════════════════════════════
   MTOTO STAWI FOUNDATION — SHARED STYLESHEET
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --green-dark:    #1a5c2a;
  --green-mid:     #2d8a45;
  --green-light:   #4caf65;
  --green-pale:    #e8f5eb;
  --green-accent:  #38a957;
  --gold:          #d4a017;
  --gold-light:    #f5d87a;
  --white:         #ffffff;
  --off-white:     #f9faf8;
  --gray-light:    #f2f4f1;
  --gray-mid:      #8a9a87;
  --gray-dark:     #3d4a3a;
  --text-dark:     #1c2b1a;
  --text-mid:      #4a5e46;
  --text-light:    #7a8c76;
  --shadow-sm:     0 2px 8px rgba(26,92,42,.08);
  --shadow-md:     0 8px 32px rgba(26,92,42,.12);
  --shadow-lg:     0 20px 60px rgba(26,92,42,.18);
  --radius:        10px;
  --radius-lg:     18px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
  background: var(--white);
}

/* ── TOPBAR ── */
.topbar { background:var(--green-dark); color:rgba(255,255,255,.82); font-size:13px; padding:8px 0; }
.topbar-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar a { color:rgba(255,255,255,.82); text-decoration:none; }
.topbar a:hover { color:var(--gold-light); }
.topbar-links { display:flex; gap:20px; align-items:center; }
.topbar-social { display:flex; gap:10px; }
.topbar-social a { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); font-size:12px; font-weight:600; color:white; transition:background .2s; }
.topbar-social a:hover { background:var(--green-accent); }

/* ── HEADER ── */
header { background:var(--white); position:sticky; top:0; z-index:1000; box-shadow:var(--shadow-sm); border-bottom:3px solid var(--green-accent); }
.header-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-icon { width:52px; height:52px; background:linear-gradient(135deg,var(--green-dark),var(--green-mid)); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-icon svg { width:28px; height:28px; fill:white; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.logo-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--green-dark); letter-spacing:-.3px; }
.logo-tagline { font-size:10.5px; color:var(--gray-mid); letter-spacing:.8px; text-transform:uppercase; font-weight:500; }

nav { display:flex; align-items:center; gap:4px; }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:4px; padding:8px 14px; color:var(--text-dark); font-size:14px; font-weight:500; text-decoration:none; border-radius:6px; transition:background .2s,color .2s; cursor:pointer; }
.nav-link:hover, .nav-link.active { background:var(--green-pale); color:var(--green-dark); }
.nav-link .chevron { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dropdown { position:absolute; top:calc(100% + 4px); left:0; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-md); border:1px solid rgba(0,0,0,.08); min-width:200px; padding:8px 0; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .2s,transform .2s; z-index:999; }
.nav-item:hover .dropdown { opacity:1; pointer-events:all; transform:translateY(0); }
.dropdown a { display:block; padding:9px 18px; font-size:13.5px; color:var(--text-mid); text-decoration:none; transition:background .15s,color .15s; }
.dropdown a:hover { background:var(--green-pale); color:var(--green-dark); }
.header-ctas { display:flex; gap:10px; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:50px; font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:transform .15s,box-shadow .15s,background .2s; letter-spacing:.2px; font-family:'DM Sans',sans-serif; }
.btn:hover { transform:translateY(-1px); }
.btn-outline { background:transparent; border:2px solid var(--green-mid); color:var(--green-dark); }
.btn-outline:hover { background:var(--green-pale); }
.btn-solid { background:var(--green-mid); color:white; box-shadow:0 4px 16px rgba(45,138,69,.3); }
.btn-solid:hover { background:var(--green-dark); box-shadow:0 6px 20px rgba(26,92,42,.4); }
.btn-gold { background:var(--gold); color:white; box-shadow:0 4px 16px rgba(212,160,23,.35); }
.btn-gold:hover { background:#b8890e; box-shadow:0 6px 20px rgba(212,160,23,.45); }
.btn-white { background:white; color:var(--green-dark); font-weight:600; }
.btn-white:hover { background:var(--green-pale); }
.btn-outline-white { background:transparent; border:2px solid rgba(255,255,255,.6); color:white; font-weight:600; }
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:white; }

/* ── MOBILE NAV ── */
.mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-menu-btn svg { width:24px; height:24px; stroke:var(--text-dark); fill:none; stroke-width:2; stroke-linecap:round; }
.mobile-nav { display:none; background:var(--white); padding:16px 24px 24px; border-top:1px solid rgba(0,0,0,.08); flex-direction:column; gap:4px; }
.mobile-nav a { display:block; padding:10px 12px; color:var(--text-dark); font-size:15px; font-weight:500; text-decoration:none; border-radius:6px; transition:background .15s; }
.mobile-nav a:hover { background:var(--green-pale); }
.mobile-nav-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-light); padding:8px 12px 4px; }

/* ── PAGE HERO ── */
.page-hero { background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%); padding:72px 0 64px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px; border-radius:50%; background:rgba(255,255,255,.04); }
.page-hero::after { content:''; position:absolute; bottom:-60px; left:200px; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,.03); }
.page-hero .container { position:relative; z-index:1; }
.page-hero-label { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(32px,4.5vw,54px); font-weight:700; color:white; line-height:1.15; letter-spacing:-.5px; max-width:680px; margin-bottom:18px; }
.page-hero p { font-size:18px; color:rgba(255,255,255,.82); max-width:580px; font-weight:300; line-height:1.7; }
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.breadcrumb a { color:rgba(255,255,255,.65); font-size:13px; text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--gold-light); }
.breadcrumb span { color:rgba(255,255,255,.4); font-size:13px; }
.breadcrumb .current { color:rgba(255,255,255,.85); font-size:13px; }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
section { padding:80px 0; }
.section-label { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--green-accent); margin-bottom:14px; }
h2.section-title { font-family:'Playfair Display',serif; font-size:clamp(26px,3.2vw,42px); font-weight:700; color:var(--text-dark); line-height:1.2; letter-spacing:-.4px; margin-bottom:18px; }
.section-intro { font-size:17px; color:var(--text-mid); max-width:640px; line-height:1.7; font-weight:300; }
.bg-off { background:var(--off-white); }

/* ── PROSE CONTENT ── */
.prose { max-width:800px; }
.prose h3 { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; color:var(--text-dark); margin:36px 0 14px; }
.prose p { font-size:16px; color:var(--text-mid); line-height:1.8; margin-bottom:16px; }
.prose ul { padding-left:24px; margin-bottom:16px; }
.prose ul li { font-size:16px; color:var(--text-mid); line-height:1.8; margin-bottom:6px; }
.prose strong { color:var(--text-dark); font-weight:600; }

/* ── CARDS ── */
.card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.06); overflow:hidden; transition:transform .25s,box-shadow .25s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-body { padding:26px 28px 30px; }
.card-body h3 { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--text-dark); margin-bottom:10px; line-height:1.3; }
.card-body p { font-size:14.5px; color:var(--text-mid); line-height:1.7; font-weight:300; }
.card-img { height:210px; background-size:cover; background-position:center; }
.card-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green-mid); margin-bottom:10px; }
.read-more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--green-mid); text-decoration:none; }
.read-more svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.card:hover .read-more svg { transform:translateX(4px); }

/* ── DONATE BANNER ── */
.donate-banner { background:linear-gradient(135deg,var(--green-dark) 0%,var(--green-mid) 100%); padding:72px 0; position:relative; overflow:hidden; }
.donate-banner::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.04); }
.donate-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:relative; z-index:1; }
.donate-text h2 { font-family:'Playfair Display',serif; font-size:clamp(26px,3vw,38px); font-weight:700; color:white; line-height:1.2; margin-bottom:14px; }
.donate-text p { font-size:17px; color:rgba(255,255,255,.82); font-weight:300; max-width:520px; }
.donate-actions { display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap; }

/* ── PARTNERS ── */
.partner-pill { padding:10px 22px; background:var(--gray-light); border-radius:50px; font-size:13.5px; font-weight:500; color:var(--text-mid); transition:background .2s,color .2s; display:inline-block; }
.partner-pill:hover { background:var(--green-pale); color:var(--green-dark); }

/* ── FOOTER ── */
footer { background:var(--text-dark); color:rgba(255,255,255,.8); padding:72px 0 0; }
.footer-grid { max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:18px; }
.footer-logo-icon { width:42px; height:42px; background:linear-gradient(135deg,var(--green-mid),var(--green-accent)); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-logo-icon svg { width:22px; height:22px; fill:white; }
.footer-logo-name { font-family:'Playfair Display',serif; font-size:18px; color:white; font-weight:700; }
.footer-desc { font-size:14px; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:22px; font-weight:300; }
.footer-contact { font-size:13.5px; color:rgba(255,255,255,.65); line-height:1.9; }
.footer-contact a { color:rgba(255,255,255,.65); text-decoration:none; }
.footer-contact a:hover { color:var(--gold-light); }
.footer-heading { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-links a { font-size:13.5px; color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:white; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:12px; font-weight:700; text-decoration:none; transition:background .2s,color .2s; }
.footer-social a:hover { background:var(--green-mid); color:white; }
.footer-bottom { max-width:1200px; margin:0 auto; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.08); margin-top:56px; }
.footer-bottom p { font-size:13px; color:rgba(255,255,255,.45); }
.footer-bottom a { color:rgba(255,255,255,.55); text-decoration:none; }
.footer-bottom a:hover { color:white; }

/* ── NEWSLETTER ── */
.newsletter { background:var(--green-dark); padding:60px 0; }
.newsletter-inner { max-width:640px; margin:0 auto; padding:0 24px; text-align:center; }
.newsletter h2 { font-family:'Playfair Display',serif; font-size:30px; color:white; margin-bottom:12px; }
.newsletter p { font-size:16px; color:rgba(255,255,255,.75); margin-bottom:28px; font-weight:300; }
.newsletter-form { display:flex; gap:10px; max-width:480px; margin:0 auto; }
.newsletter-input { flex:1; padding:12px 18px; border-radius:50px; border:none; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; background:rgba(255,255,255,.12); color:white; border:1.5px solid rgba(255,255,255,.2); }
.newsletter-input::placeholder { color:rgba(255,255,255,.5); }
.newsletter-input:focus { border-color:var(--gold-light); background:rgba(255,255,255,.18); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ═══════════════════════════════════════════════ */

/* ── Tablet 1024px ── */
@media (max-width:1024px) {
  nav, .header-ctas { display:none; }
  .mobile-menu-btn { display:block; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .donate-inner { flex-direction:column; text-align:center; }
  .donate-actions { justify-content:center; }
}

/* ── Mobile 768px ── */
@media (max-width:768px) {
  /* Layout */
  section { padding:52px 0; }

  /* Typography scale-down */
  h2.section-title { font-size:26px; }
  .page-hero h1 { font-size:28px; }
  .page-hero p { font-size:15px; }

  /* Header */
  .header-inner { height:64px; padding:0 16px; }
  .logo-icon { width:44px; height:44px; }
  .logo-name { font-size:18px; }

  /* Topbar — hide on mobile */
  .topbar { display:none; }

  /* Mobile nav */
  .mobile-nav { flex-direction:column; }

  /* Hero */
  .hero { min-height:85vh; }
  .hero-content { padding:60px 20px; }
  .hero h1 { font-size:clamp(28px,7vw,44px); }
  .hero-sub { font-size:15px; }
  .hero-actions { flex-direction:column; gap:10px; }
  .hero-actions .btn { width:100%; justify-content:center; text-align:center; }

  /* Stats strip */
  .stats-inner { grid-template-columns:repeat(2,1fr); gap:20px; padding:0 16px; }
  .stat-num { font-size:34px; }

  /* Intro split */
  .intro-grid { grid-template-columns:1fr; gap:40px; }
  .intro-img { height:320px; }
  .intro-badge { right:0; bottom:-16px; padding:14px 18px; min-width:130px; }
  .intro-badge .num { font-size:28px; }
  .intro-badge .lbl { font-size:10.5px; }

  /* Focus cards */
  .focus-grid { grid-template-columns:1fr; }
  .fcard-img { height:200px; }

  /* Approach */
  .approach-grid { grid-template-columns:1fr; }
  .apcard { padding:28px 22px; }
  .apnum { font-size:48px; }

  /* Stories */
  .stories-grid { grid-template-columns:1fr; }

  /* Team */
  .team-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .team-photo, [style*="height:220px"][style*="object-fit:cover"] { height:180px; }

  /* Map grid */
  .map-grid { grid-template-columns:1fr; gap:32px; }
  .map-box { height:280px; }

  /* Partners grid */
  .partners-grid-4 { grid-template-columns:repeat(2,1fr) !important; }

  /* Donate banner */
  .donate-banner { padding:48px 0; }
  .donate-inner { padding:0 20px; }
  .donate-text h2 { font-size:24px; }
  .donate-actions { flex-direction:column; width:100%; }
  .donate-actions .btn { width:100%; justify-content:center; }

  /* Newsletter */
  .newsletter-form { flex-direction:column; }
  .newsletter-input { border-radius:8px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; padding:0 20px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; padding:18px 20px; }

  /* Page hero */
  .page-hero { padding:52px 0 44px; }
  .breadcrumb { display:none; }

  /* Container padding */
  .container { padding:0 16px; }

  /* Leadership cards */
  .leader-card { grid-template-columns:1fr; }
  .lphoto, .lphoto-ph { width:100%; height:260px; min-height:unset; }
  .lbody { padding:22px 20px; }
  .lname { font-size:22px; }

  /* Board grid */
  .board-grid, .bcard-grid { grid-template-columns:1fr 1fr !important; gap:16px; }

  /* About grid */
  .ab2 { grid-template-columns:1fr !important; gap:32px; }

  /* Values grid */
  .vgrid { grid-template-columns:repeat(2,1fr) !important; }

  /* Regional cards */
  .rcard-grid { grid-template-columns:1fr !important; }
}

/* ── Small mobile 480px ── */
@media (max-width:480px) {
  /* Team — 2 columns still but tighter */
  .team-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .team-info h4 { font-size:12.5px; }
  .team-role { font-size:11px; }

  /* Partners — 2 columns */
  .partners-grid-4 { grid-template-columns:repeat(2,1fr) !important; }

  /* Board — 1 column on very small screens */
  .board-grid { grid-template-columns:1fr !important; }

  /* Hero */
  .hero h1 { font-size:26px; letter-spacing:-0.5px; }
  .hero-sub { font-size:14px; }

  /* Stats */
  .stat-num { font-size:30px; }
  .stat-label { font-size:12px; }

  /* Section intro */
  .section-intro { font-size:15px; }

  /* Card body */
  .card-body h3 { font-size:17px; }
  .card-body p { font-size:13.5px; }

  /* Buttons — full width in key sections */
  .hero-actions .btn, .donate-actions .btn { font-size:14px; padding:12px 20px; }
}