/* branding-en-design: CSS van de secties op deze pagina (docs/prototype/branding-en-design.html, inline <style>).
   De stappen en het kruimelpad staan in styles.css; de vragen gebruiken het gedeelde FAQ-blok. */
/* Alles in de laag 'components' van de Tailwind-build, zodat utilities (ook hs-*-varianten) blijven winnen. */
@layer components{
/* ---------- pagina: branding en design ---------- */
body{overflow-x:hidden}
.hand{font-family:var(--font-hand);color:var(--color-accent);font-size:20px;line-height:1.25}
/* vensters, zoals de mini-illustraties op diensten.html */
.win{position:absolute;background:#fff;border-radius:.7em;box-shadow:var(--shadow-soft);overflow:hidden}
.win .bar{display:flex;gap:.35em;align-items:center;padding:.55em .8em;background:#F2EEE6;font-family:var(--font-mono);font-size:.78em;color:var(--color-ink-3)}
.win .bar i{width:.6em;height:.6em;border-radius:50%;background:var(--color-rule)}
.win .bar span{margin-left:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- 1 hero: een scherm dat de huisstijl overneemt ---------- */
.hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.hero-grid h1{font-size:clamp(38px,4.4vw,62px)}
.hv{position:relative;aspect-ratio:5/4;overflow:hidden;container-type:inline-size;background:var(--color-paper-2);font-size:2.25cqw}
.hv .h-spec{left:4%;top:6%;width:33%;height:40%;display:flex;flex-direction:column}
.hv .h-spec-b{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:.7em .9em .8em}
.hv .aa{font-family:var(--font-serif);font-size:5.6em;line-height:.9;font-weight:600;opacity:0;transform:translateY(.15em);transition:opacity .6s .1s,transform .6s .1s cubic-bezier(.2,.8,.2,1)}
.hv .abc{font-family:var(--font-serif);font-size:.95em;color:var(--color-ink-2);letter-spacing:.04em}
.hv .h-sw{left:4%;top:51%;width:33%}
.hv .h-sw-g{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em;padding:.75em}
.hv .h-sw-g i{aspect-ratio:1;border-radius:.5em;background:var(--c);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.5,.5,1);transition-delay:var(--d)}
.hv .h-site{right:4%;top:6%;width:57%;height:64%;display:flex;flex-direction:column}
.hv .h-site .hd{height:15%;display:flex;align-items:center;justify-content:space-between;padding:0 .9em;background:#ECE6DA;transition:background-color .5s 1.5s}
.hv .h-site .lg{width:4.2em;height:1em;border-radius:.3em;background:#DCD4C6;transition:background-color .4s 1.6s}
.hv .h-site .nv{display:flex;gap:.5em}
.hv .h-site .nv i{width:2.2em;height:.45em;border-radius:.3em;background:#DCD4C6;transition:background-color .4s 1.6s}
.hv .h-site .bd{flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:.9em;padding:1em .9em .6em}
.hv .h-site .tx{position:relative}
.hv .pl{position:absolute;inset:0 0 auto;display:grid;gap:.5em;transition:opacity .3s 1.8s}
.hv .pl i{height:.9em;border-radius:.3em;background:#ECE6DA}
.hv .pl i:nth-child(2){width:70%}
.hv .tl{font-family:var(--font-serif);font-size:1.45em;line-height:1.08;font-weight:600;opacity:0;transition:opacity .5s 1.85s}
.hv .bt{display:inline-block;margin-top:.8em;padding:.4em 1em;border-radius:2em;background:#ECE6DA;color:transparent;font-size:.8em;font-weight:700;transition:background-color .5s 2.1s,color .5s 2.1s}
.hv .im{border-radius:.5em;background:#ECE6DA;position:relative;overflow:hidden;transition:background-color .5s 2.2s}
.hv .im::after{content:"";position:absolute;width:60%;aspect-ratio:1;right:-12%;bottom:-18%;border-radius:50%;background:transparent;transition:background-color .5s 2.35s}
.hv .h-site .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:0 .9em .9em}
.hv .h-site .cards i{height:2.2em;border-radius:.4em;border:1px solid #ECE6DA;background:#F7F4EE;position:relative;transition:border-color .4s 2.3s}
.hv .h-site .cards i::before{content:"";position:absolute;left:.5em;top:.55em;width:.8em;height:.8em;border-radius:50%;background:#ECE6DA;transition:background-color .4s 2.4s}
.hv .h-phone{position:absolute;right:9%;bottom:5%;width:19%;aspect-ratio:9/16;border-radius:1.3em;background:var(--color-ink);padding:.4em;box-shadow:var(--shadow-lift);z-index:3}
.hv .scr{height:100%;border-radius:1em;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.hv .pn-hd{height:22%;background:#ECE6DA;transition:background-color .5s 2.5s}
.hv .pn-card{margin:.6em .5em 0;padding:.5em;border-radius:.5em;background:#F7F4EE;display:grid;gap:.35em}
.hv .pn-card i{height:.45em;border-radius:.3em;background:#ECE6DA}
.hv .pn-card i:last-child{width:60%}
.hv .pn-bt{margin:auto .5em .7em;height:1.5em;border-radius:1em;background:#ECE6DA;transition:background-color .5s 2.7s}
.hv .drop{position:absolute;left:21%;top:62%;width:1.4em;height:1.4em;margin:-.7em 0 0 -.7em;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 .3em rgb(255 255 255 / .8),var(--shadow-soft);opacity:0;z-index:4;pointer-events:none}
.hv .h-postit{position:absolute;left:8%;bottom:6%;width:11em;padding:.7em .8em;background:var(--color-postit);font-family:var(--font-hand);font-size:1.15em;line-height:1.15;rotate:-4deg;box-shadow:0 .6em 1.2em rgb(25 23 20 / .15);opacity:0;transform:translateY(-1em);transition:opacity .4s 2.9s,transform .6s 2.9s cubic-bezier(.3,1.5,.5,1);z-index:2}
@keyframes dropFly{0%{left:21%;top:62%;opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1)}70%{left:58%;top:17%;opacity:1;transform:scale(1)}100%{left:58%;top:17%;opacity:0;transform:scale(2.4)}}
.hv.play .aa{opacity:1;transform:none}
.hv.play .h-sw-g i{transform:none}
.hv.play .drop{animation:dropFly 1s .8s cubic-bezier(.5,0,.3,1) both}
.hv.play .h-site .hd{background:var(--color-ink)}
.hv.play .h-site .lg{background:var(--color-accent)}
.hv.play .h-site .nv i{background:rgb(244 239 230 / .45)}
.hv.play .pl{opacity:0}
.hv.play .tl{opacity:1}
.hv.play .bt{background:var(--color-accent);color:#fff}
.hv.play .im{background:var(--color-postit)}
.hv.play .im::after{background:var(--color-blueprint)}
.hv.play .h-site .cards i{border-color:var(--color-rule)}
.hv.play .h-site .cards i::before{background:var(--color-accent)}
.hv.play .pn-hd{background:var(--color-ink)}
.hv.play .pn-bt{background:var(--color-accent)}
.hv.play .h-postit{opacity:1;transform:none}
/* ---------- 2 herkenning ---------- */
.pain-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.pain .obj{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.pain .obj > *{animation:bob 6s ease-in-out infinite}
.pain:nth-child(2) .obj > *{animation-delay:-1.5s}
.pain:nth-child(3) .obj > *{animation-delay:-3s}
.pain:nth-child(4) .obj > *{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.6deg)}}
.pain h3{font-size:22px;padding-top:16px;border-top:1px solid var(--color-rule)}
.pain p{margin-top:8px;font-size:15px;color:var(--color-ink-2)}
.o-logos{position:relative;width:200px;height:120px}
.o-logos span{position:absolute;display:flex;align-items:center;gap:5px;padding:7px 10px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgb(25 23 20 / .12);font-family:var(--font-serif);font-weight:700;font-size:15px;white-space:nowrap}
.o-logos span::before{content:"";width:14px;height:14px;border-radius:50%;background:currentColor}
.o-logos .a{left:0;top:4px;color:#D9471F;rotate:-4deg}
.o-logos .b{left:70px;top:38px;color:#C2603C;transform:scaleX(1.45);transform-origin:left;filter:blur(.6px)}
.o-logos .c{left:14px;top:80px;color:#2B3F86;font-family:var(--font-sans);font-style:italic;rotate:3deg}
.o-logos small{position:absolute;font-family:var(--font-hand);font-size:13px;color:#2B3F86}
.o-hex{display:flex;gap:8px;rotate:-2deg}
.o-hex div{width:58px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgb(25 23 20 / .12);padding:5px 5px 7px;font-family:var(--font-mono);font-size:9px;text-align:center;color:var(--color-ink-2)}
.o-hex div i{display:block;height:46px;border-radius:4px;margin-bottom:5px}
.o-hexq{display:block;margin-top:8px;font-family:var(--font-hand);font-size:14px;color:#2B3F86;text-align:center;rotate:2deg}
.o-two{position:relative;width:210px;height:120px}
.o-two .w1,.o-two .w2{position:absolute;width:128px;background:#fff;box-shadow:0 8px 24px rgb(25 23 20 / .12);overflow:hidden}
.o-two .w1{left:0;top:0;border-radius:10px;rotate:-3deg}
.o-two .w1 b{display:block;background:#2B3F86;color:#fff;padding:6px 8px;font-family:var(--font-serif);font-size:12px}
.o-two .w1 span{display:inline-block;margin:8px;padding:3px 9px;border-radius:999px;background:#D9471F;color:#fff;font-size:9px;font-weight:700}
.o-two .w2{right:0;bottom:0;border-radius:0;border:1px solid #9A9A9A;rotate:2deg;font-family:Arial,sans-serif}
.o-two .w2 b{display:block;background:linear-gradient(#DADADA,#BDBDBD);color:#333;padding:4px 6px;font-size:10px;font-weight:400}
.o-two .w2 span{display:inline-block;margin:8px;padding:2px 8px;border:1px solid #777;background:#EEE;color:#222;font-size:9px}
.o-code{width:100%;max-width:200px;position:relative;background:#1F1D1A;border-radius:8px;box-shadow:0 8px 24px rgb(25 23 20 / .2);padding:12px;font-family:var(--font-mono);font-size:9.5px;line-height:1.6;color:#B8B0A2;rotate:2deg}
.o-code em{font-style:normal;color:#F6D9CC}
.o-code .pi{position:absolute;right:-14px;bottom:-22px;width:96px;padding:7px;background:var(--color-postit);font-family:var(--font-hand);font-size:13px;line-height:1.15;color:var(--color-ink);rotate:6deg;box-shadow:0 6px 14px rgb(0 0 0 / .18)}
/* ---------- 3 de huisstijl-proef ---------- */
.proef{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.pf{border:0;padding:0;margin:0 0 18px;min-width:0}
.pf legend{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3);margin-bottom:8px;padding:0}
.pf-opts{display:flex;flex-wrap:wrap;gap:8px}
.pf-o{position:relative;display:flex;align-items:center;gap:7px;padding:7px 11px;border:1.5px solid var(--color-rule);border-radius:14px;background:var(--color-card);cursor:pointer;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.pf-o:hover{border-color:var(--color-ink-3);transform:translateY(-1px)}
.pf-o:has(:checked){border-color:var(--color-ink);background:#fff;box-shadow:var(--shadow-soft)}
.pf-o:has(:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
.pf-o input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pf-l{font-size:14px;font-weight:600;line-height:1.15}
.pf-l small{display:block;font-size:12px;font-weight:500;color:var(--color-ink-3)}
.pf-dots{display:flex}
.pf-dots i{width:18px;height:18px;border-radius:50%;border:2px solid #fff;margin-left:-6px}
.pf-dots i:first-child{margin-left:0}
.pf-aa{font-size:19px;line-height:1;font-weight:600;width:24px;text-align:center}
.pf-mark{width:22px;height:22px;color:var(--color-ink-2)}
.pf-rad{width:20px;height:20px;border:2px solid var(--color-ink-2)}
.proef-hand{margin-top:6px;font-family:var(--font-hand);font-size:19px;color:var(--color-ink-3);line-height:1.25}
.stage-wrap{container-type:inline-size;position:relative}
.stage-tag{position:absolute;left:0;top:-34px;z-index:5}
.stage{--b1:#3B2A20;--b2:#C8553D;--b3:#F3E6D8;--b4:#E9B44C;--hf:var(--font-serif);--r:1em;position:relative;aspect-ratio:16/11;font-size:1.5cqw;line-height:1.3;color:#1E1B18}
.stage[data-pal="fjord"]{--b1:#14324A;--b2:#2F7FA6;--b3:#E5EFF3;--b4:#F2C14E}
.stage[data-pal="mos"]{--b1:#23392B;--b2:#557F33;--b3:#EEF0E2;--b4:#D98E3A}
.stage[data-pal="pruim"]{--b1:#3A1F3D;--b2:#B0436F;--b3:#F6E7EE;--b4:#6BC4B5}
.stage[data-font="sans"]{--hf:var(--font-sans)}
.stage[data-font="mono"]{--hf:var(--font-mono)}
.stage[data-font="hand"]{--hf:var(--font-hand)}
.stage[data-rad="strak"]{--r:.15em}
.stage .m{position:absolute;background:#fff;box-shadow:var(--shadow-lift);overflow:hidden;border-radius:calc(var(--r) * .8);transition:border-radius .4s}
.stage .m,.stage .m *{transition:background-color .45s,color .45s,border-color .45s,border-radius .4s}
.stage.flash .m{animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{0%{transform:scale(.985)}100%{transform:none}}
.hf{font-family:var(--hf)}
.mark{display:inline-block;width:1.4em;height:1.4em;flex:none}
.mark svg{width:100%;height:100%;display:block}
/* website */
.m-site{left:0;top:0;width:64%;height:71%;display:flex;flex-direction:column}
.m-bar{display:flex;align-items:center;gap:.4em;padding:.5em .8em;background:#F2EEE6;font-family:var(--font-mono);font-size:.8em;color:#857E72}
.m-bar i{width:.6em;height:.6em;border-radius:50%;background:#D9D1C2}
.m-bar span{margin-left:.4em}
.s-hd{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.75em 1.2em;background:var(--b1);color:#fff}
.s-logo{display:flex;align-items:center;gap:.45em;font-size:1.35em;font-weight:700;color:var(--b4)}
.s-logo b{color:#fff;font-weight:700}
.s-nav{display:flex;gap:1.1em;font-size:.9em;opacity:.85;white-space:nowrap}
.s-hero{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:1.2em;align-items:center;padding:1.4em 1.2em;background:var(--b3)}
.s-hero .s-title{font-family:var(--hf);font-size:2.3em;line-height:1.02;color:var(--b1);font-weight:700;letter-spacing:-.01em}
.s-hero .s-sub{margin-top:.6em;font-size:.95em;color:#4A453D}
.s-btn{display:inline-block;margin-top:1em;padding:.55em 1.2em;border-radius:var(--r);background:var(--b2);color:#fff;font-weight:700;font-size:.9em}
.s-img{position:relative;height:100%;min-height:7em;border-radius:var(--r);background:var(--b1);overflow:hidden;display:grid;place-items:center;color:var(--b4)}
.s-img .mark{width:45%;height:auto;aspect-ratio:1}
.s-img::before{content:"";position:absolute;width:70%;aspect-ratio:1;left:-20%;bottom:-30%;border-radius:50%;background:var(--b2);opacity:.55}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:.9em 1.2em 1.1em}
.s-cards div{padding:.6em .7em;border:1px solid #ECE6DA;border-radius:calc(var(--r) * .7);font-size:.85em;font-weight:600;display:flex;align-items:center;gap:.5em}
.s-cards div::before{content:"";width:.9em;height:.9em;border-radius:50%;background:var(--b2);flex:none}
/* factuur */
.m-inv{right:0;top:3%;width:33%;height:60%;rotate:2deg;padding:1.1em 1.1em 1em;border-top:.45em solid var(--b2);display:flex;flex-direction:column;font-size:.86em}
.i-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5em}
.i-logo{display:flex;align-items:center;gap:.35em;font-size:1.3em;font-weight:700;color:var(--b1)}
.i-logo .mark{color:var(--b2)}
.i-no{text-align:right;font-family:var(--font-mono);font-size:.78em;color:#857E72}
.i-no b{display:block;font-family:var(--hf);font-size:1.5em;color:var(--b1);font-weight:700}
.i-to{margin-top:1em;font-size:.85em;color:#857E72}
.i-rows{margin-top:.9em;border-top:1px solid #ECE6DA}
.i-row{display:grid;grid-template-columns:1fr auto auto;gap:.6em;padding:.45em 0;border-bottom:1px solid #ECE6DA}
.i-row em{font-style:normal;color:#857E72}
.i-tot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:.6em .8em;border-radius:calc(var(--r) * .6);background:var(--b3);color:var(--b1);font-weight:700}
.i-tot b{font-family:var(--hf);font-size:1.35em}
/* app */
.m-app{right:3%;bottom:0;width:22%;height:60%;border-radius:calc(var(--r) * 1.4 + .8em);background:#191714;padding:.45em;z-index:3}
.m-app .scr{height:100%;border-radius:calc(var(--r) * 1.4 + .4em);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.a-hd{padding:1.2em .8em .8em;background:var(--b1);color:#fff}
.a-hd .s-logo{font-size:1.05em}
.a-body{flex:1;padding:.8em;background:var(--b3);display:flex;flex-direction:column;gap:.6em}
.a-card{padding:.7em;border-radius:calc(var(--r) * .8);background:#fff;box-shadow:0 .3em .8em rgb(25 23 20 / .08)}
.a-card .a-title{font-family:var(--hf);font-size:1.15em;line-height:1.1;color:var(--b1);font-weight:700}
.a-card ul{list-style:none;padding:0;margin:.5em 0 0;font-size:.82em;color:#4A453D}
.a-card li{display:flex;align-items:center;gap:.4em;padding:.2em 0}
.a-card li::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--b4);flex:none}
.a-btn{margin-top:auto;padding:.6em;border-radius:var(--r);background:var(--b2);color:#fff;text-align:center;font-weight:700;font-size:.85em}
.a-tabs{display:flex;justify-content:space-around;padding:.5em 0 .7em;background:#fff}
.a-tabs i{width:.6em;height:.6em;border-radius:50%;background:#D9D1C2}
.a-tabs i:first-child{background:var(--b2)}
/* huisstijlfiche */
.m-spec{left:0;bottom:0;width:72%;height:24%;display:flex;align-items:center;gap:1.4em;padding:0 1.3em;background:#FBF8F2;box-shadow:var(--shadow-soft)}
.f-aa{font-family:var(--hf);font-size:3.6em;line-height:1;font-weight:700;color:var(--b1)}
.f-name{font-size:.85em;color:#4A453D;line-height:1.35;min-width:7em}
.f-name b{display:block;font-size:1.15em;color:#1E1B18}
.f-sw{display:flex;gap:.6em;margin-left:auto}
.f-sw div{text-align:center;font-family:var(--font-mono);font-size:.72em;color:#857E72}
.f-sw i{display:block;width:3.6em;height:3.6em;border-radius:calc(var(--r) * .6);margin-bottom:.35em;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06)}
.f-lbl{position:absolute;left:1.3em;top:.6em;font-family:var(--font-mono);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:#857E72}
@container (max-width:560px){
.stage{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:14px;font-size:2.8cqw}
.stage .m{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;rotate:none}
.m-site,.m-spec{grid-column:1 / -1}
.s-hero{grid-template-columns:minmax(0,1fr)}
.s-img{display:none}
.m-spec{flex-wrap:wrap;padding:2em 1.2em 1em;gap:.8em 1.2em}
.f-sw{margin-left:0}
.m-app{aspect-ratio:9/16}
}
/* ---------- 4 wat je krijgt ---------- */
.get{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.get-t{display:flex;flex-direction:column;padding:0;overflow:hidden}
.get-v{position:relative;height:220px;background:var(--color-paper-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.get-v svg{width:100%;height:100%;display:block}
.get-c{padding:22px 26px 26px}
.get-c h3{font-size:26px}
.get-c p{margin-top:6px;color:var(--color-ink-2)}
.g-l{fill:none;stroke:var(--color-ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.g-d{fill:none;stroke:var(--color-ink-3);stroke-width:1.5;stroke-dasharray:4 5}
.g-card{fill:#fff;stroke:var(--color-rule)}
.g-soft{fill:#ECE6DA}
.g-ink{fill:var(--color-ink)}
.g-acc{fill:var(--color-accent)}
.g-post{fill:var(--color-postit)}
.g-blue{fill:var(--color-blueprint)}
.g-t{font-family:var(--font-sans);font-size:11px;font-weight:600;fill:var(--color-ink-2)}
.g-tw{font-family:var(--font-sans);font-size:10px;font-weight:700;fill:#fff}
.g-h{font-family:var(--font-hand);font-size:15px;fill:var(--color-ink-2)}
.g-aa{font-family:var(--font-serif);font-size:54px;font-weight:600;fill:var(--color-ink)}
/* huisstijl: stalen schuiven in */
.get-t .pop{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.5,.5,1);transition-delay:var(--d)}
.get-t.in .pop{transform:none}
/* ontwerpsysteem: één knop, drie schermen */
.g-flow{stroke:var(--color-accent);stroke-width:2;fill:none;stroke-dasharray:4 4;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
/* klikbaar ontwerp: cursor klikt, volgend scherm schuift in */
.g-cursor{animation:cur 4.5s ease-in-out infinite}
@keyframes cur{0%,10%{transform:translate(40px,40px)}35%,45%{transform:translate(0,0)}100%{transform:translate(0,0)}}
.g-ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:rip 4.5s ease-out infinite}
@keyframes rip{0%,42%{opacity:0;transform:scale(.3)}46%{opacity:.6}60%,100%{opacity:0;transform:scale(1.8)}}
.g-next{animation:nxt 4.5s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes nxt{0%,48%{transform:translateX(120px);opacity:0}62%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
/* ux en ui: van schets naar scherm */
.g-ui{opacity:.25;transition:opacity .8s .6s}
.get-t.in .g-ui{opacity:1}
/* ---------- 7 afsluiter ---------- */
/* ---------- responsief en stilstaand ---------- */
@media (max-width:1023px){
.hero-grid,.proef{grid-template-columns:minmax(0,1fr);gap:36px}
.pain-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.stage-tag{position:static;margin-bottom:12px}
/* onder 1024px staat het voorbeeld boven de keuzes, zodat je een tik meteen ziet effect hebben */
.proef{gap:28px}
.proef .stage-wrap{order:-1}
}
@media (max-width:767px){
.get{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.pain-row{grid-template-columns:minmax(0,1fr)}
.hv{font-size:2.6cqw}
.hv .h-postit{display:none}
}
@media (prefers-reduced-motion:reduce){
.pain .obj > *,.g-flow,.g-cursor,.g-ripple,.g-next,.stage.flash .m{animation:none}
.g-next{transform:none;opacity:1}
.hv .drop{display:none}
}
}
/* 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}
/* AI-productfotografie: voor-en-na-schuif met een getekend voorbeeldproduct */
.foto-li{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foto-li li{position:relative;padding-left:22px;color:var(--color-ink-2)}
.foto-li li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--color-accent)}
.fcmp{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lift);background:#E8DFD0;touch-action:pan-y}
.fc-layer{position:absolute;inset:0}
.fc-layer svg{display:block;width:100%;height:100%}
.fc-after{clip-path:inset(0 0 0 var(--pos))}
.fc-before svg{filter:sepia(.35) saturate(.85) contrast(.9) brightness(.97)}
.fc-tag{position:absolute;top:14px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;background:rgb(25 23 20 / .72);color:#fff}
.fc-before .fc-tag{left:14px}
.fc-after .fc-tag{right:14px;background:var(--color-accent-strong)}
.fc-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgb(25 23 20 / .12);pointer-events:none}
.fc-handle i{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--color-ink);font-style:normal;font-weight:800;font-size:15px;letter-spacing:-1px;box-shadow:var(--shadow-soft)}
.fc-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.fcmp:has(.fc-range:focus-visible) .fc-handle i{outline:2px solid var(--color-accent);outline-offset:2px}
.fcmp.glide .fc-after,.fcmp.glide .fc-handle{transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1),left 1.2s cubic-bezier(.2,.8,.2,1)}
/* tekening */
.b-wall{fill:#CDB98C}
.b-desk{fill:#8C6F4C}
.b-box{fill:#B79A6B}
.b-mug{fill:#E6E1D6}
.b-mug-h{fill:none;stroke:#E6E1D6;stroke-width:5}
.b-cable{fill:none;stroke:#2B2622;stroke-width:3}
.b-paper{fill:#F1EBDD}
.b-shadow{fill:#2B2016;opacity:.55}
.a-shadow{fill:#5E4B36;opacity:.35}
.j-lid{fill:#2E2A26}
.j-rim{fill:#45403A}
.j-glass{fill:rgb(255 255 255 / .35);stroke:rgb(0 0 0 / .12);stroke-width:1.5}
.j-fill{fill:#9E2B25}
.j-lab{fill:#F7F1E6}
.j-shine{fill:rgb(255 255 255 / .35)}
.j-brand{font-family:var(--font-serif);font-size:17px;font-weight:700;fill:#3B2A20}
.j-kind{font-size:10px;font-weight:600;letter-spacing:.08em;fill:#C8553D;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
.fcmp.glide .fc-after,.fcmp.glide .fc-handle{transition:none}
}
.svc-hero{margin-top:8px;margin-bottom:-58px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:8px;margin-bottom:-80px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:5px}
}
/* 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:80px}
}
/* 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:0px;margin-bottom:-48px}
.svc-next{padding-top:80px}
}
@media (min-width:1280px) and (max-width:1439px){
.svc-hero{margin-top:0px;margin-bottom:-26px}
.svc-next{padding-top:80px}
}

/* omzetting naar Wagtail: de doorverwijzingen onder "wat je krijgt" komen uit rich text (.rt in styles.css) */
.get-also{color:var(--color-ink-2)}