@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --page:#f4f5f7;
  --card:#ffffff;
  --ink:#1c2733;
  --muted:#5a6573;
  --line:#e6e8ec;
  --blue:#2f6fed;
  --amber:#f2a31e;
  --green:#1f9d6b;
  --radius:20px;
  --gap:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,Arial,sans-serif;
  background:var(--page);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.shell{max-width:1180px;margin:0 auto;padding:0 22px;}

/* Header */
.site-header{padding:20px 0 6px;}
.site-header .bar{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow:0 1px 3px rgba(28,39,51,.05);
  flex-wrap:wrap;
}
.brand img{height:50px;width:auto;}
.nav{display:flex;gap:6px;flex-wrap:wrap;}
.nav a{
  color:var(--muted);
  font-weight:600;
  font-size:.92rem;
  padding:8px 14px;
  border-radius:12px;
}
.nav a:hover{background:var(--page);text-decoration:none;color:var(--ink);}
.nav a[aria-current="page"]{background:var(--ink);color:#fff;}

/* Bento grid */
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
  margin:var(--gap) 0 30px;
}
.tile{
  background:var(--card);
  border-radius:var(--radius);
  padding:26px 28px;
  box-shadow:0 1px 3px rgba(28,39,51,.05);
  overflow:hidden;
}
.tile h2{margin-top:0;font-size:1.3rem;letter-spacing:-.01em;}
.tile h3{margin-top:0;font-size:1.05rem;}
.tile p:last-child{margin-bottom:0;}

/* spans */
.col-2{grid-column:span 2;}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.row-2{grid-row:span 2;}

/* Feature hero tile */
.feature{
  grid-column:span 4;
  position:relative;
  padding:0;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  color:#fff;
}
.feature img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.feature .overlay{
  position:relative;
  width:100%;
  padding:38px;
  background:linear-gradient(to top,rgba(15,22,30,.88),rgba(15,22,30,.35) 60%,rgba(15,22,30,.08));
}
.feature .kicker{color:#cfe0ff;}
.feature h1{
  margin:.2em 0 .35em;
  font-size:2.3rem;
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:18ch;
}
.feature .lede{font-size:1.08rem;max-width:60ch;color:#eef2f6;margin-bottom:0;}

.kicker{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  margin:0 0 4px;
  color:var(--muted);
}

/* accent tiles */
.tile.blue{background:var(--blue);color:#fff;}
.tile.blue .kicker,.tile.blue h2,.tile.blue h3{color:#fff;}
.tile.blue a{color:#fff;text-decoration:underline;}
.tile.amber{background:var(--amber);color:#3a2a05;}
.tile.amber .kicker{color:#6b4e08;}
.tile.green{background:var(--green);color:#fff;}
.tile.green .kicker,.tile.green h2,.tile.green h3{color:#fff;}
.tile.green a{color:#fff;text-decoration:underline;}

/* number stat */
.stat .num{font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.03em;}
.stat p{margin:.5em 0 0;font-size:.95rem;}

/* image tile */
.imgtile{padding:0;}
.imgtile img{width:100%;height:100%;object-fit:cover;min-height:180px;}

/* list tile */
.checklist{list-style:none;margin:.6em 0 0;padding:0;}
.checklist li{
  padding-left:26px;position:relative;margin-bottom:10px;font-size:.96rem;
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;border-radius:4px;
  background:var(--green);
}
.tile.blue .checklist li::before{background:#fff;}

/* video tile */
.videotile{padding:22px;}
.frame{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.videotile .cap{font-size:.85rem;color:var(--muted);margin:.8em 0 0;}

.prose p{margin:0 0 1em;}
.prose .lead{font-size:1.08rem;}

/* section heading tile */
.tile.head h2{font-size:1.6rem;letter-spacing:-.02em;}
.tile.head p{color:var(--muted);margin-bottom:0;}

/* support hero */
.subhero{
  grid-column:span 4;
  background:var(--ink);
  color:#fff;
  padding:40px;
}
.subhero .kicker{color:var(--amber);}
.subhero h1{margin:.2em 0 .3em;font-size:2rem;letter-spacing:-.02em;max-width:24ch;}
.subhero p{color:#cdd5dd;max-width:60ch;margin-bottom:0;}

.backlink{margin-top:14px;font-weight:600;}

/* Footer */
.site-footer{padding:6px 0 34px;}
.footer-grid{
  background:var(--ink);
  color:#cdd5dd;
  border-radius:var(--radius);
  padding:32px 34px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:space-between;
  align-items:flex-start;
}
.footer-grid h4{color:#fff;margin:0 0 10px;font-size:1.05rem;}
.footer-grid address{font-style:normal;line-height:1.8;font-size:.92rem;}
.footer-grid a{color:#9ec0ff;}
.social a{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:600;}
.social svg{width:30px;height:30px;fill:#ff0000;}
.legal{width:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:.82rem;color:#8b97a4;}

@media(max-width:860px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .col-3,.col-4,.feature,.subhero{grid-column:span 2;}
  .feature h1{font-size:1.9rem;}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;}
  .col-2,.col-3,.col-4,.feature,.subhero{grid-column:span 1;}
  .row-2{grid-row:auto;}
  .feature h1{font-size:1.7rem;}
  .nav{width:100%;}
}