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 104px 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}}