/* Verbeteringen op de gespiegelde casepagina's.
   Wordt als laatste stylesheet geladen, zodat het over Elementor heen gaat.
   Doel: uitlijning herstellen, langer laten lezen en de FAQ leesbaar maken. */

/* ---------------------------------------------------------------
   1. Gerelateerde berichten in de zijbalk
   De uitgelichte afbeeldingen hebben verschillende verhoudingen
   (1186x663 tegenover 1125x690), waardoor de kaarten scheef uitlijnen.
   Vaste verhouding plus object-fit lost dat op.
   --------------------------------------------------------------- */
.elementor-posts .elementor-post__thumbnail {
  /* De uitgelichte afbeeldingen lopen van 1024x1024 (vierkante portretten van
     gasten) tot 2560x1440. Een 16:9-kader snijdt bij een portret het hoofd eraf.
     3:2 ligt dicht bij de meest voorkomende verhouding, en met center top blijft
     het gezicht altijd in beeld. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: #eef4fb;
}
.elementor-posts .elementor-post__thumbnail img,
.elementor-posts .elementor-post__thumbnail__link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

.elementor-posts .elementor-post {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-posts .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: left;
}
.elementor-posts .elementor-post__title,
.elementor-posts .elementor-post__title a {
  text-align: left;
  line-height: 1.34;
  display: block;
}
.elementor-posts .elementor-post__excerpt {
  text-align: left;
}
.elementor-posts .elementor-post__read-more {
  margin-top: auto;
}
.elementor-posts-container .elementor-post__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.elementor-posts-container .elementor-post__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -26px rgba(0, 50, 134, .5);
}

/* ---------------------------------------------------------------
   2. Leestekst links uitlijnen
   Staat twee keer als wens in de reviewdocumenten: casepagina's stonden
   gecentreerd, wat bij lopende tekst slecht leest.

   Deze regel gold eerst ook voor elk los tekstblok op elke pagina. Daarmee
   overschreef hij de uitlijning die het thema zelf zet, en dat was de reden
   dat de tekst onder De Watertoren van Datamanagement links bleef staan
   terwijl de kop erboven netjes in het midden stond. De regel geldt nu alleen
   nog voor de artikeltekst zelf, waar hij voor bedoeld was.
   --------------------------------------------------------------- */
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li {
  text-align: left !important;
}
/* De leesbreedte van 74 tekens klopt, maar zonder auto-marges bleef zo'n
   afgeknepen alinea links in zijn kader staan. Bij een gecentreerde sectie
   stond de tekst daardoor links van de kop erboven. */
.elementor-widget-theme-post-content p,
.elementor-widget-text-editor p {
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
  line-height: 1.74;
}

/* ---------------------------------------------------------------
   3. De FAQ leesbaar maken
   --------------------------------------------------------------- */
.e-n-accordion-item {
  border-bottom: 1px solid #e3e9f2;
}
.e-n-accordion-item-title {
  padding: 18px 4px;
  transition: color .2s ease;
}
.e-n-accordion-item-title:hover {
  color: #0085f2;
}
.e-n-accordion-item-title-text {
  text-align: left;
  line-height: 1.4;
}
.e-n-accordion-item > div,
.e-n-accordion-item .e-con {
  text-align: left;
}

/* ---------------------------------------------------------------
   4. Vervolgblok onder de case
   --------------------------------------------------------------- */
.pb-vervolg {
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 22px 70px;
  text-align: left;
}
.pb-vervolg h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #001a6c;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.pb-vervolg .pb-sub {
  color: #666e80;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 70ch;
}
.pb-ladder {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.pb-trede {
  position: relative;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  padding: 24px 22px 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pb-trede:hover {
  border-color: #0085f2;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgba(0, 50, 134, .5);
}
.pb-trede .pb-nr {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0085f2;
}
.pb-trede h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: #001a6c;
  margin: 8px 0 8px;
  line-height: 1.35;
}
.pb-trede p {
  font-size: .92rem;
  line-height: 1.62;
  color: #666e80;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.pb-trede .pb-merk {
  font-size: .72rem;
  font-weight: 700;
  color: #7a8296;
  letter-spacing: .04em;
}
.pb-trede a {
  color: #0085f2;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}
.pb-trede a:hover {
  text-decoration: underline;
}

.pb-verder {
  border-top: 1px solid #e3e9f2;
  padding-top: 26px;
}
.pb-verder h2 {
  margin-bottom: 14px;
}
.pb-verder ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.pb-verder li a {
  display: block;
  padding: 13px 16px;
  border-radius: 9px;
  background: #f4faff;
  color: #003286;
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pb-verder li a:hover {
  background: #0085f2;
  color: #fff;
}


/* ---------------------------------------------------------------
   5. Tabellen
   Standaard krijgen ze harde lijnen rond elke cel. Zachter maakt ze
   leesbaarder: geen verticale lijnen, lichte streping, ruime celhoogte,
   en op smalle schermen horizontaal schuiven in plaats van persen.
   --------------------------------------------------------------- */
.pb-land table,
.pb-ep table,
.elementor-widget-text-editor table,
.elementor-widget-theme-post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 6px 0 30px;
  font-size: .95rem;
  background: #fff;
  border: 1px solid #e7edf6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(4, 15, 48, .5);
}
.pb-land thead th,
.pb-ep thead th,
.elementor-widget-text-editor thead th,
.elementor-widget-theme-post-content thead th {
  background: #f7fbff;
  color: #001a6c;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #e7edf6;
  white-space: nowrap;
}
.pb-land td,
.pb-ep td,
.elementor-widget-text-editor td,
.elementor-widget-theme-post-content td {
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid #f0f4fa;
  vertical-align: top;
  line-height: 1.6;
  color: #4a5262;
}
.pb-land tbody tr:first-child td,
.pb-ep tbody tr:first-child td,
.pb-vervolg tbody tr:first-child td,
.elementor-widget-text-editor tbody tr:first-child td,
.elementor-widget-theme-post-content tbody tr:first-child td { border-top: 0; }
.pb-land tbody tr:nth-child(even),
.pb-ep tbody tr:nth-child(even),
.pb-vervolg tbody tr:nth-child(even),
.elementor-widget-text-editor tbody tr:nth-child(even),
.elementor-widget-theme-post-content tbody tr:nth-child(even) { background: #fcfdff; }
.pb-land tbody tr:hover,
.pb-ep tbody tr:hover,
.pb-vervolg tbody tr:hover,
.elementor-widget-text-editor tbody tr:hover,
.elementor-widget-theme-post-content tbody tr:hover { background: #f4faff; }
.pb-land td:first-child,
.pb-ep td:first-child,
.pb-vervolg td:first-child,
.elementor-widget-text-editor td:first-child,
.elementor-widget-theme-post-content td:first-child { color: #040f30; font-weight: 600; }
.pb-land td strong,
.pb-ep td strong,
.pb-vervolg td strong,
.elementor-widget-text-editor td strong,
.elementor-widget-theme-post-content td strong { color: #001a6c; }

/* Op smalle schermen schuiven in plaats van persen. */
/* Elke tabel schuift op smalle schermen in plaats van zich te persen, ook de
   tabellen die uit de gespiegelde pagina komen. */
.elementor-widget-text-editor table,
.elementor-widget-theme-post-content table,
.pb-vervolg table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pb-tabelwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 30px; }
.pb-tabelwrap table { margin: 0; min-width: 520px; }

/* ---------------------------------------------------------------
   6. De uitgelichte afbeelding bovenaan een case
   Die varieert van vierkant tot 2560x1440. Zonder kader springt de
   pagina-indeling per case. Vast kader, gezicht boven in beeld.
   --------------------------------------------------------------- */
.elementor-widget-theme-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  display: block;
  background: #eef4fb;
}
@media (max-width: 767px) {
  .elementor-widget-theme-post-featured-image img { aspect-ratio: 3 / 2; }
}

/* Losse afbeeldingen in de lopende tekst netjes houden */
.elementor-widget-theme-post-content img,
.elementor-widget-text-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Kenmerken bovenaan een eigen case: branche en systemen */
.pb-kenmerk { display: flex; flex-wrap: wrap; gap: 8px; margin: -22px 0 34px; padding: 0; }
.pb-kenmerk span {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  background: #f4faff; color: #003286; border: 1px solid #e3e9f2;
  border-radius: 999px; padding: 6px 14px;
}

/* Eigen cover boven een case die niet uit WordPress komt */
.pb-cover {
  display: block; width: 100%; height: auto; aspect-ratio: 3/2;
  object-fit: cover; border-radius: 12px; margin: -18px 0 30px; background: #eef4fb;
}

/* De bewijstegels zijn even hoog en lijnen onderling uit: het getal boven,
   de toelichting eronder, de link altijd op dezelfde regel onderaan. */
.pb-bewijs3 .pb-trede { display: flex; flex-direction: column; }
.pb-bewijs3 .pb-trede p { flex: 1 1 auto; margin: 0 0 14px; }
.pb-bewijs3 .pb-trede a { margin-top: auto; }
.pb-pijl { color: #0085f2; margin: 0 2px; }
.pb-na { color: #0085f2; }

/* Afstand tussen de blokken onderling. Stond eerder per pagina als losse
   inline-hack, waardoor de ene pagina 44px aanhield en de andere 52px. */
.pb-vervolg > h2:not(:first-child) { margin-top: 54px; }
.pb-vervolg > h2 + h2 { margin-top: 0; }

/* Dienstenlijst. Was een kale opsomming waarin de naam en de omschrijving met
   een <br> aan elkaar plakten; nu een kaart met eigen regelafstand. */
.pb-dienstlijst { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; }
.pb-dienstlijst li a {
  display: block; padding: 20px 22px; border: 1px solid #e3e9f2; border-radius: 12px;
  background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.pb-dienstlijst li a:hover { border-color: #b9d8f7; box-shadow: 0 6px 20px rgba(0,26,108,.07); text-decoration: none; }
.pb-dienstlijst li strong { display: block; font-size: 1.06rem; color: #001a6c; line-height: 1.35; margin-bottom: 7px; }
.pb-dienstlijst li span { display: block; font-size: .95rem; line-height: 1.72; color: #666e80; }

/* FAQ-blok binnen een gespiegelde pagina */
/* De FAQ als gebrande kaart, net als de tabellen. Stond eerder als kale
   lijnen op de pagina, waardoor hij niet bij de rest hoorde. Geldt overal,
   ook op de casepagina's. */
.pb-faq, .pb-vervolg .pb-faq {
  border: 1px solid #e7edf6; border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 10px 30px -24px rgba(4, 15, 48, .5); margin-top: 6px;
}
.pb-faq > h2 { margin: 0; padding: 16px 22px 14px; background: #f7fbff; border-bottom: 1px solid #e7edf6;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #001a6c; }
.pb-faq details, .pb-vervolg .pb-faq details {
  border-bottom: 1px solid #f0f4fa; padding: 0; transition: background .2s;
}
.pb-faq details:last-child, .pb-vervolg .pb-faq details:last-child { border-bottom: 0; }
.pb-faq details[open], .pb-vervolg .pb-faq details[open] { background: #fcfdff; }
.pb-faq summary, .pb-vervolg .pb-faq summary {
  cursor: pointer; list-style: none; font-weight: 600; color: #001a6c; font-size: 1rem;
  line-height: 1.45; padding: 17px 56px 17px 22px; position: relative; transition: color .2s;
}
.pb-faq summary:hover, .pb-vervolg .pb-faq summary:hover { color: #0085f2; }
.pb-faq summary::-webkit-details-marker, .pb-vervolg .pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary::after, .pb-vervolg .pb-faq summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #f4faff; color: #0085f2;
  font-size: 1.15rem; line-height: 25px; text-align: center; font-weight: 400;
}
.pb-faq details[open] summary::after, .pb-vervolg .pb-faq details[open] summary::after {
  content: '\2013'; background: #0085f2; color: #fff;
}
.pb-faq p, .pb-vervolg .pb-faq p {
  margin: 0; padding: 0 22px 20px; font-size: .96rem; line-height: 1.74; color: #666e80; max-width: 82ch;
}
.pb-vervolg ul li strong { color: #001a6c; }
.pb-vervolg ul li a { color: #0085f2; text-decoration: none; }
.pb-vervolg ul li a:hover { text-decoration: underline; }

/* Herkomstmelding bij een podcastartikel */
.pb-ep .pb-herkomst {
  font-size: .84rem !important; line-height: 1.6 !important; color: #7a6449 !important;
  background: #fff8f0; border: 1px solid #f3e2cf; border-radius: 9px;
  padding: 12px 15px; margin: 0 0 26px !important;
}

/* YouTube levert sddefault en hqdefault als 4:3 met zwarte balken boven en
   onder. De beeldinhoud zit in het middelste 16:9-deel. Door met 1,34 op te
   schalen valt precies dat deel binnen het kader en verdwijnen de balken. */
.pb-item .beeld img.bijsnijden,
.pb-kaart img.bijsnijden {
  transform: scale(1.34);
  transform-origin: center center;
}

/* Bewijskaarten, kostenblok en risico-omkering onderaan de homepage */
.pb-cijfer { display:block; font-size:2rem; font-weight:700; color:#001a6c; letter-spacing:-.02em; line-height:1.15; margin-bottom:10px; }
.pb-cijfer .pb-pijl, .pb-cijfer .pb-na { color:#0085f2; }
.pb-tijd { display:block; font-size:.78rem; font-weight:600; color:#0085f2; margin:0 0 10px; }
.pb-kosten { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.pb-kosten > div { background:#f7fbff; border:1px solid #e7edf6; border-radius:12px; padding:22px 20px; }
.pb-kosten b { display:block; font-size:1.02rem; color:#001a6c; margin-bottom:8px; }
.pb-kosten span { display:block; font-size:.92rem; line-height:1.62; color:#666e80; }
.pb-garantie { margin-top:34px; border:1px solid #e7edf6; border-left:4px solid #0085f2; border-radius:12px; background:#fff; padding:24px 26px; }
.pb-garantie b { display:block; font-size:1.06rem; color:#001a6c; margin-bottom:9px; }
.pb-garantie p { font-size:.97rem; line-height:1.68; color:#5b6273; margin:0; max-width:78ch; }
.pb-garantie strong { color:#001a6c; }

/* Herhaalde CTA-regel tussen de blokken door */
.pb-knopregel { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:28px 0 0; }
.pb-knop-blauw { display:inline-block; background:#0085f2; color:#fff; font-weight:700; padding:13px 26px; border-radius:999px; text-decoration:none; transition:background .2s, transform .2s; }
.pb-knop-blauw:hover { background:#003286; color:#fff; transform:translateY(-2px); }
.pb-knopregel span { font-size:.9rem; color:#7a8296; }


/* ===============================================================
   Landingsscherm boven de gespiegelde homepage
   =============================================================== */
.pb-hero2 {
  position: relative;
  background: linear-gradient(124deg, #001a6c 0%, #003286 52%, #0d2674 100%);
  color: #fff;
}
/* De gloed werd eerder afgesneden door overflow:hidden op de sectie zelf.
   Dat sneed ook de bewijstegels af. De gloed knipt nu tegen zijn eigen laag,
   zodat de sectie zelf niets meer hoeft af te snijden. */
.pb-gloedlaag { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pb-gloed {
  position: absolute; right: -14%; top: -32%; width: 46rem; height: 46rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,133,242,.55) 0%, transparent 66%);
  filter: blur(18px);
}
.pb-hero2-in {
  position: relative; max-width: 1140px; margin: 0 auto;
  padding: 60px 22px 30px; text-align: left;
  display: grid; gap: 34px; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
@media (max-width: 900px) { .pb-hero2-in { grid-template-columns: 1fr; padding-top: 46px; } .pb-hero2-beeld { display: none; } }

.pb-kicker {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: #ffdfb9;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 15px; margin-bottom: 18px;
}
.pb-hook {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .99; font-weight: 700;
  letter-spacing: -.035em; color: #fff; margin: 0 0 18px;
}
.pb-hook span {
  background: linear-gradient(96deg, #7cc6ff 0%, #ffdfb9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pb-onder { font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.76); max-width: 46ch; margin: 0 0 24px; }
/* De regel onder de knop stond ernaast, en las daardoor als een tweede knop.
   Hij hoort eronder, als wat het is: wat je krijgt voordat je klikt. */
.pb-land-knoppen { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pb-knop-wit {
  display: inline-block; background: #fff; color: #001a6c; font-weight: 700;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.5);
  transition: background .2s, transform .2s;
}
.pb-knop-wit:hover { background: #ffdfb9; color: #001a6c; transform: translateY(-2px); }
.pb-land-knoppen span { font-size: .9rem; color: rgba(255,255,255,.58); }
/* het dashboard bouwt zichzelf op */
.pb-hero2-beeld svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 50px rgba(0,0,0,.35)); }
.pb-balken rect { transform-box: fill-box; transform-origin: bottom; animation: pbGroei .9s cubic-bezier(.2,.7,.3,1) both; }
.pb-balken rect:nth-child(1) { animation-delay: .05s } .pb-balken rect:nth-child(2) { animation-delay: .16s }
.pb-balken rect:nth-child(3) { animation-delay: .27s } .pb-balken rect:nth-child(4) { animation-delay: .38s }
.pb-balken rect:nth-child(5) { animation-delay: .49s }
@keyframes pbGroei { from { transform: scaleY(.06) } to { transform: scaleY(1) } }
.pb-lijn { stroke-dasharray: 420; stroke-dashoffset: 420; animation: pbTeken 1.5s .5s ease forwards; }
@keyframes pbTeken { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) {
  .pb-balken rect, .pb-lijn { animation: none; stroke-dashoffset: 0; transform: none; }
}

/* Bewijs, direct onder de hook. Stond eerder met translateY half over de
   onderrand van het landingsscherm, waardoor de tegels afgesneden leken. */
.pb-bewijs-rij {
  position: relative; max-width: 1140px; margin: 0 auto; padding: 0 22px 46px;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.pb-bewijs-rij a {
  display: block; background: #fff; border: 1px solid #e7edf6; border-radius: 13px;
  padding: 20px 20px; text-decoration: none;
  box-shadow: 0 22px 46px -30px rgba(4,15,48,.6);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pb-bewijs-rij a:hover { transform: translateY(-4px); border-color: #0085f2; box-shadow: 0 30px 56px -30px rgba(0,50,134,.55); }
.pb-bewijs-rij b { display: block; font-size: 1.85rem; font-weight: 700; color: #001a6c; letter-spacing: -.025em; line-height: 1.12; }
.pb-bewijs-rij i, .pb-bewijs-rij em { font-style: normal; color: #0085f2; }
.pb-bewijs-rij i { margin: 0 4px; }
.pb-bewijs-rij span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.55; color: #666e80; }

/* strakker: minder lucht tussen de blokken onderaan */
.pb-vervolg { padding-top: 34px; }
.pb-vervolg h2 { margin-top: 0; }

/* ---------------------------------------------------------------
   Laagvolgorde vastzetten
   De header is een Elementor sticky en krijgt zijn z-index pas zodra
   je scrollt. Daardoor schilderde het landingsscherm eroverheen.
   Hieronder ligt de volgorde vast, altijd.
   --------------------------------------------------------------- */
.elementor-location-header,
header.elementor-location-header {
  position: relative;
  z-index: 900;
}
/* Alleen de stapelvolgorde. Eerder stond hier ook position:relative, en dat
   overschreef de position:fixed die Elementor zelf op de vastgezette balk zet.
   De balk bleef dan in de pagina staan terwijl de opvuller er wel bij kwam,
   waardoor het menu een stuk hoger reageerde dan waar de tekst stond. */
.elementor-sticky--active { z-index: 900 !important; }

.pb-hero2 { position: relative; z-index: 1; isolation: isolate; }
.pb-gloed { z-index: 0; }
.pb-hero2-in, .pb-bewijs-rij { position: relative; z-index: 2; }


/* De balk van het thema ligt bewust 70px over de sectie eronder heen: de
   headercontainer heeft --margin-bottom:-70px. Bij een foto met lucht erboven
   valt dat niet op, bij een kop die meteen begint wel.
   Eerder stond hier een script dat de overlap mat. Dat telde bij een
   vastgezette balk de scrollpositie mee, waardoor de vrijgehouden ruimte
   meegroeide met hoe ver je gescrold had en er een leeg blauw scherm ontstond.
   De waarde staat vast in het thema, dus die hoort hier gewoon te staan. */
.pb-hero2-in { padding-top: 130px; }
@media (max-width: 900px) { .pb-hero2-in { padding-top: 116px; } }

/* ankerlinks niet onder de sticky header laten vallen */
html { scroll-padding-top: 110px; }

/* Het eerste blok van de gespiegelde homepage vervalt, want ons landingsscherm
   zegt hetzelfde. Het blok daaronder had zijn bovenruimte afgestemd op de
   ronding die daar stond, dus die ruimte hangt er nu los boven. */
body.home main .e-con.e-parent:first-of-type { padding-top: 24px; }
body.home main .e-con.e-parent:first-of-type::before { display: none; }

/* De vragenlijst is gegroepeerd naar waar iemand in zijn afweging zit. Zonder
   die koppen wordt het een muur van twintig regels waarin niemand zoekt. */
.pb-vragen h3 {
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  color: #001a6c; margin: 40px 0 16px; padding-left: 15px;
  position: relative; line-height: 1.3;
}
/* Een streepje in de huisstijlkleuren ervoor. De koppen stonden als klein grijs
   kapitaal boven de rij en vielen daardoor weg tussen de vragen eronder. */
.pb-vragen h3::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #0085f2, #ffdfb9);
}
.pb-vragen h3:first-child { margin-top: 6px; }
.pb-vragen ul { margin: 0; }


/* ---------------------------------------------------------------
   Punt 4 en 10: de voettekst toonde het kopje Pagina's zonder links
   Het thema zet de verticale menulijst op display:none tot zijn eigen
   JavaScript hem opbouwt. Dat script draait hier niet, dus bleef de lijst
   onzichtbaar terwijl de links er wel gewoon stonden.
   --------------------------------------------------------------- */
/* Het thema verbergt elk menu met .aux-dom-unready .aux-nav-menu-element
   .aux-master-menu { display:none !important }. Die klasse staat op de body en
   wordt door het themascript weggehaald zodra de pagina klaar is. Dat script
   draait hier niet. Onderstaande regel weegt zwaarder en zet hem weer aan. */
body .elementor-location-footer .aux-nav-menu-element .aux-master-menu,
.elementor-location-footer .aux-master-menu { display: block !important; }
.elementor-location-footer .aux-master-menu > li { display: block; float: none; }
.elementor-location-footer .aux-master-menu > li > a { display: block; padding: 5px 0; }
.elementor-location-footer .aux-burger-box { display: none !important; }
.elementor-location-footer .aux-menu-label { font-size: .95rem; }

/* ---------------------------------------------------------------
   Punt 1: witruimte tussen het landingsscherm en de sectie eronder
   Het eerste blok van de gespiegelde homepage stond op wit met een eigen
   bovenruimte, afgestemd op de ronding die daar ooit stond. Nu die weg is
   bleef er een witte band over tussen het donkerblauw en het lichtblauw.
   --------------------------------------------------------------- */
body.home main,
body.home .aux-wrapper,
body.home .aux-container { background: #f4faff; }
body.home main .e-con.e-parent:first-of-type { padding-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------
   Paginakop en inleiding boven een gespiegelde pagina
   Diensten, cases en contact begonnen met een leeg vlak van het thema,
   waardoor je moest scrollen voor er iets stond.
   --------------------------------------------------------------- */
.pb-paginakop {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; color: #001a6c;
  letter-spacing: -.025em; line-height: 1.1; margin: 0 0 12px;
}
.pb-inleiding { font-size: 1.06rem; line-height: 1.68; max-width: 68ch; margin-bottom: 30px; }
.pb-contactkop { padding-bottom: 8px; }

/* De cases als voorvertoning: de vraag boven, de context eronder. */
.pb-caselijst li strong { font-size: 1.04rem; }
.pb-caselijst li span {
  display: block; margin-top: 6px; font-size: .84rem; color: #7a8296;
  letter-spacing: .01em;
}


/* ---------------------------------------------------------------
   De reviews
   Geen schuifbalk: die hoort hier niet, en hij verraadt bovendien dat er
   iets buiten beeld staat zonder te laten zien wat. In plaats daarvan
   schuift hij vanzelf door, met stipjes eronder die de plek aangeven.
   Stilstaan zodra iemand er met de muis op komt of met de toets in springt,
   want anders schuift het weg terwijl je leest.
   --------------------------------------------------------------- */
.pb-reviewblok { padding-bottom: 46px; }
.pb-slider { position: relative; }
.pb-spoor {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 33.5%);
  gap: 16px; margin: 0; padding: 4px 2px 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pb-spoor::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pb-review {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3e9f2; border-radius: 13px; padding: 22px 22px 18px;
  box-shadow: 0 14px 34px -30px rgba(4,15,48,.55);
}
.pb-sterren { color: #ffb020; font-size: 1rem; letter-spacing: .06em; margin-bottom: 12px; }
.pb-sterren b { color: #001a6c; font-size: .84rem; margin-left: 7px; letter-spacing: 0; }
.pb-review p {
  flex: 1 1 auto; margin: 0 0 16px; font-size: .93rem; line-height: 1.7; color: #4a5262;
}
.pb-review footer { border-top: 1px solid #f0f4fa; padding-top: 13px; }
.pb-review footer strong { display: block; color: #001a6c; font-size: .96rem; }
.pb-review footer span { display: block; font-size: .82rem; color: #7a8296; margin-top: 2px; line-height: 1.45; }
.pb-review footer em {
  display: block; font-style: normal; font-size: .74rem; color: #9aa3b2;
  margin-top: 7px; letter-spacing: .02em;
}
/* de stipjes onder de rij */
.pb-stippen { display: flex; justify-content: center; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.pb-stippen button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #cfdcec; cursor: pointer; transition: background .25s, width .25s;
}
.pb-stippen button[aria-current='true'] { background: #0085f2; width: 22px; border-radius: 4px; }

@media (max-width: 900px) {
  .pb-spoor { grid-auto-columns: minmax(258px, 84%); }
  }


/* Een eigen blok dat direct op de header volgt, valt eronder om dezelfde reden
   als het landingsscherm: de balk ligt 70px over de sectie eronder heen. */
.elementor-location-header + .pb-vervolg { padding-top: 116px; }
@media (max-width: 900px) { .elementor-location-header + .pb-vervolg { padding-top: 102px; } }


/* ---------------------------------------------------------------
   Punt 3: het uitgelichte blok
   Twee rijen, elk een aflevering met het best gelezen artikel ernaast.
   --------------------------------------------------------------- */
.pb-uitgelicht .pb-paar {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.pb-uit-ep, .pb-uit-artikel {
  display: block; border: 1px solid #e3e9f2; border-radius: 13px; background: #fff;
  text-decoration: none; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pb-uit-ep:hover, .pb-uit-artikel:hover {
  border-color: #b9d8f7; box-shadow: 0 16px 38px -28px rgba(0,26,108,.55); transform: translateY(-2px);
}
.pb-uit-ep { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; }
.pb-uit-ep img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pb-uit-tekst { padding: 18px 20px; }
.pb-uit-artikel { padding: 20px 22px; display: flex; flex-direction: column; }
.pb-uit-label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #0085f2; margin-bottom: 8px;
}
.pb-uit-ep strong, .pb-uit-artikel strong {
  display: block; color: #001a6c; font-size: 1.02rem; line-height: 1.38; font-weight: 700;
}
.pb-uit-artikel strong { flex: 1 1 auto; }
.pb-uit-gast { display: block; margin-top: 7px; font-size: .84rem; color: #7a8296; }
.pb-uit-lees { display: block; margin-top: 14px; font-size: .86rem; font-weight: 600; color: #0085f2; }
@media (max-width: 860px) {
  .pb-uitgelicht .pb-paar { grid-template-columns: 1fr; }
  .pb-uit-ep { grid-template-columns: 1fr; }
  .pb-uit-ep img { aspect-ratio: 16/7; }
}


/* ---------------------------------------------------------------
   Punt 6, 8 en 9: te veel witruimte op de dienstenpagina
   De gespiegelde secties dragen onderruimtes tot 160px, ontworpen voor
   een pagina met veel beeld en weinig tekst. Tussen een afbeelding en de
   kop eronder viel daardoor een gat. We toppen die ruimte af in plaats
   van hem per sectie te overschrijven, zodat het blijft werken als de
   inhoud straks wijzigt.
   --------------------------------------------------------------- */
/* Elementor zet zijn ruimtes met drie klassen achter elkaar, wat zwaarder weegt
   dan een gewone regel. Daarom hier met voorrang, anders gebeurt er niets. */
body.page-id-2231 main .e-con,
body.page-id-2231 main .e-con-inner {
  padding-top: min(var(--padding-top, 0px), 44px) !important;
  padding-bottom: min(var(--padding-bottom, 0px), 52px) !important;
}
/* De boxed container van Elementor draagt zijn ruimte op de binnenste laag,
   niet op de sectie zelf. Daar stond 160px boven en onder. */
body.page-id-2231 main .e-con-inner { padding-top: 44px !important; padding-bottom: 44px !important; }
/* De golf boven een donkere sectie was zo hoog dat er een leeg vlak onder viel. */
body.page-id-2231 main .elementor-shape svg { height: 60px !important; }
body.page-id-2231 main .elementor-widget-image + .elementor-widget-heading { margin-top: -6px; }
body.page-id-2231 main .elementor-widget-heading + .elementor-widget-text-editor { margin-top: -4px; }

/* Hier stond een aftopping van de afbeeldinghoogte en van de marges. Die was
   een pleister op de verkeerde wond: de gaten kwamen van koppen die door
   elementor-invisible onzichtbaar waren en van de ruimte op de binnenste
   container. Nu die twee opgelost zijn is de aftopping niet alleen overbodig,
   hij sneed ook de casefoto's af en zette de knoppen erover heen. */


/* Twee eigen blokken onder elkaar telden hun onderruimte en bovenruimte bij
   elkaar op, waardoor er een gat van ruim honderd pixels tussen viel. Staan ze
   naast elkaar, dan draagt alleen de kop van het tweede blok de afstand. */
.pb-vervolg + .pb-vervolg { padding-top: 0 !important; }
.pb-vervolg:has(+ .pb-vervolg) { padding-bottom: 0 !important; }
.pb-vervolg + .pb-vervolg > h2:first-child,
.pb-vervolg + .pb-vervolg > h1:first-child { margin-top: 54px; }

/* Een enkele lange review rekte alle kaarten mee. Zeven regels is genoeg om te
   zien wat er staat; wie meer wil weet waar hij moet zijn. */
.pb-review p {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden; flex: 0 0 auto; min-height: 0;
}



/* ---------------------------------------------------------------
   Onzichtbare koppen door een animatie die nooit start
   Elementor zet elementen met een entree-animatie op elementor-invisible,
   oftewel visibility:hidden, en haalt die klasse er met JavaScript weer af
   zodra je erlangs scrollt. Dat script draait hier niet, dus bleven die
   elementen onzichtbaar terwijl ze wel ruimte innamen. Dat verklaarde de
   ontbrekende titels boven Wat we doen en de gaten eromheen.
   --------------------------------------------------------------- */
.elementor-invisible { visibility: visible !important; animation: none !important; }


/* De knoppen naast de reviews stonden als losse rondjes half over de kaarten.
   Nu binnen de rand, met een pijl in plaats van een leesteken. */
.pb-slider { padding: 0 4px; }

/* De korte beoordelingen van losse opdrachten hebben minder tekst, dus die
   krijgen ook minder hoogte dan de uitgebreide referenties. */
.pb-kort p { -webkit-line-clamp: 5; }

/* Hier stond een regel die tekstblokken text-align:inherit gaf, om ze onder
   een gecentreerde kop te laten meelopen. Dat werkte averechts: het thema zet
   die blokken zelf al op center, en inherit haalde de uitlijning juist wéér
   weg naar links. Dit was de reden dat de tekst onder De Watertoren van
   Datamanagement links bleef staan. */


/* ---------------------------------------------------------------
   De knoppen naast de reviews
   Stonden als lege witte ovalen half over de kaarten: het thema geeft elke
   knop zijn eigen achtergrond, hoogte en tekengrootte, en dat won van de
   opmaak hier. Daarom nu alles expliciet, inclusief de vorm.
   --------------------------------------------------------------- */
.pb-reviewblok .pb-slider { position: relative; padding: 0; }
.pb-reviewblok .pb-schuif {
  position: absolute; top: 50%; z-index: 6;
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0;
  margin: 0; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
  background: #fff; color: #001a6c;
  border: 1px solid #dbe4f0; border-radius: 50%;
  box-shadow: 0 10px 26px -14px rgba(4, 15, 48, .55);
  cursor: pointer; font-size: 0; line-height: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.pb-reviewblok .pb-schuif:hover { background: #0085f2; color: #fff; border-color: #0085f2; }
.pb-reviewblok .pb-schuif svg { display: block; width: 17px; height: 17px; }
.pb-reviewblok .pb-schuif.pb-links { left: -21px; }
.pb-reviewblok .pb-schuif.pb-rechts { right: -21px; }
@media (max-width: 900px) { .pb-reviewblok .pb-schuif { display: none; } }

/* De kaart: sterren boven, tekst er direct onder, naam onderaan. */
.pb-review { justify-content: flex-start; }
.pb-review p { flex: 1 1 auto; }
.pb-review footer { margin-top: auto; }

/* ---------------------------------------------------------------
   Het voetmenu perste elke regel in een kolom van 39 pixels
   Het thema zet de menulinks op display:table-cell met een vaste breedte.
   In een verticaal menu in de voettekst klopt dat niet: dan hoort elke
   regel gewoon onder elkaar te staan over de volle breedte.
   --------------------------------------------------------------- */
body .elementor-location-footer .aux-master-menu > li {
  display: block !important; width: 100% !important; float: none !important;
}
body .elementor-location-footer .aux-master-menu > li > a {
  display: block !important; width: auto !important; padding: 6px 0 !important;
  color: #001a6c !important; text-decoration: none;
}
body .elementor-location-footer .aux-master-menu > li > a:hover { color: #0085f2 !important; }
body .elementor-location-footer .aux-menu-label {
  display: inline !important; width: auto !important; white-space: nowrap; font-size: .97rem;
}


/* De eigen lijst onder Pagina's in de voettekst. */
.pb-voetlijst { list-style: none; margin: 0; padding: 0; }
.pb-voetlijst li { margin: 0 0 2px; }
.pb-voetlijst a {
  display: block; padding: 6px 0; color: #001a6c; font-size: .97rem;
  text-decoration: none; transition: color .2s;
}
.pb-voetlijst a:hover { color: #0085f2; text-decoration: underline; }


/* Het tekstblok stond wel gecentreerd, maar binnen een kolom die zo breed was
   als de langste regel. Daardoor lag het midden van de tekst links van het
   midden van de kop erboven. In een gestapelde sectie hoort zo'n blok de volle
   breedte te krijgen. */
body.page-id-2231 main .e-con-inner > .elementor-widget-text-editor,
body.page-id-2231 main .e-con-inner > .elementor-widget-heading {
  width: 100%; align-self: stretch;
}

/* De voet komt binnenvliegen zodra hij in beeld schuift. Dat effect hangt aan
   JavaScript van het thema, en zolang dat niet heeft gedraaid staat de voet er
   onzichtbaar of half. Op een statische site levert dat vooral een voet op die
   soms wel en soms niet verschijnt. Hij staat er nu gewoon. */
.elementor-location-footer .aux-fade-in-up,
.elementor-location-footer .aux-appear-watch-animation,
.elementor-location-footer [class*="aux-fade"],
.elementor-location-footer .elementor-invisible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* Bekijk ook: drie andere cases met hun eigen cover. Het gespiegelde blok
   toonde plaatjes die nergens bij hoorden; deze komen uit de case zelf. */
.pb-ookcases { margin: 56px 0 0; }
.pb-ookcases h2 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 700; color: #001A6C; margin: 0 0 18px; }
.pb-ookgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.pb-ookkaart { display: block; text-decoration: none; border: 1px solid #e3e9f2; border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s; }
.pb-ookkaart:hover { transform: translateY(-3px); border-color: #0085F2; box-shadow: 0 18px 36px -24px rgba(0,50,134,.5); }
.pb-ookkaart img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; background: #f4faff; }
.pb-ooktekst { padding: 16px 18px 18px; }
.pb-ooklabel { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0085F2; margin-bottom: 7px; }
.pb-ooktekst strong { display: block; font-size: .98rem; line-height: 1.35; color: #001A6C; }
.pb-ooksub { display: block; margin-top: 8px; font-size: .8rem; color: #6b7385; }
.pb-ookalle { margin: 18px 0 0; }
.pb-ookalle a { color: #0085F2; text-decoration: none; font-weight: 600; }

/* De inleiding onder de kop Diensten stond gecentreerd, terwijl de kop erboven
   links begint. Daardoor liep de eerste regel niet gelijk met het woord
   erboven. De tekst lijnt nu links uit, met dezelfde maximale regellengte als
   de rest van de pagina. */
.elementor-element-9314769 .elementor-widget-container,
.elementor-element-9314769 .elementor-widget-container p {
  text-align: left !important;
}
.elementor-element-9314769 .elementor-widget-container p {
  max-width: 62ch;
  margin-left: 0;
  margin-right: auto;
}

/* De cv-pagina: lopende opdrachten als kaarten, de rest als tabel. Dezelfde
   opmaak als de tabellen elders, zodat het bij de site hoort en niet bij een
   uitgeprint document. */
.pb-cv-nu { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 16px; }
.pb-cv-nu li { border: 1px solid #e3e9f2; border-left: 4px solid #0085F2; border-radius: 10px; background: #fff; padding: 18px 20px; }
.pb-cv-nu strong { display: block; font-size: 1.05rem; color: #001A6C; }
.pb-cv-functie { display: block; margin-top: 3px; font-size: .93rem; color: #444b5c; }
.pb-cv-periode { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0085F2; }
.pb-cv-nu p { margin: 12px 0 0; font-size: .95rem; }
.pb-cv-tabel { width: 100%; }
.pb-cv-tabel td:first-child { white-space: nowrap; }
.pb-cv-lijst { padding-left: 20px; }
.pb-cv-lijst li { margin-bottom: 10px; }
.pb-cv-lijst strong { color: #001A6C; }
@media (max-width: 640px) {
  .pb-cv-tabel td:first-child { white-space: normal; }
}

/* Het cv als download, met een knop voor de taal. */
.pb-cvdown { border: 1px solid #e3e9f2; border-radius: 12px; background: linear-gradient(160deg, #f7fbff, #eef5ff); padding: 22px 24px; margin: 28px 0 8px; }
.pb-cvdown-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pb-cvdown-kop strong { font-size: 1.06rem; color: #001A6C; }
.pb-cvtaal { display: inline-flex; border: 1px solid #d7e3f3; border-radius: 999px; overflow: hidden; background: #fff; }
.pb-cvtaal button { border: 0; background: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: #5d6472; padding: 7px 15px; }
.pb-cvtaal button.aan { background: #0085F2; color: #fff; }
.pb-cvdown-sub { margin: 12px 0 16px !important; font-size: .93rem; color: #444b5c; }
.pb-cvdown-knoppen { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.pb-cvknop { display: inline-block; background: #001A6C; color: #fff !important; font-weight: 700; font-size: .92rem; padding: 11px 22px; border-radius: 999px; text-decoration: none; }
.pb-cvknop:hover { background: #003286; }
.pb-cvknop-tweede { background: #fff; color: #001A6C !important; border: 1px solid #cfdcee; }
.pb-cvknop-tweede:hover { background: #f4faff; }

/* Een tabel is zo breed als zijn inhoud vraagt. Op een telefoon duwde dat de
   hele pagina breder dan het scherm: alles schoof dan heen en weer, ook de kop
   en de tekst eromheen. De tabel schuift nu in zijn eigen doosje. */
.pb-tabelwikkel { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pb-tabelwikkel > table { margin-bottom: 0; }

/* Het cv leest op een smal scherm beter als rijen onder elkaar dan als tabel
   die je opzij moet duwen. Onder de 560 pixels wordt elke rij een blokje. */
@media (max-width: 560px) {
  .pb-cv-tabel, .pb-cv-tabel tbody, .pb-cv-tabel tr, .pb-cv-tabel td { display: block; width: 100%; }
  .pb-cv-tabel thead { display: none; }
  .pb-cv-tabel tr { border: 1px solid #e3e9f2; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
  .pb-cv-tabel td { border: 0 !important; padding: 2px 0 !important; }
  .pb-cv-tabel td:first-child { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0085F2; }
}

/* Het uitklapmenu is op een toestel van 320 pixels een paar pixels breder dan
   het scherm. Dat is genoeg om de hele pagina horizontaal te laten schuiven,
   ook al zie je het menu niet eens. Op de podcastpagina's viel dat op. */
nav.elementor-nav-menu--dropdown,
nav.elementor-nav-menu--dropdown .elementor-nav-menu {
  max-width: 100vw;
  box-sizing: border-box;
}

/* De leden van een artikel in de algemene voorwaarden. Genummerd, met genoeg
   ruimte ertussen om te kunnen lezen wat er staat. */
.pb-voorwaarden { margin: 0 0 30px; padding-left: 24px; }
.pb-voorwaarden li { margin-bottom: 12px; line-height: 1.7; }
.pb-slot { font-style: italic; color: #6b7385; margin-top: 34px !important; }

/* ---------------------------------------------------------------------------
   De golven tussen de secties.

   Elementor tekent tussen twee blokken een golfvorm. De vulling van die golf
   stond op wit, maar de achtergrond achter de secties is #F4FAFF (zie de regel
   'body.home main' hierboven). Een witte golf op een lichtblauwe ondergrond
   leest niet als een overgang maar als een streep met twee harde randen.

   Een golf hoort de kleur te hebben van het vlak waar hij naartoe loopt. Op
   deze pagina is dat overal #F4FAFF, dus dat kan in een regel.
   ------------------------------------------------------------------------- */
body.home .elementor-shape .elementor-shape-fill { fill: #F4FAFF; }

/* ---------------------------------------------------------------------------
   Het brein als sectie op de homepage.

   Dezelfde gedachte als de kop van insights: geen blok tussen de tekst maar
   een laag waar de tekst op ligt. De sectie loopt over de volle breedte en
   lost aan boven- en onderkant op in de achtergrond van de pagina (#F4FAFF),
   zodat er nergens een rand te zien is.
   ------------------------------------------------------------------------- */
.pb-breinvlak {
  /* de kleur waarin de band boven en onder uitloopt; per pagina te zetten */
  --pb-vlak-rand: #F4FAFF;
  /* dezelfde kleur als losse kanalen, voor het verloop met oplopende dekking */
  --pb-vlak-rgb: 244, 250, 255;
  position: relative;
  /* eigen stapelcontext op nul, zodat niets uit dit vlak bij het scrollen
     boven de vaste menubalk uit komt */
  z-index: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #040F30;
  overflow: hidden;
}
.pb-breinvlak-doek { position: absolute; inset: 0; z-index: 0; }
.pb-breinvlak-doek > * { height: 100%; }

/* Op een breed scherm staat het brein rechts en de tekst links, zodat ze
   elkaar niet in de weg zitten. Smal scherm: alles gecentreerd. */
@media (min-width: 1000px) {
  .pb-breinvlak-doek { left: 22%; }
}

/* De randen. Boven en onder een verloop naar de paginakleur, zodat de sectie
   in de pagina opgaat in plaats van erop te liggen. */
.pb-breinvlak::before,
.pb-breinvlak::after {
  content: ''; position: absolute; left: 0; right: 0; height: 230px;
  /* boven de waas, anders houdt die de bovenrand hard: de waas loopt over de
     volle hoogte en begon dus met een rechte lijn aan de linkerkant */
  pointer-events: none; z-index: 2;
}
.pb-breinvlak::before {
  top: 0;
  background: linear-gradient(rgba(var(--pb-vlak-rgb),1.00) 0%, rgba(var(--pb-vlak-rgb),0.96) 7%, rgba(var(--pb-vlak-rgb),0.88) 16%, rgba(var(--pb-vlak-rgb),0.72) 28%, rgba(var(--pb-vlak-rgb),0.54) 40%, rgba(var(--pb-vlak-rgb),0.34) 52%, rgba(var(--pb-vlak-rgb),0.16) 66%, rgba(var(--pb-vlak-rgb),0.05) 82%, rgba(var(--pb-vlak-rgb),0.00) 100%);
}
.pb-breinvlak::after {
  bottom: 0;
  background: linear-gradient(rgba(var(--pb-vlak-rgb),0.00) 0%, rgba(var(--pb-vlak-rgb),0.05) 18%, rgba(var(--pb-vlak-rgb),0.16) 34%, rgba(var(--pb-vlak-rgb),0.34) 48%, rgba(var(--pb-vlak-rgb),0.54) 60%, rgba(var(--pb-vlak-rgb),0.72) 72%, rgba(var(--pb-vlak-rgb),0.88) 84%, rgba(var(--pb-vlak-rgb),0.96) 93%, rgba(var(--pb-vlak-rgb),1.00) 100%);
}

.pb-breinvlak-tekst {
  position: relative; z-index: 3;
  max-width: 1100px; margin: 0 auto; padding: 130px 22px; width: 100%;
  pointer-events: none;
}
.pb-breinvlak > .pb-breinvlak-waas {
  position: absolute; inset: 0 auto 0 0; width: min(62%, 980px);
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 15, 48, .88) 0%,
              rgba(4, 15, 48, .60) 46%, rgba(4, 15, 48, 0) 100%);
}
.pb-breinvlak-tekst h2 {
  color: #F7FBFF; margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 26px rgba(4, 15, 48, .85);
}
.pb-breinvlak-tekst p {
  color: rgba(247, 251, 255, .82); max-width: 54ch; margin: 0;
  font-size: 1.05rem; line-height: 1.62;
  text-shadow: 0 1px 18px rgba(4, 15, 48, .9);
}
@media (max-width: 700px) {
  .pb-breinvlak { min-height: 500px; }
  .pb-breinvlak-tekst { padding: 96px 22px; }
}

/* Een lagere variant van het breinvlak, voor een pagina waar de kop kort is en
   het echte werk eronder gebeurt, zoals de agenda op de contactpagina. */
.pb-breinvlak-kort { min-height: 460px; }
.pb-breinvlak-kort .pb-breinvlak-tekst { padding: 104px 22px 90px; }

/* Deze variant opent de pagina en begint dus direct onder de vaste menubalk.
   Het verloop aan de bovenkant valt daardoor grotendeels achter die balk, en
   wat je overhoudt is het donkere staartje: een grijze streep in plaats van
   een overgang. Weglaten dus, net als op de insights-kop. De grens tussen de
   witte balk en het donker is dan een rechte lijn, en dat hoort zo. */
.pb-breinvlak-kort::before { display: none; }
.pb-breinvlak-kort::after { height: 190px; }

/* De kop mag ook een h1 zijn: op de homepage is het een tussenkop, op een
   pagina waar dit vlak de opening is, is het de paginatitel. */
.pb-breinvlak-tekst h1 {
  color: #F7FBFF; margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 26px rgba(4, 15, 48, .85);
}

/* De contactpagina heeft wit onder de kop, niet het lichtblauw van de
   homepage. De band moet daar dus in wit uitlopen. */
/* Onder dit vlak stond eerst wit, en pas verderop begon de lichtblauwe sectie
   van de gespiegelde inhoud. Het verloop eindigde dus in wit en daarna volgde
   alsnog een harde lijn naar #F4FAFF. Nu loopt het verloop in die kleur uit en
   krijgt de inhoud eronder dezelfde achtergrond, zodat er geen tussenstuk meer
   is om een rand in te zien. */
.pb-breinvlak-kort { --pb-vlak-rand: #F4FAFF; --pb-vlak-rgb: 244, 250, 255; }
.pb-breinvlak-kort + main { background: #F4FAFF; }