/* =========================================================
   MBG - Multiselect Beheer Groep
   Stylesheet
   Huisstijl Multiselect: blauw #1179d6, accent oranje #ef5f22.
   Alle kleuren staan als token in :root hieronder; gebruik die,
   geen losse hexwaarden.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --blue:#1179d6;
  --blue-600:#0e68ba;
  --blue-700:#0b5596;
  --blue-050:#eef5fd;
  --blue-100:#d3e6fa;

  /* Oranje accent voor de belangrijkste actie, zoals op de nieuwe
     Multiselect-sites. Terug naar blauw? Zet --accent op var(--blue). */
  --accent:#ef5f22;
  --accent-600:#d94f16;

  --ink:#0c1c2c;
  --ink-2:#12293e;
  --ink-3:#1c3a56;

  /* Achtergrond van de donkere vlakken: diep merkblauw in plaats van
     bijna-zwart. Dit is de knop waarmee de site lichter of donkerder
     wordt zonder dat er iets aan de vormgeving verandert. */
  --vlak-diep:#0a4a86;
  --vlak-diep-2:#0d5ea6;
  --grey-900:#3d3d3d;
  --grey-700:#4a5a6b;
  --grey-600:#617182;
  --text:#22303d;
  --muted:#5d6d7e;
  --line:#dce7f4;
  --line-2:#eaf1fa;

  --bg:#ffffff;
  --bg-soft:#eff5fd;
  --bg-soft-2:#e3edfa;

  --radius-s:8px;
  --radius:14px;
  --radius-l:22px;
  --radius-xl:32px;

  --shadow-s:0 2px 8px rgba(12,28,44,.06);
  --shadow:0 10px 30px rgba(12,28,44,.09);
  --shadow-l:0 24px 60px rgba(12,28,44,.16);

  --container:1240px;
  --gutter:24px;
  --header-h:84px;

  --font-head:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:-.022em;
  line-height:1.1;
}
h1{font-size:clamp(2.4rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.14}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.28;letter-spacing:-.012em}
h4{font-size:1.02rem;letter-spacing:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--blue);color:#fff}

/* ---------- 3. Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:880px}
.section{padding:clamp(64px,8vw,116px) 0}
.section--tight{padding:clamp(48px,5vw,72px) 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--vlak-diep);color:#cfe2f5}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.grid{display:grid;gap:28px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mw-60{max-width:60ch}
.mw-70{max-width:70ch}
.mx-auto{margin-inline:auto}

/* ---------- 4. Typographic bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);border-radius:2px}
.section--dark .eyebrow{color:#8dc8f5}
.section--dark .eyebrow::before{background:#8dc8f5}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.62;color:var(--grey-700)}
.section--dark .lead{color:#c3daf1}
.section-head{max-width:760px;margin-bottom:clamp(36px,4vw,56px)}
.section-head.center{margin-inline:auto}
/* Tussenkop binnen een sectie die al een eigen kop heeft */
.section-head--klein{margin-top:clamp(44px,5vw,64px);margin-bottom:20px}
.section-head--klein h2{font-size:clamp(1.25rem,2vw,1.6rem)}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-head);font-weight:600;font-size:.97rem;letter-spacing:-.005em;
  padding:15px 26px;border-radius:100px;
  border:1.5px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(239,95,34,.30)}
.btn--primary:hover{background:var(--accent-600);box-shadow:0 12px 28px rgba(239,95,34,.36)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn--outline:hover{border-color:var(--blue);color:var(--blue)}
.btn--white{background:#fff;color:var(--vlak-diep)}
.btn--white:hover{background:var(--blue);color:#fff}
.btn--sm{padding:11px 20px;font-size:.9rem}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--blue);
}
.link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed;inset:16px 0 auto;z-index:900;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.site-header.is-hidden{transform:translateY(-140%)}
.header-inner{
  display:flex;align-items:center;gap:22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border:1px solid rgba(226,233,240,.9);
  border-radius:100px;
  padding:10px 12px 10px 24px;
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;flex:none;margin-right:6px}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  font-family:var(--font-head);font-weight:600;font-size:.93rem;
  padding:10px 14px;border-radius:100px;color:var(--ink);
  transition:background .2s,color .2s;white-space:nowrap;
}
.nav a:hover{background:var(--blue-050);color:var(--blue)}
.nav a.is-active{color:var(--blue)}
.nav a.is-active::after{
  content:"";display:block;height:2px;width:18px;background:var(--blue);
  border-radius:2px;margin:3px auto -4px;
}
.header-cta{flex:none;margin-left:6px}
.nav-toggle{
  display:none;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;align-items:center;justify-content:center;flex:none;margin-left:auto;
}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:890;background:var(--vlak-diep);
  padding:120px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
  overflow-y:auto;
}
body.nav-open .mobile-nav{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:#fff;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav a:hover,.mobile-nav a.is-active{color:#5fb6e8}
.mobile-nav .btn{margin-top:26px;align-self:flex-start}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:min(92vh,880px);
  display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 60px) 0 clamp(48px,6vw,80px);
  color:#fff;overflow:hidden;background:var(--vlak-diep);
}
/* Volledige hero (home, aansluiten): extra onderruimte, zodat de
   knoppen niet tegen de cijferbalk aan komen te staan die eroverheen valt. */
.hero:not(.hero--compact){padding-bottom:clamp(76px,8vw,128px)}
.hero--compact{min-height:min(66vh,600px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 14s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* Zelfde kleuren als het blauwe vlak op de homepage (#0b5ea8 naar #1273cc),
   hier doorschijnend over de foto. Het donkere eind ligt linksonder, waar
   de tekst staat: daar haalt wit ook op een lichte foto 4.5:1. Op mobiel
   staat de tekst hoger, dus daar loopt het verloop steiler. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(40deg,
    rgba(11,94,168,.90) 0%,rgba(11,94,168,.86) 40%,
    rgba(18,115,204,.60) 74%,rgba(18,115,204,.38) 100%);
}
@media (max-width:700px){
  .hero__media::after{
    background:linear-gradient(15deg,
      rgba(11,94,168,.92) 0%,rgba(11,94,168,.86) 48%,
      rgba(18,115,204,.58) 80%,rgba(18,115,204,.40) 100%);
  }
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero__sub{max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.22rem);color:rgba(255,255,255,.9);margin-bottom:32px}
.hero__eyebrow{color:#7cc6ee}
.hero__eyebrow::before{background:#7cc6ee}
.hero--compact h1{max-width:20ch;font-size:clamp(2.1rem,4.4vw,3.5rem)}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:clamp(48px,6vw,80px);z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:.85rem;font-weight:600;color:rgba(255,255,255,.85);
}
.hero__scroll span{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}


/* ---------- 8. Stat band ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
}
.stats--float{margin-top:-72px;position:relative;z-index:5;box-shadow:var(--shadow-l)}
/* Cijfers binnen een tekstkolom: twee bij twee en kleiner, zodat ze naast
   een beeld passen in plaats van over de volle breedte te lopen. */
.stats--compact{grid-template-columns:repeat(2,1fr);margin-top:clamp(26px,3vw,36px)}
.stats--compact .stat{padding:18px 20px;text-align:left}
.stats--compact .stat__num{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.stats--compact .stat__label{font-size:.82rem;margin-top:5px}
.stat{background:#fff;padding:34px 28px;text-align:center}
.stat__num{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.2vw,2.9rem);color:var(--blue);line-height:1;letter-spacing:-.03em}
.stat__label{font-size:.92rem;color:var(--muted);margin-top:10px;line-height:1.4}

/* ---------- 9. Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:32px 30px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.card__icon{
  width:52px;height:52px;border-radius:15px;background:var(--blue-050);color:var(--blue);
  display:grid;place-items:center;margin-bottom:22px;flex:none;
}
.card__icon svg{width:25px;height:25px}
.card p{color:var(--muted);font-size:.98rem}
.card .link-arrow{margin-top:auto;padding-top:20px}

.mcard{
  position:relative;display:block;border-radius:var(--radius-l);overflow:hidden;
  background:var(--ink);isolation:isolate;
}
.mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,28,44,0) 30%,rgba(12,28,44,.88) 100%);z-index:1}
.mcard:hover img{transform:scale(1.06)}
.mcard__body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;min-height:320px;color:#fff}
.mcard__body h3{color:#fff;margin-bottom:6px}
.mcard__body p{color:rgba(255,255,255,.82);font-size:.94rem;margin:0}
.mcard__tag{
  position:absolute;top:20px;left:20px;z-index:2;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;
}
.mcard--tall .mcard__body{min-height:430px}

/* ---------- 10. Split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.split--reverse .split__media{order:2}
/* Beeld even hoog als de tekstkolom ernaast, in plaats van gecentreerd
   met lege ruimte boven en onder. */
.split--strek .split__media{align-self:stretch;aspect-ratio:auto;min-height:340px}
.split__media{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3.2;background:var(--bg-soft-2)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__badge{
  position:absolute;left:24px;bottom:24px;
  background:#fff;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);
  max-width:250px;
}
.split__badge strong{display:block;font-family:var(--font-head);font-size:1.7rem;color:var(--blue);line-height:1}
.split__badge span{font-size:.86rem;color:var(--muted)}
/* Variant met keurmerken in plaats van een getal */
.split__badge--keurmerken{max-width:300px;padding:16px 18px}
.split__badge__kop{
  display:block;font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.keurmerktags{display:flex;flex-wrap:wrap;gap:7px}
.keurmerktag{
  font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--blue-700);
  background:var(--blue-050);border:1px solid var(--blue-100);border-radius:999px;
  padding:6px 13px;line-height:1.2;
}

/* ---------- 11. Feature list ---------- */
.feature-list{display:grid;gap:22px}
.feature{display:flex;gap:18px}
.feature__mark{
  flex:none;width:38px;height:38px;border-radius:11px;background:var(--blue-050);color:var(--blue);
  display:grid;place-items:center;
}
.feature__mark svg{width:19px;height:19px}
.section--dark .feature__mark{background:rgba(141,200,245,.18);color:#a8d8fa}
.feature h4{margin-bottom:5px;font-size:1.06rem}
.feature p{font-size:.96rem;color:var(--muted);margin:0}
.section--dark .feature p{color:#bad4ee}

.checks{display:grid;gap:13px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:1rem}
.checks svg{flex:none;width:21px;height:21px;color:var(--blue);margin-top:3px}
.section--dark .checks svg{color:#8dc8f5}
/* Vinkjeslijst met een kop en korte tekst per punt (home, voordelen) */
.checks--kop{margin-top:24px;gap:18px}
.checks--kop strong{display:block;font-family:var(--font-head);font-weight:700;color:var(--ink);margin-bottom:3px}
.checks--kop span{display:block;font-size:.96rem;color:var(--muted);line-height:1.6}
/* Voordelen naast elkaar (home): drie kolommen, op smallere schermen onder elkaar */
.checks--rij{grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:0}
@media (max-width:900px){
  .checks--rij{grid-template-columns:1fr;gap:18px}
}

/* ---------- 12. Disciplines ---------- */
.pill-grid{display:flex;flex-wrap:wrap;gap:11px}
.pill{
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;
  font-size:.93rem;font-weight:500;color:var(--grey-700);background:#fff;
  transition:.25s var(--ease);
}
.section--dark .pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#d9e8f8}

/* ---------- 13. Sector cards ---------- */
.sector{
  position:relative;border-radius:var(--radius-l);overflow:hidden;min-height:280px;
  display:flex;align-items:flex-end;color:#fff;isolation:isolate;
}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.sector::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,55,92,.08) 15%,rgba(0,42,71,.92) 100%)}
.sector:hover img{transform:scale(1.07)}
.sector__body{padding:26px 26px 24px;width:100%}
.sector__body h3{color:#fff;margin-bottom:0}
.sector__body p{font-size:.92rem;color:rgba(255,255,255,.85);margin:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)}
.sector:hover .sector__body p,.sector:focus-within .sector__body p{max-height:160px;opacity:1;margin-top:8px}

/* ---------- 14. Bedrijven ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:30px}
.filter{
  border:1px solid var(--line);background:#fff;border-radius:100px;padding:9px 17px;
  font-size:.9rem;font-weight:600;font-family:var(--font-head);color:var(--grey-700);transition:.22s var(--ease);
}
.filter:hover{border-color:var(--blue);color:var(--blue)}
.filter.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.view-toggle{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:4px;gap:2px;margin-left:auto}
.view-toggle button,.view-toggle a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--grey-700);transition:.22s var(--ease);
}
.view-toggle button svg,.view-toggle a svg{width:16px;height:16px;flex-shrink:0}
.view-toggle button.is-active,.view-toggle a.is-active{background:#fff;color:var(--blue);box-shadow:var(--shadow-s)}
/* In een donkere hero: glazen pil, witte tekst, actief item wit met blauw.
   Wisselt tussen vakgebieden.html (tegels) en vakgebieden-variant.html (lijst). */
.view-toggle.view-toggle--hero{
  margin:26px 0 0;width:auto;background:rgba(8,28,52,.34);border-color:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.view-toggle--hero a{color:rgba(255,255,255,.92)}
.view-toggle--hero a:hover{color:#fff;background:rgba(255,255,255,.14)}
.view-toggle--hero a.is-active,.view-toggle--hero a.is-active:hover{background:#fff;color:var(--blue-700)}

.bedrijf{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
  scroll-margin-top:140px;
}
.bedrijf:hover,.bedrijf.is-highlight{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.bedrijf.is-highlight{outline:2px solid var(--blue);outline-offset:2px}
.bedrijf__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft-2)}
.bedrijf__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bedrijf:hover .bedrijf__media img{transform:scale(1.06)}
.bedrijf__since{
  position:absolute;top:14px;left:14px;background:rgba(12,28,44,.72);backdrop-filter:blur(6px);
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.05em;padding:5px 11px;border-radius:100px;
}
.bedrijf__body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.bedrijf__body h3{margin-bottom:8px}
.bedrijf__body p{font-size:.95rem;color:var(--muted);margin-bottom:18px}
.bedrijf__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tag{
  font-size:.73rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--blue-050);color:var(--blue-700);padding:5px 11px;border-radius:100px;
}
.tag--loc{background:var(--bg-soft);color:var(--grey-700);text-transform:none;letter-spacing:0;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;font-size:.8rem}
.tag--loc svg{width:13px;height:13px}
.bedrijf__note{font-size:.8rem;color:var(--grey-600)}

/* map */
.map-wrap{
  display:grid;grid-template-columns:1fr 380px;
  border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff;box-shadow:var(--shadow-s);
}
#map{height:620px;width:100%;background:var(--bg-soft-2);z-index:1}
.map-side{border-left:1px solid var(--line);display:flex;flex-direction:column;max-height:620px}
.map-side__head{padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.map-side__head h3{font-size:1.08rem;margin-bottom:4px}
.map-side__head p{font-size:.86rem;color:var(--muted);margin:0}
.map-side__list{overflow-y:auto;padding:10px}
.loc{
  width:100%;text-align:left;padding:14px 16px;border-radius:var(--radius);
  display:flex;gap:14px;align-items:flex-start;transition:background .2s var(--ease);
}
.loc:hover,.loc.is-active{background:var(--blue-050)}
.loc__dot{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.82rem}
.loc__city{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);display:block}
.loc__names{font-size:.84rem;color:var(--muted);line-height:1.45}
.map-hint{font-size:.88rem;color:var(--muted);margin-top:16px;display:flex;gap:9px;align-items:flex-start}
.map-hint svg{width:17px;height:17px;color:var(--blue);flex:none;margin-top:3px}
.leaflet-container{font-family:var(--font-body)!important}
/* rustiger, merkeigen kaartbeeld */
.leaflet-tile-pane{filter:grayscale(.55) saturate(.75) contrast(1.02) brightness(1.03)}
.leaflet-popup-content-wrapper{border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;padding:0!important}
.leaflet-popup-content{margin:0!important;width:260px!important;line-height:1.5!important}
.leaflet-popup-tip{box-shadow:none!important}
.pop{padding:16px 18px}
.pop h4{font-family:var(--font-head);font-size:1.02rem;margin:0 0 3px;color:var(--ink)}
.pop .pop__city{font-size:.78rem;color:var(--blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:10px}
.pop ul{display:grid;gap:6px;margin:0 0 12px}
.pop li{font-size:.88rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.pop li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;margin-top:8px}
.marker-pin{
  width:34px;height:34px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:var(--blue);border:3px solid #fff;box-shadow:0 4px 12px rgba(12,28,44,.3);
  display:grid;place-items:center;transition:transform .25s var(--ease),background .25s var(--ease);
}
.marker-pin span{transform:rotate(45deg);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.84rem;line-height:1}
.leaflet-marker-icon.is-active .marker-pin{background:var(--ink);transform:rotate(-45deg) scale(1.16)}

/* ---------- 15. Steps ---------- */
.steps{display:grid}
.step{display:grid;grid-template-columns:74px 1fr;gap:26px;padding:28px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step__n{
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--blue);
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--blue-100);background:var(--blue-050);
  display:grid;place-items:center;
}
.step h3{margin-bottom:7px}
.step p{color:var(--muted);margin:0;max-width:70ch}
.section--dark .step{border-color:rgba(255,255,255,.12)}
.section--dark .step__n{background:rgba(95,182,232,.14);border-color:rgba(95,182,232,.3);color:#7cc6ee}
.section--dark .step p{color:#a9bcce}

/* ---------- 16. Quote ---------- */
.quote{
  background:var(--blue);color:#fff;border-radius:var(--radius-xl);
  padding:clamp(38px,5vw,64px);position:relative;overflow:hidden;
}
.quote::before{
  content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.quote p{position:relative;font-family:var(--font-head);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.32;letter-spacing:-.018em;max-width:26ch}
.quote cite{position:relative;display:block;margin-top:22px;font-style:normal;font-size:.95rem;opacity:.85}

/* ---------- 17. CTA band ---------- */
/* Zelfde verloop als de paginaheaders en het blauwe vlak op de homepage
   (#0b5ea8 naar #1273cc), doorschijnend over de foto. Donker eind links
   bij de tekst, rechts komt de foto erdoor. */
.cta{position:relative;overflow:hidden;background:#0b5ea8;color:#fff;isolation:isolate}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,
    rgba(11,94,168,.92) 0%,rgba(11,94,168,.86) 50%,
    rgba(18,115,204,.55) 85%,rgba(18,115,204,.38) 100%)}
/* Op een telefoon loopt de tekst over de hele breedte: daar overal het
   donkere blauw, onderaan iets lichter. */
@media (max-width:700px){
  .cta::before{background:linear-gradient(180deg,
    rgba(11,94,168,.9) 0%,rgba(11,94,168,.86) 60%,rgba(18,115,204,.78) 100%)}
}
.cta__inner{padding:clamp(60px,7vw,100px) 0;max-width:720px}
.cta h2{color:#fff}
/* Volledig wit: op het lichtere huisstijlblauw haalt 85% wit de 4.5:1 niet */
.cta p{color:#fff;font-size:1.1rem;margin-bottom:30px}
.cta .eyebrow{color:#fff}
.cta .eyebrow::before{background:#fff}

/* ---------- 18. Logoband: de twaalf bedrijven ---------- */
.logoband{
  --logo-h:48px;--logo-pad:20px;--logo-vpad:24px;--logo-marge:clamp(10px,1.2vw,20px);
  margin-top:clamp(30px,3.4vw,44px);position:relative;overflow:hidden;
}
/* Buiten de container: de band loopt van rand tot rand */
.logoband--breed{
  margin-top:clamp(44px,5vw,72px);
  padding-block:clamp(10px,1.4vw,18px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Geen gap maar margin op de cel: bij gap is de helft van het spoor
   nooit precies een hele periode en springt de band elke ronde. */
.logoband__spoor{display:flex;align-items:center;width:max-content;animation:logoLoop 54s linear infinite}
.logoband:hover .logoband__spoor,
.logoband:focus-within .logoband__spoor{animation-play-state:paused}
@keyframes logoLoop{to{transform:translateX(-50%)}}
/* De breedte staat per cel in de markup en wordt door bouw-paginas.js
   berekend uit de echte beeldverhouding, zodat alle logo's even hoog
   ogen. De zijpadding hier moet gelijk zijn aan LOGO_PADDING daar. */
/* De celbreedte volgt uit de beeldverhouding (--verhouding, door
   bouw-paginas.js uit het bestand gelezen) maal de gewenste beeldhoogte.
   Zo staan alle logo's op dezelfde hoogte, en kan één token de hele band
   kleiner maken op een telefoon. */
.logoband__cel{
  flex:0 0 auto;margin-inline:var(--logo-marge);
  display:grid;place-items:center;
  width:calc(var(--logo-h) * var(--schaal, 1) * var(--verhouding, 3) + var(--logo-pad) * 2);
  height:calc(var(--logo-h) + var(--logo-vpad) * 2);
  padding-inline:var(--logo-pad);
  border-radius:var(--radius);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.logoband__cel img{width:100%;height:100%;object-fit:contain;display:block}
.logoband__cel:hover,.logoband__cel:focus-visible{transform:translateY(-4px) scale(1.04)}
/* Gelijke hoogte is niet gelijke massa: een compact, bijna vierkant logo
   oogt fors naast een breed woordmerk. Deze drie een slag kleiner. */
.logoband__cel[data-bedrijf="vitec"],
.logoband__cel[data-bedrijf="rsc"]{--schaal:.74}
.logoband__cel[data-bedrijf="vize"]{--schaal:.84}

/* ---------- 19. Forms ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--ink)}
.field input,.field textarea,.field select{
  font:inherit;font-size:.98rem;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-050)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__note{font-size:.84rem;color:var(--grey-600)}
.form-status{padding:14px 18px;border-radius:var(--radius);background:var(--blue-050);color:var(--blue-700);font-size:.93rem;display:none}
.form-status.is-visible{display:block}

.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:30px}
.contact-card h3{font-size:1.1rem}
.contact-card dl{display:grid;gap:14px;margin:18px 0 0}
.contact-card dt{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-600);font-weight:700}
.contact-card dd{margin:3px 0 0;font-size:1rem}

/* ---------- 20. Footer ---------- */
.footer{background:#fff;color:var(--grey-700);padding:clamp(56px,6vw,88px) 0 30px;font-size:.95rem;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid var(--line)}
.footer__brand img{height:38px;margin-bottom:20px}
.footer__brand p{max-width:38ch;font-size:.95rem;color:var(--muted)}
.footer h4{color:var(--blue);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer li{margin-bottom:9px}
.footer a:hover{color:var(--blue)}
.footer__bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:26px;font-size:.86rem;color:var(--muted)}
.footer__bottom a:hover{color:var(--blue)}

/* ---------- 21. Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- 22. Utilities ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:1000;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.hidden{display:none!important}

/* ---------- 23. Responsive ---------- */
@media (max-width:1120px){
  .nav a{padding:10px 11px;font-size:.9rem}
}
@media (max-width:1040px){
  .nav{display:none}
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .map-wrap{grid-template-columns:1fr}
  .map-side{border-left:0;border-top:1px solid var(--line);max-height:340px}
  #map{height:460px}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats--float{margin-top:-40px}
  .hero__scroll{display:none}
}
@media (max-width:620px){
  :root{--gutter:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:32px}
  .step{grid-template-columns:1fr;gap:14px}
  .hero{min-height:auto;padding-top:150px}
  .view-toggle{margin-left:0;width:100%}
  .view-toggle button,.view-toggle a{flex:1;justify-content:center}
  .view-toggle.view-toggle--hero{width:auto}
  .header-inner{padding-left:18px}
  .brand img{height:28px}
  .filters{gap:7px}
  h1{font-size:clamp(1.95rem,7.8vw,2.5rem)}
  .hero--compact h1{font-size:clamp(1.85rem,7.2vw,2.3rem)}
  .quote p{max-width:none}
}
h1,h2,h3{overflow-wrap:break-word}

/* =========================================================
   24. Nieuwe onderdelen
   ========================================================= */

/* --- kaartlabel en actiekaart --- */
.card__label{
  margin-top:auto;padding-top:20px;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
}
.card--action{background:var(--blue-050);border-color:var(--blue-100)}
.card--action:hover{background:#fff}
.card--action .link-arrow{margin-top:auto;padding-top:20px}

/* --- functiegroepen (over MBG) --- */
.funcgroep{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff;
}
.funcgroep__rij{padding:24px 26px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.funcgroep__rij:nth-child(2n){border-right:0}
.funcgroep__rij:nth-last-child(-n+2){border-bottom:0}
.funcgroep__rij h4{margin-bottom:6px;font-size:1.02rem}
.funcgroep__rij p{margin:0;font-size:.93rem;color:var(--muted)}
@media (max-width:700px){
  .funcgroep{grid-template-columns:1fr}
  .funcgroep__rij{border-right:0}
  .funcgroep__rij:nth-last-child(2){border-bottom:1px solid var(--line-2)}
}

/* --- keurmerken --- */
.keurmerken{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.keurmerk{
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 16px 10px 11px;
}
.section--dark .keurmerk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.keurmerk__logo{
  width:42px;height:42px;border-radius:9px;flex:none;
  background:var(--blue-050);color:var(--blue-700);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
}
.keurmerk__naam{font-size:.9rem;font-weight:500;color:var(--grey-700)}
.section--dark .keurmerk__naam{color:#cfdcea}

/* --- sticky inhoudsopgave + één blok per rij (vakgebieden-variant.html) --- */
.sectorlayout{display:grid;grid-template-columns:210px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.sectornav{position:sticky;top:calc(var(--header-h) + 28px)}
.sectornav__kop{
  display:block;font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-600);margin-bottom:12px;
}
.sectornav ul{display:flex;flex-direction:column;gap:1px;border-left:2px solid var(--line)}
.sectornav a{
  display:block;padding:8px 14px;font-size:.94rem;font-weight:500;color:var(--muted);
  margin-left:-2px;border-left:2px solid transparent;transition:.2s var(--ease);
}
.sectornav a:hover{color:var(--blue)}
.sectornav a.is-active{color:var(--ink);font-weight:600;border-left-color:var(--blue)}

.sectorblok{
  display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:24px;scroll-margin-top:120px;
}
.sectorblok + .sectorblok{margin-top:20px}
.sectorblok__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft-2)}
.sectorblok__media img{width:100%;height:100%;object-fit:cover}
.sectorblok__body h3{margin-bottom:2px}
.sectorblok__kop{
  font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--blue);
  margin:0 0 12px;letter-spacing:-.01em;
}
.sectorblok__body p{font-size:.96rem;color:var(--muted)}
/* Zelfde inhoud als een tegel: de hele rij opent het uitschuifpaneel */
.sectorblok{position:relative;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.sectorblok:hover{border-color:var(--blue-100);box-shadow:var(--shadow-s)}
.sectorblok__media{position:relative}
.sectorblok__link{color:inherit}
.sectorblok__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.sectorblok__link:focus-visible{outline:none}
.sectorblok:has(.sectorblok__link:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.sectorblok:hover .vakkaart__pijl{background:var(--blue);color:#fff;transform:translateX(3px)}
.sectorblok__onder{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;margin-top:18px}
.sectorblok__functies{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sectorblok .pill-grid{gap:6px}
.sectorblok .pill{font-size:.8rem;padding:4px 12px}
.pill--meer{background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-700);font-weight:600}
@media (max-width:900px){
  .sectorlayout{grid-template-columns:1fr}
  .sectornav{position:static}
  .sectornav ul{flex-direction:row;flex-wrap:wrap;border-left:0;gap:7px}
  .sectornav a{border:1px solid var(--line);border-radius:100px;padding:7px 15px;margin-left:0}
  .sectornav a.is-active{border-color:var(--blue);color:var(--blue)}
  .sectorblok{grid-template-columns:1fr}
  .sectorblok__media{aspect-ratio:16/7}
}

/* --- personen --- */
.persoon{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.persoon:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.persoon__beeld{aspect-ratio:4/3;background:var(--blue-050);display:grid;place-items:center;overflow:hidden}
.persoon__beeld img{width:100%;height:100%;object-fit:cover}
.persoon__initialen{font-family:var(--font-head);font-weight:700;font-size:2.1rem;color:var(--blue)}
.persoon__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px}
.persoon__body h3{margin:0;font-size:1.12rem}
.persoon__functie{margin:0;font-size:.92rem;color:var(--muted)}
.persoon__mail{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-size:.92rem;color:var(--blue);word-break:break-all;
}
.persoon__mail svg{width:16px;height:16px;flex:none}
.tbd{color:var(--grey-600);font-style:italic;font-weight:400}
.persoon__mail.tbd{color:var(--grey-600)}

/* --- bedrijfskaart met logo --- */
.bedrijf__knop{display:flex;flex-direction:column;width:100%;text-align:left;height:100%}
.bedrijf__logo{
  position:relative;display:grid;place-items:center;
  aspect-ratio:16/9;background:#fff;border-bottom:1px solid var(--line-2);padding:26px;
}
.bedrijf__logo img{width:100%;height:100%;object-fit:contain}
.bedrijf__logo.is-placeholder{background:var(--bg-soft)}
.bedrijf__wordmark{
  font-family:var(--font-head);font-weight:700;font-size:1.16rem;color:var(--ink);
  letter-spacing:-.02em;text-align:center;line-height:1.2;
}
.bedrijf__logo.is-placeholder::after{
  content:"logo volgt";position:absolute;bottom:10px;right:12px;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-600);
}
.bedrijf__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bedrijf__naam{font-family:var(--font-head);font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:-.012em}
.bedrijf__sub{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-top:4px}
.bedrijf__kort{font-size:.94rem;color:var(--muted)}
.bedrijf__meta{display:flex;flex-wrap:wrap;gap:8px}
.bedrijf .link-arrow{margin-top:auto;padding-top:6px}
.bedrijf__note{font-size:.82rem;color:var(--grey-600)}

/* --- uitschuifpaneel --- */
.drawer{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__overlay{
  position:absolute;inset:0;background:rgba(12,28,44,.5);
  opacity:0;transition:opacity .3s var(--ease);
}
.drawer.is-open .drawer__overlay{opacity:1}
.drawer__paneel{
  position:absolute;top:0;right:0;height:100%;width:min(480px,100%);
  background:#fff;box-shadow:-20px 0 60px rgba(12,28,44,.22);
  transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.is-open .drawer__paneel{transform:none}
.drawer__sluit{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;background:var(--bg-soft);color:var(--ink);
  display:grid;place-items:center;transition:.2s var(--ease);
}
.drawer__sluit:hover{background:var(--blue);color:#fff}
.drawer__sluit svg{width:17px;height:17px}
.drawer__inhoud{overflow-y:auto;padding:30px 30px 36px;display:flex;flex-direction:column}
.drawer__logo{
  display:grid;place-items:center;height:96px;margin:8px 0 22px;
  background:var(--bg-soft);border-radius:var(--radius);padding:18px;
}
.drawer__logo img{width:100%;height:60px;object-fit:contain}
.drawer__logo .bedrijf__wordmark{font-size:1.35rem}
.drawer__inhoud h2{font-size:1.5rem;margin-bottom:4px}
.drawer__sub{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.drawer__inhoud .bedrijf__meta{margin-bottom:20px}
.drawer__tekst{font-size:.96rem;color:var(--muted);margin-bottom:24px}
.drawer__kop{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-600);
  margin:0 0 10px;font-weight:700;
}
.drawer__vest{display:grid;gap:8px;margin-bottom:26px}
.drawer__vest li{display:flex;align-items:center;gap:9px;font-size:.96rem;color:var(--text)}
.drawer__vest svg{width:16px;height:16px;color:var(--blue);flex:none}
.drawer__dekking{display:flex;align-items:center;gap:9px;font-size:.96rem;color:var(--text);margin-bottom:26px}
.drawer__dekking svg{width:16px;height:16px;color:var(--blue);flex:none}
.drawer__acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto}
body.drawer-open{overflow:hidden}
@media (max-width:560px){
  .drawer__paneel{width:100%}
  .drawer__inhoud{padding:26px 20px 30px}
}

/* --- bedrijvenlijst naast de kaart --- */
.loc--plat{background:none}
.loc--plat .loc__city{display:block}
.loc-landelijk{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.loc-landelijk__kop{
  display:block;padding:4px 16px 8px;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-600);font-weight:700;
}
.loc-leeg{padding:18px;color:var(--muted);font-size:.92rem}

/* Sommige labels leverden alleen een witte logoversie aan.
   Die krijgen een donkere tegel tot de kleurversie er is. */
.bedrijf__logo.is-donker,
.drawer__logo.is-donker{background:var(--ink)}

/* =========================================================
   25. Specialismen versie 2
   ========================================================= */

/* --- hero als stelling, zonder foto --- */
.hero--stelling{
  min-height:auto;
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-3) 100%);
  padding:calc(var(--header-h) + 76px) 0 clamp(64px,8vw,104px);
}
.stelling{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;max-width:none}
.stelling__accent{color:#7cc6ee}
.hero--stelling .hero__sub{max-width:52ch;margin-bottom:0}

/* --- het scenario: tekst naast een projectkaart --- */
.scenario{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.scenario__tekst .lead{color:var(--ink);font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.2;letter-spacing:-.018em;margin-bottom:20px}
.scenario__tekst p + p{margin-top:0}

.project{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;box-shadow:var(--shadow);
}
.project__kop{padding:22px 26px 18px;border-bottom:1px solid var(--line-2)}
.project__label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:5px;
}
.project__kop strong{font-family:var(--font-head);font-size:1.2rem;color:var(--ink);letter-spacing:-.015em}
.project__rollen{padding:8px 26px}
.project__rollen li{
  display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line-2);font-size:.93rem;color:var(--muted);
}
.project__rollen li:last-child{border-bottom:0}
.project__vak{
  font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-700);
}
.project__voet{
  margin:0;padding:15px 26px;background:var(--blue-050);
  font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--blue-700);
}
@media (max-width:820px){ .scenario{grid-template-columns:1fr} }

/* --- de stam met takken --- */
.stam{position:relative;padding-left:64px}
.stam::before{
  content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--blue) 0%,var(--blue-100) 100%);
}
.tak{position:relative;display:block}
.tak + .tak{margin-top:20px}
/* elleboog van de stam naar de kaart */
.tak::before{
  content:"";position:absolute;left:-45px;top:38px;width:33px;height:26px;
  border-left:2px solid var(--blue-100);border-bottom:2px solid var(--blue-100);
  border-bottom-left-radius:14px;
}
.tak__knoop{
  position:absolute;left:-64px;top:26px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:2px solid var(--blue-100);color:var(--blue);
  display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:.8rem;
  transition:.3s var(--ease);
}
.tak:hover .tak__knoop{background:var(--blue);border-color:var(--blue);color:#fff}

.tak__kaart{
  display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.tak:hover .tak__kaart{box-shadow:var(--shadow);border-color:var(--blue-100)}
.tak__media{overflow:hidden;background:var(--bg-soft-2)}
.tak__media img{width:100%;height:100%;object-fit:cover;min-height:180px;transition:transform .7s var(--ease)}
.tak:hover .tak__media img{transform:scale(1.05)}
.tak__body{padding:24px 26px 24px 0;display:flex;flex-direction:column;justify-content:center}
.tak__body h3{margin-bottom:8px}
.tak__body p{font-size:.96rem;color:var(--muted);margin-bottom:16px}
.tak__body .pill-grid{margin-bottom:16px}
.tak__labels{
  margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:.86rem;color:var(--grey-600);
}
@media (max-width:820px){
  .stam{padding-left:0}
  .stam::before{display:none}
  .tak::before{display:none}
  .tak__knoop{position:static;margin-bottom:12px}
  .tak__kaart{grid-template-columns:1fr;gap:0}
  .tak__media img{min-height:0;aspect-ratio:16/7}
  .tak__body{padding:24px}
}

/* =========================================================
   26. Specialismen versie 3: de baan
   ========================================================= */
.kern{
  background:linear-gradient(170deg,var(--bg-soft) 0%,#fff 55%);
  padding:calc(var(--header-h) + 64px) 0 clamp(56px,7vw,88px);
  overflow:hidden;
}
.kern__kop{max-width:660px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.kern__kop .eyebrow{justify-content:center}
.kern__kop h1{font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:none}
.kern__kop .lead{margin-inline:auto;max-width:56ch}

/* --- de tien beloften --- */
.belofte-lijst{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.belofte{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:28px 30px 26px;display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.belofte:hover{box-shadow:var(--shadow);border-color:var(--blue-100)}
.belofte__kop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.belofte__nr{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--blue-100)}
.belofte__vak{
  font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);
}
.belofte__titel{
  font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.24;margin-bottom:10px;
}
.belofte p{font-size:.95rem;color:var(--muted);margin-bottom:16px}
.belofte .pill-grid{margin-bottom:18px}
.belofte__labels{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px;
}
.belofte__label{
  font-size:.82rem;font-weight:500;color:var(--blue-700);
  background:var(--blue-050);border-radius:100px;padding:5px 13px;
  transition:.2s var(--ease);
}
.belofte__label:hover{background:var(--blue);color:#fff}
@media (max-width:820px){ .belofte-lijst{grid-template-columns:1fr} }

/* =========================================================
   27. Variantbalk - tijdelijk, om de drie uitwerkingen
   naast elkaar te kunnen bekijken. Weghalen zodra er
   een keuze is gemaakt.
   ========================================================= */
.variantbalk{
  background:var(--ink);color:#9db0c2;
  padding:calc(var(--header-h) + 14px) 0 14px;
}
.variantbalk .container{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
}
.variantbalk__kop{
  font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#7d92a6;
}
.variantbalk__links{display:flex;gap:8px;flex-wrap:wrap}
.variantbalk__links a{
  display:flex;flex-direction:column;gap:1px;
  padding:8px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  transition:.22s var(--ease);
}
.variantbalk__links a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
.variantbalk__links a.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.variantbalk__links strong{font-family:var(--font-head);font-size:.85rem;font-weight:700;color:#fff}
.variantbalk__links span{font-size:.74rem;color:#93a7ba}
.variantbalk__links a.is-active span{color:rgba(255,255,255,.8)}

/* de balk staat al onder de zwevende header, dus de pagina
   eronder hoeft daar geen ruimte meer voor te reserveren */
.variantbalk + .hero,
.variantbalk + .kern{padding-top:clamp(48px,6vw,72px)}
@media (max-width:620px){
  .variantbalk .container{justify-content:center;text-align:center}
  .variantbalk__links a{padding:7px 13px}
}

/* =========================================================
   28. Specialismen versie 3: de horizontale as
   Eén vraag links, tien specialismen naar rechts. De
   specialismen staan centraal; de bedrijven eronder klein.
   ========================================================= */
.as{margin:0}
.as__scroll{overflow-x:auto;overflow-y:hidden;padding:0 4px;-webkit-overflow-scrolling:touch}
.as__spoor{
  position:relative;display:flex;align-items:center;
  min-width:1040px;height:420px;padding-left:132px;
}

/* --- het beginpunt --- */
.as__start{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:0;
}
.as__start-label{
  font-family:var(--font-head);font-weight:700;font-size:.94rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--blue);border-radius:100px;
  padding:11px 20px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,113,185,.14);
}
.as__start-punt{
  width:11px;height:11px;border-radius:50%;background:var(--blue);
  margin-left:-5px;position:relative;z-index:2;
}
.as.is-gespeeld .as__start{animation:startIn .55s var(--ease) both}
@keyframes startIn{from{opacity:0;transform:translateY(-50%) translateX(-18px)}to{opacity:1;transform:translateY(-50%)}}

/* --- de as zelf --- */
.as__lijn{
  position:absolute;left:126px;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-100) 100%);
  transform:scaleX(0);transform-origin:left center;
}
.as.is-gespeeld .as__lijn{animation:asGroeien .9s cubic-bezier(.22,1,.36,1) .35s forwards}
.as.is-stil .as__lijn{transform:none}
@keyframes asGroeien{to{transform:scaleX(1)}}

/* --- de tien punten --- */
.as__punten{
  position:relative;display:flex;flex:1;list-style:none;margin:0;padding:0;height:100%;
}
.punt{position:relative;flex:1;min-width:88px;display:flex;justify-content:center}
.punt__stip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:#fff;
  border:2.5px solid var(--blue);z-index:2;
}
.punt__stok{
  position:absolute;left:50%;width:2px;background:var(--blue-100);
  transform:translateX(-50%);
}
.punt--boven .punt__stok{bottom:50%;height:34px}
.punt--onder .punt__stok{top:50%;height:34px}

.punt__kaart{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(160px,100%);display:flex;flex-direction:column;gap:4px;
  padding:13px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(12,28,44,.07);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.punt--boven .punt__kaart{bottom:calc(50% + 34px)}
.punt--onder .punt__kaart{top:calc(50% + 34px)}
.punt__kaart:hover{
  border-color:var(--blue);box-shadow:0 12px 26px rgba(12,28,44,.15);z-index:5;
}
.punt--boven .punt__kaart:hover{transform:translateX(-50%) translateY(-4px)}
.punt--onder .punt__kaart:hover{transform:translateX(-50%) translateY(4px)}

.punt__naam{
  font-family:var(--font-head);font-weight:700;font-size:.98rem;
  color:var(--ink);letter-spacing:-.015em;line-height:1.15;
}
.punt__rollen{font-size:.78rem;color:var(--muted);line-height:1.35}
.punt__labels{
  font-size:.68rem;color:var(--grey-600);line-height:1.35;
  padding-top:6px;margin-top:2px;border-top:1px solid var(--line-2);
}

/* --- de animatie: van links naar rechts --- */
.punt{opacity:0}
.as.is-gespeeld .punt{
  animation:puntIn .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(.55s + var(--i) * .09s);
}
.as.is-stil .punt{opacity:1}
.punt--boven{transform:translateY(14px)}
.punt--onder{transform:translateY(-14px)}
@keyframes puntIn{to{opacity:1;transform:translateY(0)}}
.as.is-stil .punt--boven,.as.is-stil .punt--onder{transform:none}

.as__telling{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;font-size:.86rem;color:var(--muted);
}
.as__telling strong{font-family:var(--font-head);font-size:1.15rem;color:var(--blue);margin-right:5px}

@media (max-width:1080px){
  .as__scroll{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}
@media (max-width:620px){
  .as__spoor{height:400px;min-width:960px}
  .punt__kaart{width:min(146px,100%);padding:11px 12px}
}

/* =========================================================
   12. Specialismen — homepage en specialismenpagina
   ========================================================= */

/* ---------- 12.1 Brede hero: geen dominante bouwfoto ---------- */
.hero--breed{
  background:
    radial-gradient(1100px 620px at 88% 18%,rgba(31,142,240,.42),transparent 62%),
    radial-gradient(760px 520px at 4% 92%,rgba(10,74,134,.55),transparent 60%),
    var(--vlak-diep);
  align-items:center;min-height:min(90vh,860px);
}
.hero--breed .hero__inner{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);align-items:center;
}
/* "Arbeidsbemiddeling" is één lang woord: de kop mag de hele kolom
   gebruiken, en is op desktop net zo groot dat het woord erin past.
   Het zachte afbreekstreepje in de HTML is het vangnet. */
.hero--breed h1{max-width:none}
@media (min-width:901px){
  .hero--breed h1{font-size:min(4.8vw,3.8rem)}
}
/* Zonder min-width:0 rekt de lopende band (width:max-content) de
   grid-kolom op tot de volle breedte van zijn inhoud. */
.hero--breed .hero__inner > *{min-width:0}

/* ---------- 12.4 Vormen van samenwerking: beeld naast uitklaplijst ----------
   Uitklappen met <details>, niet met JavaScript, zodat het ook werkt in
   omgevingen die scripts blokkeren. */
.vormen{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.vormen__media{
  border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:3/4;background:var(--bg-soft-2);position:sticky;top:calc(var(--header-h) + 28px);
}
.vormen__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Drie werksituaties in plaats van één foto: breed boven, twee eronder.
   Het vlak zelf houdt zijn maat; alleen de foto's krijgen hoeken. */
.vormen__media--drie{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.1fr 1fr;gap:12px;
  border-radius:0;overflow:visible;background:none;
}
.vormen__media--drie img{min-height:0;border-radius:var(--radius);background:var(--bg-soft-2)}
.vormen__media--drie img:first-child{grid-column:1 / -1}
@media (max-width:900px){
  /* smal en liggend vlak: de drie naast elkaar */
  .vormen__media--drie{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:8px}
  .vormen__media--drie img:first-child{grid-column:auto}
}
.vormen__lijst{display:flex;flex-direction:column;gap:10px}

.dienst{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.dienst[open]{border-color:var(--blue-100);box-shadow:var(--shadow-s)}
.dienst:hover{border-color:var(--blue-100)}
.dienst__kop{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:650;font-size:1.04rem;color:var(--ink);
}
.dienst__kop::-webkit-details-marker{display:none}
.dienst[open] .dienst__kop{color:var(--blue)}
.dienst__kop:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--radius)}
/* Plusje dat een minnetje wordt */
.dienst__teken{
  flex:0 0 auto;position:relative;width:22px;height:22px;border-radius:50%;
  background:var(--blue-050);transition:background .3s var(--ease)}
.dienst__teken::before,.dienst__teken::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--blue);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.dienst__teken::before{width:10px;height:1.5px}
.dienst__teken::after{width:1.5px;height:10px}
.dienst[open] .dienst__teken{background:var(--blue)}
.dienst[open] .dienst__teken::before,.dienst[open] .dienst__teken::after{background:#fff}
.dienst[open] .dienst__teken::after{transform:translate(-50%,-50%) scaleY(0)}
.dienst__tekst{padding:0 20px 18px}
.dienst__tekst p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.65}

/* ---------- 12.5 Specialismekaarten (overzicht) ---------- */
.vaknav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:14px 0 4px;
}
.vaknav a{
  font-family:var(--font-head);font-size:.86rem;font-weight:600;text-decoration:none;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;transition:all .25s var(--ease);
}
.vaknav a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

.vakgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.vakkaart{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.vakkaart:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--blue-100)}
.vakkaart__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft-2)}
.vakkaart__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.vakkaart:hover .vakkaart__media img{transform:scale(1.07)}
.vakkaart__body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1;gap:10px}
.vakkaart__naam{font-family:var(--font-head);font-size:1.24rem;font-weight:700;color:var(--ink);margin:0;line-height:1.25}
.vakkaart__kort{margin:0;font-size:.93rem;color:var(--muted);line-height:1.6}
.vakkaart__functies{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.vakkaart__functies span{
  font-size:.76rem;color:var(--grey-700);background:var(--bg-soft);
  border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;
}
/* Chips en pijl op één rij onderaan de kaart; margin-top:auto zet die rij
   in elke kaart van een rij op dezelfde hoogte. */
.vakkaart__onder{
  margin-top:auto;padding-top:4px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.vakkaart__onder > .vakkaart__functies{flex:1;min-width:0}
.vakkaart__pijl{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--blue-050);color:var(--blue);display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.vakkaart:hover .vakkaart__pijl{background:var(--blue);color:#fff;transform:translateX(3px)}


/* ---------- 12.6 Verdieping per specialisme ---------- */
.vakblok{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,3.4vw,56px);
  align-items:center;padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line-2);
  scroll-margin-top:120px;
}
.vakblok:first-of-type{border-top:0}
.vakblok--wissel .vakblok__media{order:2}
.vakblok__media{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft-2)}
.vakblok__media img{width:100%;height:100%;object-fit:cover;display:block}
.vakblok h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 4px}
.vakblok__kort{font-family:var(--font-head);font-weight:600;color:var(--blue);margin:0 0 12px;font-size:1rem}
.vakblok__tekst{margin:0 0 20px;color:var(--grey-700)}
.vakblok__kop{
  font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.vakblok__functies{list-style:none;margin:0 0 20px;padding:0;columns:2;column-gap:22px}
.vakblok__functies li{
  break-inside:avoid;font-size:.92rem;color:var(--text);
  padding:3px 0 3px 20px;position:relative;
}
.vakblok__functies li::before{
  content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--blue-100);border:1.5px solid var(--blue);
}
.vakblok__specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.vakblok__spec{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-head);font-size:.86rem;font-weight:650;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 11px;
  transition:all .25s var(--ease);
}
.vakblok__spec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.vakblok__spec:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}


/* ---------- 12.9 Specialismedetail in het uitschuifpaneel ----------
   De detailblokken staan in de pagina zodat ze leesbaar blijven zonder
   scripts. Draait main.js, dan zet dat de klasse js op html en verbergt
   deze regel ze; dezelfde inhoud verschijnt dan in het paneel rechts. */
html.js .vakdetails{display:none}
/* Vaste hoogte, geen aspect-ratio: in de kolomindeling van het paneel
   valt die terug op nul. */
.vakdrawer__media{
  border-radius:var(--radius);overflow:hidden;
  height:clamp(150px,22vh,210px);flex:none;
  background:var(--bg-soft-2);margin-bottom:22px;
}
.vakdrawer__media img{width:100%;height:100%;object-fit:cover;display:block}
.vakdrawer h3{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:0 0 4px}
.vakdrawer .vakblok__functies{columns:1}
.vakdrawer .btn{width:100%;justify-content:center}

/* ---------- 12.7 Afdelingenmatrix (cross-sector) ---------- */
.afdelingen{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
}
.afdeling{
  display:grid;grid-template-columns:1.05fr 1.25fr 1fr;gap:18px;align-items:center;
  padding:16px clamp(18px,2.2vw,28px);border-top:1px solid var(--line-2);
  transition:background .25s var(--ease);
}
.afdeling:first-child{border-top:0}
.afdeling:hover{background:var(--blue-050)}
.afdeling--kop{
  background:var(--bg-soft);
  font-family:var(--font-head);font-size:.74rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.afdeling--kop:hover{background:var(--bg-soft)}
.afdeling__naam{font-family:var(--font-head);font-weight:650;color:var(--ink)}
.afdeling__rollen{font-size:.9rem;color:var(--muted)}
.afdeling__spec{font-size:.86rem}
.afdeling__spec a{
  color:var(--blue);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.afdeling__spec a:hover{border-bottom-color:var(--blue)}
.afdeling__spec small{display:block;color:var(--muted);font-size:.8rem}

/* ---------- 12.8 Responsive ---------- */
@media (max-width:1080px){
  .vakgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero--breed .hero__inner{grid-template-columns:1fr;gap:30px}
  .hero--breed{min-height:auto;padding-top:calc(var(--header-h) + 42px)}
  .vormen{grid-template-columns:1fr;gap:24px}
  .vormen__media{position:static;aspect-ratio:16/9}
  .vakblok{grid-template-columns:1fr;gap:22px}
  .vakblok--wissel .vakblok__media{order:0}
  .vakblok__media{aspect-ratio:16/9}
  .afdeling{grid-template-columns:1fr;gap:4px;padding:15px 18px}
  .afdeling--kop{display:none}
  .afdeling__rollen::before{content:"Rollen: ";color:var(--grey-700);font-weight:600}
  .afdeling__spec::before{content:"Specialist: ";color:var(--grey-700);font-weight:600;font-size:.82rem}
}
@media (max-width:620px){
  .vakgrid{grid-template-columns:1fr}
  .vakblok__functies{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .hero--breed .hero__media img{animation:none}
}
/* Staat de band stil, dan zou overflow:hidden de helft van de logo's
   wegknippen. Op een breed scherm breekt hij daarom af over twee rijen. */
@media (prefers-reduced-motion:reduce){
  .logoband{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .logoband__spoor{width:auto;flex-wrap:wrap;justify-content:center;transform:none;animation:none}
  .logoband__cel[aria-hidden="true"]{display:none}
  .logoband__cel{opacity:1;margin-block:5px}
}
/* Op een aanraakscherm kun je een bewegend logo niet aantikken, dus staat
   de band daar stil. Afbreken zou hem op een telefoon bijna 800px hoog
   maken; daarom blijft het één rij die je opzij veegt. Deze regel staat
   na de vorige, zodat hij wint op een telefoon met beperkte beweging. */
/* Op een aanraakscherm staat de band stil. Met de volle logomaat pasten er
   nog geen anderhalf in beeld, dus daar worden ze kleiner en breken ze af:
   alle twaalf in beeld, zonder te vegen. */
@media (hover:none){
  .logoband{--logo-h:26px;--logo-pad:10px;--logo-vpad:11px;--logo-marge:4px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .logoband__spoor{width:auto;flex-wrap:wrap;justify-content:center;transform:none;animation:none}
  .logoband__cel[aria-hidden="true"]{display:none}
  .logoband__cel{opacity:1;margin-block:4px;border:1px solid var(--line-2)}
}

/* =========================================================
   13. Afsluitende actie in een blauw vlak
   Vakgebiedenpagina (de zin links, knop rechts) en contactpagina
   (Ondernemen met MBG).
   ========================================================= */

/* ---------- 13.1 Blauw actievlak ----------
   Vlak in de huisstijlkleur in plaats van donkerblauw met foto, zodat het
   duidelijk verschilt van het blok erboven. Compacter ook. */
.cta--slot{background:var(--blue);isolation:auto}
.cta--slot::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 420px at 88% 12%,rgba(255,255,255,.13),transparent 62%);
}
.cta--slot__inner{
  position:relative;z-index:1;max-width:none;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);align-items:center;
  padding:clamp(48px,5vw,72px) 0;
}
.cta--slot p.cta--slot__vraag{
  color:#fff;margin:0;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.16;letter-spacing:-.015em;
  max-width:26ch;
}
.cta--slot__actie{justify-self:start}
.cta--slot h2.cta--slot__kop{color:#fff;margin:0 0 14px;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12}
.cta--slot p.cta--slot__tekst{color:rgba(255,255,255,.9);margin:0;max-width:56ch;font-size:1.05rem}
.cta--slot p.cta--slot__wie{color:rgba(255,255,255,.78);margin:14px 0 0;font-size:.9rem}
.cta--slot .btn--white{background:#fff;color:var(--blue)}
.cta--slot .btn--white:hover{background:var(--blue-050)}

/* ---------- 13.2 Responsive ---------- */
@media (max-width:900px){
  .cta--slot__inner{grid-template-columns:1fr;gap:22px;padding:clamp(42px,7vw,60px) 0}
}

/* =========================================================
   30. Homepage-hero met beeld
   Zoals de nieuwe Multiselect-sites: beeld over de volle breedte dat
   onderaan overloopt in de pagina, met een blauw vlak voor de tekst.
   Achter de video staat een still uit dezelfde video; die blijft staan op
   kleine schermen, bij 'minder beweging' en in de losse HTML.
   ========================================================= */
.hero--beeld{background:var(--vlak-diep)}
.hero__beeld{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__beeld img,.hero__beeld video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* background-color, niet de verkorting: in de losse HTML zit de foto in
   background-image */
.hero__beeld img{background-color:var(--vlak-diep)}
.hero__video{opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.speelt{opacity:1}
/* Bovenin iets donkerder achter het menu, onderin over naar wit */
.hero__beeld::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,34,68,.30) 0%,rgba(8,34,68,.06) 28%,rgba(255,255,255,0) 60%,
    rgba(255,255,255,.82) 88%,#fff 100%);
}
.hero__vlak{
  position:relative;max-width:680px;
  padding:clamp(28px,3.6vw,48px);border-radius:var(--radius-l);
  background:linear-gradient(125deg,#0b5ea8 0%,#1273cc 100%);
  box-shadow:0 30px 70px rgba(4,20,45,.32);
}
/* Wit op dit blauw haalt 4.8:1 tot 6:1; de lichtblauwe eyebrow en de
   doorschijnende subtekst van de oude hero haalden dat niet. */
.hero--beeld .hero__vlak h1{font-size:clamp(1.8rem,3.6vw,3.5rem);max-width:none}
.hero--beeld .hero__vlak .hero__sub{color:#fff}
.hero--beeld .hero__vlak .hero__eyebrow{color:#fff}
.hero--beeld .hero__vlak .hero__eyebrow::before{background:#fff}
/* Arbeidsbemiddeling is één lang woord: de maat is zo gekozen dat het
   op elke breedte (ook 320px) heel op de tweede regel past. */
@media (max-width:620px){
  .hero__vlak{padding:26px 24px 28px}
  .hero--beeld .hero__vlak h1{font-size:7.4vw}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
}

/* ---------- 30.1 Luchtfoto in de hero ----------
   De foto zit in een doos met de verhouding van de foto (3:2) die het hele
   vlak bedekt, net als object-fit:cover. */
.hero__beeld{container-type:size}
.hero__schaal{
  position:absolute;left:50%;top:50%;margin:0;padding:0;
  width:max(100cqw,calc(100cqh * 1.5));
  height:max(100cqh,calc(100cqw / 1.5));
  transform:translate(-50%,-50%);
}
/* Uitlijnen op de bovenkant van de foto in plaats van het midden:
   handig als de koppen van mensen bovenin staan. */
.hero__schaal--boven{top:0;transform:translate(-50%,0)}
/* Blauw vlak: twee derde van de breedte en licht doorschijnend. Bij 90%
   dekking haalt wit ook boven een lichte plek in de foto 4.8:1. */
@media (min-width:901px){
  .hero--beeld .hero__inner{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
.hero--beeld .hero__vlak{
  max-width:none;
  background:linear-gradient(125deg,rgba(11,94,168,.9) 0%,rgba(14,104,190,.9) 100%);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero--beeld .hero__vlak{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* =========================================================
   31. Hero-variant: tekst gecentreerd bovenin
   In de stijl van VDK: de titel en ondertitel in het midden bovenin, het
   beeld over de volle breedte eronder, met een verticaal verloop in de
   huisstijlblauwen: dicht achter de tekst, lichter naar onder zodat het
   beeld zichtbaar wordt. Bruikbaar op elke pagina: zet hero--midden op de
   <section class="hero">. Werkt met de foto van de subpagina's
   (.hero__media) en met het beeld of de video van de homepage
   (.hero__beeld); het blauwe vlak van de homepage wordt dan transparant.
   ========================================================= */
.hero--midden{align-items:flex-start;padding-top:calc(var(--header-h) + clamp(40px,8vh,96px))}
.hero--midden .hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero--midden .hero__vlak{
  max-width:52rem;padding:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero--midden .eyebrow,.hero--midden .btn-row{justify-content:center}
.hero--midden h1,.hero--midden .hero__sub{margin-inline:auto}
.hero--midden .hero__vlak h1{font-size:clamp(2.2rem,5vw,4.2rem)}

/* Verloop van huisstijlblauw bovenin naar neutraal donkergrijs onderin:
   dat leest rustiger dan blauw tot onderaan. Ook boven een wit stuk foto
   haalt wit achter de tekst minstens 5,5:1; naar onderen wordt het lichter zodat de foto beter doorkomt. */
.hero--midden .hero__media::after,
.hero--midden .hero__beeld::after{
  /* achter de titel en de introtekst (tot ongeveer 75%) blijft het dicht,
     daaronder komt de foto meer door */
  background:linear-gradient(180deg,
    rgba(10,58,110,.88) 0%,rgba(22,52,88,.78) 50%,
    rgba(38,44,52,.50) 88%,rgba(26,29,34,.16) 100%);
}

/* Op de homepage valt de cijferbalk 72px over de onderkant: de
   scroll-aanwijzer staat daar boven */
.hero--midden:not(.hero--compact) .hero__scroll{bottom:clamp(96px,9vw,132px)}
.hero--midden .hero__scroll{text-shadow:0 1px 8px rgba(4,20,45,.45)}

@media (max-width:900px){
  /* genoeg hoogte om onder de tekst ook iets van het beeld te zien */
  .hero--midden:not(.hero--compact){min-height:min(78vh,640px)}
}
@media (max-width:620px){
  /* "arbeidsbemiddeling" moet heel op de regel passen */
  .hero--midden .hero__vlak h1{font-size:7.4vw}
}

/* =========================================================
   Tekstpagina (privacyverklaring)
   Een smalle hero zonder foto en een rustige leeskolom.
   ========================================================= */
.hero--tekst{min-height:auto;align-items:flex-end;padding-bottom:clamp(40px,5vw,64px)}
.hero--tekst .hero__sub{margin-bottom:0}
.juridisch{max-width:760px}
.juridisch__datum{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.juridisch h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:44px 0 14px}
.juridisch h3{font-size:1.08rem;margin:26px 0 8px}
.juridisch p,.juridisch li{color:var(--grey-700)}
.juridisch ul{margin:0 0 1.1em;padding-left:22px}
.juridisch li{margin-bottom:6px}
.juridisch a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* =========================================================
   33. Vakgebieden in groepen, dienstenrij en verhalen
   De branche is de ingang; de ondersteunende diensten staan
   daaronder in een eigen groep, met internationale werving
   als manier van werven.
   ========================================================= */
.vakgroep + .vakgroep{margin-top:clamp(44px,5vw,72px)}
.vakgroep__kop{margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.vakgroep__kop h3{margin:0 0 6px;font-size:clamp(1.15rem,1.7vw,1.45rem)}
.vakgroep__kop p{margin:0;max-width:64ch;font-size:.97rem;color:var(--grey-700)}
.sectornav ul + .sectornav__kop{margin-top:22px}

/* Onder de branchekaarten op de homepage: wat we daarnaast leveren. */
.dienstenrij{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.dienstenrij__kop{margin:0;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)}
.dienstenrij__lijst{display:flex;flex-wrap:wrap;gap:8px}
.dienstenrij__lijst a{
  font-family:var(--font-head);font-weight:600;font-size:.9rem;
  padding:6px 14px;border-radius:999px;background:#fff;
  border:1px solid var(--blue-100);color:var(--blue-700);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.dienstenrij__lijst a:hover{background:var(--blue-050);border-color:var(--blue)}

/* Verhalen uit de bedrijven: beeld voorop, titel over de foto. */
.verhalen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.verhaalkaart{display:flex;flex-direction:column}
.verhaalkaart__beeld{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--radius-l);background:var(--vlak-diep);
}
.verhaalkaart__beeld img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.verhaalkaart:hover .verhaalkaart__beeld img{transform:scale(1.05)}
/* Donker bovenin achter de titel, naar onderen open zodat de foto telt.
   Wit haalt op het donkerste deel ruim 7:1. */
.verhaalkaart__beeld::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,20,45,.82) 0%,rgba(4,20,45,.62) 34%,
    rgba(4,20,45,.24) 62%,rgba(4,20,45,.10) 100%);
}
.verhaalkaart__over{
  position:absolute;z-index:2;inset:0 0 auto;
  padding:clamp(20px,2.4vw,28px);color:#fff;
}
.verhaalkaart__over h3{
  margin:0;color:#fff;font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.25;
  text-wrap:balance;text-shadow:0 2px 18px rgba(4,20,45,.4);
}
.verhaalkaart__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.verhaalkaart__label,.verhaalkaart__datum{
  font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.02em;
}
.verhaalkaart__label{
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.verhaalkaart__datum{color:rgba(255,255,255,.85)}
.verhaalkaart__body{padding:16px 4px 0;display:flex;flex-direction:column;gap:10px}
.verhaalkaart__body p{margin:0;font-size:.96rem;color:var(--grey-700)}
@media (max-width:1000px){.verhalen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .verhalen{grid-template-columns:1fr}
  .verhaalkaart__beeld{aspect-ratio:4/3}
}

/* =========================================================
   34. Verhaalpagina en groepen in de bedrijvenfilters
   ========================================================= */
.verhaalkaart{color:inherit}
.verhaalkaart__body .link-arrow{margin-top:2px}

/* Filters op de bedrijvenpagina: eerst de branches, dan de diensten. */
.filters__kop{
  font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 2px 0 10px;
}
.filters__kop:first-child{margin-left:0}
.tag--dienst{background:var(--bg-soft);color:var(--grey-700);box-shadow:inset 0 0 0 1px var(--line)}

/* Eén verhaal: donkere kop, beeld dat daar half overheen valt. */
.artikelkop{
  background:var(--vlak-diep);color:#fff;
  padding:calc(var(--header-h) + clamp(44px,7vw,86px)) 0 clamp(30px,4vw,46px);
}
.artikelkop h1{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem);text-wrap:balance}
.artikelkop__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;
  font-family:var(--font-head);font-size:.85rem;color:rgba(255,255,255,.82);
}
.artikelkop__label{
  padding:5px 12px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
}
.artikelbeeld{background:linear-gradient(180deg,var(--vlak-diep) 0 52%,transparent 52%)}
.artikelbeeld img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-l);box-shadow:0 30px 70px rgba(4,20,45,.28);
}
.artikel h2{font-size:clamp(1.2rem,1.9vw,1.5rem);margin:38px 0 12px}
.artikel h2:first-child{margin-top:0}
.artikel p{color:var(--grey-700);font-size:1.02rem;line-height:1.72;max-width:68ch}
@media (max-width:700px){
  .artikelbeeld{background:linear-gradient(180deg,var(--vlak-diep) 0 34%,transparent 34%)}
  .artikelbeeld img{aspect-ratio:4/3}
}

/* =========================================================
   35. Drie routes op de homepage
   Opdrachtgever, professional en ondernemer/investeerder.
   ========================================================= */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.route{
  display:flex;flex-direction:column;gap:10px;color:inherit;
  padding:clamp(24px,2.6vw,34px);border-radius:var(--radius-l);
  background:#fff;border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.route:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-100)}
.route h3{margin:0;font-size:1.12rem}
.route p{margin:0;color:var(--grey-700);font-size:.96rem;flex:1}
.route .link-arrow{margin-top:6px}
@media (max-width:900px){.routes{grid-template-columns:1fr}}

/* =========================================================
   36. Markten: labels, filters en de marktpagina
   ========================================================= */
.tag--markt{background:var(--blue);color:#fff}
.filter--markt.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

/* De markt(en) bij een vakgebied, in de rij op de vakgebiedenpagina. */
.sectorblok__markten{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 2px;
  font-family:var(--font-head);font-size:.8rem;
}
.sectorblok__marktkop{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.sectorblok__markten a{
  position:relative;z-index:4;font-weight:600;color:var(--blue-700);
  padding:3px 10px;border-radius:999px;background:var(--blue-050);
}
.sectorblok__markten a:hover{background:var(--blue-100)}

/* Bedrijven die in alle markten werken, onder een marktblok. */
.vakblok__breed{margin:16px 0 0;font-size:.88rem;color:var(--muted)}
.vakblok__breed a{color:var(--blue);font-weight:600}

/* Bedrijf dat in alle markten werkt: zelfde chip, met een lichte toevoeging. */
.vakblok__spec--breed{display:inline-flex;align-items:center;gap:7px}
.vakblok__spec--breed span{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--muted);
  padding-left:7px;border-left:1px solid var(--line);
}

/* =========================================================
   39. Marktpagina
   Eén sectie per markt, met een vaste volgorde: markt, propositie,
   toelichting, vakgebieden en de bedrijven die er actief zijn.
   De secties wisselen van achtergrond en beeldzijde, zodat ze los
   van elkaar te lezen zijn zonder kaders of kaarten.
   ========================================================= */
.marktnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.marktnav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:10px 18px;border-radius:100px;white-space:nowrap;
  font-family:var(--font-head);font-weight:600;font-size:.94rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.marktnav a:hover{border-color:var(--blue);color:var(--blue)}
.marktnav a.is-active{background:var(--blue);border-color:var(--blue);color:#fff}

.marktsectie{padding-block:clamp(52px,6.5vw,104px)}
.marktsectie--soft{background:var(--bg-soft)}
.marktsectie__grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4.5vw,76px);align-items:start;
}
.marktsectie__grid--wissel .marktsectie__beeld{order:-1}
.marktsectie__tel{
  margin:0;font-family:var(--font-head);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.marktsectie h2{margin:10px 0 0;font-size:clamp(1.7rem,2.9vw,2.4rem);line-height:1.1;text-wrap:balance}
.marktsectie__propositie{
  margin:14px 0 0;max-width:46ch;font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.45;color:var(--blue-700);
}
.marktsectie__uitleg{margin:14px 0 0;max-width:62ch;color:var(--grey-700)}
.marktsectie__deel{margin-top:clamp(26px,3vw,38px)}
.marktsectie__label{
  margin:0 0 12px;font-family:var(--font-head);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* Vakgebieden: secundair, als opsomming van tekstlinks. */
/* Als flexlijst, zodat elk vakgebied een eigen afbreekpunt heeft: de
   items staan in de HTML zonder spatie ertussen. */
.vaklijst{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:baseline;row-gap:4px;font-size:.96rem;line-height:1.9;
}
.vaklijst li{display:inline-flex;align-items:baseline}
.vaklijst li:not(:last-child)::after{content:"\00b7";margin:0 10px;color:var(--grey-600)}
.vaklijst a{
  color:var(--ink-2);border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.vaklijst a:hover{color:var(--blue);border-bottom-color:var(--blue-100)}

/* Bedrijven: het zwaarste element van de sectie. */
.bedrijflijst{list-style:none;margin:0;padding:0;max-width:560px}
.bedrijflijst li:first-child .bedrijfregel{border-top:1px solid var(--line)}
.bedrijfregel{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:52px;padding:12px 4px;color:var(--ink);
  border-bottom:1px solid var(--line);
  transition:color .2s var(--ease),padding .2s var(--ease);
}
.marktsectie--soft .bedrijfregel{border-color:var(--blue-100)}
.bedrijfregel__naam{display:flex;flex-direction:column;font-family:var(--font-head);font-weight:600;font-size:1.02rem}
.bedrijfregel__rol{margin-top:2px;font-size:.78rem;font-weight:500;color:var(--muted)}
.bedrijfregel__pijl{display:flex;color:var(--blue);transition:transform .25s var(--ease)}
.bedrijfregel__pijl svg{width:18px;height:18px}
.bedrijfregel:hover{color:var(--blue)}
.bedrijfregel:hover .bedrijfregel__pijl{transform:translateX(4px)}
.bedrijfregel:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* Beeld: liggend en ruim, geschikt voor eigen fotografie van mensen,
   teams en projecten. */
.marktsectie__beeld{
  border-radius:var(--radius-l);overflow:hidden;background:var(--bg-soft-2);
  position:sticky;top:calc(var(--header-h) + 34px);
}
.marktsectie__beeld img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

@media (max-width:900px){
  .marktsectie__grid{grid-template-columns:1fr;gap:24px}
  .marktsectie__grid--wissel .marktsectie__beeld{order:0}
  .marktsectie__beeld{position:static;order:-1}
  .marktsectie__beeld img{aspect-ratio:16/10}
}
@media (max-width:700px){
  .marktnav{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .marktnav::-webkit-scrollbar{display:none}
  .marktnav a{scroll-snap-align:start;flex:none}
}

/* ================= COOKIEMELDING =================
   Eenmalige melding onderaan het scherm dat de site bezoek meet. Geen
   keuzescherm: de metingen zijn geanonimiseerd en er staat niets in de
   weg. main.js zet hem erin en onthoudt het wegklikken. */
.cookiemelding{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);
  z-index:60;max-width:620px;margin-inline:auto;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:#fff;border:1px solid var(--blue-100);border-radius:var(--radius);
  box-shadow:var(--shadow-l);padding:18px 20px;
  animation:cookieOp .4s var(--ease) both;
}
.cookiemelding p{margin:0;flex:1 1 280px;font-size:.92rem;line-height:1.55;color:var(--ink-3)}
.cookiemelding a{color:var(--blue-700);text-decoration:underline}
.cookiemelding .btn{flex:none;padding:11px 24px;font-size:.92rem}
@keyframes cookieOp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cookiemelding{animation:none}}
@media (max-width:560px){
  .cookiemelding{padding:16px}
  .cookiemelding .btn{width:100%;text-align:center;justify-content:center}
}