/* bar+ 2.0 – de vier inhoudspagina's in de sfeer van Velor.
   Intro, bannier en menu worden niet aangeraakt. Beweging staat uit bij "minder beweging". */
:root{--serif:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--sandk:#C9A875;--paper:#F6F2E9}
.site-main:has(.v2){padding-left:0;padding-right:0;padding-bottom:0}
.entry:has(.v2){max-width:none;margin:0}
.entry:has(.v2)>*{margin-bottom:0}
.v2{--g:clamp(20px,6vw,96px);box-sizing:border-box;width:100%;max-width:1700px;margin:0 auto;padding:0 var(--g)}
.site-main:has(.v2){overflow-x:clip}
.v2 *{box-sizing:border-box}
.v2 p{font-size:1.02rem;line-height:1.8;margin:0;color:var(--sand)}
.v2 a{color:var(--blue)}

/* titel */
.v2-title{padding:clamp(24px,5vw,72px) 0 clamp(28px,4vw,56px)}
.v2-title h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.22;color:var(--blue);margin:0;max-width:18em;text-wrap:balance;transform-origin:0 60%}
.v2-title.r h1{margin-left:auto;text-align:right;transform-origin:100% 60%}
.v2-title .ln{display:block;height:1px;background:var(--blue);margin-top:clamp(18px,2.4vw,32px);transform-origin:0 50%}
.v2-title.r .ln{transform-origin:100% 50%}
.v2-sub{max-width:34em;margin:0 0 clamp(32px,5vw,64px) auto!important;text-align:right}

/* intro: grote zin links, tekst rechts */
.v2-intro{display:grid;gap:clamp(24px,4vw,72px);grid-template-columns:1fr;padding:clamp(24px,4vw,56px) 0 clamp(48px,8vw,120px)}
@media(min-width:900px){.v2-intro{grid-template-columns:5fr 6fr}.v2-intro .tx{padding-top:.5em}}
.v2-intro .lead{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.5;color:var(--blue)}
.v2-intro .tx{display:grid;gap:1.2em;align-content:start}

/* brede foto met kaart die eroverheen schuift */
.v2-band{position:relative;margin:0 0 clamp(72px,10vw,150px)}
.v2-band .ph{overflow:hidden;aspect-ratio:21/9;background:var(--ink);margin-left:auto;width:100%}
@media(min-width:900px){.v2-band .ph{width:84%}}
.v2-band .ph img{display:block;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,-10%),0);will-change:transform}
.v2-card{background:var(--paper);padding:clamp(24px,3vw,44px);box-shadow:0 40px 80px -48px rgba(70,60,40,.35)}
.v2-card p{color:var(--sandk)}
.v2-band .v2-card{margin-top:-2.5rem;position:relative;z-index:2}
@media(min-width:900px){.v2-band .v2-card{position:absolute;left:0;bottom:-3.5rem;margin:0;width:min(38rem,46%)}}

/* sectiekop */
.v2-sec{padding-bottom:clamp(64px,9vw,130px)}

/* albums als tegels */
.v2-tiles{display:grid;gap:clamp(16px,2.4vw,36px);grid-template-columns:1fr}
@media(min-width:560px){.v2-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.v2-tiles{grid-template-columns:repeat(3,1fr);align-items:start}}
.v2-tile{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;cursor:pointer;overflow:hidden;background:var(--ink)}
.v2-tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.v2-tile .im{display:block;aspect-ratio:4/5;overflow:hidden}
.v2-tiles.big .v2-tile .im{aspect-ratio:3/4}
.v2-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.v2-tile .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;background:rgba(30,28,22,.5);opacity:0;transition:opacity .5s ease}
.v2-tile .ov span{color:#fff;font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:.06em;transform:translateY(14px);transition:transform .6s var(--ease)}
.v2-tw .cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-top:14px}
.v2-tw .nm{font-family:var(--serif);font-size:1rem;color:var(--blue)}
.v2-tw .nm em{font-style:normal;color:var(--sand);margin-left:.3em}
.v2-tw .cnt{font-size:.78rem;letter-spacing:.08em;color:#B9B8AE;white-space:nowrap}
@media(hover:hover){.v2-tile:hover img{transform:scale(1.07)}.v2-tile:hover .ov{opacity:1}.v2-tile:hover .ov span{transform:none}}

/* diensten (architectuur) */
.v2-svc{display:grid;gap:clamp(36px,5vw,72px) clamp(24px,5vw,96px);grid-template-columns:1fr}
@media(min-width:760px){.v2-svc{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.v2-svc{grid-template-columns:repeat(4,1fr);column-gap:40px}.v2-svc h3{min-height:2.5em}}
.v2-svc .s{border-bottom:1px solid var(--blue);padding-bottom:20px}
.v2-svc .no{font-family:var(--serif);font-size:.95rem;color:var(--sand);letter-spacing:.12em}
.v2-svc h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--blue);margin:10px 0 12px}

/* stappen (3D maatwerk) */
.v2-steps{list-style:none;margin:0;padding:0;display:grid;gap:36px 56px;grid-template-columns:1fr}
@media(min-width:760px){.v2-steps{grid-template-columns:repeat(3,1fr)}}
.v2-steps li{border-bottom:1px solid var(--blue);padding-bottom:18px}
.v2-steps .n{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--sand);margin-bottom:14px}

/* slot */
.v2-after{margin:0 0 28px!important;max-width:34em}
.v2-close{margin:0 0 clamp(56px,8vw,110px)}
.v2-close p{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.6;color:var(--blue);max-width:22em}
.v2-link{text-decoration:none;color:var(--blue);background:linear-gradient(var(--blue),var(--blue)) 0 100%/100% 1px no-repeat;transition:background-size .45s ease,color .3s ease;padding:0 2px}
.v2-link:hover{background-size:100% 100%;color:#fff}

/* contact */
.v2-ct{display:grid;gap:clamp(36px,6vw,96px);grid-template-columns:1fr;padding-bottom:clamp(56px,8vw,110px)}
@media(min-width:900px){.v2-ct{grid-template-columns:5fr 7fr;align-items:start}}
.v2-card.info h2,.v2-form h2{font-family:var(--serif);font-weight:500;color:var(--blue);margin:0 0 20px;font-size:clamp(1.3rem,2.2vw,1.8rem)}
.v2-card.info p{margin:0 0 14px;color:var(--sandk)}
.v2-card.info .gr{color:#B9B8AE}
.v2-card.info .social{margin-top:26px;--sz:30px;--gp:14px}
.bpf-f{display:block;margin-bottom:26px}
.bpf-f span{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-bottom:6px}
.bpf-f input,.bpf-f textarea{width:100%;border:0;border-bottom:1px solid var(--sand);border-radius:0;background:transparent;padding:10px 0;font:inherit;font-size:1.05rem;color:var(--blue);outline:0;transition:border-color .3s}
.bpf-f input:focus,.bpf-f textarea:focus{border-bottom-color:var(--blue)}
.bpf-b{border:1px solid var(--blue);background:transparent;color:var(--blue);padding:13px 32px;font:inherit;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:background .3s,color .3s}
.bpf-b:hover{background:var(--blue);color:#fff}
.bpf-hp{position:absolute;left:-9999px}
.bpf-msg{margin:0 0 24px!important;padding:14px 18px;background:var(--paper);color:var(--blue)!important;scroll-margin-top:calc(var(--t0) + var(--stack) + 24px)}
.bpf-wrap{scroll-margin-top:calc(var(--t0) + var(--stack) + 24px)}

/* lightbox (album op volledig scherm) */
#v2lb{position:fixed;inset:0;z-index:99999;background:var(--bg);display:none;flex-direction:column;opacity:0;transition:opacity .45s ease}
#v2lb.on{display:flex}#v2lb.vis{opacity:1}
#v2lb .top{display:flex;justify-content:space-between;align-items:baseline;padding:calc(18px + env(safe-area-inset-top,0px)) 24px 10px;gap:16px}
#v2lb .tt{font-family:var(--serif);font-size:1.1rem;color:var(--blue)}
#v2lb .ct{font-size:.8rem;letter-spacing:.12em;color:#B9B8AE;margin-left:14px}
#v2lb .x{all:unset;cursor:pointer;font-size:2rem;line-height:1;color:var(--blue);padding:0 4px}
#v2lb .st{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 64px}
#v2lb .st img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .7s var(--ease)}
#v2lb .st img.ok{opacity:1;transform:none}
#v2lb .nv{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;color:var(--blue)}
#v2lb .nv.p{left:10px}#v2lb .nv.n{right:10px}
#v2lb .nv svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
#v2lb .th{display:flex;gap:10px;justify-content:center;padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px));overflow-x:auto}
#v2lb .th button{all:unset;cursor:pointer;flex:none;width:64px;height:48px;opacity:.5;outline:1px solid transparent;transition:opacity .3s}
#v2lb .th button.a{opacity:1;outline-color:var(--blue)}
#v2lb .th img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){#v2lb .st{padding:0 8px}#v2lb .nv{background:rgba(255,255,255,.75)}}

/* terug omhoog */
#bpTop{position:fixed;right:22px;bottom:22px;width:38px;height:38px;border:0;background:var(--blue);color:#fff;cursor:pointer;z-index:99990;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease),background .3s;display:grid;place-items:center;padding:0}
#bpTop.on{opacity:1;transform:none;pointer-events:auto}
#bpTop:hover{background:var(--sand)}
#bpTop svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* beweging: alleen als het script er is (html.mo) */
html.mo [data-rv=up]{opacity:0;transform:translate3d(0,90px,0);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
html.mo [data-rv=zoom]{opacity:0;transform:scale(.88);transition:opacity .889s ease var(--d,0s),transform 1s var(--ease) var(--d,0s)}
html.mo [data-rv=line]{transform:scaleX(0);transition:transform 1.4s var(--ease) .15s}
html.mo .v2-band[data-rv=clip] .ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
html.mo [data-rv].in{opacity:1;transform:none}
html.mo .v2-band[data-rv=clip].in .ph{clip-path:inset(0)}
html.mo .v2-tw[data-rv]{--d:calc(var(--i,0)*.14s)}
html.mo .v2-svc .s[data-rv],html.mo .v2-steps li[data-rv]{--d:calc(var(--i,0)*.16s)}
@media(prefers-reduced-motion:reduce){html.mo [data-rv]{opacity:1!important;transform:none!important;transition:none!important}.v2-band .ph{clip-path:none!important}.v2-tile img{transition:none}}

/* telefoon: kleiner en overzichtelijker */
@media(max-width:599px){
	.v2{--g:18px}
	.v2 p{font-size:1rem;line-height:1.65}
	.v2-title{padding:12px 0 22px}
	.v2-title h1{font-size:1.45rem;line-height:1.3}
	.v2-title .ln{margin-top:14px}
	.v2-sub{margin-bottom:28px!important}
	.v2-intro{gap:16px;padding:6px 0 40px}
	.v2-intro .lead{font-size:1.1rem;line-height:1.5}
	.v2-band{margin-bottom:44px}
	.v2-band .ph{aspect-ratio:4/3}
	.v2-band .v2-card{margin-top:-1.5rem;padding:18px 20px;margin-left:12px;margin-right:0}
	.v2-sec{padding-bottom:44px}
	.v2-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--g)*-1);padding:0 var(--g) 6px;scroll-padding:0 var(--g);-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.v2-tiles::-webkit-scrollbar{display:none}
	.v2-tiles .v2-tw{flex:0 0 68%;scroll-snap-align:start}
	.v2-tile .im,.v2-tiles.big .v2-tile .im{aspect-ratio:1/1}
	.v2-tw .nm{font-size:.9rem}.v2-tw .cnt{font-size:.72rem}
	.v2-svc{gap:24px}
	.v2-svc h3{font-size:1.05rem;margin:6px 0 8px}
	.v2-steps{gap:22px}
	.v2-steps .n{font-size:2rem;margin-bottom:6px}
	.v2-after{margin-bottom:18px!important}
	.v2-close{margin-bottom:48px}
	.v2-close p{font-size:1.05rem;line-height:1.55}
	.v2-ct{gap:28px;padding-bottom:44px}
	.v2-card{padding:20px}
	.v2-card.info h2,.v2-form h2{font-size:1.15rem;margin-bottom:14px}
	.bpf-f{margin-bottom:20px}
	#v2lb .tt{font-size:1rem}
}

.v2-intro.nolead{grid-template-columns:1fr}
@media(min-width:900px){.v2-intro.nolead .tx{max-width:44rem;padding-top:0}}

/* eerste titel op Collectie, Architectuur en 3D maatwerk: een maat kleiner */
.v2-title:not(.r) h1{font-size:clamp(1.6rem,2.9vw,2.05rem)}
.v2-title.r h1{font-size:clamp(1.6rem,2.9vw,2.05rem)}
@media(max-width:599px){.v2-title:not(.r) h1{font-size:1.25rem}}

/* Collectie: elke zin van de titel op één lijn (vanaf tablet-breed) */
@media(min-width:900px){
	.v2-title h1{max-width:none}
	.v2-collectie .v2-title h1{font-size:clamp(1.6rem,2.35vw,1.9rem);white-space:nowrap}
}

/* blauw vierkantje bij de titels: even hoog als de letters, schuift omhoog vanaf de lijn */


/* titels (kopjes): lijn die als slangetje een hol vierkantje tekent, blauw vierkantje dat uit de lijn schuift, tekst die openzoomt.
   De instellingen komen uit het voorbeeldscherm "Titel-animatie" (volgorde 1: lijn, vierkantje, tekst). */
.v2-sh{--hs:clamp(1.5rem,2.7vw,2.05rem);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(var(--hs)*.4);row-gap:6px;margin-bottom:clamp(28px,4vw,56px)}
.v2-sh h2{font-family:var(--serif);font-weight:500;font-size:var(--hs);line-height:1.2;margin:0;color:var(--blue);transform-origin:0 60%}
.v2-sh .sqw{flex:none;display:block;font-size:var(--hs);width:.72em;height:.72em;align-self:baseline;clip-path:inset(0 0 calc(var(--cd,22px) * -1) 0)}
.v2-sh .sq{display:block;width:100%;height:100%;background:var(--blue)}
.v2-sh .lnw{flex:1 0 100%;position:relative;height:1px;margin-top:2px}
.v2-sh .ln{display:block;height:1px;background:var(--blue)}
.v2-sh .snk{display:none;position:absolute;left:0;bottom:0;overflow:visible;pointer-events:none}
.v2-sh .snk path{fill:none;stroke:var(--blue);stroke-width:1;stroke-linecap:square}
html.mo .v2-sh.snake .ln{display:none}
html.mo .v2-sh.snake .snk{display:block}
html.mo .v2-sh:not(.in) h2{opacity:0;transform:scale(.88)}
html.mo .v2-sh:not(.in) .sq{transform:translateY(calc(100% + var(--cd,22px)))}
html.mo .v2-sh h2{transition:opacity .622s ease 1.222s,transform .889s var(--ease) 1.222s}
html.mo .v2-sh .sq{transition:transform .889s var(--ease) .778s}
@media(max-width:599px){.v2-sh{--hs:1.2rem;margin-bottom:18px;row-gap:2px}.v2-sh .lnw{margin-top:2px}}
@media(prefers-reduced-motion:reduce){html.mo .v2-sh h2,html.mo .v2-sh .sq{transition:none!important;opacity:1!important;transform:none!important}}

/* grote paginatitel: blauw vierkantje (het blokje uit het menu landt hier), lijn met slangetje en hol vierkantje op dezelfde rij */
.v2-title{position:relative}
.v2-title::before{content:"";position:absolute;left:0;top:var(--ty,.3em);width:var(--tq,1.3rem);height:var(--tq,1.3rem);background-color:var(--blue)}
.v2-title h1{padding-left:calc(var(--tq,1.3rem)*1.4)}
.v2-title.r::before{left:auto;right:0}
.v2-title.r h1{padding-left:0;padding-right:calc(var(--tq,1.3rem)*1.4)}
html.mo .v2-title:not(.in):not(.tz)::before{opacity:0}
html.mo .v2-title.in::before{opacity:1;transition:opacity .9s ease .2s}
.v2-title.tl::before{opacity:0!important;transition:none!important}
.v2-title.tz::before{opacity:1!important;transition:none!important}
.v2-title .lnw{position:relative;height:1px;margin-top:clamp(14px,1.2vw,17px)}
.v2-title .lnw .ln{margin:0}
.v2-title .snk{display:none;position:absolute;left:0;bottom:0;overflow:visible;pointer-events:none}
.v2-title .snk path{fill:none;stroke:var(--blue);stroke-width:1;stroke-linecap:square}
html.mo .v2-title.snake .ln{display:none}
html.mo .v2-title.snake .snk{display:block}
@media(max-width:599px){.v2-title .lnw{margin-top:11px}}

/* breed scherm: volle blokje schuift naar links (kolom van de banner-blokjes), de titel opent naar rechts op de rand van de afbeeldingen */
.v2-sh.mv h2{margin-left:calc(var(--hs)*-1.12)}
.v2-sh.mv .sqw{transform:translateX(var(--sx))}
html.mo .v2-sh.mv:not(.in) .sqw{transform:none}
html.mo .v2-sh.mv.in .sqw{transition:transform .8s var(--ease) 1.55s}
html.mo .v2-sh.mv:not(.in) h2{opacity:0;transform:translateX(-.5em);clip-path:inset(-10% 100% -10% 0)}
html.mo .v2-sh.mv.in h2{clip-path:inset(-10% -2% -10% 0);transition:opacity .45s ease 1.65s,transform .9s var(--ease) 1.65s,clip-path .9s var(--ease) 1.65s}
@media(prefers-reduced-motion:reduce){html.mo .v2-sh.mv h2{clip-path:none!important}html.mo .v2-sh.mv .sqw{transition:none!important;transform:translateX(var(--sx))!important}}
#v2lb .st img.nt{transition:none}

/* naam staat op het album bij hover (pc); zonder muis blijft de naam onder het album staan */
.v2-tile .ov em{font-style:normal;color:#fff;opacity:.8;margin-left:.3em}
@media(hover:hover){.v2-tw .cap{display:none}}
@media(hover:none){.v2-tile .ov{display:none}}

/* vier stappen: twee per rij op tablet, vier naast elkaar op breed scherm */
@media(min-width:760px){.v2-steps.n4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.v2-steps.n4{grid-template-columns:repeat(4,1fr);gap:36px 40px}}

/* ruimte tussen hoofdtitel en tekst eronder: een derde minder (vanaf 600px) */
@media(min-width:600px){
	.v2-title{padding-bottom:clamp(19px,2.7vw,37px)}
	.v2-intro{padding-top:clamp(16px,2.7vw,37px)}
}

/* grote foto: schermbreed tot de rand, 16:9 (maximaal 82% van het scherm hoog), schuift omhoog en fadet in, beweegt sterk mee bij het scrollen (zie voorbeeldscherm "Foto-animatie") */
@media(min-width:600px){.v2-band .ph{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:16/9;max-height:82vh}}
.v2-band .ph img{height:var(--ih,150%);transform:translate3d(0,var(--py,-16.5%),0)}
@media(max-width:599px){.v2-band .ph img{height:var(--ihm,var(--ih,150%))}}

/* ruimte tussen de welkomsttekst en de grote foto: veel kleiner */
.v2-intro{padding-bottom:clamp(20px,3vw,40px)}
@media(max-width:599px){.v2-intro{padding-bottom:22px}}

/* zelfde ruimte tussen hoofdtitel en tekst als tussen tekst en grote foto */
.v2-title{padding-bottom:0}
.v2-intro{padding-top:clamp(20px,3vw,40px)}
@media(max-width:599px){.v2-intro{padding-top:22px}}

/* grote foto ook schermbreed op mobiel (tablet >=600px had het al) */
@media(max-width:599px){.v2-band .ph{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:4/3}}

/* pagina's zonder welkomsttekst (Architectuur, Contact): zelfde ruimte onder de titel */
.v2-architectuur .v2-title,.v2-contact .v2-title{padding-bottom:clamp(20px,3vw,40px)}
@media(max-width:599px){.v2-architectuur .v2-title,.v2-contact .v2-title{padding-bottom:22px}}

/* kaart over de grote foto: op groot scherm rechts in plaats van links */
@media(min-width:900px){.v2-band .v2-card{left:auto;right:0}}

/* titels met het blauwe blokje vooraan: iets kleiner op groot scherm */
@media(min-width:900px){.v2-sh{--hs:clamp(1.4rem,2.1vw,1.7rem)}}

/* drie diensten (Architectuur): onder 900px onder elkaar, daarboven drie kolommen */
@media(min-width:760px) and (max-width:899px){.v2-svc.n3{grid-template-columns:1fr}}
@media(min-width:900px){.v2-svc.n3{grid-template-columns:repeat(3,1fr);column-gap:48px}.v2-svc.n3 h3{min-height:2.5em}}

/* melding "in opbouw" onder de hoofdtitel (tijdelijk, Collectie) */
.v2-soon{display:flex;align-items:center;gap:10px;margin:0;padding:0 0 clamp(14px,2vw,24px);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.v2-soon i{display:block;flex:none;width:11px;height:11px;border:1px solid var(--blue);box-sizing:border-box}
.v2-soon{align-items:flex-start}.v2-soon i{margin-top:.2em}
@media(max-width:599px){.v2-soon{font-size:.7rem;letter-spacing:.1em}}
.v2-soon i{margin-top:.38em}

/* "wordt vervolgd" onderaan (Collectie, tijdelijk) */
.v2-end p{display:flex;align-items:flex-start;gap:14px;max-width:none}
.v2-end p::before{content:"";flex:none;width:.7em;height:.7em;margin-top:.45em;border:1px solid var(--blue);box-sizing:border-box}
.v2-end{margin-top:clamp(32px,5vw,72px);margin-bottom:0;padding-bottom:clamp(120px,16vw,220px)}

/* collectie teaser: zwevende vakken */
.v2-tz{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(10px,2vw,28px);row-gap:clamp(24px,4vw,56px);margin:clamp(24px,4vw,56px) 0 clamp(40px,6vw,90px)}
.v2-tz .bx .in{position:relative;padding:clamp(20px,2.6vw,34px);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 30px 60px -44px rgba(70,60,40,.4)}
.v2-tz .bx:hover .in{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(70,60,40,.5)}
.v2-tz .bx .in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .32  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>")}
.v2-tz .pic .in{padding:0;aspect-ratio:4/3;background:var(--ink)}
.v2-tz .pic .in::before{display:none}
.v2-tz .pic img{display:block;width:100%;height:100%;object-fit:cover}
.v2-tz .in>*{position:relative}
.v2-tz .c-sand{background:#D0B084}.v2-tz .c-blue{background:#0086B2}.v2-tz .c-paper{background:#F6F2E9}.v2-tz .c-grey{background:#D6D5CB}
.v2-tz .c-sand p,.v2-tz .c-grey p{color:#2b2a25}.v2-tz .c-blue p,.v2-tz .c-blue .lb{color:#fff}.v2-tz .c-paper p{color:#7a6a4e}
.v2-tz .t{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.7}
.v2-tz .q{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.25}
.v2-tz .c-sand .q,.v2-tz .c-grey .q,.v2-tz .c-paper .q{color:#0086B2}
.v2-tz .lb{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#0086B2;margin:0 0 14px}
.v2-tz .lb i{display:block;width:10px;height:10px;border:1px solid currentColor}
.v2-tz .c-sand .lb{color:#fff}
.v2-tz .p1{grid-column:6/13;grid-row:1}.v2-tz .t1{grid-column:1/7;grid-row:1;align-self:start;margin-top:clamp(0px,3vw,40px);z-index:2}
.v2-tz .t2{grid-column:3/9;grid-row:2;margin-top:calc(-1*clamp(0px,6vw,90px));z-index:2}
.v2-tz .wbr{grid-column:1/-1;grid-row:3}.v2-tz .wbr .in{padding:clamp(28px,4vw,56px)}
.v2-tz .p2{grid-column:1/8;grid-row:4}.v2-tz .t3{grid-column:7/13;grid-row:4;align-self:start;margin-top:clamp(0px,3vw,40px);z-index:2}
.v2-tz .t4{grid-column:8/13;grid-row:5;margin-top:calc(-1*clamp(0px,6vw,90px));z-index:2}
@media(max-width:760px){.v2-tz .bx{grid-column:1/-1;grid-row:auto;margin-top:0}.v2-tz .t2,.v2-tz .t4{margin-left:10%}.v2-tz .t1,.v2-tz .t3{margin-right:10%}}
@media(prefers-reduced-motion:reduce){.v2-tz .bx .in{transition:none}}
.v2-tz .wbr{margin-top:clamp(24px,3vw,44px)}

/* collectie: foto's vlak, zonder schaduw; vakken zweven met schaduw */
.v2-tz .pic .in{box-shadow:none}.v2-tz .pic:hover .in{transform:none;box-shadow:none}
/* slottitel: titel (kopje) met tekst rechts */
.v2-sh.r{justify-content:flex-end}
.v2-collectie .v2-tendsp{height:clamp(90px,12vw,170px)}
.v2-sh.r .sqw{visibility:hidden;width:0;margin-right:calc(var(--hs)*-.4)}

/* collectie: foto met kaartje ernaast (zelfde kaartje en animatie als bij de banners) */
.v2-pc{position:relative;margin:0 0 clamp(56px,8vw,120px)}
.v2-pc .pp{aspect-ratio:4/3;overflow:hidden;background:var(--ink);width:72%}
.v2-pc.rt .pp{margin-left:auto}
.v2-pc .pp img{display:block;width:100%;height:100%;object-fit:cover}
.v2-pc .v2-card{margin-top:-2rem;position:relative;z-index:2;width:84%}
.v2-pc.rt .v2-card{margin-right:auto}.v2-pc.lt .v2-card{margin-left:auto}
.v2-uitleg{padding-top:0;padding-bottom:clamp(56px,8vw,120px)}
@media(min-width:600px){
	.v2-pc{display:grid;grid-template-columns:1fr;align-items:end}
	.v2-pc .pp{grid-area:1/1;width:55.5%;justify-self:end;margin:0}
	.v2-pc .v2-card{grid-area:1/1;--cw:max(28%,15rem);margin:0 0 -2.5rem calc(44.5% - var(--cw)*.75);width:var(--cw);padding:clamp(28px,3.4vw,52px);align-self:end;justify-self:start}
}
.v2-uitleg .lead{font-weight:600}
@media(min-width:600px){.v2-pc{margin-bottom:calc(clamp(56px,8vw,120px) + 2.5rem)}}
html.mo .v2-pc .v2-card{--d:.3s}
.v2-uitleg{gap:clamp(14px,1.6vw,22px)}

/* collectiekaartje: altijd twee regels */
.v2-pc .v2-card p{white-space:nowrap}
.v2-pc .v2-card{max-width:92%}
@media(min-width:600px){.v2-pc .v2-card{--cw:clamp(17rem,24vw,24rem);width:max-content;max-width:none}}

/* collectie: vier kaartjes naast een object dat laag na laag groeit */
.v2-uitleg{padding-bottom:clamp(20px,3vw,40px)}
.v2-grow{display:grid;gap:clamp(24px,4vw,56px);align-items:start;margin-bottom:clamp(56px,8vw,120px)}
.v2-ks{display:grid;gap:clamp(14px,1.8vw,22px)}
.v2-k{cursor:default;outline:none;border-left:3px solid transparent;transition:transform .3s ease,border-color .3s ease}
.v2-k p{margin:0}
.v2-k:hover,.v2-k:focus-visible,.v2-k.on{transform:translateY(-6px);border-left-color:var(--blue)}
.v2-k:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.v2-obj{margin:0 auto;width:min(200px,60%)}
.v2-obj svg{display:block;width:100%;height:auto;overflow:visible}
.v2-obj ellipse{fill:var(--paper);stroke:#D6D5CB;stroke-width:1.2;transition:stroke .35s}
.v2-obj .ly.on ellipse{stroke:var(--blue)}
.v2-obj .gl{fill:rgba(0,134,178,.16);stroke:none;opacity:0;transition:opacity .5s}
.v2-obj .gl.on{opacity:1}
@media(min-width:600px){.v2-ks .v2-k:nth-child(odd){margin-right:10%}.v2-ks .v2-k:nth-child(even){margin-left:10%}}
@media(min-width:900px){
	.v2-grow{grid-template-columns:minmax(0,1fr) 260px}
	.v2-obj{position:sticky;top:120px;width:100%;margin:0}
}

/* collectie: collage van gekleurde kaartjes, tekst groot en klein */
.v2-collectie .v2-title{padding-bottom:clamp(24px,4vw,56px)}
.v2-cl{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);align-items:start;margin-bottom:clamp(56px,8vw,110px)}
.v2-cl p{margin:0}
.v2-cl .c{position:relative;padding:clamp(22px,3vw,38px);box-shadow:0 40px 70px -44px rgba(70,60,40,.5);transition:rotate .35s var(--ease),scale .35s var(--ease)}
.v2-cl .c:hover{rotate:-.8deg;scale:1.015}
.v2-cl .c.be{background:#D0B084;color:#fff}
.v2-cl .c.bl{background:#0086B2;color:#fff}
.v2-cl .c.gr{background:#D6D5CB;color:#6F6A58}
.v2-cl .sm{font-size:.92rem;line-height:1.7}
.v2-cl .big{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.3vw,2.6rem);line-height:1.15}
.v2-cl .mid{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45}
.v2-cl .ph{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.v2-cl .ph img{display:block;width:100%;height:100%;object-fit:cover}
.v2-cl .a.ph{grid-column:5/13;grid-row:1}
.v2-cl .c.a{grid-column:1/7;grid-row:1;align-self:end;margin-bottom:-2.5rem;z-index:2}
.v2-cl .c.a .sm{margin-bottom:6px}
.v2-cl .hd{grid-column:1/-1;margin:clamp(30px,6vw,80px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(3rem,11vw,9rem);line-height:.95;letter-spacing:-.02em;color:#D6D5CB}
.v2-cl .hd em{font-style:normal;color:#D0B084}
.v2-cl .k1{grid-column:1/8;margin-top:-1.2rem}.v2-cl .k1 .big{margin-bottom:10px}
.v2-cl .k2{grid-column:6/13;margin-top:-.5rem}.v2-cl .k2 .sm{margin-top:10px}
.v2-cl .k3{grid-column:2/9}.v2-cl .k3 .big{margin-top:12px}
.v2-cl .k4{grid-column:7/13;align-self:end;color:var(--ink)}.v2-cl .k4 b{font-weight:500;color:var(--blue)}
.v2-bandt .bt{position:absolute;right:0;bottom:clamp(14px,2.4vw,34px);margin:0;max-width:80%;text-align:right;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,3vw,2.4rem);line-height:1.2;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);z-index:2}
.v2-collectie .v2-bandt{margin-bottom:0}
@media(max-width:760px){
	.v2-cl{display:flex;flex-direction:column;gap:14px}
	.v2-cl .a.ph{width:78%;align-self:flex-end}
	.v2-cl .c.a{width:86%;margin:-2.4rem 0 8px}
	.v2-cl .c{margin:0}
	.v2-cl .k2{margin-left:8%}.v2-cl .k3{margin-right:8%}
}
@media(prefers-reduced-motion:reduce){.v2-cl .c{transition:none}}
.v2-cl .c p,.v2-cl .c span{color:inherit}
.v2-cl .c.be .sm,.v2-cl .c.bl .sm{opacity:.92}
.v2-cl .k4{grid-column:6/13;color:#8A7550;padding:0 clamp(0px,1vw,12px)}
.v2-cl .k4{margin-top:clamp(28px,4vw,56px)}
.v2-cl .k4{margin-top:clamp(90px,9vw,130px)}

.v2-cl .c:hover{rotate:none;scale:none}
.v2-bandt .bt{max-width:min(34rem,82%);font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.4}
.v2-collectie .v2-bandt{margin-bottom:clamp(72px,10vw,150px)}
/* tekst op de grote foto: smal blok in het rechterderde van de foto */
.v2-bandt .bt{max-width:min(calc(100vw / 3 - 20px),24rem);font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.45}
@media(max-width:599px){.v2-bandt .bt{max-width:62%}}

/* collectie: één grijs kaartje met blauwe tekst, titel in drie regels ernaast */
.v2-cl .hd{grid-column:1/6;grid-row:2;align-self:center;margin:clamp(30px,6vw,80px) 0 0;font-size:clamp(2.4rem,6.2vw,5.2rem);line-height:1;display:block}
.v2-cl .hd span,.v2-cl .hd em{display:block}
.v2-cl .c.gr.kc{grid-column:5/13;grid-row:2;margin:clamp(30px,6vw,80px) 0 0;color:#0086B2;display:grid;gap:clamp(22px,2.6vw,34px);padding:clamp(26px,3.6vw,52px);z-index:2}
.v2-cl .kc .sm{margin-top:8px}
.v2-cl .kc .big{margin:10px 0 0}.v2-cl .kc .al:first-child .big{margin:0}
@media(max-width:760px){
	.v2-cl .hd{grid-column:1/-1;grid-row:auto;margin:30px 0 0;width:100%;text-align:left}
	.v2-cl .c.gr.kc{margin:6px 0 0}
}

/* architectuur: kaartje in dezelfde stijl als op Collectie (beige, witte tekst, groot en klein) */
.v2-card.be{background:#D0B084}
.v2-card.be p{color:#fff}
.v2-card.be .mb{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.2;margin-bottom:10px}
.v2-card.be .ms{display:block;font-size:.92rem;line-height:1.7}

/* 3D maatwerk: zelfde kaartje maar grijs met blauwe tekst */
.v2-card.gr{background:#D6D5CB}
.v2-card.gr p,.v2-card.gr .mb,.v2-card.gr .ms{color:#0086B2}
.v2-card.gr .mb{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.2;margin-bottom:10px}
.v2-card.gr .ms{display:block;font-size:.92rem;line-height:1.7}

/* architectuur heeft nu een inleiding onder de titel, zoals 3D maatwerk */
.v2-architectuur .v2-title{padding-bottom:clamp(28px,4vw,56px)}
@media(max-width:599px){.v2-architectuur .v2-title{padding-bottom:22px}}

/* inleiding: op groot scherm iets speelser, blauwe tekst wat hoger en de beige tekst wat lager */
@media(min-width:900px){
	.v2-architectuur .v2-intro .lead{margin-top:-1.6rem}
	.v2-architectuur .v2-intro .tx,.v2-maatwerk .v2-intro .tx{padding-top:0;margin-top:3rem}
}

/* inleiding: de beige tekst sluit onderaan aan op de laatste regel van de blauwe tekst */
@media(min-width:900px){
	.v2-architectuur .v2-intro .tx,.v2-maatwerk .v2-intro .tx{margin-top:0;padding-top:0;align-self:end}
	.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{align-self:end}
	@supports (align-self:last baseline){
		.v2-architectuur .v2-intro .tx,.v2-maatwerk .v2-intro .tx{align-self:last baseline}
		.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{align-self:last baseline}
	}
}

.v2-card .mb:last-child{margin-bottom:0}

/* kleiner scherm: blauwe en beige tekst dichter bij elkaar, kaartje op de foto rechts in plaats van gecentreerd */
@media(max-width:899px){
	.v2-architectuur .v2-intro,.v2-maatwerk .v2-intro{gap:8px}
	.v2-band .v2-card{width:min(88%,32rem);margin-left:auto;margin-right:0}
}
@media(min-width:900px) and (max-width:1299px){
	.v2-architectuur .v2-intro,.v2-maatwerk .v2-intro{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(20px,3vw,40px)}
}
@media(max-width:899px){.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{margin:0}}

/* tekst op de grote foto: altijd twee regels, groter op breed scherm */
.v2-bandt .bt{max-width:none;white-space:nowrap;font-size:clamp(.9rem,2.6vw,2.4rem);line-height:1.3}

/* contactkaartje en melding: bar+ grijs met blauwe tekst (de lichte "kaart over de foto"-kleur verdwijnt) */
.v2-card.info,.bpf-msg{background-color:#D6D5CB}
.v2-card.info p,.v2-card.info .v2-link{color:#0086B2}
.v2-card.info .gr{color:#0086B2;opacity:.75}

/* papierkorrel over de hele site: een zachte laag boven alles (achtergrond, logo, intro, kaartjes, foto's) zodat er nergens een rand of wit vlak zichtbaar is */
html{background-color:var(--bg)}
/* 3.46.2 (Bart): het papier zelf scrolt niet mee: de korrel ligt als vaste laag achter de pagina (position:fixed i.p.v. background-attachment, dat iOS niet aankan); alles op de pagina blijft zoals het was */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--bg);background-image:url("grain-light.png?v=2.14.2");background-size:256px 256px;background-blend-mode:multiply}
html body{background:transparent}
#v2lb,.railbg,.v2-card,.bpf-msg,.v2-cl .c.be,.v2-cl .c.bl,.v2-cl .c.gr,.v2-tz .c-sand,.v2-tz .c-blue,.v2-tz .c-paper,.v2-tz .c-grey,.v2-sh .sq,.v2-title::before,.bp-cl,.blk,#bpTop{background-image:url("grain-light.png?v=2.14.2")!important;background-size:256px 256px!important;background-blend-mode:multiply!important}
@media(hover:hover){body.inpage .blk:not(.blue):hover{background-image:none!important}}
.blk.hv:not(.blue){background-image:none!important}
#logo,#stage video{mix-blend-mode:multiply}
#stage video{background:transparent!important}
#stage video.pre{opacity:0}
.v2-band .ph picture{display:contents}

/* collectie op groot scherm: kleine foto 15% kleiner, grote regels in de kaartjes iets kleiner */
@media(min-width:761px){
	.v2-cl .a.ph{width:72%;justify-self:end}
	.v2-cl .kc .big{font-size:clamp(1.3rem,2.7vw,2.15rem)}
	/* eerste beeld op groot scherm: alles compacter zodat foto en bordje direct zichtbaar zijn */
	.v2-collectie .v2-title{padding-top:clamp(6px,1.2vw,16px);padding-bottom:clamp(12px,1.6vw,20px)}
	.v2-cl .c.a{grid-column:1/13;justify-self:start;--cw:min(18rem,30%);width:var(--cw);margin:0 0 -1.1rem calc(52.5% - var(--cw) + 1.5rem);padding:clamp(12px,1.3vw,18px) clamp(14px,1.6vw,22px)}
	.v2-cl .c.a .sm{font-size:.78rem;line-height:1.5;margin-bottom:2px}
	.v2-cl .c.a .big{font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.2}
}

/* bovenste foto op de collectiepagina: alleen zacht infaden (alle schermen), blijft via v2.js scherp worden */
html.mo .v2-cl .a.ph[data-rv=up]{opacity:0;transform:none;background:transparent;transition:opacity 1.4s ease .05s}
html.mo .v2-cl .a.ph[data-rv=up].in{opacity:1}
@media(prefers-reduced-motion:reduce){html.mo .v2-cl .a.ph[data-rv=up]{opacity:1!important}}
/* mobiel: tekstvakje onder de bovenste foto schuift naar links, zodat het geschrankt staat */
@media(max-width:599px){.v2-cl .c.a{align-self:flex-start;margin-left:0;margin-right:0}}
/* mobiel: tekstvakje hoger op de foto, 'Een ontwerp groeit.' groter en sneller */
@media(max-width:599px){
.v2-cl .c.a{margin-top:-4.6rem}
.v2-cl .hd{font-size:clamp(3.4rem,15.5vw,4.6rem);line-height:1}
html.mo .v2-cl .hd[data-rv]{--d:.1s}
}
/* mobiel: 'Een ontwerp groeit.' start buiten beeld en schuift rustig van onderuit naar boven */
@media(max-width:599px){
html.mo .v2-cl .hd[data-rv=up]{transform:translate3d(0,24vh,0);transition:opacity .9s var(--ease) var(--d,0s),transform 1.4s var(--ease) var(--d,0s)}
html.mo .v2-cl .hd[data-rv=up].in{transform:none}
}
/* architectuur en 3D maatwerk: de beige tekst heeft een eigen animatie, los van de blauwe zin: schuift later en van links in, regel na regel */
.v2-architectuur .v2-intro .tx p[data-rv],.v2-maatwerk .v2-intro .tx p[data-rv]{--d:calc(.8s + var(--i,1)*.25s)}
html.mo .v2-architectuur .v2-intro .tx p[data-rv=up],html.mo .v2-maatwerk .v2-intro .tx p[data-rv=up]{transform:translate3d(-46px,0,0);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}
html.mo .v2-architectuur .v2-intro .tx p[data-rv=up].in,html.mo .v2-maatwerk .v2-intro .tx p[data-rv=up].in{transform:none}
/* groot scherm: hoofdtitel hoger, blauwe tekst een tikje kleiner en op beide pagina's even ver onder de titellijn */
@media(min-width:900px){
.v2-architectuur .v2-title,.v2-maatwerk .v2-title{padding-top:26px}
.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{font-size:clamp(1.15rem,1.75vw,1.6rem)}
.v2-architectuur .v2-title,.v2-maatwerk .v2-title{padding-bottom:0}
.v2-architectuur .v2-intro,.v2-maatwerk .v2-intro{margin-top:0;padding-top:52px}
.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{margin:0;align-self:end}
.v2-architectuur .v2-intro .tx,.v2-maatwerk .v2-intro .tx{align-self:end}
}
/* groot scherm: dezelfde verhoudingen en tekstgroottes als op een iets smaller venster; alles schaalt mee, de marges links en rechts blijven even groot */
@media(min-width:1300px){
.v2-architectuur .v2-intro,.v2-maatwerk .v2-intro{grid-template-columns:minmax(0,38.3%) minmax(0,1fr)}
.v2-architectuur .v2-intro .lead,.v2-maatwerk .v2-intro .lead{font-size:clamp(1.15rem,1.75vw,1.4rem)}
}

/* blokje dat van het menu naar de titel reist */
.bp-cl{position:fixed;z-index:9990;left:0;top:0;margin:0;background-color:var(--blue);pointer-events:none;will-change:transform}

/* inprinten: foto's en covers zijn verborgen tot ze aan de beurt zijn; daarna tekent het script ze laag per laag */
.v2-band .ph,.v2-tile .im{position:relative}
html.mo [data-rv=print]:not(.in) .ph,html.mo [data-rv=print]:not(.in) .im{clip-path:inset(100% 0 0 0)}
html.mo .v2-tw[data-rv=print] .cap{transition:opacity .8s ease .6s}
html.mo .v2-tw[data-rv=print]:not(.in) .cap{opacity:0}
.v2-hd{position:absolute;left:0;right:0;top:100%;height:2px;background:var(--blue);box-shadow:0 0 10px 1px rgba(0,134,178,.55);pointer-events:none;z-index:3}
@media(prefers-reduced-motion:reduce){.v2-hd{display:none}}
html.mo .v2-tile{background:transparent}

/* Wie ben ik: kop + kaartje, op elke pagina een andere kant op */
.v2-cl.v2-wh{margin-bottom:clamp(64px,9vw,130px)}
.v2-wh .hd{grid-row:1;margin-top:0}
.v2-wh .c.gr.kc{grid-row:1;margin-top:0}
.v2-wh .kc .big{font-size:clamp(1.3rem,2.7vw,2.15rem)}
@media(min-width:761px){
	.v2-wh .hd{grid-column:9/13;text-align:left;align-self:end;line-height:.92;margin-bottom:-.06em}
	.v2-wh .c.gr.kc{grid-column:1/9}
	.v2-wh.wa .c.gr.kc{margin-top:clamp(40px,6vw,90px)}
}
.v2-wh.wm .c.gr.kc{background-color:#D0B084;color:#fff}
@media(max-width:760px){.v2-wh .hd,.v2-wh .c.gr.kc{grid-row:auto}.v2-wh .hd{margin-top:0}}
@media(max-width:599px){.v2-cl .hd{font-size:clamp(2.4rem,10.5vw,3.1rem);line-height:1}}
/* collectie: "Een ontwerp groeit." rechts uitgelijnd, onderkant gelijk met het kaartje */
@media(min-width:761px){
	.v2-cl:not(.v2-wh) .hd{grid-column:1/5;align-self:end;text-align:right;line-height:.92;margin-top:0;margin-bottom:-.06em;padding-right:1.2rem}
	.v2-cl:not(.v2-wh) .c.gr.kc{margin-top:0}
}

/* 2.25 – minder dia, meer website: kaartjes zonder zachte schaduw, één gevuld kaartje per pagina, kleine sectiekoppen met nummer */
.v2-card,.v2-cl .c,.v2-tz .bx .in,.v2-tz .bx:hover .in{box-shadow:none}
/* collectie: het zandkaartje over de foto is het enige gevulde kaartje; het krijgt een harde blokrand i.p.v. een zachte schaduw */
.v2-cl .c.be{box-shadow:10px 10px 0 rgba(208,176,132,.42)}
/* contactkaartje: open, met dunne lijn */
.v2-card.info{background:none!important;background-image:none!important;padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--blue)}
/* Wie ben ik / een ontwerp groeit: geen gevuld kaartje meer, maar tekst met een dunne lijn */
.v2-cl .c.gr.kc,.v2-wh.wm .c.gr.kc{background:none!important;background-image:none!important;color:#0086B2;padding:clamp(18px,2.2vw,30px) 0 0;border-top:1px solid var(--blue)}
.v2-cl:not(.v2-wh) .c.gr.kc{border-top:0;border-left:1px solid var(--blue);padding:0 0 0 clamp(18px,2.4vw,34px)}
.v2-wh.wm .c.gr.kc{border-top:0;border-left:1px solid var(--blue);padding:0 0 0 clamp(18px,2.4vw,34px)}
/* sectiekoppen: kleiner, met nummer, zonder vierkantjes */
.v2-sh{--hs:clamp(1.1rem,1.55vw,1.3rem)}
.v2-sh .snk .ps,.v2-sh .snk .pq{display:none}
@media(max-width:599px){.v2-sh{--hs:1.05rem}}
.v2-cl:not(.v2-wh) .c.gr.kc{padding-top:clamp(18px,2vw,28px);padding-bottom:clamp(8px,1vw,14px)}

/* 2.25.1 – raster doorbreken (albums, diensten, stappen), Wie ben ik per pagina anders, ritme */
@media(min-width:900px){
	/* diensten: volle rijen (nummer, titel, tekst) */
	.v2-svc.n3,.v2-svc.n2,.v2-svc.n4{grid-template-columns:1fr;gap:0}
	.v2-svc .s{display:grid;grid-template-columns:3.2rem minmax(0,.9fr) minmax(0,1.4fr);column-gap:clamp(20px,3vw,48px);align-items:baseline;border-bottom:0;border-top:1px solid var(--blue);padding:clamp(20px,2.4vw,32px) 0}
	.v2-svc .s:last-child{border-bottom:0}
	.v2-svc .s h3,.v2-svc.n3 h3{min-height:0;margin:0}
	.v2-svc .s p{margin:0}
}
/* hoe het werkt: kopregel met lijn, per stap een lijntje onder de tekst (zonder blokje) */
.v2-steps li{border-top:0;border-bottom:1px solid var(--blue);padding:0 0 18px;position:relative}
.v2-steps li::before{content:none}
/* Wie ben ik: Architectuur = smalle tekstkolom met lijn erboven, kop onderaan rechts; Maatwerk = ingesprongen met lijn links, kop op één regel bovenaan rechts */
@media(min-width:761px){
	.v2-wh.wa .c.gr.kc{grid-column:1/7}
	.v2-wh.wa .hd{grid-column:8/13}
	.v2-wh.wm .c.gr.kc{grid-column:3/9}
	.v2-wh.wm .hd{grid-column:9/13;align-self:start;margin-top:0;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.05;margin-bottom:0}
	.v2-wh.wm .hd span,.v2-wh.wm .hd em{display:inline}
}
/* ritme: korter tussen verwante blokken, ruim na Wie ben ik, groter slot dicht bij de laatste sectie */
.v2-sec{padding-bottom:clamp(48px,6.5vw,92px)}
.v2-close{margin-top:calc(clamp(48px,6.5vw,92px)*-.45)}
.v2-close p{font-size:clamp(1.3rem,2.8vw,2.2rem)}
@media(max-width:599px){.v2-close{margin-top:0}.v2-close p{font-size:1.2rem}}
@media(min-width:761px){.v2-wh.wa .hd{grid-column:9/13;text-align:right;justify-self:end}}

/* 2.25.2 – animaties rustiger, hover/tik, mobiel */
/* tekst en kaartjes komen kort en rustig binnen; alleen foto's printen in */
html.mo [data-rv=up]{transform:translate3d(0,16px,0);transition:opacity .7s ease var(--d,0s),transform .8s var(--ease) var(--d,0s)}
html.mo [data-rv].in{transform:none}
/* hover op diensten, albums en menublokjes */
@media(hover:hover){
	/* 3.16.0: oude padding-transitie op .v2-svc .s weg (hover schuift enkel de titel, via transform) */
	.v2-svc .s h3{transition:color .3s ease,transform .45s var(--ease)}
	.v2-svc .s .no{transition:color .3s ease}
	.v2-svc .s:hover h3{transform:translateX(10px)}
	.v2-svc .s:hover .no{color:var(--blue)}
	.v2-tw .nm{transition:color .3s ease}
	.v2-tw:hover .nm{color:var(--sandk)}
}
/* tikfeedback */
.v2-tile:active .im{transform:scale(.97);transition:transform .15s ease}
.v2-svc .s:active h3{transform:translateX(6px)}
/* mobiel: kaartjes tot aan de rand van het scherm */
@media(max-width:599px){
	.v2-band .v2-card{margin-left:14%;margin-right:calc(var(--g,18px)*-1);padding-right:calc(var(--g,18px) + 8px)}
	.v2-cl .c.a{margin-left:calc(var(--g,18px)*-1);width:calc(86% + var(--g,18px));padding-left:calc(var(--g,18px) + 8px)}
}

/* sectiekoppen: vol beige vierkantje dat uit de lijn tevoorschijn komt (originele animatie) */
.v2-sh .sq{background-color:var(--sand)}

/* geen dubbele lijnen: bij diensten en stappen neemt de eerste rij/lijn de plaats van de kopregel in */
.v2-sh:has(+ .v2-svc) .lnw{visibility:visible}
.v2-sh:has(+ .v2-svc){margin-bottom:clamp(14px,2vw,26px)}

/* 2.25.7 – albums leven: klein in rust (rechts van de rij leeg), de aangewezen wordt breder, de anderen smaller; rustige beweging */
@media(min-width:900px){
}
@media(min-width:900px) and (hover:hover){
}

/* Wie ben ik, open tekst: kop en tekst staan vlak naast elkaar */
@media(min-width:761px){
	.v2-wh.wa .c.gr.kc,.v2-wh.wm .c.gr.kc{margin-top:0}
	.v2-wh.wa .c.gr.kc{grid-column:4/10}
	.v2-wh.wa .hd{grid-column:10/13;text-align:left;justify-self:start;align-self:end;padding-left:clamp(20px,2.6vw,40px);margin-bottom:-.06em}
	.v2-wh.wm .c.gr.kc{grid-column:1/8}
	.v2-wh.wm .hd{grid-column:8/13;text-align:left;justify-self:start;align-self:start;padding-left:clamp(20px,2.6vw,40px);margin-top:0}
}

/* 3D maatwerk: Wie ben ik links van het streepje, drie woorden onder elkaar, onderaan uitgelijnd met de tekst */
@media(min-width:761px){
	.v2-wh.wm .hd{grid-column:1/4;grid-row:1;text-align:right;justify-self:end;align-self:end;padding:0 clamp(20px,2.6vw,40px) 0 0;margin:0 0 -.06em;font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:.95}
	.v2-wh.wm .hd span,.v2-wh.wm .hd em{display:block}
	.v2-wh.wm .c.gr.kc{grid-column:4/11;grid-row:1}
}

/* collectie: zandkaartje zonder blokrand (leek een dubbele rand) */
.v2-cl .c.be{box-shadow:none}

/* groot scherm: dezelfde indeling als op een kleiner scherm (alles schaalt mee) */
@media(min-width:1280px){html{font-size:clamp(16px,1.25vw,21.4px)}}
@media(min-width:900px){
}

/* zweven: kaartjes over foto's wiegen heel zacht (alleen rotatie, zodat het niet botst met het verschijnen en meescrollen) */
@keyframes bpfloat{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}
.v2-band .v2-card,.v2-cl .c.be{animation:none}
@media(prefers-reduced-motion:reduce){.v2-band .v2-card,.v2-cl .c.be{animation:none}}

/* 2.25.10 */
.v2-band .v2-card,.v2-cl .c.be{box-shadow:0 5px 12px -6px rgba(45,40,30,.20),0 1px 2px rgba(45,40,30,.09)}
.v2-sh:has(+ .v2-svc){margin-bottom:0}
@media(min-width:900px){.v2-sh:has(+ .v2-svc)+.v2-svc .s:first-child{border-top:0}}

/* 2.26.0 ---------------------------------------------------------- */
/* navigatie: de inhoud loopt zacht onder het menu door (geen harde afsnijding) */
.railbg::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:var(--bg) url("grain-light.png?v=2.14.2");background-size:256px 256px;background-blend-mode:multiply;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.972) 10%,rgba(0,0,0,.896) 20%,rgba(0,0,0,.784) 30%,rgba(0,0,0,.648) 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.352) 60%,rgba(0,0,0,.216) 70%,rgba(0,0,0,.104) 80%,rgba(0,0,0,.028) 90%,rgba(0,0,0,0));mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.972) 10%,rgba(0,0,0,.896) 20%,rgba(0,0,0,.784) 30%,rgba(0,0,0,.648) 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.352) 60%,rgba(0,0,0,.216) 70%,rgba(0,0,0,.104) 80%,rgba(0,0,0,.028) 90%,rgba(0,0,0,0));pointer-events:none}

/* "Hoe het werkt" als tijdlijn */
.v2 .v2-steps.tl,.v2 .v2-steps.tl.n4,.v2 .v2-steps.tl.n3{display:block;position:relative;margin:0;padding:0 0 0 clamp(26px,3vw,38px);max-width:46rem}
.v2-steps.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--blue);transform-origin:top}
.v2 .v2-steps.tl li{border:0;display:grid;grid-template-columns:clamp(2.2rem,3vw,2.8rem) minmax(0,1fr);align-items:baseline;padding:0 0 var(--gp,36px);position:relative}
.v2-steps.tl li:nth-child(1){--gp:30px}.v2-steps.tl li:nth-child(2){--gp:20px}.v2-steps.tl li:nth-child(3){--gp:52px}.v2-steps.tl li:last-child{padding-bottom:0}
.v2-steps.tl li::before{content:"";position:absolute;left:calc(clamp(26px,3vw,38px)*-1);top:.38em;width:11px;height:11px;background:var(--blue)}
.v2 .v2-steps.tl .n{font-family:var(--serif);font-size:.9rem;letter-spacing:.12em;line-height:1.5;margin:0;color:var(--sand)}
.v2-steps.tl p{margin:0;font-size:1rem;line-height:1.55}
html.tlj .v2-steps.tl::before{transform:scaleY(var(--tp,0))}
html.tlj .v2-steps.tl li::before{transform:scale(0)}
html.tlj .v2-steps.tl li.on::before{transform:scale(1);transition:transform .5s var(--ease)}
@media(max-width:599px){.v2 .v2-steps.tl,.v2 .v2-steps.tl.n4{padding-left:30px}.v2-steps.tl li::before{left:-30px}.v2-steps.tl p{font-size:.95rem}}

/* kaartjes met eigen karakter: 3D maatwerk = vlak grijs kaartje met printlagen-strook, zonder kanteling en schaduw */
.v2-band .v2-card.gr{animation:none;box-shadow:none;background-color:#0086B2}
/* collectie: kaartje sluit aan op de linkerrand van de foto */
@media(max-width:599px){.v2-cl .c.a{width:calc(78% * .8);margin-left:22%;margin-right:0;padding-right:20px}}

/* afsluiters als rechtse titel (zoals de slotregel van collectie) */
.v2-title.v2-fin{padding-top:clamp(10px,2vw,28px);padding-bottom:0;margin-bottom:clamp(48px,6vw,84px)}
.v2-title.v2-fin h1{font-size:clamp(1.1rem,2.1vw,1.6rem);max-width:none;margin-bottom:0}
.v2-title.v2-fin h1 .v2-link{color:var(--sand);background-image:linear-gradient(var(--sand),var(--sand))}
.v2-title.v2-fin h1 .v2-link:hover{color:#fff}
.v2-title.v2-fin h1 a{color:var(--blue)}
.v2-sec:has(+ .v2-fin){padding-bottom:clamp(8px,1.5vw,20px)}

/* albums: rij over de volle breedte, in rust al evenwichtig */
@media(min-width:900px){
}

/* verticaal ritme: verwante blokken dichter, echte themawissels ruimer */
.v2-sec:has(>.v2-tiles){padding-bottom:clamp(40px,5vw,64px)}
.v2-sec.v2-proj{padding-bottom:clamp(96px,12.5vw,180px)}
.v2-sec:has(>.v2-tiles):has(+ .v2-sec>.v2-steps){padding-bottom:clamp(96px,12.5vw,180px)}
.v2-intro{padding-bottom:clamp(14px,2.2vw,30px)}
@media(max-width:599px){.v2-sec.v2-proj,.v2-sec:has(>.v2-tiles):has(+ .v2-sec>.v2-steps){padding-bottom:64px}}
/* wiegen blijft enkel op Architectuur; Collectie zweeft (parallax) maar wiegt niet */
.v2-cl .c.be{animation:none}

/* 2.26.1 */
.v2-band .v2-card.gr p,.v2-band .v2-card.gr .mb,.v2-band .v2-card.gr .ms{color:#fff}
/* afsluiter: titelregel boven de lijn, "Mail mij." eronder */
.v2 .v2-finmail{margin:clamp(12px,1.6vw,20px) 0 clamp(48px,6vw,84px);text-align:right;font-family:var(--serif);font-weight:500;font-size:clamp(.95rem,1.7vw,1.3rem);line-height:1.22;color:var(--sand)}
.v2-finmail a{color:var(--sand);background-image:linear-gradient(var(--sand),var(--sand))}
.v2-finmail a:hover{color:#fff}

/* kaartje 3D maatwerk: schuift van rechts in en komt scheef tot rust */

/* 2.26.3 – albums: één rij links tot ±3/4 breed, ook bij 4, 5 of meer; maatwerk = groot, kleiner en hoger, klein en lager; architectuur = omgekeerd, trapsgewijs omhoog */
@media(min-width:600px){
	.v2-tiles.row{display:flex;flex-wrap:nowrap;gap:clamp(12px,1.6vw,24px);align-items:flex-start;width:75%;margin-right:auto;container-type:inline-size}
	.v2-tiles.row>.v2-tw{flex:1 1 0;min-width:0;transition:flex-grow .7s var(--ease)}
	.v2-tiles.row>.v2-tw:hover{flex-grow:1.7}
	.v2-tiles.row .v2-tile .im{aspect-ratio:1/1;height:auto}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1){flex-grow:1.7;margin-top:7cqw}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1) .v2-tile .im{aspect-ratio:4/5}
	.v2-tiles.mw>.v2-tw:nth-child(3n+2){flex-grow:1;margin-top:0}
	.v2-tiles.mw>.v2-tw:nth-child(3n){flex-grow:.9;margin-top:15cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n+1){flex-grow:.9;margin-top:15cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n+2){flex-grow:1.1;margin-top:7cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n){flex-grow:1.6;margin-top:0}
	.v2-tiles.ar>.v2-tw:nth-child(3n) .v2-tile .im{aspect-ratio:4/5}
	.v2-tiles.row>.v2-tw:hover{flex-grow:2}
}

/* 2.26.4 – "Wie ben ik": lijn loopt uit, slangetje tekent een hol blauw vierkantje (Architectuur: boven het einde van de lijn; maatwerk: links onderaan de lijn) */
.v2-cl.v2-wh .c.gr.kc{border-top:0;border-left:0;position:relative}
.v2-wh .lnw{position:absolute;pointer-events:none}
.v2-wh.wa .lnw{left:0;right:0;top:0;height:1px}
.v2-wh.wm .lnw{left:0;top:0;bottom:0;width:1px}
.v2-wh .ln{display:block;background:var(--blue)}
.v2-wh.wa .ln{height:1px;width:100%}
.v2-wh.wm .ln{width:1px;height:100%}
.v2-wh .snk{display:none;position:absolute;overflow:visible}
.v2-wh.wa .snk{left:0;bottom:0}
.v2-wh.wm .snk{right:0;top:0}
.v2-wh .snk path{fill:none;stroke:var(--blue);stroke-width:1;stroke-linecap:square}
html.mo .v2-wh.snake .ln{display:none}
html.mo .v2-wh.snake .snk{display:block}
@media(min-width:761px){.v2-wh.wm .hd{padding-right:calc(clamp(20px,2.6vw,40px) + 1.5rem)}}
/* albums: eerste altijd iets groter; Architectuur trapsgewijs omlaag, maatwerk golvend; op groot scherm kleiner */
@media(min-width:600px){
	.v2-tiles.row{width:min(75%,46rem)}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1){flex-grow:1.35}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1) .v2-tile .im{aspect-ratio:5/6}
	.v2-tiles.ar>.v2-tw:nth-child(3n+1){flex-grow:1.35;margin-top:0}
	.v2-tiles.ar>.v2-tw:nth-child(3n+1) .v2-tile .im{aspect-ratio:5/6}
	.v2-tiles.ar>.v2-tw:nth-child(3n+2){flex-grow:1;margin-top:8cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n){flex-grow:.9;margin-top:16cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n) .v2-tile .im{aspect-ratio:1/1}
	.v2-tiles.row>.v2-tw:hover{flex-grow:1.8}
}
@media(max-width:760px){.v2-wh.wm .c.gr.kc{margin-left:1.9rem}}

/* 2.26.6 */
body{overflow-x:clip}
.v2-band .v2-card.gr{box-shadow:0 8px 22px -10px rgba(45,40,30,.2),0 1px 3px rgba(45,40,30,.08)}
html.mo .v2-band .v2-card.gr{transition:opacity .7s ease .45s,transform 1.5s var(--ease) .45s}
html.mo .v2-band:not(.in) .v2-card.gr{opacity:0;transform:translate3d(70vw,0,0)}
@media(prefers-reduced-motion:reduce){html.mo .v2-band .v2-card.gr{opacity:1!important;transform:none!important;transition:none}}
@media(max-width:599px){
	.railbg::after{height:8px}
	html.mo .v2-wh.wa .hd[data-rv=up]{transform:translate3d(-70px,0,0)}
	html.mo .v2-wh.wm .hd[data-rv=up]{transform:translate3d(70px,0,0)}
	html.mo .v2-wh .hd[data-rv=up].in{transform:none}
	.v2-wh.wm .hd{text-align:right}
	.v2-tiles.row{align-items:flex-start}
	.v2-tiles.row .v2-tw{flex:0 0 50%}
	.v2-tiles.row .v2-tw:nth-child(3n+1){flex-basis:58%}
	.v2-tiles.mw .v2-tw:nth-child(3n+1){margin-top:16px}
	.v2-tiles.mw .v2-tw:nth-child(3n+2){margin-top:0;flex-basis:44%}
	.v2-tiles.mw .v2-tw:nth-child(3n){margin-top:36px;flex-basis:40%}
	.v2-tiles.ar .v2-tw:nth-child(3n+1){margin-top:0}
	.v2-tiles.ar .v2-tw:nth-child(3n+2){margin-top:24px;flex-basis:48%}
	.v2-tiles.ar .v2-tw:nth-child(3n){margin-top:48px;flex-basis:42%}
}

/* 2.26.7 – dezelfde aanpassingen op elk formaat (mobiel, niet fullscreen, fullscreen) */
.v2-svc .s:last-child{border-bottom:0}
.railbg::after{height:10px}
@media(max-width:599px){.railbg::after{height:8px}}
@media(min-width:761px){
	html.mo .v2-wh.wa .hd[data-rv=up]{transform:translate3d(-70px,0,0)}
	html.mo .v2-wh.wm .hd[data-rv=up]{transform:translate3d(70px,0,0)}
	html.mo .v2-wh .hd[data-rv=up].in{transform:none}
}
@media(min-width:600px){
	.v2-tiles.row{width:min(68%,40rem)}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1){margin-top:9cqw}
	.v2-tiles.mw>.v2-tw:nth-child(3n){margin-top:19cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n+2){margin-top:10cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n){margin-top:20cqw}
}

/* 2.26.7 – per schermformaat: lijn weg, albums, Wie ben ik, kaartje Collectie, Een ontwerp groeit */
.v2-svc .s:last-child{border-bottom:0}
/* albums (desktop): eerste iets kleiner, tweede iets groter dan derde */
@media(min-width:600px){
	.v2-tiles.mw>.v2-tw:nth-child(3n+1),.v2-tiles.ar>.v2-tw:nth-child(3n+1){flex-grow:1.1}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1) .v2-tile .im,.v2-tiles.ar>.v2-tw:nth-child(3n+1) .v2-tile .im{aspect-ratio:1/1.08}
	.v2-tiles.mw>.v2-tw:nth-child(3n+2),.v2-tiles.ar>.v2-tw:nth-child(3n+2){flex-grow:1}
	.v2-tiles.mw>.v2-tw:nth-child(3n),.v2-tiles.ar>.v2-tw:nth-child(3n){flex-grow:.78}
	.v2-tiles.ar>.v2-tw:nth-child(3n) .v2-tile .im{aspect-ratio:1/1}
	.v2-tiles.row>.v2-tw:hover{flex-grow:1.7}
}
/* Wie ben ik: op alle formaten van links */
html.mo .v2-wh.wa .hd[data-rv=up],html.mo .v2-wh.wm .hd[data-rv=up]{transform:translate3d(-70px,0,0)}
html.mo .v2-wh .hd[data-rv=up].in{transform:none}
@media(max-width:760px){.v2-wh.wm .hd{text-align:left;margin-left:1.9rem;align-self:flex-start;width:calc(100% - 1.9rem)}}
/* mobiel: albums speelser */
@media(max-width:599px){
	.v2-tiles.row .v2-tw:nth-child(3n+1){flex-basis:54%}
	.v2-tiles.mw .v2-tw:nth-child(3n+1){margin-top:20px}
	.v2-tiles.mw .v2-tw:nth-child(3n+2){margin-top:0;flex-basis:42%}
	.v2-tiles.mw .v2-tw:nth-child(3n){margin-top:50px;flex-basis:38%}
	.v2-tiles.ar .v2-tw:nth-child(3n+1){margin-top:0;flex-basis:56%}
	.v2-tiles.ar .v2-tw:nth-child(3n+2){margin-top:36px;flex-basis:44%}
	.v2-tiles.ar .v2-tw:nth-child(3n){margin-top:70px;flex-basis:38%}
}
/* Collectie: kaartje een kwart van zijn breedte naar links; "Een ontwerp groeit." schuift van links */
@media(min-width:761px){.v2-cl .c.a{margin-left:calc(52.5% - var(--cw)*1.25 + 1.5rem)}}
@media(max-width:599px){.v2-cl .c.a{margin-left:6.4%}}
html.mo .v2-cl:not(.v2-wh) .hd[data-rv=up]{transform:translate3d(-60px,0,0);transition:opacity .9s var(--ease) var(--d,0s),transform 1.4s var(--ease) var(--d,0s)}
html.mo .v2-cl:not(.v2-wh) .hd[data-rv=up].in{transform:none}

/* 2.26.8 */
@media(min-width:600px){
	.v2-tiles.ar>.v2-tw:nth-child(3n+1){margin-top:8cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n+2){margin-top:12cqw}
	.v2-tiles.ar>.v2-tw:nth-child(3n){margin-top:20cqw}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1){flex-grow:1.25}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1) .v2-tile .im{aspect-ratio:1/1.12}
	.v2-tiles.mw>.v2-tw:nth-child(3n+2){flex-grow:.88}
	.v2-tiles.row>.v2-tw:hover{flex-grow:1.7}
}
@media(max-width:599px){.v2-cl .c.a{margin-left:0}}

/* 2.26.10 – minder wit tussen tekst en albums, eerste album iets groter, hover-vergroting rustiger */
.v2-cl.v2-wh{margin-bottom:clamp(28px,3.5vw,48px)}
@media(min-width:600px){
	.v2-tiles.mw>.v2-tw:nth-child(3n+1){flex-grow:1.38}
	.v2-tiles.ar>.v2-tw:nth-child(3n+1){flex-grow:1.25}
	.v2-tiles.row>.v2-tw:hover{flex-grow:1.2}
	.v2-tiles.mw>.v2-tw:nth-child(3n+1):hover{flex-grow:1.45}
	.v2-tiles.ar>.v2-tw:nth-child(3n+1):hover{flex-grow:1.35}
}

/* 2.26.11 – gsm: albums als carousel; het album in het midden is het grootst, de buren krimpen en vervagen */
@media(max-width:599px){
	.v2-tiles.row{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;width:auto;margin:0 calc(var(--g)*-1);padding:6px 21% 12px;scroll-padding:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;container-type:normal}
	.v2-tiles.row::-webkit-scrollbar{display:none}
	.v2-tiles.row>.v2-tw:nth-child(n){flex:0 0 100%;margin-top:0;scroll-snap-align:center;scale:var(--s,1);opacity:var(--o,1);will-change:scale,opacity}
	.v2-tiles.row>.v2-tw:nth-child(n) .v2-tile .im{aspect-ratio:4/5}
	.v2-tiles.row>.v2-tw .cap{display:flex;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.v2-tiles.row>.v2-tw:nth-child(n){scale:1;opacity:1}}

/* 2.26.17 – titel: eerst de lijn (met het holle vierkantje), dan het blauwe vierkantje, dan pas de tekst */
html.mo .v2-title.in::before{transition:opacity .5s ease 1s}
html.mo .v2-title h1[data-rv=zoom]{transition:opacity .7s ease 1.15s,transform .8s var(--ease) 1.15s}

/* 2.26.22 – gsm: het menu schuift mee met de scrollsnelheid: omhoog bij naar beneden scrollen, terug bij omhoog scrollen (advies testpersonages) */
@media(max-width:599px){
	body.inpage{--hh:calc(-1*(var(--t0) + var(--stack) + 30px))}
	body.inpage .railbg{transition:translate var(--tt,0s) var(--ease)}
	body.inpage .blk{transition:background-color .6s,box-shadow .3s,opacity .4s,translate var(--tt,0s) var(--ease)}
	body.inpage .blk.nt{transition:translate var(--tt,0s) var(--ease)}
	body.inpage .wd{transition:opacity .5s,color .25s,translate var(--tt,0s) var(--ease)}
	body.inpage #logo{transition:opacity .5s,translate var(--tt,0s) var(--ease)}
	body.inpage .railbg,body.inpage .blk,body.inpage .wd,body.inpage #logo{translate:0 var(--hy,0px)}
	body.inpage .railbg,body.inpage .blk,body.inpage .wd,body.inpage #logo{will-change:translate}
}
@media(prefers-reduced-motion:reduce){body.inpage .railbg,body.inpage .blk,body.inpage .wd,body.inpage #logo{translate:none}}

/* 2.26.28 – "Wat ik voor jou kan printen": dubbele ruimte tussen titel en 01; slottitel Collectie ook op gsm op één lijn */
.v2-sh:has(+ .v2-svc){margin-bottom:26px}
@media(min-width:900px){
	.v2-sh:has(+ .v2-svc){margin-bottom:0}
	.v2-sh:has(+ .v2-svc)+.v2-svc .s:first-child{padding-top:clamp(64px,7vw,100px)}
}
@media(max-width:899px){
	.v2-collectie .v2-title.r h1{white-space:nowrap;font-size:min(1.2rem,5.1vw)}
}

/* 2.26.33 – sectiekoppen binnen een pagina staan meteen (geen animatie); paginatitel blijft animeren */
html.mo .v2-sh h2{opacity:1!important;transform:none!important;transition:none!important}
html.mo .v2-sh .sq{transform:none!important;transition:none!important}
html.mo .v2-sh.mv h2{clip-path:inset(-10% -2% -10% 0)!important}
html.mo .v2-sh.mv .sqw{transform:translateX(var(--sx))!important;transition:none!important}

/* verschijnen bij scrollen: iets sneller en korter */
html.mo [data-rv=up]{transform:translate3d(0,56px,0);transition:opacity .7s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s)}
html.mo [data-rv=up].in{transform:none}
html.mo .v2-svc .s[data-rv],html.mo .v2-steps li[data-rv]{--d:calc(var(--i,0)*.1s)}
html.mo .v2-tw[data-rv]{--d:calc(var(--i,0)*.1s)}

/* albumnamen blijven op pc zichtbaar onder de cover; de hover is lichter (alleen tint en lichte zoom) */
@media(hover:hover){
	.v2-tw .cap{display:flex}
	.v2-tile .ov{background:rgba(30,28,22,.16)}
	.v2-tile .ov span{display:none}
}

/* iets grotere nummers en kleine labels */
.v2-svc .no{font-size:1.2rem}
.v2-tw .nm{font-size:1.06rem}
.v2-tw .cnt{font-size:.84rem}
@media(max-width:599px){.v2-svc .no{font-size:1.05rem}.v2-tw .nm{font-size:.95rem}.v2-tw .cnt{font-size:.78rem}}

/* 2.26.34 – albumnamen onder de covers: kleiner en netjes binnen de breedte van het album */
.v2-tw .cap{padding-top:10px;gap:8px;min-width:0}
.v2-tw .nm{font-size:.86rem;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.v2-tw .cnt{font-size:.74rem}
@media(max-width:599px){.v2-tw .nm{font-size:.86rem}.v2-tw .cnt{font-size:.72rem}}

/* 2.26.35 – Hoe het werkt: gelijke tussenruimte, grotere nummers */
.v2-steps.tl li:nth-child(1),.v2-steps.tl li:nth-child(2),.v2-steps.tl li:nth-child(3){--gp:36px}
.v2 .v2-steps.tl li{grid-template-columns:clamp(2.8rem,3.6vw,3.4rem) minmax(0,1fr)}
.v2 .v2-steps.tl .n{font-size:1.2rem;line-height:1.3}
.v2-steps.tl p{line-height:1.3}
.v2-steps.tl li::before{top:.4em}
@media(max-width:599px){.v2 .v2-steps.tl .n{font-size:1.05rem}.v2 .v2-steps.tl li{grid-template-columns:2.6rem minmax(0,1fr)}}

/* 2.26.37 – titelblokje blauw, geen nummers bij de diensten, "mail mij" blauw en onderlijnd zonder animatie */
.v2-sh .sq{background-color:var(--blue)}
@media(min-width:900px){.v2-svc .s{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}}
.v2-title.v2-fin h1 .v2-link,.v2-title.v2-fin h1 .v2-link:hover{color:var(--blue);background:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:none;padding:0}

/* 2.26.39 – albumvorm volgt de coverfoto (breedte blijft gelijk, hoogte nooit groter dan voorheen) */
.v2-tw[style*="--ar"] .v2-tile .im{aspect-ratio:var(--ar)!important}

/* 2.26.40 – hele fijne schaduw rond de albums (volgt het inprinten van de foto) */
.v2-tw .v2-tile{filter:drop-shadow(0 3px 5px rgba(45,40,30,.16)) drop-shadow(0 1px 1px rgba(45,40,30,.09));transition:filter .5s ease}
@media(hover:hover){.v2-tw .v2-tile:hover{filter:drop-shadow(0 7px 9px rgba(45,40,30,.20)) drop-shadow(0 1px 1px rgba(45,40,30,.10))}}

/* 2.26.41 – schaduw rond de albums veel lichter */
.v2-tw .v2-tile{filter:drop-shadow(0 2px 3px rgba(45,40,30,.09))}
@media(hover:hover){.v2-tw .v2-tile:hover{filter:drop-shadow(0 4px 6px rgba(45,40,30,.13))}}

/* 2.26.45 – contact: foto naast de gegevens (gsm), losse tekst, afsluiter als titel */
.v2-ct{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(20px,5vw,40px);row-gap:28px;align-items:start;padding-bottom:clamp(40px,6vw,80px)}
.v2-ct .ph{display:block;width:100%;height:auto;margin:0}
.v2-ct .ph0{aspect-ratio:4/5;background:#d6d5cb;display:flex;align-items:center;justify-content:center}
.v2-ct .ph0 span{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.v2-me{grid-column:1/-1}
.v2-me h2{font-family:var(--serif);font-weight:500;color:var(--blue);margin:0 0 14px;font-size:1.15rem}
.v2-me p{margin:0;max-width:34em}
@media(min-width:900px){.v2-ct{grid-template-columns:5fr 2.8fr 4.2fr;column-gap:clamp(28px,4.5vw,72px)}.v2-me{grid-column:auto}.v2-me h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:20px}}

/* 2.26.48 – contact: tekst bij de foto; "Achter de schermen"-tegel (film volgt) */
.v2-me p{margin:0 0 .9em;max-width:30em}
.v2-me p:last-child{margin-bottom:0}
.v2-tile.v2-film{cursor:default}
.v2-tile.v2-film .im{background:#d6d5cb}
.v2-tile.v2-film img{opacity:0}
.v2-tile .fw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
@media(hover:hover){.v2-tile.v2-film:hover img{transform:none}}

/* 2.26.50 – contact: twee speelse albumvakjes rechts (films volgen) */
.v2-bts{grid-column:1/-1;margin-top:clamp(8px,2vw,24px)}
.v2-bts .v2-tiles{display:flex;gap:clamp(12px,1.6vw,24px);align-items:flex-start;width:min(100%,22rem);margin-left:auto;container-type:inline-size}
.v2-bts .v2-tw{flex:1 1 0;min-width:0}
.v2-bts .v2-tiles .v2-tile .im{aspect-ratio:1/1!important}
.v2-bts .v2-tw:nth-child(1){margin-top:12cqw}
.v2-bts .v2-tw:nth-child(2){margin-top:0}
@media(max-width:599px){.v2-bts .v2-tiles{width:100%;overflow:visible}.v2-bts .v2-tiles .v2-tw{flex:1 1 0}}

/* 2.26.52 – contact: één geheel (foto, tekst en twee albums in dezelfde kolom) */
.v2-me em{font-style:normal;color:var(--blue)}
.v2-me .v2-bts{grid-column:auto;margin-top:clamp(20px,3vw,32px)}

/* 2.26.53 – contact: albums echt rechts, bij middelbare breedte naast de tekst */
.v2-bts .v2-tiles.row{width:min(100%,24rem);margin:0 0 0 auto}
@media(min-width:600px) and (max-width:899px){.v2-me{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(24px,4vw,44px);align-items:start}.v2-me>p{grid-column:1}.v2-me .v2-bts{grid-column:2;grid-row:1/span 2;margin-top:0}.v2-bts .v2-tiles.row{width:100%}}

/* 2.26.56 – Architectuur: hogere bandfoto (3:2) zodat het huis minder wegvalt */
@media(min-width:600px){.v2-architectuur .v2-band .ph{aspect-ratio:3/2}}

/* 2.26.57 – Architectuur: volle breedte, hoogtelimiet omhoog zodat op fullscreen meer van de foto zichtbaar is */
@media(min-width:600px){.v2-architectuur .v2-band .ph{max-height:92vh}}

/* 2.26.58 – Architectuur: op brede schermen band niet breder dan 3:2 bij 92vh, zodat de foto niet meer wordt afgesneden */
@media(min-width:600px){.v2-architectuur .v2-band .ph{max-height:none;width:min(100vw,calc(92vh*1.5));margin-left:calc(50% - min(50vw,calc(46vh*1.5)))}}

/* 2.26.59 – Architectuur: weer schermbreed, beeldvlak 3:2 zonder hoogtelimiet (hoger dan scherm mag) */
@media(min-width:600px){.v2-architectuur .v2-band .ph{max-height:none;width:100vw;margin-left:calc(50% - 50vw)}}

/* 2.26.61 – Architectuur: kaartje gespiegeld naar links */
@media(min-width:900px){.v2-architectuur .v2-band .v2-card{left:0;right:auto}}
@media(min-width:600px) and (max-width:899px){.v2-architectuur .v2-band .v2-card{margin-left:0;margin-right:auto}}
@media(max-width:599px){.v2-architectuur .v2-band .v2-card{margin-left:calc(var(--g,18px)*-1);margin-right:14%;padding-left:calc(var(--g,18px) + 8px);padding-right:20px}}
/* 2.26.62 – stappen met korte titel, uitleg onder de diensttitel */
.v2-steps p strong{display:block;font-weight:500;color:var(--blue);margin-bottom:4px}
/* 2.26.68 – test: 3D-logo achter titel en intro op 3D maatwerk (?logo3d=1) */
.v2-l3dw{position:relative}
.v2-l3dw>*:not(.l3bg){position:relative;z-index:1}
.v2-l3dw .l3bg{position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;pointer-events:none}
.v2-l3dw .stg{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.v2-l3dw canvas{display:block;width:100%;height:100%;opacity:0}
.v2-l3dw .l3sp{height:220vh;pointer-events:none}
.v2-l3dw.fail .l3sp{height:0}
.v2-l3dw .l3c{position:absolute;right:12px;bottom:clamp(72px,10vh,96px);width:min(30rem,calc(100% - 24px));background:var(--paper);padding:clamp(18px,2.4vw,32px);box-shadow:0 40px 80px -48px rgba(70,60,40,.35);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s var(--ease)}
.v2-l3dw .l3c.on{opacity:1;transform:none}
.v2-l3dw .l3c p{margin:0;color:var(--sandk)}
.v2-l3dw .l3c b{display:block;font-weight:500;color:var(--blue);margin-bottom:6px}
@media (min-width:600px){.v2-l3dw .l3bg{left:calc(50% - 50vw);right:calc(50% - 50vw)}.v2-l3dw .l3c{right:max(24px,calc(50vw - 490px))}}
/* 2.26.77 – gsm: 3D-logo op de plaats van de schermbrede foto (3D maatwerk) */
.v2-band .l3m{display:none}
@media (max-width:699px){.v2-maatwerk .v2-band .ph{position:relative;background:transparent!important}.v2-maatwerk .v2-band .ph>img{opacity:0}.v2-maatwerk .v2-band .l3m{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}}
/* 2.26.78 – gsm: 3D-logo vast achter de inhoud van 3D maatwerk; het vlak van de schermbrede foto blijft leeg */
@media (max-width:699px){.v2-maatwerk{position:relative;z-index:1}.v2-maatwerk .v2-band .l3m{display:none!important}}
/* 2.26.80 – gsm: het lege vlak van de schermbrede foto wordt een ruimere scrollzone voor het 3D-logo */
@media (max-width:699px){.v2-maatwerk .v2-band .ph{height:45vh!important;max-height:none!important;aspect-ratio:auto!important}}
/* 2.26.84 – gsm: geen blauwe printkop in het lege vlak waar het 3D-logo voorbijkomt (3D maatwerk) */
@media (max-width:699px){.v2-maatwerk .v2-band .v2-hd{display:none!important}}

/* 2.26.86 – gsm: 3D maatwerk met de b en het blokje; het blokje wordt het blauwe kaartje */
@media (max-width:699px){.v2-maatwerk .v2-band .ph{height:75vh!important}
html.mo .v2-maatwerk .v2-band .v2-card.gr.l3k,.v2-maatwerk .v2-band .v2-card.gr.l3k{opacity:1!important;transform:none!important;transition:none!important}
.v2-maatwerk .v2-band .v2-card.gr.l3k>*{opacity:var(--txt,1)}
.v2-maatwerk .v2-band .v2-card.gr.l3w{background:none!important;background-image:none!important;box-shadow:none!important}}
/* 2.28.0 – gsm: keuzeblokje op 3D maatwerk in de plaats van de drie albumtegels (tegels blijven als terugval) */
.l3st{display:none}
@media (max-width:699px){html.l3ch .v2-maatwerk .v2-proj .v2-tiles{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.l3ch .v2-maatwerk .l3st{display:block;position:relative;width:100%;max-width:430px;aspect-ratio:1/1.08;margin:0 auto}
.v2-maatwerk .l3st canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;cursor:pointer}
.v2-maatwerk .l3st.on canvas{opacity:1}}
/* 2.28.3 – album opent vanuit het vlak van het keuzeblokje */
.l3fx{position:fixed;z-index:10000;background:#0086B2;color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;font-weight:500;font-size:1.3rem}
html.l3open .v2-maatwerk .v2-proj .v2-tiles{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;clip:auto!important;opacity:0!important;pointer-events:none}
html.l3open .v2-maatwerk .v2-proj .v2-tile .im img{width:100vw;height:100vh;object-fit:cover}
/* 2.28.4 – keuzeblokje ook op computer */
@media (min-width:700px){html.l3ch .v2-maatwerk .v2-proj .v2-tiles{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.l3ch .v2-maatwerk .l3st{display:block;position:relative;width:min(520px,60vh);aspect-ratio:1/1.08;margin:0 auto}
.v2-maatwerk .l3st canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;cursor:pointer}
.v2-maatwerk .l3st.on canvas{opacity:1}}
/* 2.28.13 – geen witte flits bij het landen: de wissel van vliegend naar landend blokje gebeurt in hetzelfde beeld */
.v2-maatwerk .l3st canvas{transition:none!important}
/* 2.28.16 – computer: schermbrede foto op 3D maatwerk volledig in beeld (geen bijsnijden, geen parallax) */
@media (min-width:700px){.v2-maatwerk .v2-band .ph{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:2600/1256!important;max-height:none!important;height:auto!important}
.v2-maatwerk .v2-band .ph img{height:100%!important;transform:none!important;object-fit:cover}}
/* 2.28.17 – 3D maatwerk: blauw kaartje links op de foto en schuift van links binnen (rechts zit al het logo en de vlucht) */
@media(min-width:900px){.v2-maatwerk .v2-band .v2-card{left:0;right:auto}}
@media(min-width:600px) and (max-width:899px){.v2-maatwerk .v2-band .v2-card{margin-left:0;margin-right:auto}}
html.mo .v2-maatwerk .v2-band:not(.in) .v2-card.gr{transform:translate3d(-70vw,0,0)}
/* 2.29.0: 3D-omslag met maquette — het echte model in de albumtegel, wit op een zacht grijze ondergrond */
.v2-tile .im:has(canvas.mq){background:radial-gradient(120% 90% at 50% 40%,rgb(236,235,229),rgb(214,213,203))}
.v2-tile canvas.mq{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .8s ease}
.v2-tile .im.mq-on canvas.mq{opacity:1}
.v2-tile .im.mq-on img{opacity:0}

/* 2.30.0: maquette zonder kader — enkel het 3D-model, groter dan de andere albums */
.v2-tw.mq3 .v2-tile,html.mo .v2-tw.mq3 .v2-tile{background:transparent;overflow:visible}
.v2-tw.mq3 .v2-tile .im,.v2-tw.mq3 .v2-tile .im:has(canvas.mq){background:none;overflow:visible} /* 2.32.5: geen onzichtbaar kader meer */
.v2-tw.mq3 .v2-tile canvas.mq{inset:-25%;width:150%;height:150%} /* 2.30.1: model blijft in zijn eigen vak: nooit afgesneden, nooit tegen een buur */
.v2-tw.mq3 .v2-tile:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
@media(min-width:600px){
	/* 2.32.2: alle maquettes even groot, op één lijn (het verspringen hoorde bij de platte foto's) */
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(n){flex-grow:1;margin-top:0}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(n):hover{flex-grow:1.45} /* 2.32.5: de gekozen maquette groeit, de andere krimpen */
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(n) .v2-tile .im{aspect-ratio:1/1}
	.v2-proj .v2-tiles.row:has(>.mq3)>.v2-tw:not(.mq3):nth-child(n){flex-grow:.7}
}
@media(max-width:599px){
	.v2-proj .v2-tiles>.v2-tw.mq3:nth-child(n){flex-basis:62%;margin-top:0}
	.v2-proj .v2-tiles:has(>.mq3)>.v2-tw:not(.mq3):nth-child(n){flex-basis:46%}
}

/* 2.31.0: album met maquette — schermvullend 3D-model, carrousel op dubbele grootte */
#v2lb .st.d3{padding:0}
#v2lb .st.d3>img{display:none}
#v2lb canvas.mq3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity .6s ease}
#v2lb canvas.mq3d:active{cursor:grabbing}
#v2lb canvas.mq3d.ok{opacity:1}
#v2lb .st.d3 .nv{z-index:2}
#v2lb .mq3h{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:.78rem;letter-spacing:.08em;color:#9c9a90;pointer-events:none;white-space:nowrap;transition:opacity .8s ease;z-index:2}
#v2lb .mq3h.weg{opacity:0}
#v2lb.m3 .th button{width:128px;height:96px}
#v2lb.m3 .th .b3{display:grid;place-items:center;background:rgb(214,213,203);color:var(--blue);font-family:var(--serif);font-size:1.4rem;letter-spacing:.06em}
@media(max-width:600px){#v2lb.m3 .th{justify-content:flex-start}#v2lb.m3 .th button{width:104px;height:78px}#v2lb .mq3h{font-size:.7rem}}
#v2lb.nt .tt{display:none}#v2lb.nt .ct{margin-left:0}
html.l3ch .v2-maatwerk .l3st canvas{touch-action:none} /* 2.32.7: het blokje draait in alle richtingen mee met de vinger */
/* 2.32.5: maquettes altijd helder en scherp: niet vervagen in de gsm-carrousel, geen schaduwfilter op de tegel (het model heeft zijn eigen schaduw) */
.v2-tw.mq3 .v2-tile,.v2-tw.mq3 .v2-tile:hover{filter:none!important}
@media(max-width:599px){.v2-tiles.row>.v2-tw.mq3:nth-child(n){opacity:1;will-change:auto}}
/* 2.32.7: lichte zwevende schaduw onder de 3D-modellen, overal */
.v2-tw.mq3 .v2-tile canvas.mq{filter:drop-shadow(0 22px 18px rgba(70,60,45,.16))}
#v2lb canvas.mq3d{filter:drop-shadow(0 34px 26px rgba(70,60,45,.14))}
/* 2.32.8 gsm: de carrousel met maquettes krijgt ruimte boven en onder, zodat de zwevende schaduw niet als een kader wordt afgesneden */
@media(max-width:599px){.v2-proj .v2-tiles.row:has(>.mq3){padding-top:64px;padding-bottom:72px;margin-top:-58px;margin-bottom:-60px}}
/* 2.33.0: wisselknopje wit / kleur in het album */
#v2lb .mq3c{all:unset;position:absolute;right:20px;bottom:12px;z-index:3;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 2px 8px rgba(60,50,35,.12);cursor:pointer;font-size:.78rem;letter-spacing:.08em}
#v2lb .mq3c span{padding:6px 12px;border-radius:999px;color:#9c9a90;transition:background .4s ease,color .4s ease}
#v2lb .mq3c:not(.on) span:first-of-type,#v2lb .mq3c.on span:last-of-type{background:var(--blue);color:#fff}
#v2lb .mq3c:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* 2.33.6: kleurbeeld ligt exact boven het witte; slepen gaat naar het witte eronder */
#v2lb canvas.mq3d.mq3k{pointer-events:none;transition:none}
/* 2.35.1: knopje toont 'kleur laden…' tot het kleurmodel binnen is */
#v2lb .mq3c em{display:none;font-style:normal;padding:6px 12px;color:#9c9a90;animation:mq3p 1.4s ease-in-out infinite}
#v2lb .mq3c.laadt span{display:none}
#v2lb .mq3c.laadt em{display:block}
#v2lb .mq3c.laadt{cursor:default}
@keyframes mq3p{50%{opacity:.45}}
/* 2.36.1 gsm: uitleg in het album hoger, los van het wit/kleur-knopje; maquettes in de carrousel groter */
@media(max-width:600px){#v2lb .mq3h{bottom:64px;white-space:normal;text-align:center;width:86%}}
@media(max-width:599px){.v2-proj .v2-tiles>.v2-tw.mq3:nth-child(n){flex-basis:74%}}

/* 2.37.0 – Architectuur (pc): 3D-albums groter en weer speels verspringend; eerste iets groter dan voorheen, de 2 andere nog wat groter */
@media(min-width:900px){
	.v2-proj .v2-tiles.row:has(>.mq3){width:min(90%,62rem)}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(1){flex-grow:1;margin-top:5cqw}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(2){flex-grow:1.25;margin-top:0}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(3){flex-grow:1.25;margin-top:12cqw}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(n):hover{flex-grow:1.6}
}

/* 2.37.1 – hover over de 3D-albums vloeiend: het vak blijft even groot (geen herberekening van de 3D-tekenvlakken per beeldje), het gekozen album zoomt in, de buren wijken een tikje */
@media(min-width:600px) and (hover:hover){
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(1):hover{flex-grow:1}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(2):hover,.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(3):hover{flex-grow:1.25}
	.v2-proj .v2-tiles.row>.v2-tw.mq3 .v2-tile{transition:transform .8s var(--ease);will-change:transform}
	.v2-proj .v2-tiles.row>.v2-tw.mq3:hover .v2-tile{transform:scale(1.14)}
	.v2-proj .v2-tiles.row:has(>.mq3:hover)>.v2-tw.mq3:not(:hover) .v2-tile{transform:scale(.94)}
}
@media(min-width:600px) and (max-width:899px) and (hover:hover){
	.v2-proj .v2-tiles.row>.v2-tw.mq3:nth-child(n):hover{flex-grow:1}
}

/* 2.38.0 – album openen = de zijde van het blokje binnengaan */
.l3fx.l3in{font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:0;text-align:center;will-change:transform,opacity;backface-visibility:hidden}
.l3fx.l3in span{display:block;color:#fff}

/* 2.39.0/2.39.1 – in de zijde van het blauwe blokje: het woord blijft in het midden, eigen albums liggen er speels rond */
#l3zone{position:fixed;inset:0;z-index:100001;overflow:hidden;color:#fff}
#l3zone .l3za{position:absolute;transform:translate(-50%,-50%) rotate(var(--r,0deg));transition:transform 1.15s cubic-bezier(.2,.75,.25,1),opacity .6s ease;transition-delay:calc(.05s + var(--i,0)*.1s)}
#l3zone:not(.in) .l3za,#l3zone.uit .l3za{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(0deg) scale(.35)}
#l3zone.uit .l3za{transition:transform .55s cubic-bezier(.5,0,.75,.4),opacity .45s ease .08s;transition-delay:calc(var(--i,0)*.04s)}
#l3zone .l3zf{animation:l3fl var(--fl,6s) ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-1.7s)}
@keyframes l3fl{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(2px,-7px,0) rotate(.6deg)}100%{transform:translate3d(-2px,-3px,0) rotate(-.5deg)}}
#l3zone .v2-tile{display:block;width:100%;padding:0;border:0;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;cursor:pointer;box-shadow:0 18px 30px -16px rgba(0,30,50,.55),0 2px 6px rgba(0,30,50,.18);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
@media(hover:hover){#l3zone .v2-tile:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 26px 36px -18px rgba(0,30,50,.6),0 3px 8px rgba(0,30,50,.2)}}
#l3zone .v2-tile .im{display:block;aspect-ratio:4/5}
#l3zone .v2-tile img{width:100%;height:100%;object-fit:cover;display:block}
#l3zone .v2-tile:focus-visible,#l3zone .l3x:focus-visible{outline:2px solid #fff;outline-offset:4px}
#l3zone .l3zn{display:block;padding-top:9px;font-size:.88rem;letter-spacing:.04em;color:rgba(255,255,255,.92);text-align:center}
#l3zone .l3x{all:unset;position:fixed;top:14px;right:16px;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;color:#fff;cursor:pointer;border-radius:50%;opacity:0;transition:opacity .6s ease .5s}
#l3zone.in .l3x{opacity:1}#l3zone.uit .l3x{opacity:0;transition:opacity .25s ease}
.l3fx.l3in span{text-shadow:0 1px 0 rgba(0,40,60,.18),0 -1px 0 rgba(255,255,255,.12)}
html.l3zon #v2lb{z-index:100010}
@media(prefers-reduced-motion:reduce){#l3zone .l3za,#l3zone .l3x{transition:none!important}#l3zone .l3zf{animation:none}}

/* 2.40.0 – de zijde binnengaan in echte 3D (l3zone.js) */
.l3zc{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:100000;visibility:hidden;pointer-events:none;touch-action:none;display:block}
html.l3zon .l3zc{pointer-events:auto}
.l3zx{all:unset;position:fixed;top:14px;right:16px;z-index:100002;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;color:#fff;cursor:pointer;border-radius:50%;opacity:0;transform:scale(.8);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1);text-shadow:0 1px 6px rgba(0,30,50,.3)}
.l3zx.in{opacity:1;transform:none}.l3zx:focus-visible{outline:2px solid #fff;outline-offset:3px}
.l3zh{position:fixed!important;z-index:100001;opacity:0;pointer-events:none;padding:0;border:0;background:none}
/* 2.46.0: het kruisje is nu een jelly-blokje in 3D; deze knop blijft enkel voor toetsenbord/schermlezer */
.l3zx{pointer-events:none}.l3zx:focus-visible{opacity:1;transform:none}

/* 2.50.0: het blokje van de banner vliegt plat maar in echt perspectief naar de titel (fly.js) */
.bp-flyw{position:fixed;inset:0;z-index:9990;pointer-events:none;perspective:1100px;perspective-origin:50% 50%;overflow:hidden}
.bp-flyw .bp-cl{position:absolute;left:0;top:0;transform-origin:50% 50%;backface-visibility:visible}
.bp-flysh{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(60,52,40,.42),rgba(60,52,40,.16) 60%,rgba(60,52,40,0));opacity:0;will-change:transform,opacity}


/* 2.52.0: "terug naar boven" als echt 3D-blokje (three.js, zelfde blokje als in het 3D-logo); zonder 3D blijft het gewone knopje */
#bpTop canvas{position:absolute;left:-22px;top:-22px;width:82px;height:82px;pointer-events:none;display:none}
#bpTop.g3{background:transparent!important;background-image:none!important;overflow:visible}
#bpTop.g3:hover{background:transparent!important}
#bpTop.g3 canvas{display:block}
#bpTop.g3 svg{visibility:hidden}

/* 2.58.2: album uit het blauwe blokje: de foto vliegt zichtbaar van de hoes open, achtergrond en knoppen komen zacht op */
#v2lb.fz{opacity:1;background:transparent!important;background-image:none!important}
#v2lb.fz::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--bg);background-image:url("grain-light.png?v=2.14.2");background-size:256px 256px;background-blend-mode:multiply;opacity:0;transition:opacity .38s ease-out}
#v2lb.fz.bg::before{opacity:1;transition:opacity .7s cubic-bezier(.4,0,.2,1)}   /* 2.58.6: het wit met korrel fadet als één laag; het blauwe blokje blijft eronder zichtbaar */
#v2lb.fz .top,#v2lb.fz .th,#v2lb.fz .nv{opacity:0;transition:opacity .45s ease .3s}#v2lb.fz.bg .top,#v2lb.fz.bg .th,#v2lb.fz.bg .nv{opacity:1}#v2lb.fz:not(.bg) .top,#v2lb.fz:not(.bg) .th,#v2lb.fz:not(.bg) .nv{transition-delay:0s;transition-duration:.25s}

/* 2.60.0 [#plan-naar-3d] architectuur pc: plan wordt maquette op de plek van de foto (plan3d.js); de klasse pl3 valt weg op gsm of als 3D niet lukt */
.v2-band.pl3 .ph{background:transparent}.v2-band.pl3 .ph img{visibility:hidden}.v2-band.pl3 .ph canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.v2-band.pl3 canvas{opacity:0}html.mo .v2-band.pl3:not(.in) .ph{clip-path:none} /* 2.83.0: ook gsm */
.v2-band:not(.pl3) .ph canvas.pl3c,.v2-band:not(.pl3) .ph canvas.pl3d,.v2-band:not(.pl3) .ph canvas.pl3t{display:none}
/* 2.62.0 [#plan-naar-3d] band blijft staan bij scrollen (spacer .pl3s via plan3d.js), kaartje rechts */
.v2-band.pl3.pl3-pin>.ph,.v2-band.pl3.pl3-pin>.pl3w{position:sticky;top:calc(var(--t0) + var(--stack));z-index:1}.v2-band.pl3 .pl3w{position:sticky}.v2-band.pl3 .pl3s{display:block}.v2-band.pl3 .v2-card{z-index:3} /* 2.83.0: ook gsm */
@media(min-width:900px){.v2-band.pl3 .v2-card{left:0;right:auto}} /* 2.89.0: kaartje links */
@media(min-width:900px){.v2-band.pl3:not(.pl3-pin) .v2-card{visibility:hidden}} /* 2.63.0: kaartje pas tonen als plan3d.js het van onder laat inschuiven */
@media(min-width:900px){.v2-band.pl3 .pl3w .v2-card{bottom:12%}} /* 2.64.0: kaartje hoger, deels over het model (beginstand fase 2) */
html.mo .v2-band.pl3 .pl3w .v2-card[data-rv]{opacity:1;transform:none;transition:none;will-change:translate} /* 2.65.0: plan3d.js schuift het kaartje zelf in */
@media(min-width:900px){.v2-band.pl3{margin-bottom:clamp(16px,2vw,32px)}} /* 2.66.0: eerste subtitel sluit dicht aan op het kaartje */
/* 2.67.0 [#plan-naar-3d] pc breed: kortere band (geen leeg vlak onder de maquette), kaartje sticky (plan3d.js zet top/marges), smaller */
@media(min-width:900px){.v2-band.pl3 .ph{aspect-ratio:auto;height:clamp(420px,64vh,740px);max-height:none}
.v2-band.pl3 .v2-card.pl3k{position:sticky;left:auto;right:auto;bottom:auto;width:min(40rem,46%);margin-left:0;margin-right:auto;z-index:3} /* 2.89.0: links en breder (langere tekst) */
html.mo .v2-band.pl3 .v2-card.pl3k[data-rv]{opacity:1;transform:none;transition:none}}
/* 2.68.0: hoofdtitel op groot scherm iets kleiner en hoger (alle pagina's) */
@media(min-width:900px){.v2-title:not(.r){padding-top:clamp(12px,2.2vw,34px)}.v2-architectuur .v2-title:not(.r),.v2-maatwerk .v2-title:not(.r){padding-top:12px}.v2-title:not(.r) h1{font-size:clamp(1.45rem,2.6vw,1.85rem)}.v2-collectie .v2-title:not(.r) h1{font-size:clamp(1.45rem,2.1vw,1.7rem)}}
@media(max-width:599px){html.mo .v2-band.pl3 .v2-card[data-rv]{opacity:1;transform:none;transition:none}.v2-band.pl3 .v2-card{will-change:transform}} /* 2.85.0 [#plan-naar-3d] gsm: kaartje eigen laag, geen eigen omhoog-animatie boven de 3D */
@media(max-width:599px){.v2-architectuur .v2-proj .v2-tiles.row{gap:18px}} /* 2.87.0 gsm: maquettes iets verder uit elkaar */

/* 3.05.0 [#diensten-modellen] architectuur: alle 3 gelijk: titel links (groter) met model eronder, rechts een compacter tekstblok dat 2 regels lager begint; geen spiegeling */
.v2-dm2 .md{min-width:0;width:min(100%,19rem);margin-top:clamp(36px,4vw,60px);margin-bottom:clamp(8px,1.5vw,20px)}
.v2-dm2 .v2-tiles.row{display:grid;grid-template-columns:1fr;width:72%;margin:0 auto;padding:0;gap:0;overflow:visible}
.v2-dm2 .v2-tiles.row.ar>.v2-tw,.v2-dm2 .v2-tiles.row.ar>.v2-tw:hover{grid-area:1/1;min-width:0;margin-top:0;--s:1!important;--o:1!important}
.v2-dm2 .md.cr .v2-tw{opacity:0;visibility:hidden;translate:24px 0;transition:opacity .7s ease,translate .9s var(--ease),visibility 0s linear .9s}
.v2-dm2 .md.cr .v2-tw.on{opacity:1;visibility:visible;translate:none;transition:opacity .7s ease .1s,translate .9s var(--ease),visibility 0s}
.v2-dm2 .dots{display:flex;justify-content:center;gap:9px;margin-top:16px}
.v2-dm2 .dt{width:10px;height:10px;padding:0;border:0;border-radius:0;background:#D6D5CB;cursor:pointer;transition:background-color .35s ease,transform .35s var(--ease)}
.v2-dm2 .dt.on{background:var(--blue)}
.v2-dm2 .dt:hover{transform:scale(1.25)}
.v2-dm2 .s,.v2-sec>.v2-sh{position:relative;z-index:2} /* hele rij (ook de blauwe lijn) boven de vliegende maquette (laag 1) */
.v2-svc.v2-dm2 .s h3{font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2}
@media(min-width:900px){
	.v2-dm2 .s h3{grid-column:1;grid-row:1}
	.v2-dm2 .s>p{grid-column:2;grid-row:1/3;max-width:30em;margin:3.4em 0 0 clamp(0px,3vw,48px)}
	.v2-dm2 .md{grid-column:1;grid-row:2;align-self:start}
	.v2-sh:has(+ .v2-dm2)+.v2-dm2 .s:first-child{padding-top:clamp(40px,4.5vw,64px)}
}
@media(max-width:599px){.v2-band.pl3{margin-bottom:8px}}

/* 3.06.0 [#plan-kaartjes] architectuur: 3 kaartjes. pc: in de vaste band links, plan3d.js schuift ze 1 op 1 met de scroll; gsm: onder elkaar, schuiven zijwaarts in (r, l, r) */
.v2-band.pl3 .v2-card.pl3m{background:none!important;background-image:none!important;box-shadow:none;padding:0;display:grid}
.v2-band.pl3 .v2-card.pl3m .pg{grid-area:1/1;background:#D0B084;color:#fff;padding:18px 20px;background-image:url("grain-light.png?v=2.14.2");background-size:256px 256px;background-blend-mode:multiply;box-shadow:0 30px 60px -44px rgba(70,60,40,.45)}
.v2-band.pl3 .v2-card.pl3m .pg p{margin:0}
@media(min-width:600px){.v2-band.pl3 .v2-card.pl3m .pg{padding:clamp(20px,2.4vw,32px)}}
@media(min-width:900px){
	.v2-band.pl3 .pl3w .v2-card.pl3m{position:absolute;top:50%;bottom:auto;left:0;right:auto;margin:0;width:min(36rem,42%);translate:0 -50%;z-index:3;visibility:visible}
	.v2-band.pl3 .v2-card.pl3m .pg{opacity:0;visibility:hidden}
}
@media(max-width:899px){
	.v2-band.pl3 .v2-card.pl3m{display:flex;flex-direction:column;gap:28vh}.v2-band.pl3 .v2-card.pl3m .pg{grid-area:auto}
	html.mo .v2-band.pl3 .v2-card.pl3m .pg[data-rv]{opacity:0;transition:opacity .8s ease,transform 1.1s var(--ease)}
	html.mo .v2-band.pl3 .v2-card.pl3m .pg[data-rv=sr]{transform:translate3d(56px,0,0)}
	html.mo .v2-band.pl3 .v2-card.pl3m .pg[data-rv=sl]{transform:translate3d(-56px,0,0)}
	html.mo .v2-band.pl3 .v2-card.pl3m .pg[data-rv].in{opacity:1;transform:none}
}

/* 3.06.0 [#diensten-modellen] tekst onder de titel (geen baseline-uitlijning meer), compacter, meer lucht onderaan; minder ruimte onder de kop */
.v2-svc.v2-dm2 .s{align-items:start;padding-bottom:clamp(36px,4vw,60px)}
.v2-svc.v2-dm2 .s>p{line-height:1.6}
@media(min-width:900px){
	.v2-dm2 .s>p{grid-row:2/4;margin:.9em 0 0 clamp(0px,3vw,48px)}
	.v2-dm2 .md{grid-row:2/4}
	.v2-sh:has(+ .v2-dm2)+.v2-dm2 .s:first-child{padding-top:clamp(16px,2vw,30px)}
}

/* 3.01.0 [#contact-ontwerp] contact: tekstkaart links, foto rechts met "Wie ben ik?" eronder; gegevens (gewone letter) naast de filmpjes */
.v2-cxc .ph0{background:#D6D5CB!important;display:flex;align-items:center;justify-content:center;color:#fff;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}
.v2-cxc .ph0 span{display:block}
.v2-cl .kc .mid{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.35;margin:10px 0 0}
@media(min-width:761px){
	.v2-cl.v2-cxc{align-items:start}
	.v2-cl.v2-cxc .ph{grid-column:8/13;grid-row:1;aspect-ratio:4/5;margin:0;width:100%;justify-self:stretch}
	.v2-cl.v2-cxc .hd{grid-column:8/13;grid-row:2;text-align:left;justify-self:start;align-self:start;margin:clamp(18px,2.4vw,34px) 0 0;padding:0}
	.v2-cl.v2-cxc .c.gr.kc{grid-column:1/7;grid-row:1/3;margin:clamp(24px,4vw,64px) 0 0}
}
@media(max-width:760px){.v2-cl.v2-cxc .ph{order:1;aspect-ratio:4/5}.v2-cl.v2-cxc .hd{order:2;margin-top:6px}.v2-cl.v2-cxc .c.gr.kc{order:3}}
.v2-cxf{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,56px)}
.v2-cxf .gg p{margin:0 0 12px;font-size:.95rem;line-height:1.6}
.v2-cxf .gg .social{margin-top:4px}
.v2-cxf .fm .v2-after{max-width:26em}
.v2-cxf .v2-tiles,.v2-cxf .v2-tiles.row{width:min(100%,30rem);margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible}
.v2-cxf .v2-tiles.row.ar>.v2-tw,.v2-cxf .v2-tiles.row.ar>.v2-tw:hover{flex:none;min-width:0;margin-top:0;--s:1!important;--o:1!important}
@media(min-width:761px){.v2-cxf{grid-template-columns:minmax(0,1fr) auto;align-items:end}.v2-cxf .fm{justify-self:end}.v2-cxf .fm .v2-after{text-align:right;margin-left:auto}}
/* 3.03.0 [#contact-ontwerp] tekst breed tot aan de foto, lijn rechts met slangetje (blokje krult naar boven, tekent zich als het in beeld komt), "Wie ben ik?" tegen de lijn;
   onderaan gegevens + filmpjes dicht bij elkaar als 1 geheel, zonder kader */
@media(min-width:761px){
	.v2-cl.v2-cxc .ph{grid-column:10/13;width:100%;justify-self:stretch}
	.v2-cl.v2-cxc .c.gr.kc{grid-column:1/10;grid-row:1/3}
	.v2-cl.v2-cxc .hd{grid-column:10/13;grid-row:2;align-self:end;justify-self:start;margin:0 0 0 calc(clamp(12px,1.6vw,22px)*-1 + 14px);font-size:clamp(2rem,4.4vw,4rem)}
}
@media(max-width:760px){.v2-cl.v2-cxc .ph{width:66.7%;align-self:flex-end}.v2-cl.v2-cxc .hd{align-self:flex-end;text-align:left;width:66.7%}}
.v2-cl.v2-cxc .c.gr.kc{position:relative;border-left:0;border-right:1px solid var(--blue);padding-left:0;padding-right:clamp(18px,2.4vw,34px)}
.v2-cxc .kc .al:last-child .big{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.3}
.v2-cxf{display:block}
.v2-cxf .cb{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(28px,4vw,56px)}
.v2-cxf .gg p{margin:0 0 10px}
.v2-cxf .fm .v2-after{text-align:left;margin:0 0 12px;max-width:24em}
.v2-cxf .v2-tiles,.v2-cxf .v2-tiles.row{width:min(100%,24rem)}
/* 3.04.0 [#contact-ontwerp] echt slangetje (variant wc): lijn rechts van de tekst, onderaan krul naar links en omhoog; "Wie ben ik?" ernaast */
.v2-cl.v2-cxc .c.gr.kc.wc{border-right:0}
.v2-wh.wc .lnw{right:0;top:0;bottom:0;width:1px}
.v2-wh.wc .ln{width:1px;height:100%}
.v2-wh.wc .snk{right:0;bottom:0}
@media(max-width:760px){.v2-cl.v2-cxc .c.gr.kc{order:2}.v2-cl.v2-cxc .hd{order:3;align-self:flex-end;text-align:right;width:auto;margin:10px 0 0}}
/* 3.05.0 [#contact-ontwerp] foto lager (boven "Wie ben ik?"), "Wie ben ik?" schuift vanaf de lijn in; enkel filmpjes onderaan, rechts uitgelijnd */
@media(min-width:761px){
	.v2-cl.v2-cxc{grid-template-rows:1fr auto auto}
	.v2-cl.v2-cxc .c.gr.kc{grid-row:1/4}
	.v2-cl.v2-cxc .ph{grid-row:2;align-self:end}
	.v2-cl.v2-cxc .hd{grid-row:3}
	html.mo .v2-cl.v2-cxc .hd[data-rv=up]{opacity:1;transform:translate3d(-70px,0,0);clip-path:inset(0 0 0 70px);transition:transform 1.1s var(--ease) var(--d,0s),clip-path 1.1s var(--ease) var(--d,0s)}
	html.mo .v2-cl.v2-cxc .hd[data-rv=up].in{transform:none;clip-path:inset(0 0 0 0)}
}
.v2-cxf .cb{justify-content:flex-end}
.v2-cxf .fm{text-align:right}
.v2-cxf .fm .v2-after{margin-left:auto;text-align:right}
.v2-cxf .fm .v2-tiles,.v2-cxf .fm .v2-tiles.row{margin-left:auto}
/* 3.06.0 [#contact-ontwerp] tekst smaller en iets naar rechts, beige lopende tekst met blauwe accenten; foto gelijk met de b (v2.js); "Wie ben ik?" volledig vanachter de lijn; filmpjes even groot */
.v2-cl.v2-cxc .c.gr.kc .sm{color:var(--sand)}
.v2-cl.v2-cxc .c.gr.kc .big,.v2-cl.v2-cxc .c.gr.kc .mid{color:var(--blue)}
@media(min-width:761px){
	.v2-cl.v2-cxc .c.gr.kc{grid-column:2/9;margin-top:0;max-width:40rem;justify-self:end}
	.v2-cl.v2-cxc .ph{grid-column:9/13;width:auto;justify-self:stretch}
	.v2-cl.v2-cxc .hd{grid-column:9/13}
	html.mo .v2-cl.v2-cxc .hd[data-rv=up]{transform:translate3d(-100%,0,0);clip-path:inset(0 0 0 100%)}
	html.mo .v2-cl.v2-cxc .hd[data-rv=up].in{transform:none;clip-path:inset(0 0 0 0)}
}
.v2-cxf .v2-tw,.v2-cxf .v2-tiles.row.ar>.v2-tw{--ar:1!important}
.v2-cxf .v2-tile .im{aspect-ratio:1/1!important}
/* 3.07.0 [#diensten-modellen] hint onder het model (3.12.0: pijltjes-css weg: '.ar' raakte ook de tegelrij .v2-tiles.ar) */
.v2-dm2 .dots{align-items:center;gap:10px}
.v2-dm2 .mh{margin:10px 0 0;text-align:center;font-size:.78rem;letter-spacing:.04em;color:#A9A79B}
.v2-dm2 .mh .tc{display:none}
@media(hover:none){.v2-dm2 .mh .pc{display:none}.v2-dm2 .mh .tc{display:inline}}

/* 3.08.0 [#plan-kaartjes] kaartje 2 smaller (geen leeg beige vlak) */
@media(min-width:900px){.v2-band.pl3 .v2-card.pl3m .pg{justify-self:start}.v2-band.pl3 .v2-card.pl3m .pg:nth-child(2){max-width:25rem}}
/* 3.08.0 [#diensten-modellen] bediening en hint duidelijk onder het 3D-model (het canvas is ruimer dan het vak), boven alles */
.v2-dm2 .md .dots,.v2-dm2 .md .mh{position:relative;z-index:3}
.v2-dm2 .md .dots{margin-top:clamp(44px,4.5vw,64px)}
.v2-dm2 .md .mh{margin-top:clamp(44px,4.5vw,64px)}
.v2-dm2 .md .dots+.mh{margin-top:10px}

/* 3.08.0 [#contact-ontwerp] "Wie ben ik?" groter en pas na het slangetje (klasse go via v2.js); filmpjes klein, zin erboven, namen eronder */
.v2-cl.v2-cxc .hd{font-size:clamp(2.4rem,5vw,4.6rem)}
@media(min-width:761px){
	html.mo .v2-cl.v2-cxc .hd[data-rv=up],html.mo .v2-cl.v2-cxc .hd[data-rv=up].in{opacity:1;transform:translate3d(-100%,0,0);clip-path:inset(0 0 0 100%);transition:transform 1.2s var(--ease),clip-path 1.2s var(--ease)}
	html.mo .v2-cl.v2-cxc .hd[data-rv=up].go{transform:none;clip-path:inset(0 0 0 0)}
}
.v2-cxf .cb{display:grid;grid-template-columns:1fr}
.v2-cxf .fm{text-align:left;width:min(100%,40rem)}
.v2-cxf .fm .v2-after{margin:0 0 14px;text-align:left}
.v2-cxf .fm .v2-tiles,.v2-cxf .fm .v2-tiles.row{margin:0;width:min(100%,22rem);display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible}
.v2-cxf .v2-tw .cap{color:#A9A79B}
.v2-cxf .v2-tw .cap .nm,.v2-cxf .v2-tw .cap em{color:#A9A79B}
@media(min-width:761px){
	.v2-cxf .cb{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,22px)}
	.v2-cxf .fm{grid-column:2/9;justify-self:end}
}
/* 3.09.0 [#diensten-modellen] forse carrousel (v2.js zet de transform): groot in het midden, buren klein en lichter, onderaan gelijk */
.v2-dm2 .md.cr{width:100%;--cb:min(13.5rem,52%)}
.v2-dm2 .md.cr .v2-tiles.row{position:relative;display:block;width:100%;margin:0;padding:0;height:auto;aspect-ratio:auto}
.v2-dm2 .md.cr .v2-tiles.row::before{content:"";display:block;width:var(--cb);aspect-ratio:1/1;margin:0 auto;visibility:hidden}
.v2-dm2 .md.cr .v2-tiles.row.ar>.v2-tw,.v2-dm2 .md.cr .v2-tiles.row.ar>.v2-tw:hover{position:absolute;left:50%;top:0;width:var(--cb);margin:0 0 0 calc(var(--cb)/-2);transform-origin:50% 100%;translate:none;visibility:visible;opacity:0;pointer-events:none;transition:transform .9s var(--ease),opacity .7s ease}
.v2-dm2 .md.cr .v2-tiles.row.ar>.v2-tw.on{opacity:1;pointer-events:auto}
.v2-dm2 .md.cr .v2-tiles.row.ar>.v2-tw.nb{opacity:.6;pointer-events:auto;cursor:pointer}
.v2-dm2 .md.cr .v2-tiles.row.ar>.v2-tw.nb:hover{opacity:.85}
.v2-dm2 .md.cr .v2-tw .v2-tile .im{aspect-ratio:1/1}
@media(max-width:899px){.v2-dm2 .md.cr{--cb:min(58vw,17rem)}}
/* 3.10.0 kaartjes zo hoog als hun tekst; hint ruim onder het model; modellen midden naast de tekst; slot dichter bij de diensten */
@media(min-width:900px){.v2-band.pl3 .v2-card.pl3m .pg{align-self:center}}
.v2-dm2 .md .mh{margin-top:1.1rem} /* 3.14.0: hint vlak onder het model (4.8rem was nodig door de .ar-fout) */
@media(min-width:900px){.v2-dm2 .md{align-self:center}}
.v2-architectuur .v2-sec:has(.v2-dm2){padding-bottom:clamp(8px,1.5vw,24px)}
.v2-architectuur .v2-sec:has(.v2-dm2)+.v2-title.v2-fin,.v2-architectuur .v2-sec:has(.v2-dm2)+.v2-fin{padding-top:clamp(8px,1.5vw,24px)}

/* 3.15.0 [#plan-naar-3d] pc: band met de 3 kaartjes boven de vliegende maquette (.pl3f = laag 1), zo komt de maquette nooit over kaartje 3 */
@media(min-width:900px){.v2-band.pl3.pl3-pin>.pl3w{z-index:2}}
/* 3.15.0 [#diensten-modellen] pc: actief model iets smaller zodat de buur (Keuken) ruim binnen de kolom past */
@media(min-width:900px){.v2-dm2 .md.cr{--cb:min(13.5rem,46%)}}
/* 3.17.0 [#plan-kaartjes] gsm: kaartjes zoals op pc, vast onder de maquette in de band (.pl3w), rollen van onder in (plan3d.js pgSet) */
@media(max-width:599px){
	.v2-band.pl3.pl3-pin>.pl3w{z-index:2}
	.v2-band.pl3 .pl3w .v2-card.pl3m.pl3g{display:grid;gap:0;margin:-1.5rem 12px 0;position:relative;z-index:3}
	.v2-band.pl3 .v2-card.pl3g .pg{grid-area:1/1;align-self:start}
	html.mo .v2-band.pl3 .v2-card.pl3g .pg[data-rv],.v2-band.pl3 .v2-card.pl3g .pg{opacity:0;visibility:hidden;transform:none;transition:none;will-change:transform}
}
/* 3.17.1 architectuur: het hele bandblok boven de vliegende maquette (.pl3f z 1); z 2 op .pl3w alleen gold enkel binnen de band */
.v2-band.pl3.pl3-pin{z-index:2}
/* 3.17.2 [#contact-ontwerp] sfeerfoto (band) + kleine profielfoto bij 'Wie ben ik?'; grijze vakken met naam zolang de foto's er niet zijn */
.v2-contact .ph0{position:relative}
.v2-contact .ph0 .phl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;letter-spacing:.12em;z-index:1;pointer-events:none}
.v2-contact .v2-band .ph0{background:#D6D5CB}
.v2-cxw .pf{margin:0}
.v2-cxw .pf .ph{aspect-ratio:4/5;overflow:hidden;background:#D6D5CB}
.v2-cxw .pf .ph img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:761px){.v2-cxw .pf{grid-column:1/4;grid-row:1;align-self:start;justify-self:end;width:min(100%,12rem);padding-right:clamp(20px,2.6vw,40px);box-sizing:content-box}}
@media(max-width:760px){.v2-cxw .pf{width:min(42vw,10rem);margin-left:1.9rem}}
/* 3.17.5 [#contact-ontwerp] lijn + slangetje rechts-krullend onderaan (variant wr, v2.js snakeDrawW), lijn loopt door onder de tekst;
   'Wie ben ik?' links tegen de lijn en schuift er pas uit als het slangetje klaar is (.go); profielfoto lager; 'Benieuwd...' rechts van de filmpjes */
.v2-wh.wr .lnw{left:0;right:auto;top:0;bottom:calc(-1*clamp(28px,3.4vw,48px));width:1px}
.v2-wh.wr .snk{left:0;right:auto;top:0;bottom:auto}
.v2-wh.wr .c.gr.kc{border-left-color:transparent}
html.mo .v2-wh.wr .lnw .ln{opacity:0}
html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up],html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up].in{opacity:1;transform:translate3d(100%,0,0);clip-path:inset(0 100% 0 0);transition:transform 1.2s var(--ease),clip-path 1.2s var(--ease)}
html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up].go{transform:none;clip-path:inset(0)}
@media(min-width:761px){.v2-cxw .pf{margin-top:clamp(36px,5vw,80px)}}
@media(min-width:761px){
	.v2-cxf .fm{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-end;gap:clamp(20px,2.6vw,40px);width:auto}
	.v2-cxf .fm .v2-after{margin:0;text-align:left;max-width:16em}
	.v2-cxf .fm .v2-tiles,.v2-cxf .fm .v2-tiles.row{flex:0 0 min(22rem,60vw);margin:0}
}
@media(prefers-reduced-motion:reduce){html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up]{transform:none;clip-path:none}}
/* 3.18.0 architectuur: 3 kaartjes even breed (kaartje 2 was max 25rem) */
.v2-band.pl3 .v2-card.pl3m .pg:nth-child(2){max-width:none}
@media(min-width:900px){.v2-band.pl3 .v2-card.pl3m .pg{justify-self:stretch}}
/* 3.18.0 contact: lijn, profielfoto en 'Wie ben ik?' dicht tegen elkaar (14px), meer lucht voor de filmpjes; gsm: 'Wie ben ik?' zacht verschijnen */
.v2-cxw.v2-wh.wm .c.gr.kc{padding-left:14px}
@media(min-width:761px){
	.v2-cxw.v2-wh.wm .hd{padding-right:0;margin-right:calc(14px - clamp(12px,1.6vw,22px))}
	.v2-cxw .pf{padding-right:0;margin-right:calc(14px - clamp(12px,1.6vw,22px))}
}
.v2-cxw+.v2-cxf{margin-top:clamp(40px,9vw,130px)} /* 3.20.0: helft */
@media(max-width:760px){
	html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up],html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up].in{transform:none;clip-path:none;opacity:0;transition:opacity .9s ease}
	html.mo .v2-cxw.v2-wh.wm .hd[data-rv=up].go{opacity:1}
}
/* 3.22.0 kaartjes architectuur: eigen laag (enkel transform/opacity = compositor, superzacht) */
.v2-band.pl3 .v2-card.pl3m .pg{will-change:transform,opacity;backface-visibility:hidden}
/* 3.23.3 kaartje 1 (pc): iets minder lucht onderaan zodat de tekst past binnen de hoogte van de lijntekening */
@media(min-width:900px){.v2-band.pl3 .v2-card.pl3m .pg:first-child{padding-bottom:clamp(12px,1.4vw,20px)}}
/* 3.23.4 kaartje 1 (pc, lager venster): tekst iets kleiner en strakker zodat het kaartje binnen de lijntekening past (getest 1280x720, 1366x768; 1440x900 ongewijzigd) */
@media(min-width:900px) and (max-height:860px){.v2-band.pl3 .v2-card.pl3m .pg:first-child p{font-size:.94em;line-height:1.6}}
/* 3.26.1 [#plan-kaartjes] gsm: kaartjes zoals op pc NAAST de maquette: 70%, tegen de LINKERrand (maquette rechts), verticaal gecentreerd; maquettevak hoger zodat er ruimte is */
@media(max-width:599px){
	.v2-band.pl3 .ph{margin-bottom:0!important;height:min(30vh,240px)!important;aspect-ratio:auto!important;max-height:none!important}
	.v2-band.pl3 .pl3w .v2-card.pl3m.pl3g{position:absolute;top:50%;left:-18px;right:auto;width:70vw;margin:0;translate:0 -50%}
	.v2-band.pl3 .v2-card.pl3g .pg{align-self:center;padding:16px 16px}
	.v2-band.pl3 .v2-card.pl3g .pg p{font-size:.94em;line-height:1.6}
}
/* 3.26.3 gsm: geen flits bij openen: kaartjes onzichtbaar tot plan3d.js de band klaarzet (.pl3-pin), maquettevak meteen op zijn definitieve hoogte */
@media(max-width:599px){html.mo .v2-band.pl3:not(.pl3-pin) .v2-card.pl3m{visibility:hidden}}
/* 3.27.4 [#diensten-modellen] gsm: carrousel met het actieve model iets kleiner (48vw) zodat de volgende net naast het model aan de schermrand een stukje zichtbaar is, zonder overlap */
@media(max-width:599px){.v2-dm2 .md.cr{--cb:48vw}}

/* 3.31.1 contactband: brede foto volledig in de breedte */
.v2-band.bs .ph{aspect-ratio:2.2/1!important;max-height:none!important}

/* 3.32.0 contact: printfilmpjes + 'Printer in actie' in 3 woorden rechts */
.v2-cxf .fm.fv{display:flex;align-items:flex-end;justify-content:flex-end;gap:clamp(18px,3vw,36px)}
.v2-cxf .fm.fv .v2-tiles{margin:0}
.v2-cxf .v2-tile .im video.vf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v2-cxf .fh{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:.95;letter-spacing:-.02em;color:#D6D5CB;text-align:left;margin-bottom:-.06em}
.v2-cxf .fh span,.v2-cxf .fh em{display:block}
.v2-cxf .fh em{font-style:normal;color:#D0B084}
@media(max-width:599px){.v2-cxf .fm.fv{flex-direction:column-reverse;align-items:flex-end}.v2-cxf .fh{text-align:right;font-size:clamp(2.4rem,12vw,3.4rem)}}
.v2-cxf .fm.fv{flex-direction:row!important}
@media(max-width:599px){.v2-cxf .fm.fv{flex-direction:column-reverse!important}}

/* 3.32.2 filmpjes: transparant tot hover (pc) of klik/tik; speelt bij klik */
.v2-cxf .v2-film{cursor:pointer}
.v2-cxf .v2-film .im{background:transparent}
.v2-cxf .v2-tile .im video.vf{opacity:.45;transition:opacity .7s var(--ease,ease)}
.v2-cxf .v2-tile .im video.vf.on{opacity:1}
@media(hover:hover){.v2-cxf .v2-tile:hover .im video.vf{opacity:1}}

/* 3.33.0 filmpjes: pc hover = helder + 150% (buur schuift), gsm tik = 80% schermbreed */
.v2-cxf .fv .v2-tiles{overflow:visible}
.v2-cxf .fv .v2-tw{position:relative;z-index:1;transform-origin:100% 100%;transition:transform .7s var(--ease,ease)}
.v2-cxf .fv .v2-tw.up{z-index:30}
.v2-cxf .fv .v2-tw .v2-tile,.v2-cxf .fv .v2-tw .v2-tile:hover{transform:none}
@media(hover:hover){.v2-cxf .fv .v2-tw.big{transform:scale(1.5)}.v2-cxf .fv .v2-tw.sh{transform:translate3d(-50%,0,0)}
 .v2-cxf .fv .v2-tw .im video.vf{opacity:.45}.v2-cxf .fv .v2-tw.big .im video.vf{opacity:1}
 .v2-cxf .fv .v2-tile:hover .im video.vf{opacity:.45}.v2-cxf .fv .v2-tw.big .v2-tile:hover .im video.vf{opacity:1}}
@media(hover:none){.v2-cxf .fv .v2-tw{transform-origin:50% 50%}.v2-cxf .fv .v2-tw .im video.vf{opacity:1}}
/* 3.33.0 contact 'Wie ben ik?': foto + woorden naast elkaar, kaartje eronder */
@media(min-width:761px){
.v2-wh.v2-cxw .pf{grid-column:1/4!important;grid-row:1!important;justify-self:end!important;align-self:end!important;margin:0!important}
.v2-wh.v2-cxw .hd{grid-column:4/10!important;grid-row:1!important;justify-self:start!important;align-self:end!important;text-align:left!important;padding:0 0 0 clamp(18px,2.4vw,34px)!important;margin:0 0 -.06em!important}
.v2-wh.v2-cxw .c.gr.kc{grid-column:4/11!important;grid-row:2!important;margin-top:clamp(28px,3.5vw,48px)!important}}
@media(max-width:760px){
.v2-wh.v2-cxw{display:grid!important;grid-template-columns:auto 1fr!important;column-gap:16px!important}
.v2-wh.v2-cxw .pf{grid-column:1!important;grid-row:1!important;width:min(36vw,9rem)!important;margin:0!important;align-self:end!important}
.v2-wh.v2-cxw .hd{grid-column:2!important;grid-row:1!important;align-self:end!important;text-align:left!important;margin:0 0 -.06em!important;padding:0!important;width:auto!important}
.v2-wh.v2-cxw .c.gr.kc{grid-column:1/-1!important;grid-row:2!important;margin-top:28px!important}}
/* 3.34.0 [#contact-wie] foto rechts deels over de band, 'Wie ben ik?' links ervan, kaartje schuift van links in */
.v2-cxh{position:relative;z-index:3;display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(16px,2.4vw,32px);margin-top:calc(-1 * clamp(3rem,8vw,7.5rem))}
.v2-cxh .pf{width:clamp(10rem,19vw,15rem)!important;margin:0!important;padding:0!important;flex:none}
.v2-cxh .pf .ph{box-shadow:0 8px 22px -10px rgba(45,40,30,.2),0 1px 3px rgba(45,40,30,.08)}
.v2-cxh .hd{margin:0 0 -.06em;font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:.95;letter-spacing:-.02em;color:#D6D5CB;text-align:right}
.v2-cxh .hd span,.v2-cxh .hd em{display:block}
.v2-cxh .hd em{font-style:normal;color:#D0B084}
.v2-cxk{margin-top:clamp(28px,4vw,56px);max-width:36rem;opacity:0;transform:translate3d(-60px,0,0);transition:opacity .9s var(--ease,ease),transform 1.1s var(--ease,ease)}
.v2-cxk.in{opacity:1;transform:none}
.v2-cxk .v2-card{background:#0086B2;padding:clamp(20px,2.6vw,36px);box-shadow:0 8px 22px -10px rgba(45,40,30,.2),0 1px 3px rgba(45,40,30,.08)}
.v2-cxk .v2-card p,.v2-cxk .v2-card .mb,.v2-cxk .v2-card .ms{color:#fff;margin:0}
@media(prefers-reduced-motion:reduce){.v2-cxk{opacity:1;transform:none;transition:none}}
@media(min-width:761px){.v2-wh.v2-cxw .c.gr.kc{grid-column:1/9!important;grid-row:1!important;margin-top:clamp(40px,5vw,72px)!important}}
@media(max-width:760px){.v2-cxh .pf{width:min(44vw,11rem)!important}.v2-cxh .hd{font-size:clamp(2.2rem,10.5vw,3rem)}.v2-wh.v2-cxw .c.gr.kc{grid-row:1!important;margin-top:32px!important}.v2-cxk{margin-right:12px}}
/* 3.34.0 filmpjes groeien in de opbouw (geen overlap) */
.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{display:flex!important;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:12px;width:auto!important;max-width:100%}
.v2-cxf .fv .v2-tw,.v2-cxf .fv .v2-tw.big,.v2-cxf .fv .v2-tw.sh{transform:none!important;flex:none;width:11.5rem;transition:width .7s var(--ease,ease)}
.v2-cxf .fv .v2-tw.big{width:17.25rem}
@media(max-width:599px){.v2-cxf .fv .v2-tw{width:calc(50% - 6px)}.v2-cxf .fv .v2-tw.big{width:80vw}.v2-cxf .fv .v2-tiles{width:100%!important}}
/* 3.34.1 foto echt deels over de band; minder lucht boven de tekst */
.v2-band.bs{margin-bottom:0!important}
.v2-cxh{margin-top:calc(-.5 * clamp(10rem,19vw,15rem))}
@media(max-width:760px){.v2-cxh{margin-top:calc(-.5 * min(44vw,11rem))}}
@media(min-width:761px){.v2-wh.v2-cxw .c.gr.kc{margin-top:clamp(28px,3vw,40px)!important}}
.v2-cxf .fm.fv{width:auto!important;max-width:100%}
@media(min-width:600px){.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{flex:none!important;flex-wrap:nowrap!important}}
/* 3.34.2 filmpjes: ruimte vooraf gereserveerd (niets eronder verspringt); gsm groeit naast elkaar, buur schuift opzij */
.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{min-height:17.25rem;align-items:flex-end!important}
@media(max-width:599px){
.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{flex-wrap:nowrap!important;min-height:80vw;justify-content:flex-end!important}
.v2-cxf .fv .v2-tw{flex:0 1 auto!important;min-width:0}
.v2-cxf .fv .v2-tw.big{flex-shrink:0!important}}
/* 3.35.0 'Wie ben ik?' schuift van achter de profielfoto naar links uit (rand foto = lijn) */
.v2-cxh{gap:0!important}
.v2-cxh .hd{overflow:hidden;padding-right:clamp(16px,2.4vw,32px)}
.v2-cxh .hd span,.v2-cxh .hd em{transform:translate3d(110%,0,0);transition:transform 1.1s var(--ease,ease)}
.v2-cxh.go .hd span,.v2-cxh.go .hd em{transform:none}
.v2-cxh.go .hd>:nth-child(1){transition-delay:.55s}
.v2-cxh.go .hd>:nth-child(2){transition-delay:.8s}
.v2-cxh.go .hd>:nth-child(3){transition-delay:1.05s}
@media(prefers-reduced-motion:reduce){.v2-cxh .hd span,.v2-cxh .hd em{transform:none;transition:none}}
/* 3.35.1 'Wie ben ik?' op de onderkant van de foto; foto zweeft (diepere schaduw) */
.v2-cxh .pf .ph{margin-bottom:0!important;box-shadow:0 30px 50px -26px rgba(45,40,30,.38),0 2px 6px rgba(45,40,30,.1)!important}
.v2-cxh{will-change:transform}
/* 3.36.0 pc: grotere foto, zachter uitschuiven woorden, meer ruimte voor parallax; gsm: foto lager t.o.v. band */
.v2-cxh .hd span,.v2-cxh .hd em{transform:translate3d(calc(100% + 24px),0,0);opacity:0;transition:transform 1.5s cubic-bezier(.22,.61,.36,1),opacity 1.2s ease}
.v2-cxh.go .hd span,.v2-cxh.go .hd em{transform:none;opacity:1}
.v2-cxh.go .hd>:nth-child(1){transition-delay:.5s}
.v2-cxh.go .hd>:nth-child(2){transition-delay:.78s}
.v2-cxh.go .hd>:nth-child(3){transition-delay:1.06s}
@media(min-width:761px){.v2-cxh .pf{width:clamp(11rem,22vw,18rem)!important}.v2-cxh{margin-top:calc(-.5 * clamp(11rem,22vw,18rem))}.v2-cxk{margin-top:72px}}
@media(max-width:760px){.v2-cxh{margin-top:calc(-.3 * min(44vw,11rem))}}
@media(prefers-reduced-motion:reduce){.v2-cxh .hd span,.v2-cxh .hd em{transform:none;opacity:1;transition:none}}
/* 3.37.0 gsm: groot filmpje 70vw, buur vervaagt zacht; banner contact max. 68% schermhoogte, rechts uitgelijnd */
.v2-cxf .fv .v2-tw{transition:width .7s var(--ease,ease),opacity .45s ease}
@media(max-width:599px){
.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{min-height:70vw}
.v2-cxf .fv .v2-tw.big{width:70vw}
.v2-cxf .fv .v2-tiles:has(.big) .v2-tw:not(.big){opacity:0}}
@media(min-width:761px){.v2-band.bs .ph{width:min(100vw,calc(68vh * 2.2))!important;margin-left:calc(50% + 50vw - min(100vw,calc(68vh * 2.2)))!important;max-height:none!important}}
/* 3.37.1 banner contact: links tegen de rand, max. 60% schermhoogte */
@media(min-width:761px){.v2-band.bs .ph{width:min(100vw,calc(60vh * 2.2))!important;margin-left:calc(50% - 50vw)!important}}
/* 3.37.2 gsm carrousel diensten: iets kleiner vak zodat groot model + buur samen binnen het scherm passen */
@media(max-width:599px){.v2-dm2 .md.cr{--cb:43vw}}
/* 3.38.0 terug naar boven: plat blauw blokje zoals in het logo (pc = blokje van de +, gsm = blokje van de b), witte V */
#bpTop{width:30px;height:30px;background:#0086B2!important;background-image:none!important}
#bpTop:hover{background:#0086B2!important;filter:brightness(1.12)}
#bpTop svg{width:12px;height:12px;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:599px){#bpTop{width:24px;height:24px}#bpTop svg{width:10px;height:10px}}
#bpTop svg{width:40%!important;height:40%!important}
/* 3.39.2 contact filmpjes: afspeelknopje (blauw blokje met wit driehoekje, huisstijl), weg zodra het filmpje groot is/speelt */
.v2-cxf .fv .v2-tile .im::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;background:#0086B2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3.5v7l5.5-3.5z' fill='%23fff'/%3E%3C/svg%3E") center/16px 16px no-repeat;box-shadow:0 6px 14px -6px rgba(45,40,30,.35);pointer-events:none;z-index:2;transition:opacity .4s ease,transform .4s ease}
.v2-cxf .fv .v2-tw.big .v2-tile .im::after{opacity:0;transform:scale(.6)}
@media(max-width:599px){.v2-cxf .fv .v2-tile .im::after{width:28px;height:28px;margin:-14px 0 0 -14px;background-size:13px 13px}}
/* 3.39.7 gsm: veeg over het keuzeblokje scrolt; vasthouden = draaien */
html.l3ch .v2-maatwerk .l3st canvas{touch-action:pan-y pinch-zoom!important}
/* 3.39.8 gsm: vasthouden op keuzeblokje = geen kopieer/selectiemenu */
html.l3ch .v2-maatwerk .l3st,html.l3ch .v2-maatwerk .l3st canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
/* 3.39.10 gsm: tekstblok schuift tot 12vh trager mee (translate, geen layout) -> keuzeblokje evenveel lager + wat extra lucht */
@media (max-width:699px){html.l3ch .v2-maatwerk .l3st{margin-top:calc(12vh + 1.25rem)}}
/* 3.40.0 pc: 3D-modellen in de diensten (architectuur) iets groter (was min(13.5rem,46%)) */
@media(min-width:900px){.v2-dm2 .md.cr{--cb:min(17.5rem,56%)}}
/* 3.40.0 kaartjes: warm getinte, strakkere schaduw; tijdens scrollen een grotere schaduw (opgetild) via ::after-opacity (geen herberekening van de schaduw per beeld) */
.v2-band.pl3 .v2-card.pl3m .pg,.v2-band.pl3 .v2-card.pl3g .pg{position:relative;box-shadow:inset 3px 0 0 #0086B2,0 14px 26px -16px rgba(120,86,40,.42),0 2px 4px rgba(120,86,40,.10)}
.v2-cxk .v2-card{position:relative;box-shadow:0 12px 24px -14px rgba(0,60,90,.40),0 2px 4px rgba(0,60,90,.12)}
.v2-band.pl3 .v2-card.pl3m .pg::after,.v2-band.pl3 .v2-card.pl3g .pg::after,.v2-cxk .v2-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;box-shadow:0 30px 44px -22px rgba(120,86,40,.45)}
.v2-cxk .v2-card::after{box-shadow:0 30px 44px -22px rgba(0,60,90,.42)}
html.scr .v2-band.pl3 .v2-card.pl3m .pg::after,html.scr .v2-band.pl3 .v2-card.pl3g .pg::after,html.scr .v2-cxk .v2-card::after{opacity:1;transition-duration:.25s}
/* 3.40.0 pc: diensten afwisselend: hoofdstuk 2 model rechts, tekst links */
@media(min-width:900px){.v2-svc.v2-dm2 .s:nth-child(2){grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
	.v2-svc.v2-dm2 .s:nth-child(2)>p{grid-column:1;margin:.9em clamp(0px,3vw,48px) 0 0}
	.v2-svc.v2-dm2 .s:nth-child(2) .md{grid-column:2}}
/* 3.40.2 laatste bandkaartje (boven de maquette): blauw hoekje links + onder; optillen subtieler */
.v2-band.pl3 .v2-card.pl3m .pg:last-child,.v2-band.pl3 .v2-card.pl3g .pg:last-child{box-shadow:inset 3px 0 0 #0086B2,inset 0 -3px 0 #0086B2,0 14px 26px -16px rgba(120,86,40,.42),0 2px 4px rgba(120,86,40,.10)}
.v2-band.pl3 .v2-card.pl3m .pg::after,.v2-band.pl3 .v2-card.pl3g .pg::after{box-shadow:0 22px 32px -20px rgba(120,86,40,.30)}
.v2-cxk .v2-card::after{box-shadow:0 22px 32px -20px rgba(0,60,90,.30)}
/* 3.40.3: optil-schaduw in een eigen laag (opacity zonder herschilderen van het kaartje); op aanraakschermen helemaal uit */
.v2-band.pl3 .v2-card.pl3m .pg::after,.v2-band.pl3 .v2-card.pl3g .pg::after,.v2-cxk .v2-card::after{will-change:opacity}
@media(hover:none){.v2-band.pl3 .v2-card.pl3m .pg::after,.v2-band.pl3 .v2-card.pl3g .pg::after,.v2-cxk .v2-card::after{display:none}}
/* 3.40.7 gsm/aanraakscherm: lichtere schaduw op de bewegende bandkaartjes (1 laag, kleine vervaging) = minder schilderwerk per beeld */
@media(hover:none),(max-width:699px){.v2-band.pl3 .v2-card.pl3m .pg,.v2-band.pl3 .v2-card.pl3g .pg{box-shadow:inset 3px 0 0 #0086B2,0 8px 12px -9px rgba(120,86,40,.38)}
	.v2-band.pl3 .v2-card.pl3m .pg:last-child,.v2-band.pl3 .v2-card.pl3g .pg:last-child{box-shadow:inset 3px 0 0 #0086B2,inset 0 -3px 0 #0086B2,0 8px 12px -9px rgba(120,86,40,.38)}}
/* 3.41.2 – TESTVERSIE pc (?nieuw): bar+ logo in de plaats van de bannerfoto, vast achter de inhoud; het blokje wordt het kaartje (zoals de b op gsm) */
@media (min-width:700px){html.l3nw .v2-maatwerk{position:relative;z-index:1}
html.l3nw .v2-maatwerk .v2-band .ph{background:transparent!important}
html.l3nw .v2-maatwerk .v2-band .ph>img{opacity:0}
html.l3nw .v2-maatwerk .v2-band .v2-hd{display:none!important}
html.l3nw .v2-maatwerk .v2-band .v2-card.l3k{opacity:1!important;transform:none!important;transition:none!important}
html.l3nw .v2-maatwerk .v2-band .v2-card.l3k>*{opacity:var(--txt,1)}
html.l3nw .v2-maatwerk .v2-band .v2-card.l3w{background:none!important;background-image:none!important;box-shadow:none!important}}
/* 3.41.3 – TESTVERSIE pc (?nieuw): kaartje rechts als keuze in het paneeltje */
@media (min-width:700px){html.l3nw.l3cr .v2-maatwerk .v2-band .v2-card{left:auto!important;right:0!important;margin-left:auto}}
/* 3.42.2 – Contact: geen profielfoto meer; 'Wie ben ik?' staat rechts onder de band (niet meer half over de foto), zelfde lucht als bij de andere titels */
.v2-cxh.np{margin-top:clamp(28px,4vw,56px)!important}
/* 3.42.3 – Contact: schermbrede foto (Bart + Gaston) blijft even vast onder de menubalk; het blauwe kaartje scrolt erover; daarna scrolt alles samen weg.
   'Wie ben ik?' staat links van het tekstblok (dat een vijfde naar rechts schuift), onderkant 'ik?' = onderkant 'printknop'. */
.v2-cxs{position:relative;padding-bottom:clamp(60px,14vh,140px)}
.v2-cxs .v2-band.bs{position:-webkit-sticky;position:sticky;top:calc(var(--t0) + var(--stack) + 14px + var(--hy,0px));z-index:0;margin-bottom:0!important}
.v2-cxs .v2-band.bs .ph{width:100vw!important;margin-left:calc(50% - 50vw)!important;aspect-ratio:auto!important;height:min(calc(100vw / 2.2),calc(100vh - var(--t0) - var(--stack) - 40px))!important;max-height:none!important}
.v2-cxs .v2-band.bs .ph img{width:100%;height:100%!important;object-fit:cover;transform:none!important;will-change:auto}
.v2-cxs .v2-cxk{position:relative;z-index:2;margin-top:clamp(28px,4vw,56px)}
@media(min-width:761px){
	.v2-cxw{position:relative}
	.v2-cxw .c.gr.kc{grid-column:1/-1!important;margin-left:20%!important;width:66.1%!important}
	.v2-cxw>.v2-cxh.np{position:absolute;left:0;bottom:var(--cxhb,0px);width:20%;margin:0!important;display:block;z-index:1;transform:none!important}
	.v2-cxw>.v2-cxh.np .hd{text-align:right}
}
@media(max-width:760px){
	.v2-cxw>.v2-cxh.np{grid-column:1/-1;margin:0 0 clamp(20px,5vw,32px)!important;transform:none!important}
}
/* 3.42.3b – specificiteit tegen oudere contactregels; kaartje reist verder over de foto */
.v2-cxs{padding-bottom:clamp(36px,5vh,64px)}
.v2-cxs .v2-cxk{margin-bottom:clamp(60px,12vh,130px)}
@media(min-width:761px){
	.v2-wh.v2-cxw .c.gr.kc{grid-column:1/-1!important;margin-left:20%!important;width:66.1%!important}
	.v2-wh.v2-cxw>.v2-cxh.np{width:calc(20% - 30px)}
	.v2-wh.v2-cxw>.v2-cxh.np .hd{text-align:right!important;padding:0!important;margin:0!important;width:auto!important}
}
/* 3.42.4 – contact: filmpjes terug in hun eigen verhouding (3.40.9 was verloren gegaan) */
.v2-cxf .v2-tw,.v2-cxf .v2-tiles.row.ar>.v2-tw{--ar:1.4286!important}
.v2-cxf .v2-tile .im{aspect-ratio:560/392!important}
.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{min-height:12.08rem}
@media(max-width:599px){.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{min-height:49vw}}
/* kaartje komt gewoon van onderen mee (geen zijwaartse inschuif); foto laat pas los als de tekst hem bijna raakt */
.v2-cxs .v2-cxk,.v2-cxs .v2-cxk.in{opacity:1!important;transform:none!important;transition:none!important}
.v2-cxs{padding-bottom:0!important}
.v2-cxs .v2-cxk{margin-bottom:clamp(80px,22vh,240px)}
@media(min-width:761px){
	/* 'Wie ben ik?' links van de lijn, zelfde afstand (14px) als de tekst rechts ervan; schuift in van achter de lijn */
	.v2-wh.v2-cxw>.v2-cxh.np{width:calc(20% - 14px)}
	/* filmpjes: linkerkant gelijk met de blauwe lijn; 'Printer in actie.' dichter tegen het filmpje */
	.v2-cxf .fm.fv{justify-content:flex-start!important;margin-left:20%!important;margin-right:auto!important;gap:18px!important}
	.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{width:max-content!important;justify-content:flex-start!important}
}
.v2-cxs{display:flow-root}
@media(min-width:761px){
	.v2-cxf .fv .v2-tiles,.v2-cxf .fv .v2-tiles.row{container-type:normal!important}
	.v2-wh.v2-cxw>.v2-cxh.np .hd{display:block!important;width:100%!important}
}
@media(min-width:761px){.v2-cxs{margin-bottom:-20px}} /* tekst komt tot ~20px onder de vaste foto, dan scrolt alles samen */
@media(max-width:760px){
	/* gsm: kaartje bedekt enkel het onderste deel van de (lage) foto bij het loslaten */
	.v2-cxs{padding-bottom:80px!important}
	.v2-cxs .v2-cxk{margin-bottom:-80px}
	.v2-cxs .v2-band.bs{top:max(0px,calc(var(--t0) + var(--stack) + 14px + var(--hy,0px)))}
	/* 'Wie ben ik?' boven het tekstblok, gelijk met de tekst */
	.v2-wh.v2-cxw>.v2-cxh.np{grid-row:1!important;grid-column:1/-1!important}
	.v2-wh.v2-cxw .c.gr.kc{grid-row:2!important;margin-top:0!important}
	.v2-wh.v2-cxw>.v2-cxh.np .hd{text-align:left!important;padding:0 0 0 44px!important;margin:0!important}
}
@media(max-width:760px){.v2-cxs{padding-bottom:116px!important}.v2-wh.v2-cxw>.v2-cxh.np{display:none!important}} /* 3.42.5 gsm: geen "Wie ben ik?" (Bart), lucht tussen kaartje en tekst */

/* 3.44.0 [#maatwerk-duo] maatwerk pc: keuzeblokje links, 'Hoe gaat dat in zijn werk?' rechts ernaast, verticaal gecentreerd; de uitleg verschijnt
   stap per stap na de landing (html.l3tell via logo3d-banner.js, data-wait in v2.js). 3.44.4: vanaf 1000 px (Barts laptop = 1031x706 css-px),
   compacter (Bart): weinig lucht boven/onder, stappen 12 % kleiner zodat de uitleg binnen de hoogte van het blokje blijft. Onder 1000 px en gsm: zoals voorheen. */
@media(min-width:1000px){
	html.l3ch .v2-maatwerk .v2-duo{display:grid;grid-template-columns:minmax(0,min(520px,60vh)) minmax(0,1fr);column-gap:clamp(56px,6vw,120px);align-items:center;padding:clamp(4px,1vw,16px) 0 clamp(8px,1.2vw,16px)} /* 3.44.7: uitleg meer naar rechts (bredere tussenruimte), lucht onder 04 nog kleiner */
	html.l3ch .v2-maatwerk .v2-duo>.v2-sec{padding:0}
	html.l3ch .v2-maatwerk .v2-duo .l3st{margin:0}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh{margin-bottom:clamp(18px,2.4vw,34px)}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps.tl{max-width:none}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps.tl p{font-size:.88rem;line-height:1.45}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps.tl li{--gp:clamp(18px,2.4vw,28px)}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps.tl li:last-child{padding-bottom:0}
	html.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps .n{font-size:clamp(1.5rem,2.2vw,2.1rem)}
	/* 3.45.1: vaste regie in JS (v2.js duoTell), geen css-vertragingen: .ph1 lijn opent van links (1,1 s), .ph2 vierkantje schuift uit de lijn omhoog (0,9 s),
	   .ph3 tekst vloeit uit het vierkantje (0,9 s); stappen krijgen .in per stuk en komen van links. (2.26.33 zet sectiekoppen vast met !important -> hier overschreven.) */
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh .lnw{visibility:visible}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh .snk{display:none!important}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh .ln{display:block!important;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh.ph1 .ln{transform:scaleX(1)}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh .sq{transform:translateY(calc(100% + var(--cd,22px)))!important;transition:transform .9s var(--ease)!important}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh.ph2 .sq{transform:none!important}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh h2{opacity:0!important;transform:translateX(-.5em)!important;clip-path:inset(-10% 100% -10% 0);transition:opacity .45s ease,transform .9s var(--ease),clip-path .9s var(--ease)!important}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-sh.ph3 h2{opacity:1!important;transform:none!important;clip-path:inset(-10% -2% -10% 0)}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe li[data-rv=up]{--d:0s;transition:opacity .8s ease,transform 1s var(--ease)}
	html.mo.l3ch .v2-maatwerk .v2-duo .v2-hoe li[data-rv=up]:not(.in){transform:translate3d(0,34px,0)} /* 3.45.2 (Bart): tijdlijn = stappen schuiven van ONDER omhoog langs de lijn, vierkantje reist mee */
	html.tlj.l3ch .v2-maatwerk .v2-duo .v2-hoe .v2-steps.tl li::before{transform:none!important;transition:none!important}
}