:root{--green:#0F4C3A;--deep:#0B3A2C;--gold:#D8BC86;--gold-dark:#7A5C24;--ink:#10241C;--muted:#4F5E57;--line:#E3E8E5;--field:#DCE3DF;--cream:#F5F3EE}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:'Geist',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}a:hover{color:var(--deep)}
img{display:block}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.serif{font-family:'Newsreader',Georgia,serif;font-weight:400}
.topline{height:4px;background:var(--green)}
.eyebrow{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;font-weight:600;color:var(--green)}
.eyebrow.gold{color:var(--gold)}
.label-gold{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:var(--gold-dark)}

/* nav */
.nav{min-height:84px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.8px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand.small{font-size:20px;letter-spacing:-.6px}
.g{color:var(--green)}.dot{color:var(--gold)}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:14px;font-weight:500}
.menu a{color:#3F4F48}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:6px;background:var(--green);color:#fff!important;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--deep)}
.btn-lg{min-height:52px;padding:0 26px;font-size:15px;border-radius:7px}

/* hero */
.hero{border-top:1px solid var(--line);background:var(--cream)}
.hero-grid{padding-top:88px;padding-bottom:80px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero-main{flex:999 1 560px;min-width:0}
.hero h1{font-size:clamp(44px,5.4vw,72px);line-height:1.04;letter-spacing:-1.6px;margin:20px 0 22px}
.lead{font-size:18px;color:var(--muted);max-width:560px;margin:0 0 32px}
.search{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--field);border-radius:10px;padding:8px;max-width:720px;box-shadow:0 18px 44px rgba(15,76,58,.08)}
.search label{flex:1 1 200px;display:flex;flex-direction:column;padding:6px 14px}
.search label.sep{flex-basis:180px;border-left:1px solid var(--line)}
.search label span{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#5C6B64}
.search input{border:0;outline:0;font:inherit;font-size:16px;padding:4px 0;color:var(--ink);background:transparent}
.search button{flex:0 0 auto}
input::placeholder{color:#6B7A73}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:22px;font-size:14px;color:#3F4F48}
.trust span{display:inline-flex;align-items:center;gap:8px}
.panel{flex:1 1 340px;min-width:0;background:#fff;border:1px solid var(--field);border-radius:12px;padding:32px;box-shadow:0 24px 60px rgba(16,36,28,.07)}
.panel-title{font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.4px;margin:12px 0}
.panel p{font-size:15px;color:var(--muted);margin:0 0 20px}
.panel-list{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px;font-size:14px;color:#33433C}
.panel-list span{display:flex;gap:10px}
.panel-list b{color:var(--green)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:15px;font-weight:600}

/* sectors */
.sectors{padding-top:64px;padding-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--field);border-radius:999px;font-size:14px;font-weight:500;color:#24352E;background:#fff}
.chips a:hover{border-color:var(--green);color:var(--green)}

/* jobs */
.jobs-section{padding-top:56px;padding-bottom:88px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.h2{font-size:40px;letter-spacing:-.8px;margin:8px 0 0}
.more{font-size:15px;font-weight:600}
.jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.job{display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);transition:box-shadow .2s,border-color .2s}
.job:hover{color:var(--ink);border-color:#C9D5CF;box-shadow:0 14px 35px rgba(16,36,28,.07)}
.tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--green);background:#EAF1EE;border-radius:4px;padding:5px 9px}
.job-title{font-size:20px;font-weight:600;letter-spacing:-.3px;margin-top:14px}
.job-meta{font-size:14px;color:var(--muted)}
.job-foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:18px;padding-top:14px;font-size:14px}
.job-foot span{color:var(--muted)}

/* employers */
.employers{background:var(--deep);color:#fff}
.employers-grid{padding-top:96px;padding-bottom:96px;display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.employers-grid>div{flex:1 1 420px;min-width:0}
.employers-title{font-size:clamp(36px,4vw,52px);line-height:1.1;letter-spacing:-1px;margin:18px 0 20px}
.employers-text{font-size:17px;color:#C9D6D0;max-width:500px;margin:0}
.employers-small{font-size:14px;color:#A9BBB3;max-width:500px;margin:20px 0 0}
.btn-light{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;margin-top:28px;border-radius:6px;background:#fff;color:var(--deep);font-weight:600}
.btn-light:hover{background:var(--cream);color:var(--deep)}
.steps{flex:1 1 420px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:20px;padding:22px 24px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.04)}
.steps b{color:var(--gold)}
.steps strong{display:block;font-size:17px;font-weight:600}
.steps em{display:block;font-style:normal;font-size:14px;color:#C9D6D0;margin-top:4px}

/* usp */
.usp{background:var(--cream)}
.usp-grid{padding-top:80px;padding-bottom:80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.usp h3{font-weight:600;font-size:18px;letter-spacing:-.2px;margin:0 0 8px}
.usp p{font-size:15px;color:var(--muted);margin:0}

/* footer */
footer{border-top:1px solid var(--line)}
.foot{padding-top:48px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.foot-brand{flex:1 1 320px;min-width:0}
.foot-brand p{font-size:13px;color:#5C6B64;max-width:380px;margin:12px 0 0}
.foot-cols{display:flex;flex-wrap:wrap;gap:48px;font-size:14px}
.foot-cols div{display:flex;flex-direction:column;gap:8px}
.foot-cols span{font-weight:600}
.foot-cols a{color:var(--muted)}
.foot-bottom{padding-top:18px;padding-bottom:32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:#5C6B64}
.foot-bottom a{color:#5C6B64;margin-left:20px}
.foot-bottom span:first-child a{margin:0}

/* vacature */
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;color:#3F4F48}
.v-hero{background:var(--cream);border-top:1px solid var(--line)}
.v-hero .wrap{padding-top:56px;padding-bottom:48px}
.v-hero h1{font-size:clamp(40px,5vw,60px);line-height:1.06;letter-spacing:-1.2px;margin:18px 0 8px}
.v-company{font-size:17px;color:var(--muted);margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:32px;max-width:860px}
.fact{background:#fff;border:1px solid var(--field);border-radius:10px;padding:16px 18px}
.fact span{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#5C6B64}
.fact b{display:block;font-size:18px;font-weight:600;margin-top:4px}
.v-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;margin-top:28px;border-radius:6px;background:var(--green);color:#fff!important;font-weight:600}
.v-body{padding-top:64px;padding-bottom:96px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.v-body article{flex:999 1 560px;min-width:0;line-height:1.6}
.v-body article h2{font-weight:600;font-size:20px;letter-spacing:-.3px;margin:0 0 10px}
.v-body article p{font-size:16px;color:#33433C;margin:0 0 36px}
.v-body article ul{margin:0 0 36px;padding-left:20px;font-size:16px;color:#33433C;display:flex;flex-direction:column;gap:6px}
.apply{flex:1 1 340px;min-width:0;border:1px solid var(--field);border-radius:12px;padding:30px;background:#fff;box-shadow:0 24px 60px rgba(16,36,28,.07)}
.apply h2{font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.4px;margin:0 0 6px}
.apply>p{font-size:14px;color:var(--muted);margin:0 0 22px}
.apply form{display:flex;flex-direction:column;gap:14px}
.apply label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#24352E}
.apply input,.apply select{min-height:48px;padding:0 14px;border:1px solid #CFD8D3;border-radius:7px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff}
.apply input:focus,.apply select:focus{outline:2px solid var(--green);outline-offset:1px}
.apply button{min-height:52px;margin-top:6px}
.apply small{font-size:12px;color:#5C6B64}
.hidden{display:none}

/* bedankt */
.thanks{min-height:60vh;display:flex;align-items:center}
.thanks .wrap{padding-top:80px;padding-bottom:80px;max-width:640px}
.thanks h1{font-size:clamp(36px,5vw,52px);letter-spacing:-1px;line-height:1.1;margin:20px 0 12px}
.thanks p{font-size:17px;color:var(--muted);margin:0 0 28px}

@media(max-width:600px){
  .menu{gap:18px}
  .menu a:not(.btn){display:none}
  .hero-grid{padding-top:56px;padding-bottom:56px}
  .search label.sep{border-left:0;border-top:1px solid var(--line)}
  .search button{flex:1 1 100%}
  .employers-grid{padding-top:64px;padding-bottom:64px}
  .h2{font-size:32px}
}

/* intro (alleen homepage, 1x per sessie) */
#intro{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--deep);color:#fff;cursor:pointer;animation:introOut .6s cubic-bezier(.7,0,.3,1) 2.2s forwards}
#intro.skip{animation:introOut .35s ease forwards}
.no-intro #intro{display:none}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;text-align:center}
.intro-mark{opacity:0;transform:scale(.86);animation:introMark .8s cubic-bezier(.2,.8,.2,1) .15s forwards}
.intro-stem{transform-origin:32px 52px;transform:scaleY(0);animation:introStem .55s cubic-bezier(.2,.8,.2,1) .45s forwards}
.intro-dot{opacity:0;transform:translateY(-14px);animation:introDot .5s cubic-bezier(.3,1.4,.5,1) .8s forwards}
.intro-word{font-size:clamp(30px,6vw,44px);font-weight:700;letter-spacing:-1.4px;opacity:0;transform:translateY(12px);animation:introUp .7s cubic-bezier(.2,.8,.2,1) .95s forwards}
.intro-word span{color:#9FD1BC}.intro-word b{color:var(--gold)}
.intro-line{width:0;height:1px;background:var(--gold);animation:introLine .7s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
.intro-slogan{font-family:'Newsreader',Georgia,serif;font-size:clamp(20px,3vw,26px);color:#E7DCC6;opacity:0;animation:introFade .7s ease 1.4s forwards}
@keyframes introMark{to{opacity:1;transform:scale(1)}}
@keyframes introStem{to{transform:scaleY(1)}}
@keyframes introDot{to{opacity:1;transform:translateY(0)}}
@keyframes introUp{to{opacity:1;transform:translateY(0)}}
@keyframes introLine{to{width:64px}}
@keyframes introFade{to{opacity:1}}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){#intro{display:none}}