.kpi-section {
    --kpi-blue: #326d94;
    --kpi-ink: #1d2e3b;
    --kpi-muted: #607487;
    --kpi-line: #d9e5ec;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: #f0f6f9;
    color: var(--kpi-ink);
}

.kpi-section--home { background: #fff; }
.kpi-section--research { background: #fff; }

.kpi-section__intro {
    max-width: 54rem;
    margin: 0 0 2rem;
}

.kpi-section__intro h2 {
    margin: 0 0 .65rem;
    color: var(--kpi-blue);
    font-size: clamp(1.65rem, 2.6vw, 2.25rem);
    font-weight: 700;
}

.kpi-section__intro p {
    margin: 0;
    color: var(--kpi-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.kpi-section__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.kpi-section--count-1 .kpi-section__grid { grid-template-columns: minmax(0, 1fr); max-width: 25rem; }
.kpi-section--count-2 .kpi-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-section--count-3 .kpi-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-section--count-5 .kpi-section__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-section--count-5 .kpi-section__item { grid-column: span 2; }
.kpi-section--count-5 .kpi-section__item:nth-child(4) { grid-column: 2 / span 2; }

.kpi-section__item {
    min-width: 0;
    padding: .25rem 1.1rem .25rem 1.35rem;
    border-left: 2px solid var(--kpi-line);
}

.kpi-section--home .kpi-section__item { text-align: center; }
.kpi-section__value { display: block; color: var(--kpi-blue); font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1.05; font-weight: 700; }
.kpi-section__label { display: block; margin-top: .5rem; color: var(--kpi-ink); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.kpi-section__description { margin: .45rem 0 0; color: var(--kpi-muted); font-size: .9rem; line-height: 1.55; }
.kpi-section__link { display: block; color: inherit; text-decoration: none; }
.kpi-section__link:hover .kpi-section__label,
.kpi-section__link:focus-visible .kpi-section__label { text-decoration: underline; text-underline-offset: .2em; }
.kpi-section__link:focus-visible { outline: 3px solid var(--kpi-blue); outline-offset: 4px; }

.kpi-section--research .kpi-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.kpi-section--research .kpi-section__item--featured { grid-column: span 2; border-left: 4px solid var(--kpi-blue); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.kpi-section__item--featured .kpi-section__value { font-size: clamp(3.5rem, 8vw, 6rem); }
.kpi-section__item--featured .kpi-section__label { font-size: 1.15rem; }

@media (max-width: 991.98px) {
    .kpi-section__grid,
    .kpi-section--count-3 .kpi-section__grid,
    .kpi-section--count-5 .kpi-section__grid,
    .kpi-section--research .kpi-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi-section--count-5 .kpi-section__item,
    .kpi-section--count-5 .kpi-section__item:nth-child(4),
    .kpi-section--research .kpi-section__item--featured { grid-column: auto; }
}

@media (max-width: 575.98px) {
    .kpi-section__grid,
    .kpi-section--count-2 .kpi-section__grid,
    .kpi-section--count-3 .kpi-section__grid,
    .kpi-section--count-5 .kpi-section__grid,
    .kpi-section--research .kpi-section__grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .kpi-section--count-5 .kpi-section__item,
    .kpi-section--count-5 .kpi-section__item:nth-child(4),
    .kpi-section--research .kpi-section__item--featured { grid-column: auto; }
    .kpi-section--home .kpi-section__item { text-align: left; }
}