body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-relaxed)}
*{box-sizing:border-box}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--text-heading);letter-spacing:var(--tracking-heading);margin:0}
p{margin:0}
a{color:var(--capabi-orange);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--orange-600)}
img{max-width:100%}
input,select,textarea,button{font-family:var(--font-body)}
.cnt{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--section-y) 0}
.sec-c{padding:var(--section-y-compact) 0}
.subtle{background:var(--surface-subtle)}
.navy{background:var(--capabi-navy);color:#fff}
.pattern{position:relative;overflow:hidden}
.pattern>*{position:relative;z-index:1}
.pattern::before{content:"";position:absolute;left:0;top:50%;width:min(340px,42vw);height:min(560px,90%);transform:translateY(-50%);background:url(../img/patterns/grid-bg.svg) left center/cover no-repeat;pointer-events:none;z-index:0}
:root{--headerh:88px}
.navrow{height:var(--headerh);display:flex;align-items:center;gap:var(--space-6)}
.navlogo{flex:0 0 auto;display:flex;align-items:center}
.navlinks{display:flex;gap:var(--space-5);margin-left:auto;align-items:center}
.navitem{position:relative;display:flex;align-items:center}
.navitem .navlink{display:inline-flex;align-items:center}
.submenu{position:absolute;top:100%;left:-16px;min-width:210px;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:var(--space-2) 0;display:none;flex-direction:column}
.navitem:hover .submenu,.navitem:focus-within .submenu{display:flex}
.sublink{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--capabi-navy);padding:10px 20px}
.sublink:hover{background:var(--navy-050);color:var(--capabi-navy)}
.sublink.on{color:var(--capabi-orange)}
.newscard{display:flex;flex-direction:column;height:100%}
.navcta{flex:0 0 auto}
.navtoggle{display:none;width:48px;height:48px;margin-left:auto;background:none;border:1px solid var(--border-strong);cursor:pointer;align-items:center;justify-content:center}
.burger{display:flex;flex-direction:column;gap:5px;width:20px}
.burger i{display:block;height:2px;background:var(--capabi-navy);transition:var(--transition-control)}
.burger--x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger--x i:nth-child(2){opacity:0}
.burger--x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navdrawer{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5) var(--gutter) var(--space-6);border-top:1px solid var(--border-subtle);background:#fff}
.drawerlink{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--capabi-navy);padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.drawerlink.on{color:var(--capabi-orange)}
.navdrawer .drawerlink--sub{padding:12px 0 12px var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}
.pagehero-pad{padding:var(--space-8) var(--gutter) var(--space-16)}
.ctaband{background:var(--capabi-orange);padding:var(--space-12);display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);flex-wrap:wrap}
/* variant met een persoon rechts: de foto staat los van de tekststroom en wordt
   door de onderrand van de banner afgesneden, zodat hij er echt in lijkt te staan */
.ctaband--persoon{position:relative;overflow:visible;min-height:330px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:var(--space-8);padding-right:clamp(230px,30%,400px)}
.ctatekst{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);max-width:660px}
.ctapersoon{position:absolute;right:clamp(var(--space-6),5%,var(--space-16));
  top:-44px;height:calc(100% + 150px);width:auto;
  /* de banner mag niet clippen (dan zou het hoofd eraf gaan), dus snijden we de
     foto zelf af op precies de onderrand: 150 - 44 = 106px vanaf de onderkant.
     Beide maten schalen mee met de bandhoogte, dus dit klopt bij elke titellengte. */
  clip-path:inset(0 0 106px 0);
  pointer-events:none;user-select:none}
.footergrid{padding:var(--space-16) var(--gutter) var(--space-8);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-10)}
.footerbar{padding:var(--space-5) var(--gutter);border-top:1px solid var(--border-inverse);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;font-size:var(--text-xs);color:var(--navy-300)}
.navlink{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-muted);padding-bottom:4px;white-space:nowrap}
.navlink:hover{color:var(--capabi-navy)}
.navlink.on{color:var(--capabi-navy);box-shadow:inset 0 -3px 0 var(--capabi-orange)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.g2-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}
.g2-form{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-16);align-items:start}
.g2-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:var(--space-12);align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.g3-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:var(--space-16);align-items:center}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.wide{grid-column:1 / -1}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.stack{display:flex;flex-direction:column}
.filterbar{display:grid;grid-template-columns:1.8fr 1.1fr 1.1fr 1.1fr 1.1fr;gap:var(--space-3);align-items:end}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.joblink{display:block;text-decoration:none;color:inherit}
.joblink:hover{color:inherit}
.side{position:sticky;top:104px}
.metagrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.logowall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-6)}
.sliderbtn{width:44px;height:44px;border:1px solid var(--border-strong);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-control)}
.sliderbtn:hover{background:var(--navy-050);border-color:var(--capabi-navy)}
.logotrack{display:grid;grid-auto-flow:column;grid-auto-columns:25%;overflow-x:auto;scroll-snap-type:x mandatory;border:1px solid var(--border-subtle);background:var(--gray-000);scrollbar-width:none}
.logotrack::-webkit-scrollbar{display:none}
.logocell{scroll-snap-align:start;height:148px;padding:var(--space-5) var(--space-6);border-right:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}
.logocell:last-child{border-right:0}
.jobrow{display:grid;grid-template-columns:minmax(0,1fr) 118px 108px 120px 132px 14px;align-items:center;gap:var(--space-6)}
.jobrow--head{padding:0 var(--space-6) var(--space-3);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.jobcell{font-size:var(--text-sm);color:var(--text-body)}
.jobcell--num{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--capabi-navy)}
.uspgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.uspgrid>div{padding:var(--space-8) var(--space-6);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:10px}
.uspgrid>div:first-child{border-left:0;padding-left:0}
.filterpanel{background:#fff;padding:var(--space-6);box-shadow:var(--shadow-lg)}
.searchpanel{background:#fff;padding:var(--space-4);display:grid;grid-template-columns:1fr;gap:var(--space-3);box-shadow:var(--shadow-lg)}
.herophoto{position:relative}
.heroplate{position:absolute;left:0;bottom:0;background:#fff;padding:var(--space-6) var(--space-8);max-width:78%;box-shadow:var(--shadow-md)}
@media (max-width:1240px){.navcta{display:none}}
@media (max-width:1100px){.navlinks,.navcta{display:none}.navtoggle{display:flex}.footergrid{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){
.g2,.g2-top,.g2-form,.g2-detail,.hero-grid,.g3,.g3-cards{grid-template-columns:1fr;gap:var(--space-8)}
.logotrack{grid-auto-columns:50%}
.uspgrid{grid-template-columns:1fr 1fr}
.uspgrid>div:nth-child(odd){border-left:0;padding-left:0}
.searchpanel{grid-template-columns:1fr}
.herophoto figure>div{aspect-ratio:16 / 9!important;max-height:300px}
.heroplate{position:static;max-width:none;box-shadow:none;border:1px solid var(--border-subtle);padding:var(--space-6)}
.hero-pad{padding:64px var(--gutter) 72px}
.jobrow{grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-6)}
.jobrow>div:first-child{grid-column:1 / -1}
.jobrow--head{display:none}
.jobchev{display:none}
.jobcell{display:flex;flex-direction:column;gap:2px}
.jobcell::before{content:attr(data-label);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.filterbar{grid-template-columns:1fr 1fr}
.metagrid{grid-template-columns:1fr 1fr}
.side{position:static}
}
@media (max-width:760px){.footergrid{grid-template-columns:1fr;gap:var(--space-8)}.ctaband{padding:var(--space-8)}.pagehero-pad{padding:var(--space-6) var(--gutter) var(--space-12)}.sec{padding:var(--space-16) 0}.sec-c{padding:var(--space-12) 0}}
@media (max-width:640px){.fields{grid-template-columns:1fr}.filterbar{grid-template-columns:1fr}.logotrack{grid-auto-columns:100%}.uspgrid{grid-template-columns:1fr}.uspgrid>div{border-left:0;padding-left:0}}

.reveal{opacity:0;transform:translateY(8px)}
.reveal.in{opacity:1;transform:none;transition:opacity var(--duration-reveal,220ms) var(--ease-brand,cubic-bezier(.2,.6,.2,1)),transform var(--duration-reveal,220ms) var(--ease-brand,cubic-bezier(.2,.6,.2,1))}
.logocell image-slot,.logocell img{transition:opacity 140ms cubic-bezier(.2,.6,.2,1)}
.jobrow .jobchev{transition:transform 140ms cubic-bezier(.2,.6,.2,1)}
.joblink:hover .jobchev{transform:translateX(4px)}
.vakcard span .capabi-chevron,.vaklink{transition:transform 140ms cubic-bezier(.2,.6,.2,1)}
.joblink:hover .vaklink{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal.in{transition:none}.joblink:hover .jobchev,.joblink:hover .vaklink{transform:none}}

/* hero video background */
.hero-video{position:relative}
.hero-video>.herobg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video>.herobg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-video>.herobg .heroveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,39,67,.90) 0%,rgba(0,39,67,.80) 50%,rgba(0,39,67,.66) 100%)}
.hero-video::before{z-index:0;opacity:.5}
@media (prefers-reduced-motion:reduce){.hero-video>.herobg video{display:none}}

/* beeld-placeholder en gevulde foto */
.beeld{position:relative;overflow:hidden;background:var(--surface-subtle)}
.beeld>img{width:100%;height:100%;object-fit:cover;display:block}
.beeld>image-slot{display:block;width:100%;height:100%}

/* projectgalerij */
.projectgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-10)}
.projectkaart{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.projectkaart figcaption{display:flex;flex-direction:column;gap:2px}
.projectvak{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}
.projecttitel{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--capabi-navy);line-height:var(--leading-snug)}
.projectplaats{font-size:var(--text-sm);color:var(--text-muted)}

/* teamkaarten */
.teamgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-10)}
.teamkaart{display:flex;flex-direction:column;gap:var(--space-4)}
.teamnaam{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--capabi-navy);line-height:var(--leading-snug)}
.teamrol{font-size:var(--text-sm);color:var(--text-muted)}
.teamcontact{display:flex;flex-direction:column;gap:4px;font-size:var(--text-sm)}

/* contacticonen over de foto: verschijnen bij hover én bij toetsenbordfocus */
.teamfoto{position:relative}
.teamsocial{position:absolute;left:0;right:0;bottom:0;display:flex;gap:var(--space-2);
  padding:var(--space-8) var(--space-4) var(--space-4);
  background:linear-gradient(to top,rgba(0,39,67,.94),rgba(0,39,67,0));
  opacity:0;transform:translateY(8px);transition:var(--transition-control)}
.teamkaart:hover .teamsocial,.teamkaart:focus-within .teamsocial{opacity:1;transform:none}
.teamsocial a,.teamsocial .leeg{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--capabi-navy);transition:var(--transition-control)}
.teamsocial .leeg{opacity:.55;cursor:default}
.teamsocial a:hover{background:var(--capabi-orange);color:#fff}
.teamsocial a:focus-visible{outline:2px solid var(--capabi-orange);outline-offset:2px}
/* zonder hover (touch) blijven de knoppen staan, anders zijn ze onbereikbaar */
@media (hover:none){.teamsocial{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.teamsocial{transition:none}}

/* filter op vakgebied, verschijnt zodra het team lang genoeg is */
.teamfilter{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.teamfilterknop{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm);
  padding:8px 16px;border:1px solid var(--border-strong);background:transparent;color:var(--capabi-navy);
  cursor:pointer;transition:var(--transition-control)}
.teamfilterknop:hover{border-color:var(--capabi-navy)}
.teamfilterknop.on{background:var(--capabi-navy);border-color:var(--capabi-navy);color:#fff}
.teamfilterknop.inv{color:#fff;border-color:var(--border-inverse)}
.teamfilterknop.inv.on{background:#fff;color:var(--capabi-navy);border-color:#fff}

/* kop + knop op één rij, hergebruikt door de nieuwe secties */
.sectierij{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}

@media (max-width:1000px){.projectgrid,.teamgrid{grid-template-columns:1fr 1fr;gap:var(--space-6)}}
@media (max-width:640px){.projectgrid,.teamgrid{grid-template-columns:1fr}}

/* werkwijze: stappen naast een staand beeld */
.werkwijzerij{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:var(--space-12);align-items:stretch}
.werkwijzebeeld{height:100%}
.werkwijzebeeld>.beeld{height:100%;aspect-ratio:auto!important;min-height:420px}
@media (max-width:1000px){.werkwijzerij{grid-template-columns:1fr;gap:var(--space-8)}.werkwijzebeeld{max-width:420px}.werkwijzebeeld>.beeld{min-height:0;aspect-ratio:3 / 4!important}}

/* foto zoomt licht in zolang je op de kaart staat */
.teamfoto .beeld>*{transition:transform 520ms cubic-bezier(.2,.6,.2,1)}
.teamkaart:hover .teamfoto .beeld>*,.teamkaart:focus-within .teamfoto .beeld>*{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.teamfoto .beeld>*{transition:none}
  .teamkaart:hover .teamfoto .beeld>*,.teamkaart:focus-within .teamfoto .beeld>*{transform:none}}

/* horizontale teamslider met pijlen aan weerszijden */
.teamslider{position:relative;margin-top:var(--space-10)}
.teamtrack{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4 * var(--space-6)) / 5);
  gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none}
.teamtrack::-webkit-scrollbar{display:none}
.teamtrack>.teamkaart{scroll-snap-align:start}
.teamnav{position:absolute;top:34%;transform:translateY(-50%);z-index:2;box-shadow:var(--shadow-md)}
.teamnav--links{left:calc(var(--space-6) * -0.5)}
.teamnav--rechts{right:calc(var(--space-6) * -0.5)}
.teamnav:disabled{opacity:.3;cursor:default;box-shadow:none}
.teamnav:disabled:hover{background:#fff;border-color:var(--border-strong)}
/* past alles in beeld, dan zijn de pijlen overbodig */
.teamslider--vast .teamnav{display:none}
@media (prefers-reduced-motion:reduce){.teamtrack{scroll-behavior:auto}}
@media (max-width:1000px){.teamtrack{grid-auto-columns:calc((100% - 2 * var(--space-6)) / 3)}}
@media (max-width:640px){.teamtrack{grid-auto-columns:calc((100% - var(--space-4)) / 2);gap:var(--space-4)}
  .teamnav--links{left:-6px}.teamnav--rechts{right:-6px}}

/* lichte groepskoppen in het inschrijfformulier, in plaats van tabbladen */
.formgroep{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--border-subtle)}
.formgroepkop{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5)}
.formgroepkop h4{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--capabi-navy)}
.formgroephint{font-size:var(--text-sm);color:var(--text-muted)}
.cvveld{border:1px dashed var(--border-strong);padding:var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.cvnaam{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--capabi-navy)}
.cvhint{font-size:var(--text-sm);color:var(--text-muted)}

/* tablet: persoon blijft náást de tekst, alleen kleiner. Stapelen ziet er hier
   slecht uit: de foto duwt de band hoog en belandt los in de rechteronderhoek.
   top en clip tellen samen weer op tot de extra hoogte (70 - 30 = 40). */
@media (max-width:1000px){
  .ctaband--persoon{padding:var(--space-10);padding-right:clamp(210px,46%,330px);min-height:300px}
  .ctapersoon{top:-30px;height:calc(100% + 70px);clip-path:inset(0 0 40px 0)}
}
/* grote telefoon: naast elkaar wordt te krap, maar de persoon wordt wel omhoog
   getrokken tot naast de knop, anders staat hij verloren in de rechteronderhoek */
@media (max-width:640px){
  .ctaband--persoon{padding:var(--space-8);padding-right:var(--space-8);padding-bottom:0;min-height:0}
  .ctapersoon{position:static;height:auto;width:170px;align-self:flex-end;
    top:auto;clip-path:none;margin:-72px 0 0 auto;display:block}
}
/* kleine telefoon: knop en persoon passen niet meer op één regel, dus eronder,
   met de flex-gap weggehaald zodat er geen gat valt */
@media (max-width:520px){
  .ctapersoon{width:140px;margin-top:calc(var(--space-8) * -1)}
}

/* subtielere logobalk op de homepage: lagere cellen, minder verticale ruimte */
.logowall--compact{padding:var(--space-10) 0}
.logowall--compact .logowall-head{margin-bottom:var(--space-5)}
.logowall--compact .logocell{height:104px;padding:var(--space-4) var(--space-5)}
.logowall--compact .sliderbtn{width:36px;height:36px}
/* label boven het zoekblok in de hero */
.zoeklabel{display:block;margin-bottom:var(--space-3);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--navy-200)}

/* verwijzing naar BIND binnen "Waarom CAPABI" */
.bindnoot{margin-top:var(--space-8);padding-left:var(--space-5);border-left:3px solid var(--capabi-orange)}
.bindlabel{display:block;margin-bottom:6px;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}
.bindnoot p{font-size:var(--text-sm);color:var(--text-body)}

/* secundaire verwijzingen onder de hoofd-CTA in de keuzekaarten */
.routelinks{display:flex;flex-wrap:wrap;gap:var(--space-5);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-sm)}
.routelinks a{color:var(--capabi-navy);border-bottom:2px solid var(--capabi-orange);padding-bottom:2px}
.routelinks a:hover{color:var(--capabi-orange)}

/* "Waarom CAPABI": beeld loopt mee met de hoogte van de tekstkolom,
   anders oogt een 4/3-kader nietig naast zeven opsommingsregels */
.g2-stretch{align-items:stretch}
.voordelenbeeld{height:100%}
.voordelenbeeld>.beeld{height:100%;aspect-ratio:auto!important;min-height:460px;background:rgba(255,255,255,.06)}
.bindnoot--inverse p{color:var(--navy-200)}
@media (max-width:1000px){.voordelenbeeld>.beeld{min-height:0;aspect-ratio:4 / 3!important}}

/* standaard hero-marges (stonden eerst inline in home.jsx) */
.hero-pad{padding:104px var(--gutter) 112px}

/* desktop: de hero vult exact één scherm, zodat je er met één scroll doorheen bent
   en meteen in de volgende sectie landt in plaats van verder door de hero te scrollen */
@media (min-width:1001px){
  .hero-video{min-height:calc(100vh - var(--headerh));display:flex;align-items:center}
  .hero-video>.cnt{width:100%}
  .hero-pad{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  /* het snappunt ligt op de volgende sectie, niet op de hero zelf: omlaag scrollen
     trekt je netjes de sectie in, omhoog blijf je vrij naar boven scrollen */
  html{scroll-snap-type:y proximity}
  .hero-video + section{scroll-snap-align:start;scroll-margin-top:var(--headerh)}
}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* hero-inhoud ademt mee met de schermhoogte, zodat hij op één scherm blijft */
.herokolom{gap:var(--space-6)}
@media (min-width:1001px){
  /* één bron voor de hero-marge, zodat de fotolimiet hieronder niet uit de pas loopt */
  .hero-video{--heropad:clamp(var(--space-5),4vh,var(--space-12))}
  .hero-pad{padding:var(--heropad) var(--gutter)}
  .herokolom{gap:clamp(var(--space-3),1.9vh,var(--space-6))}
}

/* staande hero-foto mag nooit hoger worden dan wat er binnen één scherm past */
@media (min-width:1001px){
  .herophoto figure>div{max-height:calc(100vh - var(--headerh) - 2 * var(--heropad))}
}

/* "Zo werkt samenwerken": zes gelijkwaardige onderdelen, geen stappenplan */
.samenwerkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10) var(--space-8);margin-top:var(--space-10)}
.samenwerk{display:flex;flex-direction:column;gap:8px;padding-top:var(--space-5);border-top:3px solid var(--capabi-orange)}
.samenwerknr{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);color:var(--capabi-orange)}
.samenwerk h3{font-size:var(--text-lg)}
.samenwerk p{font-size:var(--text-sm);color:var(--text-muted)}

/* vergelijkingsrijen op de werkvormkaarten */
.vormrijen{margin:auto 0 0;padding-top:var(--space-4);border-top:1px solid var(--border-subtle);
  display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4);font-size:var(--text-sm)}
.vormrijen dt{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);align-self:center}
.vormrijen dd{margin:0;color:var(--capabi-navy)}

@media (max-width:1000px){.samenwerkgrid{grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-6)}}
@media (max-width:640px){.samenwerkgrid{grid-template-columns:1fr}}

/* "Jij blijft ondernemer": groot staand beeld naast een korte stelling en vier
   punten in een 2x2-raster, zodat het niet als één lap tekst leest */
.ondernemer{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--space-16);align-items:stretch}
.ondernemerbeeld{height:100%}
.ondernemerbeeld>.beeld{height:100%;aspect-ratio:auto!important;min-height:520px}
.ondernemerlead{margin-top:var(--space-6);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(var(--text-lg),1.5vw,var(--text-2xl));line-height:var(--leading-snug);
  color:var(--capabi-navy);max-width:32ch}
.ondernemerpunten{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-10)}
.ondernemerpunten>div{display:flex;flex-direction:column;gap:6px;padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}
.ondernemerpunten h3{font-size:var(--text-base)}
.ondernemerpunten p{font-size:var(--text-sm);color:var(--text-muted)}
@media (max-width:1000px){
  .ondernemer{grid-template-columns:1fr;gap:var(--space-8)}
  .ondernemerbeeld>.beeld{min-height:0;aspect-ratio:16 / 10!important}
}
@media (max-width:640px){.ondernemerpunten{grid-template-columns:1fr;gap:var(--space-6)}}

/* "Wat je aan ons hebt" op de zzp-pagina: breed beeld over de volle breedte met de
   punten in een rij eronder. Bewust een andere compositie dan de secties erboven,
   die allebei tekst-naast-beeld zijn */
.waarombeeld{margin-top:var(--space-10)}
.waaromgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-10)}
.waaromgrid>div{display:flex;flex-direction:column;gap:10px;padding-top:var(--space-4);border-top:3px solid var(--capabi-orange)}
.waaromgrid p{font-size:var(--text-sm);color:var(--text-body)}
@media (max-width:1000px){
  .waaromgrid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .waarombeeld>.beeld{aspect-ratio:2 / 1!important}
}
@media (max-width:640px){
  .waaromgrid{grid-template-columns:1fr}
  .waarombeeld>.beeld{aspect-ratio:16 / 10!important}
}

/* "Wat heb je aan CAPABI?" op de werkzoekendenpagina: vier ruime genummerde regels.
   Bewust anders dan de gelijknamige sectie op de zzp-pagina */
.argumenten{display:flex;flex-direction:column}
.argumenten>div{display:flex;gap:var(--space-6);align-items:baseline;padding:var(--space-6) 0;border-top:1px solid var(--border-subtle)}
.argumenten>div:last-child{border-bottom:1px solid var(--border-subtle)}
.argumentnr{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--capabi-orange);min-width:34px}
.argumenten p{font-size:var(--text-lg);color:var(--capabi-navy);line-height:var(--leading-snug)}

/* eigen kopje voor BIND binnen "Wat ons anders maakt" */
.bindblok{margin-top:var(--space-10);padding:var(--space-8);background:#fff;
  border-left:4px solid var(--capabi-orange);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-10);flex-wrap:wrap}
.bindblok h3{font-size:var(--text-2xl);margin:6px 0 8px}
.bindblok p{max-width:60ch;color:var(--text-body)}
.bindlabel{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}

/* regiokaart: vereenvoudigde kaart met pinnen, gekoppeld aan de lijst ernaast */
.regiokaart{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-16);align-items:start}
.regiokaart-vlak svg{width:100%;max-width:360px;height:auto;display:block;overflow:visible}
.nl-land{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.28);stroke-width:1.2;stroke-linejoin:round}
.nl-water{fill:var(--capabi-navy)}
.regiopin{cursor:pointer}
.pinstip{fill:var(--capabi-orange);stroke:#fff;stroke-width:1.5;transition:var(--transition-control)}
.pinkern{fill:#fff}
.pinring{fill:rgba(232,119,34,.25)}
.regiopin--aan .pinstip{r:9}
.pinnaam{fill:#fff;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:9px;
  opacity:0;transition:var(--transition-control);paint-order:stroke;stroke:var(--capabi-navy);stroke-width:3px}
.regiopin--aan .pinnaam{opacity:1}
.kaartnoot{margin-top:var(--space-5);font-size:var(--text-xs);color:var(--navy-300);max-width:320px}

.regiolijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.regiolijst button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  border-top:1px solid var(--border-inverse);padding:var(--space-5) var(--space-4) var(--space-5) 0;
  display:flex;flex-direction:column;gap:4px;transition:var(--transition-control)}
.regiolijst li:last-child button{border-bottom:1px solid var(--border-inverse)}
.regiolijst button:hover,.regiolijst button.aan{background:rgba(255,255,255,.05);padding-left:var(--space-4)}
.regiolijst button:focus-visible{outline:2px solid var(--capabi-orange);outline-offset:-2px}
.regionaam{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:#fff}
.regiokantoor{font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}
.regioplaatsen{font-size:var(--text-sm);color:var(--navy-200)}

@media (max-width:1000px){
  .regiokaart{grid-template-columns:1fr;gap:var(--space-10);justify-items:center}
  .regiokaart-vlak svg{max-width:300px;margin:0 auto}
  .regiolijst{width:100%}
}

/* expliciete keuze bovenaan het contactformulier: de pagina bedient twee doelgroepen */
.rolkeuze{border:0;margin:0 0 var(--space-8);padding:0 0 var(--space-6);border-bottom:1px solid var(--border-subtle)}
.rolkeuze legend{padding:0;margin-bottom:var(--space-4);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange)}
.rolopties{display:flex;gap:var(--space-8);flex-wrap:wrap}
.rolnoot{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--text-muted)}

/* contractvorm-tag: vaste kleur per vorm, zodat een lijst snel te scannen is */
.typetag{display:inline-flex;align-items:center;padding:4px 10px;font-family:var(--font-display);
  font-weight:var(--weight-bold);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;white-space:nowrap;border:1px solid currentColor}
.typetag--zzp{color:#B4530A;background:#FDF0E4}
.typetag--deta{color:var(--capabi-navy);background:var(--navy-050)}
.typetag--vast{color:#1F6B4B;background:#E8F4EE}
.typetag--overig{color:var(--text-muted);background:var(--surface-subtle)}
@media (min-width:641px) and (max-width:1000px){.filterbar{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------------------
 * Tekst die rechtstreeks in de sectie wordt bewerkt
 *
 * WordPress levert voor koppen, alinea's en opsommingen zijn eigen elementen.
 * Die krijgen hier dezelfde opmaak als de handgeschreven varianten, zodat de
 * voorkant er precies hetzelfde uitziet als voorheen.
 * ------------------------------------------------------------------------- */

/* Opsomming: het pijltje stond eerst als los element in de regel, nu tekenen we
   het met CSS zodat een gewone opsomming van WordPress volstaat. */
.benefitlist--blok ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.benefitlist--blok ul li{position:relative;padding-left:calc(10px + var(--space-4))}
.benefitlist--blok ul li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  background:var(--capabi-orange);clip-path:polygon(0 0,100% 50%,0 100%)}
.navy .benefitlist--blok ul li{color:var(--navy-200)}

/* Eisen en "wat je van ons krijgt" op een vacature komen uit een editor, dus er
   kunnen alinea's tussen de opsomming staan. De chevrons komen van
   .benefitlist--blok hierboven; dit regelt alleen de ruimte tussen de blokken.
   Nodig omdat base.css p{margin:0} zet, dus de gap doet het werk — net zoals bij
   .benefitlist zelf.

   De margin-regel vervangt `.g2-detail h2 + .benefitlist` uit componenten.css: het
   element na de kop is nu een div in plaats van de ul. */
.vacature-lijst{display:flex;flex-direction:column;gap:var(--space-4)}
.g2-detail h2 + .vacature-lijst{margin-top:var(--space-6)}
/* Een genummerde lijst komt niet vaak voor, maar mag er niet ongestyled uitzien. */
.vacature-lijst ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--space-4)}
/* Het extra blok mag zonder kop. Dan valt de 48px van `h2 ~ h2` weg en zou het tegen
   het blok erboven aan komen; 32px houdt ze van elkaar gescheiden. */
.vacature-lijst + .vacature-lijst{margin-top:var(--space-8)}

/* Kaartje bij de herofoto: de kop is nu een echte kop in plaats van een div. */
.heroplate h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  line-height:inherit;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--capabi-orange);margin-bottom:8px}

/* De tekstkolom van "Waarom CAPABI" heette eerst een naamloze div. */
.waaromkolom{display:flex;flex-direction:column;min-width:0}

/* Verwijzing onder de BIND-noot. */
.bindnoot-link{margin-top:var(--space-2)}

/* De introtekst van de hero staat nu als gewone alinea in de kolom. */
.herokolom > p{color:var(--navy-200);font-size:var(--text-lg);max-width:520px}

/* Een foto die in de editor te vervangen is, komt als <figure> binnen. Die moet het
   beeldkader precies vullen, net als een losse afbeelding dat deed.
   WordPress schrijft bij een foto zijn eigen maten inline mee zodra iemand hem
   versleept of een formaat kiest. Die mogen de uitsnede van het ontwerp niet
   overrulen, vandaar de !important: de verhouding van het kader is leidend, de foto
   wordt daarin bijgesneden. */
.beeld figure{margin:0!important;display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;aspect-ratio:auto!important}
.beeld figure img{width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;aspect-ratio:auto!important;display:block}
.beeld figure img{object-position:var(--beeld-positie,center)}

/* Genummerde argumenten als gewone opsomming. Het nummer komt uit een teller in de
   opmaak, zodat de redacteur alleen de tekst typt en de nummering nooit scheef loopt. */
.argumenten--blok ul,.argumenten--blok ol{list-style:none;margin:0;padding:0;counter-reset:capabi-arg}
.argumenten--blok li{counter-increment:capabi-arg;display:flex;gap:var(--space-6);align-items:baseline;
  padding:var(--space-6) 0;border-top:1px solid var(--border-subtle);
  font-size:var(--text-lg);color:var(--capabi-navy);line-height:var(--leading-snug)}
.argumenten--blok li:last-child{border-bottom:1px solid var(--border-subtle)}
.argumenten--blok li::before{content:counter(capabi-arg,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);
  color:var(--capabi-orange);min-width:34px;
  /* het nummer stond eerder in een span die de regelafstand van de body erfde; de
     tekst ernaast is krapper gezet. Dat verschil bepaalt de hoogte van de rij, dus
     het nummer houdt hier zijn eigen, ruimere regelafstand. */
  line-height:var(--leading-relaxed)}

/* ---------------------------------------------------------------------------
 * Secties van de zzp-pagina, opgebouwd uit blokken
 * ------------------------------------------------------------------------- */

/* Samenwerkingsafspraken: het nummer stond eerst als tekst in de opmaak. Nu telt de
   stylesheet, zodat een afspraak erbij of eraf de nummering niet scheeftrekt. */
.samenwerkgrid--blok{counter-reset:capabi-afspraak}
.samenwerkgrid--blok .samenwerk{counter-increment:capabi-afspraak}
.samenwerkgrid--blok .samenwerk::before{content:counter(capabi-afspraak,decimal-leading-zero);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-label);color:var(--capabi-orange);line-height:var(--leading-relaxed)}

/* De tekstkolom naast het grote beeld heette eerst een naamloze div. Bewust geen
   flexkolom: dan zouden marges niet meer samenvallen en zou de kolom net anders
   uitvallen dan voorheen. Alleen min-width, zodat lange woorden het raster niet
   oprekken. */
.ondernemerkolom{min-width:0}
/* De losse alinea in die kolom is de stelling. */
.ondernemerkolom > p{margin-top:var(--space-6);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(var(--text-lg),1.5vw,var(--text-2xl));line-height:var(--leading-snug);
  color:var(--capabi-navy);max-width:32ch}

/* De voordelen naast elkaar, met het pijltje boven de tekst. */
.waaromgrid--blok{display:block;margin-top:var(--space-10)}
.waaromgrid--blok ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.waaromgrid--blok li{display:flex;flex-direction:column;gap:10px;padding-top:var(--space-4);
  border-top:3px solid var(--capabi-orange);font-size:var(--text-sm);color:var(--text-body)}
.waaromgrid--blok li::before{content:"";width:10px;height:10px;flex:0 0 auto;
  background:var(--capabi-orange);clip-path:polygon(0 0,100% 50%,0 100%)}
@media (max-width:1000px){.waaromgrid--blok ul{grid-template-columns:1fr 1fr;gap:var(--space-6)}}
@media (max-width:640px){.waaromgrid--blok ul{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
 * Secties van de opdrachtgeverspagina, opgebouwd uit blokken
 * ------------------------------------------------------------------------- */

/* Proposities: het nummer stond eerst als tekst in de opmaak; nu telt de stylesheet. */
.proposities--blok{counter-reset:capabi-prop}
.proposities--blok .propositie{counter-increment:capabi-prop}
.proposities--blok .propositie::before{content:counter(capabi-prop,decimal-leading-zero);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-4xl);
  color:var(--capabi-orange);line-height:1}

/* De tekstkolom naast een foto heette eerst een naamloze div. Geen flex, zodat de
   marges tussen de onderdelen net zo samenvallen als voorheen. */
.tekstkolom{min-width:0}

/* De kop van een sectie zit in een eigen omhulsel, zodat hij samen met zijn knoppen
   één kolom vormt in een raster. Buiten een raster gedraagt het zich als gewone
   stroom; alleen als het zelf de kolom is, moet het meeschalen in de hoogte. */
.kopkolom{min-width:0}
.g2 > .kopkolom,.g2-top > .kopkolom,.g2-stretch > .kopkolom{display:flex;flex-direction:column}

/* ---------------------------------------------------------------------------
 * ACF wikkelt InnerBlocks in een eigen div
 * ------------------------------------------------------------------------- */

/* Sinds WordPress 7 zet ACF de inhoud van een sectie in een extra
   `div.acf-innerblocks-container`. Dat breekt elke layout in dit thema, want een
   grid en een flexbox lijnen alleen hun *directe* kinderen uit: het grid van de
   hero heeft twee kolommen, maar kreeg één kind met alles erin. Op de homepage
   alleen al zaten dertien layouts daardoor in elkaar.
   
   `display:contents` laat de wrapper geen box maken, waardoor zijn kinderen weer
   items van de grootouder worden — precies de structuur waarop het thema is
   gebouwd. Eén regel in plaats van elke sectie herschrijven, en het blijft goed
   als ACF de wrapper ooit weer weglaat: dan matcht deze regel niets.

   LET OP: dit bestand wordt via add_editor_style() ook in de editor geladen, en
   daar heeft die wrapper juist wél een echte box nodig voor slepen en het plusje.
   `editor.css` draait deze regel daarom terug. Verplaats hem niet naar
   componenten.css zonder dat mee te nemen. */
.acf-innerblocks-container{display:contents}