/* Wildbos — conversielaag Schade Professionals.
   Eigen bestand; overschrijft de CMS-CSS alleen scoped op het blok. */

:root{ --sp-navy:#0B192C; --sp-navy-2:#1E3E62; --sp-geel:#e3df19; --sp-groen:#4DB599; }

/* ---------- HERO ---------- */
#lib-block-13019-17221671.sp-hero { min-height:auto !important;  padding:5rem 0 3.5rem !important; background:var(--sp-navy); position:relative; }
#lib-block-13019-17221671.sp-hero .row-1 { align-items:center; }
#lib-block-13019-17221671.sp-hero .col-1 { width:calc(650% / 12); }
#lib-block-13019-17221671.sp-hero .col-2 { width:calc(550% / 12); }
#lib-block-13019-17221671.sp-hero .col { padding-top:0; padding-bottom:0; }

#lib-block-13019-17221671 .sp-eyebrow { font-size:13px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--sp-geel) !important; margin-bottom:1.1rem !important; }

/* Drie slides op dezelfde plek: geen springende layout tijdens het roteren. */
#lib-block-13019-17221671 .sp-slides { display:grid; }
#lib-block-13019-17221671 .sp-slide { grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s; }
#lib-block-13019-17221671 .sp-slide.is-active { opacity:1; visibility:visible; transform:none; }
#lib-block-13019-17221671 .sp-slide-h { font-size:clamp(30px,3.3vw,48px); line-height:1.12; font-weight:600; color:#fff; margin:0 0 1rem; }
#lib-block-13019-17221671 .sp-slide-sub { font-size:1.0313rem; line-height:1.68; color:rgba(255,255,255,.86); margin:0; max-width:52ch; }
#lib-block-13019-17221671 .sp-slide-sub strong { color:#fff; font-weight:600; }

#lib-block-13019-17221671 .sp-cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 .85rem; }
#lib-block-13019-17221671 .sp-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-size:15px; font-weight:600; line-height:1; padding:1rem 1.6rem; border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
#lib-block-13019-17221671 .sp-btn-primary { background:var(--sp-geel); color:var(--sp-navy); }
#lib-block-13019-17221671 .sp-btn-primary:hover { background:#fff; color:var(--sp-navy); }
#lib-block-13019-17221671 .sp-btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
#lib-block-13019-17221671 .sp-btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
#lib-block-13019-17221671 .sp-cta-note { font-size:.875rem; line-height:1.6; color:rgba(255,255,255,.62); margin:0; max-width:46ch; }

/* De drie argumenten blijven alle drie leesbaar, ook zonder te wachten op de rotatie. */
#lib-block-13019-17221671 .sp-tabs { display:flex; flex-wrap:wrap; gap:0; margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.18); }
#lib-block-13019-17221671 .sp-tab { flex:1 1 0; min-width:150px; display:flex; flex-direction:column; gap:.35rem; align-items:flex-start;
  background:none; border:0; border-top:2px solid transparent; margin-top:-1px; cursor:pointer;
  padding:1rem 1.25rem 1rem 0; text-align:left; font-family:inherit; transition:border-color .25s ease; }
#lib-block-13019-17221671 .sp-tab-num { font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.45); }
#lib-block-13019-17221671 .sp-tab-label { font-size:.875rem; line-height:1.35; color:rgba(255,255,255,.72); }
#lib-block-13019-17221671 .sp-tab.is-active { border-top-color:var(--sp-geel); }
#lib-block-13019-17221671 .sp-tab.is-active .sp-tab-num { color:var(--sp-geel); }
#lib-block-13019-17221671 .sp-tab.is-active .sp-tab-label { color:#fff; font-weight:600; }
#lib-block-13019-17221671 .sp-tab:hover .sp-tab-label { color:#fff; }
#lib-block-13019-17221671 .sp-tab:focus-visible { outline:2px solid var(--sp-geel); outline-offset:3px; }

#lib-block-13019-17221671 .sp-hero-figure { margin:0; position:relative; aspect-ratio:4/3.1; overflow:hidden; }
#lib-block-13019-17221671 .sp-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease; }
#lib-block-13019-17221671 .sp-hero-img.is-active { opacity:1; }

@media (prefers-reduced-motion: reduce){
  #lib-block-13019-17221671 .sp-slide, #lib-block-13019-17221671 .sp-hero-img { transition:none; }
}
@media (max-width:991px){
  #lib-block-13019-17221671.sp-hero { padding:6rem 0 3rem !important; }
  #lib-block-13019-17221671.sp-hero .col-1, #lib-block-13019-17221671.sp-hero .col-2 { width:100%; }
  #lib-block-13019-17221671.sp-hero .col-2 { margin-top:2.25rem; }
  #lib-block-13019-17221671 .sp-tabs { flex-direction:column; }
  #lib-block-13019-17221671 .sp-tab { border-top:0; border-left:2px solid rgba(255,255,255,.14); padding:.75rem 0 .75rem 1rem; margin-top:0; }
  #lib-block-13019-17221671 .sp-tab.is-active { border-left-color:var(--sp-geel); }
}

/* ---------- STORYBRAND-blok + bewijs ---------- */
.sp-kicker{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8a8f99; margin-bottom:1rem; }
.sp-h2{ font-size:clamp(26px,2.6vw,38px); line-height:1.18; font-weight:600; color:var(--sp-navy); margin:0 0 1.25rem; }
.sp-h3{ font-size:20px; font-weight:600; color:var(--sp-navy); margin:0 0 1.5rem; }

.sp-story{ padding:5.5rem 0; background:#fff; }
.sp-story .container{ max-width:1200px; margin:0 auto; padding:0 30px; }
.sp-story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.sp-story-left p{ font-size:1.0313rem; line-height:1.75; color:#3d4451; margin:0 0 1.1rem; max-width:52ch; }

.sp-stappen{ list-style:none; margin:0 0 2rem; padding:0; }
.sp-stappen li{ display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid #e6e8ec; font-size:1rem; line-height:1.65; color:#3d4451; }
.sp-stappen li:last-child{ border-bottom:1px solid #e6e8ec; }
.sp-stap-n{ flex:0 0 30px; height:30px; border-radius:50%; background:var(--sp-geel); color:var(--sp-navy);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; }
.sp-stappen strong{ color:var(--sp-navy); font-weight:600; }
.sp-story-cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.sp-btn-line{ background:transparent; color:var(--sp-navy); border-color:#c9cdd4; }
.sp-btn-line:hover{ border-color:var(--sp-navy); }

.sp-proof{ padding:4.5rem 0 5.5rem; background:#F2F2F2; }
.sp-proof .container{ max-width:1200px; margin:0 auto; padding:0 30px; }
.sp-proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.sp-proof figure{ margin:0; background:#fff; padding:1.75rem; border-top:3px solid var(--sp-geel); }
.sp-proof blockquote{ margin:0; font-size:.9688rem; line-height:1.68; color:#3d4451; }
.sp-proof figcaption{ margin-top:1.1rem; font-size:.8438rem; line-height:1.45; color:#6b7280; }
.sp-proof figcaption strong{ color:var(--sp-navy); }

/* ---------- Opdrachtgevers: bewust laag op de pagina ---------- */
.sp-clients{ padding:3.5rem 0; background:var(--sp-navy-2); }
.sp-clients .container{ max-width:1200px; margin:0 auto; padding:0 30px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.sp-clients h2{ font-size:clamp(20px,2vw,27px); font-weight:600; color:#fff; margin:0 0 .4rem; }
.sp-clients p{ margin:0; color:rgba(255,255,255,.75); font-size:.9688rem; line-height:1.6; max-width:56ch; }

@media (max-width:991px){
  .sp-story-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .sp-proof-grid{ grid-template-columns:1fr; }
  .sp-story{ padding:3.5rem 0; }
}

/* ---------- Voordelenband: uit de overlap-opzet halen ----------
   De CMS-versie hing als losse kaartenrij over de hero heen: `container-type:size`
   op de row maakte de sectie 0px hoog. Voor een leesblok moet die gewoon meelopen. */
#lib-block-13019-17221671:not(.media-4):not([data-ratio]){ transform:none; }
#lib-block-13019-17221671 .heading-2:not(.media-4):not([data-ratio]){ transform:none; }

#block-37-17221664{ background:var(--sp-geel) !important; padding:3.5rem 0 !important; max-width:none !important; }
#block-37-17221664 .container{ width:auto !important; max-width:1200px; margin:0 auto; padding:0 30px; }
#block-37-17221664 .row{ container-type:normal !important; flex-wrap:wrap !important; gap:2.5rem 2rem; }
#block-37-17221664 .col{ flex:1 1 260px; max-width:none; padding:0 !important; }
#block-37-17221664 .box-2{ flex-direction:row !important; text-align:left !important; align-items:flex-start; }
#block-37-17221664 .heading-4{ text-transform:none !important; text-align:left !important;
  font-size:19px !important; line-height:1.3; font-weight:600; color:var(--sp-navy) !important; margin-bottom:.6rem !important; }
#block-37-17221664 .text-1{ font-size:15px !important; line-height:1.65 !important; text-align:left !important; color:#26374f !important; }
#block-37-17221664 .button-wrapper{ justify-content:flex-start !important; width:auto !important; margin-top:1rem; }
#block-37-17221664 .button-5{ font-size:12px !important; letter-spacing:.06em; font-weight:600; }
#block-37-17221664 .icon-1{ margin-top:3px; }
/* De kolommen droegen een translateY(-200px) om over de hero te hangen. Weg ermee. */
#block-37-17221664 .col{ transform:none !important; background:transparent !important; }

/* Knoppen buiten de hero (storybrand-blok, opdrachtgeversrij). */
.sp-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-size:15px; font-weight:600; line-height:1; padding:1rem 1.6rem; border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.sp-btn-primary{ background:var(--sp-geel); color:var(--sp-navy); }
.sp-btn-primary:hover{ background:var(--sp-navy); color:#fff; }
.sp-btn-line{ background:transparent; color:var(--sp-navy); border-color:#c9cdd4; }
.sp-btn-line:hover{ border-color:var(--sp-navy); }
.sp-clients .sp-btn-primary:hover{ background:#fff; color:var(--sp-navy); }

/* ---------- Uitlijning ----------
   Het logo staat niet op een vaste marge maar op ~65px + 1,95vw (gemeten op 1100–1920px).
   Alles wat links begint krijgt diezelfde goot, zodat logo, koppen en teksten één lijn vormen. */
:root{ --sp-goot: calc(65px + 1.95vw); }

#lib-block-13019-17221671 .col-1{ padding-left:var(--sp-goot) !important; padding-right:2rem !important; }
#lib-block-13019-17221671 .col-2{ padding-left:0 !important; padding-right:var(--sp-goot) !important; }
/* De CMS schuift .heading-3 50px naar rechts; die sprong moet eruit. */
#lib-block-13019-17221671 .sp-eyebrow{ transform:none !important; }

#block-37-17221664 .container,
.sp-story .container,
.sp-proof .container,
.sp-clients .container{ max-width:none !important; width:auto !important;
  padding-left:var(--sp-goot) !important; padding-right:var(--sp-goot) !important; margin:0 !important; }

/* Portret rechts, groot. */
#lib-block-13019-17221671 .sp-hero-figure{ aspect-ratio:656 / 688; max-height:none; }
#lib-block-13019-17221671 .sp-hero-img{ object-position:center 12%; }

@media (max-width:991px){
  :root{ --sp-goot: 24px; }
  #lib-block-13019-17221671 .col-1,
  #lib-block-13019-17221671 .col-2{ padding-left:var(--sp-goot) !important; padding-right:var(--sp-goot) !important; }
}
/* Pijl boven de kop in plaats van ernaast: anders begint de titel 50px inspringend. */
#block-37-17221664 .box-2{ flex-direction:column !important; }
#block-37-17221664 .icon-1{ margin:0 0 1rem 0 !important; }

/* ---------- Hero: hele foto als achtergrond ----------
   De vrouw staat rechts in beeld; links is zachte, lichte achtergrond.
   Witte tekst daarop haalt geen leesbaar contrast, dus er ligt een verloop tussen. */
#lib-block-13019-17221671.sp-hero{ overflow:hidden; }
#lib-block-13019-17221671 .sp-hero-bg{ position:absolute; inset:0; z-index:0; }
#lib-block-13019-17221671 .sp-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 22%; display:block; }
#lib-block-13019-17221671 .sp-hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(94deg, rgba(8,20,38,.94) 0%, rgba(8,20,38,.90) 26%, rgba(8,20,38,.72) 43%, rgba(8,20,38,.28) 58%, rgba(8,20,38,0) 70%); }
#lib-block-13019-17221671 .container-1{ position:relative; z-index:2; }
#lib-block-13019-17221671.sp-hero{ padding:6rem 0 4rem !important; min-height:640px !important; }
#lib-block-13019-17221671 .row-1{ min-height:inherit; }
#lib-block-13019-17221671 .col-1{ width:calc(620% / 12) !important; }
#lib-block-13019-17221671 .sp-slide-sub{ max-width:44ch; }
#lib-block-13019-17221671 .sp-tabs{ max-width:640px; }

@media (max-width:991px){
  #lib-block-13019-17221671.sp-hero{ min-height:auto !important; padding:16rem 0 3rem !important; }
  #lib-block-13019-17221671 .sp-hero-bg img{ object-position:78% 12%; }
  #lib-block-13019-17221671 .sp-hero-scrim{
    background:linear-gradient(178deg, rgba(8,20,38,.30) 0%, rgba(8,20,38,.55) 28%, rgba(8,20,38,.93) 46%, rgba(8,20,38,.97) 100%); }
  #lib-block-13019-17221671 .col-1{ width:100% !important; }
}

/* ---------- Ruimte: kaarten en rijen ---------- */
.sp-story{ padding:6rem 0 6.5rem !important; }
.sp-story-grid{ gap:4.5rem 5rem; }
.sp-story-cta{ margin-top:2.25rem; }
.sp-stappen{ margin-bottom:0; }

.sp-proof{ padding:5rem 0 6rem !important; }
.sp-proof-grid{ gap:2rem; }
/* Gelijke hoogte, maar de naam zakt naar onderen in plaats van dat er een gat valt. */
.sp-proof figure{ display:flex; flex-direction:column; padding:2.25rem 2rem 2.25rem !important; border-top-width:4px; }
.sp-proof blockquote{ flex:1 1 auto; }
.sp-proof figcaption{ margin-top:auto; padding-top:1.75rem; }

.sp-clients{ padding:4.5rem 0 !important; }
.sp-clients .container{ gap:2rem 3rem; }
/* Bron is 1024x688 (3:2). Een breed heroveld snijdt daar hard in, dus:
   hoger veld + uitsnede vanaf de bovenkant, zodat haar hoofd heel blijft. */
#lib-block-13019-17221671.sp-hero{ min-height:clamp(620px, 48vw, 780px) !important; padding:6rem 0 4.5rem !important; }
#lib-block-13019-17221671 .sp-hero-bg img{ object-position:68% 6%; }
#lib-block-13019-17221671 .sp-hero-scrim{
  background:linear-gradient(96deg, rgba(8,20,38,.93) 0%, rgba(8,20,38,.86) 28%, rgba(8,20,38,.60) 46%, rgba(8,20,38,.18) 60%, rgba(8,20,38,0) 72%); }
/* Uitsnede vanaf de bovenrand: haar hoofd staat bovenin de foto, dus alleen onderaan bijsnijden. */
#lib-block-13019-17221671 .sp-hero-bg img{ object-position:66% 0%; }
#lib-block-13019-17221671.sp-hero{ min-height:clamp(640px, 52vw, 820px) !important; }
/* Kolommen even hoog, knoppen op één lijn onderaan. */
#block-37-17221664 .box-1, #block-37-17221664 .box-2{ height:100%; }
#block-37-17221664 .box-3{ display:flex; flex-direction:column; flex:1 1 auto; }
#block-37-17221664 .button-wrapper{ margin-top:auto !important; padding-top:1.25rem; }
.sp-clients .container{ display:flex !important; flex-wrap:wrap; align-items:center;
  justify-content:space-between !important; text-align:left !important; }
.sp-clients h2, .sp-clients p{ text-align:left !important; }
/* Eigen wrapper: de CMS-`.container` bracht layoutregels mee die de rij centreerden. */
.sp-clients-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:2rem 3rem; padding-left:var(--sp-goot); padding-right:var(--sp-goot); text-align:left; }
.sp-clients-inner > div{ flex:1 1 420px; }

/* ---------- Experts-blok: video naast de tekst ---------- */
#lib-block-13523-17221666 .sp-experts-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:2.5rem 3.5rem; }
#lib-block-13523-17221666 .sp-experts-row .col-2{ flex:1 1 460px; width:auto !important; max-width:none !important; }
#lib-block-13523-17221666 .sp-experts-video{ flex:1 1 420px; width:auto !important; max-width:none !important; padding:0 !important; }
#lib-block-13523-17221666 .sp-experts-video .media-2{ height:auto !important; }
#lib-block-13523-17221666 .sp-experts-video video{ width:100%; height:auto; display:block; }

/* ---------- Vacaturerij: de vacatures zelf ---------- */
#lib-block-12792-20251028{ padding:5rem 0 5.5rem !important; }
.sp-vac-wrap{ padding-left:var(--sp-goot); padding-right:var(--sp-goot); }
.sp-vac-kop{ margin-bottom:2.25rem; }
.sp-vac-kop .heading-7{ margin-top:.35rem; }
.sp-vac-lijst{ list-style:none; margin:0; padding:0; border-top:1px solid #e2e5ea; }
.sp-vac-lijst li{ border-bottom:1px solid #e2e5ea; }
.sp-vac{ display:flex; align-items:center; gap:1.5rem; padding:1.35rem 0; text-decoration:none;
  transition:padding-left .2s ease, background-color .2s ease; }
.sp-vac:hover{ background:#F7F8F9; padding-left:1rem; }
.sp-vac-tekst{ flex:1 1 auto; min-width:0; }
.sp-vac-titel{ display:block; font-size:1.0625rem; font-weight:600; color:var(--sp-navy); line-height:1.35; }
.sp-vac-sub{ display:block; font-size:.9063rem; color:#5b6472; line-height:1.5; margin-top:.2rem; }
.sp-vac-sal{ flex:0 0 auto; font-size:.9063rem; font-weight:600; color:var(--sp-navy);
  background:var(--sp-geel); padding:.35rem .7rem; white-space:nowrap; }
.sp-vac-sal-leeg{ background:transparent; color:#aab0b9; font-weight:400; padding-right:0; }
.sp-vac-pijl{ flex:0 0 auto; color:var(--sp-navy); font-size:1.1rem; }
.sp-vac-voet{ margin:1.75rem 0 0; font-size:.9375rem; color:#5b6472; }
.sp-vac-voet a{ color:var(--sp-navy); text-decoration:underline; }

@media (max-width:640px){
  .sp-vac{ flex-wrap:wrap; gap:.5rem 1rem; }
  .sp-vac-tekst{ flex:1 1 100%; }
}
/* Video kreeg geen hoogte: .media-2 had zijn maat van het oude blok. Zelf vastzetten. */
#lib-block-13523-17221666 .sp-experts-video .media-2{ position:relative; aspect-ratio:16/9; height:auto !important;
  width:100%; overflow:hidden; background:#0B192C; }
#lib-block-13523-17221666 .sp-experts-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#lib-block-13523-17221666 .sp-experts-video .video-play{ display:none; }

/* ---------- Vertrouwd door, onderin de hero ---------- */
#lib-block-13019-17221671 .sp-trust{ margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.18); }
#lib-block-13019-17221671 .sp-trust-kop{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:1.1rem; }
#lib-block-13019-17221671 .sp-trust-logos{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.75rem; }
#lib-block-13019-17221671 .sp-trust-logos img{ height:26px; width:auto; display:block;
  /* de logo's zijn donker-op-transparant; zo worden ze egaal wit */
  filter:brightness(0) invert(1); opacity:.72; transition:opacity .2s ease; }
#lib-block-13019-17221671 .sp-trust-logos li:hover img{ opacity:1; }

/* ---------- Vacatures als kaarten ---------- */
.sp-kaarten{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.75rem; }
.sp-kaart{ display:flex; flex-direction:column; background:#fff; text-decoration:none;
  border:1px solid #e2e5ea; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sp-kaart:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(11,25,44,.13); border-color:#cfd4dc; }
.sp-kaart-beeld{ display:block; aspect-ratio:16/10; overflow:hidden; background:#0B192C; }
.sp-kaart-beeld img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease; }
.sp-kaart:hover .sp-kaart-beeld img{ transform:scale(1.04); }
.sp-kaart-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:1.5rem 1.5rem 1.6rem; }
.sp-kaart-sal{ align-self:flex-start; background:var(--sp-geel); color:var(--sp-navy);
  font-size:.8125rem; font-weight:600; padding:.3rem .6rem; margin-bottom:.85rem; }
.sp-kaart-titel{ display:block; font-size:1.0625rem; font-weight:600; color:var(--sp-navy); line-height:1.32; }
.sp-kaart-sub{ display:block; font-size:.9063rem; color:#5b6472; line-height:1.55; margin-top:.4rem; }
.sp-kaart-link{ display:block; margin-top:auto; padding-top:1.35rem; font-size:.875rem; font-weight:600; color:var(--sp-navy); }
.sp-kaart:hover .sp-kaart-link{ text-decoration:underline; }

@media (max-width:640px){
  #lib-block-13019-17221671 .sp-trust-logos{ gap:1.25rem 1.75rem; }
  #lib-block-13019-17221671 .sp-trust-logos img{ height:20px; }
}

/* ---------- Fast track ---------- */
.sp-fast{ background:var(--sp-navy); padding:5.5rem 0; }
.sp-fast-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:4rem;
  padding-left:var(--sp-goot); padding-right:var(--sp-goot); align-items:start; }
.sp-kicker-licht{ color:var(--sp-geel); }
.sp-fast-h2{ font-size:clamp(27px,2.7vw,40px); line-height:1.15; font-weight:600; color:#fff; margin:0 0 1.35rem; }
.sp-fast-tekst p{ font-size:1.0313rem; line-height:1.72; color:rgba(255,255,255,.82); margin:0 0 1.1rem; max-width:52ch; }
.sp-fast-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.sp-btn-licht{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.sp-btn-licht:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.sp-fast-stappen{ list-style:none; margin:0; padding:0; counter-reset:fast; }
.sp-fast-stappen li{ display:grid; grid-template-columns:130px 1fr; gap:1.25rem;
  padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.16); }
.sp-fast-stappen li:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.sp-fast-maand{ font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sp-geel); padding-top:.2rem; }
.sp-fast-wat{ font-size:.9688rem; line-height:1.62; color:rgba(255,255,255,.86); }

@media (max-width:991px){
  .sp-fast{ padding:3.5rem 0; }
  .sp-fast-wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .sp-fast-stappen li{ grid-template-columns:1fr; gap:.35rem; }
}

/* ---------- Loopbaanscan-popup ---------- */
.sp-modal[hidden]{ display:none; }
.sp-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.sp-modal-achter{ position:absolute; inset:0; background:rgba(8,20,38,.72); }
.sp-modal-kaart{ position:relative; background:#fff; width:min(560px,100%); max-height:90vh; overflow:auto;
  box-shadow:0 24px 60px rgba(8,20,38,.35); }
.sp-modal-in{ padding:2.5rem 2.5rem 2.25rem; }
.sp-modal-x{ position:absolute; top:.6rem; right:.9rem; background:none; border:0; font-size:28px; line-height:1;
  color:#5b6472; cursor:pointer; padding:.25rem .5rem; }
.sp-modal-x:hover{ color:var(--sp-navy); }
.sp-modal-h2{ font-size:1.6rem; line-height:1.2; font-weight:600; color:var(--sp-navy); margin:.35rem 0 .9rem; }
.sp-modal-lead{ font-size:.9688rem; line-height:1.68; color:#4a5361; margin:0 0 1.6rem; }
.sp-modal-form label{ display:block; font-size:.875rem; font-weight:600; color:var(--sp-navy); margin-bottom:1rem; }
.sp-modal-form input, .sp-modal-form textarea{ display:block; width:100%; margin-top:.4rem; padding:.75rem .85rem;
  font:inherit; font-size:.9375rem; font-weight:400; color:var(--sp-navy);
  border:1px solid #c9cdd4; border-radius:0; background:#fff; }
.sp-modal-form input:focus, .sp-modal-form textarea:focus{ outline:2px solid var(--sp-navy); outline-offset:1px; border-color:var(--sp-navy); }
.sp-modal-form [aria-invalid="true"]{ border-color:#b3261e; }
.sp-req{ color:#b3261e; font-weight:400; }
.sp-opt{ color:#8a8f99; font-weight:400; font-size:.8125rem; }
.sp-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; }
.sp-modal-fout{ font-size:.875rem; color:#b3261e; margin:0 0 .9rem; }
.sp-modal-verzend{ width:100%; }
.sp-modal-klein{ font-size:.8125rem; line-height:1.55; color:#6b7280; margin:1rem 0 0; }
.sp-modal-klaar h3{ font-size:1.3rem; color:var(--sp-navy); margin:.5rem 0 .75rem; outline:none; }
.sp-modal-klaar p{ font-size:.9688rem; line-height:1.68; color:#4a5361; margin:0 0 1.5rem; }
.sp-modal-klaar a{ text-decoration:underline; }

@media (max-width:560px){ .sp-modal-in{ padding:2rem 1.5rem; } }
/* `.page > section` uit de CMS-CSS wint van een losse class: daarom elementselector erbij. */
section.sp-fast{ padding:5.5rem 0 !important; }
@media (max-width:991px){ section.sp-fast{ padding:3.5rem 0 !important; } }

/* ---------- Meer lucht tussen de rijen ---------- */
section.sp-fast{ padding:7rem 0 !important; }
.sp-story{ padding:7rem 0 !important; }
.sp-proof{ padding:6rem 0 7rem !important; }
.sp-clients{ padding:6rem 0 !important; }
#block-37-17221664{ padding:4.5rem 0 !important; }
.sp-fast-wrap{ gap:5rem; }
.sp-story-grid{ gap:5rem 5.5rem; }

/* ---------- Initialen in plaats van een portret ----------
   Er bestaat geen foto van deze mensen; een willekeurig gezicht erbij zou
   suggereren dat zij het zijn. Initiaal maakt het persoonlijk zonder te liegen. */
.sp-avatar{ flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  background:var(--sp-navy); color:var(--sp-geel); display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:600; line-height:1; }
.sp-proof figcaption{ display:flex; align-items:center; gap:.9rem; }
.sp-wie{ display:block; }

/* ---------- Ervaringsverhalen tussen de vacatures ---------- */
.sp-verhaal{ background:var(--sp-navy); border-color:var(--sp-navy); }
.sp-verhaal .sp-kaart-beeld{ aspect-ratio:16/12; }
.sp-verhaal .sp-kaart-beeld img{ object-position:center 22%; }
.sp-verhaal-label{ align-self:flex-start; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sp-geel); margin-bottom:.9rem; }
.sp-verhaal-quote{ display:block; font-size:1rem; line-height:1.6; color:#fff; }
.sp-verhaal-wie{ display:flex; align-items:center; gap:.85rem; margin-top:1.1rem;
  font-size:.8438rem; line-height:1.45; color:rgba(255,255,255,.72); }
.sp-verhaal-wie strong{ color:#fff; }
.sp-verhaal .sp-kaart-link{ color:var(--sp-geel); }
.sp-verhaal-tekst .sp-kaart-body{ justify-content:center; padding:2.25rem 1.75rem; }

/* ---------- Uitklapmenu: alleen een kaartje onder het item ---------- */
header .dropdown-menu{ background:#fff !important; box-shadow:0 14px 30px rgba(8,20,38,.16);
  border-top:2px solid var(--sp-geel); padding:.6rem 0 !important; }
header .dropdown-menu::before, header .dropdown-menu::after,
header .menu::before, header .menu::after,
header .menu-1::before, header .menu-1::after{ content:none !important; }
header .dropdown-menu ul{ margin:0; padding:0; }
header .dropdown-menu a{ display:block; padding:.55rem 1.25rem; }
/* Het CMS klapt via `.menu-container::before` een wit vlak over de hele breedte uit
   (1440x242 zodra een submenu opent). Dat vlak blijft nu de balk zelf; het uitklapmenu
   heeft zijn eigen kaartje. */
header .menu-container::before{ height:100% !important; bottom:auto !important; }
/* Kruislingse fade liet twee koppen tegelijk zien: eerst weg, dan pas de nieuwe. */
#lib-block-13019-17221671 .sp-slide{ transition:opacity .3s ease, visibility .3s, transform .3s ease; }
#lib-block-13019-17221671 .sp-slide.is-active{ transition-delay:.28s; }
/* Naam en rol onder elkaar; naast elkaar brak de naam middenin af. */
.sp-verhaal-wie{ display:block; }
.sp-verhaal-wie strong{ display:block; }
.sp-verhaal-tekst .sp-verhaal-wie{ display:flex; align-items:center; gap:.85rem; }
.sp-verhaal-tekst .sp-verhaal-wie .sp-wie{ display:block; }
/* Vacaturekaarten zonder salaris: gelijke koppositie houden. */
.sp-kaart-titel{ margin-top:0; }
.sp-kaart:not(.sp-verhaal) .sp-kaart-body{ padding-top:1.5rem; }

/* =========================================================================
   RITME EN UITLIJNING
   Tot hier had elk blok zijn eigen maten: de conversieblokken stonden op de
   goot, de CMS-blokken 60-130px verder naar binnen, en de verticale ruimte
   liep van 0 tot 117px per rij. Hieronder staan alle rijen op dezelfde twee
   maten: --sp-goot links/rechts en --sp-rij boven/onder.
   ========================================================================= */

:root{
  --sp-rij: 7rem;        /* volwaardige inhoudsrij */
  --sp-band: 5.5rem;     /* smalle band (gele strook, cta-balk) */
  --sp-kolomgat: 2rem;   /* ruimte tussen twee kolommen binnen een rij */
}

/* ---- 1. Verticaal ritme: elke rij dezelfde maat boven en onder ---------- */
#block-37-17221664{ padding:var(--sp-band) 0 !important; }
.sp-story{ padding:var(--sp-rij) 0 !important; }
#lib-block-13523-17221666{ padding:var(--sp-rij) 0 !important; }
section.sp-fast{ padding:var(--sp-rij) 0 !important; }
/* Dit blok stond op min-height:100vh met verticaal gecentreerde inhoud; op een
   groot scherm gaf dat 227px lucht boven en onder bovenop de sectiemaat. */
#lib-block-13539-17221665{ padding:var(--sp-rij) 0 !important; min-height:0 !important; }
#lib-block-13539-17221665 > .container{ justify-content:flex-start !important; }
.sp-proof{ padding:var(--sp-rij) 0 !important; }
#lib-block-12792-20251028{ padding:var(--sp-rij) 0 !important; }
#lib-block-12707-17221676{ padding:var(--sp-rij) 0 !important; }
.sp-clients{ padding:var(--sp-band) 0 !important; }
/* Ook de footer stond op een vaste hoogte met gecentreerde inhoud. */
footer.lib-block-13537-2{ padding:var(--sp-band) 0 2.5rem !important; min-height:0 !important; }
footer.lib-block-13537-2 > .container{ justify-content:flex-start !important; }

/* De CMS-kolommen droegen die ruimte zelf mee (40-80px boven én onder).
   Die telde op bij de sectiemaat; nu hoort de ruimte bij de sectie. */
#lib-block-13523-17221666 > .container > .row,
#lib-block-13539-17221665 > .container > .row,
#lib-block-12707-17221676 > .container > .row,
footer.lib-block-13537-2 > .container > .row{ padding-top:0 !important; padding-bottom:0 !important; }
#lib-block-13523-17221666 > .container > .row > .col,
#lib-block-13539-17221665 > .container > .row > .col,
#lib-block-12707-17221676 > .container > .row > .col,
footer.lib-block-13537-2 > .container > .row > .col{ padding-top:0 !important; padding-bottom:0 !important; }

/* ---- 2. Eén goot: alles begint en eindigt op dezelfde lijn -------------- */
/* De kolompadding was tegelijk buitenmarge en kolomgoot. Die twee rollen
   splitsen we: de rij houdt de goot, de kolom houdt het kolomgat. */
#lib-block-13523-17221666 > .container > .row,
#lib-block-13539-17221665 > .container > .row,
#lib-block-12707-17221676 > .container > .row,
footer.lib-block-13537-2 > .container > .row{
  padding-left:var(--sp-goot) !important; padding-right:var(--sp-goot) !important; }
#lib-block-13523-17221666 > .container > .row > .col,
#lib-block-13539-17221665 > .container > .row > .col,
#lib-block-12707-17221676 > .container > .row > .col,
footer.lib-block-13537-2 > .container > .row > .col{
  padding-left:0 !important; padding-right:0 !important; }

/* Het CMS liet zijn slide-in-effecten in hun eindstand staan als een vaste
   translateX: +60px op twee kolomkoppen, -20px op de experts-tekst, -35px op de
   insights-kop en -5px op het footerlogo. Die schoven hun blok uit de lijn. */
#lib-block-13523-17221666 .row-1 .col-1,
#lib-block-13539-17221665 .row-1 .col-1,
#lib-block-13523-17221666 .sp-experts-row .text-2,
#lib-block-13539-17221665 .row-1 .heading-2,
#lib-block-12707-17221676 .row-1 .heading-2,
#lib-block-12707-17221676 .col-5 .button-wrapper a,
footer.lib-block-13537-2 .media-1{ transform:none !important; }

/* ---- 3. Experts: kop, tekst en video op één lijn ------------------------ */
#lib-block-13523-17221666 .row-1{ margin-bottom:2.75rem; }
#lib-block-13523-17221666 .sp-experts-row{ align-items:center; }
#lib-block-13523-17221666 .sp-experts-row .col-2 p{ max-width:62ch; }

/* ---- 4. Waarom kiezen: zes kaarten strak in het grid -------------------- */
/* Als raster in plaats van percentagekolommen met padding: de buitenste
   kaarten raken nu precies de goot en de tussenruimte is overal gelijk. */
#lib-block-13539-17221665 .row-2{
  display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:3.25rem var(--sp-kolomgat); margin:0 !important; align-items:start; }
#lib-block-13539-17221665 .row-2 > .col{
  width:auto !important; max-width:none !important; padding:0 !important; }
#lib-block-13539-17221665 .row-1 > .col-1 .heading-2{ max-width:14ch; }

/* ---- 5. Insights: kaarten op dezelfde lijn als de kop ------------------- */
/* Let op: geen breedte op .swiper zetten. Swiper rekent zijn slidebreedte uit
   de containerbreedte; `width:auto` maakt die 0 en dan stapelen alle kaarten. */
#lib-block-12707-17221676 .col-1.swiper{
  margin-left:calc(var(--sp-kolomgat) / -2) !important;
  margin-right:calc(var(--sp-kolomgat) / -2) !important;
  margin-top:2.75rem; }
#lib-block-12707-17221676 .swiper-slide{
  padding-left:calc(var(--sp-kolomgat) / 2) !important;
  padding-right:calc(var(--sp-kolomgat) / 2) !important;
  padding-top:0 !important; padding-bottom:0 !important; }
#lib-block-12707-17221676 .col-5{ margin-top:2.5rem; }

/* ---- 6. Footer ---------------------------------------------------------- */
/* Logo en linkkoppen op dezelfde bovenlijn; de drie linkkolommen liepen
   142px voor de rechtergoot dood. */
/* Alleen op breed scherm: daaronder stapelt het CMS de kolommen zelf, en dan
   duwt een eigen raster ze over elkaar heen. */
@media (min-width:992px){
  footer.lib-block-13537-2 .row-1{ align-items:flex-start; }
  footer.lib-block-13537-2 .row-1 > .col-2{ flex:1 1 auto !important; }
  footer.lib-block-13537-2 .row-2{
    display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:2rem var(--sp-kolomgat); }
  footer.lib-block-13537-2 .row-2 > .col{
    width:auto !important; max-width:none !important; padding:0 !important; }
}
footer.lib-block-13537-2 .row-3{ margin-top:3.5rem; }
footer.lib-block-13537-2 .row-3 > .col{ padding-left:0 !important; padding-right:0 !important; }

/* ---- 7. Fast track: kolommen even hoog, tijdlijn over de volle hoogte --- */
/* De drie maandregels stonden bovenin en lieten daaronder een gat vallen dat
   even hoog was als het blok zelf. Ze verdelen zich nu over de hele kolom,
   zodat de onderste lijn samenvalt met de onderkant van de knoppen. */
.sp-fast-wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem var(--sp-fast-gat, 6rem);
  align-items:stretch; }
.sp-fast-tekst{ display:flex; flex-direction:column; }
.sp-fast-tekst p{ max-width:58ch; }
.sp-fast-tekst p:last-of-type{ margin-bottom:0; }
.sp-fast-cta{ margin-top:auto; padding-top:2rem; }
/* De drie regels vulden maar de bovenste helft van de kolom; daaronder viel een
   gat zo hoog als het blok zelf. Ze zitten nu in een paneel dat de volle hoogte
   van de tekstkolom haalt, met dezelfde gele kaartrand als de quotes verderop. */
.sp-fast-stappen{
  display:flex; flex-direction:column; justify-content:center; height:100%;
  background:rgba(255,255,255,.045);
  border-top:3px solid var(--sp-geel);
  padding:.75rem 2.5rem 1.25rem; }
.sp-fast-stappen li{ align-items:baseline; grid-template-columns:120px 1fr;
  padding:1.9rem 0; border-top:1px solid rgba(255,255,255,.14); }
.sp-fast-stappen li:first-child{ border-top:0; }
.sp-fast-stappen li:last-child{ border-bottom:0; }
.sp-fast-maand{ padding-top:0; }
.sp-fast-wat{ max-width:52ch; }

@media (max-width:1279px){ :root{ --sp-fast-gat:4rem; } }

/* ---- 8. Kleinere schermen: hetzelfde ritme, kortere maat ---------------- */
@media (max-width:991px){
  :root{ --sp-rij:4rem; --sp-band:3.25rem; --sp-kolomgat:1.5rem; }
  .sp-fast-wrap{ grid-template-columns:1fr; gap:2.5rem; }
  .sp-fast-cta{ margin-top:0; }
  .sp-fast-stappen{ display:block; height:auto; padding:.5rem 1.5rem 1rem; }
  /* Maand en omschrijving onder elkaar; naast elkaar liep de tekst het scherm uit. */
  .sp-fast-stappen li{ display:block; padding:1.35rem 0; }
  .sp-fast-maand{ display:block; margin-bottom:.3rem; }
  .sp-fast-wat{ max-width:none; }
  #lib-block-13523-17221666 .row-1{ margin-bottom:2rem; }
  /* Tussen 768 en 991px stond het logo op 80px terwijl de inhoud op 24px begon. */
  header.lib-block-16066-1 > .container > .row-1{
    padding-left:var(--sp-goot) !important; padding-right:var(--sp-goot) !important; }
  header.lib-block-16066-1 > .container > .row-1 > .col-1{
    transform:none !important; padding-left:0 !important; }
  /* .col-5 is een lege tussenkolom van 30px; die duwde het hamburgermenu
     naar binnen terwijl het logo al op de goot stond. */
  header.lib-block-16066-1 > .container > .row-1 > .col-5.empty{
    width:0 !important; min-width:0 !important; padding:0 !important; }
  header.lib-block-16066-1 > .container > .row-1 > .col-2{ padding-right:0 !important; }
  #lib-block-13539-17221665 .row-1 > .col-1{ margin-bottom:2.5rem; }
  #lib-block-13539-17221665 .row-2{
    grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:2.5rem var(--sp-kolomgat); }
}

/* ---- 9. Vertrouwd door: groter en onderin de hero ----------------------- */
/* De logo's stonden midden in de kolom mee te zweven. Ze horen onderaan de
   hero te staan, als voetnoot onder het verhaal, en mochten 20% groter. */
@media (min-width:992px){
  #lib-block-13019-17221671.sp-hero{ padding-top:7.5rem !important; padding-bottom:4rem !important; }
  #lib-block-13019-17221671.sp-hero .row-1{ align-items:stretch; }
  #lib-block-13019-17221671.sp-hero .col-1{ display:flex; flex-direction:column; }
  #lib-block-13019-17221671 .sp-trust{ margin-top:auto !important; }
}
#lib-block-13019-17221671 .sp-trust{ padding-top:2rem; }
#lib-block-13019-17221671 .sp-trust-logos{ gap:1.5rem 3.25rem; }
#lib-block-13019-17221671 .sp-trust-logos img{ height:31px; }   /* was 26px */
@media (max-width:640px){
  #lib-block-13019-17221671 .sp-trust-logos img{ height:24px; }  /* was 20px */
  #lib-block-13019-17221671 .sp-trust-logos{ gap:1.25rem 2rem; }
}

/* ---- 10. Ervaringskaarten: vaste kolommen en een paardensprong ----------
   `auto-fill` liet het aantal kolommen van de vensterbreedte afhangen, dus
   waar de twee ervaringskaarten uitkwamen was toeval. Op een laptop (vier
   kolommen) vielen ze precies onder elkaar: kolom 3 in rij 1 en kolom 3 in
   rij 2. Het kolomaantal staat nu vast per maat en de twee kaarten hebben
   hun eigen cel, twee kolommen opzij en een rij lager — de sprong van een
   paard. `dense` laat de vacatures de overgebleven cellen vullen in de
   volgorde van de HTML, zodat er geen gat valt.
   Let op bij het toevoegen van vacatures: de twee cellen hieronder staan
   vast, de rest schuift eromheen. */
.sp-kaarten{ grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-flow:row dense; }
.sp-verhaal:not(.sp-verhaal-tekst){ grid-area:1 / 3; }
.sp-verhaal-tekst{ grid-area:2 / 1; }

/* Breed scherm: vijf kolommen, tien kaarten, dus twee rijen. Dezelfde sprong. */
@media (min-width:1900px){
  .sp-kaarten{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width:1439px){
  .sp-kaarten{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
/* Twee kolommen: twee opzij bestaat niet, dus een kolom opzij en twee rijen
   lager. Ook dan staan ze niet onder elkaar en niet naast elkaar. */
@media (max-width:1023px){
  .sp-kaarten{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sp-verhaal:not(.sp-verhaal-tekst){ grid-area:1 / 2; }
  .sp-verhaal-tekst{ grid-area:3 / 1; }
}
/* Een kolom: gewoon de volgorde van de HTML, verspreid tussen de vacatures. */
@media (max-width:599px){
  .sp-kaarten{ grid-template-columns:minmax(0,1fr); }
  .sp-verhaal:not(.sp-verhaal-tekst), .sp-verhaal-tekst{ grid-area:auto; }
}

/* ---- 11. Ervaringskaart met foto: zelfde maat als een vacaturekaart -----
   Het beeld stond op 16/12 en was daarmee 39px hoger dan op de vacatures.
   De onderrand van de foto liep dus niet mee met de rij, en de kaart trok
   de hele rij 200px uit — de vacatures ernaast kregen een gat onder hun
   tekst. Zelfde uitsnede als de rest; de uitsnede blijft hoog zodat het
   gezicht in beeld blijft. */
.sp-verhaal .sp-kaart-beeld{ aspect-ratio:16/10; }
.sp-verhaal .sp-kaart-beeld img{ object-position:center 28%; }

/* =========================================================================
   12. BLOGSJABLOON — insight-artikelen en het overzicht
   De CMS-opmaak zette datum, titel, een blok platte tekst en een
   nieuwsbriefkaartje in drie kolommen naast elkaar. Geen hero, geen echte
   tussenkoppen (die stonden als <strong> midden in de alinea), geen route
   naar een vacature. Hieronder staat het sjabloon dat daarvoor in de plaats
   komt: hero met de quote, verhaal eroverheen, vacatures ernaast.
   ========================================================================= */

/* `.page > section` uit de CMS-CSS wint van een losse class. */
section.sp-art, section.sp-blog-ovz{ padding:0 !important; min-height:0 !important; background:#fff; }

@property --p{ syntax:'<number>'; inherits:true; initial-value:0; }

/* ---- Hero: blijft liggen, het verhaal schuift eroverheen ----------------
   Tekst verticaal in het midden (Joost 2/9), de leeshint los onderin. */
.sp-art-hero{ position:sticky; top:0; z-index:0;
  height:min(82svh, 700px); min-height:440px; overflow:hidden; background:var(--sp-navy); }
.sp-art-hero-bg{ position:absolute; inset:0; }
.sp-art-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 28%;
  transform:scale(calc(1 + var(--p) * .06)); transform-origin:center 40%; }
/* Twee lagen: een egale tint zodat de foto bovenin niet verwatert, en
   daarboven het leesverloop naar de onderkant waar de quote staat. */
.sp-art-hero-scrim{ position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(8,20,38,.96) 0%, rgba(8,20,38,.86) 30%, rgba(8,20,38,.70) 55%, rgba(8,20,38,.44) 78%, rgba(8,20,38,.22) 100%),
    linear-gradient(rgba(8,20,38,.22), rgba(8,20,38,.22)); }
.sp-art-hero-in{ position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--sp-goot) 5.5rem; }
.sp-art-hero-tekst{ opacity:calc(1 - var(--p)); transform:translateY(calc(var(--p) * -70px)); }
.sp-art-meta{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.25rem;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.sp-art-soort{ background:var(--sp-geel); color:var(--sp-navy); font-weight:600; padding:.3rem .55rem; }
.sp-art-datum{ color:rgba(255,255,255,.7); }
.sp-art-quote, .sp-art-kop{ font-weight:600; color:#fff; margin:0; }
.sp-art-quote{ font-size:clamp(26px,3.1vw,46px); line-height:1.16; max-width:26ch; }
.sp-art-kop{ font-size:clamp(24px,2.7vw,40px); line-height:1.18; max-width:24ch; }
.sp-art-wie{ margin-top:1.6rem; font-size:.9063rem; line-height:1.5; color:rgba(255,255,255,.72); }
.sp-art-wie strong{ display:block; color:#fff; font-weight:600; }

/* De uitnodiging om te gaan lezen; verdwijnt zodra je dat doet. */
.sp-art-hint{ position:absolute; left:var(--sp-goot); bottom:2.25rem; display:flex; align-items:center; gap:.75rem;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--sp-geel); text-decoration:none;
  opacity:calc(1 - var(--p) * 3); }
.sp-art-hint-lijn{ width:1px; height:34px; background:var(--sp-geel); display:block;
  animation:sp-hint 1.9s ease-in-out infinite; transform-origin:top; }
@keyframes sp-hint{ 0%,100%{ transform:scaleY(.35); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }

/* ---- Het verhaal ------------------------------------------------------- */
.sp-art-blad{ position:relative; z-index:1; background:#fff;
  padding:var(--sp-rij) 0 calc(var(--sp-rij) * .85); }
.sp-art-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:4.5rem;
  padding-left:var(--sp-goot); padding-right:var(--sp-goot); align-items:start; }
.sp-art-tekst{ max-width:68ch; }
.sp-art-tekst p{ font-size:1.0313rem; line-height:1.8; color:#3d4451; margin:0 0 1.35rem; }
.sp-art-tekst > p:first-child{ font-size:1.1563rem; line-height:1.72; color:#26374f; }
.sp-art-tekst p:last-child{ margin-bottom:0; }
.sp-art-tekst strong{ color:var(--sp-navy); font-weight:600; }
.sp-art-tekst a{ color:var(--sp-navy); text-decoration:underline; overflow-wrap:anywhere; }
.sp-art-h2{ font-size:1.375rem; line-height:1.3; font-weight:600; color:var(--sp-navy);
  margin:2.9rem 0 1.05rem; padding-top:.2rem; }
.sp-art-h2:first-child{ margin-top:0; }

/* ---- Vacatures ernaast, meescrollend ----------------------------------- */
.sp-art-rail{ position:sticky; top:7rem; }
.sp-rail-kaart{ background:#F7F8F9; border-top:3px solid var(--sp-geel); padding:1.4rem 1.4rem 1.25rem; }
.sp-rail-kop{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#6b7280; margin-bottom:1rem; }
.sp-rail-vac{ display:block; text-decoration:none; padding:.95rem 0; border-top:1px solid #e2e5ea; }
.sp-rail-vac + .sp-rail-vac{ }
.sp-rail-kop + .sp-rail-vac{ border-top:0; padding-top:0; }
.sp-rail-sal{ display:block; font-size:.8125rem; font-weight:600; color:#5b6472; }
.sp-rail-titel{ display:block; font-size:.9688rem; font-weight:600; color:var(--sp-navy); line-height:1.35; margin-top:.2rem; }
.sp-rail-vac:hover .sp-rail-titel{ text-decoration:underline; }
.sp-rail-alle{ display:inline-block; margin-top:1.2rem; padding-top:1rem; border-top:1px solid #e2e5ea;
  width:100%; font-size:.875rem; font-weight:600; color:var(--sp-navy); text-decoration:none; }
.sp-rail-alle:hover{ text-decoration:underline; }

/* ---- Meer blogs onderaan ---------------------------------------------- */
.sp-art-meer{ position:relative; z-index:1; background:#F2F2F2;
  padding:calc(var(--sp-rij) * .8) var(--sp-goot); }
.sp-art-meer-kop{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.75rem 2rem; margin-bottom:2.25rem; }
.sp-art-meer-h2{ font-size:clamp(22px,2.2vw,30px); line-height:1.2; font-weight:600; color:var(--sp-navy); margin:0; }
.sp-art-meer-alle{ font-size:.9063rem; font-weight:600; color:var(--sp-navy); text-decoration:underline; }

/* ---- Blogkaarten: overzicht en 'meer uit insights' -------------------- */
.sp-blog-raster{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.75rem; }
.sp-blog-kaart{ display:flex; flex-direction:column; background:#fff; border:1px solid #e2e5ea;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sp-blog-kaart:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(11,25,44,.13); border-color:#cfd4dc; }
.sp-blog-beeld{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sp-navy); }
.sp-blog-beeld img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.sp-blog-kaart:hover .sp-blog-beeld img{ transform:scale(1.04); }
.sp-blog-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:1.4rem 1.4rem 1.5rem; }
.sp-blog-meta{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#8a8f99; margin-bottom:.7rem; }
.sp-blog-titel{ display:block; font-size:1.0313rem; font-weight:600; color:var(--sp-navy); line-height:1.38;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sp-blog-link{ display:block; margin-top:auto; padding-top:1.25rem; font-size:.875rem; font-weight:600; color:var(--sp-navy); }
.sp-blog-kaart:hover .sp-blog-link{ text-decoration:underline; }

/* ---- Overzichtspagina: uitgelicht artikel bovenaan -------------------- */
.sp-blog-ovz{ background:#fff; padding:0 0 var(--sp-rij) !important; }
.sp-blog-wrap{ padding-left:var(--sp-goot); padding-right:var(--sp-goot); }
.sp-blog-uit{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; margin-bottom:2.5rem;
  background:var(--sp-navy); text-decoration:none; overflow:hidden; }
.sp-blog-uit-beeld{ display:block; aspect-ratio:16/11; overflow:hidden; }
.sp-blog-uit-beeld img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.sp-blog-uit:hover .sp-blog-uit-beeld img{ transform:scale(1.03); }
.sp-blog-uit-body{ display:flex; flex-direction:column; justify-content:center; padding:2.75rem 2.5rem; }
.sp-blog-uit .sp-blog-meta{ color:var(--sp-geel); }
.sp-blog-uit-titel{ display:block; font-size:clamp(21px,1.9vw,29px); line-height:1.22; font-weight:600; color:#fff; }
.sp-blog-uit-lead{ display:block; margin-top:1rem; font-size:.9688rem; line-height:1.7; color:rgba(255,255,255,.78); }
.sp-blog-uit .sp-blog-link{ margin-top:1.75rem; padding-top:0; color:var(--sp-geel); }

/* ---- Kleiner scherm --------------------------------------------------- */
@media (max-width:1199px){
  .sp-art-grid{ grid-template-columns:minmax(0,1fr) 260px; gap:3rem; }
  .sp-blog-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:899px){
  .sp-art-hero{ height:auto; min-height:0; position:relative; }
  .sp-art-hero-in{ padding:5rem var(--sp-goot) 5.5rem; min-height:78svh; }
  .sp-art-hero-tekst{ opacity:1; transform:none; }
  .sp-art-hero-bg img{ transform:none; }
  .sp-art-grid{ grid-template-columns:minmax(0,1fr); gap:3rem; }
  .sp-art-rail{ position:static; }
  .sp-art-tekst{ max-width:none; }
  .sp-blog-uit{ grid-template-columns:minmax(0,1fr); }
  .sp-blog-uit-beeld{ aspect-ratio:16/9; }
  .sp-blog-uit-body{ padding:2rem 1.75rem 2.25rem; }
}
@media (max-width:599px){
  .sp-blog-raster{ grid-template-columns:minmax(0,1fr); }
}
/* Geen beweging voor wie daar niet om vraagt. */
@media (prefers-reduced-motion: reduce){
  .sp-art-hero-tekst{ opacity:1 !important; transform:none !important; }
  .sp-art-hero-bg img{ transform:none !important; }
  .sp-art-hint-lijn{ animation:none; }
}

/* Een enkele lege alinea uit de CMS-tekst laten we niet als gat staan. */
.sp-art-tekst p:empty{ display:none; }

/* ---- 13. Rechterkolom, portret en een quote in het verhaal --------------
   De drie vacatures zaten in één grijs blok met alleen salaris en titel. Ze
   zijn nu elk een eigen kaart met een regel die zegt waarom je zou klikken,
   gericht op wie het werk doet en niet op wie de vacature schreef.
   Daarboven staat de persoon over wie het verhaal gaat. Waar geen foto van
   iemand bestaat staat de initiaal: een willekeurig gezicht zou suggereren
   dat het hem of haar is. */
.sp-art-rail{ display:flex; flex-direction:column; gap:.85rem; }
.sp-rail-kop{ margin:.5rem 0 .15rem; }

.sp-portret{ display:flex; align-items:center; gap:1rem; margin-bottom:.6rem;
  padding-bottom:1.25rem; border-bottom:1px solid #e2e5ea; }
.sp-portret-beeld{ flex:0 0 76px; width:76px; height:76px; border-radius:50%;
  overflow:hidden; background:var(--sp-navy); }
.sp-portret-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-portret-initiaal{ flex:0 0 76px; width:76px; height:76px; border-radius:50%;
  background:var(--sp-navy); color:var(--sp-geel); display:inline-flex;
  align-items:center; justify-content:center; font-size:1.75rem; font-weight:600; line-height:1; }
.sp-portret-wie{ font-size:.8438rem; line-height:1.5; color:#5b6472; }
.sp-portret-wie strong{ display:block; font-size:1rem; color:var(--sp-navy); margin-bottom:.15rem; }

.sp-rvac{ display:block; background:#fff; border:1px solid #e2e5ea;
  border-top:3px solid var(--sp-geel); padding:1.15rem 1.25rem 1.2rem; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sp-rvac:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,25,44,.10); border-color:#cfd4dc; }
.sp-rvac-sal{ display:inline-block; background:var(--sp-geel); color:var(--sp-navy);
  font-size:.75rem; font-weight:600; padding:.25rem .5rem; margin-bottom:.7rem; }
.sp-rvac-titel{ display:block; font-size:1rem; font-weight:600; color:var(--sp-navy); line-height:1.32; }
.sp-rvac-pitch{ display:block; margin-top:.45rem; font-size:.8438rem; line-height:1.6; color:#5b6472; }
.sp-rvac-link{ display:block; margin-top:.9rem; font-size:.8125rem; font-weight:600; color:var(--sp-navy); }
.sp-rvac:hover .sp-rvac-link{ text-decoration:underline; }
.sp-rail-alle{ margin-top:.4rem; border-top:0; padding-top:0; }

/* Eén uitspraak uit het verhaal, halverwege, als rustpunt in de kolom. */
.sp-pull{ margin:2.75rem 0; padding-left:1.6rem; border-left:3px solid var(--sp-geel); }
.sp-pull p{ font-size:1.3125rem; line-height:1.48; font-weight:600; color:var(--sp-navy); margin:0; }
.sp-pull-wie{ display:block; margin-top:.9rem; font-size:.8438rem; color:#6b7280; }

/* Kaarten: de titel korter, met de derde-persoonsintro eronder. */
.sp-blog-titel{ -webkit-line-clamp:2; }
.sp-blog-intro{ display:-webkit-box; margin-top:.6rem; font-size:.875rem; line-height:1.6;
  color:#5b6472; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width:899px){
  .sp-art-rail{ gap:.75rem; }
  .sp-pull{ margin:2.25rem 0; }
}

/* =========================================================================
   14. VACATUREPAGINA — gebouwd om te converteren
   De CMS-pagina begon met een banner 'Openstaande vacature', zette daaronder
   de hele vacaturetekst in één kolom en verstopte de sollicitatie in een
   knop naar een popin met een formulier dat naar de live backend postte.
   Geen salaris in beeld, geen reden om via Schade Professionals te gaan,
   geen andere vacature in zicht.
   Nu: hero met de rol, het salaris en twee knoppen; een band met wat het
   oplevert om via Schade Professionals te werken; de vacature met een
   feitenpaneel ernaast; het formulier op de pagina zelf; en onderaan de
   andere vacatures.
   ========================================================================= */

section.sp-vacp{ padding:0 !important; min-height:0 !important; background:#fff; }

/* ---- Hero -------------------------------------------------------------- */
.sp-vacp-hero{ position:relative; overflow:hidden; background:var(--sp-navy); }
.sp-vacp-hero-bg{ position:absolute; inset:0; }
.sp-vacp-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 26%; }
.sp-vacp-hero-scrim{ position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(8,20,38,.95) 0%, rgba(8,20,38,.88) 30%, rgba(8,20,38,.62) 52%, rgba(8,20,38,.24) 72%, rgba(8,20,38,.10) 100%),
    linear-gradient(rgba(8,20,38,.24), rgba(8,20,38,.24)); }
.sp-vacp-hero-in{ position:relative; z-index:2;
  padding:7rem var(--sp-goot) 3.25rem; max-width:62rem; }
.sp-vacp-kicker{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sp-geel); margin-bottom:1.1rem; }
.sp-vacp-h1{ font-size:clamp(28px,3.2vw,46px); line-height:1.12; font-weight:600; color:#fff;
  margin:0; max-width:24ch; }
.sp-vacp-sub{ font-size:1.0313rem; line-height:1.65; color:rgba(255,255,255,.84);
  margin:.9rem 0 0; max-width:52ch; }

/* De feiten waar een jurist als eerste naar zoekt: wat betaalt het, en wat
   voor verband is het. Daarom staan ze in de hero en niet onderaan. */
.sp-vacp-feiten{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.9rem 0 0; padding:0; }
.sp-vacp-feiten li{ font-size:.875rem; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.32); padding:.45rem .8rem; }
.sp-vacp-feiten li:first-child{ background:var(--sp-geel); color:var(--sp-navy); border-color:var(--sp-geel); }
.sp-vacp-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.sp-vacp-hero .sp-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.sp-vacp-hero .sp-btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ---- Wat het oplevert om via Schade Professionals te gaan -------------- */
.sp-voordelen{ background:#F2F2F2; padding:calc(var(--sp-rij) * .7) var(--sp-goot); }
.sp-voordelen-kop{ margin-bottom:2.25rem; }
.sp-voordelen-h2{ font-size:clamp(22px,2.2vw,31px); line-height:1.2; font-weight:600;
  color:var(--sp-navy); margin:.5rem 0 0; max-width:26ch; }
.sp-voordelen-lijst{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2rem var(--sp-kolomgat); }
.sp-voordelen-lijst li{ border-top:3px solid var(--sp-geel); padding-top:1.1rem; }
.sp-voordelen-lijst strong{ display:block; font-size:1.0313rem; line-height:1.35; color:var(--sp-navy); }
.sp-voordelen-lijst span{ display:block; margin-top:.5rem; font-size:.9063rem; line-height:1.65; color:#4a5361; }

/* ---- De vacature zelf, met de feiten ernaast --------------------------- */
/* Onderruimte zit in de tekstkolom, niet in de wrapper: zo loopt de gridrij -
   en daarmee hoe ver het zijblok kan meezweven - door tot aan de formulierrij. */
.sp-vacp-blad{ padding:var(--sp-rij) 0 0; }
.sp-vacp-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:4.5rem;
  padding-left:var(--sp-goot); padding-right:var(--sp-goot); align-items:start; }
.sp-vacp-tekst{ max-width:68ch; padding-bottom:var(--sp-rij); }
.sp-vacp-tekst p{ font-size:1.0313rem; line-height:1.8; color:#3d4451; margin:0 0 1.35rem; }
.sp-vacp-tekst > p:first-child{ font-size:1.1563rem; line-height:1.72; color:#26374f; }
.sp-vacp-tekst strong{ color:var(--sp-navy); font-weight:600; }
.sp-vacp-tekst a{ color:var(--sp-navy); text-decoration:underline; }
.sp-vacp-tekst h2{ font-size:1.375rem; line-height:1.3; font-weight:600; color:var(--sp-navy);
  margin:2.9rem 0 1.05rem; }
.sp-vacp-tekst h2:first-child{ margin-top:0; }
.sp-vacp-tekst ul{ margin:0 0 1.5rem; padding:0; list-style:none; }
.sp-vacp-tekst li{ position:relative; padding-left:1.5rem; margin-bottom:.6rem;
  font-size:1.0313rem; line-height:1.7; color:#3d4451; }
.sp-vacp-tekst li::before{ content:''; position:absolute; left:0; top:.7em;
  width:9px; height:2px; background:var(--sp-geel); }
.sp-vacp-tekst p:empty{ display:none; }

/* Het zijblok scrollt mee. Past het geheel niet op een laag scherm, dan krimpt
   het voorwaarden-/quotepaneel (dat krijgt zijn eigen scrollbalkje) en blijven de
   solliciteerknop en het contactblok op volle hoogte in beeld. */
.sp-vacp-zij{ position:sticky; top:7rem; align-self:start;
  display:flex; flex-direction:column; gap:1rem;
  max-height:calc(100vh - 8.5rem); max-height:calc(100dvh - 8.5rem); }
.sp-vacp-zij > .sp-vacp-wissel{ min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#c8ccd3 transparent; }
.sp-vacp-zij > .sp-btn, .sp-vacp-zij > .sp-vacp-contact{ flex:0 0 auto; }
.sp-vacp-paneel{ background:#F7F8F9; border-top:3px solid var(--sp-geel); padding:1.4rem 1.4rem 1.5rem; }
.sp-vacp-paneel h2{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#6b7280; font-weight:600; margin:0 0 1.1rem; }
.sp-vacp-paneel dl{ margin:0; }
.sp-vacp-paneel dt{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#8a8f99; }
.sp-vacp-paneel dd{ margin:.2rem 0 1rem; font-size:.9375rem; line-height:1.5; font-weight:600; color:var(--sp-navy); }
.sp-vacp-paneel dd:last-child{ margin-bottom:0; }
.sp-vacp-paneel ul{ list-style:none; margin:.2rem 0 0; padding:0; }
.sp-vacp-paneel ul li{ font-size:.875rem; line-height:1.5; color:#4a5361; padding:.35rem 0 .35rem 1.1rem; position:relative; }
.sp-vacp-paneel ul li::before{ content:''; position:absolute; left:0; top:.85em; width:7px; height:2px; background:var(--sp-geel); }
.sp-vacp-zij .sp-btn{ width:100%; }
.sp-vacp-mail{ font-size:.8438rem; line-height:1.6; color:#6b7280; margin:0; }
.sp-vacp-mail a{ color:var(--sp-navy); text-decoration:underline; }

/* ---- Solliciteren, op de pagina zelf ---------------------------------- */
.sp-soll{ background:var(--sp-navy); padding:var(--sp-rij) var(--sp-goot); }
.sp-soll-in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:4rem; align-items:start; }
.sp-soll-kop .sp-kicker{ color:var(--sp-geel); }
.sp-soll-h2{ font-size:clamp(24px,2.5vw,36px); line-height:1.15; font-weight:600; color:#fff; margin:0 0 1.1rem; max-width:20ch; }
.sp-soll-kop p{ font-size:1rem; line-height:1.72; color:rgba(255,255,255,.8); margin:0 0 1rem; max-width:44ch; }
.sp-soll-stappen{ list-style:none; margin:1.5rem 0 0; padding:0; }
.sp-soll-stappen li{ display:flex; gap:.85rem; padding:.6rem 0; font-size:.9375rem;
  line-height:1.6; color:rgba(255,255,255,.82); }
.sp-soll-stappen span{ flex:0 0 24px; height:24px; border-radius:50%; background:var(--sp-geel);
  color:var(--sp-navy); display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; margin-top:.15rem; }

.sp-soll-kaart{ background:#fff; padding:2.25rem 2.25rem 2rem; }
.sp-soll-form label{ display:block; font-size:.8125rem; font-weight:600; color:var(--sp-navy); margin-bottom:1rem; }
.sp-soll-form input, .sp-soll-form textarea{ display:block; width:100%; margin-top:.4rem;
  padding:.75rem .85rem; font:inherit; font-size:.9375rem; font-weight:400; color:var(--sp-navy);
  background:#fff; border:1px solid #c9cdd4; border-radius:0; }
.sp-soll-form textarea{ min-height:104px; resize:vertical; }
.sp-soll-form input:focus, .sp-soll-form textarea:focus{ outline:2px solid var(--sp-navy);
  outline-offset:1px; border-color:var(--sp-navy); }
.sp-soll-form [aria-invalid="true"]{ border-color:#b3261e; }
.sp-soll-rij{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.sp-soll-opt{ color:#8a8f99; font-weight:400; font-size:.75rem; }
.sp-soll-req{ color:#b3261e; font-weight:400; }
.sp-soll-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; }
.sp-soll-fout{ font-size:.875rem; color:#b3261e; margin:0 0 .9rem; }
.sp-soll-form button{ width:100%; }
.sp-soll-klein{ font-size:.8125rem; line-height:1.55; color:#6b7280; margin:1rem 0 0; }
.sp-soll-klaar h3{ font-size:1.3rem; color:var(--sp-navy); margin:.25rem 0 .75rem; outline:none; }
.sp-soll-klaar p{ font-size:.9688rem; line-height:1.7; color:#4a5361; margin:0; }

/* ---- Mobiel: de solliciteerknop zweeft mee ---------------------------- */
/* Onder 900px staat het zijblok onderaan de pagina. Deze knop (door sp-vacp.js
   aangemaakt) houdt de sollicitatie binnen handbereik en verdwijnt zodra de hero
   of het formulier zelf in beeld is. */
.sp-vacp-zweef{ display:none; }
@media (max-width:899px){
  .sp-vacp-zweef{ display:inline-flex; position:fixed; z-index:90;
    left:50%; bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    width:min(420px, calc(100vw - 2rem));
    box-shadow:0 10px 28px rgba(11,25,44,.26);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate(-50%, calc(100% + 2rem));
    transition:transform .28s ease, opacity .28s ease, visibility 0s linear .28s; }
  .sp-vacp-zweef.is-aan{ opacity:1; visibility:visible; pointer-events:auto;
    transform:translate(-50%, 0); transition-delay:0s; }
}
@media (prefers-reduced-motion:reduce){
  .sp-vacp-zweef{ transition:none; }
}

/* ---- Andere vacatures ------------------------------------------------- */
.sp-vacp-meer{ background:#fff; padding:var(--sp-rij) var(--sp-goot); }
.sp-vacp-meer-kop{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.75rem 2rem; margin-bottom:2.25rem; }
.sp-vacp-meer-h2{ font-size:clamp(22px,2.2vw,30px); line-height:1.2; font-weight:600; color:var(--sp-navy); margin:0; }
.sp-vacp-meer-alle{ font-size:.9063rem; font-weight:600; color:var(--sp-navy); text-decoration:underline; }
.sp-vacp-raster{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.75rem; }

/* ---- Kleiner scherm --------------------------------------------------- */
@media (max-width:1199px){
  .sp-vacp-grid{ grid-template-columns:minmax(0,1fr) 280px; gap:3rem; }
  .sp-vacp-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:899px){
  .sp-voordelen-lijst{ grid-template-columns:minmax(0,1fr); }
  .sp-vacp-hero-in{ padding:6rem var(--sp-goot) 2.5rem; }
  .sp-vacp-grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .sp-vacp-zij{ position:static; max-height:none; }
  .sp-vacp-zij > .sp-vacp-wissel{ overflow:visible; }
  .sp-vacp-tekst{ max-width:none; padding-bottom:0; }
  .sp-vacp-blad{ padding-bottom:var(--sp-rij); }
  .sp-soll-in{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .sp-soll-kaart{ padding:1.75rem 1.5rem; }
}
@media (max-width:599px){
  .sp-voordelen-lijst{ grid-template-columns:minmax(0,1fr); }
  .sp-vacp-raster{ grid-template-columns:minmax(0,1fr); }
  .sp-soll-rij{ grid-template-columns:1fr; }
  .sp-vacp-cta .sp-btn{ width:100%; }
}

/* Hero groter, op home en op /vacatures/. */
#lib-block-13019-17221671.sp-hero{ min-height:clamp(720px, 60vw, 940px) !important; padding:7rem 0 5rem !important; }
@media (max-width:991px){
  #lib-block-13019-17221671.sp-hero{ min-height:auto !important; padding:18rem 0 3.5rem !important; }
}

/* Vacaturehero gelijk aan de hero op de home: zelfde hoogte, uitsnede en leesverloop.
   De functietitel blijft staan; die hoort op deze pagina boven de vouw. */
.sp-vacp-hero{ min-height:clamp(720px, 60vw, 940px); display:flex; align-items:center; }
.sp-vacp-hero-bg img{ object-position:68% 0% !important; }
.sp-vacp-hero-scrim{
  background:linear-gradient(96deg, rgba(8,20,38,.93) 0%, rgba(8,20,38,.86) 28%, rgba(8,20,38,.60) 46%, rgba(8,20,38,.18) 60%, rgba(8,20,38,0) 72%) !important; }
.sp-vacp-hero-in{ width:100%; }
@media (max-width:991px){
  .sp-vacp-hero{ min-height:auto; }
  .sp-vacp-hero-in{ padding:18rem var(--sp-goot) 3rem; }
}

/* Hero op schermHOOGTE in plaats van breedte. Met 60vw werd hij op een 14"
   (1512 breed, ~800 hoog) 907px: hoger dan het scherm zelf. */
/* De balk van 85px hoort erbij: anders valt de onderkant op een kort scherm net buiten beeld. */
#lib-block-13019-17221671.sp-hero{ min-height:clamp(520px, calc(88vh - 85px), 790px) !important; padding:5.5rem 0 4rem !important; }
.sp-vacp-hero{ min-height:clamp(520px, calc(88vh - 85px), 790px); }
@media (max-width:991px){
  #lib-block-13019-17221671.sp-hero{ min-height:auto !important; padding:17rem 0 3rem !important; }
  .sp-vacp-hero{ min-height:auto; }
}
/* Kort scherm: de inhoud zelf bepaalt de hoogte, dus daar minder lucht. */
@media (min-width:992px) and (max-height:760px){
  #lib-block-13019-17221671.sp-hero{ padding:3.5rem 0 2.5rem !important; }
  .sp-vacp-hero-in{ padding-top:2.5rem; padding-bottom:2.5rem; }
  #lib-block-13019-17221671 .sp-trust{ margin-top:2rem; padding-top:1.25rem; }
}
/* Alleen het salaris blijft een blokje; de rest is gewoon tekst. */
.sp-vacp-feiten{ flex-direction:column; align-items:flex-start; gap:1rem; }
.sp-vacp-feiten li:not(:first-child){ border:0 !important; padding:0 !important;
  font-weight:400; font-size:.9688rem; line-height:1.6; color:rgba(255,255,255,.84); max-width:52ch; }

/* ---------- Zijpaneel wisselt halverwege naar een quote ---------- */
/* Let op: hier stond `.sp-vacp-zij{ position:relative }`. Dat overschreef de
   sticky hierboven, waardoor het blok niet meer meescrolde. De quote ligt via
   grid-area over het paneel, niet absoluut, dus relative is hier niet nodig. */
.sp-vacp-paneel{ transition:opacity .35s ease, transform .35s ease; }
.sp-vacp-paneel.is-uit{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.sp-vacp-quote{ margin:0; background:var(--sp-navy); border-top:3px solid var(--sp-geel);
  padding:1.5rem 1.4rem 1.4rem; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease; }
.sp-vacp-quote.is-aan{ opacity:1; transform:none; pointer-events:auto; }
/* Beide panelen in dezelfde cel: de hoogste bepaalt de ruimte, de knop eronder schuift niet. */
.sp-vacp-wissel{ display:grid; }
.sp-vacp-wissel > *{ grid-area:1 / 1; }
.sp-vacp-quote blockquote{ margin:0; font-size:.9375rem; line-height:1.62; color:#fff; }
.sp-vacp-quote figcaption{ display:flex; align-items:center; gap:.8rem; margin-top:1.1rem;
  font-size:.8125rem; line-height:1.4; color:rgba(255,255,255,.72); }
.sp-vacp-quote figcaption strong{ color:#fff; }
.sp-vacp-quote .sp-avatar{ flex:0 0 40px; width:40px; height:40px; }
.sp-vacp-quote-link{ display:inline-block; margin-top:1.1rem; font-size:.8125rem; font-weight:600;
  color:var(--sp-geel); text-decoration:none; }
.sp-vacp-quote-link:hover{ text-decoration:underline; }
@media (max-width:991px){
  .sp-vacp-wissel{ display:block; }
  .sp-vacp-paneel.is-uit, .sp-vacp-quote{ opacity:1; transform:none; pointer-events:auto; }
  .sp-vacp-quote{ margin-top:1rem; }
}

/* ---------- Contactpersoon onder het zijpaneel ---------- */
.sp-vacp-contact{ display:flex; gap:.9rem; align-items:flex-start;
  background:#F7F8F9; border-top:3px solid var(--sp-navy); padding:1.2rem 1.2rem 1.25rem; }
.sp-vacp-contact img{ flex:0 0 56px; width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; }
.sp-vacp-contact-tekst{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sp-vacp-contact-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8a8f99; margin-bottom:.25rem; }
.sp-vacp-contact-tekst strong{ font-size:.9375rem; color:var(--sp-navy); line-height:1.3; }
.sp-vacp-contact-rol{ font-size:.8125rem; color:#5b6472; margin-bottom:.5rem; }
.sp-vacp-contact-link{ font-size:.8438rem; font-weight:600; color:var(--sp-navy); text-decoration:none; line-height:1.7; }
.sp-vacp-contact-link:hover{ text-decoration:underline; }

/* Home: raster afgekapt op twee rijen, met de doorstap eronder. */
.sp-vac-meer{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; margin-top:2.5rem; }
.sp-vac-meer .sp-vac-voet{ margin:0; font-size:.9063rem; line-height:1.6; color:#5b6472; max-width:52ch; }
/* /vacatures/: geen afleiding boven het raster. */
#vacatures{ padding-top:4.5rem !important; }
/* Home: drie kolommen, zodat zes kaarten twee volle rijen zijn.
   Op /vacatures/ blijft het raster meelopen met de breedte (vier kolommen). */
@media (min-width:992px){
  #lib-block-12792-20251028 .sp-kaarten{ grid-template-columns:repeat(3, 1fr); }
}
#vacatures{ scroll-margin-top:6rem; }

/* ============================================================
   HERO VULT HET SCHERM  (28-08-2026)
   ------------------------------------------------------------
   De foto moet tot de onderrand van het scherm lopen en de gele
   band er net onder vallen. Vervangt de eerdere 79vh/88vh-maten,
   ook die in het meeschaal-blok hierboven: deze regel staat later
   in het bestand en wint dus bij gelijke specificiteit.
   85px = gemeten hoogte van de vaste menubalk (op elke breedte).
   dvh vangt de inklappende adresbalk op mobiel.
   ============================================================ */
#lib-block-13019-17221671.sp-hero,
.sp-vacp-hero{ min-height:max(540px, calc(100vh - 85px)) !important; }
@supports (height: 100dvh){
  #lib-block-13019-17221671.sp-hero,
  .sp-vacp-hero{ min-height:max(540px, calc(100dvh - 85px)) !important; }
}
@media (max-width:991px){
  #lib-block-13019-17221671.sp-hero,
  .sp-vacp-hero{ min-height:auto !important; }
}

/* ============================================================
   SCHAALT MEE ONDER 1680px + SMALLERE GOOT   (29-08-2026)
   ------------------------------------------------------------
   Waarom: de site is getekend op een breed scherm en staat vol
   vaste pixels. Op een MacBook 14" (layout-viewport 1512px)
   vreten die de ruimte op; op 90% browserzoom klopt het wel,
   want dan is de layout-viewport 1680px. Hieronder schaalt
   alles mee met factor viewport/1680, ondergrens 0,85.
   Vanaf 1680px is de schaal weer 1 en staat het ontwerp er
   precies zoals het bedoeld was. De smallere goot (punt 5)
   geldt wél op elke breedte vanaf 992px.

   ⚠️ Dit blok stond er op 28-08 al (commit 337692f) en is bij
   de hero-commit f2ccdcd per ongeluk meegewist — daardoor was
   100% op een 14" weer te groot. Niet opnieuw verwijderen.
   De hero-hoogtes zitten hier bewust NIET in: die staan in het
   hero-blok hierboven en zijn leidend.

   ⛔ Niet uitbreiden met globale CMS-klassen (.heading-3/-4/-7,
   .page .lib-block-*): die betekenen per pagina iets anders en
   blazen o.a. /professionals/ op. Alleen blok-ID's die ook
   echt in de HTML staan.
   ============================================================ */

/* 1. De conversielaag staat in rem. Eén root-maat schaalt die
      allemaal mee. Alleen vanaf 992px: daaronder gelden de
      bestaande mobiele breakpoints. 0,9524vw = 16px op 1680. */
@media (min-width:992px){
  :root{ font-size:clamp(13.6px, 0.9524vw, 16px); }
}

/* 2. Koppen zijn al vloeiend, maar hun bovengrens werd al rond
      1450px bereikt. Cap verschoven naar 1680px. */
#lib-block-13019-17221671 .sp-slide-h{ font-size:clamp(30px, 2.857vw, 48px); }
.sp-h2{ font-size:clamp(26px, 2.262vw, 38px); }
.sp-fast-h2{ font-size:clamp(27px, 2.381vw, 40px); }
.sp-clients h2{ font-size:clamp(20px, 1.607vw, 27px); }
.sp-art-quote{ font-size:clamp(26px, 2.738vw, 46px); }
.sp-art-kop{ font-size:clamp(24px, 2.381vw, 40px); }
.sp-art-meer-h2{ font-size:clamp(22px, 1.786vw, 30px); }
.sp-blog-uit-titel{ font-size:clamp(21px, 1.726vw, 29px); }
.sp-vacp-h1{ font-size:clamp(28px, 2.738vw, 46px); }
.sp-voordelen-h2{ font-size:clamp(22px, 1.845vw, 31px); }
.sp-soll-h2{ font-size:clamp(24px, 2.143vw, 36px); }
.sp-vacp-meer-h2{ font-size:clamp(22px, 1.786vw, 30px); }

/* 3. De CMS-blokken die op de home en /vacatures/ zijn blijven
      staan hebben koppen in vaste px. Per blok-ID. */
@media (min-width:1024px){
  #block-37-17221664 .heading-4{ font-size:clamp(18px, 1.25vw, 21px); }
  #lib-block-12707-17221676 .heading-2{ font-size:clamp(27px, 1.905vw, 32px); }
  #lib-block-12792-20251028 .heading-2{ font-size:clamp(24px, 1.667vw, 28px); }
  #lib-block-13539-17221665 .heading-2{ font-size:clamp(21px, 1.429vw, 24px); }
  #lib-block-12792-17221741 .heading-2{ font-size:clamp(26px, 1.786vw, 30px); }
}

/* 4. Hero-container over de volle breedte, niet de 1200px-container
      van het CMS. De home had dit via page-1764311.css, /vacatures/
      niet — daar stond de herotekst 155px naar binnen t.o.v. het
      logo. (Stond in 337692f, ook meegewist op 28-08.) */
#lib-block-13019-17221671 .container-1{ width:100% !important; }

/* 5. Smallere goot: 21px krapper dan de oude calc(65px + 1,95vw),
      op 1512px dus 74px in plaats van 94px.
      De goot is afgeleid van het logo in de CMS-header. Dat logo
      staat op rijpadding (2vw) + kolompadding (15px) + een vaste
      `transform: translateX(50px)` die het CMS erop zet — samen de
      65px hieronder. Door de headerpadding aan --sp-goot te hangen
      schuift het logo mee en blijven logo, koppen en teksten op
      één lijn, op elke breedte. Rechts dezelfde correctie, zodat
      de menubalk symmetrisch blijft. */
@media (min-width:992px){
  :root{ --sp-goot: calc(44px + 2vw); }
  header .menu-container{
    padding-left:calc(var(--sp-goot) - 65px) !important;
    padding-right:calc(var(--sp-goot) - 65px) !important; }
}

/* ============================================================
   FAST TRACK: DE DRIE MAANDREGELS REAGEREN OP DE MUIS
   ------------------------------------------------------------
   De regels zijn geen links, dus de beweging blijft klein: een
   wash die opkomt, een gele streep aan de linkerkant, de tekst
   die een halve regelhoogte naar rechts schuift en oplicht. De
   andere twee regels zakken iets weg, zodat de aandacht naar de
   regel onder de muis gaat.

   Waarom niet de <li> zelf verschuiven: de scheidingslijnen
   zitten op `border-top` van de li. Die zouden dan meebewegen
   en het paneel zou gaan wiebelen. Alleen de twee spans schuiven.

   De wash steekt door de padding van het paneel heen (--sp-fast-bleed,
   gelijk aan die padding), zodat hij van rand tot rand loopt en niet
   als een zwevend blokje middenin hangt.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  /* Gelijk aan de zijpadding van het paneel; smaller onder 992px. */
  .sp-fast-stappen{ --sp-fast-bleed:2.5rem; }
  @media (max-width:991px){ .sp-fast-stappen{ --sp-fast-bleed:1.5rem; } }

  .sp-fast-stappen li{ position:relative; z-index:0; }

  /* De wash. ::before staat vóór de spans in de DOM, dus de tekst
     blijft er bovenop zolang die spans zelf ook positioned zijn. */
  .sp-fast-stappen li::before{
    content:""; position:absolute; inset:0 calc(var(--sp-fast-bleed) * -1); pointer-events:none;
    background:rgba(255,255,255,.05);
    opacity:0; transition:opacity .28s cubic-bezier(.22,.61,.36,1); }

  /* Gele streep die vanuit het midden uitgroeit. */
  .sp-fast-stappen li::after{
    content:""; position:absolute; top:0; bottom:0; width:2px;
    left:calc(var(--sp-fast-bleed) * -1);
    pointer-events:none; background:var(--sp-geel);
    transform:scaleY(0); transform-origin:center;
    transition:transform .32s cubic-bezier(.22,.61,.36,1); }

  .sp-fast-stappen li > span{
    position:relative;
    transition:transform .32s cubic-bezier(.22,.61,.36,1),
               color .28s ease, opacity .28s ease; }

  .sp-fast-stappen li:hover::before{ opacity:1; }
  .sp-fast-stappen li:hover::after{ transform:scaleY(1); }
  .sp-fast-stappen li:hover > span{ transform:translateX(.5rem); }
  .sp-fast-stappen li:hover .sp-fast-wat{ color:#fff; }

  /* De regels waar de muis niet op staat, zakken weg. */
  .sp-fast-stappen:hover li:not(:hover) > span{ opacity:.58; }
}

@media (prefers-reduced-motion:reduce){
  .sp-fast-stappen li::before,
  .sp-fast-stappen li::after,
  .sp-fast-stappen li > span{ transition-duration:.01ms; }
  .sp-fast-stappen li:hover > span{ transform:none; }
}

/* ============================================================
   HEROKOP OP /VACATURES/ IS EEN CITAAT
   ------------------------------------------------------------
   De kop staat tussen enkele aanhalingstekens. Zonder correctie
   duwt dat openingsteken de eerste letter naar rechts, waardoor
   de kop niet meer uitlijnt met de eyebrow, de subkop en de
   knoppen eronder. `text-indent` geldt alleen voor de eerste
   regel, dus het teken hangt links buiten de kolom en de tekst
   zelf begint gewoon op de goot. 0,24em i.p.v. de volle 0,278em
   breedte van het teken: optisch uitlijnen, niet mechanisch.
   ============================================================ */
#lib-block-13019-17221671 .sp-slide-quote{ text-indent:-.24em; }

/* ============================================================
   HEROTEKST STAAT MIDDEN IN DE HERO
   ------------------------------------------------------------
   Sinds de hero het scherm vult, hing het tekstblok bovenin en
   viel alle overgebleven ruimte in één gat tussen de knoppen en
   de logobalk. De balk 'Vertrouwd door' hoort onderaan, dus die
   ruimte moet aan twee kanten van het tekstblok komen te staan:
   auto-marge boven de eyebrow en onder de knoppenrij, dan deelt
   flexbox het gat gelijk. De logobalk komt vanzelf onderaan uit.

   De rij moest wel eerst kunnen groeien. Op /vacatures/ stond
   `flex-grow:1` op .row-1, op de home niet — daar was de rij
   maar 466px van de 678px hoog, dus was er niets te verdelen en
   plakte de streep van de logobalk tegen de knoppen aan.

   De marge van de logobalk gaat naar 0: die 3rem zou anders bij
   het onderste gat worden opgeteld en het blok scheef zetten.
   Bij de kortste hero (540px, de ondergrens) blijft er nog 24px
   over aan beide kanten. Wordt de herotekst ooit veel langer,
   dan lopen die auto-marges naar 0 en raakt de streep de
   knoppen — dan is de tekst te lang, niet deze regel.
   ============================================================ */
@media (min-width:992px){
  #lib-block-13019-17221671.sp-hero .row-1{ flex:1 1 auto; }
  #lib-block-13019-17221671 .sp-eyebrow{ margin-top:auto !important; }
  #lib-block-13019-17221671 .sp-cta-row{ margin-bottom:auto; }
  #lib-block-13019-17221671 .sp-trust{ margin-top:0 !important; }
}

/* =========================================================================
   Insights-carrousel (homepage): foto's op de kaarten
   De kaarten toonden alleen datum/kop/tekst, terwijl elk artikel wél met
   een fotohero opent. Elke kaart krijgt nu de hero-foto van zijn artikel,
   full-bleed boven de tekst — zelfde beeldtaal als de blogkaarten op
   /insights/ (16:10, cover, lichte zoom op hover).
   ========================================================================= */
#lib-block-12707-17221676 .card-3{ padding:1.6rem !important; }
#lib-block-12707-17221676 .sp-ins-beeld{
  display:block; margin:-1.6rem -1.6rem 1.3rem;
  aspect-ratio:16/10; overflow:hidden; background:var(--sp-navy); }
#lib-block-12707-17221676 .sp-ins-beeld img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease; }
#lib-block-12707-17221676 .card-3:hover .sp-ins-beeld img{ transform:scale(1.04); }

/* ---- Insights-carrousel: compacter ---------------------------------------
   De kaarten waren zo hoog als hun hele intro (12+ regels) en er pasten er
   maar 2,4 in beeld. Nu: drie kaarten in beeld op desktop, kop maximaal 3
   regels, intro maximaal 4 — zelfde knip als de blogkaarten op /insights/. */
@media (min-width:992px){
  #lib-block-12707-17221676 .swiper-slide{ width:calc(400% / 12) !important; }
}
#lib-block-12707-17221676 .sp-ins-beeld{ aspect-ratio:16/9; }
#lib-block-12707-17221676 .card-3 .heading-4 a{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
#lib-block-12707-17221676 .card-3 .heading-4 ~ .text-4{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
#lib-block-12707-17221676 .card-3 .heading-4 ~ .text-4 p{ margin:0; }