/* Lettertypen (lokaal gehost, geen externe diensten) */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
/* Standaardwaarden (lichte modus). theme.js en config.js overschrijven deze; zo blijft de site netjes ook als dat script even niet (of uit de cache verouderd) laadt. */
:root{--fd:'Instrument Serif';--fb:'Hanken Grotesk';--tint:.4;--tm:color;--bg:#F3F1E9;--fg:#20231F;--ac:#344331;--hi:#344331;--ol:#777B57;--mt:#586042;--ln:#D9D9D0;--on:#F3F1E9;--sg:#E6E9DA;--er:#A12F2F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#161A15;--fg:#ECEBE1;--ac:#2E4230;--hi:#9FB690;--ol:#69745B;--mt:#A7AE98;--ln:#2A3128;--on:#E4EBD8;--sg:#1F251D;--er:#EBA3A3}}
/* Kleuren, lettertypen en teksten staan in js/config.js */
html{height:100%;scrollbar-gutter:stable;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg,#F3F1E9);color:var(--fg,#20231F);font:400 1.05rem/1.65 var(--fb),system-ui,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--fd),Georgia,serif;font-weight:400;line-height:1;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.8rem,8vw,6rem);margin-bottom:2rem}
a{color:inherit;text-underline-offset:.2em}
p{max-width:44rem;text-wrap:pretty}
::selection{background:var(--ac);color:var(--on)}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ac);color:var(--on);padding:.6rem 1rem;z-index:100}.skip:focus{left:0}
.w{max-width:1240px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
header .w{display:flex;align-items:center;justify-content:space-between;height:68px}
.hr{display:flex;align-items:center;gap:1.4rem}
.logo{font-family:var(--fd),serif;letter-spacing:.16em;text-decoration:none;font-size:1.2rem;display:inline-flex;align-items:center;gap:.7rem}
.logo img{height:30px;width:auto;border-radius:5px}
nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-size:.95rem;background:linear-gradient(var(--hi),var(--hi)) 0 100%/0 1px no-repeat;transition:background-size .3s;padding:.3rem 0}
nav a:hover,nav a[aria-current]{background-size:100% 1px}
.lb,#mb{background:none;border:1px solid var(--ln);color:var(--fg);padding:.4rem .8rem;font:500 .85rem var(--fb);letter-spacing:.06em;cursor:pointer;transition:border-color .2s}
.lb:hover,#mb:hover{border-color:var(--hi)}.tb{display:inline-flex;align-items:center;padding:.4rem .55rem}#mb{display:none;font-size:.95rem;letter-spacing:0}
.btn{display:inline-block;padding:.9rem 1.6rem;border:1px solid var(--hi);background:var(--ac);color:var(--on);text-decoration:none;font:500 1rem var(--fb);cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:transparent;color:var(--hi);transform:translateY(-2px)}
.btn.o{background:transparent;color:var(--fg);border-color:var(--fg)}.btn.o:hover{background:var(--fg);color:var(--bg)}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
main{animation:in .5s ease both}main:focus{outline:none}@keyframes in{from{opacity:0;transform:translateY(10px)}}
section{padding:clamp(3rem,8vw,7rem) 0}
.hero{padding:clamp(2rem,6vw,5rem) 0 0}
.hero h1{font-size:clamp(3.2rem,11vw,10rem);line-height:.92;letter-spacing:-.025em;max-width:11ch;margin-bottom:0;overflow-wrap:break-word}
.hero p{font-size:clamp(1.1rem,2vw,1.3rem);margin:1.6rem 0 0;color:var(--mt)}
.plan{display:block;width:100%;height:auto;background:var(--ac);color:var(--on)}
.hero .fr{margin-top:3rem}.hero .fr .plan{aspect-ratio:21/8}
.hero .plan g{transform:translate(var(--px,0),var(--py,0));transition:transform .5s ease-out}
h2{font-size:clamp(2.1rem,4.8vw,3.8rem);margin-bottom:1.5rem}
.svc{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding:2.2rem 0;border-top:1px solid var(--ln);align-items:start}
.svc h3{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:1.5rem}.svc:hover h3{color:var(--hi)}.svc p{margin:0 0 1rem}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem}
.pj{grid-column:span 6;text-decoration:none;display:block}
.pj:nth-child(3n+1){grid-column:span 7}.pj:nth-child(3n+2){grid-column:span 5;margin-top:4rem}.pj:nth-child(3n){grid-column:span 12}
.fr{position:relative;overflow:hidden;background:var(--ac)}
.fr:has(>.plan:is(img,video))::after{content:"";position:absolute;inset:0;background:var(--ac);mix-blend-mode:var(--tm,color);opacity:var(--tint,.4);pointer-events:none}.fr .plan{transition:transform .8s cubic-bezier(.2,.7,.2,1);aspect-ratio:4/3}.pj:nth-child(3n) .plan{aspect-ratio:21/8}.fr:hover .plan{transform:scale(1.04)}
.d{stroke-dasharray:1;stroke-dashoffset:1;animation:dr 2.4s ease forwards}@keyframes dr{to{stroke-dashoffset:0}}
.pt{transform-box:fill-box;transform-origin:center;animation:gr .9s ease both}@keyframes gr{from{transform:scale(0);opacity:0}}
.ov{position:relative}.ovw{margin-bottom:clamp(2rem,5vw,4rem)}.ov .plan{aspect-ratio:16/6}.ov.im h2{color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.6)}.ov.im::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,color-mix(in srgb,var(--ac) 82%,#000) 0%,color-mix(in srgb,var(--ac) 35%,transparent) 45%,transparent 75%);pointer-events:none}.ov:hover .plan{transform:none}.ov h2{position:absolute;z-index:2;left:clamp(1rem,2.4vw,2rem);bottom:10%;margin:0;color:var(--on);font-size:clamp(1.8rem,5vw,4rem)}
video.plan,img.plan{object-fit:cover;object-position:50% 50%}
/* Vaste maat: 100lvh = grootste schermhoogte, dus geen verspringen als de adresbalk op een telefoon in- of uitschuift tijdens het scrollen */
#bg{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;color:var(--hi);opacity:.09;transform:translateZ(0);backface-visibility:hidden}
#bg g{transform-box:view-box;transform-origin:50% 50%}.b1{animation:sp 200s linear infinite;will-change:transform}.b2{animation:br 32s ease-in-out infinite alternate;will-change:transform}
@keyframes sp{to{transform:rotate(360deg)}}@keyframes br{from{transform:translate(-30px,20px) scale(.96)}to{transform:translate(30px,-20px) scale(1.04)}}
.pj h3{font-size:1.7rem;margin-top:.9rem;text-decoration:underline transparent 1px;text-underline-offset:.2em;transition:text-decoration-color .3s}.pj:hover h3{text-decoration-color:currentColor}.pj small,.m{color:var(--mt);font-size:.92rem}
.fl{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 2.5rem}
.fl button{background:none;border:1px solid var(--ln);color:var(--fg);padding:.5rem 1.1rem;font:inherit;cursor:pointer;transition:.2s}
.fl button:hover{border-color:var(--hi)}.fl button[aria-pressed=true]{background:var(--ac);color:var(--on);border-color:var(--hi)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.lead{font-size:clamp(1.15rem,2vw,1.3rem)}
.two.one{grid-template-columns:1fr}
.map{aspect-ratio:16/9}.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.map>.plan{position:absolute;inset:0;height:100%;opacity:.55}.mc{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;padding:1rem;color:var(--on)}.mc p{margin:0 0 .6rem;font-size:.9rem;max-width:24rem}.mc .btn{background:var(--on);color:var(--ac);border-color:var(--on)}.mc .btn:hover{background:transparent;color:var(--on)}html[data-theme=dark] .map iframe{filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95)}
.ph{border:1px dashed var(--ol);aspect-ratio:4/5;display:grid;place-items:center;text-align:center;color:var(--mt);padding:1rem;font-size:.95rem}
.band{background:var(--ac);color:var(--on)}.band :focus-visible{outline-color:var(--on)}.band .btn{background:var(--on);color:var(--ac);border-color:var(--on)}.band .btn:hover{background:transparent;color:var(--on)}
.note{background:var(--sg);color:var(--fg);border-left:3px solid var(--ol);padding:1rem 1.2rem;font-size:.92rem;margin:1.2rem 0}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.vals div{border-top:1px solid var(--ol);padding-top:1.2rem}.vals h3{font-size:1.6rem;margin-bottom:.6rem}.vals p{margin:0;color:var(--mt)}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.6rem;margin-top:2rem}
.team .fr{margin-bottom:.8rem}.team .plan,.team .ph{aspect-ratio:4/5}.team h3{font-size:1.5rem}
.prose h2{font-size:1.7rem;margin:2.2rem 0 .6rem}.prose p,.prose li{max-width:46rem}
form{display:grid;gap:1.2rem}label{display:grid;gap:.35rem;font-weight:500}
input,select,textarea{font:inherit;padding:.8rem;border:1px solid var(--ol);background:transparent;color:var(--fg);border-radius:0;width:100%}
select option{background:var(--bg);color:var(--fg)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hi);outline-offset:1px}
.er{color:var(--er);font-size:.88rem;font-weight:400;min-height:1em}
#fb{padding:1rem;border:1px solid var(--hi)}#fb.busy{opacity:.8}#fb.ok{background:var(--sg)}#fb.bad{border-color:var(--er);color:var(--er)}
footer{background:color-mix(in srgb,var(--ac) 80%,#000);color:var(--on);padding:3.5rem 0 1.5rem;font-size:.95rem}footer a{color:inherit}footer :focus-visible{outline-color:var(--on)}footer ::selection{background:var(--on);color:var(--ac)}
footer .w:first-child{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}footer ul{list-style:none;padding:0;margin:0}footer li{margin-bottom:.3rem}footer .soc{margin-top:1rem}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sub{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;font-size:.82rem;color:var(--mt)}footer .sub{color:color-mix(in srgb,var(--on) 68%,transparent);border-top:1px solid color-mix(in srgb,var(--on) 16%,transparent);padding-top:1.4rem}footer .m{color:color-mix(in srgb,var(--on) 75%,transparent)}.sub a{text-decoration:none;opacity:.85}.sub a:hover{text-decoration:underline}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.rv.on{opacity:1;transform:none}
#intro{position:fixed;inset:0;background:var(--ac);color:var(--on);display:grid;place-items:center;text-align:center;z-index:99;transition:transform .8s cubic-bezier(.7,0,.2,1);will-change:transform;contain:layout paint}
#intro>div{display:flex;flex-direction:column;align-items:center;gap:1.4rem;width:max-content;max-width:92vw}
#intro img{display:block;height:88px;width:88px;margin:0;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.18);animation:ip .8s ease-out both;backface-visibility:hidden;transform:translateZ(0)}@keyframes ip{from{opacity:0}to{opacity:1}}
#intro span{display:block;font:clamp(1.6rem,6vw,3.4rem) var(--fd);letter-spacing:.3em;margin-right:-.3em;white-space:nowrap;animation:tr 1s ease-out both}
@keyframes tr{from{opacity:0}to{opacity:1}}
#intro.out{transform:translateY(-100%)}
html[data-bg="0"] #bg{display:none}html[data-pf="0"] main{animation:none}
main[data-k] .d,html[data-dr="0"] .d{animation:none;stroke-dashoffset:0}main[data-k] .pt{animation:none}html[data-dr="0"] .pt{animation:none}
/* ---- huisstijl-accenten: dienstlabel op foto's, nummering, zachte groene band, feitenblok ---- */
a.fr{display:block;text-decoration:none}
.ch{position:absolute;left:0;bottom:0;z-index:2;background:var(--ac);color:var(--on);font:500 .72rem var(--fb);letter-spacing:.14em;text-transform:uppercase;padding:.55rem .95rem;pointer-events:none}.ch span{display:block}.ch span+span{margin-top:.25rem}
.no{display:block;font:500 .78rem var(--fb);letter-spacing:.16em;color:var(--hi);margin-bottom:.7rem}
.svc h3 .no{margin-bottom:.5rem}
.hl{text-decoration:none}
.ln{color:var(--hi);text-decoration:none;font-weight:500}.ln::after{content:"\2192";display:inline-block;margin-left:.5rem;transition:transform .25s}.ln:hover::after{transform:translateX(.3rem)}.ln:hover{text-decoration:underline}
.tint{background:color-mix(in srgb,var(--sg) 58%,transparent);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
/* rustig vak (Onze visie): zacht, doorzichtig groen blok met een dunne huisstijl-rand */
.soft{background:color-mix(in srgb,var(--sg) 58%,transparent);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);border-left:3px solid var(--ol);padding:clamp(1.6rem,4vw,3.2rem)}
.soft .vals{margin-top:2rem}
/* Over ons: gelijkmatige, rustige witruimte tussen de blokken */
section.cp{padding:clamp(1.8rem,4.5vw,3.6rem) 0}section.cp:first-of-type{padding-top:clamp(2.5rem,6vw,5rem)}section.cp+section.band{margin-top:clamp(1.8rem,4.5vw,3.6rem)}
section.slim{padding:0 0 clamp(3rem,6vw,5rem)}
.bk{display:inline-block;text-decoration:none;color:var(--mt);font-size:.92rem}.bk::before{content:"\2190";margin-right:.55rem;color:var(--hi)}.bk:hover{color:var(--fg)}
.eb{margin:2rem 0 .6rem;color:var(--hi);font-weight:500;letter-spacing:.2em;font-size:.82rem}
h2.h3{font-size:clamp(1.6rem,2.6vw,2rem);margin-bottom:1rem}
.facts{background:var(--ac);color:var(--on);padding:clamp(1.4rem,3vw,2.2rem)}.facts dl{margin:0}.facts dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.facts dd{margin:.25rem 0 1.3rem}.facts dd:last-child{margin-bottom:0}.facts a{color:inherit}.facts :focus-visible{outline-color:var(--on)}
.ticks{list-style:none;margin:0;padding:0}.ticks li{position:relative;padding:.75rem 0 .75rem 1.7rem;border-top:1px solid var(--ln)}.ticks li:last-child{border-bottom:1px solid var(--ln)}.ticks li::before{content:"";position:absolute;left:0;top:1.35rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--hi)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem}.steps>div{border-top:1px solid var(--hi);padding-top:1.2rem}.steps h3{font-size:1.6rem;margin-bottom:.6rem}.steps p{margin:0;color:var(--mt)}
/* ---- galerij op project- en dienstpagina ---- */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.gi{grid-column:span 2;display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
button.gi{cursor:zoom-in;appearance:none;-webkit-appearance:none}
.gi.big,.gi.s6{grid-column:span 6}.gi.s3{grid-column:span 3}
.gi .plan{aspect-ratio:4/3}.gi.s3 .plan{aspect-ratio:3/2}.gi.s6 .plan{aspect-ratio:21/9}.gi.big .plan{aspect-ratio:16/9}
.pl{position:absolute;z-index:2;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--ac);color:var(--on);display:grid;place-items:center;pointer-events:none;border:1px solid color-mix(in srgb,var(--on) 40%,transparent)}
/* ---- lichtbak ---- */
html.lx{overflow:hidden}
#lx{position:fixed;inset:0;z-index:90;background:rgba(9,14,9,.95);opacity:0;transition:opacity .25s}#lx.on{opacity:1}
#lx figure{position:absolute;inset:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.8rem;padding:clamp(4rem,7vw,4.5rem) clamp(.8rem,7vw,6rem) 1.1rem}
#lx .lm{display:grid;place-items:center;min-height:0;min-width:0}
#lx .lm img,#lx .lm video{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}
#lx figcaption{color:rgba(236,235,225,.85);text-align:center;font-size:.9rem;min-height:1.5em}
.lk{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(236,235,225,.35);background:rgba(9,14,9,.55);color:#ECEBE1;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}.lk:hover{background:var(--ac);border-color:#ECEBE1}
.lc{top:max(1rem,env(safe-area-inset-top,0px));right:1rem}.lp{left:1rem;top:50%;margin-top:-23px}.lr{right:1rem;top:50%;margin-top:-23px}
#lx :focus-visible{outline-color:#ECEBE1}
@media(max-width:1100px){nav ul{gap:1.2rem}.pj:nth-child(3n+2){margin-top:2rem}.vals{gap:1.2rem}.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
#mb{display:block}nav{position:fixed;top:calc(68px + env(safe-area-inset-top,0px));left:0;right:0;background:var(--bg);border-bottom:1px solid var(--ln);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s,visibility 0s .4s;pointer-events:none;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow:auto}
nav.open{clip-path:inset(0);visibility:visible;transition:clip-path .4s,visibility 0s;pointer-events:auto}nav ul{flex-direction:column;gap:0;padding:1rem 1.2rem}nav a{display:block;padding:.8rem 0;font-size:1.4rem}
.svc,.two,.vals,.steps,footer .w:first-child{grid-template-columns:1fr}.gi,.gi.s3,.gi.s6{grid-column:span 3}.gi.big,.gi:last-child:nth-child(even){grid-column:span 6}.gi .plan,.gi.s3 .plan,.gi.s6 .plan{aspect-ratio:4/3}.gi.big .plan,.gi:last-child:nth-child(even) .plan{aspect-ratio:16/9}.pj,.pj:nth-child(n){grid-column:span 12;margin-top:0}.ov .plan{aspect-ratio:4/3}}
@media(max-width:700px){.lp,.lr{top:auto;bottom:.8rem;margin-top:0}#lx figure{padding-bottom:4.2rem}}
@media(max-width:480px){.gal{gap:.7rem}.ch{font-size:.66rem;padding:.45rem .75rem}.logo{font-size:clamp(.74rem,4vw,.95rem);letter-spacing:.06em;gap:.5rem;white-space:nowrap}.logo img{height:26px;width:auto}.hr{gap:.45rem}.lb,#mb{padding:.4rem .6rem;flex-shrink:0}.btn{width:100%;text-align:center}.hero .fr .plan{aspect-ratio:4/3}}
/* Smalle telefoons: de naam is langer geworden, dus iets kleiner lettertype zodat logo en knoppen elkaar nooit raken */
@media(max-width:400px){.logo{font-size:clamp(.68rem,3.5vw,.95rem);letter-spacing:.03em;gap:.4rem}.logo img{height:22px}.hr{gap:.35rem}}
@media(max-width:480px){#intro span{font-size:6vw}}
/* Veiligheidsnet: het laadscherm verdwijnt altijd vanzelf, ook als JavaScript uit staat of faalt */
#intro{animation:introfail .01s 5s forwards}@keyframes introfail{to{visibility:hidden;pointer-events:none}}
@media (scripting:none){#intro,header,footer,#bg{display:none}}
.ns{padding:clamp(2rem,6vw,4rem) 0}.ns h1{margin-bottom:1rem}.ns ul{padding-left:1.2rem}
/* Grotere aanraakdoelen op touchscreens */
@media (pointer:coarse){.lb,#mb{min-height:44px;min-width:44px;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}#bg g{animation:none!important}}
@media print{#lx,#bg,#intro,header,.skip,.row,.fl,#mb,#lb{display:none!important}body{background:#fff;color:#000}.rv{opacity:1;transform:none}.plan{print-color-adjust:exact}a{text-decoration:none}}