/* ============================================================================
   assets/css/hsb-home.css — de homepage, zoals in het canvas
   2 november 2026

   Het ontwerp in Claude Design werkt met inline stijlen; zo werkt dat
   programma nu eenmaal. Hier zijn die stijlen omgezet naar klassen, want in
   deze site hoort opmaak in een los bestand en niet in de HTML.

   Alle namen beginnen met hm- (home). Daardoor kan geen enkele regel hier
   iets raken op een andere pagina, ook niet als een klassenaam elders
   toevallig hetzelfde heet.

   De maten komen één op één uit het canvas: secties 104px lucht, een baan van
   1240px, koppen van 40px, kaarten met de huisstijlhoeken 24/2.
   ============================================================================ */

.hm {
  --blauw: #103856;
  --blauw-diep: #0b2740;
  --licht: #eef4f9;
  --licht-2: #f7fafc;
  --lijn: #dce6ef;
  --tekst: #16222e;
  --grijs: #5a6b7b;
  --cta: #c24d16;
  --cta-donker: #a63f0f;

  color: var(--tekst);
  background: #fff;
}

/* Bootstrap zet dit op de hele pagina, dus live klopt het altijd. Toch staat
   het hier ook: de maten in dit bestand zijn allemaal op border-box gerekend,
   en als bootstrap ooit wegvalt of een pagina hem niet laadt, schuift de hele
   homepagina 32px scheef zonder dat iemand begrijpt waarom. */
.hm, .hm *, .hm *::before, .hm *::after { box-sizing: border-box; }

/* Koppen in Museo700, de merkletter. Die wordt geladen in site.css.
   Lopende tekst in dezelfde letter als de rest van de site, zodat de
   homepagina niet uit de toon valt. Hier staat geen enkele andere
   lettersoort: de koppen zijn overal Museo700. */
.hm h1, .hm h2, .hm h3, .hm h4, .hm h5, .hm h6, .hm .hm-kop {
  font-family: "Museo700", sans-serif;
  letter-spacing: -0.015em;
}
.hm, .hm p, .hm span, .hm a, .hm strong {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
}
.hm a { color: var(--blauw); }
.hm a.hm-schoon { text-decoration: none; }


/* ---------------------------------------------------------------------------
   Secties en de baan erin
   --------------------------------------------------------------------------- */
.hm-sectie       { padding: 104px 32px; background: #fff; }
.hm-sectie--licht{ background: var(--licht); }
.hm-sectie--vlak { background: var(--licht-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 72px 32px; }
.hm-sectie--breed{ padding: 104px 0; overflow: hidden; }
.hm-baan         { max-width: 1240px; margin: 0 auto; }
.hm-baan--smal   { max-width: 1240px; margin: 0 auto; padding: 0 32px; }


/* ---------------------------------------------------------------------------
   Koppen
   --------------------------------------------------------------------------- */
.hm-aanhef {
  margin: 0 0 16px; font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--grijs);
}
.hm-titel  { margin: 0 0 14px; font-size: 40px; line-height: 1.14; font-weight: 700; color: var(--blauw); }
.hm-lead   { margin: 0; font-size: 17.5px; line-height: 1.7; color: var(--grijs); max-width: 40em; }
.hm-blok   { max-width: 46em; margin-bottom: 52px; }

/* Kop links, knoppen rechts — de carrousels. */
.hm-kopregel {
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 44px;
}
.hm-kopregel > .hm-kopregel-tekst { flex: 1 1 520px; min-width: 0; max-width: 620px; }
.hm-kopregel > .hm-kopregel-knoppen { flex: 0 0 auto; display: flex; gap: 12px; padding-bottom: 6px; }


/* ---------------------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------------------- */
.hm-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 30px; border-radius: 12px;
  font-size: 16.5px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .22s, color .22s, border-color .22s, transform .1s;
}
.hm-knop:active { transform: translateY(1px); }
.hm-knop--cta   { background: var(--cta); color: #fff; }
.hm-knop--cta:hover { background: var(--cta-donker); color: #fff; }
.hm-knop--lijn  { background: #fff; color: var(--blauw); border-color: #c3d4e2; }
.hm-knop--lijn:hover { background: #e4edf5; border-color: #b9ccdd; color: var(--blauw); }
.hm-knop--blauw { background: var(--blauw); color: #fff; }
.hm-knop--blauw:hover { background: var(--blauw-diep); color: #fff; }

/* De ronde pijlknoppen van een carrousel. */
.hm-rond {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #c3d4e2; border-radius: 999px; background: #fff; color: var(--blauw);
  cursor: pointer; transition: background-color .22s, color .22s, border-color .22s;
}
.hm-rond:hover:not(:disabled) { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.hm-rond:disabled { opacity: .35; cursor: default; }

/* Een tekstlink met een pijl die meeschuift bij aanwijzen. */
.hm-meer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--blauw); text-decoration: none;
}
.hm-pijl { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.hm-kaart:hover .hm-pijl, .hm-meer:hover .hm-pijl { transform: translateX(5px); }


/* ---------------------------------------------------------------------------
   Kaarten — de huisstijlhoeken: rond linksboven en rechtsonder, scherp
   op de andere twee. Groot blok 40/2, kaart 24/2, klein 16/2.
   --------------------------------------------------------------------------- */
.hm-kaart {
  display: block; border-radius: 24px 2px 24px 2px; text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, background-color .3s;
}
.hm-kaart:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16,56,86,.11); }
.hm-kaart--wit  { background: #fff; padding: 30px; }
.hm-kaart--licht{ background: var(--licht); padding: 34px; }


/* ---------------------------------------------------------------------------
   Platform: tekst links, twee cijferkaarten rechts
   --------------------------------------------------------------------------- */
.hm-platform { display: flex; align-items: flex-start; gap: 64px; }
.hm-platform__tekst { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.hm-platform__tekst .hm-lead + .hm-lead { margin-top: 20px; }
/* margin-left:auto duwt de kaarten tegen de rechterrand van de band. Zonder
   die regel blijven ze aan de tekst plakken, omdat de tekstkolom op 640px
   is afgetopt en de overgebleven ruimte dan rechts blijft liggen. */
.hm-platform__cijfers {
  flex: 0 0 340px; margin-left: auto;
  display: flex; flex-direction: column; gap: 20px;
}

.hm-cijfer { padding: 34px 36px; }
.hm-cijfer__getal {
  display: block; font-size: 44px; line-height: 1.05; color: var(--blauw);
}
/* Kleiner dan het getal, maar niet zo klein dat het een voetnoot wordt:
   "16 jaar" moet als één ding te lezen zijn. */
.hm-cijfer__eenheid { font-size: 0.6em; }
.hm-cijfer__label { display: block; margin-top: 12px; font-size: 16px; color: var(--grijs); }

/* Onder de 980px past de kolom er niet meer naast; dan de twee kaarten
   naast elkaar onder de tekst, en op de telefoon onder elkaar. */
@media (max-width: 980px) {
  .hm-platform { display: block; }
  .hm-platform__cijfers {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px;
  }
}
@media (max-width: 560px) {
  .hm-platform__cijfers { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   Carrousel: een baan die horizontaal schuift
   --------------------------------------------------------------------------- */
.hm-rail { position: relative; padding-left: max(32px, calc((100% - 1240px) / 2 + 32px)); }

/* De baan schuift met echte scroll, niet met een transform. Dat scheelt
   rekenwerk in de pijlknoppen en het werkt meteen ook met vegen op mobiel,
   met twee vingers op een trackpad en met shift+scrollwiel. */
.hm-venster {
  overflow-x: auto;

  /* Blijft hidden. clip zou netter zijn (dat knipt alleen af en maakt geen
     scrollbaan), maar naast overflow-x: auto rekent de browser clip terug
     naar hidden; die combinatie bestaat niet. Nagemeten in de browser. */
  overflow-y: hidden;

  scroll-behavior: smooth;

  /* proximity in plaats van mandatory: mandatory dwingt de browser om bij
     elke aanraking op de dichtstbijzijnde kaart uit te komen, en op iOS
     gaat dat ten koste van verticaal vegen. */
  scroll-snap-type: x proximity;

  /* Aan het eind van de rij niet doorschuiven naar de pagina eronder. */
  overscroll-behavior-x: contain;

  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* oude Edge */
}
.hm-venster::-webkit-scrollbar { display: none; }   /* Chrome, Safari */

/* align-items: stretch maakt alle kaarten in een rij even hoog, ook als de
   ene reactie twee regels is en de andere tien. */
.hm-baan-schuif { display: flex; gap: 22px; align-items: stretch; }
.hm-baan-schuif > * { flex: 0 0 286px; scroll-snap-align: start; }

/* Wie liever niet heeft dat er dingen bewegen, krijgt geen zweefscroll. */
@media (prefers-reduced-motion: reduce) {
  .hm-venster { scroll-behavior: auto; }
}


/* ---------------------------------------------------------------------------
   Pijlknoppen rechtsboven en de voortgangsbalk eronder
   --------------------------------------------------------------------------- */
.hm-rond {
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--lijn); color: var(--blauw);
  cursor: pointer; padding: 0;
  transition: background-color .25s, border-color .25s, color .25s, opacity .25s;
}
.hm-rond:hover:not(:disabled) { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.hm-rond:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
/* Uitgeschakeld blijft staan en verspringt dus niet; alleen lichter, zoals in
   het ontwerp waar de linkerknop aan het begin grijs is. */
.hm-rond:disabled { opacity: .4; cursor: default; }

/* De voet onder een carrousel: balk links, de link naar het overzicht er
   rechts naast, op dezelfde regel. De balk neemt de ruimte die overblijft.

   De voet staat naast .hm-rail, niet erin. In een eigen .hm-baan--smal loopt
   hij precies gelijk met de kop erboven en met de linkerrand van de eerste
   kaart; binnen de rail zou de inspringing van de rail er nog eens bovenop
   komen en stond hij 32px scheef. */
.hm-carrouselvoet {
  display: flex; align-items: center; gap: 40px; margin-top: 30px;
}
.hm-carrouselvoet__link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16.5px; font-weight: 700; color: var(--blauw); text-decoration: none;
}
.hm-carrouselvoet__link:hover { color: var(--cta); }
.hm-carrouselvoet__link:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; border-radius: 4px; }

.hm-voortgang {
  flex: 1 1 auto; min-width: 0;
  height: 3px; border-radius: 999px; background: var(--lijn); overflow: hidden;
}

/* Op een smal scherm past de link er niet naast; dan eronder. */
@media (max-width: 760px) {
  .hm-carrouselvoet { display: block; }
  .hm-carrouselvoet__link { margin-top: 24px; }
}
.hm-voortgang__staaf {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--blauw);
  transition: width .2s linear, transform .2s linear;
}

/* Op een smal scherm veeg je; dan zijn de knoppen overbodig. */
@media (max-width: 760px) {
  .hm-kopregel > .hm-kopregel-knoppen { display: none; }
}


/* ---------------------------------------------------------------------------
   Themakaarten met een foto
   --------------------------------------------------------------------------- */
.hm-thema {
  position: relative; height: 380px; overflow: hidden;
  background: linear-gradient(150deg, #1c4f73, #0e2d47);
}
.hm-thema__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* De donkere laag over de foto is geen opsmuk: zonder die laag is witte tekst
   op een willekeurige foto soms wel en soms niet leesbaar, en dan haal je de
   4,5:1 niet die je nodig hebt. Boven lichter dan onder, zodat het onderwerp
   in het midden vrij blijft. */
.hm-thema__sluier {
  position: absolute; inset: 0; transition: opacity .3s;
  background: linear-gradient(180deg,
      rgba(8,22,36,.84)  0%,     /* label, titel en omschrijving staan hier */
      rgba(8,22,36,.60) 34%,
      rgba(8,22,36,.16) 56%,     /* midden blijft open, daar zie je de foto */
      rgba(8,22,36,.46) 80%,
      rgba(8,22,36,.82) 100%);   /* "Ontdek experts" staat hier */
}
.hm-thema:hover .hm-thema__sluier { opacity: .88; }
.hm-thema__tekst { position: absolute; left: 24px; right: 24px; top: 24px; }
.hm-thema__label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.hm-thema__titel { display: block; margin-top: 8px; font-size: 22px; line-height: 1.2; color: #fff; }
.hm-thema__oms   { display: block; margin-top: 10px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.88); }
.hm-thema__meer  { position: absolute; left: 24px; bottom: 22px; color: #fff; }


/* ---------------------------------------------------------------------------
   Personenkaarten (sprekers en dagvoorzitters)
   --------------------------------------------------------------------------- */
/* Let op: beeld en tekst zijn <span>'s binnen een <a>. Een span is standaard
   inline, en op een inline element doen aspect-ratio, overflow en padding-top
   niets. Zonder deze display:block viel de naam onder de kaart weg. */
.hm-persoon { background: #fff; border: 1px solid var(--lijn); overflow: hidden; }
.hm-persoon__beeld {
  display: block;
  position: relative; aspect-ratio: 3 / 4; background: var(--licht);
  overflow: hidden;
}
.hm-persoon__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-persoon__nr {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(255,255,255,.5); color: var(--blauw);
  font-size: 12.5px; font-weight: 700;
}
.hm-persoon__tekst { display: block; padding: 20px 22px 22px; }
.hm-persoon__naam  { display: block; font-size: 18px; color: var(--blauw); margin-bottom: 6px; }
.hm-persoon__oms   { display: block; font-size: 14.5px; line-height: 1.6; color: var(--grijs); min-height: 3.2em; }


/* ---------------------------------------------------------------------------
   Werkwijze: genummerde kaarten
   --------------------------------------------------------------------------- */
.hm-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hm-stap__nr {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; background: #fff;
  color: var(--blauw); font-size: 17px; font-weight: 700; margin-bottom: 22px;
}
.hm-stap h3 { margin: 0 0 10px; font-size: 21px; color: var(--blauw); }
.hm-stap p  { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--grijs); }


/* ---------------------------------------------------------------------------
   Opdrachtgevers: een rij logo's
   --------------------------------------------------------------------------- */
.hm-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 54px; }
.hm-logo   { height: 40px; display: flex; align-items: center; }
.hm-logo img { height: 100%; width: auto; max-width: 140px; object-fit: contain; opacity: .55; transition: opacity .25s; }
.hm-logo:hover img { opacity: 1; }


/* ---------------------------------------------------------------------------
   Ervaringen
   --------------------------------------------------------------------------- */
/* Kaarten in een carrousel, niet in een raster: elk bezoek laat de pagina
   twaalf willekeurige reacties zien en je bladert er zelf doorheen. */
/* figure en blockquote hebben van zichzelf een marge (bij figure zelfs
   40px links en rechts). Die moet eraf, anders staan de kaarten scheef in
   de rij en worden ze ongelijk van hoogte. */
.hm-ervaring, .hm-ervaring__tekst { margin: 0; }
.hm-ervaring {
  display: flex; flex-direction: column;
  padding: 32px;
}
.hm-ervaring__teken { color: #b9cde0; margin-bottom: 18px; flex: 0 0 auto; }

/* De reacties lopen van één zin tot een half A4. Zonder begrenzing wordt de
   hoogste kaart maatgevend en staat er bij de korte een gat van 300 pixels.
   Zes regels, dan drie puntjes. De hele tekst blijft in de pagina staan,
   dus Google en een schermlezer krijgen hem gewoon. */
.hm-ervaring__tekst { margin: 0; flex: 1 1 auto; }
.hm-ervaring__tekst p {
  margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--tekst);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.hm-ervaring__bron  { margin-top: 24px; flex: 0 0 auto; font-size: 14px; color: var(--grijs); }
.hm-ervaring__naam  { display: block; font-weight: 700; color: var(--blauw); font-size: 15px; }
.hm-ervaring__org   { display: block; margin-top: 2px; }
.hm-ervaring__over  { display: block; margin-top: 6px; }
.hm-ervaring__over a { color: var(--blauw); }

/* Een citaat heeft meer regelbreedte nodig dan een foto. 392px is zo breed
   dat er op de band precies drie naast elkaar passen, net als in het
   ontwerp. */
.hm-rail--breed .hm-baan-schuif > * { flex: 0 0 392px; }
@media (max-width: 480px) {
  .hm-rail--breed .hm-baan-schuif > * { flex: 0 0 300px; }
}


/* ---------------------------------------------------------------------------
   Inzichten
   --------------------------------------------------------------------------- */
.hm-inzichten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

/* De kaarten zijn even hoog en de tekst vult de rest, zodat "Lees verder"
   bij alle drie op dezelfde hoogte staat. */
.hm-inzicht { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; }

/* display:block is hier geen opsmuk maar noodzaak: dit is een <span>, en op
   een inline element doet aspect-ratio niets. Zonder deze regel kreeg elke
   foto zijn eigen hoogte, werden de drie kaarten ongelijk, en liep de
   langste kaart over de onderrand van de sectie heen de volgende sectie in. */
.hm-inzicht__beeld {
  display: block; flex: 0 0 auto;
  aspect-ratio: 16 / 10; background: var(--licht); overflow: hidden;
}
.hm-inzicht__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-inzicht__tekst { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; }
.hm-inzicht__label {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grijs);
}
.hm-inzicht__titel { display: block; font-size: 18px; line-height: 1.3; color: var(--blauw); margin-bottom: 8px; }
.hm-inzicht__oms   {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 14.5px; line-height: 1.6; color: var(--grijs); margin-bottom: 16px;
}
.hm-inzicht .hm-meer { margin-top: auto; }

/* Kopregel waarbij de link op dezelfde hoogte staat als de lead eronder,
   niet als de kop. */
.hm-kopregel--onder { align-items: flex-end; }
.hm-kopregel__link { flex: 0 0 auto; padding-bottom: 4px; }


/* ---------------------------------------------------------------------------
   Veelgestelde vragen
   --------------------------------------------------------------------------- */
.hm-vraag { border-bottom: 1px solid var(--lijn); }
.hm-vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px 4px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; color: var(--blauw);
  transition: background-color .22s;
}
.hm-vraag summary::-webkit-details-marker { display: none; }
.hm-vraag summary:hover { background: var(--licht); }
.hm-vraag[open] summary .hm-pijltje { transform: rotate(180deg); }
.hm-pijltje { flex: 0 0 auto; transition: transform .25s; color: var(--grijs); }
.hm-vraag__antwoord { padding: 0 4px 24px; font-size: 16px; line-height: 1.7; color: var(--grijs); max-width: 52em; }


/* ---------------------------------------------------------------------------
   Beslis samen / selectie delen
   --------------------------------------------------------------------------- */
/* Donkerblauw blok met links de tekst en rechts een voorbeeld van zo'n
   gedeelde lijst. Had eerst een foto links; die foto bestond niet op de
   server, dus je zag alleen de alt-tekst in de hoek staan. */
.hm-deel {
  display: flex; align-items: center; gap: 56px;
  background: var(--blauw); color: #fff;
  border-radius: 40px 2px 40px 2px; overflow: hidden;
  padding: 64px;
}
.hm-deel__tekst { flex: 1 1 440px; min-width: 0; }

/* Op donkerblauw moeten kop, aanhef en lead van kleur wisselen; de gewone
   varianten zijn donkerblauw op wit en zouden hier wegvallen. */
.hm-titel--licht  { color: #fff; }
.hm-aanhef--licht { color: #9dbbd6; }
.hm-lead--licht   { color: #c8d8e6; }

/* Het voorbeeldpaneel */
.hm-deel__paneel {
  flex: 0 1 430px; min-width: 0;
  background: rgba(255,255,255,.07);
  border-radius: 20px; padding: 18px;
}
.hm-shortlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
/* min-width:0 op elk niveau: zonder dat weigert een flex- of grid-onderdeel
   smaller te worden dan zijn inhoud, en dan steekt een lange sprekersnaam
   dwars door de rechterrand van het blok heen. */
.hm-shortlist__rij {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  background: rgba(255,255,255,.1); border-radius: 14px; padding: 14px 16px;
}
.hm-shortlist__initialen {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #dce9f4;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.hm-shortlist__wie { flex: 1 1 auto; min-width: 0; }
.hm-shortlist__wie strong {
  display: block; color: #fff; font-size: 16px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-shortlist__wie span {
  display: block; margin-top: 2px; color: #b9cde0; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-shortlist__hart { flex: 0 0 auto; color: #9dbbd6; }
.hm-shortlist__delen {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed rgba(255,255,255,.3); border-radius: 14px;
  padding: 14px; color: #c8d8e6; font-size: 14.5px;
}

/* Witte omlijnde knop: op donkerblauw werkt de gewone witte vlakknop niet,
   die zou het blok domineren.

   Met ".hm" ervoor, want hogerop staat ".hm a { color: var(--blauw) }" en
   dat is een selector met twee onderdelen. Een losse .hm-knop--omlijnd
   verliest daarvan, en dan staat er donkerblauwe tekst op donkerblauw:
   een knop met een rand en niets erin. */
.hm .hm-knop--omlijnd {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.55);
}
.hm .hm-knop--omlijnd:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* Zelfde reden: deze tekst staat op donkerblauw. */
.hm-deel .hm-shortlist__wie strong { color: #fff; }
.hm-deel .hm-shortlist__wie span   { color: #b9cde0; }


/* ---------------------------------------------------------------------------
   Slot
   --------------------------------------------------------------------------- */
.hm-slot {
  background: var(--blauw); color: #fff;
  border-radius: 40px 2px 40px 2px; padding: 64px 48px; text-align: center;
}
.hm-slot h2 { margin: 0 0 14px; font-size: 36px; line-height: 1.16; color: #fff; }
.hm-slot p  { margin: 0 auto 30px; font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 40em; }


/* ---------------------------------------------------------------------------
   Beweging — bewust weggehaald.

   Hier stond een effect dat elk blok liet opkomen zodra het in beeld kwam:

       .hm-op { opacity: 0; animation: hm-op linear both;
                animation-timeline: view(); }

   Dat begint met opacity: 0 en rekent erop dat de animatie hem weer
   zichtbaar maakt. Doet de browser dat niet - en animation-timeline is
   splinternieuw, Safari kan hem wel kennen maar niet aan de pagina
   koppelen - dan blijft alles onder de hero onzichtbaar. Je scrolt dan
   wel, maar je ziet niets veranderen, en dat voelt alsof de pagina
   vastzit. Precies wat er op de iPhone gebeurde.

   Zichtbaarheid van tekst mag nooit afhangen van of een animatie draait.
   Daarom staat het er niet meer in. De klasse hm-op blijft in de opmaak
   staan, hij doet alleen niets meer.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Smaller dan een laptop
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hm-stappen, .hm-inzichten { grid-template-columns: minmax(0, 1fr); }
  .hm-deel { flex-direction: column; align-items: stretch; gap: 36px; padding: 40px 28px; }
  .hm-deel__paneel { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .hm-sectie { padding: 68px 20px; }
  .hm-sectie--breed { padding: 68px 0; }
  .hm-baan--smal { padding: 0 20px; }
  .hm-titel { font-size: 30px; }
  .hm-slot { padding: 44px 24px; }
  .hm-slot h2 { font-size: 27px; }
  .hm-rail { padding-left: 20px; }
}


/* ============================================================================
   DE HERO
   ============================================================================ */
.hm-hero         { padding: 92px 32px 88px; }
.hm-hero__baan   { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.hm-hero__tekst  { flex: 1 1 520px; min-width: 0; }
.hm-hero__aanhef { margin: 0 0 18px; font-size: 20px; font-style: italic; font-weight: 600; color: var(--cta); }
.hm-hero__titel  { margin: 0 0 22px; font-size: 56px; line-height: 1.06; font-weight: 700; color: var(--blauw); font-family: "Museo700", sans-serif; letter-spacing: -0.015em; }
.hm-hero__lead   { margin: 0 0 34px; font-size: 19px; line-height: 1.65; color: var(--grijs); max-width: 32em; }
.hm-hero__knoppen{ display: flex; flex-wrap: wrap; gap: 12px; }

/* De drie feiten onder de knoppen. Geen opsommingstekens: het is een rij, geen lijst om te lezen. */
.hm-hero__feiten {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14.5px; color: var(--grijs);
}
.hm-hero__feiten li { display: flex; align-items: center; gap: 8px; }
.hm-hero__feiten li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px;
  border-radius: 999px; background: var(--cta);
}

.hm-hero__beeld { flex: 0 1 460px; min-width: 320px; }

/* De portretten liggen op elkaar en wisselen elkaar af, vijf seconden per
   spreker. De eerste staat er meteen, de rest fade eroverheen -- zo is er
   geen leeg vlak terwijl een foto nog binnenkomt. */
.hm-portretten {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 40px 2px 40px 2px; background: #d9e6f0;
  box-shadow: 0 20px 52px rgba(16,56,86,.13);
}
.hm-portret { position: absolute; inset: 0; opacity: 0; animation: hm-portret 20s linear infinite; }
.hm-portret:nth-child(1) { opacity: 1; animation-delay: 0s; }
.hm-portret:nth-child(2) { animation-delay: 5s; }
.hm-portret:nth-child(3) { animation-delay: 10s; }
.hm-portret:nth-child(4) { animation-delay: 15s; }
.hm-portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes hm-portret {
  0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; }
}
/* Wie beweging heeft uitgezet, ziet de eerste. */
@media (prefers-reduced-motion: reduce) {
  .hm-portret { animation: none; opacity: 0; }
  .hm-portret:nth-child(1) { opacity: 1; }
}
.hm-portret__label {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  background: rgba(255,255,255,.5); backdrop-filter: blur(6px);
  border-radius: 16px 2px 16px 2px; padding: 12px 16px;
}
.hm-portret__label strong { display: block; font-size: 16px; color: var(--blauw); }
.hm-portret__label span   { display: block; font-size: 13px; color: var(--blauw); opacity: .8; }


/* ============================================================================
   TWEELUIK: tekst naast beeld
   ============================================================================ */
.hm-tweeluik { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hm-tweeluik__tekst { flex: 1 1 460px; min-width: 0; }
.hm-tweeluik__tekst .hm-hero__knoppen { margin-top: 30px; }
.hm-tweeluik__beeld {
  flex: 1 1 420px; min-width: 300px; aspect-ratio: 4 / 3;
  border-radius: 40px 2px 40px 2px; overflow: hidden; background: var(--licht);
}
.hm-tweeluik__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================================
   LOSSE EINDJES
   ============================================================================ */
/* De knop onder een sectie, met lucht erboven. */
.hm-naknop { margin: 36px 0 0; padding: 0 32px; }
.hm-baan .hm-naknop, .hm-deel__tekst .hm-naknop { padding: 0; }
.hm-midden { text-align: center; }
.hm-slot__knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* De werkwijzekaarten staan op een lichte sectie, dus daar zijn ze wit. */
.hm-stap--wit { background: #fff; }
.hm-stap--wit .hm-stap__nr { background: var(--licht); }

/* Hier stonden twee regels die de inzichtkaart op display:block zetten.
   Ze kwamen uit een eerdere ronde, stonden later in het bestand en waren
   specifieker, dus ze overschreven de flexopmaak hierboven. Gevolg: de
   kaart was geen flexkolom meer, en "Lees verder" met margin-top:auto
   bleef gewoon achter de tekst aan hangen in plaats van onderaan de kaart.
   Weggehaald; de opmaak staat nu op één plek, bij de andere
   inzichtregels. */

@media (max-width: 991px) {
  .hm-hero__titel { font-size: 40px; }
  .hm-hero__beeld { flex: 1 1 100%; }
  .hm-tweeluik__beeld { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .hm-hero { padding: 56px 20px 52px; }
  .hm-hero__titel { font-size: 31px; }
  .hm-naknop { padding: 0 20px; }
}