.kpi-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding: 24px 26px;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #263449);
  border-radius: 16px;
}
.kpi-hero h1 { margin: 3px 0 7px; }
.kpi-hero p { margin: 0; color: #dbe3ee; }
.kpi-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.kpi-year { display: flex; align-items: end; gap: 9px; min-width: 240px; }
.kpi-year label { color: #dbe3ee; }
.kpi-year select { min-width: 110px; }
.kpi-definitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 30px;
  overflow: hidden;
  background: #dfe4ea;
  border: 1px solid #dfe4ea;
  border-radius: 12px;
}
.kpi-definitions div { display: grid; gap: 5px; padding: 15px 17px; background: #fff; }
.kpi-definitions strong { font-size: 13px; }
.kpi-definitions span { color: #697386; font-size: 12px; line-height: 1.45; }
.kpi-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-delay-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 22px 0 9px; }
.kpi-delay-heading h3 { margin: 0; font-size: 16px; }
.kpi-delay-heading p { margin: 0; color: #697386; font-size: 12px; }
.kpi-delay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi-delay-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #dfe4ea; border-radius: 10px; background: #fff; }
.kpi-delay-item span { color: #596273; font-size: 12px; font-weight: 750; }
.kpi-delay-item strong { font-size: 21px; }
.kpi-delay-item.on-time { border-left: 4px solid #39a96b; }
.kpi-delay-item.late-1 { border-left: 4px solid #f0b429; }
.kpi-delay-item.late-2 { border-left: 4px solid #ed8936; }
.kpi-delay-item.late-3 { border-left: 4px solid #d64550; }
.kpi-delay-compact { margin-top: -5px; }
.kpi-detail-link, .kpi-back { display: flex; justify-content: flex-end; margin: -16px 0 24px; }
.kpi-site { margin: 0 0 34px; }
.kpi-site-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.kpi-site-heading h2 { margin: 3px 0 0; font-size: 22px; }
.kpi-site-heading span { color: #697386; font-size: 12px; font-weight: 750; }
.kpi-flow { color: #596273; }
.kpi-flow strong { color: #17202a; font-size: 20px; }
.kpi-site-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-unidentified { padding: 18px; background: #fff; border: 1px dashed #c9d0d9; border-radius: 12px; }
.kpi-unidentified p { margin-bottom: 0; color: #697386; }
@media (max-width: 700px) {
  .kpi-hero { display: grid; align-items: start; }
  .kpi-year { min-width: 0; }
  .kpi-definitions, .kpi-cards, .kpi-site-cards, .kpi-delay-grid { grid-template-columns: 1fr; }
  .kpi-delay-heading { align-items: start; display: grid; }
  .kpi-site-heading { align-items: start; display: grid; }
}