@font-face{font-family:Montserrat;src:url('assets/montserrat.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* Kleur: licht als basis, navy als accent. Elke sectie met .is-dark draait de variabelen om. */
:root{--fs-xs:13px;--fs-s:15px;--fs-m:clamp(17px,1.05vw,19px);--fs-l:clamp(21px,1.6vw,27px);--fs-xl:clamp(30px,3.2vw,52px);--fs-xxl:clamp(42px,5.6vw,100px);--fs-display:clamp(44px,8.4vw,156px);--lh-l:1.4;--ls-l:-.015em;--lh-xl:1.08;--ls-xl:-.02em;--lh-xxl:1;--ls-xxl:-.025em;--lh-display:.94;--ls-display:-.03em;}
:root{--navy:#0f0f70;--navy-deep:#0a0a52;--yellow:#edff00;--paper:#f4f3ef;--stone:#e7e5df;--white:#fff;
  --bg:var(--paper);--fg:var(--navy);--fg-soft:#4b4b7c;--line:rgba(15,15,112,.18);--dot-ring:var(--navy);
  --gutter:clamp(20px,5.4vw,100px);--space-section:clamp(64px,11vw,180px);--space-rule:clamp(24px,2.8vw,44px);--banner-h:100vh;--banner-bleed:0px;--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}
.is-dark{--bg:var(--navy);--fg:#fff;--fg-soft:rgba(255,255,255,.74);--line:rgba(255,255,255,.22);--dot-ring:transparent;background:var(--bg);color:var(--fg)}

*{box-sizing:border-box}html{scroll-padding-top:90px;background:var(--navy)}[aria-hidden="true"]{font-variant-emoji:text}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--navy);font-family:Montserrat,Arial,sans-serif;font-weight:400;font-size:var(--fs-m);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Kleur achter de inhoud (site.js zet data-chrome naar wat onderaan in beeld staat): Safari kleurt er zijn balken mee. */
body:not(.page-light){background:var(--navy)}main{background:var(--paper)}
html[data-chrome=light],html[data-chrome=light] body{background:var(--paper)}html[data-chrome=dark],html[data-chrome=dark] body{background:var(--navy)}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}picture{display:contents}a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:6px}
h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600;letter-spacing:-.02em}
p{font-size:var(--fs-m);line-height:1.7}
h2{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl)}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft)}
.section-space{padding:var(--space-section) var(--gutter)}
.skip-link{position:fixed;left:20px;top:-90px;padding:12px;background:var(--yellow);color:var(--navy);z-index:60}.skip-link:focus{top:20px}

/* Header: wit over beeld, navy op licht en zodra hij vast staat */
/* Altijd vast en altijd dezelfde maatvoering: alleen de kleur verandert zodra de
   balk over lichte inhoud komt. Zo verandert hij tijdens het scrollen niet van vorm. */
.site-header{position:fixed;top:0;left:0;width:100%;padding:30px var(--gutter);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:32px;color:#fff;transition:transform .45s var(--ease),background .35s,box-shadow .35s,color .35s}
.page-light .site-header,.site-header.is-fixed{color:var(--navy)}
.site-header.is-fixed{background:rgba(244,243,239,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,15,112,.1)}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{--wm:82px;--ruit:46px;display:inline-flex;align-items:center;gap:18px;flex:none;color:inherit}.brand svg{display:block;height:auto;fill:currentColor}
.brand-logo{width:var(--ruit);transform:translateY(calc(var(--wm) * -0.0388))}.brand-wm{width:var(--wm)}
.site-header nav{display:flex;gap:clamp(20px,2.8vw,48px);align-items:center}.site-header nav a{font-size:19px;font-weight:400;position:relative;padding:10px 0}
.site-header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:3px;height:1.5px;background:currentColor;transition:right .3s var(--ease)}.site-header nav a:hover:after,.site-header nav a[aria-current=page]:after{right:0}
.menu-toggle{display:none}
.lang-toggle{border:1.5px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.04em;transition:background .25s,color .25s;line-height:1.4;flex:none}
/* Bij hover geel met navy tekst, zowel op de doorzichtige balk (witte tekst) als op de lichte (navy). */
.lang-toggle:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}

/* Kop met lens: een luchtfoto waar de blauwdruk van het nieuwe bedrijvenpark doorheen te zien is.
   Het beeld wordt in WebGL getekend (banner.js); de sectie is hoger dan het scherm, zodat de lens
   tijdens het scrollen kan groeien. Zonder WebGL of JavaScript blijft de foto met de kop erover staan.
   --banner-h is bewust 100vh en geen 100dvh: op een telefoon verandert dvh zodra de adresbalk
   inschuift, precies bij de eerste scroll. De hele pagina werd dan opnieuw opgemaakt en het canvas,
   dat zijn maat bij het laden kreeg, werd een adresbalk hoger uitgerekt. */
.banner{position:relative;height:calc(var(--banner-h) + 230vh);background:var(--navy-deep)}
/* Geen achtergrondkleur op de plakkende stage: Safari zou die als effen balk onder zijn werkbalk doortrekken (de sectie zelf is navy). */
.banner-stage{position:sticky;top:0;height:calc(var(--banner-h) + var(--banner-bleed));margin-bottom:calc(-1 * var(--banner-bleed));overflow:hidden;touch-action:pan-y;background:50%/cover no-repeat}
.banner-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}.banner-hud{position:absolute;inset:0 0 var(--banner-bleed);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2.6vw,34px) var(--gutter);color:#fff;pointer-events:none}
/* Greep over de lens op aanraakschermen; banner.js legt hem elk frame over de lens. Een vinger die hier
   begint, sleept of gooit de lens, en de browser neemt die aanraking niet als scrollen. */
.banner-grip{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;will-change:transform}
/* De kop staat in de HTML en wordt door banner.js in het beeld getekend; hier blijft hij voor voorlezers. */
.banner-title{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);max-width:12ch;font-weight:600;font-size:clamp(40px,9vw,150px);line-height:.95;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(5,9,47,.45)}
.js .banner:not(.is-static) .banner-title{width:1px;height:1px;left:0;right:auto;top:0;transform:none;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.banner.is-static .banner-stage{background-image:url('assets/repp-banner-bedrijfslocatie-1200.webp')}
html:not(.js) .banner-canvas,.banner.is-static .banner-canvas{display:none}
/* Zonder WebGL groeit er niets, dus vervalt ook de extra scrolllengte */
html:not(.js) .banner,.banner.is-static{height:var(--banner-h)}
/* Slotzin: komt pas in beeld als de blauwdruk het scherm vult */
.banner-under{position:absolute;inset:0 0 var(--banner-bleed);display:flex;align-items:flex-end;padding:0 var(--gutter) var(--space-section);opacity:0;will-change:opacity;pointer-events:none;background:linear-gradient(to top,rgba(10,10,82,.96) 0%,rgba(10,10,82,.92) 30%,rgba(10,10,82,.5) 45%,rgba(10,10,82,0) 60%)}
/* Elke regel van de slotzin is in de HTML al afgebroken (span.ln, per regel geanimeerd); de regels zelf
   mogen dus nooit opnieuw afbreken, anders komt een los woord ('toetsen') op een eigen regel. */
.banner-under p{max-width:none;font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl);font-weight:600;color:#fff}.banner-under p .ln{display:block;white-space:nowrap}.banner-under p .ln>span{transform:translateY(108%);transition:transform 1.1s var(--ease-out)}.banner-under p .ln:nth-child(2)>span{transition-delay:.09s}.banner-under p .ln:nth-child(3)>span{transition-delay:.18s}.banner-under p.is-in .ln>span{transform:none}
.banner-under i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:currentColor;margin-left:.07em}

/* Onthullen bij scrollen */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease-out)}.reveal.is-in{opacity:1;transform:none}
.reveal[data-reveal="2"]{transition-delay:.12s}.reveal[data-reveal="3"]{transition-delay:.24s}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.ln>span{display:block}
.reveal[data-reveal=lines]{opacity:1;transform:none}.reveal[data-reveal=lines] .ln>span{transform:translateY(108%);transition:transform 1.1s var(--ease-out)}
.reveal[data-reveal=lines] .ln:nth-child(2)>span{transition-delay:.09s}.reveal[data-reveal=lines] .ln:nth-child(3)>span{transition-delay:.18s}
.reveal[data-reveal=lines].is-in .ln>span{transform:none}
.reveal[data-reveal=image]{opacity:1;transform:none;clip-path:inset(22% 0 0 0);transition:clip-path 1.4s var(--ease-out)}.reveal[data-reveal=image].is-in{clip-path:inset(0)}
[data-parallax]{overflow:hidden}[data-parallax] img{transform:translateY(calc(var(--pp,0)*-3.5%)) scale(1.08);will-change:transform}

/* Intro */
.intro{padding-bottom:clamp(60px,7vw,110px)}.brand-line{width:230px;margin:0 0 clamp(36px,4vw,60px)}
.location-copy,.municipal-copy{container-type:inline-size}
/* Elke regel van deze koppen past op één regel: de letter schaalt mee met de kolom (per taal de langste regel). */
.intro .display{font-size:min(var(--fs-display),calc((100vw - 2 * var(--gutter)) * .12))}html[lang=en] .intro .display{font-size:min(var(--fs-display),calc((100vw - 2 * var(--gutter)) * .09))}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 8%;margin-top:clamp(44px,5vw,80px);max-width:1260px}
.intro-lead{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500}
.intro-cols div p+p{margin-top:16px}.intro-cols div p{color:var(--fg-soft)}

/* Drie ingangen als grote regels */
.ways{margin-top:var(--space-rule);border-top:1px solid var(--line)}
.ways a{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:6px 24px;padding:var(--space-rule) 0;border-bottom:1px solid var(--line);overflow:hidden}
.way-num{font-size:var(--fs-xs);font-weight:600;color:var(--fg-soft);align-self:start;padding-top:.9em}
.way-sub{grid-column:2;font-size:var(--fs-s);font-weight:500;color:var(--fg-soft)}
.way-title{grid-column:2;font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);font-weight:600;transition:transform .6s var(--ease-out)}
.ways svg{grid-column:3;grid-row:1/span 2;width:clamp(28px,3vw,52px);height:auto;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .5s var(--ease-out)}
.ways a:hover .way-title{transform:translateX(18px)}.ways a:hover svg{transform:translate(6px,-6px)}
.way-preview{position:fixed;left:0;top:0;width:clamp(220px,20vw,340px);aspect-ratio:4/3;pointer-events:none;z-index:15;opacity:0;scale:.85;transition:opacity .35s,scale .45s var(--ease-out);overflow:hidden;box-shadow:0 30px 60px rgba(10,10,82,.28)}.way-preview.is-on{opacity:1;scale:1}.way-preview img{width:100%;height:100%;object-fit:cover}
/* Brief: de vraag zelf is één gele knop naar brief.repp.nl, met de gewone knopanimatie van de site
   (.button: bij hover omlijnd, de pijl schuift mee). */
.letter-bar{display:flex;gap:10px 28px;align-items:center;flex-wrap:wrap;margin-top:var(--space-rule)}
.button.letter-button{margin-top:0;gap:18px;padding:14px 22px;font-size:var(--fs-m);background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.button.letter-button:hover{background:transparent;color:var(--fg);border-color:var(--fg);gap:26px}
/* Contact als geel knopje in de navigatie, alleen op projectpagina's desktop (body.is-project). */
@media(min-width:1101px){
.is-project [data-t="nav_contact"]{background:var(--yellow);color:var(--navy);border-radius:999px;padding:4px 18px;font-size:19px;font-weight:400;letter-spacing:0;transition:background .25s,color .25s,border-color .25s}
.is-project [data-t="nav_contact"]:hover{background:transparent;color:inherit;outline:1.5px solid currentColor;outline-offset:-1.5px}
.is-project [data-t="nav_contact"]:after{display:none}
}
.partners-bar{margin-top:var(--space-rule);padding-top:var(--space-rule);border-top:1px solid var(--line)}.partners-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:clamp(20px,2.5vw,32px)}.partners-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,52px)}/* Logo's in rust gedempt navy (55%); bij hover vol navy met een gele streep eronder. Een geel logo viel weg op het lichte
   papier en een vlak beloofde een knop die het niet is. */
.partners-list li{display:flex;align-items:center;width:160px;height:48px;box-sizing:content-box;padding:10px 0;margin:-10px 0;position:relative;transition:none}.partners-list li:after{content:'';position:absolute;left:0;right:100%;bottom:6px;height:2px;background:var(--yellow);transition:right .35s var(--ease)}.partner-logo{display:block;width:100%;height:100%;background-color:var(--navy);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;opacity:.55;transition:opacity .3s}.logo-reno{-webkit-mask-image:url('assets/logo-reno.svg');mask-image:url('assets/logo-reno.svg')}.logo-fred{-webkit-mask-image:url('assets/logo-fred.svg');mask-image:url('assets/logo-fred.svg')}.logo-romd{-webkit-mask-image:url('assets/logo-romd.svg');mask-image:url('assets/logo-romd.svg')}.logo-dordrecht{-webkit-mask-image:url('assets/logo-dordrecht.svg');mask-image:url('assets/logo-dordrecht.svg')}.partners-list li:hover:after{right:0}.partners-list li:hover .partner-logo{opacity:1}@media(max-width:640px){.partners-list li{width:120px;height:36px;padding:8px 0;margin:-8px 0}.partners-list{gap:16px 28px}}

/* Projecten: portfolio van beeldvullende lagen. Zonder JS, op mobiel en bij minder beweging gewoon onder elkaar. */
.work{position:relative;padding-top:0}
/* De kop staat in het beeld. De sluier loopt uit op niets, zodat er geen balk
   ontstaat maar de letters wel leesbaar blijven op een lichte foto. */
.work-head{position:absolute;top:0;left:0;right:0;z-index:6;padding:clamp(104px,14vh,172px) var(--gutter) clamp(70px,12vh,140px);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6);background:linear-gradient(to bottom,rgba(0,0,0,.58) 0%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.15) 78%,rgba(0,0,0,0) 100%)}
.work-head .display{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl)}
.work-head p{margin-top:14px;font-size:var(--fs-s);color:rgba(255,255,255,.82)}
.slide{isolation:isolate;position:relative;height:min(88svh,920px);min-height:520px;overflow:hidden;background:var(--navy-deep);color:#fff;margin-bottom:10px}
.slide-media{position:absolute;inset:0}.slide-media img{width:100%;height:100%;object-fit:cover}
.slide:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.36) 38%,rgba(0,0,0,0) 70%);pointer-events:none}
.slide-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--gutter) clamp(34px,5vw,72px);display:grid;grid-template-columns:1fr minmax(260px,440px);grid-template-areas:"place place" "title title" "status side";column-gap:6%;align-items:end}.slide-copy>div:first-child{display:contents}.slide-copy .place{grid-area:place}.slide-title{grid-area:title}.slide-copy>div>.status{grid-area:status;justify-self:start;align-self:end;margin-bottom:6px}.slide-side{grid-area:side}
.slide-title{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:10px 0 22px;white-space:nowrap}.slide-title a{display:inline-block}
.slide .place{color:rgba(255,255,255,.8);font-size:var(--fs-s);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.slide-side p{font-size:var(--fs-m);line-height:1.65;color:rgba(255,255,255,.86);margin-bottom:6px}
.slide .text-link{margin-top:14px}
.portfolio.is-pinned{position:relative;height:calc(var(--n)*100svh)}
.portfolio.is-pinned .portfolio-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.portfolio.is-pinned .slide{position:absolute;inset:0;height:auto;min-height:0;margin:0;clip-path:inset(calc((1 - var(--r,0))*100%) 0 0 0)}
.portfolio.is-pinned .slide:first-child{clip-path:none}
.portfolio.is-pinned .slide-media img{transform:scale(calc(1.18 - var(--r,1)*.18 + var(--o,0)*.06));filter:brightness(calc(1 - var(--o,0)*.45))}
.portfolio.is-pinned .slide-copy{transform:translateY(calc((1 - var(--r,1))*90px - var(--o,0)*40px));opacity:calc(min(1, (var(--r,1) - .3)*3) - var(--o,0)*7)}

/* Statuslabel, gevuld vanuit projects.json */
.status{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-m);font-weight:500;line-height:1;padding:13px 22px 13px 18px;border:1px solid var(--line);border-radius:30px;white-space:nowrap;color:var(--fg)}
.slide .status{border-color:rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(0,0,0,.28)}
.status i{width:11px;height:11px;border-radius:50%;background:var(--fg-soft);flex:none}
.status[data-tone=live] i{background:var(--yellow);outline:1px solid var(--dot-ring);animation:pulse 2.4s ease-out infinite}
.slide .status[data-tone=live] i{outline:0}
.status[data-tone=soon] i{background:var(--fg)}.status[data-tone=closed]{color:var(--fg-soft)}
.status small{font-size:var(--fs-xs);font-weight:450;opacity:.8}.status small:before{content:'·';margin-right:8px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(237,255,0,.6)}70%{box-shadow:0 0 0 8px rgba(237,255,0,0)}100%{box-shadow:0 0 0 0 rgba(237,255,0,0)}}
.status-updated{font-size:var(--fs-xs);color:var(--fg-soft)}
.place{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--fg-soft)}
.project-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Links en knoppen */
.text-link{font-size:var(--fs-s);font-weight:500;display:inline-flex;align-items:center;gap:20px;padding:10px 0;border-bottom:1.5px solid currentColor;margin-top:18px;transition:gap .35s var(--ease),color .25s}.text-link:hover{gap:32px}
.is-dark .text-link:hover,.slide .text-link:hover{color:var(--yellow)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;border:1.5px solid var(--fg);background:var(--fg);color:var(--bg);padding:19px 28px;border-radius:999px;font-size:var(--fs-s);font-weight:600;margin-top:22px;cursor:pointer;transition:background .3s,color .3s,gap .35s var(--ease),border-color .3s}
.button:hover{background:transparent;color:var(--fg);gap:54px}
.is-dark .button{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}.is-dark .button:hover{background:transparent;color:var(--yellow)}
.button[disabled]{opacity:.6;cursor:default}

/* Locatie aanbieden */
.location{display:grid;grid-template-columns:1fr 1fr;background:var(--stone);color:var(--navy)}
.location-image{position:relative;min-height:760px}.location-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.location-copy{padding:var(--space-section) var(--gutter) var(--space-section) clamp(40px,6vw,110px);align-self:center}
.location h2{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);margin-bottom:34px}.location h2{font-size:min(var(--fs-xxl),11cqi)}html[lang=en] .location h2{font-size:min(var(--fs-xxl),8.4cqi)}.location p{font-size:var(--fs-m);line-height:1.7;margin-bottom:16px;max-width:560px}

/* Formulieren */
.form{margin-top:34px;display:grid;gap:24px;max-width:540px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:grid;gap:8px;position:relative}.field label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}.field label span{font-weight:450;opacity:.7}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:10px 0 12px;font:inherit;font-size:var(--fs-m);font-weight:500;color:inherit;border-radius:0;transition:border-color .25s}
.field input:hover,.field textarea:hover{border-bottom-color:currentColor}
.field input::placeholder,.field textarea::placeholder{color:inherit;opacity:.4;font-weight:450}.field textarea{min-height:88px;resize:vertical}
.field:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;transition:width .4s var(--ease-out)}.field:focus-within:after{width:100%}
.location .field input{border-bottom-color:rgba(15,15,112,.35)}
.form .button{margin-top:8px;justify-self:start}.form-foot{font-size:var(--fs-xs);line-height:1.7;opacity:.85}.form-foot a{text-decoration:underline;text-underline-offset:3px}
.form-status{font-size:var(--fs-s);line-height:1.6}.form-status:empty{display:none}.form-status[data-kind=error]{font-weight:600}
.form.is-sent .field,.form.is-sent .button,.form.is-sent .form-foot{display:none}.form.is-sent .form-status{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500;animation:fade-in .6s var(--ease)}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* Gemeenten */
.municipal{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}.municipal h2{margin-bottom:30px;font-size:min(var(--fs-xxl),10.6cqi)}html[lang=en] .municipal h2{font-size:min(var(--fs-xxl),12.4cqi)}.municipal p{max-width:560px}
.soon{display:grid;gap:10px;justify-items:start;margin:34px 0 30px;padding:24px 26px;border:1.5px solid var(--line);max-width:560px;transition:border-color .3s,background .3s,color .3s}
.soon:hover{border-color:var(--navy);background:var(--navy);color:#fff}.soon:hover .status{color:#fff;border-color:rgba(255,255,255,.35)}.soon:hover .status i{background:var(--yellow)}
.soon strong{font-weight:600;font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l)}.soon>span:last-child{font-size:var(--fs-s);opacity:.8;line-height:1.55}
.soon .status i{animation:pulse 2.4s ease-out infinite}
.municipal-case{display:block}.municipal-case .project-photo{display:block;aspect-ratio:1.2}.municipal-case .project-photo img{width:100%;height:100%;object-fit:cover}
.municipal-case>div{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-size:var(--fs-m);font-weight:600}.municipal-case>div span:last-child{transition:transform .4s var(--ease-out)}.municipal-case:hover>div span:last-child{transform:translateX(6px)}.municipal-case .status{margin-top:12px}

.municipal p+p{margin-top:16px}.municipal-links{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap;margin-top:10px}.municipal-links .button,.municipal-links .text-link{margin-top:0}
/* Footer als slotstuk */
.site-footer{padding:0;overflow:hidden}.footer-inner{padding:var(--space-section) var(--gutter) 0}
.footer-top{display:grid;grid-template-columns:1.25fr 1fr;gap:34px 8%;align-items:end;padding-bottom:var(--space-rule);border-bottom:1px solid var(--line)}
.footer-top h2{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl)}
.footer-contact{display:grid;gap:10px;justify-items:start}.footer-contact a{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl);font-weight:600;color:var(--yellow);position:relative}
.footer-contact a:after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--yellow);transition:right .35s var(--ease)}.footer-contact a:hover:after{right:0}
.footer-contact p{font-size:var(--fs-s);color:var(--fg-soft);margin-top:14px}
.footer-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px;padding:var(--space-rule) 0 10px;font-size:var(--fs-s);color:var(--fg-soft)}
.footer-meta address{font-style:normal;line-height:1.6}.footer-meta nav,.footer-legal{display:flex;gap:10px 26px;flex-wrap:wrap}
.footer-meta .social-link{display:inline-flex;align-items:center;gap:6px}.footer-meta a,.footer-meta button{transition:color .25s}.footer-meta a:hover,.footer-meta button:hover{color:#fff}
.footer-meta button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.social-link{display:inline-flex;align-items:center;gap:5px;padding:6px;margin:-6px}
.footer-mark{display:block;padding:clamp(20px,3vw,50px) 0 clamp(14px,1.6vw,28px);cursor:pointer}.footer-mark svg{display:block;width:100%;height:auto;fill:#fff;transform:translateY(calc((1 - var(--fp,1))*38%));pointer-events:none}

/* Projectpagina's */
.project-hero{position:relative;height:min(78svh,860px);min-height:500px;display:grid;align-items:end;overflow:hidden}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.js .project-hero img{animation:hero-img 1.8s var(--ease-out) both}@keyframes hero-img{from{transform:scale(1.08)}to{transform:none}}
.project-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,rgba(0,0,0,.1) 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,.34) 66%,rgba(0,0,0,.76) 100%)}
.project-hero-copy{position:relative;z-index:1;padding:clamp(40px,6vw,90px) var(--gutter)}.project-hero+.section-space{padding-top:clamp(40px,6vw,90px)}.project-hero-copy .place{margin-bottom:10px;color:rgba(255,255,255,.82)}
.project-hero-copy h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:6px 0 24px;white-space:nowrap}.project-hero-copy .project-meta{gap:18px}.project-hero-copy .project-sub{margin:-14px 0 20px;color:rgba(255,255,255,.72);font-size:clamp(13px,1.5vw,16px);font-weight:400;line-height:1.35}
.site-button{margin-top:30px;align-self:flex-start;justify-self:start}
.project-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:clamp(40px,7vw,120px);align-items:start}
.project-body .lead{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500;margin-bottom:40px}
.project-body p+p{margin-top:16px}.project-body h2{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl);margin:70px 0 22px}.project-body h2:first-child{margin-top:0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.facts div{background:var(--paper);padding:22px 24px}.facts dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:8px}.facts dd{margin:0;font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500}
.aside{position:sticky;top:96px;background:var(--white);padding:34px 32px;box-shadow:0 1px 0 var(--line)}.aside h2{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);margin:0 0 10px}.aside>p{font-size:var(--fs-s);color:var(--fg-soft)}.aside .form{margin-top:22px;max-width:none}
.units{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.units li{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}.units li:hover{padding-left:10px}
.units strong{font-weight:600;font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l)}.units span{font-size:var(--fs-s);color:var(--fg-soft);line-height:1.6}.units em{font-style:normal;font-size:var(--fs-s);font-weight:600;white-space:nowrap}
.back-link{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-s);font-weight:500;margin-bottom:26px;color:rgba(255,255,255,.82);transition:color .25s,gap .3s var(--ease)}.back-link:hover{color:#fff;gap:18px}
.notice{border-left:3px solid var(--navy);padding:6px 0 6px 20px;font-size:var(--fs-m);line-height:1.7;margin:26px 0}
.partners{display:flex;gap:44px;flex-wrap:wrap;margin-top:54px;font-size:var(--fs-xs);color:var(--fg-soft)}.partners b{display:block;color:var(--fg);font-weight:600;margin-top:4px;font-size:var(--fs-m)}
.more-projects{border-top:1px solid var(--line)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.more-grid a{display:block}.more-grid .project-photo{display:block;overflow:hidden}
.more-grid img{aspect-ratio:1.4;object-fit:cover;width:100%;transition:transform .9s var(--ease-out)}.more-grid a:hover img{transform:scale(1.04)}.more-grid h3{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);margin:10px 0 10px}

/* Cookiekeuze */
.consent{position:fixed;left:20px;right:20px;bottom:20px;z-index:50;max-width:460px;margin-left:auto;padding:26px 28px;box-shadow:0 24px 70px rgba(5,9,47,.4);opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.consent.is-open{opacity:1;transform:none}.consent:focus{outline:0}.consent.is-open~.wa-btn{opacity:0;visibility:hidden}.consent[hidden]{display:none}.consent p{font-size:var(--fs-s);line-height:1.65}.consent p+p{margin-top:8px}.consent a{text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:18px}.consent .button{margin:0;padding:13px 22px;gap:0}
.consent-min{background:none;border:0;padding:8px 0;font-size:var(--fs-s);font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* 404: perceel 404 */
.notfound{padding-top:clamp(130px,13vw,190px)}.nf-code{font-size:clamp(130px,21vw,340px);font-weight:750;line-height:.78;letter-spacing:-.075em;margin:0 0 clamp(18px,2.4vw,36px) -.04em;color:var(--navy)}.nf-code .ln{padding-bottom:.06em}
.nf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px 6%;align-items:center}
.notfound .display{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl)}.notfound .lead{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500;margin-top:30px;max-width:520px}
.plot{margin:0;position:relative}.plot-svg{display:block;width:100%;height:auto;color:var(--navy);overflow:visible}
.plot-toggle{position:absolute;right:0;top:-6px;z-index:2;display:inline-flex;border:1.5px solid var(--navy);border-radius:40px;padding:3px;background:var(--paper)}
.plot-toggle button{border:0;background:none;color:var(--navy);font-size:var(--fs-xs);font-weight:600;padding:7px 16px;border-radius:40px;cursor:pointer;transition:background .3s,color .3s}.plot-toggle button[aria-pressed=true]{background:var(--navy);color:var(--paper)}
.plot .dot{fill:rgba(15,15,112,.14)}.plot .road rect{fill:rgba(15,15,112,.07)}.plot .road-mid{stroke:rgba(15,15,112,.35);stroke-width:2;stroke-dasharray:14 12;fill:none}
.plot .lot{fill:rgba(15,15,112,.035)}.plot .boundary{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:10 7;animation:ants 1.6s linear infinite}@keyframes ants{to{stroke-dashoffset:-34}}
.plot .dim path{stroke:currentColor;stroke-width:1.2;fill:none;opacity:.55}.plot text{fill:currentColor;font-family:Montserrat,Arial,sans-serif}.plot .dim text{font-size:12px;font-weight:600;text-anchor:middle;opacity:.7}
.plot .north path{fill:currentColor}.plot .north text{font-size:13px;font-weight:700;text-anchor:middle}
.plot .lot-label{font-size:17px;font-weight:700;letter-spacing:-.01em}.plot .lot-sub{font-size:12px;font-weight:500;opacity:.7}
.plot .layer-nu path{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.55}
.plot .cone path:first-child{fill:var(--yellow);stroke:currentColor;stroke-width:1.6;opacity:1}.plot .cone path{opacity:1}
.plot .layer-nu,.plot .sign text{transition:opacity .5s var(--ease)}
.plot .layer-straks rect{fill:var(--paper);stroke:currentColor;stroke-width:2}.plot .layer-straks rect.door{fill:rgba(15,15,112,.12);stroke-width:1.4}.plot .layer-straks path{stroke:currentColor;stroke-width:1.6;fill:none}
.plot .unit-no{font-size:12px;font-weight:700;text-anchor:middle}.plot .tree circle:first-child{fill:rgba(15,15,112,.1);stroke:currentColor;stroke-width:1.6}.plot .tree circle:last-child{fill:currentColor}
.plot .p-in{opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:50% 100%;transition:opacity .45s var(--ease),transform .6s var(--ease-out);transition-delay:0s}
.plot[data-state=straks] .p-in{opacity:1;transform:none;transition-delay:var(--d)}.plot[data-state=straks] .layer-nu{opacity:0}
.plot .sign rect{fill:var(--yellow);stroke:currentColor;stroke-width:2}.plot .sign .post{stroke:currentColor;stroke-width:3}.plot .sign text{font-size:15px;font-weight:800;text-anchor:middle;letter-spacing:.04em}
.plot .sign-straks,.plot[data-state=straks] .sign-nu{opacity:0}.plot[data-state=straks] .sign-straks{opacity:1;transition-delay:1.3s}
.plot .sign{transform-box:fill-box;transform-origin:50% 100%}.plot[data-state=straks] .sign{animation:wobble .7s var(--ease-out) 1.25s}@keyframes wobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}
.plot-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:18px 0 0}.plot-facts div{background:var(--paper);padding:14px 16px}.plot-facts dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:6px}.plot-facts dd{margin:0;font-size:var(--fs-s);font-weight:600;line-height:1.3}
.plot .is-straks,.plot[data-state=straks] .is-nu{display:none}.plot[data-state=straks] .is-straks{display:inline}
@media(max-width:1000px){.nf-grid{grid-template-columns:1fr}.plot{margin-top:20px}}
@media(max-width:620px){.plot-facts{grid-template-columns:1fr 1fr}.plot-toggle{position:static;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.plot .boundary{animation:none}}
/* Bedank- en tekstpagina's */
.thanks h1{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);margin-bottom:30px}.thanks .lead{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);font-weight:500;margin-bottom:18px}.thanks .text-link{margin-top:30px}.thanks a:not(.text-link){text-decoration:underline;text-underline-offset:4px}
.text-page{max-width:780px}.text-page h1{font-size:var(--fs-xxl);line-height:var(--lh-xxl);letter-spacing:var(--ls-xxl);margin-bottom:44px}.text-page h2{font-size:var(--fs-l);line-height:var(--lh-l);letter-spacing:var(--ls-l);margin:52px 0 14px}
.text-page p,.text-page li{font-size:var(--fs-m);line-height:1.75}.text-page p+p{margin-top:14px}.text-page ul{padding-left:22px;margin:12px 0}.text-page a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}.text-page address{font-style:normal;line-height:1.75;font-size:var(--fs-m)}

/* Boven 1700px loopt de inhoud niet door tot de rand maar staat hij in een
   kolom van 1560px. Dat zit in de gutter zelf, zodat de balk, de kop en elke
   sectie dezelfde rooilijn houden. */
@media(min-width:1700px){:root{--gutter:max(100px,calc((100vw - 1560px)/2))}}
@media(max-width:1000px){.project-body{grid-template-columns:1fr}.aside{position:static}.more-grid{grid-template-columns:1fr 1fr}.intro-cols{grid-template-columns:1fr}.slide-copy{grid-template-columns:1fr;grid-template-areas:"place" "title" "status" "side";row-gap:14px}.slide-title,.project-hero-copy h1{white-space:normal;text-wrap:balance}}
/* Hamburgermenu op telefoon en tablet; het menu bovenin pas vanaf laptopbreedte. */
@media(max-width:1100px){
  /* De foto loopt onder de zwevende werkbalk van Safari door; de intro schuift eroverheen. */
  :root{--banner-bleed:140px}.intro{position:relative;z-index:1;background:var(--paper)}
  .menu-toggle{display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;padding:10px 0;font-size:var(--fs-s);font-weight:600;cursor:pointer;position:relative;z-index:22}
  .menu-toggle span{position:relative;width:22px;height:8px}.menu-toggle span:before,.menu-toggle span:after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:top .3s var(--ease),transform .3s var(--ease)}.menu-toggle span:before{top:0}.menu-toggle span:after{top:6.5px}
  .menu-toggle[aria-expanded=true] span:before{top:3.25px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:after{top:3.25px;transform:rotate(-45deg)}
  .site-header nav{display:none;position:fixed;inset:0;background:var(--navy);color:#fff;padding:110px var(--gutter) 40px;flex-direction:column;align-items:flex-start;gap:6px;z-index:21}
  .site-header nav.open{display:flex;animation:menu-in .4s var(--ease-out)}@keyframes menu-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  .site-header nav a{font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl);font-weight:600}
  .lang-toggle{font-size:var(--fs-s);padding:8px 16px;margin-top:12px}
  .menu-open .site-header{color:#fff;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.site-header .brand{position:relative;z-index:22}
}
@media(max-width:800px){
  html{scroll-padding-top:24px}body{font-size:var(--fs-m)}
  .site-header{padding-top:max(22px,env(safe-area-inset-top,0px));padding-bottom:22px;align-items:center}.brand{--wm:66px;--ruit:37px;gap:12px}
  .banner-stage{margin-top:calc(-1 * env(safe-area-inset-top,0px));top:calc(-1 * env(safe-area-inset-top,0px));height:calc(var(--banner-h) + env(safe-area-inset-top,0px) + var(--banner-bleed))}
  /* De slotzin blijft boven de adresbalk: het verschil tussen de grote en de zichtbare viewport komt bij de marge. */
  .banner-under{padding-bottom:var(--space-section);padding-bottom:calc(var(--space-section) + 100lvh - 100dvh);background:linear-gradient(to top,rgba(10,10,82,.98) 0%,rgba(10,10,82,.88) 18%,rgba(10,10,82,.2) 34%,rgba(10,10,82,0) 46%)}
  .brand-line{width:180px}.ways a{grid-template-columns:1fr auto;gap:6px 16px}.way-num{display:none}.way-sub,.way-title{grid-column:1}.ways svg{grid-column:2}
  .way-preview{display:none}
  .letter-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .button.letter-button{margin-left:0}
  .banner-under p{font-size:clamp(17px,4.6vw,30px);line-height:1.3;max-width:none}
  .slide{height:78svh;min-height:480px;margin-bottom:0}
  .slide-copy{row-gap:4px}.slide-title{margin-top:2px}
  .work-head{padding-top:clamp(72px,9vh,120px)}
  .work-head p span:first-child,.work-head p br{display:none}
  .location{grid-template-columns:1fr}.location-image{min-height:0;aspect-ratio:1.25;order:2}.location-copy{padding:var(--space-section) var(--gutter)}
  .form-row{grid-template-columns:1fr}.municipal{grid-template-columns:1fr;gap:50px}
  .footer-top{grid-template-columns:1fr}.footer-meta{flex-direction:column;gap:30px}
  /* Rustiger voet op mobiel: de sociale links alleen als icoon (de naam blijft voor voorlezers), de
     regel met privacy, cookies en het jaar iets ruimer, de iconen aan het eind van die regel. */
  .footer-legal{gap:12px 22px;align-items:center}.footer-legal .social-link{order:1;display:inline-flex}.footer-legal .social-link svg{width:20px;height:20px}
  .footer-legal .social-link span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .consent{left:12px;right:12px;bottom:12px;padding:20px 22px}.consent-actions{gap:8px 18px;margin-top:14px}
  .project-hero{height:min(66svh,580px);min-height:440px}
  .facts{grid-template-columns:1fr}.units li{grid-template-columns:1fr;gap:6px}.more-grid{grid-template-columns:1fr}.aside{padding:28px 22px}
  .status{font-size:var(--fs-xs);padding:8px 13px 8px 11px;gap:8px}.status i{width:8px;height:8px}
}
@media(max-width:600px){.status small{display:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}
  .reveal,.reveal[data-reveal=lines] .ln>span{opacity:1;transform:none}.reveal[data-reveal=image]{clip-path:none}
  [data-parallax] img{transform:none}.banner{height:var(--banner-h)}.footer-mark svg{transform:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- WhatsApp zwevende knop ---------- */
.wa-btn{position:fixed;bottom:24px;right:24px;z-index:900;display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);text-decoration:none;transition:transform .2s,box-shadow .2s}
.wa-btn:hover,.wa-btn:focus-visible{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.24);outline:none}
.wa-btn svg{width:32px;height:32px;fill:currentColor}
@media(max-width:800px){.wa-btn{bottom:20px;right:16px}}