:root{
  --bg:#ffffff; --text:#111111; --muted:#555555;
  --brand:#0b57d0; --brand-contrast:#ffffff;
  --edge:#e6e6e6; --edge-strong:#d9dfea; --focus:#1a73e8;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.06);
  --page-max: 1000px; --page-gutter: 20px;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
a{color:var(--brand)} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width: var(--page-max); margin-inline:auto; padding-inline: var(--page-gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:10px;width:auto;height:auto;background:#000;color:#fff;padding:10px 14px;border-radius:8px;z-index:10000}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--edge);z-index:999}
.header-row{display:grid;grid-template-columns:max-content 1fr;align-items:center;column-gap:24px;padding:14px 0}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.brand-logo{height:auto !important; max-height:44px; width:auto; max-width:none; object-fit:contain}

/* (Safe to leave even if you removed the text from HTML) */
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:750;font-size:1rem;letter-spacing:.2px;color:var(--text)}
.brand-tagline{font-size:.8rem;font-weight:600;color:var(--muted)}

.menu-toggle{display:none;border:1px solid var(--edge);background:#fff;border-radius:8px;padding:8px 10px}
.menu-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 6px #fff}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;justify-content:flex-end}
.site-nav a.nav-link{display:block;padding:12px 16px;border-radius:12px;color:#111;text-decoration:none;font-weight:600}
.site-nav a.nav-link.active,.site-nav a.nav-link:hover{background:#f5f7fb;text-decoration:underline}
.btn{display:inline-block;background:var(--brand);color:var(--brand-contrast);padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn:hover{background:#0a4cc0;transform:translateY(-1px)}

/* Hero */
.hero{padding:48px 0 28px;border-bottom:1px solid var(--edge-strong)}
.hero h1{font-size:2rem;line-height:1.2;margin:0 0 8px 0}
.hero p.lead{color:var(--muted);max-width:70ch;font-size:1.125rem;line-height:1.75}
.hero-figure{margin:16px 0 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--edge-strong)}

/* Grid & cards */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid var(--edge-strong);border-radius:16px;padding:16px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.06)}
.stat{font-size:1.5rem;font-weight:800}
section{padding:40px 0}
section + section{border-top:1px solid var(--edge-strong)}
section h2{font-size:1.5rem;line-height:1.2;margin:0 0 8px 0}
.lead{color:var(--muted);max-width:70ch}

/* Forms */
label{font-weight:600}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--edge);border-radius:10px}
input:focus-visible,textarea:focus-visible,select:focus-visible,.nav-link:focus-visible,.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 6px #fff}
.error{color:#b00020;font-size:.9rem;margin-top:6px}
.help{font-size:.9rem;color:var(--muted)}

/* Footer */
.site-footer{border-top:none;background:#12294f;color:#e9eef8}
.site-footer a{color:#cfe2ff;text-decoration:underline}
.footer-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));padding:24px 0}
.footer-heading{margin:0;font-size:1rem;color:#fff}
.address a{display:inline-block;margin-top:4px}
.footer-nav{columns:2;column-gap:24px}
.fineprint{font-size:.9rem;color:#c7d1e4}

/* Tablet & below: hamburger + prevent crowding */
@media (max-width:1100px){
  body.nav-open{overflow:hidden}
  .brand-text{display:none}
  .site-nav{display:none}
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
  .site-nav.open{
    display:block; position:fixed; left:0; right:0; top:60px; background:#fff;
    border-bottom:1px solid var(--edge-strong); box-shadow:0 10px 24px rgba(16,24,40,.10);
    padding:8px 0 16px; max-height:calc(100dvh - 60px); overflow-y:auto;
  }
  .site-nav ul{flex-direction:column;gap:4px;padding:8px var(--page-gutter) 16px}
  .site-nav a.nav-link{padding:14px 18px;border-radius:10px}
  .cta-li .btn{display:block;text-align:center;margin:6px 0 2px;padding:14px 18px;border-radius:14px}
  .header-row{grid-template-columns:1fr;row-gap:10px;justify-items:center}
}

/* ===================== */
/* Small phones polish   */
/* ===================== */
@media (max-width: 600px){
  /* Tighter, consistent gutters */
  :root { --page-gutter: 16px; }

  /* Header breathing room + keep logo crisp and proportional */
  .site-header .container{padding-top:10px;padding-bottom:10px}
  .brand-logo{max-height:40px; max-width:80vw}

  /* Hero spacing so it doesn't feel cramped under header */
  .hero{padding-top:28px;padding-bottom:24px}
  .hero h1{font-size:1.85rem;margin-top:2px}
  .hero p.lead{font-size:1.05rem;line-height:1.65}

  /* Stats: 2-up grid on phones so cards don’t look squeezed */
  .hero .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stat{font-size:1.25rem}

  /* Footer stacks into one column with comfy line spacing */
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-nav{columns:1}
  .footer-nav li{margin:8px 0; line-height:1.4}
  .site-footer .container{padding-bottom:28px}
}


/* Resources grid cards */
.grid .card a {
  display: block;
  text-decoration: none;   /* no default underline in cards */
  color: inherit;
  border-radius: 12px;
  padding: 12px 14px;      /* makes a larger, easier tap target */
  transition: box-shadow .15s ease, transform .15s ease;
}

/* Hover/active affordance (mouse/touch) */
.grid .card a:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Keyboard focus: strong visible ring (meets WCAG 2.2 Focus Visible) */
.grid .card a:focus-visible {
  outline: 3px solid #1A73E8;   /* high-contrast ring */
  outline-offset: 3px;
  box-shadow: none;
}

/* Optional: underline just the title on hover/focus for extra “this is a link” cue */
.grid .card a:hover h3,
.grid .card a:focus-visible h3 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Blog/article bodies: keep underlines by default for inline links */
.resource-article p a,
.resource-article li a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* If you prefer non-underlined inline links, ensure extra cues on hover/focus */
.resource-article p a.no-underline {
  text-decoration: none;
  border-bottom: 2px solid transparent; /* reserve space to avoid layout shift */
}
.resource-article p a.no-underline:hover,
.resource-article p a.no-underline:focus-visible {
  border-bottom-color: currentColor;    /* non-color + color cue */
}

/* Base grid */
.grid {
  display: grid;
  gap: 16px;                 /* space between cards */
}

/* Desktop: 3 columns */
.grid.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet: 2 columns */
@media (max-width: 960px) {
  .grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Card styling (works with the accessibility-focused states we discussed) */
.grid .card a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.grid .card a:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.grid .card a:focus-visible { outline: 3px solid #1A73E8; outline-offset: 3px; box-shadow: none; }
.grid .card h3 { margin: 0 0 6px; }

/* Optional: auto-fit version (no media queries). Replace the template above with this if you prefer) */
/*
.grid.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
*/