/* ==========================================================================
   Platform-aanpassingen bovenop het geporte design.
   Eigen bestand (als laatste geladen) zodat de originele designbestanden
   onaangeroerd blijven.
   ========================================================================== */

/* Vaste lichtblauwe band achter en onder de navigatie.

   Gevraagd gedrag: de content mag bij het scrollen niet zichtbaar langs of
   boven de nav schuiven — de lichtblauwe achtergrond (blue-200) houdt altijd
   10px afstand onder de nav voordat de content begint.

   Geometrie desktop: frame 10px (.page__inner-marge), nav op top 22px met
   hoogte 73px → onderkant band = 22 + 73 + 10 = 105px.
   Mobiel (≤920px): frame 8px, nav op top 8px met hoogte 63px → onderkant
   band = 8 + 63 + 10 = 81px.

   z-index 40: boven alle scrollende content (≤10), onder het blue-400-frame
   (50) en de nav (900). De hero-titel (901) hoort erboven te bewegen — die
   morft in de scroll-animatie naar het naaflogo. */
.page::before {
  content: '';
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  height: calc(12px + 73px + 10px + var(--admin-bar-h, 0px));
  background: var(--blue-200);
  pointer-events: none;
  z-index: 40;
}

/* .header-wrapper (z-index 10 in het design) vormt de stacking context van
   de vaste nav — de z-900 van .header telt alleen dáárbinnen. Zonder deze
   verhoging valt de hele nav achter de band hierboven. 60 = boven band (40)
   en frame (50); de hero-titel (901, root-context) blijft er bewust boven
   voor de morph-animatie, het mobiele menu (2000) ook. */
.header-wrapper {
  z-index: 60;
}

/* De hero-kleurbalken zijn — net als het woordmerk (901) — animatiemeubilair
   dat de navzone in morft. Zonder deze verhoging maskeert de band hierboven
   hun bovenrand, wat een lichtblauwe kier tussen nav en balken gaf. 45 =
   boven de band (40), onder frame (50) en nav (60). */
.hero__bars {
  z-index: 45;
}

/* ==========================================================================
   Scrollbare kaartstroken.
   Met het aantal items uit het design verandert er niets; zodra er méér
   inhoud is (extra inzichten, extra foto's) scrolt de strook horizontaal in
   plaats van dat de kaarten krimpen. Scrollbalk verborgen, zoals bij dit
   soort stroken gebruikelijk.
   ========================================================================== */
.insights__cards-inner,
.insight-related__cards-inner,
.themas-insights__cards {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.insights__cards-inner::-webkit-scrollbar,
.insight-related__cards-inner::-webkit-scrollbar,
.themas-insights__cards::-webkit-scrollbar {
  display: none;
}

/* Vaste kaartmaat, ongeacht de inhoud. De kaart uit het design — beeld,
   driregelige titel, datum — is de maat; een kaart zonder beeld of met een
   korte titel werd anders lager dan zijn buur, en in z'n eentje rekte een
   kaart over de hele strook. Breedte: de designbreedte bij twee kaarten
   (helft van de strook minus halve gap), zodat de strook vanaf drie kaarten
   uitloopt in plaats van dat de kaarten krimpen. (In automatische modus
   zijn de kaarten in een <a> gewikkeld, vandaar de afstammelingselector.)

   Hoogte: 16 padding + 277 beeld + 16 gat + 3 x 31,2 titel + 16 gat +
   16,5 datum + 16 padding = 451,1 -> 452px.

   Alles vanaf 921px: op mobiel is de kaart een rij (beeld links, tekst
   rechts) met een eigen maat, daar geldt dit niet. */
@media (min-width: 921px) {
  /* min(): op de ontwerpbreedte is 50% min de halve gap precies 399px, de
     kaart uit het ontwerp. Op een breder scherm zou die helft doorgroeien tot
     een kaart van bijna duizend pixels met een titel van drie woorden; de
     404px is de ontwerpmaat en dus de bovengrens. Er passen er dan meer
     naast elkaar in plaats van dat er twee uitdijen. */
  .insights__cards .insight-card {
    flex: 0 0 min(404px, calc(50% - 11px));
  }

  .insight-card,
  .insights-index__grid .insight-card {
    height: 452px;
  }

  /* Datum onderaan, titel direct onder het beeld — in beide kaartvarianten.
     De "uitgerekt"-variant deed dit al met space-between; met een vaste
     hoogte zou dat de titel in het midden laten zweven. */
  .insight-card__date {
    margin-top: auto;
  }

  /* Titel na drie regels afkappen: langer past niet binnen de vaste hoogte
     en zou door overflow: hidden halverwege een regel worden afgesneden. */
  .insight-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

.themas-insights__cards:has(> :nth-child(3)) .themas-insight {
  flex: 0 0 min(404px, calc(50% - 11px));
}

/* Fotostroken die schuiven — de klasse komt van photo-strip.js, dat hem
   alleen zet op een strook die daadwerkelijk breder is dan zijn ruimte.
   Het design tekende die stroken met afgesneden randen: de werkwijzestrook
   stond gecentreerd met de eerste foto buiten beeld, de onderste fotorij van
   een vacature en de beeldbalk van een case liepen rechts het beeld uit.
   Zonder schuifbalk zag niemand dat daar nog foto's stonden.

   Zonder JavaScript verandert er niets: dan valt elke strook terug op de
   originele statische designweergave. */
.fotostrook--schuift {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  scroll-behavior: auto;
}

.fotostrook--schuift::-webkit-scrollbar {
  display: none;
}

/* In een schuivende rij mag geen enkel item nog meekrimpen; een item dat
   zijn breedte uit een flex-aandeel haalt zou in een lus tot niets
   samenvallen. */
.fotostrook--schuift > * {
  flex-shrink: 0;
}

/* In een lus bestaat er geen "laatste" foto, dus de smallere
   :last-child-breedte uit het design (679px) wordt gelijkgetrokken. */
.fotostrook--schuift .werkwijze-photos__item,
.fotostrook--schuift .werkwijze-photos__item:last-child {
  flex: 0 0 718px;
}

@media (max-width: 920px) {
  .page::before {
    top: 8px;
    left: 8px;
    right: 8px;
    height: calc(63px + 10px + var(--admin-bar-h, 0px));
  }
}

/* ==========================================================================
   Inhoud van redacteuren mag de layout niet breken
   --------------------------------------------------------------------------
   De secties hebben smalle, deels vaste kaders. Eén lange functietitel of
   een URL zonder spaties duwde die eerder open — dat gebeurde echt met
   "Manager Communications, Vattenfall Nederland" in een teamkaart van
   180px. Tekst breekt daarom overal af in plaats van door te lopen, en
   beelden vullen hun kader ongeacht hun eigen afmetingen.

   Dit is een vangnet, geen opmaak: op normale inhoud is het onzichtbaar.
   ========================================================================== */

.page h1,
.page h2,
.page h3,
.page h4,
.page p,
.page span,
.page a,
.page li {
  overflow-wrap: break-word;
}

/* Een kop mag breken, maar hij krimpt er niet van
   --------------------------------------------------------------------------
   De regel hierboven laat een lang woord afbreken, en toch liep de titel van
   een vacature op een telefoon buiten beeld: "Adviseur
   omgevingscommunicatie" werd 501px breed in een kolom van 304px, en omdat
   .main-wrapper horizontaal afkapt zag je de tekst niet doorlopen maar
   gewoon afgesneden.

   Dat is geen fout in die regel maar een eigenschap ervan. `overflow-wrap:
   break-word` breekt een woord pas op het moment dat er een regel opgemaakt
   wordt; het telt niet mee in de mínimale breedte die de browser voor het
   element uitrekent. Die blijft het langste ongebroken woord —
   "communicatieadviseur" op 44px is 448px — en .vacancy-hero staat op
   `align-items: flex-start`, dus de kop krijgt precies die eigen breedte in
   plaats van die van zijn kolom. `min-width: 0` helpt daar niet tegen: het
   element wordt niet geperst, het vraagt zelf te veel.

   Een bovengrens lost het wel op: die kapt de doos af op de kolombreedte, en
   dán gaat de regel hierboven alsnog aan het werk. Dat is precies wat
   .expertises-hero__title, .case-hero__title en .themas-hero__title in
   responsive.css al doen; hier staat het één keer voor elke h1, zodat een
   nieuwe sjabloon of een langere functietitel er niet opnieuw doorheen valt.

   Met een afbreekstreepje erbij, want zonder leest "omgevingscom municatie"
   als twee woorden. Het document staat op lang="nl", dus de browser gebruikt
   zijn Nederlandse woordenboek en breekt op "omgevingscom-municatie" — een
   geldig punt, want communicatie is com-mu-ni-ca-tie.

   Maar niet zomaar `hyphens: auto`: dat breekt ook woorden die prima op de
   volgende regel passen, om regels beter te vullen. Op /inzichten werd
   "Waarom AI / begrijpen is geen / IT-vraagstuk is" daardoor "Waarom AI be- /
   grijpen is geen IT- / vraagstuk is" — twee streepjes die niemand gevraagd
   heeft, in een kop die al goed stond. De ondergrens van veertien letters
   houdt dat tegen: "begrijpen" (negen) blijft heel, "omgevingscommunicatie"
   (eenentwintig) niet. De zeven erachter zijn het minimum vóór en ná het
   streepje, zodat er geen losse lettergreep overblijft.

   Kent een browser hyphenate-limit-chars niet (Safari onder 17), dan valt hij
   terug op gewoon `hyphens: auto` en hyphenateert hij wat gretiger. Dat is
   een kwestie van smaak in de opmaak, niet van tekst die buiten beeld valt —
   de bovengrens hierboven doet dat werk, en die kent iedereen.

   Alleen op de telefoon. Boven 920px heeft elke kop ruimte — nagemeten op
   921, 1024, 1200 en 1440px staat er geen enkele kop buiten zijn kolom — en
   een bovengrens van 100% zou daar de maten uit het ontwerp overschrijven
   (.vacancy-hero__title houdt het op 1178px, breder dan de tekstkolom hoort
   te worden). */
@media (max-width: 920px) {
  .page h1 {
    max-width: 100%;
    hyphens: auto;
    hyphenate-limit-chars: 14 7 7;
  }
}

/* Kaarten en rijen die inhoud van een redacteur tonen: nooit laten
   uitrekken door één lang woord. */
.team-card,
.value-card,
.vacature-card,
.vacancy-row,
.service-card,
.insight-card,
.case-result__item {
  min-width: 0;
}

/* Geüploade beelden hebben willekeurige afmetingen; het kader is leidend. */
.page img {
  max-width: 100%;
}

/* ==========================================================================
   Case-quote stond 60px te ver naar links
   --------------------------------------------------------------------------
   .case-result centreert zijn kinderen (align-items: center). Een kind met
   width: calc(100% + 240px) loopt daardoor al vanzelf precies tot beide
   sectieranden. De margin-left: -120px die daar bovenop staat, verschuift
   het blok nog eens een halve breekmarge naar links: bij 1920px begon de
   quote op x=-50 — buiten de pagina — en eindigde hij 60px vóór de
   rechterrand.

   Alleen de negatieve marge weghalen; de breedte doet het werk al.
   ========================================================================== */
.case-result .case-quote {
  margin-left: 0;
}

/* ==========================================================================
   Sectielink naar het overzicht ("Bekijk alle cases >")
   --------------------------------------------------------------------------
   Master copy doc.xlsx vraagt onder Client stories en Laatste inzichten om
   een doorverwijzing naar het overzicht, met de aantekening "staat niet in
   template". Er komt daarom geen nieuwe vorm bij: het is de knop die het
   ontwerp al kent (.btn uit services.css). Alleen de plaatsing is nieuw.

   In de labelkolom (insights, insights-index) staat hij onder het
   bracketlabel; in .clients__content is hij het laatste kind van een
   flexkolom die zijn eigen gap (46px) al meebrengt.
   ========================================================================== */
.insights__label .section-cta,
.insights-index__label .section-cta {
  margin-top: 24px;
}

@media (max-width: 920px) {
  .insights__label .section-cta,
  .insights-index__label .section-cta {
    margin-top: 12px;
  }
}

/* ==========================================================================
   Toegankelijkheid
   --------------------------------------------------------------------------
   Vier dingen die het ontwerp niet tekent maar die de site wel nodig heeft
   om met toetsenbord en schermlezer bruikbaar te zijn. Ze zijn zo gebouwd
   dat er met de muis niets verandert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sprongverwijzing — WCAG 2.4.1

   Het eerste element van elke pagina. Buiten beeld tot hij focus krijgt;
   dan schuift hij linksboven in beeld, over de vaste header heen (die zit
   op z-index 900, de blauwe paginarand op 50).
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--base-100);
  color: var(--green-1200);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.3;
  border-radius: 0 0 8px 0;
  /* translate en niet display:none: verborgen mét behoud van focus */
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Het doel van de sprong krijgt tabindex="-1" om focus te kunnen ontvangen;
   die focus hoeft geen rand — de bezoeker staat er dan al. */
main:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   2. Zichtbare focus — WCAG 2.4.7

   Er stond alleen focus-visible op de velden en kaarten van het
   collega-overzicht. Overal daarbuiten was met het toetsenbord niet te zien
   waar je stond: `a { text-decoration: none }` haalt ook de enige rest van
   onderscheid weg. Dit is de standaardring van de browser, maar dan in de
   merkkleur en met genoeg contrast tegen zowel het blauw als het wit.

   Alleen :focus-visible, dus een muisklik op een knop geeft nog steeds geen
   ring.
   -------------------------------------------------------------------------- */
.page a:focus-visible,
.page button:focus-visible,
.page input:focus-visible,
.page select:focus-visible,
.page textarea:focus-visible,
.page summary:focus-visible,
.page [tabindex]:not([tabindex="-1"]):focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--green-1200);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Op donkergroene vlakken (footer, knoppen) valt groen op groen weg. */
.footer a:focus-visible,
.cta__button:focus-visible,
.contact-cta__button:focus-visible {
  outline-color: var(--base-100);
}

/* --------------------------------------------------------------------------
   3. Het mobiele menu was nooit écht verborgen

   .mobile-menu stond alleen buiten beeld geschoven (translateX(100%)) en
   bleef daardoor op elke pagina, op elke breedte, gewoon in de tabvolgorde
   staan — ook op desktop, waar de openknop display:none is. Wie vanaf de
   header doortabde belandde in een menu dat niemand ziet, en een
   schermlezer las het hele menu twee keer voor.

   visibility haalt het uit de tabvolgorde én uit de toegankelijkheidsboom.
   De vertraging houdt de uitschuif-animatie intact: pas ná de 0,3s van de
   transform springt het op hidden.
   -------------------------------------------------------------------------- */
.mobile-menu {
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.mobile-menu--open {
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   4. <main> op de homepage

   Op de homepage staan de blokken en de footer samen in .sections — de
   scroll-animatie schuift die twee als één geheel omhoog, dus de footer kan
   daar niet uit. Het <main>-landmark mag de footer niet omvatten en zit er
   dus binnenin, met dezelfde flexkolom zodat de rij secties precies zo
   loopt als eerst: 80px tussen de blokken, en de gap van .sections zelf
   levert diezelfde 80px tussen het laatste blok en de footer.
   -------------------------------------------------------------------------- */
.sections__main {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  width: 100%;
}

@media (max-width: 920px) {
  .sections__main {
    gap: 48px;
  }
}

/* ==========================================================================
   Recent werk — de eerste klant staat aan zolang er niets aangewezen wordt
   --------------------------------------------------------------------------
   De sectie was volledig van hover afhankelijk: zonder muis bleef het vlak
   egaal blauw, het beeld rechts leeg en alle klantnamen verborgen. Op een
   touchscreen en met het toetsenbord bestond die informatie dus niet. De
   eerste rij is nu de rusttoestand — hoveren wisselt hem tijdelijk om.

   Het aanwijzen zelf gebeurt met .is-active (client-stories.js); hieronder
   staat alleen wat de klasse doet met de breedte van het logodoosje, plus
   twee dingen die het script eerder met inline stijlen deed.
   ========================================================================== */

/* Het logodoosje van de actieve rij is even breed als zijn inhoud. De
   gemeten breedte komt als --logo-breedte van het script; zonder
   JavaScript valt hij terug op auto, dus dan klopt het ook. */
.client-item.is-active .client-item__logo-box {
  width: var(--logo-breedte, auto);
}

/* Geen kleurovergang vóór de eerste meting.
   --clip-to-image wordt door het script gezet; zolang die er niet is, is
   clip-path ongeldig en dekt de blauwe laag alles af. Zonder deze regel
   schuift die laag bij het laden alsnog zichtbaar weg — een animatie die
   niemand heeft aangevraagd, elke paginalading opnieuw. */
.clients:not(.clients--gemeten) .clients__bg {
  transition: none;
}

@media (max-width: 920px) {
  /* Mobiel toont het ontwerp elke klantnaam, altijd: de kaarten staan onder
     elkaar en er valt niets aan te wijzen. Het doosje volgt dus zijn inhoud,
     ook voor de rij die op desktop de actieve is. */
  .client-item.is-active .client-item__logo-box,
  .client-item:hover .client-item__logo-box {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Wel voorlezen, niet tonen

   Voor tekst die een schermlezer nodig heeft maar die het ontwerp niet
   tekent — de titel van de homepage, waar visueel alleen het woordmerk
   staat. Niet `display: none` of `visibility: hidden`: die halen de tekst
   ook uit de toegankelijkheidsboom, en dan is het net zo goed weg.
   -------------------------------------------------------------------------- */
.alleen-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Casegalerij: de beeldbalk schuift

   Het ontwerp legt de galerij vast op 820px voor een grote plaat en 410px
   voor een kleine, met 20px ertussen — samen breder dan de 1180px die de
   strook krijgt. Omdat .case-gallery overflow: hidden heeft, verdween het
   derde beeld volledig uit beeld en werd het tweede halverwege afgesneden:
   niet zichtbaar als schuifbalk, dus jarenlang onopgemerkt.

   Hier stond eerder een oplossing die de beelden liet krimpen tot ze samen
   pasten (flex-aandelen 2:1 met een aspect-ratio op de strook). Dat maakte
   ze compleet, maar ook kleiner dan het ontwerp ze tekent. De gevraagde
   oplossing is de andere: de beelden houden hun maat en de balk schuift,
   net als de fotostrook op "Wat we doen". Dat doet photo-strip.js, met de
   klasse .fotostrook--schuift hierboven; de vaste designmaten uit
   case-detail.css blijven dus staan en hoeven hier niet overschreven te
   worden.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   De foutpagina (404)
   --------------------------------------------------------------------------
   Deze pagina rendert bewust zonder header en footer (zie
   src/app/not-found.tsx). Ze leende daarvoor de opmaak van de werkwijzehero,
   en dat ging op drie punten mis — op elk scherm, maar het hardst op een
   telefoon:

   1. De vaste band onder de navigatie (.page::before, bovenaan dit bestand)
      staat op élke pagina en maskeert de content die onder de nav door
      scrollt. Hier was er geen nav om onder door te scrollen, dus die band
      dekte gewoon de eerste 95px van de pagina af (73 op een telefoon): de
      terugkoppeling stond er volledig onder en de bovenkant van de titel
      werd er dwars doorgesneden. Nagemeten: de broodkruimel op y=8, de band
      tot y=73.

   2. .main-wrapper is precies zo hoog als zijn inhoud. Op een pagina met
      drie regels tekst is dat een derde van het scherm, en daaronder keek je
      tegen het donkerder blue-400 van de paginarand aan — twee vlakken met
      een harde naad halverwege het venster. Het lichtblauwe vlak vult nu het
      scherm binnen het kader, net zoals het dat op een telefoon rond de
      navigatie al doet.

   3. De inhoud plakte tegen de bovenrand en de rest van het scherm bleef
      leeg. Nu staat het blok verticaal gecentreerd in dat vlak, met een
      ritme dat meeschaalt met het venster — dezelfde rekenwijze als de
      vloeiende typografie verderop: lineair van de mobiele maat bij 390px
      naar de ontwerpmaat bij 1440px, daarbuiten vastgehouden.

   De klasse .page--404 staat op .page en hangt alles hieronder aan deze ene
   pagina op; geen enkele regel raakt een andere sjabloon.
   ========================================================================== */

/* 1. Geen navigatiebalk, dus ook geen band eronder.
      `content: none` en niet `display: none`: dat laatste laat het pseudo-
      element bestaan (en dus meetellen), dit haalt het weg. */
.page.page--404::before {
  content: none;
}

/* 2. Het lichtblauwe vlak loopt door tot het kader.

      dvh en niet vh: op een telefoon is 100vh de hoogte zónder de
      browserbalken, en daarmee zou het vlak juist een stuk buiten beeld
      lopen en de pagina scrollbaar maken. De vh-regel blijft er als terugval
      voor browsers die dvh niet kennen; die krijgen hooguit een vlak dat te
      ver doorloopt, niet een vlak dat te vroeg stopt.

      20px = het kader van 10px boven en onder (.page__inner-marge). */
.page--404 .main-wrapper {
  min-height: calc(100vh - 20px);
  min-height: calc(100dvh - 20px);
  /* De 12px binnenmarge boven houdt op elke andere pagina de content onder
     de nav vandaan. Zonder nav verschuift hij het gecentreerde blok alleen
     maar een half dozijn pixels omlaag. */
  padding-top: 0;
}

/* 3. De inhoud, verticaal gecentreerd in dat vlak.

      flex: 1 laat <main> het hele vlak vullen — anders zou het centreren
      binnen de hoogte van de tekst zelf gebeuren, wat niets verplaatst.
      width: 100% omdat .main-wrapper zijn kinderen rechts uitlijnt
      (align-items: flex-end); zonder deze regel schuift het blok mee naar de
      rechterkantlijn.

      De horizontale inspringing is --page-padding-x, dezelfde kantlijn als
      elke paginatitel op de site: 16px op een telefoon, meeschalend tot
      120px op de ontwerpbreedte. */
.notfound {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: clamp(32px, 1.4429rem + 2.2857vw, 56px) var(--page-padding-x);
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Tussenruimtes — 390px → 1440px, net als de typografie verderop. */
.notfound__back {
  margin-bottom: clamp(24px, 1.1286rem + 1.5238vw, 40px);
}

.notfound__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  color: var(--green-1200);
  /* De titelbreedte uit het ontwerp. Een redacteur kan hier een langere
     tekst zetten dan "Pagina niet gevonden."; zonder plafond zou die op een
     breed scherm over de volle 2300px lopen. */
  max-width: 1178px;
  margin-bottom: clamp(16px, 0.6286rem + 1.5238vw, 32px);
}

.notfound__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--green-1200);
  max-width: 1059px;
}

/* Waar een bezoeker wél heen kan: de knoppen die het ontwerp al kent
   (.btn uit services.css) — alleen de plaatsing is nieuw. Ze breken af naar
   een volgende regel, want op 320px passen er twee naast elkaar en op de
   ontwerpbreedte alle zes. */
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 1.2214rem + 1.1429vw, 36px);
}

@media (max-width: 920px) {
  /* Het kader is hier 8px en heeft geen onderrand (zie het blok "de
     onderrand van het kader valt op een telefoon buiten het venster"
     verderop). Het vlak loopt dus door tot de onderkant van het scherm, en
     de marge onder .page__inner moet weg — anders zou daar alsnog een
     achtpixels brede strook blue-400 staan waar het ontwerp er geen wil. */
  .page--404 .page__inner {
    margin-bottom: 0;
  }

  .page--404 .main-wrapper {
    min-height: calc(100vh - 8px);
    min-height: calc(100dvh - 8px);
  }

  .notfound__title {
    line-height: 1.1;
  }
}

/* ==========================================================================
   Hoverstaten — het lijntje, de knoppen en de vacaturerijen

   Drie gedragingen uit de hover-annotaties bij het ontwerp. Het geporte
   design had ze geen van drieën: elke link, knop en rij zag er onder de muis
   precies hetzelfde uit als ernaast, waardoor je alleen aan de cursor kon
   zien dat er iets aanklikbaar was.

   Alles staat achter `@media (hover: hover)`. Op een touchscreen bestaat
   "aanwijzen" niet: een tik zou de hoverstaat daar laten hangen tot je
   ergens anders tikt, en op de footerlinks staat op ≤920px sowieso al een
   vaste onderstreping (responsive.css).

   De duur zit in één variabele, zodat "liever geen beweging" hem in één
   keer op nul zet: de eindstaat blijft dan gewoon staan, alleen de weg
   ernaartoe verdwijnt.
   ========================================================================== */
:root {
  --hover-speed: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hover-speed: 0s;
  }
}

/* --------------------------------------------------------------------------
   1. Onderstreping die van links naar rechts verschijnt

   Een ::after van 1px die horizontaal opschaalt. Bij het aanwijzen groeit
   hij vanaf links, bij het weggaan krimpt hij verder wég naar rechts — de
   beweging loopt beide keren dezelfde kant op in plaats van terug te
   stuiteren.

   currentColor: in nav en footer is de tekst groen (green-1200), maar zo
   klopt het lijntje ook als een link ergens anders van kleur is.

   De lijn ligt net onder het tekstvak en dus onder de staartletters — een
   ::after kan, anders dan text-decoration, niet om de j van "Werkwijze" of
   de g van "Gedragscode" heen.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .header__nav-link,
  .header__contact-link,
  .footer__info-text a,
  .footer__bottom-links a,
  /* De cookieknop staat tussen deze links en is een <button>, dus hij valt
     niet onder de a-selectors hierboven. Zonder deze drie regels is hij de
     enige in de rij zonder lijntje. */
  .footer__cookieknop,
  .contact-details__link,
  .collega-detail__contact a {
    position: relative;
  }

  .header__nav-link::after,
  .header__contact-link::after,
  .footer__info-text a::after,
  .footer__bottom-links a::after,
  .footer__cookieknop::after,
  .contact-details__link::after,
  .collega-detail__contact a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--hover-speed) ease;
    pointer-events: none;
  }

  .header__nav-link:hover::after,
  .header__contact-link:hover::after,
  .footer__info-text a:hover::after,
  .footer__bottom-links a:hover::after,
  .footer__cookieknop:hover::after,
  .contact-details__link:hover::after,
  .collega-detail__contact a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  /* De navlinks hebben 12px/16px padding als klikvlak. Zonder deze uitsnede
     werd het lijntje even breed als dat vlak en hing het 12px onder de
     tekst; nu valt het samen met het label. */
  .header__nav-link::after,
  .header__contact-link::after {
    left: 16px;
    right: 16px;
    bottom: 11px;
  }
}

/* --------------------------------------------------------------------------
   2. Knoppen kleuren op hover om

   Het witte vlak wordt groen met witte letters. #017D66 is het groen dat in
   het ontwerp al als accent op de CTA-koppen staat (cta.css, contact.css) —
   green-1200 zou hier bijna zwart uitpakken.

   .btn is dezelfde knop in het klein; die staat alleen op de 404, maar hoort
   zich hetzelfde te gedragen. Label en pijl hebben daar een eigen kleur en
   moeten dus apart mee.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .cta__button,
  .contact-cta__button,
  .btn,
  .btn__label,
  .btn__arrow,
  .expertise-card__btn,
  .expertise-card__btn-label,
  .expertise-card__btn-arrow,
  .insight-share__button {
    transition: background-color var(--hover-speed) ease,
                color var(--hover-speed) ease;
  }

  .cta__button:hover,
  .contact-cta__button:hover,
  .btn:hover {
    background-color: #017D66;
    color: var(--base-100);
  }

  .btn:hover .btn__label,
  .btn:hover .btn__arrow {
    color: var(--base-100);
  }

  /* De deelknoppen onder een artikel zijn dezelfde witte pil. */
  .insight-share__button:hover {
    background-color: #017D66;
    color: var(--base-100);
  }

  /* De knop op de expertisekaart is dezelfde witte pil, maar de link is de
     hele kaart — dus hij kleurt om zodra je de kaart aanwijst, niet pas de
     knop zelf. */
  .expertise-card:hover .expertise-card__btn {
    background-color: #017D66;
  }

  .expertise-card:hover .expertise-card__btn-label,
  .expertise-card:hover .expertise-card__btn-arrow {
    color: var(--base-100);
  }
}

/* --------------------------------------------------------------------------
   3. Vacaturerijen worden donkerder

   De rij neemt het lichtblauw van het pijlvakje over (blue-200) en het
   pijlvakje wijkt uit naar het groen van de knoppen — anders zou het vakje
   in de rij oplossen.

   De pijl zelf is een <img> met een vaste donkergroene vulling; het filter
   maakt hem wit (brightness(0) = zwart met behoud van de vorm, invert(1) =
   wit) zonder een tweede bestand nodig te hebben.

   Twee klassen voor één patroon: .vacature-card staat op Werken bij,
   .vacancy-row in het vacatureblok van Over ons.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .vacature-card,
  .vacancy-row,
  .vacature-card__arrow,
  .vacancy-row__arrow,
  .vacature-card__arrow img,
  .vacancy-row__arrow img {
    transition: background-color var(--hover-speed) ease,
                filter var(--hover-speed) ease;
  }

  .vacature-card:hover,
  .vacancy-row:hover {
    background-color: var(--blue-200);
  }

  .vacature-card:hover .vacature-card__arrow,
  .vacancy-row:hover .vacancy-row__arrow {
    background-color: #017D66;
  }

  .vacature-card:hover .vacature-card__arrow img,
  .vacancy-row:hover .vacancy-row__arrow img {
    filter: brightness(0) invert(1);
  }
}

/* --------------------------------------------------------------------------
   4. Lijntje onder de tekst binnen een grotere link

   Bij een terug-link is niet de tekst de link maar het hele blokje: pijl én
   tekst samen. Het lijntje hoort dan alleen onder het tekstdeel, terwijl het
   aanwijzen op de link eromheen gebeurt. Vandaar de omweg via de ouder in
   plaats van :hover op het element zelf.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .breadcrumb__text,
  .case-breadcrumb__text,
  .insight-breadcrumb__text,
  .themas-breadcrumb__text {
    position: relative;
  }

  .breadcrumb__text::after,
  .case-breadcrumb__text::after,
  .insight-breadcrumb__text::after,
  .themas-breadcrumb__text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--hover-speed) ease;
    pointer-events: none;
  }

  .breadcrumb:hover .breadcrumb__text::after,
  .case-breadcrumb:hover .case-breadcrumb__text::after,
  .insight-breadcrumb:hover .insight-breadcrumb__text::after,
  .themas-breadcrumb:hover .themas-breadcrumb__text::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* --------------------------------------------------------------------------
   5. Caserij in de lijstweergave

   Hier geen lijntje: de kop is 38px en staat in een kolom die de volle
   breedte pakt, dus een onderstreping zou over de hele kolom lopen in plaats
   van onder de woorden. De kop kleurt om naar hetzelfde accentgroen als de
   knoppen — bij deze lettergrootte haalt dat ruim het contrastminimum op het
   blauwe vlak (3.9:1, grens voor grote tekst is 3:1).
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .themas-case__title {
    transition: color var(--hover-speed) ease;
  }

  .themas-case__link:hover .themas-case__title {
    color: #017D66;
  }
}

/* --------------------------------------------------------------------------
   6. Kaarten, paginering en velden

   De collegakaart is een link naar een eigen pagina en krijgt dezelfde
   inzoom als de andere kaarten met beeld. De teamkaart op Over Leene ziet er
   hetzelfde uit maar is géén link — die blijft dus stil, want een kaart die
   beweegt zonder ergens heen te gaan belooft iets wat er niet is.

   De paginaknoppen en de twee velden van het collega-overzicht hadden alleen
   een focusring: met de muis was er geen enkel teken dat je op iets bedienbaars
   stond.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .collega-kaart .team-card__photo img {
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .collega-kaart:hover .team-card__photo img {
    transform: scale(1.04);
  }

  .collegas__pagina,
  .collegas__zoek-veld,
  .collegas__filter-veld {
    transition: background-color var(--hover-speed) ease,
                border-color var(--hover-speed) ease;
  }

  /* De actieve pagina is al donkergroen; die hoeft niet te reageren. */
  .collegas__pagina:not(.collegas__pagina--actief):hover {
    background-color: var(--blue-100);
    border-color: var(--green-1200);
  }

  .collegas__zoek-veld:hover,
  .collegas__filter-veld:hover {
    border-color: var(--green-1200);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .collega-kaart .team-card__photo img {
    transition: none;
  }

  .collega-kaart:hover .team-card__photo img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. Het functiefilter een eigen jasje

   De select had wel een rand en een lettertype uit de huisstijl, maar het
   pijltje kwam van het besturingssysteem — op Windows een grijze driehoek in
   een grijs vakje, op een Mac weer iets anders. Daardoor was dit het enige
   element op de site dat er per computer anders uitzag.

   `appearance: none` haalt dat vakje weg; het pijltje eronder is een eigen
   chevron in de merkkleur, als achtergrond getekend zodat er geen extra
   element omheen hoeft.

   De uitklaplijst bleef daarna nog die van het systeem — met geen enkele
   regel CSS te bereiken. Dat is inmiddels opgelost door de select te
   vervangen door een eigen keuzelijst; zie src/components/site/Keuzelijst.tsx
   en het kopje "Keuzelijst" in sections/over.css. .collegas__filter-veld
   staat sindsdien op een <button>, niet meer op een <select>, en de regels
   hieronder gelden daar net zo goed: een knop heeft `appearance: none` zelfs
   harder nodig, anders tekent Safari er zijn eigen knopvorm omheen.

   Alleen dit veld, niet het zoekveld ernaast: die deelt de rest van de
   opmaak maar heeft geen pijltje nodig.
   -------------------------------------------------------------------------- */
.collegas__filter-veld {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.5 9L12 15.5L18.5 9' stroke='%23004133' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Randloze knop van Firefox op Android en de stippellijn bij focus in oudere
   Firefox-versies; beide zouden over de eigen rand heen komen. */
.collegas__filter-veld::-moz-focus-inner {
  border: 0;
}

/* --------------------------------------------------------------------------
   8. De vacaturesectie op Over Leene op zijn eigen vlak

   Op Werken bij staan de vacaturerijen op een lichte band (blue-100): de rij
   is wit, het pijlvakje blue-200, en bij het aanwijzen wisselen die twee van
   plek. Op Over Leene ontbrak die band op desktop en stond dezelfde rij dus
   rechtstreeks op het paginablauw — en dat páginablauw ís blue-200. Daardoor
   loste het pijlvakje op in de achtergrond (de klantopmerking "kleur button
   vacature valt weg") en verdween bij het aanwijzen de hele witte rij, omdat
   de hoverkleur precies de achtergrondkleur was.

   Het ontwerp doet dit zelf al: op ≤920px heeft .over-vacatures gewoon
   `background: var(--blue-100)` (responsive.css). Hieronder staat niets
   nieuws, alleen diezelfde band op de breedtes waar hij ontbrak. De
   inspringing links en rechts is er al — de sectie loopt boven 920px over de
   volle breedte met var(--page-padding-x) opzij — dus alleen de verticale
   ruimte komt erbij, gelijk aan die van .werkenbij-vacatures__inner.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .over-vacatures {
    background: var(--blue-100);
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* --------------------------------------------------------------------------
   9. Het herobeeld van een case op 16:9

   Het beeld had drie maten: 797px hoog boven 1440px, de verhouding 1180:797
   (≈ 3:2) daaronder, en 278px hoog op mobiel (≈ 5:4). Drie verschillende
   uitsnedes van dezelfde foto dus — wie een beeld uitkiest op de casepagina
   zag op zijn telefoon iets anders dan op zijn laptop.

   Nu overal 16:9, zoals gevraagd. Eén regel is genoeg: dit bestand laadt na
   responsive.css en een mediaquery telt niet mee voor de voorrang, dus deze
   waarden winnen het van alle drie de bereiken.
   -------------------------------------------------------------------------- */
.case-hero-image__img {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   10. Blokken die in beeld schuiven

   De klassen komen van in-beeld.js; daar staat ook waarom het verbergen in
   JavaScript gebeurt en niet hier. Kort: dit bestand wordt eerder geladen
   dan het script draait, dus een blok dat hier al onzichtbaar stond zou bij
   een uitgeschakelde of mislukte scriptlading onzichtbaar blijven.

   De overgang staat op de eindtoestand en niet op de begintoestand, zodat
   het wegzetten zelf niet meebeweegt. Veertien pixels en een halve seconde:
   genoeg om te merken dat er iets aankomt, te weinig om op te wachten.
   -------------------------------------------------------------------------- */
.schuift-in {
  opacity: 0;
  transform: translateY(14px);
}

.schuift-in--binnen {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dubbel op met de check in het script — daar wordt bij "beperk beweging"
   niets verborgen — maar een vangnet voor het geval een blok de klasse toch
   krijgt: dan staat het er gewoon. */
@media (prefers-reduced-motion: reduce) {
  .schuift-in,
  .schuift-in--binnen {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   11. Het logo van 2026

   Thonik leverde het officiële logobestand (assets/images/leene-logo-2026.svg).
   Alle merktekeningen komen daar nu uit: het woordmerk in wordmark.tsx en in
   leene-wordmark.svg, het grote woordmerk in de footer, en het haakje — als
   navicoon en als hoekteken. De paden zijn letterlijk overgenomen, met de
   coördinaten van dat bestand; alleen het kader eromheen (de viewBox) is per
   plek anders.

   Twee verhoudingen veranderen daardoor, en die stonden in de designbestanden
   als vaste getallen:

     woordmerk  488.947 / 124.383  wordt  911.2013 / 233.7535  (3.931 → 3.898)
     haakje      76.222 / 117.478  wordt  147.951 / 230.1408   (0.649 → 0.643)

   Dezelfde letters, alleen strakker gespatieerd: bij gelijke letterhoogte is
   het merk 0,85 procent smaller. Op de header zie je dat niet, in de hero en
   op het woordmerk van een derde paginabreedte in de footer wel. Het haakje
   scheelt 0,9 procent in breedte; dat valt nergens op, maar zonder deze
   correctie zou de tekening in zijn kader gaan zweven (de browser past hem
   passend in en houdt dan een reepje leeg).
   -------------------------------------------------------------------------- */
.header__logo-text,
.hero__title-text,
.mobile-menu__logo-mark,
.footer__leene-text {
  aspect-ratio: 911.2013 / 233.7535;
}

.footer__corner-mark {
  aspect-ratio: 147.951 / 230.1408;
}

/* Vaste kaders in plaats van een verhouding: hoogte aanhouden, breedte
   herrekenen. 30.218 x 0.642876 en 24 x 0.642876. */
.header__lang-icon {
  width: 19.4262px;
}

.mobile-menu__close-icon {
  width: 15.4290px;
}

/* Het haakje naast de herotitel houdt zijn breedte (12.90% van het herokader,
   waar ook de plaatsing rechts aan hangt) en wordt dus een fractie hoger:
   12.90% x 615.693 / 0.642876, uitgedrukt in de 258.366 van dat kader. */
.hero__bracket {
  height: 47.81%;
}

/* --------------------------------------------------------------------------
   12. Het woordmerk in de navigatiebalk stond te laag

   .header__logo is 53px hoog en zette het merk met align-items: flex-end
   onderin. De menu-items ernaast staan gecentreerd in diezelfde 53px, dus het
   merk hing er elf pixels onder — de opmerking "uitlijning logo staat een
   stuk naar beneden".

   Gecentreerd valt het optische midden van het merk samen met dat van de
   menuteksten. Dit is een interpretatie: het ontwerp zou ook de onderlijn van
   het merk op de basislijn van de menu-items kunnen leggen, en dan moet het
   nog eens elf pixels omhoog. Dat staat op de vragenlijst.

   De heromorph op de homepage rekent zijn eindpunt op de gemeten positie van
   dit element (scroll-animation.js meet met getBoundingClientRect), dus die
   verhuist vanzelf mee.
   -------------------------------------------------------------------------- */
.header__logo {
  align-items: center;
}

/* --------------------------------------------------------------------------
   13. De dienstenkaarten dreven naar rechts weg

   .services is de enige sectie die nooit is meegenomen in de twee correcties
   op de kantlijnen (commits "Elke sectie op dezelfde kantlijn" en "Laptop- en
   tabletbereik"). Hij staat nog op justify-content: space-between met de
   kaartkolom rechts uitgelijnd, en dat betekent: de kaart begint op
   vensterbreedte min 850px. Dat schuift dus onbegrensd mee naar rechts.

   Opgemeten, linkerrand van de kaart tegen de tekstkantlijn (x=480 + 10px
   frame = 489):

     1200px    350   139px te ver links
     1339px    489   toevallig goed
     1440px    590   101px te ver rechts
     1920px   1070   581px te ver rechts
     2560px   1710  1221px te ver rechts

   Het bracketlabel stond wél goed, en juist dat maakte het gat zichtbaar.

   Hieronder krijgt de sectie het patroon van .over-geloven en .over-vacatures,
   die exact hetzelfde maatpaar 940/820 gebruiken: labelkolom van 281px, 78px
   ertussen, en de kaarten links in de ruimte die overblijft. 120 + 281 + 78 =
   479, de tekstkantlijn. Onder 1200px gaat het label bovenlangs, zoals de
   andere secties in datzelfde bereik al doen (responsive.css:3019).
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .services {
    justify-content: flex-start;
    gap: 78px;
    padding-right: var(--page-padding-x);
  }

  /* Kindselector: .section-label is een gedeelde klasse die op elke sectie
     staat, en alleen híer hoort hij een vaste kolom te zijn. */
  .services > .section-label {
    flex: 0 0 281px;
  }

  .services__cards {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
    max-width: 940px;
  }

  .services__list {
    justify-content: flex-start;
    max-width: 100%;
  }
}

@media (min-width: 921px) and (max-width: 1199px) {
  .services {
    flex-direction: column;
    gap: 12px;
  }

  .services > .section-label {
    flex: 0 0 auto;
  }

  .services__cards {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   14. Meer lucht tussen de menubalk en de paginatitel

   "De afstand tussen de H1 en de menubalk mag groter. Staat er te krap op."
   Elk sjabloon bepaalde die ruimte zelf, en er stonden vier verschillende
   waarden: 56px (losse pagina's, over, werken bij, wat we doen, thema's),
   80px (contact) en 120px (expertises, vacature).

   Het wordt 120px voor alles. Dat is geen nieuwe maat — twee sjablonen staan
   er al op, en het is dezelfde 120 als de kantlijn --page-padding-x. Niets
   wordt krapper.

   Alleen op desktop: mobiel staat er 32 tot 48px en dat is daar geen klacht.
   Alleen padding-top, want een paar van deze regels zijn als shorthand
   geschreven en zouden anders hun zij- en onderwaarden verliezen.

   Twee sjablonen doen bewust niet mee. De casepagina regelt die ruimte met de
   gap van .case-upper, die óók tussen de broodkruimel en de titel valt, en de
   inzichtpagina met de padding van een gecentreerde tekstkolom naast het
   herobeeld (min-height 575px). Op allebei die plekken is "de ruimte onder de
   nav" geen los getal; die twee hebben eerst een blik nodig.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .page__body,
  .over__body,
  .werkenbij__body,
  .werkwijze__body,
  .themas-page .themas-content,
  .expertises-page .expertises-content,
  .vacancy__body,
  .contact-content {
    padding-top: 120px;
  }
}

/* --------------------------------------------------------------------------
   15. De vormentaal werd bovenaan afgesneden op mobiel

   Op ≤920px liggen de drie kleurbalken van de hero in één grid-cel over
   elkaar (responsive.css:247-263). De 12px die het blok onder de nav hoort te
   houden stond op één balk — .hero__bar--orange — in plaats van op de
   container. Alleen oranje zakte dus, roze en groen bleven tegen de menubalk
   aan staan.

   Opgemeten bij 390px: nav tot 71, oranje begint op 83, roze en groen op 71.
   De vaste lichtblauwe band die 10px vrij houdt loopt tot 81, maar .hero__bars
   staat op z-index 45 en schildert eroverheen. Gevolg: de bovenrand van de
   twee smalste balken verdween tegen de nav, en de vlakke bovenlijn die het
   ontwerp voorschrijft ("All bars share the same flat top edge", hero.css:25)
   klapte om — de breedste balk begon lager dan de smalle erboven.

   De 12px hoort bij het blok, niet bij één balk.

   Naschrift bij het mobiele ontwerp: daar staat de trap strak tegen de
   menubalk aan, zonder tussenruimte. De 12px is dus 0 geworden — de vlakke
   bovenlijn waar het hierboven om ging blijft, want hij geldt nog steeds
   voor alle drie de balken tegelijk. De lichtblauwe band die tijdens het
   scrollen 10px onder de nav vrijhoudt (.page::before) blijft ongemoeid:
   .hero__bars staat op z-index 45 en schildert er in ruststand overheen,
   terwijl de rest van de pagina er wél onder door schuift.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .hero__bars {
    margin-top: 0;
  }

  .hero__bar--orange {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   16. Het mobiele menu telde de ruimte tussen twee items drie keer

   8px padding onder het ene item, 8px gap, 8px padding boven het volgende:
   samen 24px tussen twee regels van 48,4px hoog. De interlinie zelf (1.1) is
   prima, de lucht eromheen niet — vandaar "menuitems staan te ver uit elkaar".

   De steek gaat van 72,4px naar 56,4px. Verder omlaag kan, maar niet onder
   padding 0: dan wordt het aanraakvlak 48,4px en dat nadert de ondergrens van
   44px uit WCAG 2.5.5.
   -------------------------------------------------------------------------- */
.mobile-menu__nav {
  gap: 0;
}

.mobile-menu__link {
  padding: 4px 0;
}

/* --------------------------------------------------------------------------
   17. De caselijst kreeg lucht

   "Iets meer afstand tussen de cases. Witte balkje met opdrachtgever ietsjes
   verder vanaf de kop. En aan de rechterkant iets ruimer in z'n vlak."

   Drie maten, alle drie uit themas.css: 20px padding boven en onder een
   caserij (samen 40px tussen twee cases), 4px tussen het balkje en de kop, en
   6,909px padding links en rechts in het balkje — waardoor de naam van de
   opdrachtgever hard tegen de rechterrand stond.

   Wordt: 64px tussen twee cases, 14px onder het balkje, en rechts 14px in het
   balkje. Links blijft 7px, want daar staat het ronde logo dat zijn eigen
   rand al meebrengt.

   De eerste en de laatste rij houden hun kale kant: die regels staan in
   themas.css op de oude 20px en zouden anders de nieuwe 32px aanhouden,
   waardoor het lijstje boven en onder uit zijn kolom loopt.

   Alleen desktop. Op mobiel is dit een heel andere kaart: daar ligt het
   balkje absoluut op de foto en is de padding nul.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .themas-case__link {
    padding: 32px 0;
    gap: 14px;
  }

  .themas-case:first-child .themas-case__link {
    padding-top: 0;
  }

  .themas-case:last-child .themas-case__link {
    padding-bottom: 0;
  }

  .themas-case__chip {
    padding: 0 14px 0 7px;
  }
}

/* --------------------------------------------------------------------------
   18. De CTA-knop was mobiel zwaarder dan elders

   .cta__button staat op desktop op medium (cta.css:46) en de knop op de
   contactpagina ook, maar responsive.css:646 zet dezelfde knop op ≤920px op
   semibold. Twee knoppen die hetzelfde zijn liepen daardoor mobiel uit elkaar,
   en de klant vroeg dit gewicht expliciet overal door te voeren.

   Let op: zolang WFAprello-Medium ontbreekt tekent de browser 500 als Regular.
   Deze knop wordt mobiel dus eerst lichter dan hij was, en pas zoals bedoeld
   zodra dat fontbestand er is.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .cta__button {
    font-weight: var(--fw-medium);
  }
}

/* --------------------------------------------------------------------------
   19. Adresregel naar de kaart

   Het contactblok kan een regel als kaartlink tonen (zie ContactBlock). De
   tekst en het icoon staan op één regel; het icoon schaalt met de tekst mee
   (0.7em van de 26px waarop deze regels staan) en erft de kleur van de link,
   zodat de twee niet uit elkaar kunnen lopen.
   -------------------------------------------------------------------------- */
.contact-details__link--kaart {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.contact-details__kaart-icoon {
  width: 0.7em;
  height: 0.7em;
  flex-shrink: 0;
  /* Optisch op de regel: een pictogram met een vierkante omtrek zakt anders
     net onder de basislijn van de letters ernaast. */
  transform: translateY(0.04em);
}

/* ==========================================================================
   20. Fluid typografie — de maat groeit mee met het venster

   Het ontwerp kent twee artboards, 390 en 1440px, en de site zette die twee
   maten hard naast elkaar: tot 920px de mobiele, daarboven de desktopmaat.
   Op 921px sprong een paginatitel dus van 44 naar 96px, en bleef daar staan
   tot in het oneindige — op een laptop van 1024px stond dezelfde 96px als op
   een scherm van 2560px. Dat is de klacht "dit is te lomp".

   Elke maat hieronder loopt nu lineair van de mobiele waarde bij 390px naar
   de ontwerpwaarde bij 1440px. Buiten dat bereik houdt clamp() hem vast: op
   een telefoon van 360px staat de mobiele maat, boven 1440px de
   ontwerpmaat. Op de twee artboards staat er dus exact wat Thonik tekende;
   ertussen wordt geïnterpoleerd in plaats van gesprongen.

   Alle waarden zijn uitgerekend, niet geschat: helling = (desktop − mobiel) /
   (1440 − 390), en het rem-deel is de mobiele maat minus die helling maal 390.
   In rem en niet in px, zodat een grotere standaardletter in de browser blijft
   werken.

   Letterspatiëring in em in plaats van px. Het ontwerp geeft die per artboard
   in pixels, en dat klopt alleen bij de maat waarvoor hij getekend is: −2,88px
   hoort bij 96px (drie procent van de letterhoogte), maar op een titel die op
   een laptop 70px is, is dezelfde 2,88px veel te strak. In em blijft de
   verhouding overal kloppen. Regelhoogtes zijn met rust gelaten: die staan
   als verhouding genoteerd en schalen dus al mee.

   Wat bewust vast blijft staan: het bracketteken van de sectielabels (26px op
   beide artboards), de labeltekst en de deelknoppen (18px op beide), de
   velden van het collega-overzicht (16px — kleiner laat iOS bij focus
   inzoomen), de menubalk (16px, mobiel verborgen) en het mobiele uitklapmenu
   (44px, bestaat alleen daar).

   Meegenomen: elf selectoren die helemaal geen mobiele maat hadden en dus tot
   920px op hun desktopmaat bleven staan — de drie broodkruimeltitels (de
   mobiele regel richtte zich op de wrapper in plaats van op de tekst), het
   onderschrift van de werkwijzefoto's, en de zeven platformtoevoegingen rond
   het collega-overzicht die nooit door het mobiele designblok zijn gelopen.
   ========================================================================== */
/* Paginatitel — 44/96 */
.case-hero__title,
.contact-content__title,
.expertises-hero__title,
.notfound__title,
.over-hero__title,
.themas-hero__title,
.vacancy-hero__title,
.werkenbij-hero__title,
.werkwijze-hero__title {
  font-size: clamp(2.75rem, 1.5429rem + 4.9524vw, 6rem);
  letter-spacing: -0.03em;
}

/* Artikeltitel — 44/76 */
.insight-hero__title {
  font-size: clamp(2.75rem, 2.0071rem + 3.0476vw, 4.75rem);
  letter-spacing: -0.03em;
}

/* Introzin — 34/48 */
.intro__text {
  font-size: clamp(2.125rem, 1.8rem + 1.3333vw, 3rem);
  letter-spacing: -0.02em;
}

/* Afsluitende kop — 28/48 */
.cta__heading {
  font-size: clamp(1.75rem, 1.2857rem + 1.9048vw, 3rem);
  letter-spacing: -0.03em;
}

/* Kop van het caseresultaat — 28/46 */
.case-result__heading {
  font-size: clamp(1.75rem, 1.3321rem + 1.7143vw, 2.875rem);
  letter-spacing: -0.02em;
}

/* Subtitel en citaat — 22/38 */
.case-hero__subtitle,
.client-item__quote,
.contact-cta__heading,
.expertises-hero__subtitle,
.notfound__text,
.over-hero__subtitle,
.themas-case__title,
.themas-hero__subtitle,
.werkenbij-hero__subtitle,
.werkwijze-hero__subtitle {
  font-size: clamp(1.375rem, 1.0036rem + 1.5238vw, 2.375rem);
  letter-spacing: -0.02em;
}

/* Kaartkop groot — 22/32 */
.insight-content__heading,
.service-card__title {
  font-size: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem);
  letter-spacing: -0.025em;
}

/* Kaartkop — 22/30 */
.expertise-card__title,
.value-card__title,
.werkenbij-usp__card-title {
  font-size: clamp(1.375rem, 1.1893rem + 0.7619vw, 1.875rem);
  letter-spacing: -0.02em;
}

/* Lopende tekst groot — 20/30 */
.case-content-row__body p,
.case-quote__body p,
.over-geloven__closing,
.over-team__intro-text,
.over-waarom__text,
.themas-intro__body p,
.werkenbij-seek__text,
.werkwijze-clients__text {
  font-size: clamp(1.25rem, 1.0179rem + 0.9524vw, 1.875rem);
  letter-spacing: -0.015em;
}

/* Toelichting bij het caseresultaat — 20/26 */
.case-result__heading-desc {
  font-size: clamp(1.25rem, 1.1107rem + 0.5714vw, 1.625rem);
}

/* Contactgegevens — 18/26 */
.contact-details__value,
.contact-details__link {
  font-size: clamp(1.125rem, 0.9393rem + 0.7619vw, 1.625rem);
}

/* Kaarttitel — 18/24 */
.insight-card__title,
.themas-insight__title {
  font-size: clamp(1.125rem, 0.9857rem + 0.5714vw, 1.5rem);
  letter-spacing: -0.03em;
}

/* Lopende tekst — 18/22 */
.case-section-label__text,
.expertises-section__label-text,
.insight-content__section > p,
.insight-content__text p,
.insight-content__list-item p,
.page--werkenbij .section-label__text {
  font-size: clamp(1.125rem, 1.0321rem + 0.381vw, 1.375rem);
  letter-spacing: -0.005em;
}

/* Naam bij een logo — 15/20 */
.client-item__name,
.themas-case__name {
  font-size: clamp(0.9375rem, 0.8214rem + 0.4762vw, 1.25rem);
  letter-spacing: -0.005em;
}

/* Bijschrift — 15/18 */
.case-meta__client-label,
.case-meta__client-name,
.collega-detail__contact a,
.collegas__leeg,
.cta__button,
.expertise-card__desc,
.insight-hero__author-name,
.insight-hero__author-role,
.insight-hero__date,
.insights-index__empty,
.service-card__desc,
.team-card__name,
.vacancy-row__title,
.vacature-card__title,
.value-card__desc,
.werkenbij-usp__card-desc {
  font-size: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);
}

/* Contactgegevens in de footer — 15/16 */
.footer__info-text {
  font-size: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);
}

/* Broodkruimel — 14/18 */
.breadcrumb__text,
.case-breadcrumb__text,
.insight-breadcrumb__text,
.themas-breadcrumb__text {
  font-size: clamp(0.875rem, 0.7821rem + 0.381vw, 1.125rem);
}

/* Klein bijschrift — 13/15 */
.btn__label,
.collegas__veld-label,
.expertise-card__btn-label,
.insight-card__date,
.team-card__role,
.themas-insight__date,
.themas-photo__caption,
.werkwijze-photos__caption span {
  font-size: clamp(0.8125rem, 0.7661rem + 0.1905vw, 0.9375rem);
  letter-spacing: 0.02em;
}

/* Pijl naast een knoplabel — 16/18 */
.btn__arrow,
.expertise-card__btn-arrow {
  font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
}

/* Maten die op zichzelf staan. */
/* Vacaturesubtitel — springt verder dan de andere subtitels — 18/38 */
.vacancy-hero__subtitle {
  font-size: clamp(1.125rem, 0.6607rem + 1.9048vw, 2.375rem);
}

/* Biotekst van een collega — 18/30 */
.collega-detail__bio {
  font-size: clamp(1.125rem, 0.8464rem + 1.1429vw, 1.875rem);
}

/* Vacaturetekst — 18/30 */
.vacancy-text-section__text {
  font-size: clamp(1.125rem, 0.8464rem + 1.1429vw, 1.875rem);
}

/* Resultaatregel van een case — 20/22 */
.case-result__item-text {
  font-size: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);
}

/* Label boven contactgegevens — mobiel een kapitaallabel, desktop een kop — 13/26 */
.contact-details__label {
  font-size: clamp(0.8125rem, 0.5107rem + 1.2381vw, 1.625rem);
}

/* --------------------------------------------------------------------------
   21. Beeldstroken schalen mee met het venster

   Dezelfde klacht als bij de typografie, maar dan voor beeld: "ook de
   afbeeldingen in die carrousels graag fluid — proportioneel schalen met je
   browser in plaats van statisch één formaat."

   Boven 920px stonden alle zes de stroken op vaste pixelmaten uit het
   ontwerp. Een foto van 718 bij 573 was dus even groot op een laptop van
   1024px als op een scherm van 2560px: op de laptop vulde hij bijna het hele
   venster, op het grote scherm was hij een postzegel in het midden.

   Elke maat is hier dezelfde maat, maar uitgedrukt als aandeel van de
   vensterbreedte, geijkt op het artboard van 1440px: 718px is 49,8611vw, 573px
   is 39,7917vw, enzovoort. Op 1440px staat er dus precies wat er stond — geen
   enkele pixel verschil — en daarbuiten groeit of krimpt het mee.

   Mobiel blijft ongemoeid: onder 920px staan deze stroken al in vw (101vw,
   84,5vw, 75vw), want daar toont het ontwerp één foto tegelijk met de buren
   die net gluren. Dat is een andere compositie, geen andere maat.

   De schuivende stroken (photo-strip.js) blijven werken: die vergelijken de
   inhoud met de ruimte eromheen, en beide schalen nu even hard mee.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* Werkwijzestrook — 718/679 breed, 573 hoog */
  .werkwijze-photos__item {
    flex: 0 0 min(718px, 49.8611vw);
  }

  .werkwijze-photos__item:last-child {
    flex: 0 0 min(679px, 47.1528vw);
  }

  .fotostrook--schuift .werkwijze-photos__item,
  .fotostrook--schuift .werkwijze-photos__item:last-child {
    flex: 0 0 min(718px, 49.8611vw);
  }

  .werkwijze-photos__image {
    height: min(573px, 39.7917vw);
  }

  /* Vacaturefoto's — bovenrij vult de breedte, onderrij vaste kaders */
  .vacancy-photos__item {
    height: min(759px, 52.7083vw);
  }

  .vacancy-photos--bottom .vacancy-photos__item {
    flex: 0 0 min(477px, 33.125vw);
    height: min(533px, 37.0139vw);
  }

  .vacancy-photos--bottom .vacancy-photos__item--first {
    flex: 0 0 min(504px, 35vw);
  }

  /* Beeldbalk van een case — 820/410 breed, 540 hoog */
  .case-gallery {
    height: min(540px, 37.5vw);
  }

  .case-gallery__item--large {
    width: min(820px, 56.9444vw);
    height: min(540px, 37.5vw);
  }

  .case-gallery__item--medium {
    width: min(410px, 28.4722vw);
    height: min(540px, 37.5vw);
  }

  /* Themafoto's — drie eigen breedtes, één hoogte */
  .themas-photo--1 .themas-photo__image {
    width: min(571px, 39.6528vw);
  }

  .themas-photo--2 .themas-photo__image {
    width: min(848px, 58.8889vw);
  }

  .themas-photo--3 .themas-photo__image {
    width: min(679px, 47.1528vw);
  }

  .themas-photo__image {
    height: min(573px, 39.7917vw);
  }

  /* Sfeerbeelden op Over Leene: de hoogte volgt de breedte.

     Deze drie staan als enige strook op aandelen (flex: 718/777/679 met
     basis 0), dus ze vullen de rij en zijn op 1440px elk zo'n 373 tot 404
     breed. De hoogte stond daarnaast vast op 759px, de maat uit het ontwerp
     die bij een foto van 718 breed hoort. Zo werd elke foto twee keer zo
     hoog als breed, terwijl het ontwerp — en de mobiele weergave, die wel
     op verhoudingen staat — vierkante tot liggende beelden tekent.

     Met de ontwerpverhouding per beeld volgt de hoogte de breedte, komen de
     drie automatisch op gelijke hoogte uit (dezelfde noemer, aandelen in
     dezelfde verhouding) en klopt de uitsnede op elke schermbreedte. */
  .over-photos__item {
    height: auto;
  }

  .over-photos__item--left {
    aspect-ratio: 718 / 759;
  }

  .over-photos__item--center {
    aspect-ratio: 777 / 759;
  }

  .over-photos__item--right {
    aspect-ratio: 679 / 759;
  }

  /* Sfeerbeelden op Werken bij: dezelfde drie beelden als op Over Leene, en
     nu ook dezelfde rij.

     Ze stonden hier in vaste kaders naast elkaar (718 + 777 + 679, met alleen
     links een kantlijn): samen 2194px, terwijl er op een venster van 1440px
     maar 1300 overblijft. De derde foto stond dus altijd buiten beeld en de
     tweede werd doormidden gesneden door de overflow: hidden van .werkenbij —
     precies waar de vensterrand toevallig viel, en dus op elke breedte weer
     ergens anders. Anders dan de werkwijzestrook schuift deze rij niet: hij
     staat niet in photo-strip.js, dus er was ook geen weg naar wat je niet
     zag.

     Op aandelen vullen de drie samen de rij tussen de kantlijnen, op elke
     breedte. De verhouding per beeld komt uit het ontwerp, dus de hoogte volgt
     de breedte; de noemer is voor alle drie 759, waardoor ze automatisch op
     gelijke hoogte uitkomen — ook als een redacteur er een foto uit haalt.
     Zie de toelichting bij .over-photos hierboven. */
  .werkenbij-photos {
    justify-content: center;
    padding-right: var(--page-padding-x);
  }

  .werkenbij-photos__item {
    flex: 718 0 0;
    min-width: 0;
    height: auto;
    aspect-ratio: 718 / 759;
  }

  .werkenbij-photos__item:nth-child(2) {
    flex: 777 0 0;
    aspect-ratio: 777 / 759;
  }

  .werkenbij-photos__item:last-child {
    flex: 679 0 0;
    aspect-ratio: 679 / 759;
  }
}

/* --------------------------------------------------------------------------
   22. Stroken worden carrousels

   De stroken schoven al — met een trackpad of een veeg — maar niets vertelde
   dat. Met een muis was er niets om te pakken en geen enkel teken dat er meer
   stond dan wat je zag: je zag een halve kaart aan de rand en dacht dat het
   stuk was.

   photo-strip.js zet elke schuifbare strook nu in een houder en hangt er twee
   knoppen aan. Ze staan er alleen als er werkelijk iets buiten beeld valt en
   verdwijnen zodra het venster breed genoeg is. Het witte vlak met de groene
   pijl is dezelfde knop als het pijlvakje van een vacaturerij, inclusief de
   hover.

   De knoppen liggen ín de strook, niet ernaast: de stroken lopen tot aan de
   kantlijn en er is geen ruimte naast zonder de compositie te verschuiven.
   -------------------------------------------------------------------------- */
.fotostrook {
  position: relative;
  width: 100%;
}

/* De kaartstrook op een themapagina is een flexkolom binnen een rij met een
   labelkolom ernaast; de houder moet die rol overnemen, anders krimpt hij tot
   de breedte van zijn inhoud. */
.themas-insights__inner > .fotostrook {
  flex: 1 0 0;
  min-width: 0;
}

.fotostrook__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  padding: 0;
  background: var(--base-100);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(0, 65, 51, 0.18);
  cursor: pointer;
  transition: background-color var(--hover-speed) ease,
              opacity var(--hover-speed) ease;
}

.fotostrook__knop img {
  width: 24px;
  height: 24px;
  transition: filter var(--hover-speed) ease;
}

.fotostrook__knop--terug {
  left: 16px;
}

.fotostrook__knop--verder {
  right: 16px;
}

/* Aan het eind van een kaartstrook valt de knop weg in plaats van dat hij
   grijs blijft staan: er is niets meer om heen te gaan. */
.fotostrook__knop[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .fotostrook__knop:hover {
    background-color: #017D66;
  }

  .fotostrook__knop:hover img {
    filter: brightness(0) invert(1);
  }
}

/* --------------------------------------------------------------------------
   23. Kaartstroken stopten op 1420px

   Twee secties met kaarten hielden boven 1440px hun ontwerpbreedte aan: de
   inzichtenstrook (max-width 1420px) en dezelfde strook op een themapagina
   (width 1420px). Op een breed scherm eindigde de strook dus halverwege het
   venster, met een afgekapte kaart aan de rand en daarnaast een leeg blauw
   vlak van soms wel duizend pixels.

   Dezelfde correctie als het 1441px-blok in responsive.css al voor zeven
   andere secties doet: volle breedte met de kantlijn als padding. De kaarten
   zelf zijn hierboven afgetopt op hun ontwerpmaat, dus er passen er meer
   naast elkaar in plaats van dat er twee uitdijen.
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  .insights__layout {
    max-width: none;
  }

  .themas-insights__inner {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   24. De strook "Onze experts vertellen" onder een artikel

   Dezelfde kwaal als hierboven, maar met een eigen constructie: de
   kaartkolom stond vast op 819px en de strook daarbinnen op 938px — 119px
   breder dan zijn kolom, zodat hij rechts uit de kolom liep en de 120px
   padding van de sectie opvulde. Een trucje uit het ontwerp om de strook
   tot aan de kantlijn te laten doorlopen.

   Boven 1440px hield die vaste 819px de strook halverwege het venster
   tegen: drie kaarten waarvan de derde was afgekapt, en daarnaast een leeg
   blauw vlak. Nu vult de kolom de ruimte die de labelkolom overlaat, en
   levert de padding van de sectie zelf de kantlijn rechts — dan is het
   trucje ook niet meer nodig.

   Op de ontwerpbreedte verandert er niets: 1420 min 240 padding min 283
   label min 77 gap is 820, precies de strook uit het ontwerp.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .insight-related__cards {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
  }

  .insight-related__cards-inner {
    width: 100%;
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   25. De laatste twee sjablonen krijgen ook lucht onder de menubalk

   Bij sectie 14 bleven de case- en de inzichtpagina buiten schot, omdat daar
   geen body-wrapper met een padding-top zit. Nagekeken: op allebei staat de
   navigatie ín de heroblok-wrapper (.case-upper en .insight-upper, zie
   CaseHeroBlock en InsightHeroBlock), en is de ruimte eronder dus de gap van
   die wrapper. Daarmee is het net zo eenduidig als bij de andere acht.

   De casepagina heeft die gap al, op 56px — dezelfde waarde die de andere
   sjablonen hadden. De inzichtpagina heeft er geen; daar staat de ruimte als
   padding ín de tekstkolom, die naast het herobeeld verticaal gecentreerd is
   en een vaste hoogte heeft. Die kolom laten we met rust: een gap boven de
   hele hero schuift tekst én beeld samen omlaag, zonder aan de compositie te
   komen. 50 uit de kolom plus 70 hier is dezelfde 120 als elders.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  .case-page .case-upper {
    gap: 120px;
  }

  .insight-upper {
    gap: 70px;
  }
}

/* --------------------------------------------------------------------------
   26. Een link in lopende tekst was niet te zien

   global.css zet `a { color: inherit; text-decoration: none }` — logisch voor
   een site waarin bijna elke link een kaart, een knop of een menu-item is.
   Maar een redacteur kan in elk tekstveld een link zetten (kses.ts laat <a>
   toe), en die kwam er dus uit als gewone tekst: geen kleur, geen streep,
   niets. Alleen .vacancy-link had een onderstreping, en die vraagt om een
   klasse die je met de hand moet meegeven.

   Onderstreept dus, in de tekstblokken waar redactie-inhoud landt, en bij het
   aanwijzen kleurt hij om naar het accentgroen. Geen schuivend lijntje hier:
   dat werkt met een ::after, en een link in lopende tekst kan over twee
   regels breken — dan zou de lijn over de volle breedte van het blok lopen in
   plaats van onder de woorden.
   -------------------------------------------------------------------------- */
.case-content-row__body a,
.case-quote__body a,
.over-geloven__closing a,
.over-team__intro-text a,
.over-waarom__text a,
.themas-intro__body a,
.werkenbij-seek__text a,
.werkwijze-clients__text a,
.insight-content__text a,
.insight-content__list-item a,
.insight-content__section > p a,
.vacancy-text-section__text a,
.vacancy-list a,
.vacancy-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--hover-speed) ease,
              text-decoration-color var(--hover-speed) ease;
}

@media (hover: hover) {
  .case-content-row__body a:hover,
  .case-quote__body a:hover,
  .over-geloven__closing a:hover,
  .over-team__intro-text a:hover,
  .over-waarom__text a:hover,
  .themas-intro__body a:hover,
  .werkenbij-seek__text a:hover,
  .werkwijze-clients__text a:hover,
  .insight-content__text a:hover,
  .insight-content__list-item a:hover,
  .insight-content__section > p a:hover,
  .vacancy-text-section__text a:hover,
  .vacancy-list a:hover,
  .vacancy-link:hover {
    color: #017D66;
  }
}


/* --------------------------------------------------------------------------
   27. De heromorph schoof over de blauwe paginarand heen

   Het witte titelblok staat op z-index 901 — bewust boven de vaste nav, want
   anders zou het woordmerk halverwege de morph achter de ondoorzichtige
   navbalk verdwijnen in plaats van erin te landen. Maar 901 is óók boven de
   blauwe rand van de pagina (.page::after, z-index 50), en dat blok is aan
   het eind van de morph groter dan het navlogo waar het op landt: de bovenkant
   steekt er een stuk bovenuit. Op desktop viel dat net binnen de navbalk
   (blok eindigt op 24px, nav begint op 22px); op een telefoon liep het er
   zo'n 26px overheen, dwars over de rand en het scherm af.

   Het is geen kwestie van de morph anders laten eindigen — het blok hóórt
   groter te zijn dan het logo, dat is precies wat er wegkrimpt. De rand hoort
   er alleen altijd overheen te liggen. Die stond op 50 met de toelichting
   "boven de scroll-geanimeerde elementen (hero title z-index 20)"; die 20 is
   later 901 geworden en toen won de rand niet meer.

   950: boven het titelblok (901) en de nav (900), onder de sprongverwijzing
   (1000) en het mobiele menu (2000). De rand en de nav overlappen elkaar
   nergens — de nav staat er met 8px (mobiel) of 10px (desktop) binnen — dus
   voor de navbalk verandert er niets.
   -------------------------------------------------------------------------- */
.page::after {
  z-index: 950;
}


/* --------------------------------------------------------------------------
   28. Artikelband zonder deelbalk

   De artikelband (.insight-article) is het enige blok dat koppen, alinea's
   en opsommingen door elkaar mag zetten, dus hij draagt ook de teksten die
   geen artikel zijn: de privacy- en cookieverklaring. Daar valt de deelbalk
   weg en houdt een lege kolom de tekstkantlijn vast (zie de toelichting bij
   InsightArticleBlock).

   Vanaf 1200px is dat precies wat er moet gebeuren: de kolom is 253px breed
   en de gap 107px, samen de 360px waar de tekst van het ontwerp begint.
   Daaronder gaan de kolommen onder elkaar staan (.insight-article__inner
   wordt een kolom met gap 48px) en is de kantlijn er niet meer — dan is de
   lege kolom alleen nog een gat van 48px onder de tekst. Vandaar weg.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .insight-share--leeg {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   29. De USP-kaart liep op een telefoon buiten zijn kader

   Een kaart op /werken-bij zet de kop en de omschrijving naast elkaar, ook op
   een telefoon. Beide kolommen staan op `flex: 1 0 0` — groeien mag, krimpen
   niet. Zolang er ruimte is klopt dat; op 390px is de inhoud samen breder dan
   de kaart en dan is er geen krimp om op terug te vallen. De kaart liep zo
   37px buiten de sectie, en omdat .main-wrapper afkapt verdween dat stuk
   tekst zonder schuifbalk. De responsive-audit vond het als enige overgebleven
   uitlijningsprobleem over twaalf pagina's en elf breedtes.

   Krimpen toestaan is genoeg. Op desktop verandert er niets: met flex-basis 0
   en groeifactor 1 verdelen twee kolommen de ruimte precies zoals eerst, en
   krimp treedt alleen op zodra die ruimte er niet is. De min-width: 0 hoort
   erbij — zonder die regel houdt een flexitem zijn min-content breedte aan en
   krimpt hij alsnog niet onder het langste woord.
   -------------------------------------------------------------------------- */
.werkenbij-usp__card-title,
.werkenbij-usp__card-desc {
  flex-shrink: 1;
  min-width: 0;
}


/* --------------------------------------------------------------------------
   30. Achtergrondkleur per blok

   "De mogelijkheid om de achtergrondkleur van de componenten aan te passen
   tussen de twee tinten blauw." Het veld staat op elk blok (zie
   ACHTERGROND_VELD in de registry); BlockRenderer zet de gekozen waarde als
   data-attribuut op een wrapper met display:contents, en die wrapper valt uit
   de layout weg. Wat overblijft is deze selector: het kind van die wrapper is
   het blok zelf.

   Twee waarden, dezelfde die de site al overal gebruikt — blue-100 is de
   lichte band (achttien keer in het ontwerp), blue-200 de donkere (twaalf
   keer). Geen derde kleur erbij verzinnen: het gaat om schuiven tussen de
   twee tinten die er zijn.

   Alleen de kleur; de lucht eromheen staat hieronder bij regel 31.
   -------------------------------------------------------------------------- */
[data-leene-achtergrond="licht"] > * {
  background-color: var(--blue-100);
}

[data-leene-achtergrond="donker"] > * {
  background-color: var(--blue-200);
}


/* --------------------------------------------------------------------------
   31. Lucht rond een gekleurd blok

   Een kleur zonder ruimte is onbruikbaar: "er zit vrijwel geen marge in het
   component waardoor de functionaliteit onbruikbaar is. Ik heb geprobeerd
   met wat <br><br> wat marge te geven als tijdelijke oplossing, wat werkt
   voor de body copy maar de titel/bracket heeft nog steeds te weinig
   margin." Precies dat: het vlak lag strak om de letters, en een bracketlabel
   dat tegen de bovenrand van zijn eigen kleurvlak staat leest als een fout.

   De meeste blokken tekenen in het ontwerp geen band: ze staan los op de
   achtergrond van de pagina en hebben daarom nul verticale padding. Krijgen
   ze een kleur, dan moet die ruimte er alsnog komen. Veertig pixels boven en
   onder; mobiel 24, in lijn met de andere banden onder 920px.

   Welke blokken dit krijgen bepaalt BlockRenderer en niet de CSS: daar staat
   opgemeten welke blokken hun eigen band al meebrengen (zie
   BLOKKEN_MET_EIGEN_BAND). Die houden hun eigen inspringing — de 120px van
   .case-result hoort 120px te blijven. Alleen blokken zonder eigen band
   krijgen data-leene-band="lucht".

   Twee attributen in de selector, en dat is geen sierlijkheid: mobiel staat
   er voor sommige blokken een regel als `.case-page .cta { padding: 0 16px
   48px }`. Dat is een shorthand met twee klassen, en met één attribuut erbij
   zou die de lucht aan de bovenkant weer wegpoetsen. Met beide attributen
   weegt deze regel even zwaar en wint hij op volgorde — dit bestand wordt
   als laatste geladen.

   Alléén verticaal. De inspringing links en rechts staat per blok al goed en
   schaalt in responsive.css mee met de vensterbreedte; boven 1441px haalt
   dat bestand hem voor sommige blokken rechts juist weg omdat de tekstkolom
   daar zijn eigen breedte houdt. Een shorthand `padding` hier zou die
   uitzonderingen overschrijven en een band aan één kant 120px laten
   inspringen die er niet hoort. Zo volgt elk blok horizontaal exact zichzelf,
   met of zonder kleur.
   -------------------------------------------------------------------------- */
[data-leene-achtergrond][data-leene-band="lucht"] > * {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Het tekstblok deelt zijn klassen met .over-waarom en erft daarmee de
   labelkolom, de fluid tekstmaat en het mobiele gedrag (zie TekstblokBlock).
   Wat alleen voor dít blok geldt hangt aan .tekstblok, zodat het
   "waarom"-blok er niets van merkt: de knop krijgt lucht boven zich —
   dezelfde 24px die de sectielinks onder "Laatste inzichten" aanhouden,
   zodat een knop overal op de site op dezelfde afstand van zijn tekst
   staat. */
.tekstblok .section-cta {
  margin-top: 24px;
}

@media (max-width: 920px) {
  [data-leene-achtergrond][data-leene-band="lucht"] > * {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .tekstblok .section-cta {
    margin-top: 12px;
  }
}


/* --------------------------------------------------------------------------
   32. Recent werk: blauw in rust, de rest uitgegrijsd

   Twee dingen uit dezelfde regel feedback: "de standaard achtergrondkleur bij
   non-hover mag blauw zijn, en de cases waar de hover niet op staat mogen
   greyed out zijn."

   De sectie stapelt vier kleurvlakken — roze, groen, geel, blauw — met blauw
   bovenop. Wie een rij aanwijst, laat blauw (en zo nodig geel en groen) in
   het beeld wegklappen, waardoor de kleur van díe klant vrijkomt. Alleen: de
   ruststand wees al een klant aan, want zonder dat bleef de sectie zonder
   muis leeg (zie ClientsBlock). Gevolg was dat je bij binnenkomst nooit
   blauw zag maar altijd het geel van de eerste klant.

   Het script zet nu data-hover zolang er iemand aanwijst. Zonder dat
   attribuut — bij binnenkomst, na het verlaten van de lijst, op een
   touchscreen, en zonder JavaScript — ligt blauw weer dicht. Welke klant er
   inhoudelijk aan staat verandert daar niet door: naam, citaat en beeld van
   de eerste rij blijven staan, dus de toegankelijkheidsfix blijft heel.

   Uitgegrijsd is hier doorzichtigheid en geen grijstint: de palette heeft er
   geen, en achter deze rijen liggen vier verschillende kleuren. Met opacity
   klopt het op alle vier; een vaste grijswaarde zou dat op drie ervan niet
   doen. Alleen op desktop — onder 920px toont het ontwerp elke rij voluit en
   valt er niets aan te wijzen.
   -------------------------------------------------------------------------- */
.clients:not([data-hover]) .clients__bg--blue {
  clip-path: inset(0 0 0 0);
}

@media (min-width: 921px) {
  /* Dezelfde variabele als de rest van de hoverstaten, dus "liever geen
     beweging" zet ook deze overgang op nul en blijft de eindstaat staan. */
  .client-item {
    transition: opacity var(--hover-speed) ease;
  }

  .client-item:not(.is-active) {
    opacity: 0.45;
  }
}


/* --------------------------------------------------------------------------
   33. Eén blok als voorvertoning

   /preview/blok/<type> rendert één sectie voor de sectiekiezer in het beheer
   (zie voorbeeld.ts). De .page-wrapper blijft eromheen staan, want een deel
   van de opmaak hangt eraan — de afbreekregels voor redactietekst, het kader
   om beelden, de focusring. Wat er níét omheen hoort is het meubilair van een
   echte pagina:

    · ::before is een vaste blauwe balk van 95px die op de site achter de
      navigatie ligt. Zonder navigatie legt hij zich over de bovenkant van het
      blok heen, en op een kaartje van driehonderd pixels is dat precies het
      stuk dat je wilde zien.
    · ::after tekent de blauwe paginarand. Een rand om een thumbnail suggereert
      dat hij bij het blok hoort; dat doet hij niet.
    · De marge van 10px en de blauwe ondergrond eronder zijn datzelfde kader.
    · .main-wrapper lijnt zijn kinderen rechts uit — op de site onzichtbaar
      omdat elke sectie de volle breedte pakt, maar een blok dat dat niet doet
      hangt in de voorvertoning tegen de rechterrand. Uitrekken dus.
   -------------------------------------------------------------------------- */
.page--voorvertoning::before,
.page--voorvertoning::after {
  display: none;
}

.page--voorvertoning {
  background: none;
}

.page--voorvertoning .page__inner {
  margin: 0;
}

.page--voorvertoning .main-wrapper {
  align-items: stretch;
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   34. Cases als kaarten

   Het ontwerp tekent de caselijst op desktop als tekst: opdrachtgever op een
   chip, titel eronder, en het beeld op display:none. Op mobiel tekent het
   diezelfde case wél als kaart — beeld, de chip er half overheen, en de
   titel op een lichtblauw vlak eronder. Leene vroeg die kaart ook op
   desktop, want een overzicht van werk zonder beeld verkoopt geen werk.

   Hieronder staat dus niets nieuws: het is de mobiele compositie, opnieuw
   opgeschreven voor het bereik daarboven, in een raster in plaats van onder
   elkaar. De redactie kiest per blok welke van de twee het wordt (veld
   "Weergave cases"); zonder keuze blijft alles staan zoals het ontworpen is.

   Drie kolommen op de ontwerpbreedte, minder zodra er minder ruimte is —
   auto-fill en niet een vast aantal, omdat dit overzicht zichzelf vult en
   dus niet weet hoeveel cases er komen.
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* De sectie heeft alleen links een inspringing (het ontwerp laat de lijst
     rechts vrij lopen). Een raster dat de volle breedte pakt zou daardoor
     tegen de rechterrand plakken. */
  .themas-cases--kaarten {
    padding-right: var(--page-padding-x);
  }

  .themas-cases--kaarten .themas-cases__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1180px;
  }

  /* De kaart is één kolom: beeld, chip, titel. De titel groeit mee zodat
     twee kaarten naast elkaar even hoog eindigen, ook als de ene titel één
     regel langer is dan de andere. */
  .themas-cases--kaarten .themas-case__link,
  .themas-cases--kaarten .themas-case:first-child .themas-case__link,
  .themas-cases--kaarten .themas-case:last-child .themas-case__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    gap: 0;
  }

  .themas-cases--kaarten .themas-case__image {
    display: block;
    width: 100%;
    /* De verhouding van het mobiele ontwerp (358 × 247), niet die 247px
       zelf: een kaart in een raster is nooit 358px breed. */
    aspect-ratio: 358 / 247;
    background: var(--base-100);
    overflow: hidden;
    border-radius: 2px 2px 0 0;
  }

  .themas-cases--kaarten .themas-case__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* De chip ligt met zijn onderkant 12px boven de onderrand van het beeld.
     Mobiel doet dat met position:absolute op een vaste 197px — dat kan hier
     niet, want de beeldhoogte volgt de kolombreedte. Negatieve marge boven,
     even veel marge onder: samen −50 + 38 + 12 = 0, dus de titel begint nog
     steeds precies op de onderrand van het beeld. */
  .themas-cases--kaarten .themas-case__chip {
    position: relative;
    z-index: 2;
    margin: -50px 0 12px 12px;
  }

  .themas-cases--kaarten .themas-case__title {
    background: var(--blue-100);
    padding: 10px 12px 12px;
    border-radius: 0 0 2px 2px;
    flex: 1;
    /* 22/28 in plaats van 22/38: die 38px hoort bij een titel over de volle
       kolombreedte van de lijst, niet bij een kaart van een derde daarvan. */
    font-size: clamp(1.375rem, 1.1893rem + 0.7619vw, 1.75rem);
  }
}

/* --------------------------------------------------------------------------
   35. Op een telefoon heeft het kader geen onderrand

   Het kader is een vaste overlay, en op iOS dekt position: fixed alleen het
   gebied tússen de balken van de browser. Op een iPhone 17 Pro is het scherm
   874 punten hoog en window.innerHeight 714: er valt 61 punten boven en 99
   onder buiten. Daar schoof de inhoud langs de rand heen — de paginatitel
   kwam boven de navigatiebalk uit, half achter de klok van het toestel.

   Dat is niet te repareren, en dat is gemeten en niet aangenomen. In de
   simulator geprobeerd en afgevallen: een dikkere rand, een schaduw met
   100vmax spreiding, viewport-fit=cover (dat rekt het venster niet op —
   innerHeight blijft 714 en env(safe-area-inset-*) blijft 0), en
   position: sticky, dat hier precies voor gemaakt is maar op deze pagina op
   de vensterrand wordt afgeknipt.

   Dus lost het ontwerp het op in plaats van de techniek. Wat de klacht maakte
   was niet de doorlopende inhoud maar de lijn erboven: een rand van 8px die
   een grens belooft die er niet is. Zonder die rand loopt de pagina door tot
   de schermrand, zoals bij elke site, en valt er niets meer half achter de
   klok.

   Alleen de onderrand. Er wordt niets opgevuld onder de balk: pogingen om die
   strook alsnog dicht te schilderen leverden op een telefoon steeds nieuwe
   randgevallen op, zoals een haarlijn dwars door de vulling waar de
   kleurovergang zijn harde stop had. Doorzichtig laten is hier eerlijker dan
   half dichten.

   De bovenrand blijft wél staan, en dat is een omweg geweest. Hij stond hier
   eerst ook op nul, om dezelfde reden. Maar wat er buiten het venster staat
   is de achtergrond van het document, en die is blue-400: precies de kleur
   van het kader. De lijn en de strook erboven zijn dus één en dezelfde kleur —
   er ís geen lijn te zien, alleen kaderblauw dat doorloopt tot de schermrand.
   De belofte van een grens die er niet is, wordt hier niet gedaan.

   En die rand doet bovendien werk. Zie sectie 27: hij ligt op z-index 950,
   bewust boven de witte titelkaart van de hero (901), omdat die kaart tijdens
   de morph groter is dan het navlogo waar hij op landt en er dus bovenuit
   steekt. Hem hier op nul zetten haalde precies die afdekking weg, en dan
   staat de kaart halverwege de animatie boven de balk uit — een witte blok
   over het kader heen. Met de rand terug is dat weer paint order in plaats
   van rekenwerk: wat boven de balk komt, wordt overgeschilderd.

   De linker- en rechterrand blijven staan. Die vallen altijd binnen het
   venster, dus daar klopt het kader wél — en zij dragen de vorm.

   Alleen tot 920px, het omslagpunt waarop het hele mobiele ontwerp al staat.
   Een laptop heeft geen browserbalken over de pagina heen en houdt het kader
   rondom.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .page::after {
    border-bottom-width: 0;
  }

  /* De navigatiebalk werd op iOS aan de bovenkant afgeknipt.

     Boven de balk stond een streepje in de verkeerde kleur: lichtblauw waar
     het kaderblauw hoort te staan. Nagemeten op het toestel liep de balk van
     20 tot 71 in plaats van van 8 tot 71 — de onderkant klopte, de bovenkant
     was er twaalf pixels af, en in dat gat keek je tegen de achtergrond van
     .main-wrapper aan.

     Twaalf pixels is precies de binnenmarge die elk sjabloon zelf op die
     wrapper zet: .themas-page .main-wrapper en zijn broertjes in contact.css,
     expertises.css, case-detail.css en insight-detail.css. Die regels staan
     buiten elke media query en zijn specifieker dan responsive.css, waar het
     ontwerp op mobiel juist padding-top: 0 voorschrijft. Op een telefoon is
     die marge dus nooit de bedoeling geweest.

     Waarom hij de balk raakt: de wrapper heeft overflow-x: hidden, en dat is
     in CSS geen halve maatregel — hidden op één as maakt van de andere as
     auto, en daarmee wordt het element een scrollcontainer. Safari knipt een
     position: fixed kind daar wél op af, op de binnenrand van die container,
     waar Chrome zich houdt aan de regel dat een vaste balk bij het venster
     hoort en nergens anders bij.

     overflow-x: clip zou dat moeten oplossen — hetzelfde knipwerk zonder
     scrollcontainer — maar op iOS knipt Safari dan nog steeds; op het toestel
     geprobeerd en afgevallen. De marge zelf weghalen werkt wel, en levert
     bovendien op wat het ontwerp op mobiel al vroeg. De balk staat daarmee op
     acht pixels van de bovenrand: dezelfde acht als links en rechts. */
  .page .main-wrapper {
    padding-top: 0;
  }
}


/* --------------------------------------------------------------------------
   36. Cases en inzichten raakten elkaar op een telefoon

   De twee secties van "Thema's cases + inzichten" delen één wrapper, en die
   bepaalt de tussenruimte. Boven het mobiele omslagpunt doet de hoogte van
   het cases-vlak dat werk vanzelf; op een telefoon staat er niets tussen en
   sluit de blauwe kaart van de laatste case direct aan op het lichtblauwe
   vlak van "Onze experts vertellen".

   Twee vlakken die elkaar raken en niet even breed zijn, lezen als een fout:
   de kaart springt 16px in, de sectie eronder loopt door tot de rand. Vandaar
   een tussenruimte, in dezelfde maat als de sectiekiezer eronder gebruikt
   (--section-gap is 80px op desktop; mobiel houdt .sections 48px aan, en de
   helft daarvan is hier genoeg omdat de inzichtensectie zelf al 24px
   binnenmarge heeft — samen dus die 48px).
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .themas-cases-insights {
    gap: 24px;
  }
}



/* --------------------------------------------------------------------------
   37. De wissel van herotitel naar navlogo lichtte even op

   Aan het eind van de morph vervagen twee woordmerken door elkaar heen: de
   herotitel gaat van één naar nul, het navlogo van nul naar één. Halverwege
   staan er dus twee lagen van vijftig procent op elkaar, en dat is samen geen
   honderd maar vijfenzeventig procent dekking. Het woordmerk werd op dat
   moment zichtbaar bleker — een grijze flits in een animatie die verder strak
   loopt.

   De herotitel landt sinds scroll-animation.js exact op het navlogo: zelfde
   plek, zelfde maat, zelfde tekening. Er valt daar dus niets te vervagen. Het
   navlogo staat er meteen helemaal, ónder de herotitel, en de herotitel lost
   erboven op. Wat je ziet is één ononderbroken woordmerk.

   Het navlogo verschijnt op precies hetzelfde moment als eerst — dat bepaalt
   de animatie, niet deze regel. Alleen de overgang van nul naar één duurt nu
   geen honderdvijftig milliseconden meer, en juist die overlap was het
   probleem.
   -------------------------------------------------------------------------- */
.header__logo-text {
  transition: none;
}


/* --------------------------------------------------------------------------
   38. "Privacyverklaring" en "Gedragscode" plakten aan elkaar

   De onderste balk van de voettekst zet op mobiel het copyright links en de
   twee links ernaast, uit elkaar geduwd tot de rechterrand. Dat past precies
   níet: op een scherm van 390px is er 342px binnenwerk, het copyright neemt
   106 en de twee links samen 218 — met de 32px inspringing ertussen kom je op
   372. Er blijft dus geen ruimte over, en met gap: 0 lezen ze als één woord:
   "PrivacyverklaringGedragscode", onder één doorlopende onderstreping. Op
   375px en smaller loopt "Gedragscode" zelfs voorbij de rand van het kader.

   Het is geen kwestie van een paar pixels bijschaven. De maten komen uit het
   ontwerp, dat op precies 390px is getekend en daar op nul uitkomt; elk toestel
   dat smaller is valt om, en de tekst zelf mag niet afbreken (white-space:
   nowrap op de balk). Twee regels dan maar, maar alleen waar het moet.

   De balk mag afbreken, en het blok met links gaat als geheel mee. Zijn
   basisbreedte is nu zijn eigen inhoud in plaats van nul, dus schuift hij naar
   de volgende regel zodra hij naast het copyright niet meer past — rond 420px.
   Daarboven blijft alles zoals het was: één regel, links tot aan de
   rechterrand. Daaronder staat "Privacyverklaring" netjes onder het copyright
   en "Gedragscode" aan de rechterkant, want space-between doet op een eigen
   regel hetzelfde werk.

   De 32px inspringing gaat weg en wordt een kolomruimte op de balk zelf. Een
   inspringing telt namelijk alleen vanaf de linkerrand van het blok, en op een
   eigen regel zou die de links uit de rooilijn duwen; een kolomruimte geldt
   per regel en houdt afstand tot het copyright waar dat nodig is.
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .footer__bottom {
    flex-wrap: wrap;
    gap: 10px 24px;
  }

  .footer__bottom-links {
    flex: 1 1 auto;
    gap: 24px;
    padding-left: 0;
  }
}


/* --------------------------------------------------------------------------
   39. De kleurvlakken van de voettekst vallen weer op de versiering

   Het hoekteken — het omgekeerde haakje rechtsboven — hoort eenentwintig
   pixels binnen de oranje band te staan, en het uitvergrote woordmerk twintig
   boven de onderrand. Op een telefoon stak het haakje er vier pixels bóven
   uit, in het lichtblauw, en zat het woordmerk te hoog in zijn vlak.

   Dat kwam niet door de versiering maar door de banden eronder. Die hingen
   aan de onderkant van de voettekst op een vaste afstand van 53px — precies
   de hoogte die de copyrightbalk had zolang die op één regel paste. Sinds die
   balk op smalle schermen in twee regels breekt is hij 78px, en schoven de
   banden vijfentwintig pixels omlaag ten opzichte van de versiering die er
   bovenop hoort te liggen.

   Een nieuw getal invullen lost dat niet op: dan hangt de opmaak opnieuw aan
   de hoogte van iets anders, en breekt hij zodra die verandert. De banden zijn
   daarom een kind van de versiering geworden (zie chrome.tsx) en vullen die
   helemaal. Ze kunnen niet meer los van elkaar staan, wat er onder de voettekst
   ook gebeurt.

   Elke band eindigt nu op de onderrand in plaats van op een opgegeven hoogte.
   Dat is dezelfde uitkomst — in het ontwerp telt elke band met zijn eigen top
   op tot precies de volle hoogte, op desktop 600 en op mobiel 242 — maar zonder
   dat die twee getallen op drie plekken moeten kloppen. En het scheelt de
   halve pixel die de oranje band overhield: het vak eronder is 599,482 hoog.
   -------------------------------------------------------------------------- */
.footer__bars-bg {
  top: 0;
  bottom: 0;
  height: auto;
}

.footer__bars-bg .footer__bar {
  bottom: 0;
  height: auto;
}


/* --------------------------------------------------------------------------
   40. De klantkaarten van "Recent werk" zijn nu echt een link

   De kaart droeg al `cursor: pointer` (clients.css) en er gebeurde niets als
   je erop klikte. Op desktop leek dat nog op een hovereffect, op een telefoon
   is het onmiskenbaar een kaart — foto, logo, klantnaam, citaat — waar een
   vinger niets mee kon. Het element zelf is daarom een <a> geworden (zie
   ClientsBlock); de klasse en dus alle opmaak en client-stories.js blijven
   ongemoeid.

   Wat een <a> meebrengt en hier niet hoort, gaat er hier weer af: de
   onderstreping en de linkkleur. De kaart heeft zijn eigen kleuren — de
   klantnaam staat in green-1200, het citaat op een blauw vlak — en die
   moeten blijven zoals ze waren.

   `display` staat niet in deze regel: clients.css zet er al `flex` op en
   responsive.css ook, en een <a> is alleen van zichzelf inline.
   -------------------------------------------------------------------------- */
a.client-item {
  text-decoration: none;
  color: inherit;
}


/* --------------------------------------------------------------------------
   41. De statusbalk houdt de kleur van het kader vast, ook tijdens scrollen

   Op iOS is het scherm hoger dan het venster van de pagina: op een iPhone 17
   Pro is het scherm 874 punten en window.innerHeight 714, dus er valt 61
   punten boven (achter de statusbalk) en 99 onder buiten. Sectie 35 hierboven
   legt uit waarom daar niets te positioneren valt — een vast element houdt op
   waar het venster ophoudt, en dat is nagemeten, niet aangenomen.

   Die strook hoort dezelfde kleur te hebben als het kader eromheen: blue-400,
   precies zoals de randen van 10px opzij. Bovenaan de pagina ging dat vanzelf
   goed, want dan neemt Safari de achtergrond van het document, en die stond al
   op blue-400 (global.css). Zodra er gescrold werd sloeg hij om naar een
   lichte, niet-egale versie van de pagina erachter.

   Safari 26 kleurt de balken van de browser namelijk door te kijken naar
   `position: fixed`- en `sticky`-elementen binnen zo'n vier pixels van de
   vensterrand, en hun background-color af te lezen. Is er niets te vinden, dan
   valt hij op scrollstand nul terug op de achtergrond van html/body — vandaar
   dat alleen de bovenste stand klopte — en daarbuiten neemt hij de echte
   beeldpunten van de pagina.

   Wat hier stond kwam daar niet voor in aanmerking. Het kader is .page::after,
   en dat is (a) een pseudo-element, die slaat Safari over, en (b) een border
   zonder background-color, en daar kijkt hij naar. Er viel dus niets te
   bemonsteren.

   Vandaar dit ene echte element: vast, over de volle breedte, acht pixels
   hoog — precies tot waar de navigatiebalk begint — met blue-400 als
   background-color. In de pagina zelf zie je er niets van, want het ligt op
   de bovenrand van het kader die al diezelfde kleur heeft. Zijn enige werk is
   Safari iets geven om de statusbalk op te kleuren, in élke scrollstand.

   Hij ligt bovenop álles, ook op het mobiele menu (2000). Dat tekent namelijk
   zijn eigen kader — border: 8px solid blue-400, met dezelfde ronde hoeken,
   zodat het als een paneel over de site ligt — en zou de band anders afdekken
   zodra je het opent. Hij vangt geen aanraking op, dus de sluitknop eronder
   blijft bereikbaar.

   Alleen binnen het mobiele omslagpunt: een laptop heeft geen statusbalk over
   de pagina heen. `display: none` en niet alleen "geen opmaak" — een leeg
   blok-element in de wortel van body zou daar in de marge-inklapping van
   .page__inner gaan meetellen, en dat is een verschuiving van acht pixels die
   niemand zoekt.

   theme-color helpt hier niet: Safari 26 negeert die voor het kleuren van de
   balken. Hij staat er wel, want Chrome op Android en een geïnstalleerde
   webapp kijken er juist wél naar.
   -------------------------------------------------------------------------- */
.bovenband {
  display: none;
}

@media (max-width: 920px) {
  .bovenband {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Gelijk aan de breedte van het kader hier, en dus precies tot waar de
       navigatiebalk begint: die staat op top: 8px. */
    height: 8px;
    background: var(--blue-400);
    pointer-events: none;
    /* Boven het kader (950) én boven het mobiele menu (2000). */
    z-index: 2100;
  }
}

/* --------------------------------------------------------------------------
   42. In het menu is te zien op welke pagina je staat

   De navigatie zette al een klasse op de actieve link (navLinkClass in
   src/components/site/chrome.tsx), maar er stond geen enkele regel achter:
   alle zes items waren even donkergroen, op welke pagina je ook stond.

   Het wordt #017D66 — het lichtere groen dat op deze site al de aangewezen
   caselink en de contactgegevens kleurt, en dat in de Stijlgids
   --green-1000 heet. Op het blauw van de balk (blue-100) haalt het 5,1:1;
   de grens voor gewone tekst is 4,5:1.

   De fallback achter de komma staat er omdat de kleurenlijst van de
   Stijlgids nog niet overal is uitgerold: kent een build --green-1000 niet,
   dan is `color` zonder fallback ongeldig en erft de link zijn kleur van
   de balk in plaats van donkergroen te blijven.

   Kleur alleen, geen extra vet: de items staan al op semibold, dus zwaarder
   zetten zou de regel laten verspringen zodra je van pagina wisselt.

   aria-current="page" staat in de markup ernaast. Dat is wat een schermlezer
   voorleest — kleur alleen zegt niets tegen wie hem niet ziet.
   -------------------------------------------------------------------------- */
.header__nav-link--active,
.header__contact-link--active,
.mobile-menu__link--active {
  color: var(--green-1000, #017D66);
}

/* --------------------------------------------------------------------------
   43. De partnerlogo's stonden scheef in hun vlakje

   Twee dingen tegelijk, en het tweede was onzichtbaar geworden door het
   eerste.

   werkwijze.css geeft deze logo's een inspringing: 80% breed, 70% hoog van
   het vlakje van 177×85, zodat er lucht om het merk staat. Die regel kwam
   nooit aan bod. `.page img { max-width: 100% }` — een paar honderd regels
   hierboven, bedoeld voor geüploade beelden met willekeurige afmetingen —
   is even specifiek (0,1,1) en staat later in de cascade, dus die won. Het
   gevolg, nagemeten in Chrome op 1440px: BAM en Dura Vermeer stonden 173px
   breed in een vak van 175px, op één pixel van de rand.

   Daaronder zit het echte probleem. Het merk van Dura Vermeer is bijna
   zeven keer zo breed als hoog, dat van de Rijksoverheid nog geen twee. Wie
   die twee in hetzelfde kader past, krijgt geen twee gelijke logo's maar een
   streepje naast een blok: ze vulden 30% en 38% van hun vlakje, terwijl BAM
   op 58% stond. Vandaar dat BAM er twee keer zo zwaar uitzag.

   Het kader hieronder is dus krapper (76% × 60%) en per logo bij te stellen
   met --logo-schaal, die uit het veld "Optische maat" in het beheer komt.
   Geen formule uit de verhouding: hoe zwaar een logo oogt hangt ook af van
   hoeveel inkt erin zit — "bam" is vier dikke vormen, "provincie
   Zuid-Holland" een fijn getekend wapen met kleine letters eronder. Dat
   beoordeelt een mens, niet een berekening.

   De selector noemt de houder mee (0,2,1) zodat hij het wint van .page img
   zonder dat daar iets aan hoeft te veranderen — die regel doet elders zijn
   werk.
   -------------------------------------------------------------------------- */
.werkwijze-clients__logos .werkwijze-clients__logo-box img {
  max-width: calc(76% * var(--logo-schaal, 1));
  max-height: calc(60% * var(--logo-schaal, 1));
  object-fit: contain;
}