/* ============================================================
   Healthy Futures Initiative — Design System
   Palette:  forest #1E4D3A  |  forest-deep #12302A  |  gold #D9A441
             teal #2E6F71    |  paper #F3F4EC          |  ink #202A22
   Type: Fraunces (display) / Work Sans (body) / IBM Plex Mono (utility)
   ============================================================ */

:root{
  --forest:#1E4D3A;
  --forest-deep:#12302A;
  --gold:#D9A441;
  --gold-deep:#B9832F;
  --teal:#2E6F71;
  --paper:#F3F4EC;
  --paper-warm:#ECE9DC;
  --card:#E7E9DC;
  --ink:#202A22;
  --ink-soft:#4B564C;
  --line:rgba(32,42,34,0.14);
  --white:#FFFDF8;

  --display:'Fraunces', Georgia, serif;
  --body:'Work Sans', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --maxw:1180px;
  --radius:4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.5em;
  color:var(--forest-deep);
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

/* ---------- Header / Nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(243,244,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:600; font-size:19px;
  color:var(--forest-deep); text-decoration:none;
}
.brand svg{width:32px;height:32px;flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text small{
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  color:var(--teal); font-weight:500; text-transform:uppercase;
}
nav.links{display:flex; align-items:center; gap:30px;}
nav.links a{
  font-size:14.5px; text-decoration:none; color:var(--ink);
  position:relative; padding:4px 0; font-weight:500;
}
nav.links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s ease;
}
nav.links a:hover::after, nav.links a.active::after{transform:scaleX(1);}
nav.links a.active{color:var(--forest-deep); font-weight:600;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:var(--radius);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-primary{background:var(--forest); color:var(--white);}
.btn-primary:hover{background:var(--forest-deep); transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--forest-deep);}
.btn-gold:hover{background:var(--gold-deep); transform:translateY(-1px);}
.btn-outline{border-color:var(--forest); color:var(--forest-deep); background:transparent;}
.btn-outline:hover{background:var(--forest); color:var(--white);}
.btn-sm{padding:9px 16px; font-size:13px;}
.navcta{display:none;}
@media(min-width:880px){.navcta{display:inline-flex;}}

.burger{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.burger svg{width:24px;height:24px;}
@media(max-width:879px){
  nav.links{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:28px 32px;
    gap:6px; transform:translateX(100%); transition:transform 0.3s ease;
    overflow-y:auto;
  }
  nav.links.open{transform:translateX(0);}
  nav.links a{font-size:20px; padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
  .burger{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  padding:76px 0 84px;
  position:relative; overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(36px,5.2vw,60px); margin-bottom:22px;}
.hero .lede{font-size:19px; max-width:52ch; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{width:100%; height:auto;}

/* ---------- Section rhythm ---------- */
section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.divider{
  border:none; height:28px; margin:0; background:var(--paper);
}
.pulse-rule{width:100%; height:34px; display:block; margin:0 auto;}

/* ---------- Cards / Grids ---------- */
.grid{display:grid; gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(18,48,42,0.09);}
.card .icon{width:40px; height:40px; margin-bottom:18px; color:var(--forest);}
.card h3{font-size:19px; margin-bottom:10px;}
.card p{margin-bottom:0; font-size:15px;}

.card-dark{
  background:var(--forest-deep); color:var(--white); border-radius:var(--radius);
  padding:34px;
}
.card-dark h3{color:var(--white);}
.card-dark p{color:rgba(255,253,248,0.78);}

/* Pillar band */
.pillar{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; margin-bottom:22px;
}
.pillar-head{display:flex; align-items:baseline; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.pillar-num{
  font-family:var(--mono); font-size:14px; color:var(--gold-deep);
  border:1px solid var(--gold); border-radius:100px; padding:4px 12px;
}
.pillar-head h3{margin:0; font-size:24px;}
.focus-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.focus-item{
  border-left:2px solid var(--gold); padding:4px 0 4px 16px;
}
.focus-item h4{font-family:var(--body); font-weight:600; font-size:15px; margin:0 0 4px; color:var(--forest-deep);}
.focus-item p{font-size:13.5px; margin:0; color:var(--ink-soft);}

/* Values / stats */
.stat-band{
  background:var(--forest-deep); color:var(--white); border-radius:var(--radius);
  padding:44px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  text-align:center;
}
@media(max-width:760px){.stat-band{grid-template-columns:repeat(2,1fr);}}
.stat-band .num{font-family:var(--display); font-size:40px; color:var(--gold); margin-bottom:4px; display:block;}
.stat-band .label{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,253,248,0.75);}

.value-row{
  display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line);
}
.value-row:first-of-type{border-top:1px solid var(--line);}
.value-num{font-family:var(--mono); color:var(--gold-deep); font-size:14px; padding-top:3px; min-width:26px;}
.value-row h4{margin:0 0 4px; font-family:var(--body); font-size:17px; font-weight:700; color:var(--forest-deep);}
.value-row p{margin:0; font-size:15px;}

/* CTA band */
.cta-band{
  background:var(--forest); color:var(--white); border-radius:var(--radius);
  padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{color:var(--white); margin-bottom:8px;}
.cta-band p{color:rgba(255,253,248,0.82); margin-bottom:0; max-width:46ch;}

/* Footer */
footer.site{background:var(--forest-deep); color:rgba(255,253,248,0.85); padding:64px 0 28px;}
footer.site h4{color:var(--white); font-family:var(--mono); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px;}
footer.site a{color:rgba(255,253,248,0.78); text-decoration:none; font-size:14.5px;}
footer.site a:hover{color:var(--gold);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,253,248,0.14);}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:rgba(255,253,248,0.55); flex-wrap:wrap; gap:12px;}
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.foot-brand svg{width:30px;height:30px;}
.foot-brand span{font-family:var(--display); font-size:19px; color:var(--white); font-weight:600;}

/* Utility */
.tag{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  background:var(--card); color:var(--forest-deep); padding:5px 10px; border-radius:100px;
  display:inline-block;
}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr;}}
.center-text{text-align:center;}
.mb-0{margin-bottom:0;}

/* form */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--forest-deep); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em; font-size:11.5px;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); font-family:var(--body); font-size:15px; color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:2px solid var(--teal); outline-offset:1px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* Empty state */
.empty-state{
  text-align:center; padding:70px 30px; border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--white);
}
.empty-state svg{width:56px; height:56px; margin:0 auto 20px; color:var(--gold-deep);}

/* Breadcrumb hero (inner pages) */
.page-hero{padding:56px 0 60px; border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:16px;}
.page-hero h1{font-size:clamp(30px,4.4vw,46px); margin-bottom:14px;}
.page-hero p{font-size:17.5px; max-width:60ch;}