:root{
  --navy:#17365D;
  --blue:#234F83;
  --orange:#D46A1F;
  --ink:#1B2430;
  --muted:#5F6B78;
  --light:#F5F7FA;
  --line:#D9E0E8;
  --white:#FFFFFF;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
}
a{color:inherit}
.container{width:min(92%,var(--max));margin:0 auto}
.topbar{
  background:var(--navy);
  color:white;
  font-size:.92rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
  flex-wrap:wrap;
}
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:1rem 0;
}
.brand{
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--navy);
  font-size:1.15rem;
}
.navlinks{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.navlinks a{
  text-decoration:none;
  font-weight:700;
  font-size:.93rem;
}
.btn{
  display:inline-block;
  background:var(--orange);
  color:white;
  text-decoration:none;
  padding:.85rem 1.1rem;
  border-radius:8px;
  font-weight:800;
  border:2px solid var(--orange);
}
.btn.secondary{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
}
.hero{
  padding:5.5rem 0 4.5rem;
  background:
    linear-gradient(120deg, rgba(23,54,93,.98), rgba(35,79,131,.92)),
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.12), transparent 35%);
  color:white;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2.2rem;
  align-items:center;
}
.kicker{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  font-size:.82rem;
  color:#FFD2B0;
}
h1{
  font-size:clamp(2.4rem,6vw,4.8rem);
  line-height:1.02;
  margin:.4rem 0 1rem;
}
.hero p{font-size:1.15rem;max-width:760px;color:#EAF0F7}
.hero-card{
  background:white;
  color:var(--ink);
  padding:1.5rem;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.hero-card h3{margin-top:0;color:var(--navy)}
.checks{list-style:none;padding:0;margin:0}
.checks li{padding:.45rem 0 .45rem 1.5rem;position:relative}
.checks li:before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:900}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.3rem}
section{padding:4rem 0}
.section-head{max-width:760px;margin-bottom:2rem}
.section-head h2{font-size:2rem;margin:0 0 .65rem;color:var(--navy)}
.section-head p{color:var(--muted);margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.35rem;
  background:white;
}
.card h3{margin-top:0;color:var(--navy)}
.card p{color:var(--muted);margin-bottom:0}
.band{background:var(--light)}
.stat{
  border-left:4px solid var(--orange);
  padding-left:1rem;
}
.stat strong{display:block;color:var(--navy);font-size:1.05rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.list-clean{padding-left:1.15rem}
.list-clean li{margin:.55rem 0}
.callout{
  background:var(--navy);
  color:white;
  border-radius:16px;
  padding:2rem;
}
.callout h2{margin-top:0}
.callout p{color:#EAF0F7}
.small{font-size:.88rem;color:var(--muted)}
.page-hero{
  padding:3.5rem 0;
  background:var(--navy);
  color:white;
}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.contact-box{
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.3rem;
}
.contact-box a{color:var(--blue);font-weight:800}
footer{
  background:#0F2138;
  color:#CFD8E3;
  padding:2.5rem 0 1.5rem;
  margin-top:2rem;
}
footer strong{color:white}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.footer-links a{text-decoration:none}
hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:1.5rem 0}
@media (max-width:860px){
  .hero-grid,.two-col,.grid-3,.footer-grid{grid-template-columns:1fr}
  .nav{align-items:flex-start}
  .navlinks{justify-content:flex-end}
}
@media (max-width:620px){
  .topbar .container{display:block}
  .nav{display:block}
  .navlinks{margin-top:.8rem}
  .hero{padding-top:3.5rem}
}