/* ===== HMS: Global Tokens ===== */
:root{
  --blue:#0073cf;           /* HMS blue */
  --green:#10771A;          /* HMS green */
  --ink:#102027;
  --ink-2:#33464f;
  --bg:#ffffff;
  --bg-2:#f5f7f9;
  --link:#0b57d0;
  --focus:#ffbf47;          /* high-visibility focus */
  --radius:12px;
  --shadow:0 6px 18px rgba(16,32,39,.10);
  --max:1140px;
}

/* ===== Resets & base ===== */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration-thickness:1.5px}
a:hover{opacity:.9}
.container{max-width:var(--max); margin-inline:auto; padding:clamp(16px,3vw,24px)}
.grid{display:grid; gap:24px}
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap
}

/* ===== Header / Nav ===== */
header{position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:40px; width:auto}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.nav-links{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav-links a{padding:10px 12px; color:var(--ink-2)}
.donate-pill{background:var(--green); color:#fff; padding:10px 14px; border-radius:999px; font-weight:700}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     padding:12px 16px; border-radius:8px; border:1px solid transparent; font-weight:600}
.btn-primary{background:var(--blue); color:#fff}
.btn-secondary{background:var(--green); color:#fff}
.btn-outline{border-color:var(--ink-2); color:var(--ink-2); background:transparent}

/* Mobile nav */
.menu-toggle{display:none}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .nav-links{display:none}
  .nav-links.open{display:flex; flex-direction:column; align-items:flex-start; padding:16px}
}

/* ===== Hero ===== */
.hero{
  color:#fff;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-image:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.hero-inner{min-height:56svh; display:grid; align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 12px}
.hero p{max-width:60ch; font-size:clamp(16px,2.2vw,20px)}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

/* ===== Sections & cards ===== */
section{padding-block:clamp(32px,6vw,64px)}
.section-title{font-size:clamp(22px,3vw,28px); margin:0 0 8px}
.muted{color:var(--ink-2)}
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column
}
.card-body{padding:18px 18px 22px}

/* Stats */
.stat-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:760px){ .stat-grid{grid-template-columns:1fr} }
.stat{background:var(--bg-2); border-radius:12px; padding:18px}
.stat .num{font-weight:800; font-size:clamp(22px,5vw,40px); color:var(--blue)}

/* Programs grid */
.programs-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){ .programs-grid{grid-template-columns:1fr} }
.program-tag{display:inline-block; font-size:12px; letter-spacing:.2px; color:#fff;
             background:var(--blue); border-radius:16px; padding:4px 10px}

/* News grid */
.news-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:980px){ .news-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){ .news-grid{grid-template-columns:1fr}}

/* Two-column panels (programs page) */
.kicker{font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:var(--ink-2)}
.list{display:grid; gap:8px; padding-left:18px}
.two-col{display:grid; grid-template-columns:2fr 1fr; gap:24px}
@media (max-width:960px){ .two-col{grid-template-columns:1fr} }
.panel{background:var(--bg-2); border-radius:12px; padding:16px}

/* Footer */
footer{background:var(--bg-2); border-top:1px solid #e6e9ec}
.footer-grid{grid-template-columns:2fr 1fr 1fr}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr} }
.newsletter{display:flex; gap:8px; flex-wrap:wrap}
.newsletter input{
  flex:1 1 220px; min-height:44px; padding:10px 12px; border:1px solid #c9d1d9; border-radius:8px
}

/* Focus & motion */
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}