/* O1 — Over ons: header + PageHero + witte trust-band.
   De volledige header-opmaak komt uit css/sections/s1.css (gedeeld contract),
   de hero-geometrie uit css/sections/page-hero.css (HERO-SYSTEEM §9b, sitebreed
   PageHero-contract). Hier alleen de actieve-nav-stand en de trust-band.
   OPGERUIMD 2026-07-20 (Timo-mock, cohesie-ronde §9): alle oude
   100svh-/cutout-/statrow-op-navy-regels (.oa-hero*, incl. de fold-mediaqueries
   en de knie-crop van de groepsfoto) zijn vervallen; de hero volgt nu het
   compacte PageHero-contract en de statrow is een lichte band ONDER de hero.
   De oude regels staan in git. */

/* Actieve pagina in de nav (subpagina-signaal, zelfde oranje als de hover) */
.site-header .nav-list > li > a[aria-current="page"] {
  color: var(--orange-500);
}

/* ---------- Witte trust-band (direct onder de PageHero, §9b) ----------
   Lichte band op body-cream met onderaan een hairline; de vier statcellen
   komen verbatim uit de oude hero-statrow, maar nu in lichte kleuren:
   iconen oranje, sterke regel donker, subregel muted. */

.oa-trustband {
  background: var(--surface-cream);
  padding-block: clamp(1.75rem, 4vh, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.oa-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oa-hero-trust-cel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.oa-hero-trust-cel + .oa-hero-trust-cel {
  border-left: 1px solid var(--line);
  padding-left: clamp(24px, 2.8vw, 44px);
  margin-left: clamp(24px, 2.8vw, 44px);
}

.oa-hero-trust-ico {
  flex: none;
  color: var(--orange-500);
  margin-top: 1px;
}
.oa-hero-trust-ico svg { display: block; }

.oa-hero-trust-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.oa-hero-trust-sterk {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.oa-hero-trust-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Tablet (~880px): trust 2x2 met dividers ---------- */

@media (max-width: 880px) {
  .oa-hero-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oa-hero-trust-cel + .oa-hero-trust-cel {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .oa-hero-trust-cel:nth-child(odd) { padding-right: clamp(18px, 4vw, 28px); }
  .oa-hero-trust-cel:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: clamp(18px, 4vw, 28px);
  }
  .oa-hero-trust-cel:nth-child(n+3) {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 20px;
  }
}

/* ---------- Mobiel (~520px): trust stapelt naar 1 kolom ---------- */

@media (max-width: 520px) {
  .oa-hero-trust {
    grid-template-columns: 1fr;
  }
  .oa-hero-trust-cel:nth-child(odd) { padding-right: 0; }
  .oa-hero-trust-cel:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }
  .oa-hero-trust-cel + .oa-hero-trust-cel {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 16px;
  }
  /* Iets compacter trust-korps op smal (lange labels wrappen netter). */
  .oa-hero-trust-sterk { font-size: 12px; letter-spacing: .08em; }
  .oa-hero-trust-sub { font-size: 12px; line-height: 1.4; }
}