.section.alt{background:var(--color-surface)}
.section.spotlight{background:var(--color-bg-muted);color:#fff}
.section.spotlight a{color:#fff;text-decoration:underline}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.kpi{text-align:center;padding:var(--sp-6);border-radius:var(--radius);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14)}
.kpi strong{display:block;font-size:clamp(28px,5vw,40px)}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
@media(max-width:1024px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* Generic image limiter (keeps aspect ratio) */
.img-fit { width: 100%; height: auto; display: block; }

/* Height caps (desktop-first); images shrink on smaller screens */
.img-xs { max-height: 160px; object-fit: contain; }
.img-sm { max-height: 220px; object-fit: contain; }
.img-md { max-height: 300px; object-fit: contain; }
.img-lg { max-height: 380px; object-fit: contain; }

/* Tighter caps on smaller screens */
@media (max-width: 1024px) {
  .img-lg { max-height: 320px; }
  .img-md { max-height: 260px; }
  .img-sm { max-height: 200px; }
  .img-xs { max-height: 140px; }
}
@media (max-width: 640px) {
  .img-lg { max-height: 260px; }
  .img-md { max-height: 220px; }
  .img-sm { max-height: 180px; }
  .img-xs { max-height: 140px; }
}

/* Optional: align image/text vertically within the 2-column grid */
.grid.two.align-center { align-items: center; }

/* Wider full-screen container for hero or large text sections */
.container-large {
  width: 100%;
  max-width: 1600px;        /* wider than normal container */
  margin: 0 auto;
  padding: 0 var(--sp-5);
  text-align: center;
  color: #000;              /* force black text */
}

.container-large h1,
.container-large h2,
.container-large h3,
.container-large p 
{
  color: #000;              /* ensure all headings and text are black */
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;           /* keeps lines readable */
}

.container-large 
{
  font-size: 1.4em;     /* increases everything by ~50% */
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .container-large {
    max-width: 100%;
    padding: 0 var(--sp-4);
  }
}