/* Capabilities Page Styles */
:root{
  --slate:#0f172a; --brand:#0E6BA8; --muted:#64748b; --bg:#f7fbff; --card:#ffffff; --radius:14px; --container:1120px;
  --shadow:0 12px 26px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--slate);line-height:1.65}
.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.hero {
  position: relative;
  padding: 0;
  min-height: 400px; /* increase height as needed */
  background: url('../images/capabilities-hero.jpg') center/cover no-repeat;
}

.hero .container {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  padding: 120px 20px; /* space for text inside hero */
}

.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); /* dark overlay for readability */
  z-index: 1;
}

.hero h1{margin:0;color:#0B3C5D;font-size:clamp(2rem,3vw,2.6rem)}
.section{padding:48px 0}
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(2,6,23,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 6px;color:#0B3C5D}
.card .muted{color:var(--muted)}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.kpi{display:inline-block;margin-top:6px;padding:.35rem .6rem;border-radius:999px;background:#e8f3fb;color:#0B3C5D;font-weight:700}