:root{
  --green:#2E5631;
  --brown:#5B3A29;
  --orange:#E27D2D;
  --cream:#FAF3E0;
  --text:#2c2c2c;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); background:var(--cream)}
.container{width:min(1100px,92%);margin-inline:auto}

.site-header{background:var(--green); color:var(--white); position:sticky; top:0; z-index:10; box-shadow:0 6px 20px rgba(0,0,0,.15)}
.nav-wrap{display:flex; align-items:center; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand-mark{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--orange),var(--green))}
.brand-text h1{font-family:'Playfair Display',serif; font-size:1.4rem; margin:0}
.brand-text .tag{opacity:.9; margin:.25rem 0 0; font-size:.9rem}
.nav{margin-left:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{color:var(--white); text-decoration:none; font-weight:600}
.nav a:hover{opacity:.85}
.nav-toggle{display:none; margin-left:auto; font-size:1.4rem; background:none; border:none; color:var(--white)}

.hero{background:linear-gradient(180deg, rgba(250,243,224,1) 0%, rgba(250,243,224,.7) 100%); padding:64px 0 48px}
.hero-inner{display:grid; place-items:center}
.hero-card{background:var(--white); border-radius:18px; padding:28px 22px; box-shadow:0 10px 30px rgba(0,0,0,.10); text-align:center; max-width:860px}
.logo{width:min(520px,92%); height:auto; border-radius:14px}
.hero-card h2{font-family:'Playfair Display',serif; font-size:2rem; margin:14px 0 .5rem}
.hero-card p{font-size:1.06rem; line-height:1.6}
.hero-cta{display:flex; gap:12px; justify-content:center; margin-top:14px; flex-wrap:wrap}

.impact-chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.chip{background:rgba(46,86,49,.08); border:1px solid rgba(46,86,49,.18); color:var(--green); padding:8px 12px; border-radius:999px; font-weight:700; font-size:.9rem}

.section{padding:64px 0}
.section-cream{background:var(--cream)}
.section-green{background:rgba(46,86,49,.08)}
.section-orange{background:rgba(226,125,45,.10)}
.section-brown{background:var(--brown); color:var(--cream)}
.section-title{font-family:'Playfair Display',serif; font-size:1.8rem; margin:0 0 12px}
.section-title.light{color:var(--cream)}
.lead{font-size:1.1rem; max-width:900px}
.smallmuted{font-size:.95rem; opacity:.8; margin-top:10px}

.outcomes{margin-top:16px; background:#fff; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06)}
.outcomes h4{margin:0 0 8px}
.outcomes ul{margin:0; padding-left:18px}
.outcomes li{margin:8px 0; line-height:1.45}

.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:14px}
.card{background:var(--white); border-radius:14px; padding:16px 16px 18px; box-shadow:0 6px 18px rgba(0,0,0,.08)}
.section-green .card{background:#f6fbf6}
.section-orange .card{background:#fff7f0}
.card h4{margin:.25rem 0 .4rem}
.card p{margin:0; line-height:1.5}

.quotes{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); margin-top:10px}
.quote{margin:0; background:#fff; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06)}
.quote blockquote{margin:0; font-size:1.02rem; line-height:1.55}
.quote figcaption{margin-top:10px; font-weight:700; color:var(--green)}

.donate-card{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#fff; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); margin-top:10px}
.donate-card h4{margin:0 0 4px}

.cta-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:10px}

.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; text-align:center}
.btn-primary{background:var(--orange); color:var(--white)}
.btn-outline{border:2px solid var(--orange); color:var(--orange); background:transparent}
.btn.small{padding:8px 12px; border-radius:8px}
.btn.wide{width:100%}

.contact-grid{display:grid; gap:18px; grid-template-columns:1.2fr .8fr; align-items:start}
.contact-form{background:#fff; padding:16px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.12)}
.contact-form label{display:block; font-weight:600; margin:10px 0 6px}
.contact-form input, .contact-form textarea{width:100%; padding:12px; border-radius:10px; border:1px solid #ddd; font:inherit; background:#fafafa}
.contact-form button{margin-top:10px}
.contact-details ul{list-style:none; padding:0; margin:0 0 10px}
.contact-details li{margin:6px 0}
.contact-details a{color:#ffe9c7}
.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.social{display:inline-block; padding:8px 12px; border-radius:999px; background:#6d4e3f; color:#fff; text-decoration:none; font-weight:600; font-size:.9rem}
.note{opacity:.85; margin-top:10px; font-size:.9rem}

.site-footer{background:var(--green); color:var(--white); padding:18px 0}
.footer-inner{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.logo-mini{width:54px; height:auto; border-radius:10px; background:#fff}

@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block}
  .contact-grid{grid-template-columns:1fr}
}