/* ---------------------------
       Base / Variables
       --------------------------- */
    :root{
      --brand:#115E59; /* deep green */
      --accent:#F6A623; /* warm accent */
      --muted:#6B7280;
      --bg:#FAFBF9;
      --card:#FFFFFF;
      --glass: rgba(255,255,255,0.6);
      --max-w:1200px;
      --radius:10px;
      --shadow: 0 6px 18px rgba(17,94,89,0.08);
      --glass-shadow: 0 8px 24px rgba(16,24,40,0.06);
      color-scheme: light;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,var(--bg),#f4f7f5);
      color:#0B1720;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding: 10px;
      padding-bottom:60px;
    }

    a{color:var(--brand); text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--max-w); margin:0 auto; padding:24px}

    header.site-header{
      backdrop-filter: blur(6px);
      background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
      position: sticky; top:0; z-index:60;
      border-bottom:1px solid rgba(17,94,89,0.06);
    }
    .nav{
      display:flex; align-items:center; gap:18px; justify-content:space-between;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:700; letter-spacing:0.2px; color:var(--brand);
    }
    .brand .logo{
      width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
      background: linear-gradient(135deg, var(--brand), #0B6A66);
      color:white; font-weight:800; font-size:18px;
      box-shadow:var(--shadow);
    }

    nav.primary{display:flex; gap:12px; align-items:center}
    nav.primary a{padding:10px 12px; border-radius:8px; color:rgba(11,23,32,0.85); font-weight:600}
    nav.primary a:hover{background:rgba(17,94,89,0.06); color:var(--brand)}

    .cta{
      background:linear-gradient(90deg,var(--brand), #0B6A66);
      color:white; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700;
      display:inline-flex; gap:8px; align-items:center;
      box-shadow: 0 6px 18px rgba(11,23,32,0.12);
    }

    .cta-submit {
  background: linear-gradient(90deg, var(--brand), #0B6A66);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* ⭐ ensures centered text */
  gap: 8px;
  box-shadow: 0 6px 18px rgba(11,23,32,0.12);
}
.cta-submit, .btn-secondary {
    text-align: center !important; /* <-- centers text inside */
    display: inline-block;
}

    /* Hero */
    .hero{
      margin-top:18px; padding:36px 0;
      display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:center;
    }
    .hero .copy h1{font-size:2.05rem; margin:0 0 8px; line-height:1.08}
    .hero .copy p{margin:0 0 16px; color:var(--muted)}
    .hero .actions{display:flex; gap:10px; flex-wrap:wrap}
    .stats{display:flex; gap:10px; margin-top:18px}
    .stat{
      background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
      padding:12px; border-radius:12px; box-shadow:var(--glass-shadow); min-width:120px;
      display:flex; flex-direction:column; gap:6px;
    }
    .stat .num{font-weight:800; color:var(--brand)}
    .card{
      background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
    }

    /* Grid of purpose sections */
    .purpose-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0}
    .purpose{display:flex; gap:12px; align-items:flex-start}
    .purpose .icon{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; color:white; font-weight:700}
    .purpose h3{margin:0; font-size:1rem}
    .purpose p{margin:4px 0 0; color:var(--muted); font-size:0.95rem}

    /* Marketplace / directory */
    .section-title{display:flex; justify-content:space-between; align-items:center; gap:12px}
    .search-row{display:flex; gap:10px; margin-top:12px}
    .search-row input, .search-row select {
      padding:10px 12px; border-radius:10px; border:1px solid rgba(11,23,32,0.08); flex:1;
    }
    .list-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
    .profile{
      display:flex; gap:12px; align-items:center;
      padding:12px; border-radius:12px; background:linear-gradient(180deg,#fff, #fafafa); border:1px solid rgba(11,23,32,0.04);
    }
    .avatar{width:64px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0}
    .p-info h4{margin:0 0 6px; font-size:1rem}
    .p-info p{margin:0; color:var(--muted); font-size:0.92rem}
    .p-actions{margin-left:auto; display:flex; gap:8px}

    /* Events */
    .events{display:grid; grid-template-columns:1fr 340px; gap:18px}
    .event-item{padding:12px; border-radius:12px; border-left:4px solid rgba(17,94,89,0.08); background:#fff}
    .event-date{font-weight:700; color:var(--brand)}

    /* Footer */
    footer{margin-top:36px; padding:30px 0; color:var(--muted)}
    .footer-grid{display:grid; grid-template-columns:1fr 220px 220px; gap:16px; align-items:start}
    .socials a{margin-right:10px; color:var(--brand); font-weight:700}

    .form-heading{margin-right:10px; color:var(--brand); font-weight:700}

    .form-heading h3{margin-right:10px; color:var(--brand); font-weight:700}

    /* Responsive */
    @media(max-width:980px){
      .hero{grid-template-columns: 1fr; text-align:left}
      .purpose-grid{grid-template-columns:repeat(2,1fr)}
      .list-grid{grid-template-columns:repeat(2,1fr)}
      .events{grid-template-columns: 1fr}
    }
    @media(max-width:640px){
      .purpose-grid{grid-template-columns:1fr}
      nav.primary{display:none}
      .mobile-nav-toggle{display:inline-flex}
      .list-grid{grid-template-columns:1fr}
      .stat{min-width:unset}
    }

    /* small utilities */
    .muted{color:var(--muted)}
    .chip{background:#F3F7F5;padding:6px 10px;border-radius:999px;font-weight:600;color:var(--brand);display:inline-flex;gap:8px;align-items:center}
    .pill{padding:6px 8px;border-radius:999px;background:#fff;border:1px solid rgba(11,23,32,0.04);font-weight:600}
    .inline-grid{display:grid; grid-auto-flow:column; gap:8px; align-items:center}
    .hidden{display:none}

    /* tiny form styles */
    form.contact-form{display:grid; gap:10px}
    form.contact-form input, form.contact-form textarea{padding:10px; border-radius:8px; border:1px solid rgba(11,23,32,0.07)}
    form.contact-form textarea{min-height:110px; resize:vertical}
    .btn-secondary{background:white; border:1px solid rgba(11,23,32,0.06); padding:10px 12px; border-radius:8px; cursor:pointer}
    .alert{padding:10px 12px; border-radius:8px; background: #E6FFFA; color: #065F46; border:1px solid rgba(6,95,70,0.08)}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}