:root {
  --bg:#f4f4f4;
  --card:#ffffff;
  --ink:#111;
  --accent:#007bff;
  --muted:#666;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
  --maxw:1100px;
}
* { box-sizing:border-box }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Arial, sans-serif;
  padding:20px;
}
.title {
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin:20px 0;
  color: #007bff
}
.subtitle { text-align:center; color:var(--muted); margin-top:-8px; font-size:14px; }
.container {
  display:grid; gap:20px; max-width:var(--maxw); margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.row {
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto;
}
.mt-20{
    margin-top:20px;
}
.card {
  background:var(--card); padding:20px; border-radius:var(--radius);
  box-shadow:var(--shadow); cursor:pointer; text-align:center;
  transition:transform .2s ease;
}
.card:hover { transform:translateY(-2px) }
.card h3 { margin:10px 0 6px;color: #007bff }
.card img { width:52px; height:52px }
.details { display:none; margin-top:12px; text-align:left; font-size:14px; color:#333 }
.card.active .details { display:block }
.current-step { outline:3px solid var(--accent) }
.timeline { position:relative; max-width:800px; margin:24px auto }
.timeline::after {
  content:''; position:absolute; width:6px; background-color:var(--accent);
  top:0; bottom:0; left:50%; margin-left:-3px;
}
.timeline-item { padding:20px; position:relative; width:50% }
.timeline-item.left { left:0 }
.timeline-item.right { left:50% }
.timeline-item::after {
  content:''; position:absolute; width:20px; height:20px; right:-10px;
  background-color:white; border:4px solid var(--accent);
  top:10px; border-radius:50%; z-index:1;
}
.timeline-item.right::after { left:-10px; right:auto }
.timeline-content {
  padding:10px; background-color:white; position:relative;
  border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
@media (max-width:720px){
  .timeline::after{ left:10px }
  .timeline-item{ width:100%; left:0; padding-left:28px }
  .timeline-item::after{ left:0; right:auto }
}
.nav {
  display:flex; justify-content:center; gap:10px; margin-top:30px;
}
.nav a {
  background:var(--accent); color:white; padding:10px 14px; border-radius:10px;
  text-decoration:none; font-weight:600;
}
/* Full-width image card */
.image-card {
  padding: 0;                 /* edge-to-edge image */
  grid-column: 1 / -1;        /* span full container width */
  overflow: hidden;
  border-radius: var(--radius);
}
.image-card img {
  display: block;
  width: 100%;                /* responsive width */
  height: auto;               /* keep the whole image (no cropping) */
}
      /* Force three equal-width columns (≈33.3% each) on this page */
    .impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* KPI helpers */
    .metrics{
      display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      max-width:var(--maxw); margin:14px auto 0;
    }
    .kpi{
      background:#fff; border:1px solid #eee; border-radius:12px; padding:14px;
      box-shadow:var(--shadow);
    }
    .kpi .label{ font-size:12px; color:#666; }
    .kpi .value{ font-weight:800; font-size:22px; margin-top:4px; }
    .bar{ height:10px; background:#eee; border-radius:999px; overflow:hidden; margin-top:8px; }
    .fill{ height:100%; background:var(--accent); width:100%; }
    .muted{ color:#666; font-size:14px; }