/* Gedeelde stijl van de Academy-site (12-11-2026, uit de inline stijl van index, privacy en 404 gehaald).
   Pagina-eigen stijl blijft inline in de pagina zelf. */
body{background:var(--diep);color:#fff}
.balk{position:fixed;inset:0 0 auto;z-index:20;transition:background .5s}
.balk.vast{background:var(--diep)}
.balk .wrap{display:flex;align-items:center;gap:44px;height:108px}
.balk img{height:62px}
.balk nav{display:flex;gap:34px;margin-left:auto;font-size:.9375rem}
.balk nav a{opacity:.9;transition:opacity .2s}.balk nav a:hover{opacity:1}
.balk .knop{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);padding:.9em 1.4em;font-size:.9375rem}
.balk .knop:hover{background:#fff;color:var(--diep)}
.hero{position:relative;height:100vh;height:100svh;min-height:700px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(1.14);animation:zoom 20s linear forwards}
@keyframes zoom{to{transform:scale(1.02)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,63,.7) 0,rgba(20,22,63,0) 140px),linear-gradient(90deg,rgba(20,22,63,.92) 0%,rgba(20,22,63,.62) 33%,rgba(20,22,63,0) 56%),linear-gradient(0deg,rgba(20,22,63,.45),rgba(20,22,63,0) 28%)}
.hero .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:11vh}
.regels{font-size:clamp(1.4rem,2.1vw,2rem);font-weight:300;line-height:1.35}
.regels span{display:block;opacity:0;transform:translateY(16px);animation:in 1.2s var(--e) forwards}
.regels span:nth-child(2){animation-delay:.8s}
@keyframes in{to{opacity:1;transform:none}}
.hero h1{font-size:clamp(3.2rem,5.4vw,5.61rem);max-width:12.5em}
.hero h1 span{display:block}
.hero h1 span.licht{font-weight:300}
.hero .missie{margin-top:28px;font-size:clamp(1.15rem,1.5vw,1.375rem);font-weight:300;line-height:1.5;max-width:46ch}
.hero .missie b{font-weight:700}
.deuren{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.deuren a{display:inline-flex;align-items:center;gap:14px;font-weight:700;padding:1.15em 1.6em;transition:background .3s,color .3s}
.deuren .wg{background:#fff;color:var(--diep)}
.deuren .wz{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.deuren .wz:hover{background:#fff;color:var(--diep)}
.deuren small{font-weight:300;opacity:.9}
@media (prefers-reduced-motion:reduce){.hero h1 span,.hero .missie,.deuren{opacity:1;transform:none;animation:none}.hero img{animation:none;transform:none}}
.waarom{padding:110px 0}
.waarom .wrap{display:grid;grid-template-columns:1fr;gap:28px}
.waarom p.groot{font-size:clamp(1.9rem,3.2vw,3.2rem)!important;max-width:30ch!important}
.waarom .klein{opacity:.6;padding-top:12px}
.waarom p.groot{font-size:clamp(1.5rem,2.3vw,2.2rem);font-weight:300;line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.waarom p.groot b{font-weight:700}
.waarom p.missie{margin-top:28px;font-weight:300;font-size:1.0625rem;line-height:1.6;opacity:.65;max-width:52ch}
/* De zes werkwoorden als scrollmotor */
.motor{position:relative;height:calc(6 * 38vh + 100vh);background:var(--diep)}
.motor .podium{--bg:var(--navy);--tk:#fff;background:var(--bg);color:var(--tk);transition:background .8s var(--e),color .6s}
.motor .podium.licht{--bg:#F4F3EF;--tk:#101117}
.motor .podium.licht .vakman::after{background:none}
.motor .podium{position:sticky;top:0;height:100vh;overflow:hidden}
.motor .vakman{position:absolute;right:0;top:0;bottom:52px;width:44%;}
.motor .vakman img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transform:scale(1.05);transition:opacity .9s var(--e),transform 2.2s var(--e)}
.motor .vakman img.aan{opacity:1;transform:none}
.motor .vakman::after{content:none}
.motor .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
.motor .klein{opacity:.7}
.motor .teller{font-variant-numeric:tabular-nums}
.woorden{position:relative;height:clamp(6.5rem,13.5vw,14rem);margin-top:24px}
.woorden span.wit,.mob div.wit b{-webkit-text-stroke:clamp(1px,.02em,2.5px) #fff;paint-order:stroke fill}
.woorden span.paars,.mob div.paars b{-webkit-text-stroke:clamp(1.5px,.03em,3.5px) #fff}
.woorden span{position:absolute;left:0;top:0;font-size:clamp(5rem,10.5vw,11.5rem);font-weight:700;letter-spacing:-.055em;line-height:1;color:var(--c);opacity:0;transform:translateY(40%);transition:opacity .7s var(--e),transform .9s var(--e);white-space:nowrap}
.woorden span.aan{opacity:1;transform:none}
.woorden span.was{opacity:0;transform:translateY(-40%)}
.motor .uitleg{min-height:140px;margin-top:8px;position:relative}
.motor .uitleg div{position:absolute;left:0;top:0;opacity:0;transform:translateY(10px);transition:opacity .5s var(--e),transform .6s var(--e);max-width:40ch}
.motor .uitleg div.aan{opacity:1;transform:none;transition-delay:.15s}
.motor .uitleg b{display:block;font-size:1.25rem}
.motor .uitleg p{font-weight:300;font-size:1.1875rem;line-height:1.5;opacity:.85;margin-top:6px}
.motor .uitleg a{display:inline-block;margin-top:14px;font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.motor .lijn{position:absolute;left:0;right:0;bottom:0;display:flex;z-index:3}
.motor .lijn button{flex:1;position:relative;height:44px;border:0;padding:0;background:none;cursor:pointer;font:inherit;color:inherit}
.motor .lijn button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--c)}
.motor .lijn button::before{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .5s var(--e)}
.motor .lijn button.aan::before{transform:scaleX(1)}
.motor .lijn button span{position:absolute;left:50%;bottom:20px;margin-left:-50%;width:100%;text-align:center;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.motor .lijn button:hover span,.motor .lijn button.aan span{opacity:.75;transform:none}
.motor .lijn button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.wijzer{padding:150px 0;background:var(--diep)}
.wijzer h2{font-size:clamp(2.4rem,4vw,4.2rem);margin-bottom:56px}
.tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tegels a{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:190px;padding:28px 28px 24px;background:rgba(255,255,255,.045);overflow:hidden;transition:background .4s}
.tegels a::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c);transform-origin:left;transform:scaleX(.16);transition:transform .6s var(--e)}
.tegels a:hover{background:rgba(255,255,255,.09)}
.tegels a:hover::before{transform:scaleX(1)}
.tegels .v{font-size:clamp(1.6rem,2.2vw,2.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;max-width:15ch}
.tegels .o{display:flex;justify-content:space-between;align-items:end;gap:16px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tegels .o em{font-style:normal;opacity:.65;font-weight:300;letter-spacing:.06em;text-transform:none;font-size:.9375rem}
.tegels .pijl{font-size:1.4rem;transition:transform .35s var(--e)}
.tegels a:hover .pijl{transform:translateX(6px)}
.slot{position:relative;padding:min(38vh,360px) 0 96px;overflow:hidden;background:var(--diep)}
.slot .slotbeeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.slot::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,22,63,.92) 0%,rgba(20,22,63,.6) 40%,rgba(20,22,63,0) 70%),linear-gradient(0deg,rgba(20,22,63,1) 0%,rgba(20,22,63,.85) 28%,rgba(20,22,63,0) 58%)}
@media (max-width:900px){.slot{padding-top:62vw}.slot .slotbeeld{height:78vw;object-position:72% 50%}.slot::before{background:linear-gradient(0deg,var(--diep) calc(100% - 78vw),rgba(20,22,63,0) calc(100% - 40vw))}}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 85%;opacity:.85;transform:scale(1.12) translateY(var(--p,0px))}
.slot::after{content:none}
.slot .wrap{position:relative;z-index:2}
.slot h2{font-size:clamp(2.8rem,5.2vw,5.61rem);max-width:24ch}
.slot .rij{margin-top:48px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.slot .knop{background:#fff;color:var(--diep)}
.slot .tel{font-size:1.5rem;font-weight:700}
.slot .werk{margin-top:28px;font-weight:300;opacity:.8}
.slot .werk a{font-weight:700;border-bottom:1.5px solid currentColor}
@media (max-width:900px){
  .balk nav{display:none}.balk img{height:60px}.balk .wrap{height:92px}
  .menuknop{margin-left:auto;font:inherit;font-weight:700;color:#fff;background:none;border:1.5px solid rgba(255,255,255,.6);padding:.7em 1.1em;cursor:pointer}
  body.menu-open .balk nav{display:flex;position:fixed;inset:92px 0 0;flex-direction:column;gap:22px;padding:40px var(--rand);background:var(--diep)}
  body.menu-open .balk nav a{font-size:2rem;font-weight:700;opacity:1}
  body.menu-open{overflow:hidden}
  .hero h1{font-size:3.1rem}
  .deuren a{width:100%;justify-content:space-between}
  .waarom{padding:96px 0 72px}.waarom .wrap{grid-template-columns:1fr;gap:20px}
  .motor{height:auto;padding:88px 0 0}
  .motor .podium,.motor .podium.licht{--bg:var(--navy);--tk:#fff}
  .motor .podium{position:relative;height:auto;overflow:visible}
  .motor .vakman{display:none}
  .mob div img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px}
  .motor .vakman::after{background:linear-gradient(0deg,var(--navy),rgba(44,47,123,0) 50%)}
  .motor .wrap{height:auto;display:block;padding-top:24px;padding-bottom:72px}
  .motor .podium .wrap{order:-1}
  .woorden,.motor .uitleg,.motor .kopregel-dt{display:none}
  .mob{display:grid;gap:8px;margin-top:28px}
  .mob div{padding:22px 0}
  .mob div.op-blauw{background:var(--navy);color:#fff;box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax)}
  .mob div b{display:block;font-size:3.4rem;letter-spacing:-.05em;line-height:1;color:var(--c)}
  .mob div p{font-weight:300;opacity:.85;margin-top:8px;line-height:1.5}
  .mob div a{display:inline-block;margin-top:8px;font-weight:700;border-bottom:1.5px solid currentColor}
  .motor .lijn{position:relative}.motor .lijn button span{display:none}.motor .lijn button{height:24px}
  .wijzer{padding:96px 0}.tegels{grid-template-columns:1fr}.tegels a{min-height:0;gap:18px;padding:22px 22px 20px}
  .slot{padding:120px 0}
}
@media (min-width:901px){.mob{display:none}.kort{display:none}.menuknop{display:none}}
@media (max-width:900px){.lang{display:none}}
@media (prefers-reduced-motion:reduce){.woorden span,.motor .uitleg div{transition:none}}

.waarom .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:clamp(40px,6vw,120px)!important;align-items:center}
.kaart{margin:0;justify-self:end;width:100%;max-width:720px}
.kaart svg{width:100%;height:auto;display:block;overflow:visible}
.kaart .stippen{fill:#fff}
.kaart .rij{opacity:.08;transition:opacity .9s var(--e);transition-delay:calc(var(--r) * 14ms)}
.kaart.zicht .rij{opacity:.6}
.kaart .maas{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 5}
.kaart .vp{opacity:0;transition:opacity .8s var(--e);transition-delay:calc(1.1s + var(--i) * .25s)}
.kaart.zicht .vp{opacity:1}
.kaart .leider{stroke:rgba(255,255,255,.45);stroke-width:1}
.kaart text{fill:#fff;font:700 15px "Mozilla Text",system-ui,sans-serif;letter-spacing:.16em}
@media (prefers-reduced-motion:reduce){.kaart .rij{opacity:.6;transition:none}.kaart .vp{opacity:1;transition:none}}
@media (max-width:900px){.waarom .wrap{grid-template-columns:1fr!important}.kaart{justify-self:stretch;max-width:none;margin-top:8px}.kaart .rij{opacity:.6}.kaart .vp{opacity:1}.feitregel{flex-direction:column}.feitregel span+span::before{display:none}}
.feitregel{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.feitregel span{display:inline-flex;align-items:center;gap:10px}
.feitregel span+span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;margin-right:18px;margin-left:-18px}

.haspels{position:relative;height:92vh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.haspels img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.08);transition:transform 2.4s var(--e)}
.haspels:hover img{transform:scale(1.04)}
.haspels::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,22,63,.85) 0%,rgba(20,22,63,0) 45%),linear-gradient(180deg,rgba(20,22,63,.5) 0,rgba(20,22,63,0) 25%)}
.haspels .wrap{position:relative;z-index:2;width:100%;padding-bottom:72px}
.haspels .kop{font-size:clamp(2.4rem,4.6vw,4.6rem);color:#fff}
@media (max-width:900px){.haspels{height:70vh;min-height:420px}}

.slotrij{display:grid;grid-template-columns:1fr;gap:72px}
.adressen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px;border-top:1px solid rgba(255,255,255,.25);padding-top:28px}
.adressen li{font-weight:300;font-size:.9375rem;line-height:1.55;opacity:.9}
.adressen b{display:block;font-weight:700;font-size:1rem;margin-bottom:4px;opacity:1}
@media (max-width:900px){.slotrij{gap:40px}.adressen{grid-template-columns:1fr 1fr}}

/* Variant 3 (Dave, 08-11-2026): beeld groot, werkwoord wit, labelnaam in een vlakje; de kleur zit in het doek */
.motor .vakman{width:100%!important;bottom:52px}
.motor .vakman img{object-position:70% 45%}
.motor .vakman::after{content:""!important;position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,63,.92) 0%,rgba(20,22,63,.7) 35%,rgba(20,22,63,0) 65%)!important}
.motor .podium{background:var(--diep)!important}
.woorden span{color:#fff!important;-webkit-text-stroke:0!important}
.mob div b{color:#fff!important;-webkit-text-stroke:0!important}
.motor .uitleg b{display:inline-block!important;font-size:.8125rem!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;margin-bottom:6px}
.mob div strong{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;margin-right:6px}
.mob div.op-blauw{background:transparent!important;box-shadow:none!important}
.motor .uitleg div:nth-child(1) b{background:var(--works);color:#fff}.mob div:nth-child(1) strong{background:var(--works);color:#fff}.motor .uitleg div:nth-child(2) b{background:var(--internationals);color:#fff}.mob div:nth-child(2) strong{background:var(--internationals);color:#fff}.motor .uitleg div:nth-child(3) b{background:var(--academy);color:#101117}.mob div:nth-child(3) strong{background:var(--academy);color:#101117}.motor .uitleg div:nth-child(4) b{background:var(--professionals);color:#101117}.mob div:nth-child(4) strong{background:var(--professionals);color:#101117}.motor .uitleg div:nth-child(5) b{background:var(--vakmeesters);color:#101117}.mob div:nth-child(5) strong{background:var(--vakmeesters);color:#101117}.motor .uitleg div:nth-child(6) b{background:var(--personeelsdiensten);color:#fff}.mob div:nth-child(6) strong{background:var(--personeelsdiensten);color:#fff}
/* Slot: één regel voor het beeld, alle zes haspels in beeld */
.slot img.slotbeeld{transform:none!important;opacity:1!important;object-position:92% 70%!important}
@media (max-width:900px){.slot img.slotbeeld{object-position:100% 60%!important}.kaart text{font-size:26px}}

/* Waarom SOMA op papier: lucht tussen het blauw */
.waarom{background:var(--papier);color:var(--inkt)}
.waarom .klein{color:var(--navy)}
.kaart .stippen{fill:var(--navy)}
.kaart.zicht .rij{opacity:.5}
.kaart .maas{stroke:var(--navy)}
.kaart .leider{stroke:rgba(16,17,23,.35)}
.kaart text{fill:var(--inkt)}
.kaart .vp circle[fill="#fff"]{fill:var(--inkt)}
@media (max-width:900px){.kaart .rij{opacity:.5}}
.certs{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.certs .t{font-size:.8125rem;font-weight:300;margin-right:6px;opacity:.75}
.certs .c{font-size:.75rem;font-weight:700;letter-spacing:.1em;padding:7px 11px;border:1.5px solid currentColor;border-radius:2px}

.voet2{background:var(--diep);color:#fff;padding:96px 0 32px}
.v-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-bottom:64px}
.v-logo{height:84px;width:auto}
.v-contact{text-align:right;display:grid;gap:6px}
.v-tel{font-size:clamp(2rem,3.6vw,3.4rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.v-mail{font-weight:300;font-size:1.25rem;opacity:.9;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.v-adres{margin-bottom:56px;border-top:0!important;padding-top:0!important}
.v-labels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.v-labels .vl{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px 20px 24px 0;transition:background .35s}
.v-labels .vl::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--c);transition:height .4s var(--e)}
.v-labels .vl:hover::before{height:14px}
.v-labels .vl img{height:40px;width:auto;align-self:flex-start;margin-top:10px}
.v-labels .vl span{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.v-onder{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.8125rem;opacity:.75}
.v-links{display:flex;gap:24px;flex-wrap:wrap}
.v-links a:hover{opacity:1;text-decoration:underline}
@media (max-width:900px){.v-top{flex-direction:column;align-items:flex-start}.v-contact{text-align:left}.v-labels{grid-template-columns:1fr 1fr;row-gap:8px}.v-logo{height:64px}.voet2{padding-bottom:96px}}

.certs2{margin-top:14px;opacity:.6}
.waarom .wrap{align-items:center}
/* werkwoorden: beeld rechts zodat de mensen niet onder het woord staan */
.motor .vakman{width:70%!important;left:auto!important;right:0}
.motor .vakman img{object-position:50% 38%!important}
.motor .vakman::after{background:linear-gradient(90deg,var(--diep) 0%,rgba(20,22,63,.55) 22%,rgba(20,22,63,0) 50%)!important}
/* einde van de pagina: geen restruimte */
.slot{padding-bottom:64px}
@media (max-width:900px){.voet2{padding-bottom:32px}body:has(.vastknop.toon) .voet2{padding-bottom:96px}
 .hero::after{background:linear-gradient(0deg,rgba(20,22,63,.95) 0%,rgba(20,22,63,.75) 45%,rgba(20,22,63,.1) 75%)!important}.hero img{object-position:72% 30%!important}}
.waaromkop{font-size:clamp(2.4rem,4.2vw,4.4rem);color:var(--inkt)}
.waaromkop .licht{color:var(--navy)}
.waaromtekst{margin-top:28px;font-weight:300;font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.55;max-width:44ch}

/* voet optie 2 */
.fv{padding:80px 0 0}
/* geen tweede Group-logo in de voet: de vaste menubalk toont het al (Dave, 08-11-2026) */
.fv .ft{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:56px}
.fv .ft img{height:84px;width:auto}
.fv .ft a{font-weight:300;font-size:1.25rem;border-bottom:1px solid currentColor;padding-bottom:2px}
.fv .fa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.fv .fa li{font-weight:300;font-size:.9375rem;line-height:1.55}
.fv .fa b{display:block;font-weight:700;font-size:1rem;margin-bottom:4px}
.fv .fo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding:24px 0 28px;border-top:1px solid rgba(16,17,23,.14);font-size:.8125rem;opacity:.75}
.fv .fo span:last-child{display:flex;gap:24px}
.f2{background:var(--papier);color:var(--inkt)}
.f2l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:center;margin-top:56px;padding-top:40px;border-top:1px solid rgba(16,17,23,.14)}
.f2l img{height:42px;width:auto}
@media (max-width:900px){.fv .fa{grid-template-columns:1fr 1fr}.fv .ft img{height:64px}.f2l{grid-template-columns:1fr 1fr}body:has(.vastknop.toon) .fv{padding-bottom:72px}}
/* criticus ronde 14: geen naad in het fotovlak, kaartnamen binnen beeld op mobiel */
.motor .vakman::after{background:linear-gradient(90deg,var(--diep) 0%,var(--diep) 4%,rgba(20,22,63,.7) 30%,rgba(20,22,63,0) 60%)!important}
@media (max-width:900px){.kaart svg{width:70%;margin:0 auto;overflow:visible}.kaart text{font-size:22px!important}}
.aitegel{position:absolute;z-index:4;display:grid;place-items:center;width:30px;height:30px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;background:#101117;color:#fff}
.mfig{position:relative;margin:0}
.vastknop{display:none}
@media (max-width:900px){
  .vastknop{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(110%);transition:transform .45s var(--e);gap:8px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom,0px));background:var(--diep);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .vastknop a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:700}
  .vastknop .p{background:#fff;color:var(--diep)}
  .vastknop .t{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
  .vastknop.toon{transform:none}
  .hero .aitegel{bottom:auto!important;top:104px}
  .voet{padding-bottom:72px}
  .motor .lijn button::before{display:none}
}


/* Hero B (Dave 08-11-2026): vakman met de zes kleuren, ultrabreed beeld, kop op navy */
@media (min-width:901px){.hero img{object-position:100% 50%!important;transform:none!important;animation:none!important}.hero h1{max-width:11.5em}
.hero::after{background:linear-gradient(180deg,rgba(20,22,63,.75) 0,rgba(20,22,63,0) 150px),linear-gradient(90deg,rgba(20,22,63,.95) 0%,rgba(20,22,63,.85) 40%,rgba(20,22,63,.35) 62%,rgba(20,22,63,0) 75%),linear-gradient(0deg,rgba(20,22,63,.5),rgba(20,22,63,0) 28%)!important}}
@media (max-width:900px){.hero img{object-position:82% 50%!important}}

/* mensband (variant A, 08-11-2026) en motorbeeld zonder harde linkerrand, door tot de kleurlijn */
.mensband{background:var(--papier);color:var(--inkt);padding:110px 0}
.mb-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.mensband h2{font-size:clamp(2.2rem,3.6vw,3.6rem);max-width:20ch}
.mb-strook li{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.mb-strook b{margin-top:10px;font-size:.9375rem}
.mb-strook span{font-size:.8125rem;font-weight:300;color:var(--zacht)}
.mb-knop{margin-top:44px}
.mensband .licht{color:var(--navy)}
.mensband .knop{background:var(--navy);color:#fff}
.mb-strook{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.mb-strook img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--c)}
@media (min-width:901px){.motor .vakman{bottom:0!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}}
@media (max-width:900px){.mensband{padding:64px 0}.mb-strook{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}

.pk{position:relative;background:var(--diep);color:#fff;padding:200px 0 96px}
.pk h1{font-size:clamp(3rem,6vw,5.61rem)}
.pk p{margin-top:24px;font-weight:300;font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.5;max-width:48ch;opacity:.9}
.pk .kleurlijn{position:absolute;left:0;right:0;bottom:0}
.wijs{background:var(--papier);color:var(--inkt);padding:96px 0 120px}
.wijs .klein{color:var(--navy);margin-bottom:28px}
.wijs ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--inkt)}
.wijs li > a{display:grid;grid-template-columns:132px minmax(0,1fr) 220px 40px;gap:36px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(16,17,23,.14);transition:background .35s}
.wijs li > a:hover{background:rgba(255,255,255,.6)}
.wijs .duim{position:relative;width:132px;aspect-ratio:4/3;overflow:hidden}
.wijs .duim img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.wijs details summary:hover .duim img{transform:scale(1.06)}
.wijs .duim .aitegel{right:6px;bottom:6px;width:22px;height:22px;font-size:.55rem}
.wijs .sit{font-size:clamp(1.4rem,2.1vw,2.1rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.wijs .uit{display:block;margin-top:8px;font-weight:300;font-size:1.0625rem;color:var(--zacht)}
.wijs .lab{justify-self:start;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px}
.wijs .pijl{font-size:1.6rem;transition:transform .35s var(--e)}
.wijs li > a:hover .pijl{transform:translateX(6px)}
.samen{background:#fff;color:var(--inkt);padding:110px 0}
.samen .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:start}
.samen h2{font-size:clamp(2.2rem,3.6vw,3.6rem)}
.samen .licht{color:var(--navy)}
.samen p{margin-top:20px;font-weight:300;font-size:1.1875rem;line-height:1.55;max-width:44ch;color:var(--zacht)}
.samen .tel{display:block;margin-top:28px;font-size:1.75rem;font-weight:700}
.vorm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vorm label{display:block;font-size:.8125rem;font-weight:700;margin-bottom:6px}
.vorm input,.vorm textarea{width:100%;font:inherit;font-size:1rem;padding:14px 14px;border:1.5px solid rgba(16,17,23,.2);background:var(--papier)}
.vorm input:focus,.vorm textarea:focus{outline:none;border-color:var(--navy)}
.vorm .vol{grid-column:1/-1}
.vorm textarea{min-height:120px;resize:vertical}
.vorm .knop{background:var(--navy);color:#fff}
.vorm small{display:block;font-weight:300;color:var(--zacht);margin-top:10px}

/* uitklappende contactkaart */
.wijs details summary{list-style:none;display:grid;grid-template-columns:132px minmax(0,1fr) 220px 40px;gap:36px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(16,17,23,.14);cursor:pointer;transition:background .35s}
.wijs details summary::-webkit-details-marker{display:none}
.wijs details summary:hover{background:rgba(255,255,255,.6)}
.wijs details summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.wijs details summary .pijl{transition:transform .4s var(--e)}
.wijs details[open] summary .pijl{transform:rotate(180deg)}
.wijs details[open] summary{border-bottom-color:transparent}
.kaartje{display:grid;grid-template-columns:200px minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start;padding:8px 0 40px 168px;border-bottom:1px solid rgba(16,17,23,.14);animation:open .5s var(--e)}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.kaartje .portret{width:200px;height:200px;object-fit:cover}
.kaartje .klein{color:var(--navy);margin-bottom:10px}
.kaartje .wie b{display:block;font-size:1.75rem;letter-spacing:-.02em}
.kaartje .wie > span{display:block;margin-top:4px;font-weight:300;color:var(--zacht)}
.acties2{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.acties2 .knop{padding:.85em 1.2em;font-size:.9375rem}
.k1{background:var(--navy);color:#fff}
.k2{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 1.5px rgba(16,17,23,.3)}
.k2:hover{box-shadow:inset 0 0 0 1.5px var(--inkt)}
.naarlabel{display:inline-block;margin-top:18px;font-weight:700;font-size:.9375rem;border-bottom:1.5px solid currentColor}
.terug{background:#fff;padding:22px;display:grid;gap:6px}
.terug label{font-size:.75rem;font-weight:700;margin-top:6px}
.terug input{font:inherit;padding:11px 12px;border:1.5px solid rgba(16,17,23,.2);background:var(--papier)}
.terug .knop{margin-top:12px;justify-self:start}
.terug small{font-weight:300;color:var(--zacht)}
@media (max-width:900px){
  .wijs details summary{grid-template-columns:84px minmax(0,1fr) 24px;gap:8px 16px}
  .wijs details .lab{grid-column:2;grid-row:2}.wijs details summary .pijl{grid-column:3;grid-row:1}
  .kaartje{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:4px 0 28px}
  .kaartje .portret{width:96px;height:96px}
  .terug{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.kaartje{animation:none}}
@media (max-width:900px){
  .pk{padding:150px 0 72px}
  .wijs li > a{grid-template-columns:84px minmax(0,1fr) 24px;gap:8px 16px}
  .wijs .duim{width:84px}
  .samen .wrap,.vorm{grid-template-columns:1fr}
}

/* eerste scherm: zes mensen boven de kleurlijn */
.pk2{position:relative;background:var(--diep);color:#fff;padding:170px 0 0;overflow:hidden}
.pk2 h1{font-size:clamp(2.8rem,5.4vw,5rem)}
.pk2-beeld{position:absolute;top:0;right:0;width:62%;height:78%;object-fit:cover;object-position:72% 45%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.pk2::before{content:"";position:absolute;top:0;right:0;width:62%;height:78%;z-index:1;background:linear-gradient(90deg,var(--diep) 0%,rgba(20,22,63,.55) 30%,rgba(20,22,63,0) 60%),linear-gradient(0deg,var(--diep) 0%,rgba(20,22,63,0) 40%),linear-gradient(180deg,rgba(20,22,63,.7) 0,rgba(20,22,63,0) 140px)}
.pk2 .wrap{position:relative;z-index:2}
.pk2-ai{position:absolute;z-index:3;right:var(--rand);top:118px}
.pk2 .wrap>p{margin-top:18px;font-weight:300;font-size:clamp(1.1rem,1.4vw,1.3rem);max-width:46ch;opacity:.9}
.zes-m{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:56px}
.zes-m .t{display:flex;flex-direction:column;align-items:center;gap:4px}
.zes-m .lb{font-size:.8125rem!important;opacity:.7!important}
.lijn6{display:none}
.feit{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:22px}
.zes-m a{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 8px 30px;text-align:center;color:#fff}
.zes-m img{width:min(140px,10vw);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 4px var(--diep),0 0 0 6px var(--c);transition:transform .5s var(--e),box-shadow .4s}
.zes-m a:hover img,.zes-m a:focus-visible img{transform:translateY(-6px);box-shadow:0 0 0 4px var(--diep),0 0 0 9px var(--c)}
.zes-m b{font-size:1.125rem;line-height:1.2;min-height:2.4em;display:flex;align-items:flex-end;justify-content:center;text-wrap:balance}
.feit2{margin-top:22px;font-weight:700;font-size:1.0625rem;letter-spacing:.01em;color:#fff}
.feit2 span{white-space:nowrap}
.naarteam{margin-top:14px}.naarteam a{font-weight:700;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.6)}
.feit2 i{font-style:normal;opacity:.55;margin:0 .5em;font-weight:300}
.pk2 .wrap>p{text-wrap:pretty}
.pk2 h1 .r{display:block}
.samen p,.rij2 .uit{text-wrap:pretty}
.zes-m span{font-weight:300;font-size:.9375rem;opacity:.85}
.zes-m a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--c);transition:height .35s var(--e)}
.zes-m a:hover::after{height:14px}
/* rijen: de mens voorop */
.rij2{display:grid;grid-template-columns:136px minmax(0,1fr) 300px;gap:36px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(16,17,23,.14);scroll-margin-top:120px}
.rij2 .gezicht{width:136px;height:136px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 4px var(--papier),0 0 0 7px var(--c)}
.rij2 h2{font-size:clamp(1.4rem,2.1vw,2.05rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;max-width:24ch}
.rij2 .uit{display:block;margin-top:8px;font-weight:300;font-size:1.0625rem;color:var(--zacht)}
.rij2 .wie{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:1.0625rem}
.rij2 .wie img{display:none}
.rij2 .wie b{font-weight:700}
.rij2 .wie .fu{color:var(--zacht);font-weight:300}
.rij2 .lab2{white-space:nowrap;flex-basis:100%}
.rij2 .wie{flex-wrap:wrap;row-gap:4px}
.rij2 .wie b,.rij2 .wie .fu{white-space:nowrap}
.zes-m b{font-weight:700}
.lab2::before{width:10px!important;height:10px!important}
.contact2{display:grid;gap:8px;justify-items:start}
.contact2 .nr{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.contact2 .links{display:flex;gap:18px;font-weight:700;font-size:.9375rem}
.contact2 .links a,.contact2 .links button{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--navy);border-bottom:1.5px solid currentColor}
.contact2 .mob{display:none}
/* terugbellen met naam en gezicht */
.tb2{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:-8px 0 0 172px;padding:18px 22px;background:#fff;border-left:4px solid var(--c)}
.tb2[hidden]{display:none}
.tb2 img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.tb2 b{margin-right:8px}
.tb2 input{font:inherit;padding:11px 12px;border:1.5px solid rgba(16,17,23,.2);background:var(--papier);min-width:220px}
.tb2 input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px rgba(44,47,123,.2)}
.tb2 small{flex-basis:100%;color:var(--zacht)}
.weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* afsluiting in dezelfde papiertoon */
.wijs{padding-bottom:72px!important}
.samen{background:var(--papier)!important;padding:56px 0 40px!important}
.voet,footer.fv{padding-top:48px!important}
.samen .rijtje{display:flex;margin-top:22px}
.samen .rijtje img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 3px var(--papier);margin-left:-10px}
.samen .rijtje img:first-child{margin-left:0}
@media (max-width:900px){
  .pk2{padding-top:130px}
  .pk2 h1{font-size:2.5rem}
  .pk2-beeld,.pk2::before{width:100%;height:420px}
  .pk2-beeld{-webkit-mask-image:none;mask-image:none}
  .pk2::before{background:linear-gradient(180deg,rgba(20,22,63,.8) 0,rgba(20,22,63,0) 130px),linear-gradient(0deg,var(--diep) 0%,rgba(20,22,63,.75) 50%,rgba(20,22,63,.35) 100%)}
  .pk2-ai{top:104px}
  .zes-m{grid-template-columns:1fr;margin-top:32px;padding-bottom:28px}
  .zes-m a{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:10px 0}
  .zes-m a::after{display:none}
  .zes-m img{width:56px;box-shadow:0 0 0 3px var(--diep),0 0 0 5px var(--c)}
  .zes-m .t{align-items:flex-start;gap:2px}
  .zes-m b{min-height:0;justify-content:flex-start}
  .feit2{font-size:.9375rem;line-height:1.6}
  .wijs ol{border-top-color:rgba(16,17,23,.14)!important}
  .zes-m span{font-size:.875rem}
  .lijn6{display:flex;height:8px}.lijn6 i{flex:1;background:var(--c)}
  .wijs .feit{margin-bottom:16px}
  .rij2{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .rij2 .gezicht{display:none}
  .rij2 .wie img{display:block;grid-row:1/4;width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--c)}
  .rij2 .wie{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center}
  .rij2 .wie>*:not(img){grid-column:2}
  .rij2 h2{max-width:none}
  .rij2 .lab2,.rij2 .wie b,.rij2 .wie .fu{white-space:normal}
  .contact2{display:block;margin-top:4px}
  .contact2 .mob{margin-top:0!important}
  .wijs{padding-top:56px!important;padding-bottom:48px!important}
  .samen{padding:56px 0!important}
  .contact2 .nr{display:none}
  .contact2 .links{display:none}
  .contact2 .mob{display:flex;gap:8px;width:100%}
  .contact2 .mob .knop{flex:1;justify-content:center;padding:.85em .6em;font-size:.9375rem;white-space:nowrap;border:0;font-family:inherit;cursor:pointer}
  .tb2{margin-left:0}
}

.pk3{position:relative;background:var(--diep);color:#fff;padding:180px 0 96px}
.pk3 h1{font-size:clamp(2.8rem,5.4vw,5rem)}
.pk3 .wrap>p{margin-top:20px;font-weight:300;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.5;max-width:48ch;opacity:.9;text-wrap:pretty}
.pk3 .kleurlijn{position:absolute;left:0;right:0;bottom:0}
.pk3 .acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pk3 .knop.wit{background:#fff;color:var(--diep)}
.pk3 .knop.lijn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.blad{background:var(--papier);color:var(--inkt);padding:88px 0}
.blad.wit{background:#fff}
.blad h2.kop{font-size:clamp(2rem,3.4vw,3.2rem)}
.blad .licht{color:var(--navy)}
.blad .intro{margin-top:16px;font-weight:300;font-size:1.1875rem;line-height:1.55;max-width:56ch;color:var(--zacht)}
/* routes: één rij per situatie, labelkleur als lijn links */
.route{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--inkt)}
.route a{display:grid;grid-template-columns:6px minmax(0,1fr) 220px 32px;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(16,17,23,.14);transition:background .3s}
.route a:hover{background:rgba(255,255,255,.65)}
.route i{align-self:stretch;background:var(--c)}
.route h3{font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.route p{margin-top:6px;font-weight:300;font-size:1.0625rem;color:var(--zacht)}
.route .lab2{font-weight:700;font-size:.9375rem}
.route .pijl{font-size:1.5rem;transition:transform .3s var(--e)}
.route a:hover .pijl{transform:translateX(6px)}
/* drie kolommen */
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:44px}
.drie h3{font-size:1.5rem;letter-spacing:-.02em}
.drie p{margin-top:10px;font-weight:300;font-size:1.0625rem;line-height:1.55;color:var(--zacht)}
.drie .tel{display:block;margin-top:10px;font-size:1.5rem;font-weight:700;color:var(--inkt)}
/* vestigingen */
.vest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:44px;border-top:1px solid var(--inkt);padding-top:28px}
.vest b{display:block;font-size:1.25rem;margin-bottom:8px}
.vest span{display:block;font-weight:300;line-height:1.6}
.vest a{display:inline-block;margin-top:8px;font-weight:700;border-bottom:1.5px solid currentColor}
/* labels op Over SOMA */
.labels6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--inkt)}
.labels6 a{display:block;padding:26px 24px 30px 0;border-bottom:1px solid rgba(16,17,23,.14);position:relative}
.labels6 a::before{content:"";display:block;width:44px;height:6px;background:var(--c);margin-bottom:18px;transition:width .35s var(--e)}
.labels6 a:hover::before{width:88px}
.labels6 .ww{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht)}
.labels6 b{display:block;margin-top:6px;font-size:1.5rem;letter-spacing:-.02em}
.labels6 p{margin-top:8px;font-weight:300;color:var(--zacht);max-width:30ch}
.labels6 .naar{display:inline-block;margin-top:12px;font-style:normal;font-weight:700;font-size:.9375rem;border-bottom:1.5px solid currentColor}
.naarteam2{margin-top:36px}.naarteam2 a{font-weight:700;color:var(--navy);border-bottom:1.5px solid currentColor}
/* contact */
.kc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.kc .drie{grid-template-columns:1fr;gap:28px;margin-top:32px}
.vorm select{width:100%;font:inherit;font-size:1rem;padding:14px;border:1.5px solid rgba(16,17,23,.2);background:var(--papier)}
.vorm .klein2{font-size:.875rem;font-weight:300;color:var(--zacht)}
.vorm .klein2 a{border-bottom:1px solid currentColor}
.ef{margin-top:36px;padding:20px 22px;background:#fff;border-left:4px solid var(--navy)}
.ef a{font-weight:700;border-bottom:1.5px solid currentColor}
/* subpagina met beeld (doorlichting 08-11-2026): zelfde taal als de home */
.pk3.metbeeld{min-height:min(82vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.pk3 .pk-beeld{position:absolute;top:0;right:0;width:64%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
@media (max-width:900px){.pk3 .pk-beeld{width:100%;-webkit-mask-image:none;mask-image:none}}
.pk3.metbeeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,63,.7) 0,rgba(20,22,63,0) 140px),linear-gradient(90deg,rgba(20,22,63,.94) 0%,rgba(20,22,63,.66) 34%,rgba(20,22,63,0) 58%),linear-gradient(0deg,rgba(20,22,63,.5),rgba(20,22,63,0) 30%)}
.pk3.metbeeld .wrap{position:relative;z-index:2;width:100%}
.pk3 .pk-ai{position:absolute;right:var(--rand);bottom:30px;z-index:3}
.pk3 .kleurlijn{z-index:3}
/* verhaal op Over SOMA (variant B) */
.vb-label{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);border:1px dashed rgba(16,17,23,.35);padding:4px 9px;margin-bottom:18px}
.splits{margin-top:56px}
.splits svg{display:block;width:100%;height:120px}
.splits .rij6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.splits .stap{border-top:6px solid var(--c);padding-top:18px}
@media (min-width:901px){
  .splits .rij6{grid-template-rows:repeat(6,auto);row-gap:0}
  .splits .stap{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-items:start}
  .splits .stap b{align-self:start}
  .splits .stap .wie{align-self:end}
  .splits .stap .naar,.splits .stap img{justify-self:start}
}
.splits .stap img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 25%;margin-bottom:14px;box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--c)}
.splits .ww{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht)}
.splits .stap b{display:block;font-size:1.125rem;letter-spacing:-.02em}
.splits .stap p{margin-top:6px;font-weight:300;font-size:.9375rem;line-height:1.55;color:var(--zacht)}
.splits .stap .wie{font-size:.875rem;font-weight:700;color:var(--inkt);margin-top:8px}
.splits .naar{display:inline-block;margin-top:10px;font-weight:700;font-size:.875rem;border-bottom:1.5px solid currentColor}
.vr-slot{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:24px;font-size:1.375rem;font-weight:700}
.vr-slot .knop{background:var(--navy);color:#fff}
@media (max-width:900px){.splits svg{display:none}.splits .rij6{grid-template-columns:1fr;gap:28px}}
/* gezichtenstrook op Over SOMA */
.strook{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}
.strook img{width:100%;max-width:120px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--c)}
/* contactkanalen met icoon (Dave 08-11-2026: subtieler, icoontje) */
.kanalen{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:32px}
.kanalen.kol{flex-direction:column;gap:18px}
.kanaal{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:1.125rem;color:var(--inkt);min-height:44px}
.kanaal svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kanaal:hover{color:var(--navy)}
.kanaal.ef2{font-weight:300;font-size:1rem;color:var(--zacht)}
/* privacy */
.wrap.tekst{max-width:var(--max)}
.tekst>*{max-width:68ch}
.tekst h2{font-size:1.5rem;letter-spacing:-.02em;margin-top:36px;padding-top:28px;border-top:1px solid rgba(16,17,23,.12)}
.tekst h2:first-child{margin-top:0;padding-top:0;border-top:0}
.tekst h2{max-width:56rem!important}
.tekst p{margin-top:10px;font-weight:300;font-size:1.125rem;line-height:1.6;color:var(--zacht)}
.tekst a{border-bottom:1px solid currentColor;color:var(--navy)}
@media (max-width:900px){
  .pk3{padding:130px 0 72px}
  .pk3 h1{font-size:2.35rem;overflow-wrap:break-word}
  .pk3.metbeeld{min-height:640px}
  .pk3.metbeeld::after{background:linear-gradient(180deg,rgba(20,22,63,.8) 0,rgba(20,22,63,0) 130px),linear-gradient(0deg,rgba(20,22,63,.96) 0%,rgba(20,22,63,.8) 48%,rgba(20,22,63,.1) 78%)}
  .pk3 .pk-ai{bottom:auto;top:104px}
  .strook{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
  .blad{padding:60px 0}
  .route a{grid-template-columns:5px minmax(0,1fr) 24px;gap:8px 18px}
  .route .lab2{grid-column:2;grid-row:2}
  .route .pijl{grid-column:3;grid-row:1}
  .route i{grid-row:1/3}
  .drie,.labels6,.kc{grid-template-columns:1fr}
  .vest{grid-template-columns:1fr 1fr;gap:28px 20px}
}

:root{--acc:var(--academy)}
.balk img{height:56px}
.hero .deuren a.wg{background:var(--academy);color:#101117}
.blad .licht,.bedrijven .licht{color:var(--navy)}
.ook{margin-top:48px;padding-top:24px;border-top:1px solid rgba(16,17,23,.14);font-weight:300;max-width:70ch}
/* voor bedrijven: navy band */
.bedrijven{background:var(--diep);color:#fff;padding:110px 0}
.bedrijven .licht{color:#fff;opacity:.85}
.bd-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.bedrijven h2{font-size:clamp(2.2rem,3.6vw,3.6rem)}
.bedrijven .intro{margin-top:16px;font-weight:300;font-size:1.1875rem;line-height:1.55;opacity:.9;max-width:48ch}
.bd-lijst{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.bd-lijst li{padding:18px 0 18px 28px;border-bottom:1px solid rgba(255,255,255,.2);position:relative}
.bd-lijst li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:12px;background:var(--academy)}
.bd-lijst b{display:block;font-size:1.125rem}.bd-lijst span{display:block;margin-top:4px;font-weight:300;opacity:.85}
.bedrijven .knop.wit{background:#fff;color:var(--diep)}
.bd-beeld{position:relative;margin:0}.bd-beeld img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.labs{display:flex;gap:8px;flex-wrap:wrap}
.lab{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;background:var(--c);color:#101117}
.lab[style*="works"]{color:#fff}
/* vragen */
.vr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px;border-top:1px solid var(--inkt)}
.vr{padding:24px 0;border-bottom:1px solid rgba(16,17,23,.14)}.vr h3{font-size:1.25rem}.vr p{margin-top:8px;font-weight:300;color:var(--zacht);line-height:1.55}
/* aanmelden */
.aanmeld{background:var(--papier);color:var(--inkt);padding:96px 0;border-top:1px solid rgba(16,17,23,.12)}
.aanmeld h2{font-size:clamp(2.2rem,3.6vw,3.6rem)}.aanmeld .licht{color:var(--navy)}
.aanmeld .intro{margin-top:16px;font-weight:300;font-size:1.1875rem;line-height:1.55;color:var(--zacht);max-width:44ch}
.niki{display:flex;gap:24px;align-items:center;margin-top:36px}
.niki img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 4px var(--papier),0 0 0 7px var(--academy)}
.niki b{display:block;font-size:1.25rem}.niki span{color:var(--zacht);font-weight:300}
.niki .kanalen{margin-top:10px;gap:4px}
@media (max-width:900px){
  .bd-grid{grid-template-columns:1fr;gap:40px}.bedrijven{padding:64px 0}
  .vr-grid{grid-template-columns:1fr}
  .niki img{width:88px;height:88px}
}

.weg{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.akkoord{display:flex;gap:12px;align-items:flex-start}.akkoord input{width:22px;height:22px;margin-top:2px;flex:none}
.akkoord label{font-weight:300;font-size:.9375rem;color:var(--zacht);margin:0}.akkoord a{border-bottom:1px solid currentColor}
.vorm select{width:100%;font:inherit;font-size:1rem;padding:14px;border:1.5px solid rgba(16,17,23,.2);background:#fff}

/* Na het gesprek met Niki (12-11-2026): bouwstenen die de home en de Bootcamp Bouw-pagina delen. */
/* Na de opleiding: drie kaarten zonder nummers en zonder volgorde */
.daarna{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.daarna li{border-top:1px solid var(--inkt);padding-top:24px}
.daarna h3{font-size:1.5rem;letter-spacing:-.02em}
.daarna p{margin-top:10px;font-weight:300;font-size:1.0625rem;line-height:1.55;color:var(--zacht);text-wrap:pretty}
.daarna .labs{margin-top:18px}
/* Vragen per onderdeel: groepen met een eigen tussenkop */
.vr-groepen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:44px;align-items:start}
.vr-groep{border-top:1px solid var(--inkt)}
.vr-kop{display:flex;align-items:center;gap:12px;padding:20px 0 4px;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.vr-kop::before{content:"";width:10px;height:10px;background:var(--academy);flex:none}
.vr-groep .vr h4{font-size:1.25rem;margin:0;letter-spacing:-.01em;line-height:1.25}
.vr-meer{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:8px;font-weight:700;color:var(--navy)}
.vr-meer span:first-child{border-bottom:1.5px solid currentColor}
/* Kruimel terug naar de home op de Bootcamp Bouw-pagina */
.kruimel{margin-bottom:18px;font-size:.9375rem;font-weight:700}
.kruimel a{display:inline-flex;align-items:center;min-height:44px;gap:.5em;opacity:.9}
.kruimel a span{border-bottom:1.5px solid rgba(255,255,255,.45)}
.kruimel a:hover{opacity:1}
/* Al een vak voor ogen? */
.vakkeuze .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:start}
.vakkeuze .tekst2 p{font-weight:300;font-size:1.1875rem;line-height:1.6;color:var(--zacht);max-width:48ch;text-wrap:pretty}
.vakkeuze .tekst2 p+p{margin-top:16px}
.vakkeuze .knop{margin-top:32px;background:var(--navy);color:#fff}
/* Goed om te weten: praktische info als lijst van label en waarde */
.info{margin:40px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--inkt)}
.info div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid rgba(16,17,23,.14)}
.info dt{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);padding-top:4px}
.info dd{margin:0;font-weight:300;font-size:1.125rem;line-height:1.5}
.blad.info-blad{background:#fff!important}
@media (max-width:900px){
  .daarna,.vr-groepen,.info,.vakkeuze .wrap{grid-template-columns:1fr}
  .daarna{gap:28px}.vr-groepen{gap:40px}
  .info div{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .vakkeuze .knop{margin-top:24px}
}
.niki>div{min-width:0}

/* Afwerkronde na Ruud (12-11-2026) */
/* M4: duidelijke focus op velden, keuzelijsten en het akkoordvakje (3 px navy, ook bij focus vanuit script) */
.vorm input:focus,.vorm textarea:focus,.vorm select:focus{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.akkoord input{accent-color:var(--navy)}
.akkoord input:focus{outline:3px solid var(--navy);outline-offset:3px}
.vorm [aria-invalid="true"]{border-color:var(--personeelsdiensten)!important;border-width:2px}
.vorm small.fout{color:var(--personeelsdiensten);font-weight:700}
/* L1: Meld je aan in de menubalk altijd op één regel; op 901 tot 1000 breed alles iets compacter */
.balk .knop{white-space:nowrap}
@media (min-width:901px) and (max-width:1000px){.balk .wrap{gap:24px}.balk nav{gap:14px!important;font-size:.8125rem!important}.balk img{height:48px}.balk .knop.lang{padding:.65em .9em}}
/* L7: zonder JavaScript geen menuknop, maar het menu als rij links onder het logo */
@media (max-width:900px){
  html:not(.js) .menuknop{display:none}
  html:not(.js) .balk{position:absolute}
  html:not(.js) .balk .wrap{height:auto;flex-wrap:wrap;gap:8px 18px;padding-top:16px;padding-bottom:14px}
  html:not(.js) .balk nav{display:flex;flex-wrap:wrap;gap:4px 18px;width:100%;margin:0;font-size:.9375rem}
  html:not(.js) .balk nav a{display:inline-flex;align-items:center;min-height:44px}
}
/* velden niet onder de vaste menubalk als het script ze focust bij een fout */
.vorm input,.vorm select,.vorm textarea{scroll-margin-top:150px}
@media (max-width:900px){html:not(.js) .hero .aitegel,html:not(.js) .pk3 .pk-ai{top:auto!important;bottom:24px!important}}