/* ==========================================================================
   Home — Statement: waarom EVconsult (navy band)
   Kop en USP's delen dezelfde kolomafstand, zodat de toelichting rechts
   precies uitlijnt met de derde USP (vanaf 1100px) of de tweede (960–1099px).
   ========================================================================== */
.s-statement {
  --s-statement-kolom: clamp(1.75rem, 1rem + 2vw, 3rem);
}

/* --- Kop: grote stelling links, toelichting rechts ------------------- */
.s-statement__kop {
  display: grid;
  gap: 1.75rem var(--s-statement-kolom);
}
@media (min-width: 960px) {
  .s-statement__kop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

.s-statement__kicker { margin-bottom: 1.5rem; }

.s-statement__titel {
  max-width: 14ch;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem);
  line-height: 1.05;
  color: var(--wit);
}
.s-statement__zin { display: block; }

.s-statement__tekst { max-width: 44ch; text-wrap: balance; }

/* --- USP's ------------------------------------------------------------ */
.s-statement__usps {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  gap: clamp(2.25rem, 1.75rem + 1.5vw, 3rem) var(--s-statement-kolom);
}

/* Vier kolommen pas vanaf 1100px; daaronder 2×2, anders worden de kolommen te smal */
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .s-statement__usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nummer, kop en tekst lopen per rij gelijk, ook als een kop één regel korter is */
@supports (grid-template-rows: subgrid) {
  .s-statement__usp {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Indexregel: roze nummer met een dunne lijn die de kolom vult */
.s-statement__nummer {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--roze);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1;
}
.s-statement__nummer::after {
  content: "";
  flex: 1;
  height: 6px;
  background: var(--stippel-x); /* brandbook-stippellijn */
}

.s-statement__usp-titel {
  max-width: 26ch; /* compacte kop van twee regels, ook in brede kolommen */
  margin-top: 1.15rem;
  color: var(--wit);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}

.s-statement__usp-tekst {
  max-width: 38ch;
  margin-top: .75rem;
  color: var(--tekst-op-donker-zacht);
  line-height: 1.6;
}

/* --- Swoosh (klantwens: vaker inzetten) --------------------------------
   Lus rechtsboven in de lege ruimte boven de toelichting; het lint loopt
   over de bovenrand de band uit. Altijd onder de inhoud. */
.s-statement { position: relative; overflow: hidden; isolation: isolate; }
.s-statement > .wrap { position: relative; z-index: 1; }
.s-statement__swoosh {
  z-index: 0;
  width: 130vw;
  left: 44vw;
  top: -6.3rem;
  rotate: -2deg;
}
/* Smal scherm: meer gedraaid, zodat het lint naar rechts loopt i.p.v. omhoog uit beeld */
@media (max-width: 639.98px) {
  .s-statement__swoosh { top: -3.6rem; left: 40vw; rotate: 20deg; }
}
/* Variant 'lang': lus rechtsboven boven de lead, lint loopt vlak rechts uit beeld */
@media (min-width: 1024px) {
  .s-statement__swoosh { width: min(66vw, 1150px); left: auto; right: max(-18vw, -18rem); top: -2.5rem; rotate: 3deg; }
}