:root{
  --sand:#eceae5; --sand2:#e2dfd7; --sand3:#d3cfc4; --ink:#17181a; --dark:#1a1b1c;
  --bronze:#a3773f; --bronze-l:#dcbc8d; --paper:#f7f6f3;
  --muted:rgba(23,24,26,.66); --line:rgba(23,24,26,.16);
  --pad:clamp(20px,5vw,64px);
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--bronze);color:#fff}
.label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:600}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.06}
h2{font-size:clamp(30px,4vw,56px)}
.sec{padding:clamp(56px,8vw,128px) var(--pad)}
.link{display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid currentColor;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:color .25s,gap .25s var(--ease)}
.link:hover{color:var(--bronze);gap:16px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* progress + cursor */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--bronze);z-index:200}
#cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bronze);opacity:0;display:grid;place-items:center;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s;mix-blend-mode:normal}
#cursor span{font-size:8.25px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s;font-weight:600}
#cursor.big{width:44px;height:44px;margin:-22px 0 0 -22px}
#cursor.big span{opacity:1}
@media(hover:none){#cursor{display:none}}

/* intro */
#intro{position:fixed;inset:0;z-index:500;background:var(--dark);display:grid;place-items:center;transition:transform .9s var(--ease) .15s}
#intro.gone{transform:translateY(-100%)}
html.seen #intro:not(.replay){display:none}
#intro .in{display:flex;flex-direction:column;align-items:center;gap:22px;color:var(--paper)}
#intro img{width:84px;filter:invert(1) brightness(1.9);opacity:0;animation:fade .8s .1s forwards}
#intro .word{font-size:clamp(34px,7vw,72px);font-weight:300;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;overflow:hidden}
#intro .word i{display:inline-block;font-style:normal;transform:translateY(110%);animation:up .7s var(--ease) forwards}
#intro .word i:nth-child(1){animation-delay:.35s}#intro .word i:nth-child(2){animation-delay:.45s}#intro .word i:nth-child(3){animation-delay:.55s}#intro .word i:nth-child(4){animation-delay:.65s}
#intro .ln{height:1px;width:0;background:var(--bronze-l);animation:ln 1s .5s var(--ease) forwards}
@keyframes up{to{transform:none}}@keyframes fade{to{opacity:1}}@keyframes ln{to{width:min(60vw,320px)}}

/* header */
header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:10px var(--pad);background:rgba(236,234,229,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:transform .4s var(--ease)}
header.hide{transform:translateY(-100%)}
.logo img{width:64px;height:auto;transition:transform .6s var(--ease)}
.logo:hover img{transform:rotate(-6deg) scale(1.06)}
nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
nav a{position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--bronze);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav a:hover::after,nav a.on::after{transform:scaleX(1);transform-origin:left}
nav a.cta{color:var(--bronze);border-bottom:1px solid var(--bronze)}
nav a.cta::after{display:none}
#burger{display:none;width:40px;height:40px;position:relative}
#burger i{position:absolute;left:8px;right:8px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
#burger i:nth-child(1){top:15px}#burger i:nth-child(2){top:24px}
body.menu #burger i:nth-child(1){top:20px;transform:rotate(45deg)}body.menu #burger i:nth-child(2){top:20px;transform:rotate(-45deg)}
@media(max-width:940px){
  #burger{display:block}
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(236,234,229,.98)}
  nav{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:90px var(--pad) 40px;background:var(--dark);color:var(--paper);font-size:clamp(28px,8vw,44px);letter-spacing:-.01em;text-transform:none;transform:translateY(-100%);transition:transform .6s var(--ease)}
  body.menu nav{transform:none}
  body.menu header{background:transparent;border-color:transparent}
  body.menu #burger i{background:var(--paper)}
  body.menu .logo img{filter:invert(1) brightness(1.9)}
}

/* hero */
.hero{position:relative;height:calc(100vh - 85px);min-height:560px;max-height:900px;overflow:hidden;background:var(--dark);color:var(--paper)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.slide.on img{animation:kb 9s ease-out forwards}
@keyframes kb{to{transform:scale(1.12) translate(-1.2%,-.8%)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,13,14,.86) 0%,rgba(12,13,14,.62) 30%,rgba(12,13,14,.18) 62%,rgba(12,13,14,.1) 100%)}
.hero-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--pad);display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-end}
.hero h1{font-weight:300;font-size:clamp(40px,7vw,108px);letter-spacing:-.04em;line-height:1;max-width:15ch}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.04em .06em .16em;margin:-.04em -.06em -.16em}
.hero h1 .w b{display:inline-block;font-weight:inherit;transform:translateY(105%);transition:transform 1s var(--ease)}
body.ready .hero h1 .w b{transform:none}
.hero h1 em{font-style:normal;color:var(--bronze-l);font-weight:500}
.hero .label{color:var(--bronze-l);display:block;margin-bottom:18px}
.hero-side{margin-left:auto;display:flex;flex-direction:column;gap:18px;align-items:flex-end;text-align:right}
.hero-cap{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.hero-cap a{border-bottom:1px solid rgba(247,246,243,.5);padding-bottom:3px}
.hero-cap a:hover{color:var(--bronze-l);border-color:var(--bronze-l)}
.dots{display:flex;gap:8px}
.dots button{width:34px;height:2px;background:rgba(247,246,243,.3);position:relative;overflow:hidden;padding:8px 0;background-clip:content-box}
.dots button.on::after{content:"";position:absolute;left:0;top:8px;height:2px;background:var(--bronze-l);animation:fill 6s linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.scroll{position:absolute;right:var(--pad);top:28px;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl;color:rgba(247,246,243,.7)}

/* marquee */
.marq{background:var(--dark);color:var(--bronze-l);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(220,188,141,.2)}
.marq div{display:inline-block;padding:18px 0;animation:mq 38s linear infinite;font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.marq:hover div{animation-play-state:paused}
.marq span{margin:0 28px;color:var(--bronze)}
@keyframes mq{to{transform:translateX(-50%)}}

/* bureau */
.bureau{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,6vw,96px)}
.bureau h2{max-width:14ch;margin-top:16px}
.bureau .txt{display:flex;flex-direction:column;gap:20px;max-width:60ch}
.bureau .txt p:first-child{font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.bureau .txt p+p{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span,.tags a{padding:7px 14px;border:1px solid rgba(23,24,26,.22);font-size:12.5px;letter-spacing:.06em;transition:all .3s}
.tags span:hover,.tags a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line);margin-top:clamp(40px,6vw,88px)}
.stats div{padding:28px 0 0}
.stats b{display:block;font-weight:300;font-size:clamp(48px,6vw,92px);letter-spacing:-.04em;line-height:1;color:var(--bronze);font-variant-numeric:tabular-nums}
.stats span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* projecten */
.proj{background:var(--sand2)}
.proj-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(24px,3.4vw,44px)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{padding:9px 18px;border:1px solid rgba(23,24,26,.24);border-radius:99px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;transition:all .3s var(--ease)}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters sup{font-size:10px;opacity:.6;margin-left:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(18px,2vw,30px) clamp(14px,1.6vw,22px)}
.card{display:flex;flex-direction:column;gap:12px;text-align:left;animation:pop .6s var(--ease) both;animation-delay:calc(var(--i)*35ms)}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}}
.card .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand3)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.card:hover img{transform:scale(1.07)}
.card .ph::after{content:"";position:absolute;inset:0;border:0 solid var(--bronze);transition:border-width .35s var(--ease);pointer-events:none}
.card:hover .ph::after{border-width:6px}
.card .meta{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.card h3{font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.card .meta span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(23,24,26,.5);white-space:nowrap}
.more{display:flex;justify-content:center;margin-top:clamp(28px,4vw,52px)}
.btn{padding:15px 34px;border:1px solid var(--ink);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:all .3s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}

/* modal */
#modal{position:fixed;inset:0;z-index:400;background:var(--dark);color:var(--paper);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);visibility:hidden;opacity:0;transition:opacity .4s,visibility .4s}
#modal.open{visibility:visible;opacity:1}
.m-stage{position:relative;background:#0e0f10;display:flex;flex-direction:column;min-height:0}
.m-main{position:relative;flex:1;min-height:0;overflow:hidden;cursor:zoom-in}
.m-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.m-main.zoom{cursor:zoom-out}.m-main.zoom img{object-fit:cover}
.m-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background:rgba(26,27,28,.6);display:grid;place-items:center;font-size:20px;transition:background .25s}
.m-arrow:hover{background:var(--bronze)}
.m-arrow.p{left:18px}.m-arrow.n{right:18px}
.m-count{position:absolute;left:20px;bottom:16px;font-size:12px;letter-spacing:.14em;background:rgba(26,27,28,.6);padding:4px 10px}
.m-thumbs{display:flex;gap:6px;padding:10px;overflow-x:auto;background:#0e0f10}
.m-thumbs button{flex:0 0 92px;height:60px;opacity:.45;transition:opacity .25s;outline:2px solid transparent;outline-offset:-2px}
.m-thumbs button.on,.m-thumbs button:hover{opacity:1}
.m-thumbs button.on{outline-color:var(--bronze)}
.m-thumbs img{width:100%;height:100%;object-fit:cover}
.m-info{padding:clamp(24px,3vw,48px);overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.m-info .label{color:var(--bronze-l)}
.m-info h2{font-size:clamp(26px,2.8vw,40px);font-weight:400}
.m-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;padding:16px 0;border-block:1px solid rgba(247,246,243,.18)}
.m-info dt{color:var(--bronze-l);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.m-info p{color:rgba(247,246,243,.82);font-size:15.5px}
.m-nav{margin-top:auto;display:flex;justify-content:space-between;gap:14px;padding-top:16px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.m-nav button:hover{color:var(--bronze-l)}
#m-close{position:absolute;top:16px;right:16px;z-index:5;width:46px;height:46px;border-radius:50%;background:rgba(26,27,28,.7);font-size:22px;display:grid;place-items:center;transition:transform .4s var(--ease),background .25s}
#m-close:hover{transform:rotate(90deg);background:var(--bronze)}
@media(max-width:900px){#modal{grid-template-columns:1fr;grid-template-rows:55vh 1fr;overflow-y:auto}.m-stage{min-height:55vh}.m-arrow{width:42px;height:42px}}

/* visie */
.visie{background:var(--dark);color:var(--paper);position:relative}
.visie .label{color:var(--bronze-l)}
.erase{height:240vh;position:relative}
.erase-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);gap:28px}
.erase p{font-size:clamp(32px,5.4vw,84px);font-weight:300;letter-spacing:-.04em;line-height:1.04;max-width:20ch}
.erase .x{display:inline-block;max-width:100%;overflow:hidden;vertical-align:bottom;transition:opacity .7s,filter .7s,max-width .9s var(--ease),transform .9s var(--ease);margin-right:.22em}
.erase .x.off{white-space:nowrap;opacity:0;filter:blur(10px);max-width:0;margin-right:0;transform:translateY(-.3em)}
.erase .d0{margin-right:.22em;color:var(--bronze-l);font-weight:500}
.erase .x.hl{color:var(--bronze-l);font-weight:500}
.erase .k{color:var(--bronze-l);font-weight:500;margin-right:.22em}
.erase small{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,243,.55);transition:opacity .6s}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:1px solid rgba(247,246,243,.18)}
.pillar{padding:clamp(32px,4vw,64px) clamp(20px,3vw,48px) clamp(40px,5vw,72px) 0;position:relative;transition:background .5s}
.pillar:first-child{padding-left:clamp(20px,3vw,48px)}
.pillar+.pillar{padding-left:clamp(20px,3vw,48px);border-left:1px solid rgba(247,246,243,.18)}
.pillar .n{font-size:12px;letter-spacing:.16em;color:var(--bronze-l)}
.pillar h3{font-size:clamp(26px,2.6vw,38px);font-weight:300;margin:14px 0 18px}
.pillar h3 b{font-weight:600;color:var(--bronze-l)}
.pillar p{color:rgba(247,246,243,.78);font-size:15.5px}
.quote{padding:clamp(40px,6vw,90px) var(--pad);border-top:1px solid rgba(247,246,243,.18);display:flex;flex-wrap:wrap;gap:24px 60px;align-items:center;justify-content:space-between}
.quote blockquote{font-size:clamp(20px,2.4vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.25;max-width:34ch}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-l)}

/* diensten */
.dienst-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,5vw,80px);margin:16px 0 clamp(32px,4vw,56px)}
.dienst-top h2{max-width:17ch}
.dienst-top p{max-width:56ch;color:var(--muted);align-self:end}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:60px 1fr 40px;align-items:center;gap:10px;padding:24px 0;font-size:clamp(22px,2.6vw,36px);font-weight:400;letter-spacing:-.02em;transition:color .25s,padding .35s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .n{font-size:12px;letter-spacing:.14em;color:var(--bronze);font-weight:600}
.acc summary i{width:22px;height:22px;position:relative;justify-self:end}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc summary:hover{color:var(--bronze);padding-left:8px}
.acc .body{padding:0 40px 32px 60px;max-width:84ch;color:var(--muted);animation:pop .5s var(--ease)}
@media(max-width:600px){.acc summary{grid-template-columns:36px 1fr 28px}.acc .body{padding:0 0 28px 0}}

/* schil */
.schil{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,64px);background:var(--sand2);padding:clamp(24px,4vw,56px)}
.schil h3{font-size:clamp(24px,2.6vw,36px);font-weight:400;margin:12px 0 14px}
.schil p{color:var(--muted);max-width:44ch}
.wall{display:flex;flex-direction:column;gap:20px;justify-content:center}
.wall svg{width:100%;height:auto;max-height:230px}
.wall input{width:100%;accent-color:var(--bronze);height:28px}
.meter{display:grid;grid-template-columns:110px 1fr 40px;gap:12px;align-items:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meter div{height:10px;background:rgba(23,24,26,.1);position:relative;overflow:hidden}
.meter div i{position:absolute;inset:0 auto 0 0;background:var(--bronze);transition:width .3s}
.meter div i.b{background:var(--ink)}
.meter b{font-weight:600;color:var(--ink);text-align:right}
.note{font-size:11px;color:rgba(23,24,26,.5);letter-spacing:.04em}

/* proces */
.proces{background:var(--sand2)}
.proces-grid{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(30px,6vw,100px);margin-top:clamp(28px,4vw,56px);align-items:start}
.house{position:sticky;top:96px;background:var(--dark);padding:clamp(18px,2vw,30px);color:var(--bronze-l)}
.house svg{width:100%;height:auto;display:block}
.house svg .d{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.house svg .d.on{stroke-dashoffset:0}
.house svg .d.base{stroke:var(--paper);stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter}
.house svg .d.out{stroke:var(--bronze-l);stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter}
.house svg .d.lin{stroke:rgba(247,246,243,.85);stroke-linecap:butt}
.house svg .f{opacity:0;transition:opacity .9s .5s}
.house svg .f.on{opacity:1}
.house .cap{margin-top:14px;display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,246,243,.6)}
.house .cap b{color:var(--bronze-l);font-weight:600}
.steps{list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:60px 1fr;gap:6px;padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .5s}
.steps li.on{opacity:1}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{font-size:12px;letter-spacing:.14em;color:var(--bronze);font-weight:600;padding-top:6px}
.steps h3{font-size:clamp(22px,2.4vw,32px);font-weight:400}
.steps p{margin-top:8px;color:var(--muted);max-width:50ch}
@media(max-width:820px){.proces-grid{grid-template-columns:1fr}.house{position:relative;top:0}}

/* wonen */
.duurzaam{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));background:var(--dark);color:var(--paper)}
.duurzaam .label{color:var(--bronze-l)}
.dz-fotos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr auto;gap:6px;padding:6px;min-height:520px}
.dz-fotos figure{margin:0;overflow:hidden;position:relative}
.dz-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.dz-fotos figure:hover img{transform:scale(1.04)}
.dz-f1{grid-column:1/3}
.dz-more{grid-column:1/3;justify-self:start;color:var(--paper);padding:10px 14px;transition:color .25s,gap .25s var(--ease),transform .35s var(--ease)}
.dz-more:hover{transform:translateX(8px)}
.dz-txt{padding:clamp(34px,5.5vw,88px) var(--pad);display:flex;flex-direction:column;gap:20px}
.dz-txt h2{font-weight:300;letter-spacing:-.02em;line-height:1.1;font-size:clamp(30px,4vw,54px);margin-top:6px}
.dz-txt h2 em{font-style:normal;color:var(--bronze-l);font-weight:500}
.dz-txt .lead{font-size:clamp(18px,1.7vw,22px);font-weight:300;max-width:46ch}
.dz-txt p{max-width:56ch;color:rgba(247,246,243,.78)}
.dz-b{color:var(--bronze-l);font-weight:600}
.dz-list{list-style:none;display:grid;gap:14px;max-width:56ch;padding:0}
.dz-list li{display:grid;gap:2px;padding-top:14px;border-top:1px solid rgba(220,188,141,.25)}
.dz-list b{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-l);font-weight:600}
.dz-list span{color:rgba(247,246,243,.78)}
.dz-proj{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.dz-proj a{border-bottom:1px solid var(--bronze-l);font-size:14px;transition:color .3s}
.dz-proj a:hover{color:var(--bronze-l)}
.wonen{display:none;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.wonen .img{position:relative;min-height:420px;overflow:hidden}
.wonen .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wonen .img img+img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.wonen .img:hover img+img{clip-path:inset(0 0 0 0)}
.wonen .img .hint{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.wonen .txt{padding:clamp(34px,5.5vw,88px) var(--pad);display:flex;flex-direction:column;gap:20px;background:var(--sand)}
.wonen .logo2{width:60px}
.wonen .lead{font-size:clamp(22px,2.4vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.25;max-width:28ch}
.wonen p{color:var(--muted);max-width:54ch}
.wonen .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.wonen h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}

/* arjen */
.arjen{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(28px,6vw,96px);align-items:center}
.portret{position:relative;overflow:hidden;max-width:520px;background:var(--sand3)}
.portret img{width:100%;filter:grayscale(1) contrast(1.05);transition:filter .8s,transform 1.2s var(--ease)}
.portret:hover img{filter:none;transform:scale(1.04)}
.portret::after{content:"";position:absolute;left:14px;right:-14px;top:14px;bottom:-14px;border:1px solid var(--bronze);z-index:-1}
.arjen-t{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.arjen-t h2{font-size:clamp(34px,4.4vw,64px)}
.arjen-t p{color:var(--muted)}
.arjen-t p:first-of-type{color:var(--ink);font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.soc{display:flex;gap:26px;margin-top:6px}
@media(max-width:700px){.hero-side{align-items:flex-start;text-align:left;margin-left:0}.hero-cap{flex-wrap:wrap;gap:6px 14px}.scroll{display:none}}
@media(max-width:820px){.arjen{grid-template-columns:1fr}.portret{margin-right:14px}}

/* contact */
.contact{background:var(--dark);color:var(--paper)}
.contact .label{color:var(--bronze-l)}
.c-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(30px,6vw,96px)}
.contact h2{font-size:clamp(38px,6vw,92px);font-weight:300;letter-spacing:-.04em;line-height:.98;margin-top:16px}
.contact h2 em{font-style:normal;color:var(--bronze-l)}
form{display:grid;gap:22px;align-content:start}
.fld{position:relative}
.fld input,.fld textarea{width:100%;background:none;border:0;border-bottom:1px solid rgba(247,246,243,.3);color:var(--paper);font:inherit;font-size:17px;padding:22px 0 8px;outline:0;border-radius:0;transition:border-color .3s;resize:vertical}
.fld label{position:absolute;left:0;top:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,246,243,.55);pointer-events:none;transition:all .3s var(--ease)}
.fld input:focus,.fld textarea:focus{border-color:var(--bronze-l)}
.fld input:focus+label,.fld textarea:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:not(:placeholder-shown)+label{top:0;font-size:10.5px;color:var(--bronze-l)}
.send{justify-self:start;padding:16px 36px;background:var(--bronze);color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;transition:background .3s,transform .3s var(--ease)}
.send:hover{background:var(--bronze-l);color:var(--ink)}
.c-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;margin-top:clamp(44px,6vw,88px);padding-top:30px;border-top:1px solid rgba(247,246,243,.2);font-size:15px}
.c-info h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-l);margin-bottom:8px;font-weight:600}
.c-info a:hover{color:var(--bronze-l)}
.c-info img{width:88px;filter:invert(1) brightness(1.9)}
footer{background:var(--dark);color:rgba(247,246,243,.55);padding:20px var(--pad) 28px;display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid rgba(247,246,243,.12)}
footer button{text-transform:uppercase;letter-spacing:.1em;border-bottom:1px dashed currentColor}
footer button:hover{color:var(--bronze-l)}
#toast{position:fixed;left:50%;bottom:28px;z-index:600;transform:translate(-50%,40px);background:var(--ink);color:var(--paper);padding:12px 22px;font-size:13px;letter-spacing:.06em;opacity:0;transition:all .5s var(--ease);pointer-events:none;border-left:3px solid var(--bronze)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* blauwdruk-modus */
body.blue{--sand:#14202b;--sand2:#101a24;--sand3:#1c2c3b;--ink:#cfe3f5;--paper:#cfe3f5;--muted:rgba(207,227,245,.7);--line:rgba(160,200,235,.28);--dark:#0c141c;--bronze:#7fb7ea;--bronze-l:#a9d1f5;
  background-image:linear-gradient(rgba(127,183,234,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(127,183,234,.1) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
body.blue .sec,body.blue .proj,body.blue .proces,body.blue .wonen .txt{background:transparent}
body.blue header{background:rgba(20,32,43,.92)}
body.blue img:not(#intro img){filter:grayscale(1) contrast(1.1) brightness(.8) sepia(.4) hue-rotate(170deg) saturate(2.4)}
body.blue .logo img,body.blue .c-info img{filter:invert(1) brightness(1.4) sepia(1) hue-rotate(170deg)}
body.blue .acc .body,body.blue .bureau .txt p+p{color:var(--muted)}
body.blue .send,body.blue .filters button.on{color:#0c141c}
body.blue .btn:hover{color:#0c141c}
body.blue .stats b,body.blue .erase .k{color:var(--bronze-l)}
body.blue *{font-family:'Courier New',ui-monospace,monospace!important;letter-spacing:0!important}
body.blue h1,body.blue h2,body.blue h3{text-transform:uppercase}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* vroeger inline in index.html */
.lt,.link.lt:hover{color:var(--paper)!important}
.mt14{margin-top:14px!important}
.mt12{margin-top:12px}
.narrow{max-width:16ch!important}
.d1{--d:.1s}
.d12{--d:.12s}
.d2{--d:.2s}
.self-start{align-self:flex-start}
.hp{position:absolute;left:-9999px}
.route{border-bottom:1px solid;font-size:13px}
.tip{opacity:0}
.bl{color:var(--bronze-l)}
.sp12{height:12px}
.house svg .d.lin.sw5{stroke-width:5}
.house svg .d.lin.sw46{stroke-width:4.6}
.house svg .d.lin.sw44{stroke-width:4.4}
.house svg .d.lin.sw42{stroke-width:4.2}
.house svg .d.lin.sw4{stroke-width:4}
.house svg .d.lin.sw36{stroke-width:3.6}
.house svg .d.lin.sw34{stroke-width:3.4}
.house svg .d.lin.sw32{stroke-width:3.2}
.house svg .d.lin.sw3{stroke-width:3}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i12{--i:12}.i13{--i:13}.i14{--i:14}