:root{
  --green:#1f6b45;
  --green-dark:#154a31;
  --green-light:#eaf5ee;
  --cream:#f8f5ed;
  --ink:#18231d;
  --muted:#657068;
  --white:#ffffff;
  --line:#dce5df;
  --shadow:0 18px 50px rgba(22,58,39,.12);
  --radius:22px;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}
a{color:inherit}
svg{display:block}
.container{width:min(calc(100% - 40px), var(--max)); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(220,229,223,.75);
  backdrop-filter:blur(12px);
}
.nav-wrap{min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:15px; background:var(--green-light);
}
.brand-mark svg{width:31px; height:31px; fill:var(--green)}
.brand-mark .vein{fill:none; stroke:var(--green-dark); stroke-width:3; stroke-linecap:round}
.association-logo{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%; overflow:hidden;
  position:relative; background:#f6f0dd;
  box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 4px 12px rgba(0,0,0,.16);
}
.association-logo img{position:absolute; width:192px; max-width:none; left:-64px; top:-3px}
.brand strong{display:block; font-size:1rem; line-height:1.1}
.brand small{display:block; color:var(--muted); margin-top:5px}
.main-nav{display:flex; align-items:center; gap:26px}
.main-nav a{text-decoration:none; font-weight:700; font-size:.94rem}
.main-nav a:not(.btn):hover{color:var(--green)}
.menu-toggle{display:none; border:1px solid var(--line); background:white; border-radius:12px; padding:10px 14px; font-weight:800}
.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(61,148,94,.17), transparent 30%),
    linear-gradient(135deg, #f8fbf9 0%, #edf7f0 55%, #f8f5ed 100%);
  padding:86px 0 78px;
}
.hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:66px; align-items:center}
.eyebrow{
  margin:0 0 12px;
  text-transform:uppercase; letter-spacing:.14em; font-weight:900;
  color:var(--green); font-size:.78rem;
}
h1,h2,h3{line-height:1.12; margin-top:0}
h1{font-size:clamp(2.7rem, 6vw, 5.6rem); letter-spacing:-.055em; max-width:850px; margin-bottom:24px}
h2{font-size:clamp(2rem, 4vw, 3.2rem); letter-spacing:-.035em; margin-bottom:28px}
h3{font-size:1.25rem; margin-bottom:12px}
.lead{font-size:1.16rem; color:#425047; max-width:760px}
.lead.compact{max-width:620px; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 20px; border-radius:14px;
  color:white; background:var(--green); text-decoration:none; font-weight:850;
  box-shadow:0 10px 25px rgba(31,107,69,.16);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px); background:var(--green-dark)}
.btn-secondary{
  color:var(--green-dark); background:white; border:1px solid var(--line); box-shadow:none;
}
.btn-secondary:hover{background:var(--green-light)}
.btn-small{min-height:42px; padding:0 16px}
.hero-pills{display:flex; flex-wrap:wrap; gap:10px}
.hero-pills span{
  border:1px solid #cfe0d5; background:rgba(255,255,255,.74);
  color:var(--green-dark); font-weight:800; border-radius:999px;
  padding:8px 12px; font-size:.88rem;
}
.hero-card{
  padding:34px; border:1px solid rgba(255,255,255,.85); border-radius:28px;
  background:rgba(255,255,255,.82); box-shadow:var(--shadow);
}
.hero-card h2{font-size:1.8rem; margin-bottom:14px}
.hero-card p{color:var(--muted)}
.hero-card ul{padding-left:20px; margin-bottom:0}
.hero-card li+li{margin-top:8px}
.nature-icon{font-size:2.5rem; margin-bottom:18px}
.hero-poster{
  max-width:440px; justify-self:end; border-radius:24px; overflow:hidden;
  box-shadow:0 24px 60px rgba(20,72,43,.22); transform:rotate(1deg);
}
.hero-poster img{display:block; width:100%}
.section{padding:88px 0}
.section-soft{background:var(--cream)}
.cards{display:grid; gap:22px}
.cards.three{grid-template-columns:repeat(3, 1fr)}
.card{
  padding:28px; border:1px solid var(--line); border-radius:var(--radius);
  background:white;
}
.card p{margin-bottom:0; color:var(--muted)}
.card-icon{font-size:2rem; margin-bottom:22px}
.action-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.action-item{
  display:flex; gap:22px; padding:28px; background:white; border:1px solid #e1e6df;
  border-radius:var(--radius);
}
.action-item p{margin:0; color:var(--muted)}
.action-number{font-size:.76rem; font-weight:950; color:var(--green); letter-spacing:.12em}
.highlight{background:var(--green-dark); color:white}
.highlight .eyebrow{color:#a8e5bb}
.highlight .lead{color:#dbe9df}
.highlight-grid{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px}
.gallery-intro{margin-bottom:2rem}
.gallery-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; align-items:start}
.gallery-card{
  margin:0; background:white; border-radius:18px; overflow:hidden;
  box-shadow:0 12px 32px rgba(25,72,45,.11);
}
.gallery-card img{display:block; width:100%; height:auto}
.gallery-card figcaption{padding:1rem 1.1rem; color:#285b3b; font-weight:700}
.gallery-wide{grid-column:1/-1}
.gallery-wide img{max-height:620px; object-fit:contain; background:#f7f4e9}
.contact-section{padding-top:20px}
.contact-box{
  display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center;
  padding:48px; border-radius:28px; background:var(--green-light);
}
.contact-placeholder{
  padding:26px; border-radius:18px; background:white; border:1px solid #d9e6dd;
}
.contact-placeholder p{color:var(--muted)}
.contact-details{
  padding:26px; border-radius:18px; background:white; border:1px solid #d9e6dd;
}
.contact-details p{color:var(--muted)}
.contact-details a{color:inherit; font-weight:800}
.site-footer{border-top:1px solid var(--line); padding:34px 0 44px}
.footer-wrap{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start}
.footer-wrap p{margin:4px 0 0; color:var(--muted)}
.footer-links{display:flex; flex-wrap:wrap; gap:18px}
.footer-links a{text-decoration:none; color:var(--muted); font-weight:700}
.copyright{grid-column:1/-1; font-size:.9rem}

@media (max-width: 850px){
  .menu-toggle{display:block}
  .main-nav{
    display:none; position:absolute; top:70px; left:20px; right:20px;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:14px; border:1px solid var(--line); border-radius:16px;
    background:white; box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:10px 12px}
  .hero{padding:58px 0}
  .hero-grid,.highlight-grid,.contact-box{grid-template-columns:1fr}
  .hero-grid{gap:32px}
  .cards.three{grid-template-columns:1fr}
  .action-grid{grid-template-columns:1fr}
  .contact-box{padding:28px}
  .footer-wrap{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-wide{grid-column:auto}
  .hero-poster{max-width:360px; justify-self:center}
}
@media (max-width: 520px){
  .container{width:min(calc(100% - 28px), var(--max))}
  .brand small{display:none}
  .brand strong{font-size:.9rem}
  h1{font-size:2.65rem}
  .section{padding:68px 0}
  .hero-card,.card,.action-item{padding:22px}
  .association-logo{width:52px; height:52px; flex-basis:52px}
  .association-logo img{width:156px; left:-52px; top:-2px}
}