:root{
  --ink:#12261A; --green:#02561D; --green-mid:#2F7D3A; --accent:#62B515;
  --muted:#5A6B60; --line:#DCE6DF; --bg:#fff; --soft:#F6F9F7;
  --wrap:1080px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--green);letter-spacing:-.01em}
.brand img{height:56px;width:auto}
nav a{color:var(--muted);font-size:14.5px;font-weight:500;margin-left:26px}
nav a:hover,nav a[aria-current]{color:var(--green);text-decoration:none}

.hero{position:relative;color:#fff;padding:96px 0 104px;
  background:linear-gradient(rgba(12,28,34,.72),rgba(12,28,34,.78)),
             url("/assets/hero-bg.jpg") center/cover no-repeat #0C1C22}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin:0 0 20px}
.hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.13;margin:0 0 26px;max-width:20ch;
  letter-spacing:-.02em;font-weight:700}
.hero p{font-size:17.5px;line-height:1.7;color:#D6E4DA;max-width:62ch;margin:0 0 18px}
.btn{display:inline-block;margin-top:16px;background:var(--accent);color:#04300F;font-weight:700;
  padding:13px 28px;border-radius:6px;font-size:15px;letter-spacing:.01em}
.btn:hover{background:#72c91d;text-decoration:none}

section{padding:78px 0}
section.soft{background:var(--soft);border-block:1px solid var(--line)}
h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.015em;margin:0 0 10px;color:var(--green)}
.lede{color:var(--muted);margin:0 0 42px;font-size:16.5px;max-width:58ch}
.rule{width:58px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 26px}

.grid{display:grid;gap:30px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.person{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  transition:box-shadow .18s,transform .18s}
.person:hover{box-shadow:0 10px 30px rgba(2,86,29,.09);transform:translateY(-2px)}
.person img{width:190px;height:190px;object-fit:cover;object-position:center top;border-radius:10px;margin:22px 22px 2px;background:var(--soft);display:block}
.g2 .person{display:flex;align-items:flex-start}
.g2 .person img{width:190px;height:190px;margin:22px 0 22px 22px;flex:0 0 auto}
.g2 .person .body{padding:22px 22px 22px 20px}
.person .body{padding:10px 22px 24px}
.person h3{margin:0 0 3px;font-size:18px;color:var(--green);letter-spacing:-.01em}
.person .role{margin:0 0 11px;font-size:13.5px;font-weight:600;color:var(--accent)}
.person p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stat{background:#fff;padding:32px 24px;text-align:center}
.stat .num{font-size:34px;font-weight:700;color:var(--green);line-height:1.1;letter-spacing:-.02em}
.stat .lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:9px;font-weight:600}

form{max-width:620px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 7px}
input,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(47,125,58,.13)}
textarea{min-height:150px;resize:vertical}
.field{margin-bottom:18px}
button{background:var(--green);color:#fff;border:0;padding:13px 32px;border-radius:7px;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer}
button:hover{background:#036824}
.hp{position:absolute;left:-9999px}
.note{padding:14px 16px;border-radius:8px;margin:0 0 24px;font-size:14.5px}
.ok{background:#EAF6EC;border:1px solid #BFE0C6;color:#14622D}
.err{background:#FDEDED;border:1px solid #F5C6C6;color:#8B1F1F}

footer.site{background:#04300F;color:#B9CFC0;padding:56px 0 34px;font-size:14.5px}
footer.site .tag{color:#fff;max-width:58ch;margin:0 0 30px;font-size:16px;line-height:1.6}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
footer.site a{color:#B9CFC0;margin-right:22px}
footer.site a:hover{color:#fff}
.fbrand{font-weight:700;color:#fff}

@media(max-width:880px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .hero{padding:68px 0 76px}
  section{padding:58px 0}
}
@media(max-width:600px){
  .g2,.g3,.row{grid-template-columns:1fr}
  .g2 .person{display:block}
  .g2 .person img{margin:22px 22px 2px}
  .g2 .person .body{padding:10px 22px 24px}
  .stats{grid-template-columns:1fr}
  header.site .wrap{height:72px}
  nav a{margin-left:16px;font-size:14px}
  .brand span{display:none}
}


/* dark image band for the closing call to action */
.band{position:relative;color:#fff;border-block:0;
  background:linear-gradient(rgba(6,18,12,.82),rgba(6,18,12,.88)),
             url("/assets/band-bg.jpg") center/cover no-repeat #06120C}
.band h2{color:#fff}
.band .lede{color:#C6D8CC}
.band .btn{background:var(--accent);color:#04300F}


/* ---- legibility: green text on light backgrounds ----
   #62B515 measures 2.58:1 on white and 2.43:1 on --soft, under the 4.5:1
   minimum for body text. It keeps its text role on the dark hero (6.76:1)
   and stays as a graphic fill on the rule and the button.                */
section .eyebrow{color:var(--green-mid)}
.person .role{color:var(--green-mid)}

/* ---- problem section ---- */
.problem .prose{max-width:none;margin:0}
.problem .prose p{margin:0 0 15px;font-size:16.5px;line-height:1.72;color:var(--muted)}
.problem .prose p.close{color:var(--ink);font-weight:600;margin-top:22px}


.pcols{display:grid;grid-template-columns:1.55fr 1fr;gap:42px;align-items:start;margin-bottom:46px}
figure.micro{margin:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;line-height:0}
figure.micro img{display:block;width:100%;height:auto}

figure.chart{margin:0;background:#fff;border:1px solid var(--line);border-radius:11px;padding:24px 26px 20px}
figure.chart .ctitle{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 18px;letter-spacing:-.01em}
figure.chart svg{display:block;width:100%;height:auto}
.clbl{font-size:15px;fill:var(--muted)}
.cval{font-size:21px;font-weight:700;fill:var(--green)}
.cpct{font-size:15px;font-weight:600;fill:var(--muted)}
.cbar{fill:var(--green)}
.ctrack{fill:#E4EDE7}

.srcnote{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:#8B9A90;max-width:78ch}

@media(max-width:820px){
  .pcols{grid-template-columns:1fr;gap:28px}
  figure.chart{padding:20px 16px 16px}
  .clbl{font-size:30px}.cval{font-size:42px}.cpct{font-size:30px}
}