/* Gedeelde basis voor de drie premium richtingen van de Group-home (07-11-2026). */
@font-face{font-family:"Mozilla Text";src:url(assets/fonts/mt-300.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Mozilla Text";src:url(assets/fonts/mt-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Mozilla Text";src:url(assets/fonts/mt-700.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--navy:#2C2F7B;--diep:#14163F;--inkt:#101117;--papier:#F4F3EF;--wit:#fff;--lijn:rgba(16,17,23,.14);--zacht:#5B5C6E;
  --works:#3B73AD;--internationals:#472260;--academy:#F18825;--professionals:#6DB9A0;--vakmeesters:#DDC843;--personeelsdiensten:#A42545;
  --rand:clamp(20px,5vw,96px);--max:1520px;--e:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Mozilla Text",system-ui,sans-serif;color:var(--inkt);background:var(--papier);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.kop{font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.kop .licht{display:block;font-weight:300}
.klein{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.kleurlijn{display:flex;height:8px}.kleurlijn i{flex:1}
.kleurlijn i:nth-child(1){background:var(--works)}.kleurlijn i:nth-child(2){background:var(--internationals)}.kleurlijn i:nth-child(3){background:var(--academy)}
.kleurlijn i:nth-child(4){background:var(--professionals)}.kleurlijn i:nth-child(5){background:var(--vakmeesters)}.kleurlijn i:nth-child(6){background:var(--personeelsdiensten)}
.knop{display:inline-flex;align-items:center;gap:.8em;font:inherit;font-weight:700;font-size:1rem;padding:1.1em 1.7em;border:0;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.knop .pijl{transition:transform .35s var(--e)}.knop:hover .pijl{transform:translateX(5px)}
.tekstlink{font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:3px}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ai{position:absolute;z-index:4;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;background:rgba(16,17,23,.55);color:#fff}
/* binnenkomen bij scrollen; zonder script of met minder beweging staat alles er meteen */
html.js .op{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--e),transform 1.1s var(--e);transition-delay:var(--d,0s)}
html.js .op.zicht{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .op{opacity:1;transform:none;transition:none}}
/* voet */
.voet{background:var(--diep);color:#fff;padding:88px 0 0}
.voet .rij{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:64px}
.voet img{height:64px;width:auto}
.voet h3{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:16px}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-weight:300}
.voet .cert{border-top:1px solid rgba(255,255,255,.14);padding:24px 0;font-size:.8125rem;opacity:.6;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){.voet .rij{grid-template-columns:1fr 1fr}.voet .rij>div:first-child{grid-column:1/-1}}

/* Afwerking na de doorlichting van Kees en Ruud (08-11-2026): ankers niet onder de balk, zichtbare huidige pagina,
   menubalk op middelbreedte, onzichtbare motorlinks niet focusbaar, tikdoelen van 44 px op mobiel. */
[id]{scroll-margin-top:124px}
li[id]{scroll-margin-top:110px}
.balk nav a[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 currentColor;padding-bottom:4px}
.balk nav a{white-space:nowrap}
@media (min-width:901px) and (max-width:1100px){.balk nav{gap:20px!important;font-size:.875rem!important}.balk .knop.lang{padding:.7em 1em;font-size:.875rem}}
.motor .uitleg div:not(.aan) a{visibility:hidden}
.tb2 small,.vorm small{display:block}
@media (max-width:900px){
  [id]{scroll-margin-top:100px}
  li[id]{scroll-margin-top:96px}
  .menuknop{min-height:44px}
  .fv .fo a,.fv .fo span>a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  .fv .fo span{display:flex;flex-wrap:wrap;column-gap:18px}
  .f2l a{display:flex;align-items:center;min-height:48px}
  .motor .uitleg a,.werk a,.vest a,.ef a,.vorm .klein2 a{display:inline-flex;align-items:center;min-height:44px}
}

/* Afwerking na de tweede doorlichting (08-11-2026) */
.blad.wit{background:var(--papier)!important;border-top:1px solid rgba(16,17,23,.12)}
@media (max-width:900px){
  .motor{padding-top:32px!important}
  .motor .wrap{padding-top:0!important}
  .mob div p{opacity:1!important;color:rgba(255,255,255,.9)}
  .fv .fo span:first-child{display:block}
  .fv .fo span:first-child a{display:inline-block;min-height:0;padding:12px 0}
  .fv .fo span:last-child{display:flex;flex-wrap:wrap;column-gap:18px}
}

/* Afwerking na de derde doorlichting (08-11-2026): koppen in de navy zone, leesbare werkwoorden, geen botsende labels */
.motor .lijn button span{background:rgba(20,22,63,.82);padding:4px 0;color:#fff}
.mb-strook span{font-size:.75rem!important;hyphens:manual;line-height:1.25}
.plaats{text-align:left!important}
.groep:first-of-type{border-top:0!important}
@media (min-width:901px){
  .pk3 .pk-beeld{width:56%!important}
  .pk3.metbeeld::after{background:linear-gradient(180deg,rgba(20,22,63,.85) 0,rgba(20,22,63,0) 170px),linear-gradient(90deg,rgba(20,22,63,.94) 0%,rgba(20,22,63,.7) 40%,rgba(20,22,63,0) 62%),linear-gradient(0deg,rgba(20,22,63,.5),rgba(20,22,63,0) 30%)!important}
  .pk2 h1{font-size:clamp(2.6rem,4.6vw,4.4rem)!important}
  .pk2-beeld,.pk2::before{width:54%!important}
  .pk2-ai{top:450px!important}
}

/* Laatste afwerking vóór de interne preview (08-11-2026): op mobiel het beeld als strook boven de kop, geen kop over gezichten */
@media (max-width:900px){
  .pk3.metbeeld{display:block;min-height:0;padding-top:372px!important}
  .pk3 .pk-beeld{height:340px!important;top:0}
  .pk3.metbeeld::after{background:linear-gradient(180deg,rgba(20,22,63,.85) 0,rgba(20,22,63,0) 110px,rgba(20,22,63,0) 250px,var(--diep) 340px,var(--diep) 100%)!important}
  .pk3 .pk-ai{top:300px!important;bottom:auto!important}
  .pk2{padding-top:372px!important}
  .pk2-beeld,.pk2::before{height:340px!important}
  .pk2::before{background:linear-gradient(180deg,rgba(20,22,63,.85) 0,rgba(20,22,63,0) 110px,rgba(20,22,63,0) 250px,var(--diep) 340px)!important}
  .pk2-ai{top:300px!important}
}
.splits .stap b{min-height:2.5em}
.ckaart{padding-bottom:40px!important}