/* ===========================================================
   Studio 17C — aanvullingen op stijl.css
   Dit bestand wordt NA stijl.css geladen, dus wat hier staat
   wint van wat daar staat. Zo blijft het origineel intact.
   =========================================================== */

/* pillen zonder link (Strategisch advies, Business development,
   Transitiemanagement) zien er hetzelfde uit als de pillen mét link */
.merken span{
  display:inline-block;font-size:.88rem;font-weight:500;
  border:1px solid var(--waas);border-radius:999px;
  padding:.3rem .85rem;color:var(--inkt);
}

/* grote uitspraak in oranje, breekt het ritme van de pagina */
.uitspraak{background:var(--oranje);color:#fff;padding-block:clamp(2.4rem,4.5vw,3.4rem)}
.uitspraak blockquote{
  margin:0;max-width:38ch;
  font-family:var(--kop);font-weight:500;
  font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.25;letter-spacing:-.018em;
}
.uitspraak .bron{
  max-width:none;margin:1.3rem 0 0;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8;
}
@media(max-width:700px){.uitspraak blockquote{max-width:none}}

/* portret bij Wie ik ben */
.portret{margin-top:1.6rem}

/* voettekst van de eventspagina */
.voet-binnen{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;justify-content:center}
.voet-binnen p{margin:0;max-width:none}
.voet a{color:var(--zacht)}

/* de kop is langer dan de vorige, dus iets kleiner zodat hij
   in drie regels past en de knoppen in beeld blijven */
.hero h1{font-size:clamp(2.1rem,4.5vw,3.35rem);max-width:19ch}

/* portret vult de linkerkolom bij Wie ik ben */
.portret-groot{max-width:100%;aspect-ratio:4/5;object-position:center 15%}

/* hero: de netwerktekening groter, steviger en dichter tegen de tekst aan,
   zodat er geen leeg gat meer tussen tekst en tekening zit */
.hero{overflow:hidden;padding-block:clamp(3rem,6vw,4.5rem)}
.hero .tekening{right:max(1.25rem,calc(50% - 560px));height:min(118%,520px);opacity:.55}
.hero h1{max-width:26ch}
.hero p{max-width:64ch}
@media(max-width:900px){.hero .tekening{opacity:.18;right:-20%}}

/* resultaatregel onder een uitgelicht blok, zelfde opmaak als in de lijsten */
.nu em{font-style:normal;color:var(--oranje-diep)}

/* opdrachten en kennis als kaarten naast elkaar */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;margin-top:1.6rem}
.kaarten li{display:block;border:1px solid var(--waas);border-radius:4px;padding:1.15rem 1.25rem;align-items:initial}
.kaarten li:last-child{border-bottom:1px solid var(--waas)}
.kaarten .wie{display:block;font-size:1.02rem;margin-bottom:.5rem}
.kaarten .wat{display:block;font-size:.93rem}
.kaarten .wat em{display:block;margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--waas);color:var(--oranje-diep);font-size:.88rem;font-style:normal}

/* cijferbalk: kaarten op een zacht vlak */
.cijfers{background:var(--zacht);padding-block:clamp(2.6rem,5vw,3.6rem)}
.cijferlijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.cijferlijst li{background:var(--creme);border-radius:4px;padding:1.5rem 1.5rem 1.6rem;border-top:3px solid var(--oranje)}
.cijfer{display:block;font-family:var(--kop);font-weight:600;font-size:clamp(2.1rem,3.8vw,2.9rem);line-height:1.02;letter-spacing:-.035em;color:var(--oranje-diep)}
.cijfer-tekst{display:block;margin-top:.8rem;font-size:.95rem;line-height:1.5;color:var(--inkt)}