/* =========================================================================
   HORECA IMPACT - designsysteem
   Ivo-skin: exact hetzelfde palet en dezelfde typografie als ivothijssen.nl.
   Sectieritme wisselt strikt Navy en Sky, met Sand eenmaal bij de quote.
   Geen build-stap: dit bestand wordt rechtstreeks ingeladen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   Alleen de vier merkkleuren komen in dit bestand voor. Elke kleur staat
   tweemaal: als hexwaarde (de canonieke waarde uit het merkboek, waarop het
   controlescript toetst) en als losse RGB-kanalen. De kanalen worden gebruikt
   voor alles met transparantie, zodat verlopen en sluiers automatisch
   meeveranderen als een kleur wijzigt. Bij Ivo ging dat één keer mis met een
   hardgecodeerde rgba() in de hero; deze opzet maakt die fout onmogelijk.
   LET OP: wijzig je een hex, wijzig dan de bijbehorende kanalen mee.
   ------------------------------------------------------------------------- */
/* Over de haarlijnen. De doorlopende lijnen tussen lijstregels blijven
   staan: die geven een lange lijst zijn ritme. Weg zijn de korte streepjes
   boven een kleine meta- of bijschriftregel binnen een blok. Die liepen door
   een max-width vaak niet tot de rand door, en dan lezen ze als een restje
   in plaats van als een scheiding. De rekentool houdt al zijn randen, want
   die begrenzen invoervelden en uitkomstregels. */
:root {
  --ivo-navy: #122439;
  --ivo-sky: #ECF5FF;
  --ivo-sand: #E3D2B6;
  --ivo-orange: #FF6B2C;

  /* De contrastkleur van een vlak, met de tekstkleur die daarbij hoort.
     Die twee horen bij elkaar: zet je alleen de achtergrond om en laat je
     de tekstkleur vast staan, dan levert elke nieuwe donkere context licht
     op licht op. Precies dat gebeurde met de omlijnde knop in de hero. */
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);

  --navy-rgb: 18 36 57;
  --sky-rgb: 236 245 255;
  --sand-rgb: 227 210 182;
  --orange-rgb: 255 107 44;

  /* Typografie, overgenomen van ivothijssen.nl.
     Let op: die site laadt Futura PT niet; er staat Jost als variabele woff2
     ingesloten en dát is wat je in beeld ziet. De stack is hier gelijk
     gehouden, zodat Futura PT het automatisch overneemt zodra de Adobe
     Fonts-kit erin gaat. */
  /* 0.22.0: Jost voorop. Futura PT stond eerst, maar wordt alleen met een
     Adobe Fonts-kit geladen; wie Futura PT zelf op de computer had zag een
     andere site dan de rest. Met kit zet body.heeft-futura de volgorde om
     (onderaan dit bestand). */
  --font-titel: "Jost", "Jost terugval", "Futura", "Century Gothic", sans-serif;
  --font-tekst: "Open Sans", "Open Sans terugval", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ritme en maatvoering */
  --container-max: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --pad-sectie: clamp(72px, 7vw, 132px);
  --radius: 2px;
  --radius-knop: 0px;
  --header-h: clamp(68px, 5.5vw, 88px);
  --band-h: 62px;

  /* Contrast.
     Sectietitels stonden overal in oranje, zoals op ivothijssen.nl. Op Navy
     haalt Ivo Orange 5,5:1 en dat blijft dus staan. Op een licht vlak is het
     gemeten 2,58:1, onder de WCAG-eis van 3:1 voor grote tekst, en dat is
     hier eerst als geaccepteerde afwijking blijven staan. Bij de toetsing
     van 19 oktober kwam het punt terug met dezelfde meting, en toen is de
     keuze gemaakt: koppen op lichte vlakken worden navy. Het merkaccent gaat
     niet verloren, want de oranje accentstreep boven de kop neemt dat over,
     en op donkere vlakken en op knoppen blijft oranje gewoon oranje.
     Oranje tekst op Sand (1,9:1) stond al uit. */
  --titel-op-licht: var(--ivo-navy);
  --titel-op-donker: var(--ivo-orange);

  /* Typografische schaal (0.22.0). Eén labelmaat en één knopmaat, zodat
     niets meer onder de 12 pixel uitkomt. Was: zeven kleine maten tussen
     10,5 en 12 pixel, met een letterafstand van 0,14 tot 0,24 em. Wie de
     ruimere spatiëring terug wil, zet alleen --ls-label en --ls-knop terug. */
  --fs-body: clamp(1rem, 1vw, 1.0625rem);
  --lh-body: 1.6;
  --fs-label: 0.75rem;
  --ls-label: 0.08em;
  --fs-knop: 0.875rem;
  --ls-knop: 0.08em;
  --fs-merklink: 0.875rem;
  --doel-min: 44px;

  --schaduw-zacht: 0 10px 40px rgb(var(--navy-rgb) / 0.10);
  --schaduw-diep: 0 30px 80px rgb(var(--navy-rgb) / 0.28);
}

/* -------------------------------------------------------------------------
   2. BASIS
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  /* Maten één op één van ivothijssen.nl. */
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ivo-navy);
  background: var(--ivo-sky);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-titel);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  /* Geen automatische afbreking op display-koppen: een kop als "WAAR WIJ
     HORE-CATEAMS IN TRAINEN" oogt als een fout, niet als typografie. De maat
     wordt zo gekozen dat het langste woord past; break-word blijft staan als
     laatste redmiddel tegen overloop. Afbreking staat alleen aan op de kleine
     koppen in tegels en kaarten, waar de kolom nu eenmaal smal is. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.6vw, 6.15rem); line-height: 0.9; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.9rem); }
h3 { font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.03em; }
h4 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

/* Navy op oranje haalt 5,5:1; Sky op oranje zou op 2,6:1 uitkomen. */
::selection {
  background: var(--ivo-orange);
  color: var(--ivo-navy);
}

:focus-visible {
  outline: 3px solid var(--ivo-orange);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 999;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: 12px 20px;
  background: var(--ivo-orange);
  color: var(--ivo-navy);
  font-weight: 700;
}

.site-main > *:first-child:not(.hero):not(.pagina-hero) {
  padding-top: calc(var(--pad-sectie) + var(--header-h));
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------------
   3. VLAKKEN
   Het sectieritme. Elke sectie krijgt precies één vlakklasse; de kleuren van
   tekst, titels en randen volgen daaruit, zodat een sectie-part zelf nooit
   een kleur hoeft te weten.
   ------------------------------------------------------------------------- */
.vlak-navy,
.vlak-sky,
.vlak-sand {
  padding-block: var(--pad-sectie);
  position: relative;
}

.vlak-navy {
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --titel: var(--titel-op-donker);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --zacht: rgb(var(--sky-rgb) / 0.72);
  --vlak-contrast: var(--ivo-sky);
  --vlak-contrast-tekst: var(--ivo-navy);
}

.vlak-sky {
  background: var(--ivo-sky);
  color: var(--ivo-navy);
  --titel: var(--titel-op-licht);
  --hairline: rgb(var(--navy-rgb) / 0.16);
  --zacht: rgb(var(--navy-rgb) / 0.70);
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);
}

.vlak-sand {
  background: var(--ivo-sand);
  color: var(--ivo-navy);
  --titel: var(--ivo-navy);
  --hairline: rgb(var(--navy-rgb) / 0.20);
  --zacht: rgb(var(--navy-rgb) / 0.74);
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);
}

/* Micro-label boven een sectietitel. Op lichte vlakken in navy met verlaagde
   dekking, op navy in oranje. Nooit oranje op sand. */
.eyebrow {
  display: inline-block;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--zacht);
}
.vlak-navy .eyebrow { color: var(--ivo-orange); }
.vlak-sand .eyebrow { color: rgb(var(--navy-rgb) / 0.62); }

.sectie-titel {
  color: var(--titel);
  max-width: 18ch;
}
.sectie-titel.breed { max-width: 26ch; }

/* Oranje accentstreep die op lichte vlakken het werk van de oranje titel
   overneemt zonder de contrasteis te breken. */
.accentstreep::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 1.4rem;
  background: var(--ivo-orange);
}

.lead {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--zacht);
  max-width: 54ch;
}

/* -------------------------------------------------------------------------
   4. KNOPPEN
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.8rem;
  /* 1px rand en scherpe hoeken, gemeten op ivothijssen.nl. */
  border: 1px solid transparent;
  border-radius: var(--radius-knop);
  font-family: var(--font-titel);
  font-size: var(--fs-knop);
  font-weight: 500;
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  line-height: 1;
  min-height: var(--doel-min);
  min-width: var(--doel-min);
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primair {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}
.btn-primair:hover {
  background: var(--ivo-navy);
  border-color: var(--ivo-navy);
  color: var(--ivo-sky);
}

.btn-omlijnd {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-omlijnd:hover {
  background: var(--vlak-contrast);
  border-color: var(--vlak-contrast);
  color: var(--vlak-contrast-tekst);
}

.btn-tekst {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  border-bottom: 2px solid var(--ivo-orange);
  border-radius: 0;
  padding-bottom: 0.35em;
}
.btn-tekst:hover { transform: none; color: var(--ivo-orange); }
.vlak-sand .btn-tekst:hover { color: var(--ivo-navy); border-bottom-color: var(--ivo-navy); }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------------- */
/* De header zweeft over de hero heen, zoals op ivothijssen.nl: geen dichte
   balk met een streep eronder, maar transparant tot er gescrold wordt. De
   hero vangt de hoogte op met padding-top, zodat er niets onder verdwijnt. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  color: var(--ivo-sky);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-gekrompen {
  background: rgb(var(--navy-rgb) / 0.96);
  border-bottom-color: rgb(var(--sky-rgb) / 0.12);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  padding-block: 10px;
}

/* Geldt voor zowel het eigen logo als de <a class="custom-logo-link"> die
   WordPress zelf om het logo heen zet. */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img,
.site-logo svg,
.site-logo .site-logo-img,
.site-logo .custom-logo-link img {
  height: clamp(38px, 3.2vw, 52px);
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.header-inner .nav-cta { font-size: var(--fs-knop); padding: 0.88rem 1.35rem; }
/* De CTA mag nooit over het laatste menu-item heen schuiven. */
.nav-cta-item { flex: none; margin-left: clamp(8px, 1vw, 20px); }
.nav-menu > li:not(.nav-cta-item) { min-width: 0; }

.site-logo-tekst {
  font-family: var(--font-titel);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-logo-tekst strong { font-weight: 700; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 36px);
}
.nav-menu > li { position: relative; }

.nav-link {
  display: inline-block;
  padding: 10px 2px;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.3s ease, border-color 0.2s ease;
}
.nav-link:hover { border-bottom-color: var(--ivo-orange); opacity: 1; }
.nav-menu .is-actief > .nav-link { opacity: 1; }
.nav-menu .is-actief > .nav-link { border-bottom-color: var(--ivo-orange); }

.nav-cta::after {
  /* Was \2197 (schuin omhoog): dat suggereert een externe link, en de
     knop gaat naar een pagina op deze site. */
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
}

.nav-caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ivo-orange);
  vertical-align: middle;
}

.submenu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: max-content;
  padding: 10px 0;
  background: var(--ivo-navy);
  border: 1px solid rgb(var(--sky-rgb) / 0.14);
  box-shadow: var(--schaduw-diep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-menu > li:hover > .submenu,
.nav-menu > li:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 10px 22px;
  font-size: 0.86rem;
  color: var(--ivo-sky);
  white-space: nowrap;
}
.submenu a:hover { color: var(--ivo-orange); }

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid rgb(var(--sky-rgb) / 0.3);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  margin: 4px auto;
  background: var(--ivo-sky);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. HERO
   Opzet gelijk aan ivothijssen.nl: één paginabreed beeld met een navy
   leessluier van links, de tekst eroverheen, en onderaan een lopende band.
   ------------------------------------------------------------------------- */
.hero,
.pagina-hero {
  position: relative;
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --titel: var(--ivo-orange);
  --zacht: rgb(var(--sky-rgb) / 0.78);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --vlak-contrast: var(--ivo-sky);
  --vlak-contrast-tekst: var(--ivo-navy);
  overflow: hidden;
  isolation: isolate;
}

/* De hero vult het scherm. svh in plaats van vh, anders springt de hoogte
   op een telefoon mee met de adresbalk. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 90px));
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  /* Horizontaal rechts, zodat de tekst links op het rustige deel van de
     foto staat. Verticaal bewust hoog en niet in het midden: de heroes
     zijn breed en laag, en de foto's zijn staand. Het midden van een
     staande foto van een pratende man is zijn borst, dus met "center"
     viel het hoofd buiten beeld. Op achtentwintig procent blijft het
     gezicht in het kader en blijft er onder nog genoeg over. */
  background-position: right 28%;
}

/* De leessluier. Op 30 oktober lichter gezet: op de groepsfoto's
   verdwenen de mensen links in het donkerste deel. De stops onder de
   tekst blijven zwaar genoeg voor leesbaar wit (ruim boven 4,5:1), de
   rechterhelft is vrijwel opengetrokken.
   Opgebouwd uit de kanaalvariabele, dus hij verandert mee
   als --navy-rgb wijzigt. Bij Ivo ging dat ooit mis met een hardgecodeerde
   rgba() en leverde dat een zichtbare rand op. */
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgb(var(--navy-rgb) / 0.90) 0%,
      rgb(var(--navy-rgb) / 0.78) 26%,
      rgb(var(--navy-rgb) / 0.28) 56%,
      rgb(var(--navy-rgb) / 0.05) 82%,
      rgb(var(--navy-rgb) / 0.03) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--navy-rgb) / 0.40) 0%,
      rgb(var(--navy-rgb) / 0) 38%
    );
}

.hero-inhoud {
  position: relative;
  z-index: 1;
  /* Ruimte voor de band, die onderin de hero ligt in plaats van eronder. */
  padding-bottom: calc(var(--band-h) + clamp(36px, 4.5vw, 76px));
}

/* Het label: streepje, tekst, punt, tekst. Zonder volgnummer. */
.hero-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--zacht);
}
.hero-label .scheider { color: var(--ivo-orange); letter-spacing: 0; }

.hero h1 {
  max-width: 16ch;
  margin-bottom: clamp(28px, 3.5vw, 56px);
}

/* Herotitel: twee gewichten, geen kleurverschil.
   Het deel in <strong> valt op doordat het zwaarder staat. Op deze maat is
   dat genoeg; een kop van bijna honderd pixels hoeft niet ook nog van kleur
   te wisselen. De gewichten staan lichter dan de rest van de koppen: 400
   tegen 700, met hetzelfde verschil ertussen dat eerder per ongeluk ontstond
   (600 tegen 900), maar twee stappen rustiger.
   Beide herovarianten staan hier samen, want eerder gold de regel alleen
   voor .hero en kreeg .pagina-hero stilzwijgend het vette van de browser. */
.hero h1,
.pagina-hero h1 {
  font-weight: 400;
}
.hero h1 strong,
.pagina-hero h1 strong {
  font-weight: 700;
  color: inherit;
}

.pagina-hero h1 { max-width: 20ch; }

/* Leadtekst en knoppen naast elkaar, niet onder elkaar. */
.hero-onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: end;
}
@media (min-width: 900px) {
  .hero-onder {
    grid-template-columns: minmax(24ch, 0.5fr) minmax(min-content, auto);
    justify-content: start;
    gap: clamp(32px, 5vw, 80px);
  }
}
.hero-onder .lead { max-width: 34ch; margin: 0; }
.hero-onder .knoprij { margin: 0; }

/* Compacte hero voor subpagina's. */
.pagina-hero {
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 120px));
  padding-bottom: clamp(72px, 9vw, 150px);
}
.pagina-hero .hero-beeld::after {
  background: linear-gradient(
    100deg,
    rgb(var(--navy-rgb) / 0.86) 0%,
    rgb(var(--navy-rgb) / 0.55) 48%,
    rgb(var(--navy-rgb) / 0.25) 100%
  );
}
.pagina-hero .lead { margin-top: 1.2rem; }

/* De lopende band onder de hero. */
.hero-band {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  border-top: 1px solid var(--hairline);
  background: rgb(var(--navy-rgb) / 0.85);
  overflow: hidden;
  padding-block: 20px;
  /* Een masker kijkt alleen naar dekking, niet naar kleur. Daarom een
     merkkleur in plaats van zwart: zo blijft het bestand aan het merkboek
     voldoen en slaat de kleurscan niet aan op een kleur die niemand ziet. */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ivo-navy) 6%, var(--ivo-navy) 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ivo-navy) 6%, var(--ivo-navy) 94%, transparent);
}
.hero-band__spoor {
  display: flex;
  width: max-content;
  animation: itthm-band 46s linear infinite;
}
.hero-band__spoor span {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: 1.5rem;
  opacity: 0.62;
}
.hero-band__spoor span::after {
  content: "\25C6";
  margin-left: 3rem;
  font-size: 0.5em;
  vertical-align: 0.35em;
  color: var(--ivo-orange);
  opacity: 0.9;
}
@keyframes itthm-band {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-band__spoor { animation: none; }
}

/* -------------------------------------------------------------------------
   7. SECTIE - EXPERTISE, verspringende tegels
   Geen kaarten met een rand, maar een spookcijfer, een kop en tekst, in een
   aflopende trap. Kolommen schalen mee met hun inhoud; geen vaste
   vw-breedtes, want dat leverde eerder drie te smalle kolommen op.

   De volgorde van de tegels is inhoudelijk bedoeld: leercultuur bovenaan,
   bier onderaan. Het cijfer wordt in PHP meegeteld, dus verslepen in
   wp-admin hernummert vanzelf.
   ------------------------------------------------------------------------- */
.sectie-expertise .blok-titel { margin-bottom: 1.2rem; max-width: none; }
.expertise-kop { margin-bottom: clamp(30px, 4vw, 60px); }
.expertise-kop .sectie-titel { margin-bottom: 1.2rem; }
.expertise-kop .lead { max-width: 62ch; }

.expertise-raster {
  display: grid;
  /* 320px is met de sweep bepaald: breed genoeg dat de langste kop,
     "Gastvrijheid en aandacht", op twee regels past zonder af te breken. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}

.expertise-tegel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: inherit;
}

/* De zigzag. Geen rechte trap maar om en om hoog en laag, waarbij elk paar
   iets verder zakt: 0, laag, half, laag+half. Zo staat het op
   ivothijssen.nl.

   Het aantal kolommen volgt uit de minimumbreedte van 320px en de container
   van 1560px: drie kolommen tussen 1100 en 1500, vier daarboven. De modulo
   is daarop afgestemd, anders springt het patroon halverwege een rij terug
   en oogt het als een fout in plaats van een ritme. */
:root {
  --zigzag-laag: clamp(48px, 5vw, 96px);
  --zigzag-half: clamp(26px, 2.6vw, 50px);
}

@media (min-width: 1100px) and (max-width: 1499px) {
  .expertise-tegel:nth-child(3n+2) { margin-top: var(--zigzag-laag); }
  .expertise-tegel:nth-child(3n+3) { margin-top: var(--zigzag-half); }
}
/* Vanaf 1520px staan alle vijf de onderwerpen op één rij. De kolom is dan
   266 tot 274px breed en de tegel gaat een maat omlaag.

   De maten zijn teruggerekend met de systeemletter, die breder is dan Jost.
   Zodra de webfonts geladen zijn is de tekst ongeveer een vijfde smaller,
   dus er zit marge in. */
@media (min-width: 1520px) {
  /* Het aantal kolommen volgt het aantal tegels in plaats van vast op vijf
     te staan. auto-fit maakt vijf sporen en klapt de lege weer in, zodat
     vier tegels de volle contentbreedte vullen in plaats van vier vijfde
     ervan. Bij vijf verandert er niets. */
  .expertise-raster {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    gap: 20px;
  }

  /* Vanaf vijf tegels weer hard op vijf kolommen. auto-fit rekent met een
     minimumbreedte en zou bij krappe ruimte de vijfde tegel op een tweede
     rij zetten; repeat(5) maakt de kolommen dan liever iets smaller. */
  .expertise-raster:has(.expertise-tegel:nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* De kleinere letter is er voor vijf smalle kolommen. Bij vier of minder
     is de tegel breder en blijft de gewone maat staan.

     Met de tegelklasse ervoor, anders wint de basisregel verderop in dit
     bestand op volgorde. */
  .expertise-raster:has(.expertise-tegel:nth-child(5)) .expertise-tegel .tegel-nummer { font-size: 3.4rem; margin-bottom: 0.5rem; }
  .expertise-raster:has(.expertise-tegel:nth-child(5)) .expertise-tegel .tegel-titel { font-size: 0.82rem; letter-spacing: 0.04em; }
  .expertise-raster:has(.expertise-tegel:nth-child(5)) .expertise-tegel .tegel-tekst { font-size: 0.85rem; line-height: 1.5; }

  .expertise-tegel:nth-child(5n+2) { margin-top: var(--zigzag-laag); }
  .expertise-tegel:nth-child(5n+3) { margin-top: var(--zigzag-half); }
  .expertise-tegel:nth-child(5n+4) { margin-top: calc(var(--zigzag-laag) + var(--zigzag-half)); }
  .expertise-tegel:nth-child(5n+5) { margin-top: calc(var(--zigzag-half) * 2); }
}

.tegel-nummer {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-titel);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  /* Alleen een omtrek, geen vulling. */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hairline);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
/* Bij hover vult het cijfer zich oranje, zoals op ivothijssen.nl. */
.expertise-tegel:hover .tegel-nummer {
  color: var(--ivo-orange);
  -webkit-text-stroke-color: var(--ivo-orange);
}

.tegel-titel {
  font-family: var(--font-titel);
  /* Kleiner dan een gewone h3, zodat een kop van twee of drie woorden in een
     smalle tegelkolom heel blijft staan. Maat met de sweep teruggerekend. */
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}
.expertise-tegel:hover .tegel-titel { color: var(--ivo-orange); }

.tegel-tekst {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--zacht);
}


/* -------------------------------------------------------------------------
   8. SECTIE - IN CIJFERS, reuzenlijst
   Het getal in Sand, alleen het plus- of procentteken in Oranje, en rechts
   een klein categorielabel. Zo op ivothijssen.nl.
   ------------------------------------------------------------------------- */
.cijferlijst { border-top: 1px solid var(--hairline); }

.cijferlijst li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: clamp(24px, 3vw, 46px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .cijferlijst li {
    /* De cijferkolom schaalt mee met zijn eigen inhoud in plaats van een
       vaste vw-breedte; zo kan "3.000+" nooit meer afbreken. */
    grid-template-columns: minmax(max-content, auto) minmax(24ch, 1fr) minmax(max-content, auto);
    align-items: center;
    gap: clamp(28px, 5vw, 90px);
  }
}

.cijferlijst .waarde {
  font-family: var(--font-titel);
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ivo-sand);
  font-variant-numeric: tabular-nums;
  min-width: 3.1em;
  white-space: nowrap;
}
/* Het teken staat kleiner en hoger, als een superscript. */
.cijferlijst .waarde .teken {
  color: var(--ivo-orange);
  font-size: 0.5em;
  vertical-align: 0.5em;
}
/* Op Sand zelf zou het getal wegvallen; daar wordt het navy. */
.vlak-sand .cijferlijst .waarde { color: var(--ivo-navy); }

.cijferlijst .omschrijving {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--zacht);
  max-width: 28ch;
}
.cijferlijst .bron {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* Was opacity 0.55, te weinig contrast voor tekst van 12 pixel. */
  opacity: 0.85;
}
.cijferlijst .categorie {
  justify-self: end;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* Was opacity 0.42: dat gaf 2,6:1 op navy. Zonder ruim boven 4,5:1. */
  color: var(--zacht);
  white-space: nowrap;
}
@media (max-width: 759px) {
  .cijferlijst .categorie { justify-self: start; }
}

/* -------------------------------------------------------------------------
   9. SECTIE - WERKWIJZE IN STAPPEN, sticky intro
   ------------------------------------------------------------------------- */
.sectie-stappen .stappen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 70px);
}
@media (min-width: 1000px) {
  .sectie-stappen .stappen-raster {
    grid-template-columns: minmax(22ch, 0.8fr) minmax(0, 1.2fr);
  }
  .sectie-stappen .stappen-intro {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

.stappen-lijst > li {
  display: grid;
  grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding-block: clamp(22px, 2.6vw, 40px);
  border-top: 1px solid var(--hairline);
}
.stappen-lijst > li:last-child { border-bottom: 1px solid var(--hairline); }

.stappen-lijst .nummer {
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivo-orange);
}
.vlak-sand .stappen-lijst .nummer { color: var(--ivo-navy); }

.stappen-lijst h3 { margin-bottom: 0.5rem; }
.stappen-lijst p { color: var(--zacht); max-width: 58ch; }

/* -------------------------------------------------------------------------
   10. SECTIE - QUOTE, paginabreed op Sand
   ------------------------------------------------------------------------- */
.sectie-quote { text-align: center; }
/* De quote was een mega-statement: kapitalen op vier rem. Dat schreeuwde,
   en bij een lange zin brak hij middenin een woord af. Nu rustiger: gewone
   kapitalisatie, ruim de helft kleiner, en een iets lichtere kleur zodat de
   uitspraak leest als een gedachte in plaats van als een poster. De regel
   mag langer worden, want kleinere letters dragen meer tekens per regel. */
.sectie-quote blockquote {
  margin: 0 auto;
  /* Breedte in ch, zodat de regel meeschaalt met de lettergrootte en de
     quote nooit uit zijn kader loopt. Gecentreerd leest een uitspraak het
     beste in korte regels, dus smaller dan bij links uitgelijnde tekst:
     dertig tekens geeft hier drie regels in plaats van twee lange. */
  max-width: 30ch;
  font-family: var(--font-titel);
  /* Groter dan de vorige versie, maar nog steeds gewone kapitalisatie.
     Die eerste opzet stond op vier rem in hoofdletters en schreeuwde; dit
     draagt wel als uitspraak zonder een poster te worden. */
  font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: rgb(var(--navy-rgb) / 0.88);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: manual;
}
.vlak-navy .sectie-quote blockquote { color: rgb(var(--sky-rgb) / 0.92); }
.sectie-quote blockquote::before { content: "\201C"; }
.sectie-quote blockquote::after { content: "\201D"; }

.sectie-quote figcaption {
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding-top: 1.2rem;
  max-width: 40ch;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
}
.sectie-quote figcaption small {
  display: block;
  margin-top: 0.4rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.9rem;
  color: rgb(var(--navy-rgb) / 0.7);
}

/* -------------------------------------------------------------------------
   11. SECTIE - TEKSTBLOK, redactioneel met beeld buiten het grid
   ------------------------------------------------------------------------- */
.sectie-tekstblok .tekstblok-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .sectie-tekstblok .tekstblok-raster.heeft-beeld {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  }
  .sectie-tekstblok .tekstblok-beeld { margin-top: clamp(20px, 3vw, 56px); }
}
.sectie-tekstblok .tekstblok-tekst { max-width: 62ch; }
.sectie-tekstblok .tekstblok-tekst p,
.sectie-tekstblok .tekstblok-tekst li { color: var(--zacht); }
.sectie-tekstblok .tekstblok-tekst ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
}
.sectie-tekstblok .tekstblok-tekst ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 2px;
  background: var(--ivo-orange);
}
.tekstblok-beeld img { width: 100%; }

/* -------------------------------------------------------------------------
   11b. SECTIE - CONTENTBLOK
   Opbouw naar het voorbeeld van ivothijssen.nl: het beeld loopt door tot de
   rand van het venster, het tekstvlak staat ernaast. Geen kader, geen
   schaduw, geen ronde hoek: vlak redactioneel.
   ------------------------------------------------------------------------- */
.sectie-contentblok {
  padding-block: 0;
  overflow: hidden;
}

.sectie-contentblok .contentblok-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  /* Half om half. De tekstkolom is daarmee smaller dan voorheen; de
     kopmaat verderop is daarop teruggerekend zodat lange samenstellingen
     heel blijven staan. */
  .sectie-contentblok .contentblok-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(520px, 52vw, 860px);
  }
  .sectie-contentblok .contentblok-beeld { grid-column: 1; grid-row: 1; }
  .sectie-contentblok .contentblok-tekst { grid-column: 2; grid-row: 1; }

  /* Beeld rechts is de omgekeerde stand. */
  .sectie-contentblok:not(.beeld-links) .contentblok-beeld { grid-column: 2; }
  .sectie-contentblok:not(.beeld-links) .contentblok-tekst { grid-column: 1; }
}

.sectie-contentblok .contentblok-beeld {
  margin: 0;
  min-height: clamp(260px, 52vw, 520px);
  background: var(--ivo-navy);
}
.sectie-contentblok .contentblok-beeld img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

/* De uitlijnmarge zit op de kolom, niet op het tekstblok zelf. Dat is
   bewust: met box-sizing: border-box telt padding mee in max-width, en op
   een breed scherm at de padding het hele tekstblok op, waardoor de kop op
   nul breedte uitkwam en per letter afbrak. Kolom houdt de marge, blok
   houdt de regelbreedte. */
.sectie-contentblok .contentblok-tekst {
  display: flex;
  align-items: center;
  padding-block: var(--pad-sectie);
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .sectie-contentblok.beeld-links .contentblok-tekst {
    padding-left: clamp(36px, 5vw, 86px);
    padding-right: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
  .sectie-contentblok:not(.beeld-links) .contentblok-tekst {
    padding-right: clamp(36px, 5vw, 86px);
    padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
}

.sectie-contentblok .contentblok-inner {
  width: 100%;
  max-width: 62ch;
}

.sectie-contentblok.zonder-beeld .contentblok-inner {
  max-width: 68ch;
  margin-inline: auto;
}
/* Zonder beeld hoort er geen half leeg raster te staan. Het blok valt dan
   terug op één kolom met de gewone sectiehoogte, zodat een contentblok ook
   zonder foto af oogt. */
@media (min-width: 900px) {
  .sectie-contentblok.zonder-beeld .contentblok-raster {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .sectie-contentblok.zonder-beeld .contentblok-tekst {
    grid-column: 1;
    padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
}

/* Eyebrow: streepje en label. */
.blok-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
}
.blok-streep {
  width: 28px;
  height: 2px;
  background: var(--ivo-orange);
  flex: none;
}
.blok-label { color: var(--zacht); }

.blok-titel {
  margin-bottom: 1.8rem;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--titel);
  max-width: 19ch;
}

/* Eerste alinea als lead, de rest kleiner en rustiger. Zo hoeft de redactie
   geen apart veld te vullen om dat verschil te krijgen. */
.sectie-contentblok .contentblok-body > p:first-child {
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--vlak-contrast);
  max-width: 56ch;
}
.sectie-contentblok .contentblok-body > p:first-child + p,
.sectie-contentblok .contentblok-body > p ~ p {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--zacht);
  max-width: 54ch;
}
.sectie-contentblok .contentblok-body ul { margin: 1.1em 0; }
.sectie-contentblok .contentblok-body ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
  color: var(--zacht);
}
.sectie-contentblok .contentblok-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 2px;
  background: var(--ivo-orange);
}
.sectie-contentblok .contentblok-body a:not(.btn) { border-bottom: 1px solid var(--ivo-orange); }

.blok-meta {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  color: var(--zacht);
}

.sectie-contentblok .knoprij { margin-top: 2rem; }

/* Knop die de contrastkleur van zijn vlak aanneemt: navy op licht,
   Sky op navy. */
.btn-vlak {
  background: var(--vlak-contrast);
  border-color: var(--vlak-contrast);
  color: var(--vlak-contrast-tekst);
}
.btn-vlak:hover {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}
.btn-vlak::after {
  content: "\2197";
  font-size: 1.05em;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   11c. SECTIE - KAARTENRIJ
   ------------------------------------------------------------------------- */
.kaarten-raster {
  display: grid;
  /* 360px is met de sweep bepaald: daarmee vallen vensters tot en met 1180
     terug op twee kaarten in plaats van drie te smalle, waarin woorden als
     "samenwerkingsverband" niet meer heel pasten. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(28px, 3.5vw, 52px);
  align-items: start;
}

.kaart {
  display: flex;
  flex-direction: column;
  background: var(--ivo-sky);
  color: var(--ivo-navy);
  border: 1px solid rgb(var(--navy-rgb) / 0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.vlak-sky .kaart { background: var(--ivo-sand); border-color: rgb(var(--navy-rgb) / 0.14); }
a.kaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw-diep); }

.kaart figure { margin: 0; overflow: hidden; }
.kaart figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
a.kaart:hover figure img { transform: scale(1.05); }

.kaart-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: clamp(20px, 2vw, 30px);
}
.kaart-body h3 { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.45rem); }
.kaart-body p { font-size: 0.95rem; color: rgb(var(--navy-rgb) / 0.78); }
.kaart-link {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
a.kaart:hover .kaart-link { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   12. SECTIE - USP-GRID
   ------------------------------------------------------------------------- */
.usp-icoon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.usp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: clamp(30px, 4vw, 56px);
}
.usp-raster li {
  padding: clamp(24px, 2.6vw, 44px);
  background: inherit;
}
.vlak-navy .usp-raster li { background: var(--ivo-navy); }
.vlak-sky .usp-raster li { background: var(--ivo-sky); }
.vlak-sand .usp-raster li { background: var(--ivo-sand); }
.usp-raster h3 { margin-bottom: 0.6rem; }
.usp-raster p { color: var(--zacht); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   13. SECTIE - CONTACTBLOK
   Geen dicht oranje vlak meer, maar de opzet van het contactblok van
   ivothijssen.nl: licht vlak, genummerd label, grote oranje kop met tekst
   links, knoppen rechts, merkteken als watermerk erachter.
   ------------------------------------------------------------------------- */
.sectie-cta { overflow: hidden; }

.sectie-cta .cta-raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) {
  .sectie-cta .cta-raster {
    grid-template-columns: minmax(0, 1.25fr) minmax(min-content, auto);
    align-items: end;
  }
}

.sectie-cta .cta-tekst { position: relative; z-index: 1; }
.sectie-cta .blok-titel { max-width: 13ch; margin-bottom: 2.2rem; }
.sectie-cta .lead { max-width: 48ch; }

.sectie-cta .cta-acties {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
@media (min-width: 900px) {
  .sectie-cta .cta-acties { justify-content: flex-end; padding-bottom: 0.3rem; }
}

/* Watermerk: groot, bijna weggevallen, rechts achter de knoppen. Op een
   lichtvlak nauwelijks zichtbaar, precies zoals het bedoeld is. */
.sectie-cta .cta-merkteken {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  bottom: -18%;
  width: clamp(220px, 26vw, 420px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.sectie-cta .cta-merkteken img {
  width: 100%;
  height: auto;
  /* Het logo mag hier alleen als vorm dienen, niet als kleurvlak. */
  filter: grayscale(1);
}
@media (max-width: 899px) {
  .sectie-cta .cta-merkteken { display: none; }
}

.sectie-cta .it-formulier { width: min(100%, 26rem); }

/* -------------------------------------------------------------------------
   14. SECTIE - FOTOCOLLAGE en LOGORIJ
   ------------------------------------------------------------------------- */
.foto-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(30px, 4vw, 56px);
}
.foto-collage figure { margin: 0; overflow: hidden; }
.foto-collage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.foto-collage figure:hover img { transform: scale(1.04); }
@media (min-width: 900px) {
  .foto-collage figure:first-child { grid-column: span 2; grid-row: span 2; }
  .foto-collage figure:first-child img { aspect-ratio: 1 / 1; }
}

.logo-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  margin-top: clamp(26px, 3vw, 44px);
}
.logo-rij img {
  max-height: 46px;
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-rij img:hover { opacity: 1; filter: grayscale(0); }

/* -------------------------------------------------------------------------
   15. KEYNOTE- EN MERKDETAIL
   ------------------------------------------------------------------------- */
/* De gekaderde variant, alleen op de detailpagina. In de keynotelijst op
   een overzichtspagina staan dezelfde feiten als losse regeltjes; die zouden
   met deze vlakken de hele lijst dichtslibben. Vandaar de extra klasse. */
.keynote-feiten.blok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.keynote-feiten.blok div {
  display: block;
  padding: clamp(18px, 2vw, 28px);
  background: var(--ivo-sky);
}
.keynote-feiten.blok dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--navy-rgb) / 0.6);
  margin-bottom: 0.4rem;
}
.keynote-feiten.blok dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

.keynote-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
@media (min-width: 1000px) {
  .keynote-raster { grid-template-columns: minmax(0, 1.3fr) minmax(26ch, 0.7fr); }
  .keynote-zijkant { position: sticky; top: 120px; }
}
.keynote-inhoud { max-width: 64ch; }
.keynote-inhoud h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 2rem 0 0.8rem; }
.keynote-inhoud p { color: var(--zacht); }

.keynote-zijkant {
  padding: clamp(24px, 3vw, 40px);
  background: var(--ivo-navy);
  color: var(--ivo-sky);
}
.keynote-zijkant h3 { color: var(--ivo-orange); margin-bottom: 1rem; }
.keynote-zijkant li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.7em;
  font-size: 0.95rem;
  color: rgb(var(--sky-rgb) / 0.82);
}
.keynote-zijkant li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--ivo-orange);
}
.keynote-zijkant .btn { margin-top: 1.2rem; width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   16. ARTIKELEN, ZOEKEN, 404
   ------------------------------------------------------------------------- */
.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.artikel-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--hairline);
}
.artikel-kaart h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); }
.artikel-kaart p { color: var(--zacht); font-size: 0.95rem; }
.artikel-kaart time {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.66;
}

.entry-content { max-width: 68ch; }
.entry-content h2 { margin: 2.2rem 0 0.8rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.entry-content h3 { margin: 1.8rem 0 0.6rem; }
.entry-content ul { margin: 0 0 1.2em; }
.entry-content ul li { position: relative; padding-left: 1.4em; margin-bottom: 0.45em; }
.entry-content ul li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 8px; height: 2px; background: var(--ivo-orange);
}
.entry-content a:not(.btn) { border-bottom: 1px solid var(--ivo-orange); }
.entry-content blockquote {
  margin: 1.6rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--ivo-orange);
  font-size: 1.1rem;
}
.entry-content img { margin: 1.6rem 0; }

.zoekformulier {
  display: flex;
  gap: 10px;
  max-width: 34rem;
  margin-top: 1.6rem;
}
.zoekformulier input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.9em 1em;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
}
.zoekformulier input[type="search"]:focus { border-color: var(--ivo-orange); outline: none; }

.paginering {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(30px, 4vw, 54px);
}
.paginering .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 0.9rem;
}
.paginering .page-numbers.current,
.paginering .page-numbers:hover { background: var(--ivo-orange); border-color: var(--ivo-orange); color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   17. FORMULIEREN
   ------------------------------------------------------------------------- */
.it-formulier label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.it-formulier input[type="text"],
.it-formulier input[type="email"],
.it-formulier input[type="tel"],
.it-formulier select,
.it-formulier textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9em 1em;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ivo-navy);
  background: var(--ivo-sky);
  border: 2px solid rgb(var(--navy-rgb) / 0.18);
  border-radius: var(--radius);
}
.it-formulier textarea { min-height: 140px; resize: vertical; }
.it-formulier input:focus,
.it-formulier select:focus,
.it-formulier textarea:focus { border-color: var(--ivo-orange); outline: none; }
.it-formulier .wpcf7-submit {
  margin-top: 0.6rem;
  padding: 0.95em 1.8em;
  background: var(--ivo-orange);
  border: 2px solid var(--ivo-orange);
  border-radius: var(--radius);
  color: var(--ivo-navy);
  font-size: var(--fs-knop);
  font-weight: 700;
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  cursor: pointer;
}
.it-formulier .wpcf7-submit:hover { background: var(--ivo-navy); border-color: var(--ivo-navy); color: var(--ivo-sky); }

.contact-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 70px);
  align-items: start;
}
@media (min-width: 950px) {
  .contact-raster { grid-template-columns: minmax(0, 1.1fr) minmax(26ch, 0.9fr); }
}
.contact-gegevens li { margin-bottom: 1.1rem; }
.contact-gegevens .label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--navy-rgb) / 0.6);
  margin-bottom: 0.25rem;
}
.vlak-navy .contact-gegevens .label { color: rgb(var(--sky-rgb) / 0.66); }
.contact-gegevens a:hover { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   18. FOOTER met reuzenwoordmerk
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --zacht: rgb(var(--sky-rgb) / 0.72);
  padding-top: clamp(56px, 6vw, 100px);
  overflow: hidden;
}

.footer-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr));
  gap: clamp(28px, 3.5vw, 60px);
  padding-bottom: clamp(40px, 5vw, 70px);
}
.footer-kolom h4 {
  margin-bottom: 1rem;
  font-family: var(--font-tekst);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--sky-rgb) / 0.68);
}
.footer-kolom li { margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--zacht); }
.footer-kolom a:hover { color: var(--ivo-orange); }
.footer-intro p { color: var(--zacht); max-width: 36ch; margin-top: 1.2rem; }
.footer-logo { margin-bottom: 1.2rem; }
.footer-logo img { height: 50px; }

.social-rij { display: flex; gap: 12px; margin-top: 1.4rem; }
.social-rij a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doel-min); height: var(--doel-min);
  border: 1px solid var(--hairline);
}
.social-rij svg { width: 18px; height: 18px; fill: currentColor; }
.social-rij a:hover { background: var(--ivo-orange); border-color: var(--ivo-orange); color: var(--ivo-navy); }

.footer-woordmerk {
  font-family: var(--font-titel);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  /* Het woordmerk pakt bijna de volle breedte. De maat is met de sweep
     teruggerekend zodat "Horeca Impact" bij elke vensterbreedte binnen het
     kader blijft; overflow:hidden is de vangnetregel voor een smallere of
     bredere letter dan de testletter. */
  font-size: min(11vw, 12rem);
  color: rgb(var(--sky-rgb) / 0.10);
  padding-bottom: 0.06em;
  user-select: none;
  white-space: nowrap;
  /* Gecentreerd, zodat het woordmerk bij elke vensterbreedte links en
     rechts evenveel ruimte houdt. Links uitgelijnd liep het op brede
     schermen tegen de rechterrand aan en werd het door overflow:hidden
     afgekapt: dan mist er een letter en lijkt het een fout in plaats van
     een achtergrondelement. */
  text-align: center;
  overflow: hidden;
}

.footer-onderrand {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--zacht);
}
.footer-onderrand a:hover { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   Getest van 360 tot 2560 pixels. Alle kolomdefinities gebruiken minmax met
   een ch- of max-content-ondergrens, zodat tekst nooit breder wordt dan zijn
   kader. Vaste vw-breedtes komen hier bewust niet voor.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-toggle { display: block; }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 28px;
    background: rgb(var(--navy-rgb) / 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--sky-rgb) / 0.16);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform 0.3s ease;
  }
  .nav-menu.is-open { transform: translateY(0); }

  .nav-link {
    padding: 0.5rem 0 0.9rem;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 1;
    border-bottom: 1px solid rgb(var(--sky-rgb) / 0.12);
  }
  .nav-link:hover { border-bottom-color: rgb(var(--sky-rgb) / 0.12); color: var(--ivo-orange); }
  .nav-cta::after {
  /* Was \2197 (schuin omhoog): dat suggereert een externe link, en de
     knop gaat naar een pagina op deze site. */
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
}

.nav-caret { float: right; margin-top: 8px; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
    background: transparent;
  }
  .submenu a { padding: 10px 0; }

  .nav-cta-item { margin-top: 18px; }
  .nav-cta-item .btn { width: 100%; justify-content: center; }
}

@media (max-width: 899px) {
  /* Op telefoon staat de tekst over de volle breedte; de sluier wordt dan
     van onderaf opgebouwd in plaats van van links. */
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-beeld { background-position: center; }
  .hero-beeld::after {
    background: linear-gradient(
      180deg,
      rgb(var(--navy-rgb) / 0.40) 0%,
      rgb(var(--navy-rgb) / 0.70) 45%,
      rgb(var(--navy-rgb) / 0.88) 100%
    );
  }
}

/* Op de smalste telefoons passen de langste samenstellingen
   ("opleidingskundige", "gastvrijheidstraining") niet meer op één regel.
   Browsers met een Nederlands afbreekwoordenboek hyphenateren netjes, maar
   daar wil je niet van afhangen: hier worden de koppen zo ver verkleind dat
   het langste woord heel blijft. Grenzen zijn met de sweep bepaald. */
@media (max-width: 460px) {
  .sectie-contentblok .contentblok-tekst h2 { font-size: 1.1rem; }
  .sectie-quote blockquote { font-size: 1.5rem; }
  .expertise-tegel .tegel-titel,
  .kaart-body h3 { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  /* Op een smal scherm bepaalt de schermbreedte de regellengte al; een
     kolom van dertig tekens zou daar onnodig veel korte regels geven. */
  .sectie-quote blockquote { max-width: 24ch; }
  .footer-woordmerk { font-size: 12vw; }
  .knoprij .btn { width: 100%; justify-content: center; }
}

/* Zeer brede schermen: het raster stopt bij --container-max, maar de hero
   mag doorlopen. Het tekstvlak blijft uitgelijnd op de container. */
@media (min-width: 1800px) {
  :root { --pad-sectie: clamp(110px, 6vw, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Onthullen bij scrollen; zonder JS blijft alles gewoon zichtbaar. */
.js .onthul { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }

@media print {
  .site-header, .site-footer, .menu-toggle { display: none; }
  body { background: transparent; color: var(--ivo-navy); }
}

/* =========================================================================
   20. SECTIES VAN HET IVO-PLATFORM
   Alles hieronder is nieuw ten opzichte van het Horeca Impact-thema. De
   tokens, vlakken, knoppen en typeschaal hierboven blijven ongewijzigd: de
   twee sites moeten één familie blijven.
   ========================================================================= */

/* -------------------------------------------------------------------------
   20.1 VISIE - mega-statement, dragende woorden, overtuigingen
   ------------------------------------------------------------------------- */
.visie-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 56px);
  align-items: start;
}
@media (min-width: 1000px) {
  .visie-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Het statement is de grootste kop op de pagina na de hero. Geen 18ch-cap:
   deze zin mag over meerdere regels lopen, dat is juist de vorm. */
.sectie-visie .statement {
  max-width: 20ch;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
}

.visie-tekst { color: var(--zacht); max-width: 58ch; }
.visie-tekst strong { color: var(--vlak-contrast); font-weight: 600; }

/* De drie dragende woorden. Ze komen uit de merktaal en staan op meerdere
   pagina's; de vorm is daarom bewust rustig, zodat herhaling niet gaat
   schreeuwen. */
.dragende-woorden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  margin-top: clamp(36px, 4vw, 70px);
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.dragende-woorden li {
  padding: clamp(22px, 2.4vw, 36px) clamp(18px, 2vw, 30px);
  background: inherit;
}
.vlak-navy .dragende-woorden li { background: var(--ivo-navy); }
.vlak-sky .dragende-woorden li { background: var(--ivo-sky); }
.vlak-sand .dragende-woorden li { background: var(--ivo-sand); }

.dragende-woorden h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--titel);
}
.vlak-sand .dragende-woorden h3 { color: var(--ivo-navy); }
.dragende-woorden p { font-size: 0.92rem; line-height: 1.6; color: var(--zacht); }

/* De overtuigingen: genummerde, stellige regels. */
.overtuigingen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  margin-top: clamp(36px, 4vw, 70px);
}
.overtuigingen li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ivo-orange);
}
.overtuiging-nummer {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.overtuigingen p { font-size: 1.02rem; line-height: 1.6; }

/* Losse citaatregel, gebruikt waar een blok anders leeg zou ogen. */
.overtuiging-regel {
  font-family: var(--font-titel);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--titel);
  text-wrap: balance;
}
.overtuiging-regel.groot { font-size: clamp(1.4rem, 2.4vw, 2.3rem); }
.vlak-sand .overtuiging-regel { color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   20.2 PORTRET - over Ivo, beeld buiten het grid
   ------------------------------------------------------------------------- */
.portret-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}
@media (min-width: 960px) {
  .portret-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  /* Het portret steekt iets boven de tekst uit en loopt onderaan door, zoals
     in de schets. Negatieve marge alleen boven, zodat er nooit een gat onder
     de sectie ontstaat. */
  .portret-beeld { margin-top: calc(var(--pad-sectie) / -2.2); }
  .portret-raster.zonder-beeld { grid-template-columns: minmax(0, 1fr); }
}

.portret-tekst .sectie-titel { margin-bottom: 1.6rem; }
.portret-tekst .entry-content { color: var(--zacht); max-width: 58ch; }
.portret-tekst .entry-content strong { color: var(--vlak-contrast); font-weight: 600; }

/* Geen vlak achter het portret. Een gewone foto vult het kader door de
   bijsnijding toch helemaal, dus die achtergrond was alleen zichtbaar
   bij een uitgesneden portret: daar stond de figuur dan op een navy
   rechthoek midden in een licht vlak. Zonder achtergrond valt een
   uitsnede weg in de sectie, en verandert er niets aan een foto. */
.portret-beeld { margin: 0; overflow: hidden; }
/* Bijsnijden vanaf de bovenkant. Het kader is staand maar minder smal
   dan deze opnamen, dus er gaat sowieso iets af. Vanuit het midden
   gesneden verdween de bovenkant van het hoofd, en dat is het enige
   deel van een portret dat er niet af mag. Nu gaat het eraf bij de
   voeten, waar niemand naar kijkt. */
.portret-beeld img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.merites {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 2;
  text-transform: uppercase;
  color: var(--zacht);
}
.merites .scheider { margin-inline: 0.7em; color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   20.3 DE VIER PIJLERS - het eigen model
   De volgorde is de boodschap, dus de pijlers staan als ketting naast elkaar
   met een lijn ertussen, en niet als vier losse gelijkwaardige blokjes.
   ------------------------------------------------------------------------- */
/* Let op met ch-maten op een wikkel: ch rekent met de letter van dát
   element. Stond hier 70ch op de wikkel, dan rekende de browser met Open
   Sans van 15,5px (ongeveer 560px) en moest de kop in de titelletter van
   57px daarbinnen passen. Gevolg: "HORECAMEDEWERKER" brak middenin het
   woord af. De kop krijgt daarom de volle breedte en alleen de leadtekst
   wordt begrensd, in zijn eigen letter. */
.pijlers-kop { margin-bottom: clamp(32px, 4vw, 64px); }
.pijlers-kop .sectie-titel { margin-bottom: 1.2rem; }
.pijlers-kop .lead { max-width: 62ch; }

.pijlers-ketting {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(24px, 2.6vw, 44px);
  counter-reset: pijler;
}

.pijler {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
/* De verbindingsstreep tussen twee pijlers: een oranje stip op de lijn, die
   het model als keten laat lezen. */
.pijler::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 10px; height: 10px;
  background: var(--ivo-orange);
}

.pijler-nummer {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.pijler-titel {
  margin-bottom: 0.7rem;
  font-family: var(--font-titel);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .pijler-titel { color: var(--ivo-navy); }
.pijler-tekst { font-size: 0.94rem; line-height: 1.6; color: var(--zacht); }

.pijlers-voetnoot {
  margin-top: clamp(28px, 3vw, 48px);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   20.4 DOELGROEPEN - de doorverwijstabel
   Hele regel klikbaar; de route staat rechts met een pijl.
   ------------------------------------------------------------------------- */
.doelgroepen-kop { margin-bottom: clamp(28px, 3vw, 52px); }
.doelgroepen-kop .sectie-titel { margin-bottom: 1.1rem; }
.doelgroepen-kop .lead { max-width: 62ch; }

.doelgroepen-lijst { border-top: 1px solid var(--hairline); }
.doelgroep { border-bottom: 1px solid var(--hairline); }

.doelgroep-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: clamp(20px, 2.2vw, 34px);
  transition: background-color 0.25s ease, padding-inline 0.25s ease;
}
@media (min-width: 860px) {
  .doelgroep-link {
    /* min-content als ondergrens, niet 0: een kolom mag nooit smaller
       worden dan het langste onbreekbare woord erin. */
    grid-template-columns: minmax(min-content, 0.9fr) minmax(0, 1.3fr) minmax(16ch, auto);
    gap: clamp(16px, 2vw, 40px);
    align-items: baseline;
  }
}
.doelgroep-link:hover,
.doelgroep-link:focus-visible {
  background: rgb(var(--orange-rgb) / 0.08);
  padding-inline: clamp(10px, 1.4vw, 22px);
}

.doelgroep-wie {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.doelgroep-zoekt { font-size: 0.95rem; line-height: 1.6; color: var(--zacht); }
.doelgroep-route {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .doelgroep-route { color: var(--ivo-navy); }
.doelgroep-route .pijl { transition: transform 0.25s ease; }
.doelgroep-link:hover .doelgroep-route .pijl { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   20.5 KEYNOTES - genummerde lijst met belofte en feiten
   ------------------------------------------------------------------------- */
.keynotes-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 44px);
  margin-bottom: clamp(30px, 3.6vw, 60px);
  align-items: end;
}
@media (min-width: 1000px) {
  .keynotes-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.keynotes-intro .lead { margin-bottom: 1.4rem; }
.keynotes-intro .lead strong { color: var(--vlak-contrast); font-weight: 600; }

.keynote-lijst { border-top: 1px solid var(--hairline); }

.keynote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 34px);
  align-items: start;
  padding-block: clamp(24px, 2.8vw, 42px);
  border-bottom: 1px solid var(--hairline);
}

.keynote-nummer {
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hairline);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.keynote:hover .keynote-nummer {
  color: var(--ivo-orange);
  -webkit-text-stroke-color: var(--ivo-orange);
}

.keynote-titel {
  margin-bottom: 0.6rem;
  font-family: var(--font-titel);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .keynote-titel { color: var(--ivo-navy); }
.keynote:hover .keynote-titel a { color: var(--ivo-orange); }

.keynote-belofte {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--zacht);
}

.keynote-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  margin: 1rem 0 0;
}
.keynote-feiten div { display: flex; gap: 0.6em; align-items: baseline; }
.keynote-feiten dt {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}
.keynote-feiten dd { margin: 0; font-size: 0.9rem; font-weight: 600; }

.keynote-pijl {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--hairline);
  font-size: 1.1rem;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.keynote:hover .keynote-pijl {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}

/* Keynotedetail: de zijkant uit sectie 15 krijgt hier zijn inhoud. */
.keynote-resultaten { margin-top: 1.6rem; }
.keynote-resultaten h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.keynote-extra {
  margin-top: 2rem;
  padding: clamp(20px, 2.4vw, 34px);
  border-left: 3px solid var(--ivo-orange);
  background: rgb(var(--orange-rgb) / 0.07);
}
.keynote-extra p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   20.6 DE MERKEN - drie kaarten met payoff en domeinnaam
   ------------------------------------------------------------------------- */
.merken-kop { margin-bottom: clamp(30px, 3.6vw, 58px); }
.merken-kop .sectie-titel { margin-bottom: 1.1rem; }
.merken-kop .lead { max-width: 62ch; }

.merken-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
}

/* De hele kaart is klikbaar, met één echte link.
   De link om de merknaam krijgt een vlak dat de kaart afdekt, dus een
   klik op het beeld of de tekst komt op dezelfde plek uit. Zo blijft er
   voor een schermlezer en voor Google één link met de merknaam als
   tekst, in plaats van drie links naar hetzelfde adres of een div met
   een klikafhandeling die zonder muis niet werkt. */
.merk-kaart { display: flex; flex-direction: column; position: relative; }
.merk-kaart .merk-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.merk-kaart .merk-titel a { position: static; }
.merk-beeld { margin: 0 0 1.3rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivo-navy); }
.merk-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.merk-kaart:hover .merk-beeld img { transform: scale(1.05); }

.merk-nummer {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.merk-titel {
  margin-bottom: 0.7rem;
  font-family: var(--font-titel);
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .merk-titel { color: var(--ivo-navy); }
.merk-kaart:hover .merk-titel a { color: var(--ivo-orange); }

.merk-payoff { font-size: 1rem; font-weight: 600; line-height: 1.5; margin-bottom: 0.7rem; }
.merk-tekst { font-size: 0.93rem; line-height: 1.65; color: var(--zacht); }

.merk-domein {
  margin-top: 1rem;
  padding-top: 0.9rem;
  font-family: var(--font-titel);
  font-size: var(--fs-merklink);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: lowercase;
  color: var(--ivo-orange);
}
.vlak-sand .merk-domein { color: var(--ivo-navy); }

/* Merkdetail */
.merk-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}
@media (min-width: 1000px) {
  .merk-raster { grid-template-columns: minmax(0, 1.3fr) minmax(26ch, 0.7fr); }
  .merk-wanneer { position: sticky; top: 120px; }
}
.merk-inhoud { max-width: 64ch; }
.merk-inhoud p { color: var(--zacht); }

.merk-wanneer {
  padding: clamp(24px, 3vw, 40px);
  background: var(--ivo-navy);
  color: var(--ivo-sky);
}
.merk-wanneer h2 {
  margin-bottom: 1.2rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.merk-wanneer li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.8em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgb(var(--sky-rgb) / 0.82);
}
.merk-wanneer li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--ivo-orange);
}

/* -------------------------------------------------------------------------
   20.7 MEDIA EN PERS - onderwerpen en een eerlijke publicatielijst
   Bewust geen logorij: die suggereert samenwerkingen die er nog niet zijn.
   ------------------------------------------------------------------------- */
.media-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
}
@media (min-width: 1000px) {
  .media-raster { grid-template-columns: minmax(0, 1.25fr) minmax(24ch, 0.75fr); }
}
.media-tekst .entry-content { color: var(--zacht); max-width: 56ch; }
.media-tekst .knoprij { margin-top: 1.8rem; }

.media-onderwerpen h3 {
  margin-bottom: 1.1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .media-onderwerpen h3 { color: var(--ivo-navy); }
.media-onderwerpen li {
  padding-block: 0.6em;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.media-onderwerpen li:first-child { border-top: 1px solid var(--hairline); }

.publicaties { margin-top: clamp(40px, 4.5vw, 80px); }
.publicaties-kop {
  margin-bottom: 1.4rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.publicatielijst { border-top: 1px solid var(--hairline); }
.publicatie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding-block: clamp(16px, 1.8vw, 26px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .publicatie {
    grid-template-columns: 13ch minmax(min-content, 1fr) minmax(0, 1.1fr);
    gap: clamp(14px, 1.8vw, 32px);
    align-items: baseline;
  }
  .publicatie-tekst { grid-column: 2 / -1; }
}
.publicatie-soort {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .publicatie-soort { color: var(--ivo-navy); }
.publicatie-titel { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.publicatie-titel a { border-bottom: 1px solid var(--hairline); }
.publicatie-titel a:hover { color: var(--ivo-orange); border-color: var(--ivo-orange); }
.publicatie-meta { font-size: 0.86rem; color: var(--zacht); }
.publicatie-tekst { font-size: 0.9rem; line-height: 1.6; color: var(--zacht); }

/* -------------------------------------------------------------------------
   20.8 COLUMNS EN ARTIKELEN
   ------------------------------------------------------------------------- */
.columns-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: clamp(28px, 3.2vw, 54px);
  align-items: end;
}
@media (min-width: 900px) {
  .columns-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .columns-kop .knoprij { justify-self: end; }
}

/* align-items blijft op de standaard stretch staan, dus alle kaarten in
   een rij krijgen dezelfde hoogte. Met align-items: start stopte elke
   kaart waar zijn eigen tekst ophield, en dan eindigt een rij met vier
   kaarten op vier verschillende hoogtes. De "Lees verder" eronder wordt
   met margin-top: auto naar de onderkant geduwd, zodat die links ook
   onderling op één lijn staan. */
.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
}

.artikel-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ivo-orange);
}

/* Beeld op de artikelkaart. De verhouding ligt vast, zodat een rij kaarten
   één lijn houdt ook als de foto's verschillend zijn uitgesneden. De link
   staat op aria-hidden en buiten de tabvolgorde, want de titel eronder gaat
   naar dezelfde plek; twee keer dezelfde link achter elkaar is voor wie met
   het toetsenbord of een schermlezer werkt alleen maar lastig. */
.artikel-kaart-beeld {
  display: block;
  margin-bottom: 0.3rem;
  overflow: hidden;
  background: rgb(var(--navy-rgb) / 0.06);
}
.artikel-kaart-beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.artikel-kaart:hover .artikel-kaart-beeld img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .artikel-kaart-beeld img { transition: none; }
  .artikel-kaart:hover .artikel-kaart-beeld img { transform: none; }
}

.artikel-meta {
  margin: 0;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}
.artikel-meta .scheider { margin-inline: 0.5em; }
.artikel-titel {
  margin: 0;
  font-family: var(--font-titel);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .artikel-titel { color: var(--ivo-navy); }
.artikel-kaart:hover .artikel-titel a { color: var(--ivo-orange); }
.artikel-aanzet { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--zacht); }
.artikel-lees { margin: 0.3rem 0 0; }
/* Duwt de leeslink naar de onderkant van de kaart, zodat hij in elke
   kaart van een rij op dezelfde hoogte staat, ook als de aanzet korter
   of langer is. */
.artikel-kaart .artikel-lees { margin-top: auto; }

/* Filter op contentpijler op het artikeloverzicht. */
.pijlerfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(28px, 3vw, 48px);
}
.pijlerknop {
  padding: 0.55em 1.2em;
  border: 1px solid var(--hairline);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pijlerknop:hover { border-color: var(--ivo-orange); color: var(--ivo-orange); }
.pijlerknop.actief {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}

.artikelen-leeg { max-width: 60ch; display: grid; gap: 1.2rem; }

.artikel-pijlers {
  max-width: 64ch;
  margin: 2.4rem auto 0;
  padding-top: 1.2rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   20.9 KLEINE DINGEN
   ------------------------------------------------------------------------- */
/* Compacte hero voor subpagina's: dezelfde opbouw, minder hoogte. */
.hero-compact { min-height: min(72svh, 720px); }
.hero-compact h1 { font-size: clamp(2rem, 4.4vw, 4.6rem); }

/* Leesbreedte voor losse tekstpagina's. */
.entry-smal { max-width: 64ch; margin-inline: auto; }
.entry-smal h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 2.2rem 0 0.8rem; }
.entry-smal p { color: var(--zacht); }

.contact-zijkant { display: grid; gap: 1.4rem; align-content: start; }
.contact-noot {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--zacht);
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--ivo-orange);
}

.media-tekst .sectie-titel,
.contact-tekst .sectie-titel { margin-bottom: 1.4rem; }

/* -------------------------------------------------------------------------
   21. SMALLE SCHERMEN - koppen die anders middenin een woord breken
   Op 360 en 390px zijn "personeelstekort" (hero) en "horecamedewerker" (de
   pijlertitel) breder dan de kolom. Met overflow-wrap: break-word hakt de
   browser ze dan doormidden, en dat leest als een fout.

   De maten zijn niet geschat maar teruggerekend met de woordbreedtecontrole
   in sweep.js, in de echte letter: het langste woord moet binnen de kolom
   passen op 360px, de smalste breedte die we ondersteunen.
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  h1 { font-size: 1.95rem; }
  .sectie-titel { font-size: 1.75rem; }
  .sectie-visie .statement { font-size: 1.75rem; }
}

/* -------------------------------------------------------------------------
   FORMULIEREN

   Eigen formulieren in het thema, zonder plugin. De maatvoering volgt de
   rest van de site: labels klein maar niet piepklein, invoervelden met
   dezelfde hoogte als een knop, en een duidelijke focusring want daar
   navigeert een deel van de bezoekers op.
   ------------------------------------------------------------------------- */
.it-formulier {
  max-width: 54rem;
}

.it-formulier-uitleg {
  margin: 0 0 1.6rem;
  max-width: 54ch;
  color: var(--zacht);
}

.it-formulier-velden {
  display: grid;
  gap: 1.1rem;
}

.it-formulier-rij {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 620px) {
  .it-formulier-rij { grid-template-columns: 1fr; }
}

.it-formulier-veld {
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.it-formulier-veld label {
  /* Het thema zet labels elders in kleine hoofdletters met veel spatiëring.
     Bij een formulier werkt dat tegen je: dat is precies het soort label dat
     op een telefoon slecht leest, en hier moet een bezoeker ze alle vijf
     snappen voordat hij iets invult. Dus gewone schrijfwijze. */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.it-formulier-veld .verplicht {
  color: var(--ivo-orange);
}

.it-formulier-veld input,
.it-formulier-veld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ivo-navy);
  /* Sky in plaats van wit: het merkboek kent geen wit, en een invoerveld
     dat net iets lichter is dan het vlak eromheen leest prima zolang de
     rand het werk doet. */
  background: var(--ivo-sky);
  border: 1px solid rgb(var(--navy-rgb) / 0.3);
  border-radius: var(--radius);
}

/* Op een Sky-vlak zou het veld wegvallen; daar krijgt het een iets diepere
   rand in plaats van een andere vulling. */
.vlak-sky .it-formulier-veld input,
.vlak-sky .it-formulier-veld textarea {
  border-color: rgb(var(--navy-rgb) / 0.45);
}

.it-formulier-veld textarea {
  resize: vertical;
  min-height: 9rem;
}

.it-formulier-veld input:focus-visible,
.it-formulier-veld textarea:focus-visible,
.it-formulier-akkoord input:focus-visible {
  outline: 3px solid var(--ivo-orange);
  outline-offset: 2px;
  border-color: var(--ivo-navy);
}

.it-formulier-akkoord {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zacht);
  max-width: 62ch;
}

.it-formulier-akkoord a {
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* De akkoordregel is een zin, geen veldnaam. Het blok hierboven zette
   hem al op gewone kapitalisatie, maar `.it-formulier label` is
   specifieker en won, dus stond de hele privacyzin in gespatieerde
   kapitalen. */
.it-formulier-akkoord label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.it-formulier-akkoord input {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
}

.it-formulier-knop {
  margin: 0.4rem 0 0;
}

/* Het vangnetveld staat buiten beeld in plaats van op display:none, want
   sommige invulrobots slaan verborgen velden over en lopen hier dan juist
   wel in. Schermlezers slaan het over door aria-hidden op de wikkel. */
.it-formulier-vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.it-formulier-gelukt {
  padding: 1.6rem 1.8rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(var(--navy-rgb) / 0.04);
}

.it-formulier-gelukt-titel {
  margin: 0 0 0.4rem;
  font-family: var(--font-titel);
  font-size: 1.3rem;
  font-weight: 600;
}

.it-formulier-gelukt p:last-child { margin-bottom: 0; }

.it-formulier-fout {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(255 107 44 / 0.08);
  font-weight: 600;
}

.vlak-navy .it-formulier-veld input,
.vlak-navy .it-formulier-veld textarea {
  background: var(--ivo-sky);
  border-color: rgb(var(--sky-rgb) / 0.5);
}

.vlak-navy .it-formulier-uitleg,
.vlak-navy .it-formulier-akkoord {
  color: rgb(var(--sky-rgb) / 0.8);
}

.vlak-navy .it-formulier-akkoord a { color: var(--ivo-sky); }

/* -------------------------------------------------------------------------
   JURIDISCHE PAGINA'S

   Privacy, cookies en voorwaarden zijn doorlopende documenten met koppen,
   lijsten en tabellen. De tekstbloksectie waarin ze staan is gemaakt voor
   een korte redactionele passage: daar staat normaal één kop in, groot en
   in hoofdletters en zonder marge. Op een document van vijfhonderd woorden
   levert dat een opeengedrukte brij op. Vandaar eigen maatvoering, scherp
   afgebakend op .juridisch-tekst zodat geen enkel ander tekstblok verandert.
   ------------------------------------------------------------------------- */
.juridisch-tekst > *:first-child { margin-top: 0; }
.juridisch-tekst > *:last-child { margin-bottom: 0; }

/* De juridische pagina's lopen over de volle contentbreedte, net als de
   rest van de site. Alleen de lopende tekst krijgt een rem mee: een regel
   van 1560 pixels is ruim 200 tekens lang en daar raakt een lezer bij elke
   regelovergang de draad kwijt. Koppen, lijsten en tabellen gebruiken de
   hele breedte, want die winnen er wel bij. */
.sectie-tekstblok:has(.juridisch-tekst) .tekstblok-tekst {
  max-width: none;
}

.juridisch-tekst p { max-width: 90ch; }

.juridisch-tekst .juridisch-datum {
  margin: 0 0 2.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.juridisch-tekst h2 {
  margin: 2.8rem 0 0.9rem;
  font-family: var(--font-titel);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivo-navy);
}

.juridisch-tekst h3 {
  margin: 1.9rem 0 0.5rem;
  font-family: var(--font-titel);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivo-navy);
}

.juridisch-tekst p {
  margin: 0 0 1.15rem;
  line-height: 1.75;
}

.juridisch-tekst ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.juridisch-tekst a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.juridisch-tekst table {
  width: 100%;
  margin: 0.4rem 0 1.8rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.juridisch-tekst th,
.juridisch-tekst td {
  padding: 0.75rem 1.2rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid rgb(var(--navy-rgb) / 0.14);
}

.juridisch-tekst thead th {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-navy);
  border-bottom-width: 2px;
}

.juridisch-tekst td { color: var(--zacht); }

/* Op een telefoon past een tabel van vijf kolommen niet. Dan wordt elke rij
   een blokje onder elkaar, in plaats van een tabel die horizontaal schuift. */
@media (max-width: 680px) {
  .juridisch-tekst table,
  .juridisch-tekst tbody,
  .juridisch-tekst tr,
  .juridisch-tekst td {
    display: block;
    width: 100%;
  }
  .juridisch-tekst thead { display: none; }
  .juridisch-tekst tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgb(var(--navy-rgb) / 0.14);
  }
  .juridisch-tekst td {
    padding: 0 0 0.35rem;
    border: 0;
  }
  .juridisch-tekst td:first-child {
    font-weight: 600;
    color: var(--ivo-navy);
  }
}

/* Nieuwsbriefaanmelding in de voettekst. Eén veld en een knop, naast elkaar
   waar het past en onder elkaar op een telefoon. Verschijnt alleen wanneer
   er een nieuwsbrieflijst is ingesteld. */
.voet-nieuwsbrief {
  margin-bottom: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgb(var(--sky-rgb) / 0.18);
}

.voet-nieuwsbrief-titel {
  margin: 0 0 1rem;
  font-family: var(--font-titel);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.voet-nieuwsbrief .it-formulier { max-width: 34rem; }

.voet-nieuwsbrief .it-formulier-uitleg {
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

@media (min-width: 720px) {
  .voet-nieuwsbrief .it-formulier-velden {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 0.8rem;
  }
  .voet-nieuwsbrief .it-formulier-akkoord { grid-column: 1 / -1; }
  .voet-nieuwsbrief .it-formulier-knop { margin: 0; }
}

/* -------------------------------------------------------------------------
   23. MERKPORTAAL - kleuren, logo's, letters, en de blokken eromheen

   Deze pagina stond eerder als één lap losse HTML in de editor, met drie
   eigen stijlblokken erin. Die kon per definitie uit de pas lopen met de
   rest van de site. Nu tekenen de kaartjes met dezelfde variabelen als
   alles hier, dus een kleurwijziging komt vanzelf op het merkportaal
   terecht en de kleurcontrole kijkt mee.
   ------------------------------------------------------------------------- */

.btn-klein {
  padding: 0.6rem 1rem;
  /* Niet kleiner dan de gewone knop van het thema, die op 0,72rem staat
     en uitkomt op bijna elf pixels. Daaronder wordt een knop met wijde
     letterafstand in hoofdletters lastig te lezen. */
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  gap: 0.4rem;
}

/* 23.1 Kleurenpalet
   ------------------------------------------------------------------------- */
/* Vier kaarten, dus een vast ritme: 1, 2, 4. Met auto-fit maakte de
   browser zes sporen waarvan er twee leeg bleven, en dat gaf een rij die
   niet uitkwam op de kolom eronder. */
.kleurkaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.2vw, 48px);
}
@media (min-width: 560px) {
  .kleurkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .kleurkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Het kleurvlak loopt tot aan de rand van de kaart; de tekst staat
   eronder met eigen binnenruimte. Een vlak met lucht eromheen leest als
   een plaatje van een kleur, tegen de rand leest het als de kleur zelf. */
.kleurkaart {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.kleurkaart-rol {
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) 0;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* Een rand om het vlak, want zonder rand is Ivo Sky op een Sky-paneel
   onzichtbaar en zie je niet dat er een kleurkaartje staat. */
/* Het vlak staat los van de kaartrand en heeft rondom een lijn. Dat is
   geen versiering: Navy op een Navy-paneel en Sky op een Sky-paneel
   hebben dezelfde kleur als hun ondergrond, en zonder lijn rondom lijkt
   zo'n kaartje leeg in plaats van dat het de kleur toont. Een vlak dat
   tot aan de rand doorliep zag er rustiger uit, maar liet precies de
   twee kleuren verdwijnen die het vaakst gebruikt worden. */
.kleurkaart-vlak {
  display: block;
  height: clamp(84px, 9vw, 116px);
  margin: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px) 0;
  border: 1px solid var(--hairline);
}

.kleurkaart-naam {
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) 0.5rem;
  font-family: var(--font-titel);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kleurkaart-waarden {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0 clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px);
  font-size: 0.82rem;
  color: var(--zacht);
}
/* Label links, waarde direct erachter op een vaste kolom. Met
   space-between dreven ze op een brede kaart zo ver uit elkaar dat je ze
   niet meer als paar las. */
.kleurkaart-waarden > div {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
}
.kleurkaart-waarden dt {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.kleurkaart-waarden dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.kleur-steun,
.kleur-verhouding {
  max-width: 78ch;
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--zacht);
}
.kleur-steun-label {
  display: block;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .kleur-steun-label { color: var(--ivo-navy); }

/* 23.2 Logovarianten
   ------------------------------------------------------------------------- */
/* Zes varianten, dus drie kolommen op een breed scherm: twee nette
   rijen van drie. Met auto-fit werden het er vijf naast elkaar met één
   eenzame kaart eronder, en dat was precies de rommeligheid. */
.logokaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.2vw, 48px);
}
@media (min-width: 560px) {
  .logokaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .logokaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.logokaart {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--hairline);
}

/* Het proefvlak draagt zijn eigen achtergrond, want daar gaat het om: een
   inverse logo hoort op donker te staan, ook als het paneel licht is. */
.logokaart-proef {
  display: grid;
  place-items: center;
  min-height: clamp(110px, 11vw, 150px);
  padding: clamp(18px, 2vw, 28px);
}
.logokaart-proef.op-licht { background: var(--ivo-sky); }
.logokaart-proef.op-donker { background: var(--ivo-navy); }
.logokaart-proef img {
  max-width: 100%;
  max-height: clamp(44px, 5vw, 64px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.logokaart-onder {
  display: grid;
  gap: 0.3rem;
  padding: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--hairline);
}

.logokaart-naam {
  font-family: var(--font-titel);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.logokaart-rol { font-size: 0.84rem; color: var(--zacht); }

/* Twee knoppen van gelijke breedte naast elkaar. Onder elkaar zagen ze
   eruit als twee losse regels in plaats van als één keuze tussen twee
   bestandssoorten. */
.logokaart-knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
}
.logokaart-knoppen .btn { justify-content: center; }

.logoregels {
  max-width: 78ch;
  margin-top: clamp(28px, 3vw, 44px);
}
.logoregels-titel {
  margin: 0 0 0.8rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.logoregels ul {
  display: grid;
  gap: 0.5rem;
}
.logoregels li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--zacht);
}
.logoregels li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--ivo-orange);
}

/* 23.3 Typografie
   ------------------------------------------------------------------------- */
.letterkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(28px, 3.2vw, 48px);
}

.letterkaart {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--hairline);
}

.letterkaart-rol {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.letterkaart-naam {
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1;
}
.letterkaart-naam.is-titel {
  font-family: var(--font-titel);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.letterkaart-naam.is-tekst {
  font-family: var(--font-tekst);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: none;
}

.letterkaart-proef {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.6rem;
  border-block: 1px solid var(--hairline);
}
.letterkaart-proef p { margin: 0; }
.letterkaart-proef.is-titel p {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.letterkaart-proef.is-tekst p:first-child {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}
.letterkaart-proef.is-tekst p:last-child {
  font-family: var(--font-tekst);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--zacht);
}

.letterkaart-uitleg {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--zacht);
}

.letterkaart-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
}
.letterkaart-gewicht {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.letterhierarchie {
  max-width: 78ch;
  margin-top: clamp(28px, 3vw, 44px);
}
.letterhierarchie-titel {
  margin: 0 0 0.8rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.letterhierarchie dl {
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.letterhierarchie dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hairline);
}
.letterhierarchie dt {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.letterhierarchie dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--zacht);
}

/* 23.4 Download
   ------------------------------------------------------------------------- */
/* Een kader eromheen, zodat het blok leest als één ding dat je kunt
   ophalen. Zonder kader zweefde er een oranje knop in het midden van een
   leeg vlak, met daaronder een losse regel kleine hoofdletters. */
.downloadblok {
  max-width: 62ch;
  margin-top: clamp(24px, 2.8vw, 40px);
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--hairline);
}
.downloadblok .sectie-titel { margin-bottom: 0.8rem; }
.downloadblok .lead { max-width: none; }
.downloadblok-knop { margin: clamp(20px, 2.2vw, 30px) 0 0; }
.downloadblok-meta {
  margin: 0.9rem 0 0;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* 23.5 Ingesloten venster
   ------------------------------------------------------------------------- */
.insluiting {
  margin-top: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--hairline);
  /* De hoogte komt uit het veld, maar nooit hoger dan het scherm min de
     header: anders moet iemand op een telefoon eerst door een venster van
     800 pixels heen voordat de pagina weer verdergaat. */
  height: min(var(--insluit-hoogte, 800px), calc(100svh - var(--header-h) - 40px));
}
.insluiting iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.insluiting-bron {
  max-width: 78ch;
  margin: 0.9rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--zacht);
}
.insluiting-bron a { border-bottom: 1px solid currentColor; }

/* -------------------------------------------------------------------------
   24. KOPPEN DIE NIET MIDDEN IN EEN WOORD MOGEN BREKEN

   De koppen staan in hoofdletters en hebben een regelbreedte in ch. Dat
   werkt zolang het langste woord in die breedte past, maar ch is de
   breedte van het cijfer nul en een hoofdletter is in deze letter ruim
   een derde breder. Negentien ch biedt dus plaats aan ongeveer veertien
   hoofdletters, en Nederlandse samenstellingen zijn vaak langer:
   "BESCHIKBAARHEID" is er vijftien. Die viel buiten de kolom, en
   overflow-wrap hakte hem zonder koppelteken doormidden:
   "BESCHIKBAARHEI / D OPVRAGEN".

   Automatisch afbreken is geen oplossing: Chrome levert voor deze
   woorden geen Nederlandse afbreekpunten, dat is nagemeten. Een kleinere
   letter of een bredere kolom zou het ontwerp veranderen voor alle
   koppen, terwijl het probleem maar af en toe speelt.

   min-width: min-content lost het precies daar op waar het speelt: de
   kop houdt zijn ingestelde regelbreedte voor gewone tekst, en wordt
   alleen breder wanneer één woord dat afdwingt. Past het dan nog niet,
   bijvoorbeeld op een telefoon, dan breekt overflow-wrap alsnog; dat is
   daar ook het enige wat kan.
   ------------------------------------------------------------------------- */
.sectie-titel,
.blok-titel,
.hero h1,
.pagina-hero h1,
.kpi-kop .sectie-titel,
.merken-kop .sectie-titel {
  min-width: min-content;
}

/* =========================================================================
   0.22.0 STAP 1: LEESBAARHEID EN CONTRAST
   ========================================================================= */
/* Kleine oranje labels op een licht vlak haalden 2,6:1. Zelfde regel als
   bij de koppen: op licht wordt het navy, op donker blijft het oranje. */
.vlak-sky .publicatie-soort,
.vlak-sky .media-onderwerpen h3 { color: var(--titel-op-licht); }

/* Kapitaalkoppen op een smal scherm: een fractie meer regelwit, zodat
   "HORECAMEDEWERKER" en "WAAR IK VANDAAN KOM" niet tegen elkaar plakken. */
@media (max-width: 480px) {
  h1, h2 { line-height: 1; }
}

/* De juridische links onderaan waren 18 pixel hoog. */
.footer-onderrand a { display: inline-block; padding-block: 4px; }

/* =========================================================================
   0.22.0 STAP 2: HERO
   ========================================================================= */
/* De herofoto als echte afbeelding in plaats van een achtergrond. Zelfde
   uitsnede als voorheen: rechts, op achtentwintig procent van boven. */
.hero-beeld picture,
.hero-beeld .hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.hero-beeld .hero-foto {
  object-fit: cover;
  object-position: right 28%;
}
.hero-beeld::after { z-index: 1; }
@media (max-width: 899px) {
  .hero-beeld .hero-foto { object-position: 72% center; }
}

/* De navigatie stond los op de foto en viel weg tegen lichte plekken
   ("Media" en "De merken" tegen de lampen). Een verloop van navy naar
   transparant achter de balk geeft de witte items altijd genoeg contrast.
   Na scrollen wordt de balk dicht navy, zoals het was. */
.site-header:not(.is-gekrompen) {
  background: linear-gradient(
    180deg,
    rgb(var(--navy-rgb) / 0.88) 0%,
    rgb(var(--navy-rgb) / 0.62) 60%,
    rgb(var(--navy-rgb) / 0) 100%
  );
  /* Verloop ook onder de (transparante) onderrand laten lopen en niet herhalen;
     anders toont die 1px-rand de donkere bovenkant van een herhaald verloop. */
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* Pauzeknop van de lopende band: 44 bij 44, rechts op de band. */
.hero-band-pauze {
  position: absolute;
  right: max(8px, calc(var(--gutter) / 2));
  bottom: calc((var(--band-h) - var(--doel-min)) / 2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doel-min);
  height: var(--doel-min);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgb(var(--navy-rgb) / 0.9);
  color: var(--ivo-sky);
  cursor: pointer;
}
.hero-band-pauze:hover { border-color: var(--ivo-orange); color: var(--ivo-orange); }
.hero-band-pauze:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 2px; }
/* Pauzeteken: twee staande streepjes. Gepauzeerd: een afspeeldriehoek. */
.hero-band-pauze span {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}
.hero-band-pauze[aria-pressed="true"] span {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 6px solid transparent;
  border-left: 10px solid currentColor;
  margin-left: 3px;
}
.hero-band:hover .hero-band__spoor,
.hero:has(.hero-band-pauze:focus-visible) .hero-band__spoor,
.hero.band-gepauzeerd .hero-band__spoor { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-band-pauze { display: none; }
}

/* =========================================================================
   0.22.0 STAP 3: AFBEELDINGEN EN LETTERS
   ========================================================================= */
/* Met een Adobe Fonts-kit neemt Futura PT de titels over, zoals bedoeld. */
.heeft-futura { --font-titel: "futura-pt", "Futura PT", "Futura PT Book", "Jost", "Jost terugval", sans-serif; }

/* Picture-elementen gedragen zich als het beeld erin. */
.merk-beeld picture,
.portret-beeld picture { display: contents; }
.merk-beeld img { aspect-ratio: 4 / 3; }

/* =========================================================================
   0.22.0 STAP 4: WAT OPDRACHTGEVERS ZEGGEN
   Lichte sectie direct na de keynotes. Staan beide op Sky, dan lopen ze
   door als één blok met een lijn ertussen, zodat het ritme van de rest
   van de pagina niet verschuift.
   ========================================================================= */
.sectie-keynotes.vlak-sky + .sectie-testimonials.vlak-sky { padding-top: 0; }
.sectie-keynotes.vlak-sky + .sectie-testimonials.vlak-sky > .container {
  border-top: 1px solid var(--hairline);
  padding-top: var(--pad-sectie);
}
.sectie-testimonials .sectie-titel { margin-bottom: clamp(28px, 3vw, 48px); }

.testimonials-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  margin: 0 0 clamp(36px, 4vw, 64px);
}
.testimonials-logos img {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
}

.testimonials-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
@media (min-width: 860px) {
  .testimonials-raster { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/* Zelfde letter en kleur als de grote quote, zonder het zandvlak: een
   oranje streep links draagt het merkaccent. */
.testimonial {
  margin: 0;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--ivo-orange);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-titel);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  color: rgb(var(--navy-rgb) / 0.88);
  text-wrap: pretty;
}
.vlak-navy .testimonial blockquote { color: rgb(var(--sky-rgb) / 0.92); }
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { margin-top: 1.1rem; }
.testimonial-naam {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.testimonial-functie { display: block; font-size: 0.95rem; color: var(--zacht); }

/* Voorbeeldweergave: onmiskenbaar plaatshouder, gestippeld en met noot. */
.testimonials-voorbeeldnoot {
  margin: -0.5rem 0 1.6rem;
  font-size: 0.95rem;
  color: var(--zacht);
}
.is-voorbeeld .testimonial { border-left-style: dashed; }
.testimonials-logos.is-voorbeeld li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 44px;
  border: 1px dashed var(--hairline);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* =========================================================================
   0.22.0 STAP 5: LAYOUT
   ========================================================================= */

/* --- Artikelen: hooguit drie naast elkaar, elk met een 3:2-beeld ---------- */
@media (min-width: 900px) {
  .sectie-columns .artikel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.artikel-kaart-beeld { aspect-ratio: 3 / 2; }
.artikel-kaart-beeld img { height: 100%; }
/* Zonder uitgelichte afbeelding: navy vlak met de oranje accentstreep. */
.artikel-kaart-beeld.is-leeg {
  position: relative;
  background: var(--ivo-navy);
}
.vlak-navy .artikel-kaart-beeld.is-leeg { background: rgb(var(--sky-rgb) / 0.06); }
.artikel-kaart-accent {
  position: absolute;
  left: 8%;
  bottom: 14%;
  width: 56px;
  height: 4px;
  background: var(--ivo-orange);
}

/* --- Waar ik over spreek: gewoon raster, nummer links van de titel -------- */
.sectie-expertise .expertise-raster,
.sectie-expertise .expertise-raster:has(.expertise-tegel:nth-child(5)) {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px);
}
@media (min-width: 700px) {
  .sectie-expertise .expertise-raster,
  .sectie-expertise .expertise-raster:has(.expertise-tegel:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sectie-expertise .expertise-raster,
  .sectie-expertise .expertise-raster:has(.expertise-tegel:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sectie-expertise .expertise-tegel,
.sectie-expertise .expertise-raster .expertise-tegel:nth-child(n) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.4vw, 22px);
  row-gap: 0.5rem;
  align-items: baseline;
  margin-top: 0;
}
.sectie-expertise .expertise-raster .expertise-tegel .tegel-nummer {
  grid-row: span 2;
  margin: 0;
  font-size: clamp(2.2rem, 3vw, 3rem);
}
.sectie-expertise .expertise-raster .expertise-tegel .tegel-titel { font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem); letter-spacing: 0.01em; }
.sectie-expertise .expertise-raster .expertise-tegel .tegel-tekst { grid-column: 2; font-size: 0.94rem; line-height: 1.55; }

/* --- Keynotes: de hele kaart is de link ----------------------------------- */
.keynote { position: relative; transition: background-color 0.25s ease; }
.keynote-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.keynote:hover,
.keynote:focus-within { background: rgb(var(--orange-rgb) / 0.06); }
.keynote:focus-within .keynote-pijl {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}
.keynote-pijl { width: var(--doel-min); height: var(--doel-min); font-size: 1.1rem; }

/* --- Voor wie: de hele regel reageert ------------------------------------- */
.doelgroep-link:hover .doelgroep-wie,
.doelgroep-link:focus-visible .doelgroep-wie { color: var(--ivo-orange); }
.doelgroep-link:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 2px; }
.doelgroep-link:focus-visible .doelgroep-route .pijl { transform: translateX(6px); }
.doelgroep-route .pijl { display: inline-block; transition: transform 0.25s ease; }

/* --- Publicaties: link naar de volledige lijst ---------------------------- */
.publicaties-meer { margin-top: 1.6rem; }
.publicaties-meer .btn-tekst { font-weight: 600; }

/* --- Over Ivo: liggende foto in het staande kader ------------------------- */
/* Focuspunt links van het midden, zodat het boek en het gezicht allebei
   in beeld blijven. */
.portret-beeld.is-liggend img { object-position: 30% center; }

@media (prefers-reduced-motion: reduce) {
  .keynote, .doelgroep-route .pijl { transition: none; }
}

/* =========================================================================
   0.22.0 STAP 6: FORMULIER
   ========================================================================= */
/* Foutmelding onder het veld. Geen nieuwe kleur: op een licht vlak navy
   tekst met een oranje markering (oranje tekst haalt daar maar 2,6:1), op
   een donker vlak oranje tekst (5,5:1). Het veld krijgt een dikkere oranje
   rand, zodat de fout niet alleen aan kleur van de tekst te zien is. */
.it-veldfout {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--titel-op-licht);
}
.it-veldfout[hidden] { display: none; }
.it-veldfout::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--ivo-orange);
  color: var(--ivo-navy);
  font-size: 0.8em;
  font-weight: 700;
}
.vlak-navy .it-veldfout,
.site-footer .it-veldfout { color: var(--ivo-orange); }
.it-formulier-veld.heeft-fout input,
.it-formulier-veld.heeft-fout textarea,
.vlak-sky .it-formulier-veld.heeft-fout input,
.vlak-sky .it-formulier-veld.heeft-fout textarea {
  border: 2px solid var(--ivo-orange);
}
.it-formulier-fout {
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(var(--orange-rgb) / 0.08);
  font-weight: 600;
}
.it-formulier-gelukt:focus { outline: none; }
.it-formulier-gelukt:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 3px; }

/* Privacyregel: tekst minimaal 14 pixel, vinkje 20 bij 20 met een
   klikgebied van 44 pixel hoog (het hele label is klikbaar). */
.it-formulier-akkoord { font-size: 0.875rem; }
.it-formulier-akkoord label {
  min-height: var(--doel-min);
  align-items: start;
  gap: 0.75rem;
  padding-block: 0.25rem;
  cursor: pointer;
}
.it-formulier-akkoord input {
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--ivo-orange);
  cursor: pointer;
}
.it-formulier-akkoord .it-veldfout { margin-top: 0.4rem; }

.contact-gegevens li a { text-decoration: underline; text-underline-offset: 0.2em; }