/* websites-en-webshops: CSS van de secties op deze pagina (docs/prototype/websites-en-webshops.html, inline <style>).
   De stappen en het kruimelpad staan in styles.css. De regels voor .ww-read en .faq horen bij markup die in Wagtail
   een gedeeld blok werd (blog_links, faq); ze staan er nog zodat dit bestand gelijk blijft met het prototype. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: websites en webshops ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* hero */
.ww-hero{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.ww-hero h1{font-size:clamp(40px,4.6vw,66px);line-height:1.04;text-wrap:balance}
/* het scherm: een desktopmonitor in lijnwerk (zoals het toetsenbord op 404.html), licht schuin,
   met daarop een homepage die langzaam naar beneden scrolt en terug */
/* de laptop: recht van voren, in lijnwerk zoals het toetsenbord op 404.html; groot, en hij loopt
   rechts voorbij de rand van het venster (main knipt horizontaal af) */
.ww-vis{position:relative;min-width:0}
.lap{position:relative;width:max(720px,58vw);container-type:inline-size;opacity:0;transform:translateX(3%);transition:opacity .8s,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.play .lap{opacity:1;transform:none}
.lap-lid{position:relative;padding:2cqw 2cqw 2.2cqw;border:2px solid var(--color-ink);border-bottom:0;border-radius:2.4cqw 2.4cqw 0 0;background:var(--color-card)}
.lap-cam{position:absolute;left:50%;top:.75cqw;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;border:1.5px solid var(--color-ink)}
.lap-screen{position:relative;aspect-ratio:16/10;border:1.5px solid var(--color-ink);border-radius:.7cqw;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:1.45cqw}
.lap-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgb(255 255 255 / 0) 40%,rgb(255 255 255 / .28) 48%,rgb(255 255 255 / 0) 60%)}
.lap-base{position:relative;height:1.5cqw;margin:0 -4.5cqw;border:2px solid var(--color-ink);border-bottom:0;border-radius:.5cqw .5cqw 0 0;background:var(--color-card)}
/* onderkant van de voet: een smallere, donkerdere lip met afgeronde hoeken, zoals bij een echte laptop */
.lap-lip{position:absolute;left:-2px;right:-2px;top:100%;height:1.1cqw;border:2px solid var(--color-ink);border-radius:0 0 3cqw 3cqw / 0 0 1.1cqw 1.1cqw;background:#E3DACA}
.lap-notch{position:absolute;left:50%;top:-2px;width:13%;height:.75cqw;margin-left:-6.5%;border:2px solid var(--color-ink);border-top:0;border-radius:0 0 .9cqw .9cqw;background:#ECE5D8}
.lap-shadow{height:2.4cqw;margin:.4cqw 0 0;border-radius:50%;background:rgb(25 23 20 / .1);filter:blur(10px)}
.pc-postit{position:absolute;left:-2.4cqw;bottom:-1.2cqw;z-index:3;width:9.5em;padding:.6em .75em;background:var(--color-postit);font-family:var(--font-hand);font-size:1.6cqw;line-height:1.15;color:var(--color-ink);rotate:-6deg;box-shadow:0 .6em 1.2em rgb(25 23 20 / .15)}
/* de browserbalk staat vast, de pagina eronder scrolt */
.pc-bar{flex:none;display:flex;gap:.35em;align-items:center;padding:.5em .8em;background:#F2EEE6;border-bottom:1px solid #E6E0D4;font-family:var(--font-mono);font-size:.82em;color:var(--color-ink-3)}
.pc-bar i{width:.6em;height:.6em;border-radius:50%;background:var(--color-rule)}
.pc-bar span{margin-left:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-view{position:relative;flex:1;overflow:hidden}
.pc-page{position:absolute;inset:0 0 auto 0}
.pg-head{display:flex;padding-top:.75em;padding-bottom:.75em;align-items:center;gap:.8em;padding:0 1.1em;border-bottom:1px solid #F0ECE4}
.pg-logo{font-family:var(--font-serif);font-weight:700;font-size:1.05em;color:var(--color-ink)}
.pg-logo b{color:var(--color-accent)}
.pg-nav{display:flex;gap:.6em;margin-left:auto;padding-right:1em}
.pg-nav i{width:2.6em;height:.45em;border-radius:.3em;background:#ECE6DA}
.pg-langs{display:flex;gap:.25em}
.pg-langs span{padding:.15em .5em;border-radius:1em;font-size:.72em;font-weight:700;color:var(--color-ink-3);border:1px solid var(--color-rule);transition:all .3s}
.pg-langs span.on{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.pg-hero{position:relative;padding:1.1em 1.1em 0;display:grid;grid-template-columns:1.1fr 1fr;gap:1em;align-content:start}
.pg-hero .h{grid-column:1/-1;font-family:var(--font-serif);font-weight:600;font-size:1.9em;line-height:1.05;min-height:2.1em;color:var(--color-ink);transition:opacity .25s}
.pg-vid{aspect-ratio:16/10;border-radius:.5em;background:#3A362F;display:grid;place-items:center}
.pg-vid::after{content:"";border-left:1.2em solid var(--color-paper);border-top:.75em solid transparent;border-bottom:.75em solid transparent;margin-left:.3em}
.pg-txt{display:grid;gap:.55em;align-content:start;padding-top:.3em}
.pg-txt i{height:.5em;border-radius:.3em;background:#ECE6DA}
.pg-txt b{justify-self:start;margin-top:.4em;padding:.35em .9em;border-radius:2em;background:var(--color-ink);color:var(--color-paper);font-size:.75em;font-weight:600}
.pg-edit{padding:.3em .75em;border-radius:2em;background:var(--color-accent);color:#fff;font-size:.78em;font-weight:700;opacity:0;transform:translateY(-.4em);transition:opacity .4s 1s,transform .4s 1s}
.pg-range{padding:1.4em 1.1em 0;width:82%}
.pg-label{font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-3)}
.pg-cards{margin-top:.6em;display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.pg-cards div{border:1px solid #ECE6DA;border-radius:.5em;overflow:hidden}
.pg-cards div::before{content:"";display:block;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#F1ECE2 0 .5em,#EAE3D6 .5em 1em)}
.pg-cards span{display:block;margin:.5em .6em .6em;height:.45em;width:70%;border-radius:.3em;background:#E2DACB}
.pg-shop{position:relative;width:58%;margin:1.4em 1.1em 0;border:1px solid #E6E0D4;border-radius:.7em;background:#FBF9F5;overflow:hidden}
.pg-shop .who{padding:.7em .9em .4em;font-size:.78em;color:var(--color-ink-3)}
.pg-shop .who b{color:var(--color-ink);font-weight:600}
.pg-shop .item{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;padding:.55em .9em;border-top:1px solid #F0ECE4;font-size:.85em;white-space:nowrap}
.pg-shop .item em{font-style:normal;color:var(--color-ink-3);font-size:.9em}
.pg-shop .item b{font-weight:700}
.pg-shop .item small{display:block;font-size:.75em;font-weight:600;color:var(--color-ok)}
.pg-shop .cta{position:relative;margin:.5em .9em .8em;padding:.5em;border-radius:2em;background:var(--color-ink);color:var(--color-paper);text-align:center;font-size:.85em;font-weight:600;overflow:hidden}
.pg-shop .cta span{display:block;transition:opacity .3s}
.pg-shop .cta .c2{position:absolute;inset:0;display:grid;place-items:center;background:var(--color-ok);opacity:0}
.pg-foot{margin-top:1.4em;background:var(--color-ink);padding:1.2em 1.1em 2em;display:grid;grid-template-columns:repeat(3,1fr);gap:1em;align-content:start}
.pg-foot i{height:.45em;border-radius:.3em;background:#3A362F}
/* animatie: 14 s per ronde; rust bovenaan, scrolt naar de shop, de bestelling gaat naar het ERP, en terug */
/* --pc-mid en --pc-max zet het script: hoe ver de pagina kan scrollen in dit scherm */
@keyframes pc-scroll{0%,14%{transform:none}38%,48%{transform:translateY(var(--pc-mid,0px))}64%,84%{transform:translateY(var(--pc-max,0px))}96%,100%{transform:none}}
@keyframes pc-ok{0%,69%{opacity:0}72%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes pc-press{0%,66%,70%,100%{transform:none}68%{transform:scale(.96)}}
.play .pg-edit{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
.play .pc-page{animation:pc-scroll 14s cubic-bezier(.45,0,.3,1) 1.2s infinite}
.play .pg-shop .cta .c2{animation:pc-ok 14s 1.2s infinite}
.play .pg-shop .cta{animation:pc-press 14s 1.2s infinite}
}
/* twee deuren */
.ww-doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dx{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:500px;overflow:hidden;border-radius:28px;text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.dx:hover,.dx:focus-visible{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgb(25 23 20 / .55)}
.dx:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.dx-dark{background:var(--color-ink);color:var(--color-paper)}
.dx-light{background:var(--color-accent-strong);color:#fff}
.dx-text{padding:clamp(26px,3vw,40px) clamp(28px,3.6vw,44px) 36px}
.dx h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.dx-dark h3{color:var(--color-paper)}
.dx-light h3{color:#fff}
.dx-text p{margin-top:12px;max-width:44ch;font-size:17px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (max-width:1023px){
.dx-text p{display:block}
}
.dx-dark .dx-text p{color:rgb(244 239 230 / .72)}
.dx-light .dx-text p{color:rgb(255 255 255 / .88)}
.dx-btn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.dx-btn span{transition:transform .25s}
.dx:hover .dx-btn span,.dx:focus-visible .dx-btn span{transform:translateX(4px)}
.dx-dark .dx-btn{border:1px solid rgb(244 239 230 / .4)}
.dx-dark:hover .dx-btn{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.dx-light .dx-btn{border:1px solid rgb(255 255 255 / .55)}
.dx-light:hover .dx-btn{background:#fff;border-color:#fff;color:var(--color-accent-strong)}
/* het schermpje dat onderaan uit de kaart komt */
.dx-app{display:flex;margin:auto 0 0 clamp(28px,3.6vw,48px);height:250px;translate:0 14px;border-radius:14px 0 0 0;overflow:hidden;background:var(--color-card);color:var(--color-ink);box-shadow:0 -20px 50px -20px rgb(0 0 0 / .45);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.dx-light .dx-app{box-shadow:0 -20px 50px -20px rgb(90 25 8 / .45)}
.dx:hover .dx-app,.dx:focus-visible .dx-app{translate:0 8px}
.dx-app{flex-direction:column;position:relative}
.dx-bar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 14px;background:#EFE9DE;border-bottom:1px solid #E2DACB}
.dx-bar i{width:8px;height:8px;border-radius:50%;background:#D3C9B7}
.dx-bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#FBF8F2;font-size:11px;color:var(--color-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-page{flex:1;min-height:0;padding:12px 18px;background:#fff}
.dx-top{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid #F0EBE2;font-size:11px;white-space:nowrap}
.dx-logo{font-family:var(--font-serif);font-size:15px;font-weight:600}
.dx-logo em{font-style:normal;color:var(--color-accent)}
.dx-links{display:flex;gap:10px;margin-left:auto}
.dx-links i{width:30px;height:5px;border-radius:3px;background:#E6E0D4}
.dx-lang{display:flex;gap:3px}
.dx-lang em{font-style:normal;font-size:9.5px;font-weight:700;padding:2px 5px;border-radius:5px;color:var(--color-ink-3);transition:background .3s,color .3s}
.dx-lang em.on{background:var(--color-ink);color:var(--color-paper)}
.dx-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;padding-top:14px}
.dx-h1{font-family:var(--font-serif);font-size:19px;line-height:1.12;font-weight:600}
.dx-line{display:block;height:5px;margin-top:9px;border-radius:3px;background:#ECE6DA}
.dx-line.s{width:70%;margin-top:6px}
.dx-cta{display:inline-block;margin-top:12px;padding:5px 11px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-size:10.5px;font-weight:600}
.dx-vid{position:relative;aspect-ratio:16/10;border-radius:8px;background:linear-gradient(135deg,#4A453D,#2A2622)}
.dx-play{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgb(244 239 230 / .92);transition:transform .3s}
.dx-play::after{content:"";position:absolute;left:12px;top:9px;border:6px solid transparent;border-left:9px solid var(--color-ink);border-right:0}
.dx:hover .dx-play{transform:scale(1.15)}
.dx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.dx-tiles i{height:46px;border-radius:7px;background:#F4EFE6}
.dx-edit{position:absolute;top:96px;right:26px;padding:4px 10px;border-radius:999px;background:var(--color-postit);font-family:var(--font-hand);font-size:13px;color:var(--color-ink);rotate:3deg;box-shadow:0 6px 14px rgb(25 23 20 / .18)}
.dx-search{flex:1;max-width:190px;margin-left:auto;padding:4px 10px;border:1px solid #E6E0D4;border-radius:999px;color:var(--color-ink-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis}
.dx-acct{font-weight:600;color:var(--color-ink-2)}
.dx-cart{padding:3px 9px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font-weight:600}
.dx-cart b{display:inline-block;min-width:15px;margin-left:3px;padding:0 4px;border-radius:999px;background:var(--color-accent);text-align:center;font-size:10px;transition:transform .3s}
.dx-light:hover .dx-cart b{transform:scale(1.25)}
.dx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px}
.dx-prod{position:relative;display:flex;flex-direction:column;padding:8px;border:1px solid #EFE9DE;border-radius:9px;font-size:11px;white-space:nowrap}
.dx-img{display:grid;place-items:center;height:40px;margin-bottom:7px;border-radius:6px;background:#F4EFE6}
.dx-img.t2{background:#EEF0E8}
.dx-img.t3{background:#F3E9E2}
.dx-img i{width:26px;height:22px;border:1.5px solid #B9AE9B;border-radius:3px;background:linear-gradient(#B9AE9B,#B9AE9B) center 6px/100% 1.5px no-repeat}
.dx-prod b{font-weight:700}
.dx-prod small{color:var(--color-ink-3);font-size:9.5px}
.dx-price{margin-top:6px;font-size:12px;font-weight:700;color:var(--color-ink)}
.dx-price small{display:block;font-weight:600;color:var(--color-ok)}
.dx-add{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);font-weight:700;transition:background .25s}
.dx-light:hover .dx-prod:first-child .dx-add{background:var(--color-accent)}
/* allebei: website en webshop samen */
.cb{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;border-radius:28px;background:var(--color-postit);color:var(--color-ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cb:hover,.cb:focus-visible{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgb(25 23 20 / .55)}
.cb:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.cb-text{position:relative;z-index:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,44px);color:var(--color-ink)}
.cb-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink);opacity:.65}
.cb h3{margin-top:10px;font-size:clamp(26px,2.6vw,36px);line-height:1.08;color:var(--color-ink);text-wrap:balance}
.cb-lede{margin-top:12px;max-width:34ch;font-size:16px;line-height:1.6;color:var(--color-ink-2)}
.cb .dx-btn{align-self:flex-start;border:1px solid var(--color-ink);background:var(--color-ink);color:var(--color-paper)}
.cb:hover .dx-btn{background:var(--color-accent-strong);border-color:var(--color-accent-strong);color:var(--color-paper)}
.cb:hover .dx-btn span,.cb:focus-visible .dx-btn span{transform:translateX(4px)}
.cb-vis{position:relative;z-index:1;min-height:300px}
.cb-win{position:absolute;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:#fff;color:var(--color-ink);box-shadow:0 24px 50px -24px rgb(25 23 20 / .45),0 0 0 1px rgb(25 23 20 / .08);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.cb-win.w1{left:-5%;top:58px;width:58%;height:320px}
.cb-win.w2{left:40%;top:112px;width:58%;height:320px}
.cb:hover .cb-win.w1{translate:-6px -4px}
.cb:hover .cb-win.w2{translate:6px -8px}
.cb-win .dx-hero{grid-template-columns:1fr 1fr}
.cb-win .dx-h1{font-size:16px}
.cb-win .dx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cb-win .dx-prod:nth-child(3){display:none}
.cb-win .dx-img{height:40px}
.cb-note{position:absolute;top:18px;left:40%;font-family:var(--font-hand);font-size:17px;color:var(--color-ink);rotate:-3deg;z-index:3}
.cb-arrow{position:absolute;top:34px;left:calc(40% + 86px);width:52px;color:var(--color-ink);z-index:3}
.ww-fact{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--color-ink-2)}
.ww-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.ww-read a{display:flex;flex-direction:column;height:100%;padding:22px 24px;border:1px solid var(--color-rule);border-radius:18px;background:var(--color-card);transition:border-color .2s,transform .2s}
.ww-read a:hover{border-color:var(--color-ink);transform:translateY(-2px)}
.ww-read .k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.ww-read b{margin-top:8px;font-family:var(--font-serif);font-size:21px;line-height:1.2;font-weight:600}
.ww-read .m{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--color-ink-2)}
.ww-also{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;color:var(--color-ink-3);font-size:15px}
@media (max-width:860px){
.ww-read{grid-template-columns:minmax(0,1fr)}
}
.ww-head{display:grid;gap:12px}
.ww-head .lede{max-width:52ch}
@media (min-width:1024px){
.ww-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
.ww-head .lede{justify-self:end;text-align:right;max-width:20ch;margin-bottom:.35em;text-wrap:balance}
}
.ww-work-lede{max-width:62ch;text-wrap:balance;font-size:17px;line-height:1.6;color:rgb(244 239 230 / .7)}
#cases-h{white-space:nowrap;font-size:clamp(28px,4.4vw,48px)}
/* afwijking van het prototype: op gsm past de kop niet op één regel en viel hij weg achter overflow:hidden */
@media (max-width:640px){
#cases-h{white-space:normal;text-wrap:balance}
}
/* wat ze gemeen hebben */
.ww-com{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.ww-com .obj{height:140px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ww-com .obj > *{animation:bob 6s ease-in-out infinite}
.ww-com article:nth-child(2) .obj > *{animation-delay:-1.5s}
.ww-com article:nth-child(3) .obj > *{animation-delay:-3s}
.ww-com article:nth-child(4) .obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.6deg)}}
.ww-com .pain{font-family:var(--font-hand);font-size:17px;line-height:1.2;color:var(--color-ink-3)}
.ww-com h3{margin-top:4px;padding-top:16px;border-top:1px solid var(--color-rule);font-size:22px}
.ww-com p.a{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.o-mail{width:100%;max-width:215px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-size:11px;padding:10px 12px;line-height:1.4;rotate:-3deg}
.o-mail .from{color:var(--color-ink-3)}
.o-mail .subj{font-weight:700;margin:3px 0 5px}
.o-scrib{display:block;margin-top:6px;font-family:var(--font-hand);font-size:14px;color:#2B3F86}
.o-bon{width:100%;max-width:200px;background:#FDFCF7;border:1px dashed #BDB5A5;box-shadow:0 8px 24px rgb(25 23 20 / .1);padding:10px 12px;font-family:var(--font-mono);font-size:10px;line-height:1.5;rotate:3deg}
.o-bon .sig{font-family:var(--font-hand);font-size:15px;color:#2B3F86;margin-top:4px}
.o-load{width:100%;max-width:210px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);overflow:hidden;rotate:-1.5deg}
.o-load .bar{display:flex;gap:4px;padding:6px 8px;background:#F2EEE6}
.o-load .bar i{width:6px;height:6px;border-radius:50%;background:var(--color-rule)}
.o-load .scr{position:relative;height:72px;margin:8px;border-radius:6px;background:#3A362F;display:grid;place-items:center}
.o-load .spin{width:22px;height:22px;border-radius:50%;border:3px solid rgb(255 255 255 / .2);border-top-color:#fff;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.o-load .pr{height:5px;margin:0 8px 6px;border-radius:3px;background:linear-gradient(90deg,var(--color-accent) 22%,#ECE6DA 22%)}
.o-load small{display:block;padding:0 8px 8px;font-size:10px;color:var(--color-ink-3)}
.o-langs{width:100%;max-width:200px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .12);padding:8px 10px;font-size:11px;rotate:2deg}
.o-langs div{display:grid;grid-template-columns:2.4em 1fr;gap:6px;align-items:center;padding:5px 0;border-top:1px solid #F0ECE4}
.o-langs div:first-child{border-top:0}
.o-langs b{font-size:10px;text-align:center;padding:1px 0;border-radius:8px;background:var(--color-ink);color:var(--color-paper)}
.o-langs span{color:var(--color-ink-2)}
.o-langs span.old{color:#C0392B;font-weight:600}
.o-langs span.no{color:var(--color-ink-3);font-style:italic}
/* faq */
/* afsluiter */
/* responsief */
@media (max-width:1023px){
.ww-hero{grid-template-columns:minmax(0,1fr);gap:28px}
.lap{width:86%;margin-left:auto;margin-right:-9%}
.ww-com{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.ww-com .obj{height:120px;margin-bottom:14px}
.dx{min-height:480px}
.dx h3{font-size:clamp(26px,3.6vw,34px)}
}
@media (max-width:699px){
.ww-doors{grid-template-columns:minmax(0,1fr)}
.cb{grid-template-columns:minmax(0,1fr)}
.cb-vis{min-height:250px}
.cb-win.w1{left:5%;top:44px;width:66%}
.cb-win.w2{left:34%;top:96px;width:64%}
.cb-note{left:auto;right:8%;top:12px}
.cb-arrow{display:none}
}
@media (max-width:560px){
.ww-hero-btns > a{width:100%;justify-content:center}
.ww-com{display:flex;gap:14px;margin-inline:-16px;padding:4px 16px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
.ww-com::-webkit-scrollbar{display:none}
.ww-com article{flex:0 0 76%;scroll-snap-align:start;padding:18px 18px 20px;border:1px solid var(--color-rule);border-radius:20px;background:var(--color-card)}
.ww-com .obj{height:112px;transform:scale(.9)}
.dx{min-height:0}
.dx-app{height:230px;margin-top:28px}
.dx-btn{padding:12px 18px;font-size:14px}
.dx-links,.dx-search{display:none}
.dx-acct{margin-left:auto}
.dx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-grid .dx-prod:nth-child(3){display:none}
.dx-hero{grid-template-columns:1fr}
.dx-vid{display:none}
.dx-edit{top:46px;right:14px}
.cb-vis{display:none}
.dx-img{height:26px;margin-bottom:6px}
.dx-img i{width:20px;height:16px}
}
/* minder beweging: meteen het eindbeeld, niets dat loopt */
@media (prefers-reduced-motion:reduce){
.pg-edit{opacity:1;transform:none}
.lap{opacity:1;transform:none;transition:none}
.ww-com .obj > *,.o-load .spin{animation:none}
.dx,.dx-app,.cb,.cb-win{transition:none}
.ww-com{scroll-behavior:auto}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.lap{width:170%;margin:0}
}
/* werk in beweging */
.ww-work{background:var(--color-ink);color:var(--color-paper);overflow:hidden}
.ww-work .h-section{color:var(--color-paper)}
.mq-wrap{display:grid;gap:clamp(14px,1.6vw,22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq{--gap:clamp(14px,1.6vw,22px);display:flex;gap:var(--gap);width:max-content}
.mq-track{display:flex;gap:var(--gap);margin:0;padding:0;list-style:none;animation:mq-left 70s linear infinite}
.mq-right .mq-track{animation-name:mq-right}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mq-left{to{transform:translateX(calc(-100% - var(--gap)))}}
@keyframes mq-right{from{transform:translateX(calc(-100% - var(--gap)))}to{transform:none}}
.mq-card{--n:4.4;position:relative;display:block;cursor:pointer;width:calc((100vw - (var(--n) - 1) * var(--gap)) / var(--n));aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:#26231f;outline:1px solid rgb(244 239 230 / .08);outline-offset:-1px}
/* kaartbreedte volgt het venster: altijd ongeveer even veel kaarten in beeld, met een halve aan de rand */
@media (max-width:1023px){
.mq-card{--n:2.6}
}
@media (max-width:640px){
.mq-card{--n:1.5}
}
@media (min-width:1600px){
.mq-card{--n:5.4}
}
/* eerste rij groter: daar staat het sterkste werk; trager zodat beide rijen even snel lijken te bewegen */
.mq-left .mq-card{--n:3.2}
.mq-left .mq-track{animation-duration:96s}
@media (max-width:1023px){
.mq-left .mq-card{--n:1.9}
}
@media (max-width:640px){
.mq-left .mq-card{--n:1.2}
}
@media (min-width:1600px){
.mq-left .mq-card{--n:4}
}
.mq-shot{display:block;width:100%;height:100%;object-fit:cover;transition:filter .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.mq-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgb(25 23 20 / .55);opacity:0;transition:opacity .35s ease}
.mq-logo img{display:block;width:auto;max-width:220px}
.mq-word{font-family:var(--font-serif,serif);font-size:30px;line-height:1;color:var(--color-paper)}
.mq-kind{font-size:13px;font-weight:600;letter-spacing:.04em;color:rgb(244 239 230 / .75);transform:translateY(6px);transition:transform .35s ease}
.mq-card:hover .mq-shot,.mq-card:focus-visible .mq-shot{filter:blur(8px) brightness(.8);transform:scale(1.06)}
.mq-card:hover .mq-over,.mq-card:focus-visible .mq-over{opacity:1}
.mq-card:hover .mq-kind,.mq-card:focus-visible .mq-kind{transform:none}
.mq-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.mq-all{display:inline-flex;align-items:center;gap:8px;border:1px solid rgb(244 239 230 / .35);border-radius:999px;padding:12px 24px;font-weight:600;color:var(--color-paper);transition:background .2s,border-color .2s,color .2s}
.mq-all:hover{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}
.mq-wrap.mq-off .mq-track{animation-play-state:paused}
@media (hover:none){
.mq-card:not(.is-open) .mq-over{opacity:1;inset:auto auto 10px 10px;flex-direction:row;gap:0;padding:7px 12px;border-radius:999px;background:rgb(25 23 20 / .72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mq-card:not(.is-open) .mq-kind{display:none}
.mq-card:not(.is-open) .mq-logo img{height:16px!important;max-width:110px}
.mq-card:not(.is-open) .mq-word{font-size:15px}
.mq-card.is-open .mq-shot{filter:blur(8px) brightness(.8);transform:scale(1.06)}
.mq-card.is-open .mq-over{opacity:1}
.mq-card.is-open .mq-kind{transform:none}
.mq:has(.is-open) .mq-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
.mq-wrap{-webkit-mask-image:none;mask-image:none}
.mq{width:auto;overflow-x:auto;padding:0 20px;scrollbar-width:none}
.mq-track{animation:none}
.mq-track[aria-hidden]{display:none}
}
/* buiten @layer, zodat deze regels de Tailwind-utilities op de hero en het volgende blok overschrijven */
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.svc-hero{margin-top:8px;margin-bottom:0px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:8px;margin-bottom:4px}
}
@media (min-width:1024px){
.svc-hero{margin-top:16px;margin-bottom:93px}
}
/* volgt er een blok met een gekleurde achtergrond, dan begint die achtergrond minstens 48/64px onder de hero; de titel van dat blok blijft op 112/144px door een kleinere bovenpadding */
.svc-next{padding-top:64px}
@media (min-width:768px) and (max-width:1023px){
.svc-next{padding-top:64px}
}
@media (min-width:1024px){
.svc-next{padding-top:68px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:16px;margin-bottom:69px}
.svc-next{padding-top:70px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:16px;margin-bottom:73px}
.svc-next{padding-top:72px}
}
}