/* RegioSafe.nl, de stijl uit ontwerprichting D.
   Overgenomen uit de goedgekeurde mockup. Wijzig hier niets zonder het ook
   in de mockup te doen, anders lopen de twee uit elkaar.
   De lettertypen komen uit fonts.css, niet van Google. */

/* RegioSafe - Richting C "Signatuur" ------------------------------------- */

:root{
  --paper:#F6F5F3;
  --mark-soft:rgba(20,22,26,.055);
  --paper-2:#EDEBE7;
  --ink:#14161A;
  --ink-2:#585E66;
  --ink-3:#8C9299;
  --line:#DEDBD5;
  --line-soft:#E9E6E1;
  --night:#0A0B0D;
  --accent:#C10A27;
  --accent-dark:#9A0820;
  --signal:#FFDE14;

  --r:22px;
  --r-lg:28px;
  --r-sm:14px;

  --maxw:1460px;
  --gut:clamp(20px,5vw,72px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;font-size:17px;line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

/* --- typografie ---------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:"Schibsted Grotesk",system-ui,sans-serif;
  margin:0;font-weight:700;line-height:1.04;letter-spacing:-.035em;
  text-wrap:balance;color:var(--ink);
}
.d-0{font-size:clamp(40px,7.1vw,104px);line-height:.96;letter-spacing:-.045em}
.d-1{font-size:clamp(32px,5.1vw,74px);line-height:.99;letter-spacing:-.04em}
.d-2{font-size:clamp(28px,3.6vw,52px);letter-spacing:-.035em}
.d-3{font-size:clamp(21px,2.1vw,30px);letter-spacing:-.028em;font-weight:600}
.d-4{font-size:19px;font-weight:600;letter-spacing:-.02em}

.kicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:block;
}
.kicker.on-dark{color:rgba(255,255,255,.62)}
.kicker .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:10px;vertical-align:1px}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.58;color:var(--ink-2);font-weight:300}
.body-2{color:var(--ink-2)}
.muted{color:var(--ink-3)}

/* --- layout -------------------------------------------------------------- */
.wrap{width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
.sec{padding:clamp(72px,10vw,160px) 0}
.sec.tight{padding:clamp(52px,6.5vw,96px) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}
.paper-2{background:var(--paper-2)}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--slow),transform 1.05s var(--slow)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}

.ml{display:block;overflow:hidden;padding-bottom:.06em;text-wrap:nowrap}
@media (max-width:620px){.ml{text-wrap:wrap}}
.ml > i{display:block;font-style:normal;transform:translateY(106%);
  transition:transform 1.15s var(--slow)}
.in .ml > i,.ml.in > i{transform:none}
.ml:nth-child(2) > i{transition-delay:.08s}
.ml:nth-child(3) > i{transition-delay:.16s}
.ml:nth-child(4) > i{transition-delay:.24s}

.rv-img{clip-path:inset(0 0 0 0 round var(--r));overflow:hidden}
.rv-img img{transform:scale(1.14);transition:transform 1.6s var(--slow)}
.rv-img.in img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .rv,.ml > i,.rv-img img{transition:none !important;opacity:1 !important;transform:none !important}
}

/* --- knoppen ------------------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;border-radius:999px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:"Inter Tight",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:var(--accent);transform:translateY(101%);
  transition:transform .5s var(--slow);
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff;border-color:var(--accent)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn.light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn.on-dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.34)}
.btn.sm{padding:11px 20px;font-size:14px}

.tlink{
  display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;
  padding-bottom:6px;position:relative;color:var(--ink);
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--slow)}
.tlink:hover::after{transform:scaleX(0)}
.tlink .ar{transition:transform .4s var(--ease)}
.tlink:hover .ar{transform:translateX(5px)}
.tlink.on-dark{color:#fff}
.tlink.on-dark::after{background:rgba(255,255,255,.7)}

/* --- header -------------------------------------------------------------- */
.head{
  position:fixed;inset:0 0 auto 0;z-index:70;
  transition:background .5s var(--ease),border-color .5s var(--ease),
             backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.head-in{
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.head.solid{background:rgba(246,245,243,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line-soft)}
.brand{display:flex;align-items:center}
.brand svg,.brand img{height:42px;width:auto;display:block}
.head-r{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.tel{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;
  transition:color .3s var(--ease);
}
.tel:hover{color:var(--ink)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(193,10,39,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(193,10,39,0)}100%{box-shadow:0 0 0 0 rgba(193,10,39,0)}}

/* hero-modus: witte chrome over de foto */
.head.over .tel{color:rgba(255,255,255,.72)}
.head.over .tel:hover{color:#fff}
.head.over .brand svg [fill="#14161A"],
.head.over .brand .mono{fill:#fff}
.head.over .mbtn{color:#fff;border-color:rgba(255,255,255,.3)}
.head.over .mbtn i{background:#fff}

.mbtn{
  display:inline-flex;align-items:center;gap:11px;height:42px;padding:0 18px 0 20px;
  border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.mbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mbtn:hover i{background:#fff}
.mbtn .bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.mbtn i{display:block;height:1.5px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--slow),opacity .3s var(--ease),background .3s var(--ease)}
.mbtn i:last-child{width:11px;margin-left:auto;transition:transform .4s var(--slow),width .4s var(--slow)}
.mbtn:hover i:last-child{width:16px}
body.nav-open .mbtn i:first-child{transform:translateY(2.75px) rotate(45deg)}
body.nav-open .mbtn i:last-child{transform:translateY(-2.75px) rotate(-45deg);width:16px}

/* --- overlay menu -------------------------------------------------------- */
.ov{
  position:fixed;inset:0;z-index:65;background:var(--night);color:#fff;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--slow);
  display:flex;flex-direction:column;justify-content:center;
}
.ov.open{clip-path:inset(0 0 0 0)}
.ov-in{
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);
  align-items:center;padding-top:86px;
}
.ov-links{display:flex;flex-direction:column}
.ov-link{
  display:flex;align-items:baseline;gap:18px;
  padding:clamp(9px,1.15vw,15px) 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:"Schibsted Grotesk",sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(28px,4.4vw,60px);line-height:1;color:rgba(255,255,255,.55);
  transform:translateY(34px);opacity:0;
  transition:color .4s var(--ease),transform .8s var(--slow),opacity .8s var(--slow),
             padding-left .5s var(--slow);
}
.ov.open .ov-link{transform:none;opacity:1}
.ov-link:nth-child(1){transition-delay:.16s}
.ov-link:nth-child(2){transition-delay:.22s}
.ov-link:nth-child(3){transition-delay:.28s}
.ov-link:nth-child(4){transition-delay:.34s}
.ov-link:nth-child(5){transition-delay:.40s}
.ov-link:nth-child(6){transition-delay:.46s}
.ov-link:nth-child(7){transition-delay:.52s}
.ov-link .num{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;letter-spacing:.14em;
  color:rgba(255,255,255,.3);flex:0 0 auto;transition:color .4s var(--ease)
}
.ov-link:hover,.ov-link.cur{color:#fff}
.ov-link:hover{padding-left:16px}
.ov-link:hover .num{color:var(--accent)}
.ov-media{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:#15171A;
}
.ov-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .7s var(--ease),transform 1.2s var(--slow);
}
.ov-media img.on{opacity:1;transform:scale(1)}
.ov-foot{
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  margin-top:clamp(28px,4vw,56px);display:flex;flex-wrap:wrap;gap:14px 40px;
  align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--slow) .5s,transform .7s var(--slow) .5s;
}
.ov.open .ov-foot{opacity:1;transform:none}
.ov-foot a{color:rgba(255,255,255,.66);font-size:15px;transition:color .3s}
.ov-foot a:hover{color:#fff}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;overflow:hidden;background:var(--night)}
.hero.short{min-height:min(74svh,760px)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.1);animation:kb 18s var(--slow) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.58) 0%,rgba(10,11,13,.12) 34%,
             rgba(10,11,13,.42) 66%,rgba(10,11,13,.88) 100%);
}
.hero-in{
  position:relative;z-index:2;
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  padding:0 0 clamp(44px,6vw,92px);
}
.hero h1,.hero .d-0,.hero .d-1{color:#fff}
.hero .lead{color:rgba(255,255,255,.76);max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)}
.hero-bar{
  position:relative;z-index:2;
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;
  border-top:1px solid rgba(255,255,255,.2);padding:18px 0 22px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.hero-bar b{color:#fff;font-weight:500}
.scroll-cue{
  position:absolute;right:var(--gut);bottom:clamp(44px,6vw,92px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.scroll-cue .ln{width:1px;height:58px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:"";position:absolute;inset:0;background:#fff;
  transform:translateY(-100%);animation:cue 2.6s var(--slow) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* --- editorial intro ----------------------------------------------------- */
.ed{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,88px);align-items:start}
.ed-side{position:sticky;top:120px}
.ed p + p{margin-top:1.1em}
.ed .d-2{margin-bottom:.5em}

/* --- cijfers ------------------------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.figs .fig{padding:clamp(22px,2.6vw,36px) clamp(14px,2vw,28px) clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line)}
.figs .fig + .fig{border-left:1px solid var(--line);padding-left:clamp(14px,2vw,28px)}
.fig b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:clamp(34px,4.4vw,62px);letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.fig span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.4}

/* --- dienstenraster ------------------------------------------------------ */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,28px);align-items:start}
.dcol{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,28px)}
.dcol:last-child{margin-top:clamp(0px,7vw,104px)}
.dcard{position:relative;border-radius:var(--r);overflow:hidden;background:#111;
  display:block;color:#fff;isolation:isolate}
.dcard .ph{aspect-ratio:4/5;position:relative}
.dcard.wide .ph{aspect-ratio:5/4}
.dcard .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--slow);will-change:transform}
.dcard:hover .ph img{transform:scale(1.045)}
.dcard .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.05) 30%,rgba(10,11,13,.82) 100%)}
.dcard .txt{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(20px,2.4vw,34px);display:flex;align-items:flex-end;
  justify-content:space-between;gap:20px}
.dcard .txt h3{color:#fff}
.dcard .txt p{margin:.5em 0 0;color:rgba(255,255,255,.72);font-size:15px;max-width:44ch}
.dcard .go{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.34);display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--slow)}
.dcard:hover .go{background:#fff;border-color:#fff;color:var(--ink);transform:rotate(45deg)}
.dcard .no{position:absolute;top:clamp(18px,2vw,28px);left:clamp(20px,2.4vw,34px);z-index:2;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.7)}

/* --- proces -------------------------------------------------------------- */
.proc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.proc-side{position:sticky;top:130px}
.proc-count{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:clamp(70px,10vw,150px);line-height:.86;letter-spacing:-.05em;
  display:flex;align-items:baseline;gap:4px}
.proc-count .sep{font-size:.3em;color:var(--ink-3);font-weight:400;letter-spacing:0}
.proc-count .tot{font-size:.3em;color:var(--ink-3);font-weight:400}
.proc-track{margin-top:26px;height:2px;background:var(--line);position:relative;max-width:260px}
.proc-track i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:25%;
  transition:width .6s var(--slow)}
.steps{display:flex;flex-direction:column}
.step{padding:clamp(24px,3vw,44px) 0;border-top:1px solid var(--line)}
.step .st-h,.step p{opacity:.34;transition:opacity .65s var(--ease)}
.step.on .st-h,.step.on p{opacity:1}
.step:last-child{border-bottom:1px solid var(--line)}
.step .st-h{display:flex;align-items:baseline;gap:16px;margin-bottom:.55em}
.step .st-n{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  color:var(--accent)}
.step p{margin:0;color:var(--ink-2);max-width:60ch}

/* --- rail ---------------------------------------------------------------- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:24px;margin-bottom:clamp(24px,3vw,44px)}
.rail-nav{display:flex;gap:10px;flex:0 0 auto}
.rnav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:background .35s var(--ease),
  border-color .35s var(--ease),color .35s var(--ease)}
.rnav:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rail{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));
  scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail.drag a{pointer-events:none}
.rcard{flex:0 0 clamp(250px,26vw,380px);scroll-snap-align:start;display:block}
.rcard .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:#eee}
.rcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--slow)}
.rcard:hover .ph img{transform:scale(1.05)}
.rcard .meta{padding-top:16px}
.rcard .pl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.rcard h3{margin-top:7px}

/* --- sectorwisselaar ----------------------------------------------------- */
.sw{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,5vw,80px);align-items:center}
.sw-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sw-item{display:flex;align-items:center;justify-content:space-between;gap:18px;
  text-align:left;width:100%;padding:clamp(15px,1.8vw,24px) 0;
  border-bottom:1px solid var(--line);color:var(--ink-3);
  transition:color .4s var(--ease),padding-left .5s var(--slow)}
.sw-item h3{color:inherit;font-size:clamp(22px,2.5vw,34px);font-weight:700;letter-spacing:-.035em}
.sw-item .ar{opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--slow)}
.sw-item.on{color:var(--ink);padding-left:14px}
.sw-item.on .ar{opacity:1;transform:none}
.sw-media{position:relative;aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:#eee}
.sw-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity .8s var(--ease),transform 1.3s var(--slow)}
.sw-media img.on{opacity:1;transform:scale(1)}
.sw-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 28px 26px;color:#fff;
  background:linear-gradient(180deg,rgba(10,11,13,0),rgba(10,11,13,.86));
  font-size:15.5px;line-height:1.5}

/* --- band / cta ---------------------------------------------------------- */
.band{position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;
  width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto;
  min-height:clamp(380px,50vw,560px);display:grid;place-items:center;text-align:center;
  background:var(--night)}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(10,11,13,.56)}
.band-in{position:relative;z-index:2;padding:clamp(40px,6vw,80px) clamp(20px,5vw,60px);
  max-width:820px}
.band-in .d-1,.band-in h2{color:#fff}
.band-in p{color:rgba(255,255,255,.78);margin:1em auto 0;max-width:56ch}
.band-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* --- contentblokken ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:center}
.split.rev .split-txt{order:2}
.block-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#eee}
.block-img img{width:100%;height:100%;object-fit:cover}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(22px,2.4vw,34px);transition:border-color .4s var(--ease),
  transform .5s var(--slow),box-shadow .5s var(--slow)}
.card:hover{border-color:var(--line);transform:translateY(-3px);
  box-shadow:0 18px 44px -28px rgba(20,22,26,.4)}
.card p{color:var(--ink-2);margin:.6em 0 0;font-size:15.5px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);background:#fff}

/* specs / lijstjes */
.spec{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);font-size:15px}
.spec:first-child{border-top:1px solid var(--line-soft)}
.spec span:first-child{color:var(--ink-3)}
.spec span:last-child{font-weight:500}

/* filter */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(22px,3vw,38px)}
.filt{padding:9px 17px;border-radius:999px;border:1px solid var(--line);font-size:14px;
  color:var(--ink-2);transition:all .3s var(--ease)}
.filt:hover{border-color:var(--ink-3)}
.filt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.mat{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);background:#fff}
.mat .ph{aspect-ratio:4/3;overflow:hidden;background:#eee}
.mat .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--slow)}
.mat:hover .ph img{transform:scale(1.05)}
.mat .mb{padding:20px 22px 24px}
.mat.hide{display:none}

/* vacatures */
.vac{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--slow)}
.vac:first-child{border-top:1px solid var(--line)}
.vac:hover{padding-left:14px}
.vac .vm{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px}

/* contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;letter-spacing:.03em;color:var(--ink-3);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:15.5px;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.07)}
.field textarea{min-height:130px;resize:vertical}

/* --- footer -------------------------------------------------------------- */
.foot{background:var(--night);color:#fff;padding:clamp(56px,7vw,100px) 0 34px;margin-top:0}
.foot-word{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:clamp(52px,13vw,190px);line-height:.82;letter-spacing:-.05em;
  color:rgba(255,255,255,.1);margin-bottom:clamp(30px,4vw,56px);user-select:none}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{color:#fff;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-family:"JetBrains Mono",monospace;color:rgba(255,255,255,.44);margin-bottom:16px}
.foot a,.foot p{color:rgba(255,255,255,.7);font-size:15px}
.foot a{display:block;padding:5px 0;transition:color .3s var(--ease)}
.foot a:hover{color:#fff}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:22px;font-size:13px;color:rgba(255,255,255,.44)}

/* --- meldbalk ------------------------------------------------------------ */
.alarm{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:60;
  display:flex;align-items:center;gap:16px;padding:11px 12px 11px 22px;
  background:var(--night);color:#fff;border-radius:999px;
  box-shadow:0 22px 50px -22px rgba(10,11,13,.6);
  transition:transform .7s var(--slow);white-space:nowrap;
}
.alarm.show{transform:translate(-50%,0)}
.alarm .t{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.alarm .n{font-weight:500;font-size:16px}
.alarm .btn{padding:10px 20px;--bg:var(--accent);--bd:var(--accent);font-size:14px}
.alarm .btn::after{background:#fff}
.alarm .btn:hover{color:var(--ink)}

/* --- pagina-kop ---------------------------------------------------------- */
.phead{padding:clamp(120px,13vw,190px) 0 clamp(36px,5vw,64px)}
.crumb{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(16px,2vw,26px)}
.crumb a:hover{color:var(--ink)}
.phead .lead{max-width:56ch;margin-top:clamp(16px,2vw,24px)}

/* --- notitie ------------------------------------------------------------- */
.note{
  background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r);
  padding:18px 22px;font-size:14px;color:var(--ink-2);display:flex;gap:12px;align-items:flex-start
}
.note b{color:var(--ink);font-weight:600}

/* --- views --------------------------------------------------------------- */
.view[hidden]{display:none}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs .fig:nth-child(odd){border-left:0;padding-left:0}
  .figs .fig:nth-child(even){border-left:1px solid var(--line)}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .mat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body{font-size:16.5px}
  .ed,.proc,.sw,.split,.cgrid,.ov-in,.dgrid{grid-template-columns:1fr}
  .dcol:last-child{margin-top:0}
  .ed-side,.proc-side{position:static}
  .split.rev .split-txt{order:0}
  .ov-in{gap:26px}
  .ov-media{display:none}
  .ov{justify-content:flex-start;padding-top:96px;overflow-y:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tel span{display:none}
  .scroll-cue{display:none}
  .sw-media{aspect-ratio:16/10}
}
@media (max-width:620px){
  .cards-3,.cards-2,.mat-grid{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .figs .fig{border-left:0 !important;padding-left:0 !important}
  .foot-grid{grid-template-columns:1fr}
  .alarm{left:12px;right:12px;transform:translate(0,140%);width:auto;justify-content:space-between;
    padding-left:18px}
  .alarm.show{transform:translate(0,0)}
  .alarm .t{display:none}
  .hero-bar{font-size:10px;gap:8px 18px}
  .vac{flex-direction:column;align-items:flex-start;gap:14px}
}

/* eerste sectie na paginakop dichter erop */
.phead + .sec{padding-top:clamp(16px,2.4vw,40px)}
.phead + .sec.paper-2{padding-top:clamp(56px,7vw,110px)}

/* hidden moet altijd winnen van componentregels met display */
[hidden]{display:none !important}

/* --- themaschakelaar ------------------------------------------------------ */
.tbtn{
  width:42px;height:42px;border-radius:999px;border:1px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.tbtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tbtn svg{display:block}
.tbtn .i-moon{display:none}
.head.over .tbtn{color:#fff;border-color:rgba(255,255,255,.3)}
.head.over .tbtn:hover{background:#fff;color:var(--night);border-color:#fff}

body,.head.solid,.card,.paper-2,.mat,.field input,.field select,.field textarea,.alarm{
  transition:background-color .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease);
}

/* ==========================================================================
   DONKERE MODUS
   Zelfde structuur, omgekeerd palet. Schakelaar staat in de header.
   ========================================================================== */
:root[data-theme="dark"]{
  --paper:#0E0F11;
  --mark-soft:rgba(255,255,255,.055);
  --paper-2:#15171A;
  --ink:#F3F2F0;
  --ink-2:#A2A8AF;
  --ink-3:#6C737B;
  --line:#25282D;
  --line-soft:#1C1F23;
  --night:#000000;
  --accent:#E01530;
  --accent-dark:#C10A27;
  --on-ink:#0E0F11;
  --surface:#15171A;
  --surface-2:#1B1E22;
  color-scheme:dark;
}

[data-theme="dark"] body{background:var(--paper)}
[data-theme="dark"] ::selection{background:var(--accent);color:#fff}

/* header */
[data-theme="dark"] .head.solid{
  background:rgba(14,15,17,.82);backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:var(--line-soft);
}
[data-theme="dark"] .mbtn:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
[data-theme="dark"] .mbtn:hover i{background:var(--on-ink)}
[data-theme="dark"] .tbtn:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
[data-theme="dark"] .tbtn .i-sun{display:none}
[data-theme="dark"] .tbtn .i-moon{display:block}

/* knoppen */
[data-theme="dark"] .btn{--bg:var(--ink);--fg:var(--on-ink);--bd:var(--ink)}
[data-theme="dark"] .btn:hover{color:#fff}
[data-theme="dark"] .btn.ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
[data-theme="dark"] .btn.light{--bg:#FFFFFF;--fg:#0E0F11;--bd:#FFFFFF}
[data-theme="dark"] .btn.on-dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.34)}
[data-theme="dark"] .rnav:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
[data-theme="dark"] .dcard:hover .go{background:#fff;border-color:#fff;color:#0E0F11}
[data-theme="dark"] .filt{background:transparent}
[data-theme="dark"] .filt:hover{border-color:var(--ink-3)}
[data-theme="dark"] .filt.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

/* vlakken */
[data-theme="dark"] .card{background:var(--surface);border-color:var(--line-soft)}
[data-theme="dark"] .card:hover{border-color:var(--line);box-shadow:0 22px 50px -30px rgba(0,0,0,.9)}
[data-theme="dark"] .chip{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] .mat{background:var(--surface);border-color:var(--line-soft)}
[data-theme="dark"] .note{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .block-img,
[data-theme="dark"] .sw-media,
[data-theme="dark"] .rcard .ph,
[data-theme="dark"] .mat .ph,
[data-theme="dark"] .ov-media{background:#191C20}

/* formulier */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{
  background:var(--surface);border-color:var(--line);color:var(--ink);
}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder{color:var(--ink-3)}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus{
  border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(255,255,255,.07);
}
[data-theme="dark"] .field select option{background:var(--surface);color:var(--ink)}

/* hero en beeldbanden */
[data-theme="dark"] .hero{background:#000}
[data-theme="dark"] .hero-media::after{
  background:linear-gradient(180deg,rgba(8,9,10,.62) 0%,rgba(8,9,10,.18) 32%,
             rgba(8,9,10,.5) 64%,rgba(14,15,17,1) 100%);
}
[data-theme="dark"] .band{background:#000}
[data-theme="dark"] .band::after{background:rgba(6,7,8,.6)}

/* haarlijn boven de tweede tint, anders lopen de secties in elkaar over */
[data-theme="dark"] .paper-2{background:var(--paper-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* meldbalk */
[data-theme="dark"] .alarm{
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95);
}
[data-theme="dark"] .alarm .btn{--bg:var(--accent);--bd:var(--accent);--fg:#fff}
[data-theme="dark"] .alarm .btn::after{background:#fff}
[data-theme="dark"] .alarm .btn:hover{color:#0E0F11;border-color:#fff}

/* footer */
[data-theme="dark"] .foot{background:#000;border-top:1px solid var(--line-soft)}
[data-theme="dark"] .foot-word{color:rgba(255,255,255,.075)}

/* diverse */
[data-theme="dark"] .proc-track{background:var(--line)}
[data-theme="dark"] .proc-track i{background:var(--ink)}
[data-theme="dark"] .tlink::after{background:var(--ink)}
[data-theme="dark"] .dcard{background:#000}
[data-theme="dark"] .figs,
[data-theme="dark"] .figs .fig{border-color:var(--line)}
[data-theme="dark"] .spec{border-color:var(--line-soft)}
[data-theme="dark"] .step{border-color:var(--line)}
[data-theme="dark"] .sw-list,
[data-theme="dark"] .sw-item,
[data-theme="dark"] .vac{border-color:var(--line)}

/* beeld iets rustiger op donker */
[data-theme="dark"] .dcard .ph img,
[data-theme="dark"] .block-img img,
[data-theme="dark"] .rcard .ph img,
[data-theme="dark"] .mat .ph img,
[data-theme="dark"] .sw-media img{filter:brightness(.94) saturate(.96)}

/* --- menu open: header hoort bij de overlay, niet bij de pagina ---------- */
body.nav-open .head,
body.nav-open .head.solid{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
body.nav-open .tel{color:rgba(255,255,255,.72)}
body.nav-open .tel:hover{color:#fff}
body.nav-open .mbtn,
body.nav-open .tbtn{color:#fff;border-color:rgba(255,255,255,.3)}
body.nav-open .mbtn i{background:#fff}
body.nav-open .mbtn:hover,
body.nav-open .tbtn:hover{background:#fff;color:#0A0B0D;border-color:#fff}
body.nav-open .mbtn:hover i{background:#0A0B0D}

/* --- desktop: groot logo boven de vouw, krimpt bij scrollen -------------- */
@media (min-width:901px){
  .head-in{height:106px;transition:height .45s var(--ease)}
  .brand img,.brand svg{height:64px;transition:height .45s var(--ease)}
  .head.solid .head-in{height:86px}
  .head.solid .brand img,.head.solid .brand svg{height:42px}
  .ov-in{padding-top:106px}
}

/* --- overlay past zich aan de schermhoogte aan --------------------------- */
/* Op een lager laptopscherm paste de menulijst niet en schoof hij onder de
   header door. Nu houdt de overlay de headerhoogte vrij, schaalt de
   linkgrootte mee met de viewporthoogte en kan hij desnoods scrollen. */
.ov{
  padding:calc(86px + 10px) 0 clamp(16px,3vh,40px);
  overflow-y:auto;overflow-x:hidden;
  justify-content:center;
}
@supports (justify-content:safe center){ .ov{justify-content:safe center} }
.ov-in{padding-top:0}

.ov-link{
  font-size:clamp(24px,min(4.2vw,6.4vh),56px);
  padding:clamp(5px,1.05vh,15px) 0;
}
.ov-link .num{font-size:clamp(9px,1.1vh,11px)}

.ov-media{
  aspect-ratio:4/5;
  height:min(64vh,600px);
  width:auto;
  justify-self:end;
}
.ov-foot{margin-top:clamp(18px,3vh,52px);padding-top:clamp(14px,2vh,22px)}

@media (min-width:901px){
  .ov{padding-top:calc(106px + 10px)}
  .ov-in{padding-top:0}
}
@media (max-width:900px){
  .ov{padding-top:96px;justify-content:flex-start}
  .ov-link{font-size:clamp(26px,7vw,44px)}
}

/* geen nummering voor de menu-items */
.ov-link .num{display:none}
.ov-link{gap:0}
.ov-link:hover{padding-left:18px}

/* de cirkel op een dienstenkaart wijst vooruit, hij draait niet naar een kruis */
.dcard .go svg{transition:transform .4s var(--ease)}
.dcard:hover .go,
[data-theme="dark"] .dcard:hover .go{
  background:#fff;border-color:#fff;color:#0E0F11;transform:none;
}
.dcard:hover .go svg{transform:translateX(3px)}

/* --- carrousel begint op dezelfde lijn als de kop ------------------------ */
/* scroll-snap negeert padding, daarom schoof de eerste kaart tegen de rand.
   scroll-padding houdt die ruimte wel vrij. */
.rail{
  padding-inline:max(var(--gut),calc((100% - var(--maxw)) / 2));
  scroll-padding-inline:max(var(--gut),calc((100% - var(--maxw)) / 2));
}

/* negen menu-items, dus strakker geschaald op de schermhoogte */
.ov-link{
  font-size:clamp(22px,min(3.6vw,5.2vh),50px);
  padding:clamp(4px,.85vh,13px) 0;
}
@media (max-width:900px){
  .ov-link{font-size:clamp(24px,6vw,38px)}
}

/* --- meldkamer: groene stip, staat voor bereikbaar ----------------------- */
:root{--live:#15A34A}
:root[data-theme="dark"]{--live:#2ED06C}
.pulse{
  background:var(--live);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pulse-live 2.4s infinite;
}
@keyframes pulse-live{
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* --- carrousel: swipen mag ook een klein stukje zijn --------------------- */
/* Met "mandatory" veerde een korte swipe terug naar het beginpunt, waardoor
   het leek alsof de rail vastzat. "proximity" snapt alleen als je in de buurt
   van een kaart loslaat. */
.rail{scroll-snap-type:x proximity}
.rail,.rail *{-webkit-user-drag:none}
.rail{-webkit-user-select:none;user-select:none}

/* --- footer: geen woordmerk meer, dus compacter -------------------------- */
.foot{padding:clamp(48px,5.5vw,88px) 0 32px}
.foot-word{display:none}

/* --- laatste sectie sluit strakker aan op de footer ---------------------- */
.view > .sec:last-child{padding-bottom:clamp(28px,3.4vw,56px)}


/* ==========================================================================
   VERSIE D, HUISSTIJLELEMENT
   De knik uit het logo: een diagonaal die overgaat in een horizontale lijn.
   Hij komt terug als labelmarkering, als watermerk en als beweging.
   ========================================================================== */
:root{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 60 786 446'%3E%3Cpath fill='%23000' d='M133.3,387.2L411.9,66.1h-106.1L56.3,357.7c-45.7,55.6-6.8,144,65.7,144h683.2v-80.2H149c-17.8,0-27.3-20.9-15.7-34.4Z'/%3E%3C/svg%3E")}

/* 1. het bolletje voor elk sectielabel wordt de knik ---------------------- */
.kicker .dot{
  width:18px;height:10px;border-radius:0;margin-right:11px;vertical-align:0;
  background:var(--accent);
  -webkit-mask:var(--mark) no-repeat left center/contain;
          mask:var(--mark) no-repeat left center/contain;
}
.kicker.on-dark .dot{background:var(--accent)}

/* 2 en 3. watermerk in de hero en in de beeldbanden ---------------------- */
.hero::after,
.band::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:-10px;right:-10px;bottom:auto;left:auto;
  width:auto;max-width:none;aspect-ratio:786/446;
  background:#fff;
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
.hero::after{height:83vh;opacity:.13}
.band::before{height:87%;opacity:.14}

@media (max-width:900px){
  /* smalle schermen: op breedte schalen, anders zie je alleen de balk */
  .hero::after{top:0;height:auto;width:118%;opacity:.11}
  .band::before{top:0;height:auto;width:118%;opacity:.12}
}

/* 4. knoppen: de vulling komt binnen onder de hoek van het logo ----------- */
.btn::after{
  border-radius:0;inset:-60% -14%;
  transform:translateY(118%) rotate(-10deg);
}
.btn:hover::after{transform:translateY(0) rotate(-10deg)}

/* 5. sectorkiezer: de knik markeert de actieve sector --------------------- */
.sw-item{position:relative}
.sw-item::before{
  content:"";position:absolute;left:0;top:50%;
  width:18px;height:10px;background:var(--accent);opacity:0;
  transform:translateY(-50%) translateX(-8px);
  transition:opacity .35s var(--ease),transform .45s var(--slow);
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
.sw-item.on{padding-left:32px}
.sw-item.on::before{opacity:1;transform:translateY(-50%) translateX(0)}

/* 6. menu: de knik markeert de pagina waar je bent ------------------------ */
.ov-link{position:relative}
.ov-link::before{
  content:"";position:absolute;left:0;top:50%;
  width:clamp(16px,2vw,24px);aspect-ratio:786/446;background:var(--accent);
  transform:translateY(-50%);opacity:0;transition:opacity .4s var(--ease);
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
.ov-link.cur{padding-left:clamp(26px,3.2vw,38px)}
.ov-link.cur::before{opacity:1}

/* 7. footer: de knik sluit de pagina af ----------------------------------- */
.foot .wrap::before{
  content:"";display:block;width:clamp(56px,6vw,82px);aspect-ratio:786/446;
  margin-bottom:clamp(24px,3vw,42px);
  background:#fff;opacity:.24;
  -webkit-mask:var(--mark) no-repeat left center/contain;
          mask:var(--mark) no-repeat left center/contain;
}
/* de schuine vulling mag even zichtbaar zijn, anders zie je de hoek niet */
.btn::after{transition:transform .6s cubic-bezier(.34,.72,.24,1)}

/* footer: geen merkteken */
.foot .wrap::before{content:none}

/* --- telefoonnummer in de header breekt niet meer af --------------------- */
.tel{white-space:nowrap}
@media (max-width:760px){
  .tel{font-size:10.5px;letter-spacing:.06em;gap:7px}
  .pulse{width:6px;height:6px}
}

/* --- groot, heel licht merkteken achter het menu ------------------------- */
.ov::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-10px;right:-10px;bottom:auto;left:auto;
  height:90vh;width:auto;max-width:none;aspect-ratio:786/446;
  background:#fff;opacity:.07;
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
.ov-in,.ov-foot{position:relative;z-index:1}

/* geen knik voor het actieve menu-item, alle items op dezelfde kantlijn */
.ov-link::before{content:none}
.ov-link.cur{padding-left:0}
@media (max-width:900px){
  /* op smalle schermen schalen op breedte, anders valt de knik buiten beeld */
  .ov::before{
    top:auto;bottom:11%;right:-40%;
    height:auto;width:150%;
  }
}

/* ===== Zachte scroll en meedrijvende projectenrail ======================= */
/* Actief zodra Lenis geladen is; motion.js zet dan de klasse "motion" op
   <html>. Zonder die klasse verandert er niets aan het ontwerp.            */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* de rail schuift continu mee, dus geen snappunten die ertegenin werken */
html.motion .rail{scroll-snap-type:none}

/* --- kopsectie: het huisstijlelement -------------------------------------
   Vult het lege vlak rechtsboven op de onderpagina's, net als in de hero:
   tegen de boven- en rechterkant aan en heel licht, zodat het achtergrond
   blijft en de kop het werk doet.                                          */
.phead{position:relative;overflow:hidden}
.phead > .wrap{position:relative;z-index:1}
.phead::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-10px;right:-10px;bottom:auto;left:auto;
  width:min(52%,760px);height:auto;max-width:none;aspect-ratio:786/446;
  background:var(--mark-soft);
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
@media (max-width:900px){.phead::after{width:74%}}
@media (max-width:620px){.phead::after{display:none}}