/* ES1 - Executive Search: hero-aanvullingen + bewijspaneel + aria-current-recept.
   De hero-geometrie komt volledig uit css/sections/svc-hero.css (svc-hero-contract) en
   de header uit css/sections/s1.css; hier staat ALLEEN wat deze pagina toevoegt.
   Class-prefix .es- voor al het nieuwe werk, gelijk aan de .ws-/.rpo-conventie.

   v2 (feedback Timo 10-09-2026): de cijferstrook onder de copy is vervangen door een
   bewijspaneel RECHTS van de copy, zodat de hero even hoog is als die van W&S en RPO
   en de logostrook omhoog schuift. De h1 staat weer op de contractschaal (--text-hero),
   twee regels, precies als "Werving & / Selectie". */

/* Actieve dropdown-regel, os1/ws1-recept. */
.site-header .nav-dropdown a[aria-current="page"] { color: var(--orange-500); }

/* - Hero-grid met bewijspaneel -
   Het contract-grid (minmax(440px,1fr) minmax(0,1.05fr)) is bemeten op een VSL-kader
   dat de halve breedte mag pakken. Een cijferpaneel op die breedte oogt leeg, dus hier
   een eigen verdeling: copy ruim, paneel smal. De copy houdt dezelfde 640px als de
   solo-stand van W&S en RPO, zodat de regelval van lead en knoppen gelijk blijft. */
.svc-hero-grid--es {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.svc-hero-grid--es .svc-hero-copy { max-width: 640px; }

/* - Bewijspaneel -
   PAGINA-IDENTITEIT: bestaat op geen andere pagina; ws1 heeft expliciet GEEN statrow.
   Statisch, geen tellers: .stat-num is op dit paginatype verboden.
   Geen gevuld oranje vlak: het oranje-budget gaat naar de primaire CTA's. Wel dezelfde
   kaartrand als het fee-blok in es2, zodat de twee bewijskaarten van de pagina familie
   zijn. */
.es-hero-bewijs {
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.es-hero-bewijs dl { margin: 0; }

.es-hero-bewijs-rij {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: clamp(18px, 2vh, 24px);
  border-top: 1px solid var(--line);
}

.es-hero-bewijs-rij:first-child { padding-top: 0; border-top: 0; }
.es-hero-bewijs-rij:last-child { padding-bottom: 0; }

.es-hero-bewijs dt {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: .9;
  color: var(--text-strong);
  letter-spacing: .01em;
}

/* De 92% is het device: de enige hoek die in deze veiling vrij is (standhouden). */
.es-hero-bewijs-rij--groot dt {
  font-size: clamp(4rem, 6.4vw, 6rem);
  color: var(--navy-500);
}

.es-hero-bewijs dd {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--text-body);
  max-width: 26ch;
}

/* Gestapeld (contract: svc-hero-grid wordt display:block onder 1024px): het paneel
   komt onder de copy, op de breedte van de copy, en de twee rijen naast elkaar. */
@media (max-width: 1024px) {
  .es-hero-bewijs {
    max-width: 640px;
    margin-top: clamp(28px, 5vw, 40px);
  }
  .es-hero-bewijs dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  .es-hero-bewijs-rij { padding-block: 0; border-top: 0; }
  .es-hero-bewijs-rij--groot dt { font-size: clamp(3rem, 7vw, 4rem); }
}

@media (max-width: 560px) {
  .es-hero-bewijs { margin-top: 18px; padding: 20px; }
  .es-hero-bewijs dl { grid-template-columns: 1fr; gap: 14px; }
  /* Twee rijen getal-links, label-rechts. Het getal krijgt een VASTE kolombreedte
     (geen em-minimum: 3.4em was bij twee lettergroottes twee verschillende breedtes,
     gemeten 10-09-2026, en dan sprongen de labels uit lijn). */
  .es-hero-bewijs-rij { flex-direction: row; align-items: center; gap: 14px; }
  .es-hero-bewijs dt { font-size: 2.2rem; flex: 0 0 112px; min-width: 0; }
  .es-hero-bewijs-rij--groot dt { font-size: 2.6rem; }
  .es-hero-bewijs dd { max-width: none; }
}