/* ES3 - Vertrouwelijkheid (cream, start licht middenrif).
   Device: genummerde vastleg-regels op linialen. Geen kaarten, geen paneel, geen tijdlijn.
   v2 (feedback Timo 10-09-2026): twee kolommen die op dezelfde hoogte beginnen. In v1
   stond de kop linksboven en de lijst rechtsonder; dat las als een diagonaal. */

.es-vertrouwen { padding-block: var(--space-section) var(--space-section-s); }

.es-vertrouwen-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* Eyebrow-afstand = het sitebrede recept (ws2/rpo2/svc-hero: 20px). */
.es-vertrouwen-kop .eyebrow { margin-bottom: 20px; }
.es-vertrouwen-kop h2 { margin-bottom: 16px; max-width: 18ch; }
.es-vertrouwen-kop .lead { max-width: 44ch; }

/* CTA rechts, onder de NDA-slotregel (ronde 3, correctie Timo). */
.es-vastleg-cta { margin-top: 26px; }

.es-vertrouwen-intro {
  margin: 20px 0 0;
  max-width: 52ch;
  color: var(--text-body);
  line-height: 1.6;
}

/* Rechterkolom: begint op de hoogte van de eyebrow links. De kleine kop boven de lijst
   zit in dezelfde 12px-uppercase-familie als de eyebrow, zonder ticks, zodat de twee
   kolommen op dezelfde regel starten zonder twee eyebrows naast elkaar te zetten. */
.es-vertrouwen-lijstkolom { min-width: 0; padding-top: 4px; }

.es-vastleg-kop {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.es-vastleg { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.es-vastleg li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.es-vastleg-nr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .06em;
}

/* 15-09-2026 (slop-audit es-3): op es3 zijn de drie vastleg-regels geen volgorde maar
   drie dingen die naast elkaar in de opdrachtbevestiging staan. Zonder cijfer, een kolom.
   Alleen es3 draagt de modifier; ws13/es12/hh11/sr3 houden 01/02/03 (dat is wel een volgorde). */
.es-vastleg--los li { grid-template-columns: 1fr; }

.es-vastleg-tekst { color: var(--text-strong); font-size: var(--text-lead); line-height: 1.4; }

.es-vastleg-slot {
  margin: 18px 0 0;
  font-size: var(--text-small);
  color: var(--text-body);
  max-width: 46ch;
}

@media (max-width: 900px) {
  .es-vertrouwen-grid { grid-template-columns: 1fr; gap: 28px; }
  .es-vertrouwen-lijstkolom { padding-top: 0; }
}