:root{
  --bg: #ffffff;
  --fg: #1f2a37;
  --muted: #6b7280;
  --brand: #0ea5e9;
  --brand-dark:#0284c7;
  --accent:#f59e0b;
  --surface:#f8fafc;
  --radius:14px;
  --shadow: 0 6px 24px rgba(2,8,23,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 92%); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; background:#111; color:#fff; padding:.5rem .75rem; z-index:1000; border-radius:8px}

.site-header{position:sticky; top:0; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06); z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.5rem}

.nav__toggle{background:#fff; border:1px solid #e5e7eb; padding:.5rem .75rem; border-radius:10px; cursor:pointer}
.nav__list{list-style:none; margin:0; padding:0; display:none; gap:1rem; align-items:center}
.nav__list--open{display:flex; flex-direction:column; position:absolute; right:4%; top:64px; background:#fff; padding:1rem; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--shadow)}
.nav__list a{display:block; padding:.25rem .5rem; border-radius:8px}
.nav__list a:focus{outline:2px solid var(--brand); outline-offset:2px}

@media (min-width: 900px){.nav__toggle{display:none} .nav__list{display:flex}}

.section{padding: clamp(2.5rem, 4vw + 1rem, 5rem) 0}
.section-title{font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:0 0 1rem}

.hero{background: linear-gradient(180deg, var(--surface), #fff 60%)}
.hero__grid{display:grid; gap:2rem; align-items:center; grid-template-columns: 1fr}
.hero__text .eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700}
.hero__text h1{font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height:1.1; margin:.25rem 0 1rem}
.lead{color:var(--muted); font-size: clamp(1rem, .9rem + .5vw, 1.125rem)}
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
.hero__media{order:-1}
@media (min-width: 900px){.hero__grid{grid-template-columns: 1.2fr .8fr} .hero__media{order:0}}

.btn{--_bg:#fff; --_fg:var(--brand-dark); --_bd:1px solid #93c5fd; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; border:var(--_bd); background:var(--_bg); color:var(--_fg); font-weight:600; text-decoration:none; transition:transform .05s ease, background .2s ease}
.btn:active{transform:translateY(1px)}
.btn:hover{text-decoration:none}
.btn--primary{--_bg:var(--brand); --_fg:#fff; --_bd:1px solid var(--brand-dark)}
.btn--ghost{--_bg:#fff; --_fg:var(--brand-dark); --_bd:1px solid #dbeafe}

.cards{display:grid; gap:1.25rem; grid-template-columns: 1fr}
.card{border:1px solid #e5e7eb; border-radius: var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.card__body{padding:1rem}
.card h3{margin:.25rem 0 .5rem}
.print-note{margin-top:1rem; color:var(--muted)}
@media (min-width: 720px){.cards{grid-template-columns: repeat(2, 1fr)}}

.about__grid{display:grid; gap:1.5rem; grid-template-columns: 1fr; align-items:center}
.about__grid--reverse .about__media{order:1}
.about__text h2{margin:.25rem 0 1rem}
.mission{padding:.75rem 1rem; border-left:4px solid var(--accent); background:#fff8eb; border-radius:8px}
.checklist{margin:.75rem 0 0; padding-left:1.2rem}
.checklist li{margin:.25rem 0}
.about__media img{border-radius:12px; box-shadow:var(--shadow)}
.about.alt{background:var(--surface)}
@media (min-width: 900px){.about__grid{grid-template-columns: .9fr 1.1fr} .about__grid--reverse .about__media{order:0}}

.site-footer{border-top:1px solid #e5e7eb; background:#fff; margin-top:2rem}
.footer-inner{width:min(1120px,92%); margin-inline:auto; display:flex; gap:1rem; padding:1rem 0; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-nav{list-style:none; display:flex; gap:1rem; padding:0; margin:0}
.footer-nav a{color:var(--muted)}
.footer-nav a:hover{color:var(--fg)}